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
