Visual interface design

Visual interface design
Ontwerpen van Interactieve Systemen
Frans Wiering, 16 maart 2015
Mededeling

Eindpresentaties projecten


donderdag 16-4, waarschijnlijk 11-13 uur
Groene Samenleving op vrijdag 17-4, 1-4 uur
2
Design

twee betekenissen (college 1)



ontwerpen: het proces waarin iets nieuws wordt
bedacht
ontwerp: de specificatie (‘representation’) van dat
nieuwe
vaak specifiek bedoeld:

visueel ontwerp, stijl, artisticiteit
design volgens Powerpoint
3
Design als ontwerp (hfst. 9)

conceptueel ontwerp

specifieert wat het
systeem is



metaforen
objecten en relaties
fysiek ontwerp

specificeert hoe het
systeem werkt



operational design
representational design
interaction design


design language
interaction patterns
Interface design: visual aspects


hoe gaat je design language eruit zien?
hoe ga je design language elementen
combineren om je ontwerp te realiseren?



representational design
interaction design
plan


user interfaces en widgets
ontwerpprincipes, perceptie en cognitie
5
Interface design: visual aspects

plan



user interfaces en widgets
ontwerpprincipes, perceptie en cognitie
zie ook de lange versie van de presentatie
6
User interface (UI)


alles aan het systeem waarmee
een mens in contact komt
interactie verloopt




fysiek: het apparaat wordt bediend
door menselijk handelen: aanraken,
toetsen indrukken
perceptueel: mens ontvangt
waarneembare signalen van
apparaat
conceptueel: het mentale model van
het systeem: wat is het, hoe werkt
het, wat kun je ermee doen
vormen samen de experience
http://www.istockphoto.com/stock-illustration-12210237-angry-computer.php
7
Command line interface

user interacts with system via commands



= set of words with associated syntax & arguments specifying an operation and related
options
traditional way of interacting with computers (& other devices), e.g. Unix shells,
MS-DOS
Voorbeeld: If Google were invented in the eighties
http://www.youtube.com/watch?v=O8vCEg5k_d4
8
Command line interface

still part of most systems, e.g.



Windows command shell
Google search: “user interfaces filetype:pdf site:uu.nl”
disadvantages


users have to recall their names and syntax
names and syntax can be obscure
e.g. what does “grep –w –i apple fruits.txt > apples.txt” mean?


cognition: design for recognition rather than recall (Long Term Memory)
some advantages


if you understand and recall them: very fast & powerful (expert mode)
relatively easy to generate speech interface from (accessibility)
do a case sensitive search for all lines in a text file containing the word
“apple” (but not e.g. “pineapple” or “apples”) and write them in a file
“apples.txt”
9
Graphical user interfaces (GUIs) – History
April 1973: the first operational Alto computer is completed
at Xerox PARC.
June 1981: Xerox introduces the Star,
the commercial successor to the Alto.
January 1983: Apple introduces the Lisa.
December 1983 (?): Microsoft announces their new
"Windows" program for the IBM
Source: http://toastytech.com/guis/guitimeline.html
10
Graphical user interfaces (GUIs) – History
January 1984: Apple introduces the Macintosh.
July 1985: Commodore introduces the
Amiga 1000 with the Amiga Workbench
Version 1.0.
August 1985: Microsoft finally releases the
first version of Windows.
March 1987: Apple introduces the
Apple Macintosh II, the first color
Macintosh.
Source: http://toastytech.com/guis/guitimeline.html
11
Graphical user interfaces (GUIs) – History
May 1990: Windows 3.0 released by Microsoft
August 1993: Windows 3.11 (doorbraak in Nederland)
1995: Microsoft introduces Windows 95
July 1997: Mac OS 8 is finally released. Selling 1.25 million
copies in less than 2 weeks, it becomes the best-selling
software in that period.
July 12, 1998: KDE 1.0 released. Features: A very
Windows 9x like environment for Linux.
• Apple: Mac OS X (1999), Aqua (2000), Lion (2011) …
• Windows: Windows NT, 98, XP, Vista, Windows 7, Windows 8…
• Unix/Linux: GNOME 1.0 (1999), …
Source: http://toastytech.com/guis/guitimeline.html
12
Graphical user interfaces (GUIs)

Originated in academia (Stanford, MIT) and research institutes
(Xerox PARC)

Often described as WIMP interfaces





Key characteristic:


Windows
Icons
Menus
Pointers
Direct manipulation
(in contrast to, e.g. command line interfaces)
voorbeeld uit 1980: Mockingbird op Xerox Dorado
https://www.youtube.com/watch?v=_Xu3r5lZds0

