Cursus: GUI, webdesign, psychologie en human efficiency
|
Utrecht, € 1100.
26 en 27 april 2012, 107de cursus.
|
Naar perfecte interfaces en webpages, met harde psychologie over het bewegen, het waarnemen, de taal, het leren en het denken. Beleving, usability, Design, experience, intuïtie, look and feel, marketing, persoonlijke meningen en techniek worden even opzij gezet. De cursus is een combinatie van leren en advies door focus op interfaces, discussiepunten en problemen van cursisten. |
Op deze pagina:
theorie.praktijk.programma.werkwijze.deelnemers.historie.unieke van deze cursus.cursusleider.waar, wanneer?anmelden.contact.
|
Theoretische basis |
Interface-design kan praktisch zijn met guidelines, normen, standaarden etc. Het cursusboek geeft er zo'n 260. Een lijst met normen blijkt echter niet voldoende om te komen tot een goed interface. Veel problemen zijn inmiddels opgelost met gezond verstand en door vallen en opstaan. Maar net zo min als een arts een ernstige ziekte kan oplossen met gezond verstand en vallen en opstaan, kan een interface designer de interface problemen die nu nog over zijn oplossen met vallen en opstaan.
Andere oplossingen komen in het vizier als de ontwerper beschikt over theorie en wetenschap, net als de arts.
Naar top.
| |
Met kennis van zaken duiken er interfacebegrippen op die ongebruikelijk zijn, maar die psychologisch gezien in discussies over interface-design niet mogen ontbreken. Voorbeelden zijn er voor
personaliseren en aanpassen, voor bestaande helptechnieken, voor
het navigatieprobleem en de oplossingen daarvoor, voor
metaforen, voor
homepages, voor de desktop, voor tag clouds, voor utonavigatie systemen en voor
personal assistants.
Gebruikelijke ‘psychologische’ begrippen komen in een ander daglicht te staan, zoals
beleving, intuïtief, keep it stupid simple (KISS), moderne mens, onderzoek, personal assistant, persuasive designsmart en user experience.
Een wetenschappelijk verantwoorde en professionele aanpak voor 'het interfaceprobleem' staat in
Why designers can't understand their users. In principe gaat de cursus niet over de verantwoording van die aanpak maar de cursisten krijgen dit boek wel. Ook is er een webpage die deze aanpak beschrijft.
|
 |
Praktische basis |
Kan een cursus 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 en interfaces. Bovendien is een van de theoretische uitgangspunten van de hier gevolgde handelingstheorie: 'niet constateren van performance maar construeren van performance'. Dat is één. |
|
Ten tweede zijn er honderden voorbeelden van interfaces die ondubbelzinnig wel of niet in overeenstemming zijn met die theorie. Rechts op deze pagina staan zulke voorbeelden. |
 |
