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
