(web site or gui) user interface design: principles and development process minder chen

(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 --


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.


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


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


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


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


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


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



Prototyping Activities

Define prototyping objectives

Choose prototyping tools

Build prototype

Investigateprototype

Task scenarios

Prototype

objectives

Initial prototype

Tool chosen

Design Feedback

GUI DesignPrototype profile


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


Navigation Diagram: A Paper-Based Prototype


Paper-Based Prototype


Examples of Windows Controls


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


Examples of Feedback


Preserving Work History• What are the features in a web browser that

supports the preservation of work history?


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


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".


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.


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


An Example of GUI Design: Login Screen


Prototype GUI

Evaluate GUI

GUI Design

Model User Tasks

Model User Objects

DefineStyle Guide

DefineStyle Guide




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


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


Prototype GUI

Evaluate GUI

GUI Design

Model User Tasks

Model User Objects

Model User Objects

DefineStyle Guide



Search Criteria


Picking List


Detail Record


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


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


Web Develop Workflow

ContentProvider/Syndication

ProductionTeam

Testing Team

Web SiteAdministrator& Manager

DevelopmentServer

Testing/StagingServer

Production/HostingServer

Testing software

Web analysissoftware

Authoring & programmingsoftware

Web User


Google Web Site Design

• http://marketplace.publicradio.org/display/web/2007/11/19/face_of_google/

http://marketplace.publicradio.org/display/web/2007/11/19/face_of_google/


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


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.


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


Navigation Diagram and Page Banner• FrontPage 2000

Web Site Architecture Design Example


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


Web Site Design

Could be more than one level


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>


Gifts.com: Gift Finder


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.


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


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

(web site or gui) user interface design: principles and development process minder chen

Documents