Transcript User Interface Design

User Interface Design




UI design is not just about the
arrangement of media on a screen
It’s 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, 1988)
“In England I visited a home with a fancy new Italian washer-drier combination,
with super-duper multi-symbol controls, to do everything you ever wanted to do
with the washing and drying of clothes. The husband (an engineering
psychologist) said he refused to go near it. The wife (a physician) said she had
simply memorized one setting and tried to ignore the rest.”

Norman’s principles of usability:

Visibility: Frequently used functions should be
obvious and easy


Mapping: Relate interface to mental model


What’s 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 Norman’s 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 shouldn’t’ cover up content
Contiguity: keep explanatory words near graphics
Memory load: remind user about details
User control: who’s in charge?
Speak user’s 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 user’s 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