GUI, webontwerp, psychologie en human efficiency,
boek 1: invoer, scherm en tekst. Dr. Leonard Verhoef | Op deze pagina: anpak.theorie.praktijk.inhoud.voorwoord.inleiding.index. |  |
| Welke aanpak? | De psychologie van de gebruiker is hier de leidraad voor interface design: harde en concrete specificatie voor interfaces, met eenvoudige psychologie van bewegen, kijken, taal, leren en denken. Even geen techniek, marketing, design, beleving, experience, intuïtief, look and feel, meningen en zo. Ook even geen high tech, laatste snufjes, hypes en hots. | De boeken leggen de huidige gui's en webpages naast keiharde psychologische kennis. Begrippen als advanced, bar, button, desktop, grafisch, help, menu, ok, personal assistant, tabs, tip van de dag, window en wizard gaan op de psychologische snijtafel. | Begrippen die in de huidige praktijk ongebruikelijk zijn maar die psychologisch gezien noodzakelijk zijn voor een psychologische pasvorm worden geïntroduceerd. Deze geïntegreerde behandeling van de vormgeving voor de handen, de ogen, de woorden, de help en het denken, garandeert dat de ontwerper wat de gebruiker betreft niets over het hoofd ziet en structureert een eventuele discussie. |
| Boek 1 richt zich op het 'how to' van invoer, het beeldscherm en de teksten. Boek 2 richt zich op het conceptuele ontwerp voor help, beginners/experts, normen/guidelines, menu/navigatie en heeft tevens een 'why this way' karakter. Het geeft inzicht in deze concepten en de praktische consequenties voor het ontwerpen. Velen voelen wel aan dat er soms iets niet klopt met de huidige interfaces. Psychologisch inzicht laat zien waarom het niet klopt en hoe de ontwerper het kloppend krijgt. Elk deel besluit met een toekomstschets. Naar top. | De aanpak blijkt wat onwennig: de computer is de slave en de gebruiker is de master. Ook onwennig is dat er door meer kennis minder discussie is. Verder een psychologie die niet slaafs de vragen van de techniek beantwoordt maar dicteert wat de techniek moet doen. Aan duidelijkheid geen gebrek: ondubbelzinnige woorden, de sprekende vergelijkingen en meer dan 400 concrete voorbeelden. Een terugkerend voorbeeld omvat psychologische verantwoordingen van de NS touch screen treinkaartautomaat interface. De vele voorbeelden maken de boeken goed bruikbaar in het onderwijs. De 1300 entries in de index een psychologische naslag eenvoudig. | De hedendaagse interfaces zijn een zeepkist om de motor van een Ferrari. Die zeepkist kan veel beter. Met 'high psy' wordt invoeren zorgeloos en wat op het scherm staat onmiddellijk duidelijk. Aandacht van de gebruiker komt vanzelf daar waar dat nodig is. Het betekent ongemerkt een expert worden, niet alleen met de interface maar ook in het werk dat de gebruiker doet. De gebruiker is de baas, heeft overzicht, heeft alles onder controle, stuurt waar nodig wat bij en voert zijn taak steeds efficiënter uit. Gebruiksvriendelijkheid is geen probleem meer, maar een vanzelfsprekendheid. |
| Theoretische basis | De psychologie dus als basis. Maar wat voor psychologie? Niet de psychologie die je nodig hebt wanneer je problemen hebt met je partner, je kinderen of jezelf. Wel de wat onbekende 'functiepsychologie': gewoon het bewegen, waarnemen, taalgebruik, leren en denken. Wat is een gebruiker anders dan iets dat zit te bewegen (met toetsen of muis), zit te kijken (naar een beeldscherm), woordjes leest in intypt, probeer te begrijpen hoe die computer werkt en, als hij dat eenmaal gevonden heeft, probeert dat te onthouden. Naar top. | Boek 2 geeft aan welke oplossingsrichtingen de psychologie biedt en waarom deze boeken kiezen voor de 'handelingspsychologische richting. Deze aanpak is concreet omdat de gebruiker de handelingen uitvoert met elementen van de interface (toets/muis, visuele presentatie, tekst, help en conceptuele structuur). Bovendien is de aanpak niet constaterend (menselijk gedrag constateren en met statistiek wetenschappelijk verantwoord beschrijven) maar construerend (menselijke handelingen opbouwen). Er is meer tekst over deze handelingspsychologie en meer over de wetenschappelijke verantwoording van deze aanpak in het boek Why designers can't understand their users. |
|
| Praktische basis | Kan een boek met zo'n theoretische achtergrond wel praktisch zijn? Ja dat kan. Simpel omdat een goede theorie 'operationaliseerbaar en testbaar' moet zijn. Meestal betekent dit dat de psycholoog een theorie vertaalt in onderzoeksitems. Maar een psycholoog kan natuurlijk ook concretiseren in requirements. Dat is één. | Ten tweede toont het boek honderden ontwerpen waarvan ondubbelzinnig gezegd kan worden dat zij wel of niet in overeenstemming zijn met de 'theorie'. Rechts staan wat van die voorbeelden. |
Naar top. |
| Inhoudsopgave |
|
| Voorwoord | Sommigen zeiden na lezing van het boek: ‘Wat een veldslag.‘ Hier is een psychologenridder aan het werk geweest die de ene na de andere interfaceconventie en redenering een kopje kleiner maakt. Er is meer commentaar. |
Naar top. |
De mens is zoals hij is. Het boek is zoals het is en, last but not least, de auteur is zoals hij is. Een taalridder zei me dat ik beschikte over glanzende wapens waarmee de strijd voor gebruiksvriendelijkheid gewonnen kan worden. Dat is waarschijnlijk al wat het is; niet meer en niet minder. Discussie over de toepassing van de psychologische inhoud kan. Discussie over de vorm is voor mij niet interessant. Druk twee, drie en vier |
| Inleiding | Wat bieden de boeken? Het weer: iedereen klaagt erover, maar niemand doet er wat aan. Iedereen vindt ook dat computers gebruikersvriendelijker moeten worden, maar wie doet er echt wat aan? De boeken 'GUI, webontwerp, psychologie en human efficiency 1 en 2' doen er wat aan. Ze bieden wat vaak links blijft liggen, namelijk psychologie die nodig is om gebruiksvriendelijke computerprogramma's te ontwerpen. | De boeken bieden psychologische theorie en de praktische toepassing. |
| |
De achtergrond van de kennis Ik heb vijfentwintig jaar gewerkt aan interfaces en geprobeerd geen concessies te doen aan de psychologie. Aanvankelijk ging het daarbij vooral om industriële toepassingen waarbij snel en foutloos menselijk handelen van groot belang is. Dit geldt voor operators die een chemische fabriek besturen, voor machinisten van hoge snelheidstreinen en voor treindienstleiders. Ook was ik betrokken bij interfaces waarbij het gaat om grote aantallen mensen die de interfaces gebruiken en waarbij de diversiteit in gebruikers groot is. Dit geldt voor treinkaartautomaten en reisinformatie. |
| Enkele van de hieruit voortgekomen interfaces staan in dit boek. Dat de interfaces vaak gerelateerd zijn aan vervoer komt niet doordat ik geen ervaring met andere interfaces heb maar doordat deze systemen gemakkelijk te begrijpen zijn en deze opdrachtgevers de psychologie veel ruimte gaven. Er zijn ook (her)ontwerpen van bekende Windows en Office vensters. |
| |
Voor wie zijn de boeken bedoeld? De kennis is bruikbaar voor de volgende groepen. a) Ontwerpers van interfacesDe belangrijkste doelgroep vormen ontwerpers van interfaces. Na lezing van deze boeken vragen ontwerpers vaak: "En waar moet ik nu beginnen met het ontwerpen?" Het antwoord is eenvoudig: "Achteraan; Deel VI, uitgangspunten." Als je de uitgangspunten niet expliciet maakt dan kun je bij elke ontwerpbeslissing discussie krijgen. Het hoofdstuk staat achteraan omdat mij verzekerd is dat een dergelijk hoofdstuk aan het begin voor velen een onneembare horde is. Het eerste boek begint simpel: "Hoofdstuk 1: Hoe groot moet een button zijn?" Naar top. |
Hebben de uitgangspunten een gewicht gekregen dan werk je het conceptuele model uit (systeemanalyse), vervolgens wat de gebruiker moet denken ('Deel V Ontwerp voor denken') en daarna de visuele en verbale vormgeving die daar bij hoort. Oh, ja, ergens aan het eind ook nog de invoer; 'Deel I Ontwerp voor bewegen' dus. Deze methodologie is impliciet omdat het presenteren van psychologische kennis prioriteit heeft; dus bij het eenvoudige bewegen beginnen. Bovendien is ontwerpmethodologie een zaak van ontwerpers en niet van psychologen. Je kunt de boeken van voor naar achter lezen maar ook als naslagwerk vanuit de index. |
| b) Gebruikers De boeken zijn bruikbaar voor professionals die zijdelings betrokken zijn bij de ontwikkeling van interfaces, bijvoorbeeld gebruikers die specificaties moeten leveren en die geleverde interfaces moeten beoordelen. Zij kunnen met deze boeken nauwkeurig omschrijven wat zij nodig hebben en beoordelen of de geleverde interface voldoet. Gebruikers zijn daarmee minder afhankelijk van wat technici, designers en toevallige ervaringen met oude systemen. | c) Managers en projectleiders Managers van interface projecten kunnen met deze boeken beoordelen of de ontwerpers van hun projecten professioneel te werk gaan. Honderden voorbeelden maken duidelijk wat wel psychologisch doordacht is en wat niet. d) Psychologen Psychologen kunnen met deze boeken de kloof overbruggen die er is tussen de theoretische functiepsychologische kennis en de toepassing ervan bij het ontwerp van interfaces. Er is altijd een duidelijke link tussen psychologie en de voorbeelden in de boeken. Verder geven deze boeken aan welke variabelen men bij het doen van onderzoek onder controle moet houden en welke variabelen men moet onderzoeken. |
| Auteur | Leonard Verhoef ontwikkelde zich van een psycholoog die het menselijk denken onderzoekt naar ontwerper van 'ultimate psychologisch verantwoorde' interfaces; apparaten voor nu en voor in de toekomst. Naar top. |
 |
