User Interface Design

1
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

2
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

3
The Design of Everyday ThingsDonald Norman
(Doubleday, 1988)

• Normans principles of usability
• Visibility Frequently used functions should be
  obvious and easy
• Whats 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.

4
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

5
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

6
A user interface prototype H\mm\umDemo\UMJulesVe
rnes

• 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)

7
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

8
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

9
Some UI techniques

• Hot spots interactive areas on screen
• How does user know hot spots are active?
• Agents characters guiding interaction
• 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)

10
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?

11
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?

12
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

13
An example
14
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?

15
Plan test scenarios for prototypes

• First, describe the following
• User goals and end results
• E.g., You want to buy a sweater. Find a womans
  blue V-neck sweater for under 80.
• 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., home page, ladies apparel department,
  sweaters page, search dialog and results
• Given test scenario(s), create prototype

16
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

17
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