Douglas Engelbart: Mother of all Demos (9-12-1968)
https://www.youtube.com/watch?v=yJDv-zdhzMY
13
Direct manipulation



Ben Shneiderman, The future of interactive systems and the
emergence of direct manipulation (1982)
https://www.youtube.com/watch?v=CWgPe8VjTsM
direct manipulation veronderstelt een interface met:





nauw gerelateerd aan people-technology systeem (flow)
anders dan Benyon suggereert veronderstelt dit geen GUI



continue representatie van objecten
fysieke acties i.p.v. commandos
omkeerbare operaties op objecten
auditory interfaces kennen ook direct manipulation
game voorbeeld: Papa Sangre
Shneiderman verder belangrijk voor:


informatievisualisatie
usability guidelines in interface design
14
WIMP interfaces – Windows

windows


screen divided into areas that act
as separate input/output channels
primary vs. secondary
15
WIMP interfaces – Icons

used to represent features and functions
considered useful to help people to recognize which feature they need to
access

design approaches:


metaphor


direct mapping


transferring knowledge from
one to another domain
creating a more or less direct
image of what the icon is
intended to represent
e.g.
cut, copy
& paste
e.g.
printer
e.g. floppy
disc for
saving
convention

arbitrary design that has been
accepted over time
16
Metafoor, direct mapping of conventie?
17
WIMP interfaces – Icons
important design issues:
 legibility


discriminating between icons
interpretation

understanding the meaning of the icon

Brems & Whitten (1987)

to avoid misinterpretations, label the icons
Horton’s icon checklist:
 Understandable
 Unambiguous
 Informative
 Familiar
 Memorable
 Few
 Attractive
 Distinct
 Legible
 Attractive
 Compact
 Coherent
 Extensible
18
WIMP interfaces – Menus

commands grouped into menu topics

hierarchically
organized
(cascading)
special cases:




popup menu
contextual menu
cascading
menus
note:


contextual
menus
alternatives exist
(e.g. pie menus)
keyboard shortcuts
for experienced
users
(origin: pre-WIMP)
keyboard
shortcuts
pie menu
19
WIMP interfaces – Pointers

traditional


alternatives




remote control: track pad, joysticks, trackballs, …
direct touch: pen/stylus, finger, …
remote pointer: Wii controller, infrared mouse, …
newer trends:



mouse (or track pad on laptops)
multitouch
gesture interaction
meer over alternatieven in gastcollege Peter
Werkhoven
20
WIMP interfaces

not only for desktop computing, but also, e.g.





alternatives exist, e.g.





