Graphical User

Interface Design
Dr. Truong Hong Tuan
User Interface Design

Focus on input and output

Presentation is everything !?
Requires highly interdisciplinary knowledge and skills
 Cognitive psychology
 Human perception
 Sociology
 Linguistics
 Ergonomics
 Anthropology
 Graphic art
 Computer science
 Media
 Domain knowledge related to the specific system
 …
Gestalt Principles
Proximity

Similarity

AAaaAA
Common fate

Closure
Gestalt Principles

Proximity: Spatial or temporal proximity of elements may

induce the mind to perceive a collective or totality.

Similarity: The mind groups similar elements into collective

entities or totalities. This similarity might depend on
relationships of form, color, size, or brightness.
Gestalt Principles
Common fate: Elements with the same moving direction
are perceived as a collective or unit.

AAaaAA

Closure: The mind may experience elements it does not

perceive through sensation, in order to complete a regular
figure (that is, to increase regularity).
Combining Gestalt Principles
Several Principles can be combined
 Proximity reinforces similarity

 Proximity reinforces closure

[] []

 Proximity opposes closure

][ ][ ]
Gestalt: Grouping
Visual structure by
grouping & indentation Even more visual
No visual structure structure
(common fate)

Rotate X Rotate
Rotate Y X Rotate
Rotate Z Y X
Zoom In Z Y
Zoom Out Z
Zoom
In Zoom
Out In
Out
Gestalt: Dialogue Box Example

How can you improve the design of this

dialogue box?

Align Objects
Left sides L/R Centers Right sides
Tops T/B Centers Bottoms
Gestalt: Dialogue Box Example

Proximity

Align Objects
Left sides L/R Centers Right sides

Tops T/B Centers Bottoms

Gestalt: Dialogue Box Example

Reinforce proximity

Align Objects
Left sides L/R Centers Right sides

Tops T/B Centers Bottoms

Gestalt: Dialogue Box Example

Proximity + common fate

Align Objects
Tops
T/B Centers
Bottoms

Left sides L/R Centers Right sides

Gestalt: Dialogue Box Example

Weak visual structure

 Gestalt: Dialogue Box Example

Strong visual structure

Gestalt: Proximity

Items close together appear to have a relationship

Distance implies no relationship

Time:

Time:
Gestalt: Proximity to Create
Structure
Name Name
Name
Addr1
Addr1 Addr1
Addr2 Addr2 Addr2
City City City
State State
State
Phone Phone
Phone
Fax
Fax Fax
Gestalt: Use of Proximity to Form Structure – Aids Data Entry
Speed

171 343 735

vs 171343735

Seconds per digit

0.8
20 25 54 83 28
vs 2025548328 0.6

0.4

0.2

0
1 2 3 4 5 6 7

Digits per group

McCormick, Human Factors in Engineering and Design, McGraw Hill, 1976

Gestalt: Application of Principles to Screen
Format

Before
PART NUMBER FILE: MISCELLANEOUS BRACKETS
PART: 0926431X LH BRONZE STUD BRACKET
GROUP: B BUDGET GROUP: 2413
CLASS: R SUB-ACCOUNT: 92
UNITS: DOZENS DEPRECIATION PERIOD 15
ACTION______ PRODUCT STATUS: NOT YET ALLOCATED
ADDITION DATE: 1 DEC 75 F. BRIGGS DES 9
T. Stewart,
LAST AMENDED: 14 MAY 75 R. SMITH PROC 11 Displays and the
Software Interface,
DELETION DATE: NONE Applied
Ergonomics, 1976,
MAIN SUPPLIER: J. BLOGGS & SON, ROTHERHAM pp. 137-146
Gestalt: Application of Principles to Screen
Format

After
PART NUMBER FILE: MISCELLANEOUS BRACKETS
PART: 0926431X LH BRONZE STUD BRACKET
GROUP: B BUDGET GROUP: 2413
CLASS: R SUB-ACCOUNT: 92
UNITS: DOZENS DEPRECIATION PERIOD: 15
ACTION______ PRODUCT STATUS: NOT YET ALLOCATED
ADDITION DATE: 1 DEC 75 F. BRIGGS DES 9
LAST AMENDED: 14 MAY 75 R. SMITH PROC 11
DELETION DATE: NONE
MAIN SUPPLIER: J. BLOGGS & SON, ROTHERHAM
Gestalt: Application of Principles to Screen
Format

