SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 6, 2003.

Slides:



Advertisements
Similar presentations
Site Critique Fidelity.com By Brooke Baldwin November 2007.
Advertisements

Chapter 11 Designing the User Interface
Chapter 3 – Web Design Tables & Page Layout
User Interface Structure Design
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Display (Output) Design Cognitive functions Present task data Communicate task organization Grouping and ordering Draw attention Aid discrimination/searching.
Marketing Communications Update Plan Communications Group March, 2007.
Homepage Design Audience Satisfaction Survey. Survey Goal: The new website design should invoke an aesthetic emotional response with our audience. The.
Virtual University - Human Computer Interaction 1 © Imran Hussain | UMT Imran Hussain University of Management and Technology (UMT) Lecture 43 Information.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 3, 2005.
This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation. All.
Content Management System 213 Project Peter Roessler, Dhea Maloney, Chris Marin, Chan Jean Lee.
SIMS 213: User Interface Design & Development Marti Hearst Tues, March 5, 2002.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 26, 2004.
Web Site Design Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 6, 1999.
Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,
I213: User Interface Design & Development Marti Hearst March 1, 2007.
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
Art 155 Information Architecture In-class Presentation Week 9A.
Interaction Styles Interface Widgets. What are Interaction Styles?  A Collection of interface objects and associated techniques from which an interaction.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 17, 2005.
© Lethbridge/Laganière 2001 Chapter 7: Focusing on Users and Their Tasks1 7.1 User Centred Design (UCD) Software development should focus on the needs.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb
Kapi’olani Community College Art 155 Information Architecture In-class Presentation Week 8B.
Quark QuarkXPress 4 Intermediate Level Course. Working with Master Pages The Document Layout Palette allows you to add, delete, and move document and.
Www: Greeked Templates Jakob Nielsen (useit.com & jnn.org) Thomas S. Tullis (Fidelity Investments)
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 22, 2001.
Chapter 13: Designing the User Interface
Information Architecture Donna Maurer Usability Specialist.
THE BASICS OF THE WEB Davison Web Design. Introduction to the Web Main Ideas The Internet is a worldwide network of hardware. The World Wide Web is part.
Designing for the Web. What Makes Good Design Content is important but content alone will not make your site work. Good design is: –understandable –interesting.
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
 What is a wireframe?  What features are important?  Which wireframe tools might you want to try?
1 Web Basics Section 1.1 Compare the Internet and the Web Compare Web sites and Web pages Identify Web browser components Describe types of Web sites Section.
Large Corporation Web Sites Efficient process Maximum effectiveness.
What is Multimedia?. Today’s objectives Define multimedia Work with XHTML Work with CSS.
SAMPLE HEURISTIC EVALUATION FOR 680NEWS.COM Glenn Teneycke.
Web Content Development Dr. Komlodi Class 22: Wirerfames.
Interacting with IT Systems Fundamentals of Information Technology Session 5.
SWE205 Review Spring Why is software unusable? Users are no longer trained. Why? Feature creep Inherently hard: a problem of communication Designed.
What’s New in SkillPort 7 Presenter Name Title. SkillPort 7 – a whole new look and feel! Complete redesign of the SkillPort User Interface –Both Student.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
User Interface Structure Design Chapter 11. Key Definitions The user interface defines how the system will interact with external entities The system.
Slide 1 Chapter 11 User Interface Structure Design Chapter 11 Alan Dennis, Barbara Wixom, and David Tegarden John Wiley & Sons, Inc. Slides by Fred Niederman.
Giving to the Libraries. A Competent Site  It’s all here (but its all here)  Users have a telephone book, but they need a map.
Interface Design.
Copyright © 2012 W3C (MIT, ERCIM, Keio) BAD: Before and After Demo Shadi Abou-Zahra W3C Web Accessibility Initiative (WAI)
Date 23 rd Jan Shatin 沙田 Mobile Information Architecture.
Development and Design of Multimedia. Planning Your Title 1)Develop the concept or idea – a multimedia project starts with an idea that supports a vision.
Toolglasses and Magic Lenses. 2 Reading: Eric A. Bier, Maureen C. Stone, Ken Pier, William Buxton and Tony D. DeRose, “Toolglass and magic lenses: the.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® DESIGN PROJECT PRODUCTION PHASES.
User Interface Components Lecture # 5 From: interface-elements.html.
 Network  A _____ of computers that can _________ w/ each other  Examples of hardware  ______________ & communication lines  Internet  Hardware.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