mobile phones
kiosk system (kaartjesautomaat
interactive menus on your TV set
…
gestural input
speech input
interaction in virtual and augmented reality
…
meer over alternatieven in gastcollege Peter Werkhoven
21
WIMPs and widgets



WIMP = Building blocks of modern GUIs
but how to build intuitive, useful interfaces with these?
 Design guidelines (e.g. Benyon 4.5, 14.4)
at smaller level of detail: widgets
 individual interactive components
 radio buttons, checkboxes, toolbars, list boxes, …
 each with their own specific function(s)
22
Parade van widgets

zie lange versie presentatie (naslag)
23
A miscellany of widgets – buttons

Command
button

Radio button

Checkboxes
24
A miscellany of widgets – views


List-view
Tree-view


Cell-view

Canvas

Images, diagrams, text….
Hierarchical
25
A miscellany of widgets – list boxes

List-box

Combo-box

Drop-down list
box


Multiple-select
list box
Text box
26 26
A miscellany of widgets – value selection


Drop-down list
box

Combo-box

Spin box
Slider


For selecting continuous
values
Also for navigation (e.g.
timeline!)
27
A miscellany of widgets – others

Tab control

Cues
(Elements without
interaction)
28
A miscellany of widgets - panels
Overview panel

With the functions that
can be performed
29
A miscellany of widgets - panels
Detailed panel
30
A miscellany of widgets - panels
Commando panel (for commands and parameters)
31
A miscellany of widgets - panels
Dialog panel
32
A miscellany of widgets - panels
Navigation panel
33
WIMPs and widgets

again:



but how do we build larger interfaces with these?
 Interface design guidelines (style guides)
questions:




Widgets are basically building blocks on a small level of
detail
What are good design guidelines?
How does s.o. come up with these?
Etc.
remember:

A user interface is everything in the system that people
come in contact with whether physically, perceptually, or
conceptually
34
Design guidelines 1: Microsoft

http://channel9.msdn.com/Events/Build/2012/2-116
(start at 7 minutes)

5 principes






pride in craftmanship
be fast and fluid
authentically digital
do more with less
win as one
zie ook: bij voorbeeld http://msdn.microsoft.com/enus/library/windows/apps/hh779072.aspx
35
Design guidelines 2: TouchWonders

uit: gastcollege Thijs van Schadewijk (2013)

aim: magical experiences





design for lean back
natural user interface
simplicity
beauty
… plus subguidelines
36
Guidelines: waarop gebaseerd?

belangrijke bronnen van guidelines zijn





richtlijnen van ontwikkelomgevingen en
besturingssystemen
esthetiek
ergonomie
psychologie: cognitie en perceptie
dit college speciaal visuele perceptie
37
Algemene ontwerpprincipes

Benyon hfst 3: 4 categorieën





helping people access, learn and remember the
system (1-4)
giving them the sense of being in control,
knowing what to do and how to do it (5-7)
safely and securely (8-9)
in a way that suits them (10-12)
Ook Shneiderman heeft ontwerpprincipes
opgesteld


8 Golden Rules
zie lange versie presentatie (naslag)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
visibility
consistency
familiarity
affordance
navigation
control
feedback
recovery
constraints
flexibility
style
conviviality
38
Shneiderman Golden Rules (1-4)
1 Strive for consistency.
Consistent sequences of actions should be required in similar situations; identical terminology should
be used in prompts, menus, and help screens; and consistent commands should be employed
throughout.
2 Enable frequent users to use shortcuts.
As the frequency of use increases, so do the user's desires to reduce the number of interactions and
to increase the pace of interaction. Abbreviations, function keys, hidden commands, and macro
facilities are very helpful to an expert user.
3 Offer informative feedback.
For every operator action, there should be some system feedback. For frequent and minor actions, the
response can be modest, while for infrequent and major actions, the response should be more
substantial.
4 Design dialog to yield closure.
Sequences of actions should be organized into groups with a beginning, middle, and end. The
informative feedback at the completion of a group of actions gives the operators the satisfaction of
accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds,
and an indication that the way is clear to prepare for the next group of actions.
source:
http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html
39
Shneiderman Golden Rules (5-8)
5 Offer simple error handling.
As much as possible, design the system so the user cannot make a serious error. If an error is made,
the system should be able to detect the error and offer simple, comprehensible mechanisms for
handling the error.
6 Permit easy reversal of actions.
This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages
exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a
complete group of actions.
7 Support internal locus of control.
Experienced operators strongly desire the sense that they are in charge of the system and that the
system responds to their actions. Design the system to make users the initiators of actions rather than
the responders.
8 Reduce short-term memory load.
The limitation of human information processing in short-term memory requires that displays be kept
simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient
training time be allotted for codes, mnemonics, and sequences of actions.
source:
http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html
40
Perception


how we come to know an
environment through our senses
different views/models on how
perception works:

ecological or direct perspective



emphasizes contribution of sensory
data
bottom-up processing
constructivist perspective



emphasizes contribution of
knowledge in memory
top-down processing
compares incoming sensory
information with a mental
representation of objects and
events
constructivist processing. Bron: Snyder (2000)
41
Waarneming van vormen
42
Waarneming van vormen



Gestalt theorie (constructivistisch perspectief)
ontwikkeld 1e helft 20e eeuw (Max
Wertheimer)
ordening waargenomen eenheden tot grotere
gehelen

“The whole is more than the sum of its parts”
43
Valencia, Lonja de la seda/
Llotja de la seda
detail van de vloer
bron foto’s: wikimedia
44
Gestalt principes
voor- en achtergrond
gelijkenis
nabijheid
45
Gestalt principes
continuïteit
geslotenheid
eenvoud (‘Prägnanz’)
46
Nabijheid in Interface design

nabijheid = proximity


Objects that appear close together in space or time tent to be perceived
together
Application in interface design, e.g.
47
Continuiteit in Interface design

We tend to perceive continuous patterns rather than disjoint
Application
in interface
design, e.g.

48
Gelijkenis in Interface design

gelijkenis = similarity


Similar figures tend to be grouped together
Similarity can be shape, size, color, texture, orientation, …
Application
in interface
design, e.g.

49
Anomalie in Interface design


Note: when similarity occurs, an object can be emphasized if it is
dissimilar to others.
This is called anomaly.
Example from
interface design:

50
Geslotenheid

geslotenheid = closure

We tend to see complete
figures even when part of
the information is missing
Application in interface
design?
 Search one for yourself :)

51
Gestaltprincipes elders

beweging, video


geluid, muziek



denk aan continuïteit
groepering op basis van gelijkenis en nabijheid
continuïteit en eenvoud (‘streaming’)
Zie ook:


Benyon 2e ed., pp 630-632
https://www.youtube.com/watch?v=7QfcVGrar9E
52
Color perception