Even Later (use upper & lower case)

Part Number File: Miscellaneous Brackets
Part: 0926431X LH Bronze Stud Bracket
Group: B Budget Group: 2413
Class: R Sub-account: 92
Units: Dozens Depreciation Period: 15
Action______ Product Status: Not Yet Allocated
Addition Date: 1 Dec 75 F. Brigs Des 9
Last Amended: 14 May 75 R. Smith Proc 11
Deletion Date: None
Main Supplier: J. Bloggs & Son, Rotherham
 CRAP
Contrast
 make different things different
 brings out dominant elements
 mutes lesser elements
 creates dynamism

Repetition
 repeat design throughout the interface
 consistency
 creates unity

Alignment
 visually connects elements
 creates a visual flow

Proximity
 groups related elements
 separates unrelated ones

Robin Williams Non-Designers Design Book, Peachpit Press

P1
P2
P3
P4
P5
The 10 golden 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
9. Provide shortcuts
10. Provide help
Be consistent
 Consistency of effects
 same words, commands, actions will always have the
same effect in equivalent situations

 Consistency of language and graphics

 same information/controls in same location on all screens
/ dialog boxes
 same visual appearance across the system (e.g. widgets)
 e.g. different scroll bars in a single window system!

 Consistency of input
 consistent syntax across complete system
Be consistent

These are labels with a

raised appearance.

Is it any surprise that

people try and click on
them?
Cater to Universal Usability

 Physical disability
 Target size should be large enough for easy selection
 Interface should not be crowded
 Images should be accompanied with alt. text or numbers
 Text bullets or links can be accompanied by numbers

 Perceptual disability
 Provide a text equivalent for every nontext element
 Avoid using color to deliver critical information
 Provide sufficient contrast between text and background
 Avoid pull down and pop up menus
 Avoid using image maps for navigation
Demo: Effect of Red-Green
Color Blindness
Provide feedback

 Continuously inform the user about

 what it is doing
 how it is interpreting the user’s input
 user should always be aware of what is going on
What’s it > Doit
Time for
> Doit coffee.
doing? This will take
5 minutes...
 Provide feedback

What mode
am I in now?

What did I
select? How is the
system
interpreting
my actions?

Microsoft Paint
Provide feedback
 Be as specific as possible, based on user’s input

Best within the context of the action

Provide feedback

 Response time
 how users perceive delays

<0.1s perceived as “instantaneous”

1s user’s flow of thought stays

uninterrupted, but delay noticed

10s limit for keeping user’s attention

focused on the dialog

> 10s user will want to perform other tasks

while waiting
Provide feedback

 Dealing with long delays

 Cursors
 for short transactions

 Percent done dialogs

 time left
 estimated time

 Random Contacting host (10-60 seconds)

 for unknown times

cancel
Design Dialogs

 Present exactly the information the user needs

 less is more
 less to learn, to get wrong, to distract...

 information should appear in natural order

 related information is graphically clustered
 order of accessing information matches user’s
expectations

 remove or hide irrelevant or rarely needed information

 competes with important information on screen

 use windows frugally

 don’t make navigation and window management
excessively complex
Deal with errors in a positive
manner
 People will make errors!
 Errors we make
 Mistakes
 conscious deliberations
 Error in objective
 Larger impact, hard to detect
 Slips
 unconscious behavior, error in execution
 e.g. drive to store, end up in the office
 shows up frequently in skilled behaviour
 usually due to inattention
 Smaller impact, easy to detect
Designing for slips

 General rules
 prevent slips before they occur
 detect and correct slips when they do occur
 user correction through feedback and undo
Types of slips

 Capture error: frequently done activity takes charge instead of one

intended
 E.g.,Drive to work on weekend

 minimize by
I can’t
 make actions undoable instead of confirmation believe I
pressed
 allows reconsideration of action Yes...
by user
 e.g. open trash to undelete a file
