lectIII 1

USER INTERFACE DESIGN
Today
• Before we talk about how to code interfaces in Java, some
concepts.
• Norman:
– The Design of Everyday Things;
– General design principles;
– Activity theory;
– Gulf of execution; gulf of evaluation
• Shneiderman:
– Specific guidance for UI design
– Theories; principles; guidelines
cisc3120-fall2012-parsons-lectIII.1 2
References
• The Design of Everyday Things, by Donald A. Norman,

– Ch 1, The psychopathology of everyday things
– Ch 2, The psychology of everyday things
• Designing the User Interface: Strategies for Effective
Human-Computer Interaction (5th edition), by Ben Shneiderman
and Catherine Plaisant.
– Ch 2, Guidelines, principles and theories.
• I’ll give out copies of a couple of these next week.
NORMAN: DESIGN OF EVERYDAY THINGS
Design of Everyday Things
• Issue: Everyday items that are poorly designed and are hard to
figure out how to use
This is BAD!!
• After all, there is no reason why objects that we use everyday
cannot be designed well.
• Chapter 1 of the book is a rant about some instances of poor
design.
• Coffeepot for Masochists
• Jaques Carelman “Catalogue of unfindable objects”.
• Examples:
– microwave oven
– washing machine
– doors
– audio/visual equipment
– telephones
• Typically, things that are designed to do everything are usually
hard to figure out how to do anything with
Doors
• Common Design Problems
– poor instructions
– poor “visibility” (see ahead) of the operation of the
technology
(lacking appropriate visual cues for how to use something)
– lack of “feedback” (see ahead)
• When simple things need instructions, the design has failed!
• Doors can be pushed, pulled, slid
• “User” is faced with two questions:
– Does it push/pull or slide
– Which direction does the door move?
– On which side do you operate the door (to make it move)?
(Jeff Voight)
• This last example is particularly confusing since the “pull” side,
which is some ways is the obvious one to use, is on the left.
• Natural (in the US) to move through a double door on the right.
Everyday Things
• There are somewhere between 20,000 and 30,000 everyday

things!
• These include:
– lights, sockets, screws, watches, etc.
– writing devices / utensils
– fasteners (e.g., on clothing, like buttons, zippers, snaps)
– furniture
– food utensils (e.g., fork, knife, chopsticks, spatula, egg beater)
– tools (e.g., hammer, screwdriver)
• Each is simple, but all work differently.
• How many parts do everyday
things have?
e.g., Norman’s stapler has 16
parts!
• How many parts do you need to
know about?
• How long does it take a person
to learn to use all these things?
• One minute per object, 20,000 things.
– 20,000 minutes
– 333 hours
– 8 40 hour weeks
• How do we cope?
Conceptual model
• Mental simulation of operation.
Jaques Carelman, Convergent Bicycle

• No visual clues that provide a clear conceptual model is a design
fail.
Design Principles
• Principles of design for Understandability and Usability

– Provide good “Conceptual Model”
– Make things “Visible”
• Visibility
– Mapping between intended actions and actual operation
– Feedback indicationg action succeeded (or didn’t)
– Natural design ⇒ natural signs (for how to use something),
should be naturally interpreted
– Be aware of cultural references (e.g., stop sign)
Affordances
• Properties of an object provide clues to the operation of the object

– Perceived and actual properties of objects.
• Examples:
– Buttons are for pressing
– Knobs are for turning
– Slots are for inserting things into
• Handles on a door are an affordance.
• Glass is for breaking
• Wood is for writing on.
Conceptual Model
• Visible structure that implies:

– affordance (what an object was designed to do)
– constraints (what cannot be done with an object)
– mappings (between what the object can do and how to use
the object to do it)
• “Mental model” — models people have of themselves, others,
devices, etc.
• “System image” — visible part of a device
• Hiding functionality is bad.
• Harder to operate most of the functions of a phone than those of

a car.
Mapping
• Relationship between two things

• Correspondance between what you want to do and how to do it
• This is where phones often fail
(Though things are better with smartphones)
• In contrast, cars do well.
Feedback
• Send user information about their action