Activity Flow Design Gabriel Spitz 1 Lecture # 12 Guiding the flow of activities.
Storyboard, Design, Layout.  Create storyboards  Decide upon navigation  Prepare short page summaries.
Computer-based Media Language Elements Understanding how we communicate through media Stewart.C. (2007). Media: New Ways and Means. John Wiley & Sons:
COMM1PCOMM1P Alan Woolrych E-store lectures Monday 12/11/01 11:00 EC 13:00 ECA Page Layout 7.
Structure and Function: IA for Web Applications. Innovate - For What’s Next™ ©1999 Scient, Proprietary and Confidential Page 2 Structure - IA with content.
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
Executive Summary - Human Factors Heuristic Evaluation 04/18/2014.
Section 6.1 Section 6.2 Write Web text Use a mission statement
Chapter 2 Hix & Hartson Guidelines.
User Interface Components
DESIGN PROJECT PRODUCTION PHASES DEFINE, STRUCTURE, DESIGN, BUILD AND TEST, DELIVERY ® Copyright 2012 Adobe Systems Incorporated. All rights reserved.
Systems Analysis and Design
DESIGN PROJECT PRODUCTION PHASES DEFINE, STRUCTURE, DESIGN, BUILD AND TEST, DELIVERY ® Copyright 2012 Adobe Systems Incorporated. All rights reserved.
Presentation transcript:

SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 6, 2003

Wireframing What is the main idea? –Separate content from layout and display –From last week: Use the page layout to signal the flow of interaction Group conceptually related items together –Nielsen: What does the layout communicate? Test if a page of content becomes more usable because of the layout A template (for a home page) should contain what items?

How WireFraming Fits In Kelly Goto & Eric Ott of Macromedia edia/monterey/architecture/

From

How to Test A Layout Study conducted by Thomas S. Tullis from Fidelity Investments in 1998 Assessed the usability of five alternative template designs for their intranets. Method: –Show templates with “greeked” text –Draw labeled boxes around each page corresponding to 9 elements –No overlapping allowed –Indicate if something appears not to be there

The Elements 1.Main content selections for this page 2.Page title 3.Person responsible for this page 4.Intranet-wide navigation (e.g., intranet home, search) 5.Last updated date 6.Intranet identifier/logo 7.Site navigation (e.g, major sections of this section of the intranet) 8.Confidentiality/security (e.g, Public, Confidential, etc.) 9.Site news items

From

Nielsen Wireframing Example Different parts of the designs scored better Best parts were taken from each design and combined Resulted in an overall better score

Results of Study Correct Page Elements Subjective Appeal (-3 to +3) Template 152%+1.3 Template 367%+0.9 Final Design72%+2.1

Modes What are they? When are they useful? Why can they be problematic? How can these problems be fixed?

Modes What are they? –The same user actions have different effects in different situations. When are they useful? –Temporarily restrict users actions –When logical and clearly visible and easily switchable Drawing with paintbrush vs. pencil Autocorrect (if easy to switch the mode) Why can they be problematic? –Big memory burden –Source of many serious errors How can these problems be fixed? –Don’t use modes – redesign the system to be modeless –Redundantly visible

Modal Blooper

Modal Blooper (and other problems too)

Toolglass + Magic Lenses An innovative way to deal with modes: –Make selection of operations visible as you are doing the operations –Work by Fishkin, Stone, and Bier at Xerox PARC

Toolglass & Magic Lenses A palette of tools Applying the fill-color tool Composing two tools – Fill-color and magnify

Toolglass + Magic Lenses Magic Lenses are windows which know about what’s below them, and/or what’s above them. –Using them makes the mode explicit –They can alter input, output, or both. –They can be combined See video