What makes a GUI good?
Sus Lundgren
sus.lundgren@chalmers.se
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Just to clarify
GUI = Graphic User Interface
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
What do you see?
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
What kind of software is this?
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Clues!
Whenever we approach a real life-situation, or
an interface, we look for clues…
– Donald Norman calls this signifiers…
… to find out what we can do (functionality) and
how (interaction)
A large part of GUI design is about creating
these clues, i.e. communicating to users how
it works
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Zookeeper: Good, bad?
(Zookeeper is very
similar to Bejeweled,
below, but has a few
extra rules and
things worth pointing
out…)
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Why Zookeeper is good: Feedback - Clues
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Feedback in faces
Zookeeper utilizes
anthropomorphism
(attribution of human
characteristics)
The animals’ facial
expressions give
clues or feedback
– How many different
expressions can you
find?
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Animal faces…
(to compare with Bejweled)
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Why Zookeeper is good: Visual design!
The animals have distinct
shapes and colors
A subtle chequered
background
The game area is lighter
than the surroundnings,
which helps draw
attention to it
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Clues: What can be done, and how
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Clues: What can be done, and how
Naming of menus and alternatives
Icons
Placement, sorting, grouping
Feedback: Reactions to what users are doing
or have done, showing current status etc
Pliancy: Indicating to users that they can
interact with something.
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Feedback: Different ways
Feedback can be visual
– Objects on screen change apperance, e.g. to
communicate that they are selected or active
Feedback can be audible
– Sounds typically indicate that something happens,
possibly in the background: you are getting an email
or SMS, an SMS is sent, warnings
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Feedback: Different ways
Feedback can also be modal
– Initiates another mode of
operation, e.g. appears in
a pop-up
… or modeless, which is preferrable
– Does not disturb, just indicates, does not require
special actions
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Feedback: Modeless visual feedback
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Manipulating things
Much of GUI interaction is related to
manipulating things; dragging, dropping,
clicking and so forth
Norman coined the term affordance
– “the perceived and actual properties of the thing, […]
that determine just how the thing could possibly be
used.”
– However, he was talking about physical objects
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Pliancy and hinting
Cooper instead talks about pliancy, meaning
“manipulability”
– any object or screen area that can be manipulated is
pliant
– In GUIs the pliancy/affordance must be visualized
Examples of pliant things are…
–
–
–
–
Buttons
Corners
Edges
Icons (butcons)…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Pliancy and hinting
Static object hinting
– an object always communicates that it
can be tampered with, e.g. 3Dsculpting, handles on scroll bars etc.
Dynamic visual hinting
– an object changes appearance when a
cursor passes over it
Pliant response hinting
– an object changes appearance when
interacted with; e.g. showing that a
button has been pressed.
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Pliancy and hinting
Cursor hinting
– the cursor changes appearance
depending on what it passes
over
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Pliancy and hinting on smartphones
When designing interfaces for mobile phones,
pliancy is an issue becasue
– Cursor hinting impossible
– Dynamic and pliant response hinting (especially) are
often obscured by
the users’ finger
Solutions/tweaks
– Animations
– Tutorials
– Instructions in the
background
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
So far so good…
Okay, so now we have talked about
– …how to indicate what can be done in a GUI (pliancy,
naming, icons, layout…)
– …how to communicate that the system reacts to what
the user does (feedback)
What’s left?
Well…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Flow
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Flow
Flow is when everything
runs smoothly towards a
goal without fuss
”Just doing” without having
to focus consciously on
details
Flow is an EXTREMELY
PRODUCTIVE STATE
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Designing flow
Keep tools close at hand
Arrange components on screen so that they fit
work flow
– Focus area surrounded
by tools and navigation
– Flow from entering data
to OK-button
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Manipulation and flow…
Direct manipulation also supports flow…
…because it feels more natural (requires less
cognitive resources) than…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Don’t provide blanks…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
…provide presets/defaults
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Supporting flow in other ways
Distinguish between possibility and probability
– Programmers tend to give equal importance to the
1% case as the 99% cases; good in programming but
not in GUI design!
Avoid unnecessary reporting like “Everything
proceeds as normal, OK”?
Distinguish between functions and their
configuration
– That’s what the File-menu is for… :)
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
The enemy:
Excise
Image from creativeuncut.com
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Excise
Excise are those extra moves that aren’t goaldirected but still needed; extra work
– Goal: get to work (by car)
– Excise: opening garage door, driving out of
garage, closing garage, filling up gas…
Excise is also all unnecessary
actions you need to carry out
(Excise outside the GUI world refers to a tax added to the
price of specific goods; it can sometimes constitute as much
as half of the price; and it is typically on things like alcohol,
cigarettes and fuel )
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Excise: visual clutter
Excise can also be visual, if it takes lots of
cognitive resources into account even if that is
not needed
– http://www.jbhifi.com.au
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Excise: visual clutter
Excise can also be visual, if it takes lots of
cognitive resources into account even if that is
not needed
– www.staplesville.ca has lots of animated things
iamges and stuff, which would be ok for a game, but
this is a site for searching a job…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Excise: No input where output
Here I have to go
back to the page
where I made the
settings to edit…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Excise: Feed me…
Demanding that users
should enter information
the system already has
Demanding that users
should enter everything,
when defaults might do
just fine
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Necessary excise: Navigation
Navigating
between…
–Panes
–Pages
–Programs
–Views
–Tools…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
…can be avoided or
simplified by providing
– Overviews
– Signposts
– Avoiding hierarchies
sus.lundgren@chalmers.se
Necessary excise: Shifting between modes
Sometimes we
do want to carry
out operations
that don’t really
fit within a
programme’s
normal working
mode
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
The Biggest Trap: To let function* follow form
It is the pervading law of all things organic and
inorganic,
Of all things physical and metaphysical,
Of all things human and all things super-human,
Of all true manifestations of the head,
Of the heart, of the soul,
That the life is recognizable in its expression,
That form ever follows function.
This is the law.
– Louis H. Sullivan in “The tall office building artistically considered”
(1896)
* = whatever you mean with function. It does not have to be efficiency per se, it can be playfulness,
intrugue, surprise, intimidation or something else.
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
Example: http://www.dsrny.com
Good looks, bad interaction design and
information achitecture)
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
http://www.hughjassburgers.com/
Lacking the most critical information: what’s the
(food) menu???
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
http://www.minutes.io
Extremely well designed; rememebers things
(e.g. initials), suggests things, modeless
feedback
giving help
provides
possibity
to email
minutes
etc…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se
To summarize…
Provide information (clues) that hint users
about what they can do
Provide feedback as reactions to what users do
Support flow
Avoid excise
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
…i.e.
sus.lundgren@chalmers.se
Do this
Don’t do this
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
sus.lundgren@chalmers.se