User Interface Design
User Interface Design




User interfaces should be designed to match
the skills, experience and expectations of its
anticipated users.
Users often judge a system by its
interface rather than its implementation.
A poorly designed interface can cause a user
to make mistakes and hinder them in achieving
their goals.
Poor user interface design results in users not
using the system.
User Interface Design


Make it easy to learn, simple to use,
straightforward and forgiving
Rhythm
 HCI – Human Computer Interaction
• Study of people/how they learn/interpret info…
 Ergonomics – Hardware and Human interface
Human Factors and Perception




Visual perception
Cognitive psych of reading and human
memory
Deductive and inductive reasoning
User behavior and tasks
Human Factors and Perception

Perception
 Most HCI visual (size, shape, color, orientation,
movement, visual quality)
 Trend is graphical, but still a lot of textual (font,
line length, capitalization, location and color of)

Cognitive psychology
 Short term vs Long term Memory
• Remember commands, operation sequences, arcane data
Human Factors

Skill level and Behavior
 Individuals different in skill
level/education/experience
 Personality variations
 Context or domain-specific knowledge more
important than overall education or intelligence
(example: automotive diagnostic system)

Nice to match HCI with cognitive and
personality style
Human Factors and Tasks




Rarely system do something entirely new
Usually system built to automate
HCI needs to provide user with easy, natural env’t to
conduct tasks
4 kinds of tasks
 Communication: producer ->consumer of info
 Dialogue: user direct/control interaction with
computer
 Cognitive tasks: performed once info obtained;
associated with function of system
 Control tasks: user control info, cognition, order
tasks
Styles of HCI (4 major)

Commands and query interfaces
 HCI purely textual
 Print filename.ext /forms = m456 /que=q12

Simple menu interface
 Can be tedious
 Consider number of levels

Direct Manipulation
 WIMP – windows, icon, mouse, pointing devices
 Graphical, buttons, scrolling
 UID tool helpful

Hypertext and multitasking
4 Interface Analysis and Design Models

SW Engineers Design Model
• Incorporate data/architectural and processing rep. of SW
• Interface design should be more than incidental to design model

Human Engineered User Model
• Profile of end users
• Novice? Knowledgeable, intermittent user? Knowledgeable, frequent
users?

End Users (User’s Actual Model)
• System perception – image of system end user carries in their head

Implementers
•
•
•
•
System image; manifestation of system
Look and feel of interface
Supporting information (book, manuals and videos)
System syntax and semantics
HCI Design Process – Iterative Process
1.
2.
3.
Create 4 different models of system
Analyze interface
Design interface
 Consider design issues that cover ALL interface
designs
4.
5.
Use tools to prototype and construct
interface
Evaluate/validate interface result
Interface and Task Analysis

Delineate human- and computer-oriented
tasks
 Analyze users
 Analyze tasks
•
•
•
•
Use use cases
Elaborate tasks
Analyze workflow – use swimlane diagrams
Arrange tasks in hierarchical fashion
 Analyze display content
 Analyze work environment (eg lighting)
Hierarchical task analysis
Retriev e pictures
fro m remo te
libraries
do 1, 2,
3 until pictures fo un d, 4
1 Disco ver
p ossible
so urces
2
Establish
search
terms
3
Search for
p ictures
4.
Request
p ho tocop ies
of founditems
do 3.1 , 3 .2 ,
3 .3 un til pictures foun d,
3 .4 if n ecessary, 3.5
3 .1
Select
library
3 .2
Lo g in to
catalogue
3 .3
Search for
p ictures
3 .4
M odify
search terms
do 3.3 .1 , 3 .3. 2, 3.3 .3
3 .3. 1
Enter search
terms
3 .3. 2
In itiate
search
3 .3. 3
Rev iew
results
3 .5
Record
relevan t
items
Four Common Design Issues



System response time (length and variability)
Help facilities (manuals vs. online –integrated
or add-on)
Error info handling
 explanations; jargon; constructive; indicate
negative consequences; visual/audio cues;
“nonjudgmental”

Command labeling
 Menu options -> quick keys
 Function keys
 Macros
 Conventions (ctrl-v)

Application accessibility and internationali
HCI Golden Rules



Place the user in control.
Reduce the user’s memory load.
Make the interface consistent.
HCI Guidelines

General interaction
•
•
•
•
•
•
•
•
•
•
Consistency
Meaningful feedback
Ask for verification
Undo
Reduce amount of info user memorizes
Efficiency in dialogue, motion an thought
System protection (forgive mistakes)
Categorize function/organize screen geographically
Context-sensitive help
Simple short verb phrases
Cont.

Information display
•
•
•
•
•
•
•
•

Only info needed displayed
Use graph and charts
Consistent labels and standard abbrev
Maintain visual context
Meaningful error messages
CAPS, indent, etc.
Windows to compartmentalize and geography
“analog” displays
Data input
•
•
•
•
•
•
Minimize # input actions (macros)
Consistency between info display and data input
Customize input allowed (dispense w/ sure?)
Tune to user’s preferred mode of input (mouse/key)
Assist all input actions
Eliminate “micky mouse” inputs (defaults, no .00 on $)
Alternative information presentations
Jan
2 8 42
Feb
28 51
M ar
3 16 4
Jan
Feb
M ar
Ap ril
2 78 9
M ay
12 73
June
2 83 5
M ay
June
4000
30 00
2 0 00
1 0 00
0
Ap ril
Presentation methods
1
4
0
2
10
3
Dial with needle
Pie ch art
Th er m om eter
Ho rizon tal bar
20
Displaying relative values
Pressur e
0
1 00
200
Temp er atur e
300
40 0
0
25
50
75
100
Implementation Tools

User interface development systems (UIDS)
nice!
 Validate user input; manage I/O devices; handle
errors; feedback (echo); handle windows and
scrolling; connect application with interface;
customization of interface
Design Evaluation

Prototype
 Evaluate prototype
 Impromptu feedback from “test drive”
 Survey users (alpha/beta testing)

Before prototype
 Length and complexity of written spec
 #commands specified
 #actions and system states
 Protocols/interface style/help facilities
Standards



X-window system
PC windows
Microsoft
Your UID

Analyze
 Users
 Tasks – delineate human vs computer tasks

Design
 Identify information to be displayed – how will you
display it


Implement prototype
Evaluate/Validate it according to design
issues and golden rules/guidelines