– Are they doing well or badly?
– Are there things the should do differently?
• Information can be auditory and/or visual
– Haptic?
Causality
• Response after an action indicates that the action caused the

response
– May be no connection
– But we often infer there is
• Can we predict the effects of our actions?
• Can we figure out what happened when something goes wrong?
• Natural connection with feedback.
Good design
• If a bit old-fashioned.
Activity Theory
• Action Cycle:
• Seven Stages of Action
Gulf of Execution
• Difference between user’s intention and allowable actions.

• Identify it by asking:
– How well does a system allow a user to perform their
intended actions?
• Steps 2–4 in the action cycle.
• Example “record” on a video recording device
• User thinks:
1. Press “record”.
• What is required:
1. Press “record”.
2. Specify time of recording.
3. Select channel.
4. Save these settings
• The difference between these is the gulf of execution.
Gulf of Evaluation
• Amount of effort required to interpret state of the system and

how well the user’s intention has been met.
• Identify by asking:
– How easy is it to get information about the system and
interpret that information, and match that interpretation with
the user’s expectations?
• Steps 5–7 in the action cycle
• Example, my calling card.
1. Dial service
2. Enter code
3. Dial number
• If number is engaged, hear engaged tone after number is dialed.
• If code is wrong, hear engaged tone after number is dialed.
• WTF?
SHNEIDERMAN AND PLAISANT
Theories, Guidelines, Principles
• Guidelines
– Specific practical ideas that identify good practice, warn
against bad.
• Principles
– Use to analyze and compare alternatives.
• Theories
– Attempt to provide high level explanations
Describing theories
• User Interface (UI) design theories can be categorized in either of

the following ways:
– descriptive vs
– explanatory vs
– prescriptive vs
– predictive
• or
– motor vs
– perceptual vs
– cognitive
What do these mean?
• Descriptive
– Provide consistent terminology
• Explanatory
– Describe sequence of events,
– Cause and effect
• Prescriptive
– Give guidance
• Predictive
– Evaluate design’s execution time, error rates, trust level,
conversion rates.
– Depends on type of user (novice, expert);
– These values can have high standard deviations across user
types
• Motor
– Pointing with mouse, using keyboard;
– Theories such as Fitt’s Law describe human capabilities
• Perceptual
– Finding items on a display
• Cognitive
– Planning sequences of actions;
– Memory load requirements
• Users forage for useful content
– Especially on the web.
• Good “scent” ⇒ which way to go; helps user find what they are
looking for.
• “taxonomy” = classification of complex set of

ideas/phenomena/actions into categories
Challenges
• Theories should be more central to research and practice.

• The power of a good theory is to shape design practice.
• Theories should lead practice, rather than drag behind.
Theories
• Design by levels
• GOMS
• Stages of action (Norman)
– Described earlier
• Context (Suchman)
– “situated action”
Design-by-levels
• Natural decomposition of a system
• Conceptual: user’s (mental) model
– Painting program: pixels
– Drawing program: objects
• Semantic: meanings conveyed by interface design
– What does “undo” do?
• Syntactic: how users conveys semantic meaning
– Delete by putting an object in the trash
• Lexical: hardware, device dependent
– Mouse click within 200 milliseconds
Example
• GOMS
– Goals: user’s goals
– Operators: actions
– Methods: decomposed actions
– Selection rules: how to select between methods
• Has successfully predicted performance times.
Other kinds of theory
• Stages-of-action models
• Contextual theories
Principles
• Determine user’s skill level

• Identify the user’s tasks
• Choose interaction style
• Eight Golden rules
• Prevent errors
• (Ensure human control while increasing automation)
Determine user’s skill level
• Know your user!

• Their level of comfort/knowledge drives the interface design:
– novice or first-time user
– knowledgable intermittent user
– expert or frequent user
• Don’t pretend they are all alike.
Identify the user’s tasks
• High-level, mid-level, low-level tasks ⇒ Task Analysis

