ACS 367 Interface Design

Chapter 2

Galitz, Wilbert O. The Essential Guide to User Interface Design

Graphical User Interface

User interface– collection of techniques & mechanisms to

interact with something

GUI

Use pointing device – primary interaction mechanism – equivalent to human hand

Interact with objects – visible to user– used to perform tasks

Perform operations/actions on objects– access & modify

Direct Manipulation

System portrayed as extension of real world– (real-time)

Continuous visibility of objects and actions WYSIWYG

Actions – rapid & incremental– visible display of results– easily reversible

Indirect Manipulation

Used when direct manipulation not feasible– operation difficult to conceptualize/depict

graphically– graphics capability limited– limited space or screen real estate– operation and action learning overload

Substitutes words & text– pull-down or pop-up menus for symbols– typing for pointing

GUI: Advantages

Symbols recognized faster than text Faster learning Faster use and problem solving Easier remembering More natural Exploits visual/spatial cues Fosters more concrete thinking

GUI: Advantages (2)

Provides context Fewer errors Increased feeling of control Immediate feedback Predictable system responses Easily reversible action Less anxiety concerning use

GUI: Advantages (3)

More attractive May consume less space Replaces national languages Easily augmented with text displays Low typing requirements Smooth transition form command language

system

GUI: Disadvantages

Greater design complexity Learning still necessary Lack of experimentally derived design

guidelines Inconsistencies in technique and terminology May consume more screen space Hardware limitations

GUI: Disadvantages (2)

Ease of use– best determined by design not interaction style

Consider user preference for interaction style

Content of graphical screen critical for usefulness: more confusion not less if– wrong presentation– cluttered presentation

GUI Success Dependent

On skills of designer

On application of established principles of usability

Hall of Fame– Examples of good interfaces – won’t

see many! Hall of Shame– Examples of poor interfaces

www.webpagesthatsuck.com

Bad Design

How do you cancel?

UI Development Process

Design cycleUser-centered designTask analysisRapid prototypingEvaluationProgrammingIteration

Design Goals

Aesthetically pleasing Clarity Compatibility Comprehensibility Consistency Control

Design Goals (2)

Directness Efficiency Familiarity Flexibility Forgiveness Predictability Recovery

Design Goals (3)

Responsiveness Simplicity Transparency Trade-Offs

Design Process Problemsby Gould

Nobody gets it right the first time Development full of surprises Good design requires living in sea of

changes Making contracts to ignore change will

never eliminate the need for change

Design Process Problems (cont.)by Gould

People will still make mistakes using best designed system

Designers need good tools Must have behavioral design goals like

performance design goals

Five Commandments in Designing for People

1.Gain complete understanding of users & their tasks

2.Solicit early & ongoing user involvement

3.Perform rapid prototyping and testing

4.Modify and iterate the design as much as necessary

5.Integrate the design of all the system components

Design Team

Balanced design team with expertise in:– development– human factors– visual design– usability assessment– documentation– training

Design Team

Select team who can effectively– work together– communicate with each other

Keep team together– locate in close proximity

Usability

Little to do with icons or flashy graphics Starting goal:

– let users get work done without spending a lot of time dealing with working the computerworking the computer

Additional goal:– help users work better and faster withwork better and faster with

application than without it.

Development of Guidelines

Designers of Lisa & Macintosh – importance of good user interface design– publish ideas to others

» development of set of human interface guidelines

Development of Guidelines

Most important guidelines were the design principles -- universal

Design principles not tied to platform– based on human abilities and psychology– not dependent on conventions of a particular

platform

10 Basic Principles (drove design of Macintosh)

Consistency– allows users to learn something once and then

apply it again & again Aesthetic integrity

– good design is understated– user can concentrate on information/content

10 Basic Principles (drove design of Macintosh)

Perceived stability– let user control changes – for any change user should know about and

okay See-and-point, Not Remember-and-type Direct manipulation

– lets user feel as if they directly control the world inside the computer

10 Basic Principles (drove design of Macintosh)

Metaphors from the real world– way to make an interface understandable to

new users WYSIWYG -- What You See Is What You Get

– not something like ^bThis is a bold phrase^b

– but like this -- This is a bold phrase

10 Basic Principles (drove design of Macintosh)

Feedback and dialog– never keep the user guessing

– study showed: when no visible response to button click user assumed machine was hung and restarted it in 8.5 seconds

Forgiveness– humans make mistakes

– computer should allow for human mistakes

User control

Additions to the Basics

Constraints Intelligence Elegance Transparency Attention to detail

Additions to the Basics: Constraints

Reduce complexity Example of Japanese vending machine

– lead customer through the process– general to specifics

» notify when new mail arrives?

» If yes, then -- beep, put up a notifier window, or both

Additions to the Basics: Intelligence

Augment constraints with intelligence so computer helps user to make proper choice

Minor tasks taken care of– formatting phone numbers– option of automatically aligning objects

Know when to stop– let users override or turn off features

Additions to the Basics: Elegance

Elegant products– don’t do everything– what they do, they do extremely well– and they make it look easy

Meet users requirements/needs in most simple and straightforward way

Just say “No” -- to feature creep 80/20 solution

Additions to the Basics: Transparency

Interface transparent when user doesn’t really notice or think about it not because user can’t see it

Hide features in plain sight -- no need to search for a particular feature

Avoid technical jargon (computerese)– “SysErr Code: -34” or “The disk is full”

Additions to the Basics: Transparency

Keep status messages simple– general statement about what’s happening– concise statements

Don’t interrupt (or if you must do it quietly)– problem when background process (like printer

out of paper) interrupts a foreground task (writing paper/developing slide)

» results in increase in stress level for user performing foreground task

Additions to the Basics: Attention to Detail

Sentence in text:– “We worry about all this… because your users

notice it to.” What is the author’s credibility? The text’s?

Additions to the Basics: Attention to Detail

Details can destroy user’s faith/confidence in an application

Development problems don’t concern the user --

The user wants a program that looks and works exactly the way it should