| |
Het bekendste voorbeeld is de NS-treinkaart automaat. (Als de link niet werkt, google dan 'ns treinkaartautomaat demo'). De interface daarvan is door mij gespecificeerd. Deze specificaties zijn vrijwel geheel door NS gevolgd en daarmee is de automaat naar mijn idee een goed voorbeeld van 'human efficiency'. Het openbaar vervoer kent iedereen en ik ben bij veel interfaces betrokken geweest. Dat levert zo nodig
meer voorbeelden. | |
Windows en Office leveren ook vele voorbeelden. Er zijn weinig voorbeelden van de Mac. Natuurlijk is de Mac mooier, werkt die technisch beter en zitten er minder knulligheden in de interface. Maar ook de Mac gebruikt een bureaublad, menu's en tabbladen, om maar eens wat te noemen. Daar zijn forse vraagtekens bij te plaatsen. De meeste deelnemers komen echter uit een Windowsomgeving. |
| |
Verder zijn er voorbeelden die ik speciaal voor de cursus gemaakt heb. Deze voorbeelden zijn zuiver; ze tonen het psychologische punt zonder mitsen en maren en de inhoud is in enkele seconden te begrijpen.
Naar top. | |
Ook op deze site heb ik wat voorbeelden proberen te realiseren.
(1) Zo is het aanraakveld zo groot mogelijk gemaakt. Dat werkt sneller en is RSI-onvriendelijk.
(2) Donkerblauw betekent: klikbaar. Geen technisch en grafisch onderscheid in buttons, links, tabs, menu opties, etc.
(3) Ook het menu bovenaan heeft niet de gebruikelijke hierarchische structuur zoals men op het eerste gezicht zou zeggen.
Overigens heeft de browser het laatste woord, zo werken de toetsshortcuts die de lezer voor RSI moeten behoeden niet altijd, is de uitlijning soms anders dan bedoeld en tonen sommige browsers de tooltips niet. | |
Het belangrijkst is natuurlijk de concretisering naar de interfaces die de deelnemers inbrengen.
Veel voorbeelden komen uit mijn vijfentwintigjarige dviespraktijk. |
Programma |
De inbreng van de deelnemers bepaalt wat van de onderstaande lijst aan de orde komt.
Welke uitgangspunten- De marketing als uitgangspunt. - De mening van de gebruiker als uitgangspunt. - User experience als uitgangspunt. - De ergonomie als uitgangspunt. - Usability als uitgangspunt. - Psychologische uitgangspunten. Efficiënte invoer- Hoe clicken te vereenvoudigen. - Hoe de reistijd van de cursor over het scherm te verminderen. - Hoe de toetsinvoer te verminderen: entry of selection. - Invoer in de toekomst.
WaarnemenSturing van de aandacht en herkennen van informatie - Gebruik afmeting, vorm, tekst, icons, vet, dimmed, kleur, knipperen - Gebruik afmeting
Waar informatie plaatsen?
Rustige schermen
Waarnemen en tabellen - Inefficiënte tabellen. - Tabs, inspringen en gecentreerde teksten. - Wat in rijen en wat in kolommen, portret of landschap. - Het ontwerpen van tabellen. - Schermindeling in de toekomst. Taal
- Waarom ingaan op taal? - Taal, een schat verborgen onder graphics. - Wat maakt woorden onduidelijk. - Welke IT woorden zijn jargon. - Wat is er mis met 'OK' en 'Close'. - Verwacht niet te veel van 'voice-input'.
- Taalgebruik in de toekomst. Leren en onthouden- De ultimate 'Are you sure?' interface.
- De ultimate zandloper (progress indicator).
Help - Kan 'Help' helpen? - Wat is er mis met de 'Tip van de dag'? - Wat is er mis met wizards? - Wat is er mis met personal assistants? - Help die helpt. - Help in de toekomst
Guidelines, consistentie en standaarden - De beperkingen van guidelines, consistentie en standaarden.
- Wat is beter dan consistentie.
Metaforen - Waarom zijn metaforen (desktop, window, bar, gallery, etc) aantrekkelijk voor ontwerpers. - De beperkingen van metaforen. - Alternatieven voor metaforen. - Het paradoxale van metaforen. - Metaforen als valkuil.
Leren in de toekomst.DenkenMentale belasting - Interfaces die mentale belasting vergroten. - Ontwerpen om mentale belasting te verkleinen.
Aanpassen - Waarom aanpassen? - Het ontwerpen van interfaces voor aanpassing. - Aanpassen in de toekomst.
Navigatie en het menu - Wat maakt een menu, een geografische en een virtuele structuur zo aantrekkelijk voor ontwerpers?
- Wat maakt deze structuur zo onverteerbaar voor gebruikers? - Het conceptuele (en visuele ) ontwerp van verteerbare structuren . - In de toekomst: navigatie in complexe systemen opgelost.
Naar top. |
Werkwijze |
Een programma-onderdeel begint met een anekdote of een klein experiment. Op deze wijze ontstaat er een link tussen de persoonlijke ervaringen van de deelnemers, de psychologische kennis en onderzoeksgegevens. Concretisering volgt door de psychologische processen te vertalen in handelingen met interface elementen en in 'requirements' voor de interface.
Naar top. | |
Vervolgens komt de test: hoe zijn deze requirements toegepast. We beginnen ontwerpen van anderen en daarna op de ingebrachte interfaces. Ook de cursusleider legt zijn ontwerpen op tafel. Bij inbreng van eigen ontwerpen is er het risico dat iemands stokpaard sneuvelt. Ook het omgekeerde gebeurt trouwens: een schijnbaar misbaksel blijkt na en psychologische analyse een gouden ei te zijn. | |
Een cognitief psychologische blik op interfaces is voor velen een 'eye opener'. Technische, financiële en intellectuele hoogstandjes zijn daarbij vrijwel nooit nodig. |
Unieke van de cursus | Niet gebruikelijke invalshoeken...
Er zijn verschillende invalshoeken voor interface ontwerp.
Nadat standaarden en richtlijnen niet bleken te leiden tot goede interfaces werd 'gebruiksvriendelijkheid' het sleutelwoord. Microsoft mikte even op ‘social interfaces’ (Gates, 1995) en in de academische wereld werd ‘user centered design’ populair (van der Veer, 2007). Usability kwam daar voor in de plaats. Verder kregen we onder andere 'look and feel', 'intuïtieve' interfaces en ‘verplaatsen in de gebruiker’. Nu heeft 'beleving' en 'experience' veel belangstelling.
Dit zijn goede doelstellingen maar een eenduidige concretisering is lastig. | |
... maar psychologische handelingen.
In deze cursus ligt het accent op inzicht in het menselijk handelen.
Het uitgangspunt is dat een gebruiker motorische, visuele, taal-, denk- en leerhandelingen uitvoert met de interface.
Concretisering kan dan maar op één manier. Het visuele fixatiegebied is bijvoorbeeld vijf graden en details die daar buiten vallen worden niet onderscheiden, welk amateur psychologisch verhaal de designer ook houdt.
Motivatie en emotie zijn natuurlijk wel van belang maar komen niet aan de orde. Ten eerste is dat een heel ander psychologisch en fysiologisch verhaal. Ten tweede heeft het geen zin een gebruiker te vragen waarom hij het beeldscherm door het raam gooide wanneer de onderzoeker vooraf al kan weten dat de interface niet gebruiksvriendelijk is. Ten derde is, wat de interface betreft, de emotie niet meer relevant wanneer het systeem gebruiksvriendelijk is. “Gebruiksvriendelijk? Man waar heb je het over, laat me toch rustig doorwerken, ik was net zo lekker bezig.”
|
| |
Niet interface-elementen...
Een gebruikelijke ingang bij interface design is de technische grafische elementen op het scherm. Vaak zijn dat metaforische interface-element zoals: advanced, bar, button, desktop, graphic, help, menu, ok, personal assistant, tabs, tip of the day, window en wizard. |
|
... maar handelingen met interface-elementen.
Deze gebruikelijke interface-elementen worden getoetst aan de psychologische handelingen die gebruikers er mee uitvoeren: vinger-, oog-, taal-, leer- en denkhandelingen. Toetsing is eenvoudig: de tijd die nodig is voor de handeling, het aantal gemaakte fouten wat de gebruiker betreft en de kosten en de kwaliteit van het product wat de taak betreft. |
| |
Géén ontwerpstappenplannen...
In deze cursus geen stappenplannen noch een bepaalde ontwerpmethodologie.
Naar top. | |
... maar inzicht.
Het psychologisch inzicht dat de cursus biedt past altijd in de werkwijze die men gewend is.
|
Het resultaat |
Het is even wennen niet uit te gaan van gebruikelijke concepten maar van concrete psychologische processen.
|
| |
De kennis is onafhankelijk van de interface-design techniek. De duurzaamheid van nieuwe modes, snufjes en technieken kan getoetst worden aan de psychologische processen. | | De kennis is tijdloos; welke interface-design begrippen er ook nog in de mode komen en welke verrassingen de techniek ook in petto heeft. De psychologie blijft de komende 100 000 jaar een onveranderlijke toetssteen.
|
| |
De kennis is domeinloos. In deze cursus ligt de focus toevallig op GUI en webdesign. Tijdens de cursus wordt zo nodig moeiteloos geschakeld naar domeinen waar de cursusleider ervaring èn ontwerpvoorbeelden van heeft (public transport information systems, onderwijs, process en traffic operators, machinisten van hoge snelheidstreinen). Switchen naar het domein van de cursisten is eenvoudig, zelfs wanneer het gaat om complexe domeinen. De cursist kan van werkkring veranderen zonder opnieuw naar cursus te moeten: de vingers, de ogen, de taal, het geheugen en het denken van de gebruikers van zijn nieuwe werkomgeving functioneren op dezelfde wijze als die van zijn vorige werkomgeving.
Naar top. |
|
De cursus geeft zicht op de interface evolutie die loopt van techniekvriendelijke interfaces naar interfaces die geheel aangepast zijn aan de mens en zijn taak. Gebruiksvriendelijkheid is geen issue meer. |
Deelnemers | Voor wie
De cursus is voor interface-designers, software ontwikkelaars, managers van human-computer interface projecten en ergonomen. Ook psychologen volgen de cursus. De vertaling van psychologische processen naar interfaces is kennelijk erg lastig. Voor grafisch geschoolden kan de cursus een verrijking zijn omdat zij minder bekend zijn met psychologische overwegingen van ontwerpmogelijkheden. Ook de verbale en de conceptuele vormgeving heeft bij grafisch ontwerp soms minder aandacht. Vaak voelen niet-psychologen wel dat de huidige interfaces niet kloppen maar men weet niet hoe dat precies komt en hoe dat probleem op te lossen. De kracht van de psychologie is dat zij precies kan aangeven waarom een interface niet klopt en in welke richting de oplossing kan liggen.
Naar top. | |
Voorkennis
Programmeerkennis en psychologische kennis zijn niet noodzakelijk.
Het is gebleken dat deelnemers de benadering uitdagend en onconventioneel vinden. Het is daarom gewenst dat de deelnemers open staan voor nieuwe ideeën. |
Historie |
Het begin: invoer en beeldscherm
De cursus richt zich op de menselijke functies. Evolutionair gezien veranderen deze nauwelijks. Ook deze cursus verandert dus nauwelijks. Twintig jaar geleden werd deze cursus ook gegeven met MS-DOS voorbeelden. Toen GUIs en Windows opkwamen bleef de psychologie hetzelfde en werden alleen de voorbeelden vervangen. Nu weer handhelds en social media. Wel veranderde de focus van de cursus. Aanvankelijk ging het vooral om invoer en waarnemen.
Naar top. | |
Nu: complexe systemen en navigeren
Bij het ontwerpen van complexe systemen zoals wij die vandaag kennen, zijn taal, begrijpelijkheid, leren en denken belangrijk. Dat heeft nu focus. |
Waar, wanneer, prijs? |
De cursus wordt twee keer per jaar gegeven. De 107de cursus is 26 en 27 april 2012.
Naar top. | |
Ontvangst met koffie en thee vanaf 9 uur, we beginnen beide dagen om 9:30 en eindigen om 17:00. Er is een goede lunch. Het maximale aantal deelnemers houden we op 8. De locatie is het NH Hotel te Utrecht, vlak naast het Centraal Station.
|
|
De kosten voor de tweedaagse cursus zijn 1100 €, excl. 19% btw. Bij boeking twee maanden voor de start is er 10% korting.
Inbegrepen zijn twee cursusboeken (2 x 260 pagina's) met de concrete toepassing voor interface-design.en het boek
Why designers can't understand their users, zaalhuur, koffie, thee en goede lunches.
De deelnemers krijgen een certificaat waarmee zij aan kunnen tonen dat zij bekend zijn met het toepassen van cognitief psychologische principes bij het ontwerpen van GUIs en webdesign.
|
|
Interfaces waaraan de trainer substantiëel bijdroeg en ontwerpen die besproken kunnen worden.
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? portrait ... ...landscape?Source: Holslag & Verhoef.
What is better for car driving? ... realistic landscape? Source: Tom Tom, 2010. alphanumerical portrait ...?
Source: Verhoef, 2010. abstract portrait ...?
Source: ETCS/Verhoef.
Train traffic controlHow to present tracks and platforms?
This way?
Or this way?Source: NS/Verhoef.
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.
 It looks like a menu. 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.
Safety information for high speed train drivers (ETCS).
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).
Waterway signing
Current,
European standard(Cevni),
experimental Verhoef signs.
Underwater tresshold
in lock
 Several markers for keep clear from doors. Source: Lock Kiel canal, 2011.

A clear text and sign for
the cill problem.
Keep clear from the door. Source: UK.

An other clear sign
for the cill problem.
Keep 1 meter clear
from the lock door. Source: experimental demo design,
Verhoef, 2011
.
Underwater tresshold
under bridge

Source: Amsterdam,
near Central Station, 2011.
This is a Cevni sign.

A lateral tresshold sign that is understood. Source: experimental demo design, Verhoef, 2011.
Mooring sign

Current sign. Source: Enkhuizen,
The Netherlands, 2011.
Redesign Source: Verhoef demo, 2011.

Source: Vienna, 2011.

Redesign Source: Verhoef demo, 2011.
Dam sign
What is the meaning
of this Cevni sign? Source: Belgium Ardennes, 2011.
This sign stands for:
dam in 100 meter.
Source: experimental demo design,
Verhoef, 2011.
Shallow shore sign

What is the meaning
of the black arrow
pointing left and the
white arrow
pointing right? Source: Hamburg, 2011.
Cevni sign.

Keep 5 meter from shore,
shallow shore. Source: experimental demo design,
Verhoef, 2011.
To top of list of pictures.
|