Light = portion of the electromagnetic spectrum that can
be detected by the human eye
WAVELENGTH IN METERS
10-14
Gamma
10-12
10-10
X
10-8
ultraviolet
10-6
infrared
10-4
10-2
radar
1
FM-SW-TV
102
104
A-C circuits
Visible spectrum
Violet
blue
yellow orange
WAVELENGTH IN NANOMETERS
Adapted from Bailey (1996)
53
Dress Colour Debate
https://vine.co/v/O21nlFP9KKl
http://www.wired.com/2015/02/science-one-agrees-color-dress/
54
Dress Colour Debate
guys please help me - is this
dress white and gold, or blue and
black? Me and my friends can’t
agree and we are freaking the
fuck out
http://swiked.tumblr.com/post/112
073818575/guys-please-help-meis-this-dress-white-and
https://vine.co/v/O21nlFP9KKl
http://www.wired.com/2015/02/science-one-agrees-color-dress/
55
De jurk zoals hij bedoeld is
56
Color perception

Used in design to …




[Butler et al., 2003]


Attract attention
Group elements
Indicate meaning
Enhance aesthetics
Note: 6 to 10% of the male population have problems perceiving color (e.g. red‐
green blindness)
Some color guidelines:




Use compatible combinations (avoid red-green, blue-yellow,
green-blue, red-blue) chromostereopsis
Use colors with high contrast for text and background
Limit the number of colors (4 for novices, 7 for experts)
Use clear blue only as background
57
Chromostereopsis

illusie van diepte veroorzaakt door
kleurcontrast



vaak hinderlijk
soms nuttig
voorbeelden (wikipedia)
Stained glass in Sulkowski castle in Bielsko-Biała. Bron: wikipedia
58
Color conventions
Table 5.1 Some Western color conventions.
Source: Marcus, A. (1992) Graphic Design for Electronic Documents and User Interfaces
59
Cultuur en kleur
60
Cultuur en kleur
61
62
David McCandless’ Colour Wheel
ook goed voorbeeld van datavisualisatie (Benyon 14.5)
A: Western /American
B: Japanese
C: Hindu
D: Native American
E: Chinese
F: Asian
G: Eastern European
H: Muslim
I: African
J: South American
3:Authority
2: Art/Creativity
1: Anger
84: Wisdom
83: Warmth
82: Virtue
http://infobeautiful3.s3.amazonaws.com/2013/01/1276_colours_in_culture.png
63
Geheugen (en cognitie)

werkgeheugen, beperkte capaciteit
chunking
lange-termijngeheugen: vrijwel onbeperkte
capaciteit
herkennen (recognition) makkelijk, actief
herinneren (retrieval) moeilijk
leerbaarheid, consistentie

zie ook college 3 (usability)




64
Working memory: capaciteit

capaciteit is 4-5 items

richtlijn voor ontwerp: vermijd overbelasting
65
Working memory: chunking

capaciteit working memory wordt vergroot door chunking


groeperen componenten, als in 030 997 4398
richtlijn voor ontwerp:

groepeer verwante items bij elkaar, gebruik hiërarchische structuur
Cascading menus
66
Lange-termijngeheugen

design for recognition rather than recall


computers are good at remembering, people are not
 Promote recognition over recall, e.g. menus (instead of
command lines), choice dialog boxes, icons, …
67
Aandacht

wat trekt aandacht



aandacht




algemeen: salience (opvallendheid)
Weinschenk 2011: food, sex, movement, faces, stories
is selectief
duurt relatief kort (+/- 10 minuten)
wordt beïnvloed door stress
gebrek aan aandacht leidt tot fouten




hoe trek je aandacht (niet teveel dingen tegelijk)
fouten zijn onvermijdelijk
hoe doe je goede foutafhandeling?
goede waarschuwingen: persistent message, geluid
68
Welke ontwerpprincipes heb je herkend?

helping people access,
learn and remember the
system
1.
2.
3.
4.

visibility
consistency
familiarity
affordance
2.
3.
safely and securely
1.
2.

recovery
constraints
in a way that suits them
1.
2.
giving them the sense of
being in control, knowing
what to do and how to do it
1.

3.
flexibility
style
conviviality
navigation
control
feedback
Benyon hoofdstuk 4.5
69
Hoofdpunten

ook interaction design is geen exacte wetenschap


user interface





Benyon (12), Shneiderman (8)
perceptie


direct manipulation
WIMP
metaphor, direct mapping, convention
widgets
ontwerpprincipes


interactie is fysiek, perceptueel, conceptueel
command line interfaces, GUI


probeer, evalueer, gebruik guidelines om tot oplossing te komen
vorm: Gestalt principes; kleur
design voor WM, LTM en aandacht
70

Download Report