– The Palmpilot experience
• Consider frequency of actions
– Frequent things should be quick.
– Unfrequent things can be more time-consuming
http://www.xkcd.com/773/
Choose interaction style
• Direct manipulation
– Desktop
– Drag and drop
• Menu selection
– Clear structure (if well done)
– Can be frustrating to frequent users
• Form fill-in
– Good for data entry
– Confusing for novices
• Command language
– eg. Unix command line
– Good for expert frequent users
• Natural language
– Eg. Siri
– Hard :-)
Eight rules of interface design
1. Strive for consistency.

2. Cater to universal usability.
3. Offer informative feedback.
4. Design dialogs to yield closure.
5. Prevent errors.
6. Permit easy reversal of actions.
7. Support internal locus of control.
8. Reduce short-term memory load.
Good
Bad
Prevent errors
• Correct actions
– Take away bad options
– Grey out ≡ no reverse
• Complete sequences
• Better error messages:
– The printer needs paper, can you refill it please?
Guidelines
• Guidelines:
– provide consistency
– promote best practices
• Following slides give some examples of these things
Navigating the interface
• A good interface should “reduce the user’s workload”

• Some examples:
– Standardize task sequences
– Ensure embedded links are descriptive
– Use unique and descriptive headings
– Use radio buttons for mutually exclusive choices
– Develop pages that will print properly
– Use thumbnail images to preview larger images
Good
Bad
• Though mainly its the ads that mess it up.
• Consider accessiblity:
– Use text alternatives
– Provide alternate ways of conveying time-based media
(e.g., movies, animations)
– Make elements distinguishable from one another
∗ Don’t just rely on visual cues
– Design for predictability
• These allow the use of tools like screen readers.
Organizing the display
• Consistency of data display
– e.g., colors, fonts, capitals, etc)
• Efficient information assimilation by user
– Familiar format
– Justification of text etc.
• Minimal memory load on user
– Don’t expect them to carry information between screens
– Don’t make people write things down
• Compatible data display with data entry
• Flexibility of user controls for data display
Getting user’s attention
• Intensity (e.g., brightness of color)

– Two levels only
• Mark items
– Underline, box etc.
• Size
– Up to four sizes
• Fonts
– Up to three fonts
• Inverse video
• Blinking (use sparingly)
• Color
– Up to four colors
• Audio
– Soft tones for regular positive feedback
– Harsh tones for warnings
• DON’T overuse these!!!!!!
Facilitating data entry
• Consistent data entry transactions

– Don’t have to remember which page you are on.
• Minimal input actions
• Minimal memory load
• Compatible data entry and display
• Flexible user control for display
Summary
• This class has looked at some of the theory underlying user

interface design.
• Some of this is general good sense design.
• Some is specific to user interfaces.
• From it we can distill some good practice.
• Next time we’ll look at the tools that Java gives us to create
interfaces.
– But that is in 2 weeks, after the midterm.
To Do
• Read: Norman The Psychopathology of Everyday Things

• Read: Shneiderman and Plaisant Guidelines, principles and theories
• (To be handed out next time).

lectIII 1

Uploaded by

Copyright:

Available Formats

lectIII 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

lectIII 1

Uploaded by

Copyright:

Available Formats

USER INTERFACE DESIGN

• The Design of Everyday Things, by Donald A. Norman,

• Jaques Carelman “Catalogue of unfindable objects”.

• There are somewhere between 20,000 and 30,000 everyday

• Mental simulation of operation.

Jaques Carelman, Convergent Bicycle

• Principles of design for Understandability and Usability

• Properties of an object provide clues to the operation of the object

• Wood is for writing on.

• Visible structure that implies:

• Harder to operate most of the functions of a phone than those of

• Relationship between two things

• Send user information about their action

• Response after an action indicates that the action caused the

• Difference between user’s intention and allowable actions.

• Amount of effort required to interpret state of the system and

• User Interface (UI) design theories can be categorized in either of

• “taxonomy” = classification of complex set of

• Theories should be more central to research and practice.

• Determine user’s skill level

• Know your user!

• High-level, mid-level, low-level tasks ⇒ Task Analysis

1. Strive for consistency.

• A good interface should “reduce the user’s workload”

• Though mainly its the ads that mess it up.

• Intensity (e.g., brightness of color)

• Consistent data entry transactions

• This class has looked at some of the theory underlying user

• Read: Norman The Psychopathology of Everyday Things

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.