Statistieken | Deel 1 heeft 245 pagina's, 257 voorbeelden, meestal met een kleurenafbeelding van een scherm. |
| Bestellen | Boek 1 kost € 37 en boek 2 kost € 40 (inclusief 6% btw). De verzendkosten zijn € 3,50 per zending. Bestellen per email. Bevestiging van de bestelling krijgt u per email. De boeken worden meestal binnen 24 uur per post verzonden met een rekening. Naar top. |
Behalve boeken ook: |
|
Naar top. |
Contact
|
Human Efficiency Leonard Verhoef. Tweet bij een nieuwe cognitief psychologische reactie op een actueel onderwerp: @leonard.verhoef +31 (30) 231 44 97 Parkstraat 19 3581 PB Utrecht Nederland verhoef@humanefficiency.nl Kamer van koophandel, inschrijvingsnummer: 39057871, Utrecht. |
Complex data
What is after this generation
of graphs?
Source: www.gapminder.org.
This?
Yes, it is after.
Yes, it is futuristic.
Has it future?
Probably not
because ...
Source: IBM.
Probably
h's got new
software
for his birthday.
Source: Volkskrant.
Or this? New, for most of us.
Futuristic: no,
more than
20 years old.
Has it future?
Certainly yes
because ...
Why tell these 20
year old
character smileys ...
... more than
today's smileys?
Traditional GUI elements
What is the problem here?
Why the designer
made this error?
15 requirements
for “are you sure?“
How many
requirements meets
this window?
A traditional window
and tabs, what is
the psychological
evaluation of
this kind of windows?
One way to order files.
Another way to
order files
Which one is best?
Why?
What is better?
Horizontal menu?
Vertical menu?
What are advantages
of the latter?
The Word main menu,
what is an alternative?
Not using other words
of course but...
Hmm, the desktop.
What is the visual and
conceptual structure
the inventers had
in mind?.
Hmmm, another
metaphor
Tape recorder
for printer.
Good idea?
What is the difference
between a calender
on paper and
on a screen?
Why most travel
planners are no
planners?
Some perfect designs
Why is this
a perfect design?
Why is this
a perfect design?
Why does the eye
like pie charts?
Why do brains
not like them?
And why brains
liked this one?
Can a dancing
paperclip solve
userunfriendlyness?"
Why not?
Design ticket vending
NS touch screen train
ticket vending machine
Routing problems
solved using ...
Ticket vending machine.
Language option first step?
Source: Belgium Railways.
Ticket vending machine.
Change language any time.
Source: NS/ Verhoef.
However,
no hierarchical steps.
What is the structure?"
Which button is
to help whizzkids
and it-specialists?
Source: NS/Verhoef.
Grey out, should not
mean not available,
of course.
Source: Verhoef.
Design of train indicators
Source: Netherlands Raiways,
Amersfoort, 2008.
Grey half circle:‘Go shoping.’
Departure in 30 min.
Yellow triangle: ‘Go to train.’
Departure in 2 min.
Orange half circle: ‘Hurry up!’
Departure in 30 sec.
Source: Experimental designs,
Verhoef 2010.
Experimental trains indicator,
train departing in 5 min,
at top and in large format.
don't hurry.
Experimental trains indicator,
train deparring shortly.
colour: yellow, don’t dawdle.
Experimental trains indicator,
train departing almost now.
colour orange, hurry!
Experimental trains indicator,
first departing train at top,
has left 1 min. ago,
colour red.
Source: Experimental designs,
Verhoef 2009.
Complex data
Upper right red,
Disaster occured!
All ok.
Upper right yellow low,
take care!
Upper right yellow high,
take care!
Source: Verhoef Holslag,
2010.
Source: LBS/Holslag Verhoef.
Sourrce: Holslag Verhoef
How much information
can be in one of these
smiley?
Source: Verhoef Holslag,
2010.
Design of tables
Graphics for aesthetics,
OECD house style.
Source: OECD quarterly
growth table.
http://stats.oecd.org/Index.aspx
No graphics, data only.
Same data as previous table.
Same data as previous
table.
Graphics for content.
OECD, adapted by Verhoef for demo.
Design of scales
One variable,
six parameters,
233 milliseconds
perception time.
An effective problem solving
tool.
Source: Holslag & Verhoef.
Portrait or landscape?
What is better for a train traffic
controler?
What is better for car driving?
Source: Tom Tom, 2010.
Source: Verhoef, 2010.
Train traffic control
How to present
tracks and platforms?
Experimental
speedometers
Analog classical
experimental clock design
Train speed: 192.
Maximum permitted speed
200. Next target permitted
speed 40. Good for general
maintain speed task,
bad for planning and when
close to intervention.
Analog design, screen
version
Diagrammatic design,
vertical version.
Braking curve should
not touch maximum
permitted speed curve.
The tongue below should fit
in the pipe above. Good
for planning and insight,
bad when close to
intervention.
Diagrammatic design,
horizontal version.
Comparable with
vertical version.
Animated design
Braking curve should not
touch max permitted speed
curve. The “vehicle”
in front should not be too
close. Good when close to
intervention, bad for
planning and insight.
Speed and
safety information
for high speed train
drivers.
The one that is now standard.
Source: ETCS/Verhoef.
To top of this list of pictures.
Consistency
Cab with inconsistent
interfaces. Visible, even
at low resolution.
Inconsistent presentation
and input of:
date, time, numbers, colours,
enter procedures, control of
attention.
Cab with consistent interfaces.
No differences in
presentation and input of:
date, time, numbers, colours,
enter procedures, control of
attention.
Consistent icon design.
The graphic elements can be
combined for current
functions and for functions
to be developped. The
graphic elements are like
words. Designers can create
new sentences. Drivers
knowing the elements can
understand new combinations
of words/icons.
To top of this list of pictdures.
Use of colours
Same use of colours for all
information. Colour is used
for control of attention.
Use of colour, white: no
braking curve.
Use of colour, yellow: brake
shortly.
Use of colour, orange: brake
now!!
Use of colour, red: brake
too late, intervention.
This use of colour for
control of user's attention
can be used for any systems,
for instance for passengers
and teachers.
To top of mmi concepts list.
Planning
At the right maximum train
speed profile ahead. Lower
maximum speed at 1000 m.
The planning design was
based on the experimental
diagrammatic design
(see above).
Time to intervention
The small square at the top
left shows that there is
sufficient time to safety
system brake intervention.
Train braking curve is
close to safety braking
curve. The square top
left shows time to
intervention of the
safety system. Time
to intervention depends
on maximum permitted
speed minus current
speed and the traction/
brake application. When
looking outside the
square is in the visal
periphery but will be
noticed when it comes
up because: the
periphery is sensitive
for changes, for high
contrast changes and
the square is at the
top of the screen.
This design was based
on the experimental
animated design
(see above).
To top of this list