Sie sind auf Seite 1von 17

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, 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.

Normans principles of usability:

Visibility: Frequently used functions should be obvious and easy

Whats a FLASH button on a telephone? Horizontal stovetop knobs for burners Tool tips on mouse rollover

Mapping: Relate interface to mental model

Feedback: has an intended action be done?

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

How does user know hot spots are active? see http://www.microsoft.com/msagent Why are some agents annoying? Would adding intelligence be helpful?

Agents: characters guiding interaction


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) Need to set up and explain conventions for user Dont simulate computer response time accurately Dont show well to management

Disadvantages of low-fidelity prototype?


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:

E.g., You want to buy a sweater. Find a womans blue V-neck sweater for under $80. E.g., User is visiting the sites home page for the first time, nothing in shopping cart. E.g., home page, ladies apparel department, sweaters page, search dialog and results

Initial state of the system

Displays available to user:

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

Das könnte Ihnen auch gefallen