Types of slips

 Description error
 intended action similar to others that
are possible
 E.g., Throwing laundry in toilet

 minimize by
 rich feedback
 check for reasonable input, etc.
 undo
Types of slips

 Loss of activation
 forgetwhat the goal is while
undergoing the sequence of actions

 minimize by
 if system knows goal, make it explicit
 if not, allow person to see path taken
Types of slips

 Mode errors
 people do actions in one mode thinking they
are in another

 minimize by
 have as few modes as possible (preferably none)
 make modes highly visible
Generic system responses for
errors
 General idea: Forcing functions
 prevent / mitigate continuation of wrongful
action
 E.g. modern widgets: can only enter legal
data
Generic system responses for
errors
 Provide reasonableness checks on input data
 on entering order for office supplies
 5000 pencils is an unusually large order. Do you
really want to order that many?

 Warn
 warn people that an unusual situation is occurring
 when overused, becomes an irritant
 e.g.,
 audible bell

 alert box
Generic system responses for
errors
 Do nothing
 illegal action just doesn’t do anything
 user must infer what happened
 enter letter into a numeric-only field (key clicks
ignored)
 put a file icon on top of another file icon (returns
it to original position)

 Self-correct
 system guesses legal action and does it instead
 but leads to a problem of trust
 spelling corrector
Deal with errors in a positive
manner

What is “error 15762”?

Deal with errors in a positive manner

A problematic message to a nuclear power plant operator

 Group exercise

Some of the examples have problems, what are they?

Adobe's ImageReady AutoCAD Mechanical

Windows Notepad
Microsoft's NT Operating System
 Group exercise

Some of the examples have problems, what are they?

Adobe's ImageReady AutoCAD Mechanical

Windows Notepad
Microsoft's NT Operating System
How we improve design?

Improve Design Thinking

 Razzouk, R., & Shute, V. (2012). What is design thinking and why is it
important?. Review of educational research, 82(3), 330-348.
https://www.researchgate.net/publication/258183173_What_Is_Design_T
hinking_and_Why_Is_It_Important
 Why Is Design Thinking so Important? https://www.interaction-
design.org/literature/topics/design-thinking
Design Thinking
Empathy
Design Thinking

Collaboration
Design Thinking

Inclusion
Design Thinking

Repeat/Iterate
Design Thinking

• Empathize with people's needs,

• Collaborate with others across disciplines, skill sets, and
perspectives,
• Include every idea in visible form for evaluation, and
• Repeat, iterating and testing solutions to perfect them, always with
human needs at the center.
Design thinking process
Design Thinking Process

Problem Space Solution Space

Design Design
Challenge Solution
Design Thinking

Problem Space Solution Space

Design Design
Challenge Solution
Design Thinking Branding

Design Thinkers Group Empathize | (Re)frame | Ideate | Prototype | Test

Stanford d.school Empathize | Define | Ideate | Prototype | Test
Ideo Gather | Generate | Make | Share
Ideo v2.0 Inspiration | Ideation | Implementation
Luma Institute Looking | Understanding | Making
IBM Observe | Reflect | Make
FSU Innovation Hub Empathize | Ideate | Build
Design Thinking Methods & Tools

Design Thinkers Group Empathize | (Re)frame | Ideate | Prototype | Test

Stanford d.school Empathize | Define | Ideate | Prototype | Test
Ideo Gather | Generate | Make | Share
Ideo v2.0 Inspiration | Ideation | Implementation
Luma Institute Looking | Understanding | Making
IBM Observe | Reflect | Make
FSU Innovation Hub Empathize | Ideate | Build
Design Thinking Steps in Perspective
Tools for UI-UX design

 https://webflow.com/blog/ui-ux-design-tools
 https://green-hat.com.au/insights/optimising-the-user-
experience-a-ux-design-framework/
 https://www.invisionapp.com/inside-design/golden-
ratio-designers/
 https://www.thoughtco.com/principles-of-art-and-
design-2578740
Next class

 Review Group project design

 7 minutes to represent about web and deployment on E-
commerce platform (focus on design part)
 Other groups MUST give comments to presenting Group
 Quiz- Web Design