What makes a GUI good?
44
What makes a GUI good? Why lions, giraffes and pandas are better than squares. Flow vs Darth Vader (=excise) Flow vs. Darth Vader (=excise) Graphical Interfaces fall 2010
Transcript of What makes a GUI good?
What makes a GUI good?
Why lions, giraffes and pandas are y , g pbetter than squares.
Flow vs Darth Vader (=excise)Flow vs. Darth Vader (=excise)
Graphical Interfaces fall 2010
Graphical Interfaces fall 2010
Clues!
Humans look for clues!
What kind of clues can you give in an interface y gregarding
– What can be done– What objects can selected– What is going on in general?What is going on in general?
Discuss!Discuss!
Graphical Interfaces fall 2010
Graphical Interfaces fall 2010
Graphical Interfaces fall 2010
Swap
Look & analyze– What is the objective
of the game?Wh d?– What is good?
– What is bad?
Graphical Interfaces fall 2010
http://www.by-art.com/swap/swap.htm
Swap
Graphical Interfaces fall 2010
Zookeeper
http://www.2flashgames.com/play/f-231.htm
Graphical Interfaces fall 2010
Graphical Interfaces fall 2010
Graphical Interfaces fall 2010
Color-blind-safe; distinctive shapes
Graphical Interfaces fall 2010
Many types of states...
Graphical Interfaces fall 2010
Graphical Interfaces fall 2010
Is it that simple?
No... because different interfaces have different d d hi h t d t b t di tdemands, which tend to be contradictory
Graphical Interfaces fall 2010
Branding, ”look&feel”
Graphical Interfaces fall 2010
Multi-functional
Graphical Interfaces fall 2010
Useable/efficient
Graphical Interfaces fall 2010
Contradictions...
Programmers say:
You can have it FASTCHEAP or
WORKINGWORKING.
...pick any two!!!p y
Graphical Interfaces fall 2010
Contradictions
Interaction designers say...
Graphical Interfaces fall 2010
Flow
Graphical Interfaces fall 2010
Flow
Flow is when everything runs smoothly towards a lgoal
No energy spent on unnecessary fuss
No sense of carrying out subtasks, ”just doing” without having to focus consciously on detailswithout having to focus consciously on details
Flow is an EXTREMELY PRODUCTIVE STATE
Graphical Interfaces fall 2010
NOT flow... ever
Graphical Interfaces fall 2010
Direct manipulation supports flow...
Graphical Interfaces fall 2010
Abstract manipulation does not
Graphical Interfaces fall 2010
(make everyone happy)
Graphical Interfaces fall 2010
Keep important tools close at hand
Graphical Interfaces fall 2010
Provide modeless feedback
Graphical Interfaces fall 2010
Reduce number of steps
Which steps do you need to take when making a ”S A ” (if l k )?”Save As...” (if you are unlucky)?
Graphical Interfaces fall 2010
Reduce number of steps
Which steps do you need to take when making a ”S A ” (if l k )?”Save As...” (if you are unlucky)?
– Save As– Define location– Define name– Save as type
ImageReady: I want this!
Graphical Interfaces fall 2010
Provide choices, not blanks
Graphical Interfaces fall 2010
Provide choices, not blanks
Graphical Interfaces fall 2010
Hide dangerous commands...!
Graphical Interfaces fall 2010
Flow...
Distinguish between possibility and probability– Save on exit vs don’t save on exit– Programmers tend to give equal importance to the 1% case
h 99% d b GUIas the 99% cases; good in programing but not in GUI design!
A id tiAvoid unnecessary reporting– Don’t report ”Everything proceeds as expected, OK?”
Distinguish between functions and their configuration
– In Word 2003 the menu command Print led to settings whereas the icon printed with the last settings
Graphical Interfaces fall 2010
Design task: Coffee for the win!
Design a coffee-ordering application! – A small desktop widget, no fuss– The order is automatically sent to the kitchen where
d d l h ’ d ksomeone prepares it and delivers it at the user’s desk.
Minimum demands:– Coffee or Teaff– Sugar and/or Milk
Extras? Latte? Espresso?Chai? Cappucino?
Graphical Interfaces fall 2010
Chai? Cappucino?
Excise: The Enemy
Graphical Interfaces fall 2010
Excise is…
Excise are those extra moves that aren’t goal-di t d b t till d d t kdirected but still needed; extra work
– Goal: get to work (by car)– Excise: opening garage door, driving out of garage,
closing garage, filling up gas…
What could be excise in a GUI? Discuss!
Graphical Interfaces fall 2010
Excise: Unnecessary dialogs etc
(Not all dialogs ( ghowever; some are necessary!)
Graphical Interfaces fall 2010
y )
Excise: visual clutter
Long lists, unsorted information
Hard to know what to click– http://www.staplesville.ca/
Graphical Interfaces fall 2010
Excise: No input where output
Here I have to go back to the page where I made the
tti t ditsettings to edit…
Graphical Interfaces fall 2010
Excise: Going to a different window
Graphical Interfaces fall 2010
Excise: Navigation
Navigating between… –Panes–Pages How can we reduce
navigation excise?–Programs–Views
navigation excise?
–Tools…
Graphical Interfaces fall 2010
Excise: Navigation
Navigating between… Solution: Provide–Panes–Pages
– Overviews– Signposts
–Programs–Views
– Avoid hierarchies
–Tools…
Graphical Interfaces fall 2010
Cooper: Considerate software
Graphical Interfaces fall 2010
Next thing:
Exercise 1: Redo it RightFriday 09.00-12.00 Design Studios
Home work: Icons (should take max 30 mins)– To be handed in at; on Tuesday the start of next lesson i e– To be handed in at; on Tuesday the start of next lesson, i.e.
on Tuesday
Graphical Interfaces fall 2010
