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.