User Interface Design UI design is not just about the arrangement of media on a screen It’s...
-
Upload
cynthia-pearson -
Category
Documents
-
view
221 -
download
0
Transcript of User Interface Design UI design is not just about the arrangement of media on a screen It’s...
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 ThingsDonald 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
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)
Two approaches to UI design Lisa Lopuck’s 3 steps to UI design:
1) Identify your audience and message2) Determine the setting3) Create an experience
Tay Vaughan’s 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 can’t evaluate or improve a design
until it’s been implemented, but changes are hard to make after it’s 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 isn’t finished product) Disadvantages of low-fidelity prototype?
Need to set up and explain conventions for user Don’t simulate computer response time accurately Don’t 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 user’s actions Another member takes notes during test Afterwards, the team discusses and distills
the notes, evaluating what works and doesn’t 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
woman’s blue V-neck sweater for under $80.” Initial state of the system
E.g., User is visiting the site’s 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
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, we’ll 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