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) Norman’s principles of usability: Visibility: Frequently used functions should be obvious and easy What’s a FLASH button on a telephone? Mapping: Relate interface to mental model Horizontal stovetop knobs for burners Feedback: has an intended action be done? Tool tips on mouse rollover “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.”

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