View
222
Download
0
Category
Preview:
Citation preview
(Web Site or GUI) (Web Site or GUI) User Interface Design:User Interface Design:
Principles and Development Process
Minder Chen
© Minder Chen, 1997-2007 Web Site and GUI Design - 2
User Interface: How Important Is It? • "To the end user, the interface is the system."
-- Bob Kuo --
• "The real problem of the interface is that it is an interface. Interfaces get in the way. I don't want to focus my energies on an interface. I want to focus on my job." -- Donald Norman --
© Minder Chen, 1997-2007 Web Site and GUI Design - 3
Conceptual Framework of Interface Design
Designer
System User Interface
SystemImage
System Functionalities
DesignModel
User'sTask Model
User'sMental Model of the System
User
* Adopted from Donald Norman, The Design of Everyday Thing, Doubleday, 1988.
© Minder Chen, 1997-2007 Web Site and GUI Design - 4
Initial Screen Design PORT073 MANTEL INFO RELEASE 4.2 USER=JOHNSMIT 17-OCT-95 11:27:23
---------------------------------------------C O M P U T E R T E L E P H O N E I N D E X---------------------------------------------
> THE SUBSCRIPER IS
> JONES > JIM R.
> 17 PINE STREET > > NEW YORK> NY 10012
PF1=HELP PF2=DIRECTORY INFORMATION PF5=OTHER SERVICESPF4=VIDEOTEX
© Minder Chen, 1997-2007 Web Site and GUI Design - 5
Usability Problems Classification in the Dialogue
• Simple and natural dialogue• Speak the user’s language• Minimize the user’s memory load • Be consistent• Provide feedback • Provide clearly marked exits • Provide shortcuts • Provide good error messages• Error prevention
© Minder Chen, 1997-2007 Web Site and GUI Design - 6
Improved Dialogue Design (CUI)TELEPHONE INDEX
====================
Telephone number (212) 345-6789 has the following subscriber:
Jim E. Jones
17 Pine Street
New York, NY 10012
Press:
RETURN key to be able to enter a new telephone number
ESC to leave the Telephone Index
PF1 to get Help about how to use this system
PF2 to go to the Directory Information system
PF4 to go to the general Videotext service
PF5 to get a list of Other Services available
© Minder Chen, 1997-2007 Web Site and GUI Design - 7
Improved Dialogue Design (GUI)TELEPHONE INDEX
Enter telephone number to retrieve information
of its subscriber: (212) 345-6789
Subscriber's
Name: Jim E. Jones
Street Address: 17 Pine Street
City, State, ZIP: New York, NY 10012
Search a new telephone number
Online Help (F1)
Exit
Go to Directory Information System
Go to the General Videotext Service
Go to other services
© Minder Chen, 1997-2007 Web Site and GUI Design - 8
Complete GUI Process Model
Design GUI
Prototype GUI
Evaluate GUI
GUI Design
Model User Tasks
Model User Objects
DefineStyle Guide
Define Users and Usability Requirements
user classesuser classes
usability requirements
task models & task scenarios
usability requirements
usability problems
style guideUOM
UOM
UTM
• UOM: User Object Model• UTM: User Task Model
© Minder Chen, 1997-2007 Web Site and GUI Design - 9
GUI Prototype• Objectives:
– Investigate and improve usability of the proposed GUI design.
– Provide feedback on task model, user object model, and style guide.
• Benefits: – Better communication with the user– Improve design through feedback and
iteration – Reduce development risk– User education – Greater user acceptance
Design GUI
Prototype GUIPrototype GUI
Evaluate GUI
GUI Design
Model User Tasks
Model User Objects
DefineStyle Guide
Define Users and Usability Requirements
© Minder Chen, 1997-2007 Web Site and GUI Design - 10
Prototyping Activities
Define prototyping objectives
Choose prototyping tools
Build prototype
Investigateprototype
Task scenarios
Prototype
objectives
Initial prototype
Tool chosen
Design Feedback
GUI DesignPrototype profile
© Minder Chen, 1997-2007 Web Site and GUI Design - 11
GUI Prototyping • Throw-away vs. evolutionary prototyping• User-participated vs. user-driven prototyping• Fedelity (realism)
Breadth of coverage (Horizontal)
Depth of system
Interface only
Processing functions
Stored data
Local Global
Ve
rtic
al
Shallow
Deep
GUI
Prototype
GUI
Prototype
© Minder Chen, 1997-2007 Web Site and GUI Design - 12
Navigation Diagram: A Paper-Based Prototype
© Minder Chen, 1997-2007 Web Site and GUI Design - 13
Paper-Based Prototype
© Minder Chen, 1997-2007 Web Site and GUI Design - 14
Examples of Windows Controls
© Minder Chen, 1997-2007 Web Site and GUI Design - 15
Use of Controls for Selections of Value or Action
* The use of these controls should be discouraged as they are often difficult to understand.
Control Number of Choices in Domain Shown Type of ControlsMenu bar Max. 10 items Static actionPull-down menu Max. 12 items Static action*Cascading menu Max. 5 items, 1 cascade deep Static actionPop-up menu Max. 10 items Static actionCommand button 1 for each button, max. of 6 per window Static actionCheck box 1 for each box, max. of 10 per group Static set/select valueRadio button 1 for each button, max. of 6 per group box Static set/select valueList box Any number in list, display 8-10 rows Dynamic set/select value
Drop-down listbox
Up to 20, display 1 selection at a time Dynamic set/select singlevalue
Data window Dependent on data displayed Dynamic set/select value
*Spin control Max. 10 values Static set/select valueSlider Dependent on data displayed Static set/select value in
range
© Minder Chen, 1997-2007 Web Site and GUI Design - 16
Examples of Feedback
© Minder Chen, 1997-2007 Web Site and GUI Design - 17
Preserving Work History• What are the features in a web browser that
supports the preservation of work history?
© Minder Chen, 1997-2007 Web Site and GUI Design - 18
© Minder Chen, 1997-2007 Web Site and GUI Design - 19
© Minder Chen, 1997-2007 Web Site and GUI Design - 20
Object-Action, Not Action-Object
Action-Object Paradigm: • In most traditional CUI applications, the user selects an action (e.g.
selects a menu, presses a function key or types a command) and then enters the data to which the command is to be applied.
• Example: – Action: Select a 'Delete customer' option– Object: Type in a customer code.
Object-Action Paradigm: • In most GUI applications, the object is selected first (often from a
graphical representation) and then the action is defined.
• Example: – Object: Select a customer code from a scrollable
list displayed in a window.– Action: Select a 'delete' option from a pull-down menu.
Design GUIDesign GUI
© Minder Chen, 1997-2007 Web Site and GUI Design - 21
An Example of Task Analysis • Task: Customer Inquiry on Publication• Task Goal: to give the customer information about a publication (e.g. title, price,
date, whether available in stock)• Frequency - 200/day• Inputs:
– customer requirements for information– information on publications from the system
• Outputs: information on publication to the customer• When performed: in response to customer telephone call. Random timing in the
office.• Constraints:
– the customer is on the telephone, so they can't see the screen. – time is costing them money– delays/absences should be avoided (e.g. "I'll just go and look....").
• Sub-tasks: – ask the customer exactly what information they require (if it concerns a
specific publication)– attempt to trace the publication in the system give the customer the requested
information. – (if the inquiry is more general) attempt to identify a list of publications which
might meet the customer's requirements read the list to the customer.• Contingencies: customer switches from "I'd like to inquire about......." to "Can I
order that please".
© Minder Chen, 1997-2007 Web Site and GUI Design - 22
Task Scenario Scripts Help to Define Window Navigation
Order Entry• customer gives details the publication they want to order
– Apply Filter [Publication List]– Find Publication [Publication List]– Examine Publication [Publication List]
• give customer details of publication (including price)customer confirms want to order (the first publication)
– Create Order [Order]– Order Publication [Order]
• customer gives details of second publication– Apply Filter [Publication List]– Find Publication [Publication List]– Examine Publication [Publication]
• give customer details of publication (including price) customer confirms want to order (an additional publication)
– Order Publication [Order]• ask for customer name and address
– Find Customer [Customer]• if not found,
– Create Customer [Customer] – Associate Order with Customer [Order]
• give order total, ask for payment details customer gives payment details– Create Payment [Payment]– Verify Payment [Payment]
• inform customer order accepted.
© Minder Chen, 1997-2007 Web Site and GUI Design - 23
Using State Transition Diagram (STD) to Define Window Navigation
State A
State B
condition
action
NotationNotation ExampleExample
open w_ops_main
cb_go_to_main: clicked
Return to w_ops_mainwith customer_id
cb_ops: clicked
Open w_ops
cb_go_to_main:clicked
Close w_opsReturn to w_ops_main
Return to the Windowenvironment
File/Exit menu item: clicked
Pick customerwindow (w_pick_cust)
Order Processing Main Window (w_ops_main)
Order processingwindow (w_ops)
ops application: open
cb_pick_cust: clicked
Open w_pick_cust
Close w_opsClose w_ops_main
© Minder Chen, 1997-2007 Web Site and GUI Design - 24
An Example of GUI Design: Login Screen
Design GUIDesign GUI
Prototype GUI
Evaluate GUI
GUI Design
Model User Tasks
Model User Objects
DefineStyle Guide
DefineStyle Guide
Define Users and Usability Requirements
Design GUIDesign GUI
© Minder Chen, 1997-2007 Web Site and GUI Design - 25
Using Drop-down Menu for Triggering Window Actions
• Being a modeless primary window, the window is not dependent upon other windows, except the application window.
• For example a Customer window the menu window actions are:
Customer Edit Status HelpNew Undo SuspendOpen Cut Re-instatePrint CopyDelete Paste
GUIDesignGUI
Design
© Minder Chen, 1997-2007 Web Site and GUI Design - 26
Define Actions for Windows, User Objects, and Entities
• Window Action:
Action actually performed by user on window via actions against visual objects (e.g., windows controls, menu items)
• User Object Action: The action the user wants to perform on the user object.
Entity effect: The effect of the action in the system to change entities. – CRUD: Create, Read, Update,
and Delete entities.
– Update entity attributes.
Window
File Edit View Help
AddSingle Order
ViewDelete
Update
Order
» Add an order
» Update order
» Change order items
» Delete an order
Order
Order Item
» Create» Read» Update» Delete
» Create» Read» Update» Delete
GUI Design
User Object Model
Data Model
Design GUIDesign GUI
Prototype GUI
Evaluate GUI
GUI Design
Model User Tasks
Model User Objects
Model User Objects
DefineStyle Guide
Define Users and Usability Requirements
© Minder Chen, 1997-2007 Web Site and GUI Design - 27
Search Criteria
© Minder Chen, 1997-2007 Web Site and GUI Design - 28
Picking List
© Minder Chen, 1997-2007 Web Site and GUI Design - 29
Detail Record
© Minder Chen, 1997-2007 Web Site and GUI Design - 30
Web Development Life Cycle• Identify goals
– Every web site has goals – Work with clients to define them– Multiple goals
• Identify target users– User platforms– Technical knowledge of the user– Domain knowledge of the user
• Determine task requirements• Design the web site
– Determine the major themes of the web sites– Define navigation maps
• Implement the web site• Evaluate the web site• Modify and improve the web site
© Minder Chen, 1997-2007 Web Site and GUI Design - 31
Web Project TeamClient
Account Manager
Producer
CreativeLead
ProductionLead
InformationArchitect
Technical Lead
QualityAssurance
Lead• Copywriter• Designer• Sounder designer• Video designer• Animators
• HTML coder
• Art production
• Focus group
• Script programmer• Component
programmer • Database architect• Security expert• Network administrator
• Tester
Source: Adapted from Collaborative Web Development
© Minder Chen, 1997-2007 Web Site and GUI Design - 32
Web Develop Workflow
ContentProvider/Syndication
ProductionTeam
Testing Team
Web SiteAdministrator& Manager
DevelopmentServer
Testing/StagingServer
Production/HostingServer
Testing software
Web analysissoftware
Authoring & programmingsoftware
Web User
© Minder Chen, 1997-2007 Web Site and GUI Design - 33
Google Web Site Design
• http://marketplace.publicradio.org/display/web/2007/11/19/face_of_google/
© Minder Chen, 1997-2007 Web Site and GUI Design - 34
Know Your Audience• Web surfers
– Use strong graphics and bold statements of content to attract the web surfers
• Novice and occasional users– Use clear structure and easy access to help
occasional users. (e.g. overview pages, hierarchical maps, design graphics and icons)
• Expert and frequent users– Use stripped-down, fast-loading text menus for
frequent users (e.g. detailed text menus, site structure outlines or comprehensive site indexes)
• International users– Provide translations
© Minder Chen, 1997-2007 Web Site and GUI Design - 35
Separate content from the interface • Developing content independently from the user interface allows you to
develop both more efficiently. If the two are developed interdependently, then every change made in one would have to be immediately considered in the other. Frames, JavaScript, and Java applets all allow you to separate the interface from the content. For example, the text in this guideline is used in both the print-all version and the frames version without modification.
© Minder Chen, 1997-2007 Web Site and GUI Design - 36
Web Interface Design Issues• Ask the following question first:
– Who are your target audiences? – What will be your web site's focus? – What information will you like to be on your web site? – How are you going to present and organize them?
• Balanced between texts and multimedia objects• Effective vs. Affective pages• Navigation map and support: Use hierarchical structure
as the baseline.• Use hypertext links wisely• Use tables, frames, or dynamic HTML for layout control• Consistency
• Interactivity
© Minder Chen, 1997-2007 Web Site and GUI Design - 37
Navigation Diagram and Page Banner• FrontPage 2000
Web Site Architecture Design Example
© Minder Chen, 1997-2007 Web Site and GUI Design - 39
Informational content• Product descriptions
• Photos and graphics
• FAQs
– (Frequently Asked Questions) are a common element of most Web sites. They serve as an easy way to answer questions about your business and how the site works. Good FAQs should dramatically cut down on e-mail. Your FAQs should include information about the products you sell, how to order, what credit cards are accepted, what secure transaction system is used, and where to find specific information on your site.
• News sections
• Reviews
• Guest columns
• Newsletters
• Databases
• Testimonials
• Customer-generated articles and reviews
© Minder Chen, 1997-2007 Web Site and GUI Design - 40
Web Site Design
Could be more than one level
© Minder Chen, 1997-2007 Web Site and GUI Design - 41
Sample Form HTML Page
Choose Your Favorite Colors:
<SELECT NAME="Color" SIZE="1">
<option value="none">
- - Select a color - -
<OPTION value="B">Blue
<OPTION>Red
<OPTION value="G">Green
<OPTION value="BR">Brown
<OPTION value="Y">Yellow
</SELECT> <BR>
© Minder Chen, 1997-2007 Web Site and GUI Design - 42
Gifts.com: Gift Finder
© Minder Chen, 1997-2007 Web Site and GUI Design - 43
Principles of User Interface Design• Aesthetics
– Spatial grouping, contrast, 3-D representation.
• Feedback – Provide immediate and tangible feedback for actions
• Forgiveness– Minimize opportunities for errors such as confirm
deletion of a customer record. – Handle errors gracefully
• Awareness of Human Strengths and Limitations– Present available choices explicitly– Use radio button, list box, picking list, etc.
© Minder Chen, 1997-2007 Web Site and GUI Design - 44
Top Ten Mistakes in Web DesignVery Severe• Outdated information• Slow download times • Bleeding-edge technology• Scrolling text and looping animations Severe• Complex URLs• Lack of navigation support• Non-standard link colorsMedium• Frame• Orphan pagesSmaller problem• Scrolling navigation pages
Source: Jakob Nielsen, http://www.useit.com/alertbox/990502.html
© Minder Chen, 1997-2007 Web Site and GUI Design - 45
GUI Design Guidelines• Know the users• Support various users' work pattern and skill
levels• Simplify frequently used tasks • Be consistent and clear• Provide navigational assistance• Use real-world metaphors for icons, forms, and
graphic objects• Test early and frequently • Set up system-wide and corporate-wide standards • Start with business event analysis & task analysis• Understand limitations of web-based systems• Apply appropriate GUI design methodology
Recommended