5. hci designpeople.uwplatt.edu/~shiy/courses/se273/notes/6-hcidesign.pdf · 2014-03-10 ·...
TRANSCRIPT
Computer Science and Software Engineering
University of Wisconsin - Platteville
6. HCI Design
Yan Shi
SE 273 Lecture Notes
Unless otherwise state, the comics used in this chapter are from dilbert.com
The notes are based on Chapter 5 in “The Elements of User Interface Design © John Wiley & Sons, 1997”
Some Quotes
“Make it simple, but no simpler” – Albert Einstein.
“Remember the things you don’t like in software interfaces you use. Then make sure you don’t do the same things to users of interfaces you design and develop” – Tracey Leonard
Good User Interface design is hard to specify, most people can find fault with an implemented UI, but it is very hard to get agreement on how to design a good UI – unknown.
Common terms for HCI’s
These will vary from industry to industry
— CLI – Command Line Interface
— UI – User Interface
— MMI or MCI – Man {Machine || Computer} Interface – old term
— HMI or HCI – Human {Machine || Computer} Interface
— GUI – Graphical User Interface
What is HCI?
Input and visual display devices Input:
— mouse — keyboard — touch screen — voice input — visual input: scanner, micro sensors in robots
Display: — Monitor — Projector — printer — audio output: composing software
HCI through the ages
HCI Design Principles
Computer users should have successful experiences with computer tasks. — If they are successful they are more likely to use your
system again and also try additional system functionality.
— Corollary: failure to complete a task will make the user less likely to use your system.
With a poor UI a system is almost guaranteed to fail.
A good user interface is aware of the user’s mental, physical, and psychological abilities.
Limitations of People
Short-term memory is limited — research has shown we can instantaneously recognize/recall
about 7 items (Miller, 1957)
Stress leads to mistakes — lots of warnings lead to higher stress which inevitably results
in mistakes
Different people have different physical capabilities — vision problem — color blindness — left-handed
People prefer different modes of interactions — text vs. pictures — direct manipulation vs. commands
Three Golden Rules
Place users in control
Reduce users’ memory load
Make the user interface consistent
These rules are not restricted to graphical interfaces
Rule 1: Place the Users in
Control
If you are going to Chicago, do you prefer taking a bus or driving a car?
Bus or Car Example
If you are — familiar with the navigation of an area and — know how to drive
you may want to drive yourself – its faster and you can choose the route, schedule, side trips, etc.
If you are — unfamiliar with the navigation or — not comfortable with driving
it may be more efficient to take public transportation.
Same things hold true with a HCI — novice users may want extreme guidance assistance (public
transportation). — Experience users may want to navigate themselves for speed and
efficiency.
Let the user decide the path
How to decide the path to enter and leave a building?
Often we need to rough out a prototype HCI and let users wear out the grass and then build the sidewalks.
Principles that Place Users in Control
Use modes judiciously (modeless)
Allow users to use either the keyboard or mouse (flexible)
Allow users to change focus (interruptible)
Display descriptive messages and text (helpful)
Provide immediate and reversible actions, and feedback (forgiving)
Provide meaningful paths and exits (navigable)
Accommodate users with different skill levels (accessible)
Make the user interface transparent (facilitative)
Allow users to customize the interface (preferences)
Allow users to directly manipulate interface objects (interactive).
Modeless
Use modal dialogs or screens judiciously — Application Modal: view or change — System Modal: printing…, dialog box
When modes are necessary, it is important to use
immediate visual feedback. — e.g., mouse pointer shape
The true test of interface modes:
— if users don’t think of being in a mode OR — if the modes are so natural to them that they feel
comfortable using them.
Flexible
Allow the user to use either the Keyboard or Mouse. — Sometimes a mouse or keyboard may not be available.
— not all users can double-click!
— the mouse is slow for experienced users
onscreen keyboard
hot key
voice control
Be aware: not all input styles are appropriate in all cases.
Interruptible
Allow users to change focus
Don’t force users to complete predefined sequences. — Give them options—to cancel or to save and return
to where they left off.
— “Wizards” are used more and more to lead users through common tasks, but don’t lead with an iron hand.
— Let users stay in control while the interface guides them rather than forces them through steps in a task.
Helpful
Display descriptive messages and text.
404 NOT FOUND
Helpful
Use terms throughout the interface that users can understand, rather than system or developer terms.
— Users don’t necessarily know about them, and they shouldn’t have to!
Watch your tones! Please no blame.
Forgiving
Forgiving and Feedback
Provide immediate and reversible actions, and feedback.
Every product should provide undo actions for users, and hopefully, also redo actions.
“Illusion of progress”: Provide users with some indication that an action has been performed.
Navigable
Provide meaningful paths and exits. — Allow a user to reach any part of a system’s functionality easily.
— Provide some context clues.
— Users should not be afraid of exploring a system and getting lost or doing some serious damage.
Minimize the effort needed to navigate (number of clicks).
Accessible
Accommodate users with different skill levels.
Users of different levels should all be able to use a system efficiently.
Have an expert mode and a beginner mode.
Facilitative
Make the user interface transparent.
— A system does not exist for the user interface
— Give users work objects rather than system objects
— Resemble tools with which a user is already familiar
Recycle Bin
My Documents
The key is to accommodate users’ mental model!
Preferences
Allow users to customize the interface
— color
— font
— layout
— shortcut
— and more
Interactive
Allow Users to Directly Manipulate Interface Objects
— Moving a file by command line vs. drag and drop
drag and drop provides feedback that it was successful
“mv file1 ../../../junk” does not provide feedback and often the user will follow up by checking “ls”.
The interface must be explorable.
— Users should feel comfortable picking up objects and exploring dragging and dropping them in the interface to see what might happen.
At least let Users Think
They’re in Control
Let the user do whatever they want, unless it can lead to serious problems.
A well-designed interface can comfort and entertain users while the computer system is completing a process. — Users don’t like to be left just sitting there doing nothing and seeing
nothing on the computer screen while the computer is supposed to be doing something.
— Even if you can’t let users be in control, let them think they are! At least entertain and teach them!
Rule 2: Reduce User’s Memory
Load
Relieve short-term memory (remember)
Rely on recognition, not recall (recognition)
Provide visual cues (inform)
Provide defaults, undo, and redo (forgiving)
Provide interface shortcuts (frequency)
Use real-world metaphors (transfer)
User progressive disclosure (context)
Promote visual clarity (organize)
Remember
Relieve short-term memory.
— If a user needs to keep track of things on a pad of paper while using a system, then the system is overloading a user’s memory.
— The system should be able to retrieve the previous information so users don’t have to remember and retype the information again.
Example: Google Chrome auto fills form data.
Recognition
Rely on recognition, not recall. Reduce long-term memory.
— Multiple Choice tests v. short answer.
Provide lists and menus containing selectable items instead
of fields where users must type in information without support from the system.
Use tooltips and context-sensitive help to support users in recognizing information.
Use tool bar instead of dialog box.
Inform
Provide visual cues. — Scroll bars, Title bars, Wait Cursers, Blinking cursors,
Tool tips, Tabbed dialogs and tree controls.
Forgiving
Provide
— default
— undo
— redo
Save multiple versions.
Provide multi-level undo and redo.
Frequency
Provide interface shortcuts.
Keyboard shortcuts:
— mnemonics (access key): moves the cursor to a choice and select the choice.
single letter
used in menus and lists
— accelerator (shortcut key): a combination of keys to perform an action.
Ctrl-c, Ctrl-v
Transfer
Use real-world metaphors.
— the whole interface
— the interface components
Context
User progressive disclosure.
— reveal the beauty step by step.
— provide easy access to common features
— hide more advanced features and allow users to explore them.
Example: MS Office
Organize
Promote visual clarity. — Organize by ordered alphabetically or by most
commonly used.
— Group items on a menu or list
— Number items
— Avoid visual clutter
The skills of graphic artists should be represented in the HCI design team.
Rule 3: Make the Interface
Consistent
Maintain consistency within and across products (experience)
Keep interaction results the same (expectations)
Provide aesthetic appeal and integrity (attitude)
Experience
Maintain Consistency Within and Across Products. This consistency applies at three levels:
— presentation, — behavior, and — interaction techniques.
Learning how to use one program should provide positive transfer
when learning how to use another similar program interface.
Progress and evolution can produce problems with consistency. — New and better ideas may make new products inconsistent with old
and familiar techniques. — Designers should consider the impact of these changes.
Expectation
Keep interaction results the same and predictable.
— If behavior of commands is different, it confuses the users and they learn superstition to try to explain the different behaviors of the system
Attitude
Provide aesthetic appeal and integrity.
Summary
Three golden rules of HCI design
— Place users in control
— Reduce users’ memory load
— Make the user interface consistent
HCI Design Tools
Lumzy: http://lumzy.com/app/ — Online mockup and prototype creation tool
— Simulation
— Team editing
— File version control
Mockingbird: https://gomockingbird.com/mockingbird/#
— Similar features as Lumzy
Net Bean, Visual Studios, etc.