User Interface Design

UI design is not just about the

arrangement of media on a screen
Its designing an entire experience
for people, hence a look and feel
Psychology: building a mental
model
Ergonomics: facilitating navigation

User interface and

web design

Why is good user interface design important?

How did a presidential election come down to
questionable user interface design?

Palm Beach ballot may have misled many Gore voters

into voting for Buchanan

Expecting Democratic candidate to be the second hole

The Design of Everyday

Things

Donald Norman (Doubleday,

In England I visited a home with a fancy new Italian washer-drier combi
with1988)
super-duper multi-symbol controls, to do everything you ever wante

with the washing and drying of clothes. The husband (an engineering
psychologist) said he refused to go near it. The wife (a physician) said s
simply memorized one setting and tried to ignore the rest.

Normans principles of usability:

Visibility: Frequently used functions should

be obvious and easy

Mapping: Relate interface to mental model

Whats a FLASH button on a telephone?

Horizontal stovetop knobs for burners

Feedback: has an intended action be done?

Tool tips on mouse rollover

Exercise

Have you ever walked into a room

and fumbled with the light switches,
often turning on the wrong ones?
Which of Normans principles does
this interface violate? How so?

Visibility: light switches should be obvious

Mapping: position of switches should
correspond to model of room

More UI principles

Real world mapping: correspond to familiar layouts

Consistency: common features should stay in same
place, work in same way
Less is more: less important features out of the way
Anticipation: hide or grey out inactive features
Customization: give expert users more efficient
features
Transparency: UI shouldnt cover up content
Contiguity: keep explanatory words near graphics
Memory load: remind user about details
User control: whos in charge?
Speak users language: understandable
instructions, feedback, error messages

A user interface prototype:

H:\mm\umDemo\UMJulesVernes

What principles did

it violate?
Real world mapping:
OUT vs. eXit or X
Less is more:
Hyperdrive, Probe,
Assistant vs. Tools
Contiguity: model
box

Speak users language: UM prototype targeted

novices and women, but less successful with
more experienced, male users (perceived it as
juvenile)

Your next assignment:

In The Universal Computer, go to the chapter on

User Interface and Web Design and study the
section called Usability,
Look at its precursor, The Universal Machine
(available on campus LAN by entering umwords)
Write a short paper comparing The Universal
Computer and its precursor, The Universal Machine
(on any campus machine, enter umwords):
Discuss at least three UI design principles
Discuss lessons learned from changes in design
Discuss how each might appeal to different
learners
Due Monday, via Blackboard

Metaphors in UI design

Can help users develop a mental

model
Desktop, street map, doorknob,
screwdriver as metaphors
Metaphor should be obvious to user
Example in H:\transistors1.exe
Is the metaphor transparent?
Compare H:\transistors.exe

Some UI techniques

Hot spots: interactive areas on screen

Agents: characters guiding interaction

How does user know hot spots are active?

see http://www.microsoft.com/msagent
Why are some agents annoying?
Would adding intelligence be helpful?

Modal interfaces: different interfaces

for different users (e.g., novice and
expert)

Two approaches to UI
design

Lisa Lopucks 3 steps to UI design:

1) Identify your audience and message
2) Determine the setting
3) Create an experience
Tay Vaughans approach to UI design:
1) determine all the functionality
that a UI should provide,
2) design UI that provides this functionality
Does form follows function?

Prototyping a user
interface

Implementation paradox:

You cant evaluate or improve a design

until its been implemented, but changes
are hard to make after its implemented
How can prototyping break this paradox?
Can evaluate and improve designs early
So, do you want to prototype early?

Low-fidelity prototypes

High-fidelity: implement it in Flash

Low-fidelity: use paper, glue, index cards, tape,
stickies, colored markers
Advantages of low-fidelity prototype?

Easy and inexpensive to build

Easy and cheap to change, many times
Lack of polish does not affect user opinion of prototype
(obviously isnt finished product)

Disadvantages of low-fidelity prototype?

Need to set up and explain conventions for user

Dont simulate computer response time accurately
Dont show well to management

An example

Testing your prototype

Test team constructs paper prototype

Test by letting one member play computer,
rearranging UI in response to a users actions
Another member takes notes during test
Afterwards, the team discusses and distills
the notes, evaluating what works and doesnt
Plan improvements
Make another prototype?

Plan test scenarios

for prototypes

First, describe the following:

User goals and end results:

Initial state of the system

E.g., User is visiting the sites home page

for the first time, nothing in shopping cart.

Displays available to user:

E.g., You want to buy a sweater. Find a

womans blue V-neck sweater for under $80.

E.g., home page, ladies apparel department,

sweaters page, search dialog and results

Given test scenario(s), create prototype

User-centered evaluation

Formative evaluation during

development (cook tastes the soup)
Summative evaluation at completion of
project (guests taste the soup)
Which kind is a paper prototype?
When should you test with actual users?
Later, well talk about how to plan and
conduct actual user evaluations

Project assignment

Plan a test scenario for your project

Create a low-fidelity prototype
Show main user interface
Show a snippet of sample content
Test and improve within your team
Let your customer or expert try it
Bring it to class February 24