Cursus: GUI, webdesign, etc. psychologie en human efficiency

Cursus. Naar perfecte interfaces met harde psychologie over bewegen, waarnemen, taal, leren en denken. Beleving, bruikbaar, Design, experience, intuïtie, look and feel, marketing, persoonlijke meningen en techniek worden even opzij gezet. Concretisering: in requirements en honderden bekende interfaces en problemen, vooral die van cursisten.


Theoretische basis

Interface-design kan praktisch zijn met guidelines, normen, standaarden en dergelijke. 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, zo kan een interface designer niet de interface problemen oplossen die er nu nog zijn.
Andere oplossingen komen in het vizier als de ontwerper beschikt over meer dan common sense, net als bij de professionele arts.

Kennis van zaken zet de gebruikelijke interfacebegrippen in een ander licht. Het gaat niet om:



•personaliseren (persoonlijkheid) en persona’s maar aanpassen aan de taak,


•het gaat niet om help voor een hulpbehoevende maar sturing van de gebruiker naar een hoger expert level,


•een navigatieprobleem maar om een juiste conceptuele structuur
,

•het gebruik van metaforen laat vooral zien dat de ontwerper niet snapt waar het om gaat.
Dat blijkt uit een analyse van de concepten

•homepages,
, desktops, tag clouds en personal assistants.


Interessant is oplossingen voor het interfaceprobleem tegen een psycho­logisch daglicht te houden: zoals beleving, gebruiks­vriendelijkheid, intuïtief, keep it stupid simple (KISS), mensgericht ontwerpen, persuasive design, smart, social interfaces, usability, user centered design,(user)experience en verplaatsen in de gebruiker.
Wat de psychologie betreft gaat het onder andere om:

Waarneempsychologie
Generiek waarnemen.
Aandacht trekken versus aandacht sturen. Gebruik van kleur en geluid.
Leerpsychologiee
Het werkgeheugen wordt vaak vergeten.
De gebruiker niet 'helpen' maar sluw, ongemerkt zijn handelingen verkorten.Het werkgeheugen wordt vaak vergeten.
Denkpsychologie
Van papieren-jaar-denken naar dynamisch-nu-denken.
Anticiperen: vergeten voorkomen door vooruitzien.
Metaforen zijn valkuilen die niet opvallen.
Psychologie van list bedrog en intimidatie.
De werkelijkheid tonen die de gebruiker kent en ziet of een onzichtbare werkelijkheid tonen die de gebruiker nodig heeft.
De toekomst van de toegepaste cognitieve psychologie
Is cognitive psychology dead?.
Cognitive psychology will control the future
Een weten­schappelijk verantwoorde en professionele aanpak voor 'het interface­probleem' 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.
Why designers can“t understand their users, developing a systematic approach using cognitive psycho­logy, usability


Praktische toepassing

Kan een cursus met zo'n theoretische achtergrond wel praktisch zijn? Ja dat kan. Simpel omdat een goede theorie 'operatio­naliseer­baar 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. boek, cognitief, gui, webdesign, psychologie, gebruiksvriendelijkheid, ontwerp, usability
  • Het bekendste voorbeeld was de oorspronkelijke interface van de NS-treinkaartautomaat. De interface daarvan is door mij gespecificeerd. Deze specificaties zijn in het oorspronkelijke ontwerp vrijwel geheel door NS gevolgd en daarmee was 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.
  •  
  • Verder zijn er voorbeelden die ik speciaal voor de cursus gemaakt heb. Deze voorbeelden zijn zuiver; ze tonen het psycho­logische punt zonder mitsen en maren en de inhoud is in enkele seconden te begrijpen.

  • 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) Overigens ben ik psycholoog en geen designer.

    Verder heeft de browser het laatste woord, zo zijn er geen toetsshortcuts die de lezer voor RSI behoeden, soms is de uitlijning anders dan bedoeld en sommige browsers tonen de tooltips onhandig of niet.
  • Het belangrijkst is natuurlijk de concretisering naar de interfaces die de deelnemers inbrengen.

  • Veel voorbeelden komen uit mijn dertigjarige adviespraktijk.  
  • Naar top.

    Programma

    De inbreng van de gebruikers bepaalt welke van de volgende onderwerpen aan de orde komen.

    Welke uitgangspunten

    - De marketing als uitgangspunt.
    - De mening van de gebruiker als uitgangspunt.
    - User experience als uitgangspunt.
    - De ergonomie als uitgangspunt.
    - Usability als uitgangspunt.
    - Psycho­logische 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.

    Waarnemen

    Sturing van de aandacht en herkennen van informatie
    - Gebruik afmeting, vorm, tekst, icons, vet, dimmed, kleur, knipperen

    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.

    Taal

    - Waarom ingaan op taal?
    - Taal, een schat verborgen onder graphics.
    - Wat maakt woorden onduidelijk.
    - Welke IT woorden zijn jargon.
    - Wat is er mis metOK enClose.
    - Verwacht niet te veel vanvoice-input.

    Leren en onthouden

    - De ultimateAre you sure? interface.
    - De ultimate zandloper (progress indicator).

    Help
    - Kan Help helpen?
    - Wat is er mis met deTip van de dag?
    - Wat is er mis met wizards?
    - Wat is er mis met personal assistants?
    - Help die helpt.

    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.

    Denken

    Mentale belasting
    - Interfaces die mentale belasting vergroten.
    - Ontwerpen om mentale belasting te verkleinen.

    Aanpassen
    - Waarom aanpassen?
    - Het ontwerpen van interfaces voor aanpassing.

    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 .

    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 psycho­logische kennis en onderzoeks­gegevens. Concretisering volgt door de psycho­logische processen te vertalen in handelingen met interface elementen en in 'requirements' voor de interface.

    Vervolgens komt de test: hoe zijn deze requirements toegepast. We beginnen met 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 psycho­logische analyse een gouden ei te zijn. Een cognitief psycho­logische blik op interfaces is voor velen een eye opener. Technische, financiële en intellectuele hoogstandjes zijn daarbij vrijwel nooit nodig.
    Naar top.

    Unieke van deze cursus

    Niet gebruikelijke invalshoeken...
    Er zijn verschillende invalshoeken voor interface ontwerp.
    Nadat standaarden en richtlijnen niet bleken te leiden tot goede interfaces werd gebruiks­vriendelijkheid het sleutel­woord. 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. Rond het jaar 2000 duikt (user)experience en beleving op. Rond 2010 duikt persuasion op. Dit zijn goede doelstellingen maar een eenduidige concretisering is lastig. Dat geeft teveel ruimte voor persoonlijke invulling en hobby's.
        ... maar psycho­logische 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 fixatie­gebied is bijvoorbeeld vijf graden en details die daar buiten vallen worden niet onderscheiden, welk amateur psycho­logisch 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 psycho­logisch 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. Vraag je daar dan toch naar dan is het antwoord: 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 kijken naar 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 in de cursus getoetst aan de psycho­logische 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 ontwerp­methodologie.
    ... maar inzicht.
    Het psycho­logisch inzicht dat de cursus biedt, past altijd in de werkwijze die men gewend is.
    Naar top.

    Het resultaat

    Het is even wennen niet uit te gaan van gebruikelijke concepten maar van concrete psycho­logische processen. Maar er zijn wel wat voordelen.
     
  • Psycho­logische processen zijn onafhankelijk van de interface-design techniek. De duurzaamheid van nieuwe modes, snufjes en technieken kan getoetst worden aan de psycho­logische processen.
  • De processen zijn 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 processen zijn 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, traffic users (automobilisten, schippers, voetgangers in een winkelcentrum en 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.
  • De cursus geeft zicht op de interface evolutie die loopt van techniek­vriendelijke interfaces naar interfaces die geheel aangepast zijn aan de mens en zijn taak. Gebruiks­vriendelijk­heid is geen issue meer.
  • Naar top.


    Deelnemers

    Voor wie
    De cursus is voor interface-designers, software ontwikkelaars, managers van human-computer interface projecten en ergonomen. Ook psycho­logen volgen de cursus. De vertaling van psycho­logische processen naar interfaces is kennelijk erg lastig. Voor grafisch geschoolden kan de cursus een verrijking zijn omdat zij minder bekend zijn met psycho­logische overwegingen van ontwerpmogelijkheden. Ook de verbale en de conceptuele vormgeving heeft bij grafisch ontwerp soms minder aandacht.


    Nieuwe middelen als e-book, e-reader, iBook, iPad, iPhone, iPod, pda en allerlei 'smart' dingen zijn voor de vingers onhandiger en geven de ogen minder ruimte. Voor het verstand is niet te begrijpen wat zo'n apparaat eigenlijk is. Ontwerpers moeten zich dan extra precies houden aan wat er over het bewegen, waarnemen en denken in de cursus gezegd wordt.
    Voorkennis
    Programmeerkennis en psycho­logische 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.
    Naar top.

    Historie van de cursus

    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 psycho­logie hetzelfde en werden alleen de voorbeelden vervangen.
    Nu: complexe systemen en navigeren
    Bij het ontwerpen van complexe systemen zoals wij die vandaag kennen, zijn taal, begrijpelijkheid, leren en denken belangrijk. Deze lastige onderwerpen zijn in de loop der jaren voor de cursus voldoende uitgewerkt.
    Naar top.
    Naar top.
    Interfaces waaraan
    de trainer substantiëel
    bijdroeg en ontwerpen
    die besproken kunnen
    worden.



    Public transport
    Road traffic
    Waterway traffic
    Road traffic signs

    Complex data



    Demo cognitief psychologisch verantwoorde
    'kilometerteller', vooral voor de bestuurder
    van een zelfrijdende auto.

    complex process presentation
    Upper right red,
    Close to disaster

    complex process presentation
    All OK.

    complex process presentation
    Upper right yellow low,
    take care!

    complex process presentation
    Upper right yellow high,
    take care!
    Source: Verhoef Holslag,
    2010.

    leerroute beheers systeem
    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?

    train traffic control information portrait orientation
    What is better for a
    train traffic
    controler?
  • portrait ...
  • train traffic control information landscape orientation

  • ...landscape?

  • Source: Holslag & Verhoef.

    What is better
    for car driving?
    tom tom autonavigatie scherm
  • ... realistic landscape?
    Source: Tom Tom, 2010.


  • auto route reisplanner reizen
  • alphanumerical portrait
    ...?
  • In this case the best
    orientation is ...

    Source: Verhoef, 2010.

    etcs ermts mmi dmi planning
  • abstract portrait ...?

  • Source: ETCS/Verhoef.

    Train traffic
    control


    How to present
    tracks and platforms?
    Presentation of tracks and platforms for train traffic controlers
  • This way?

  • Presentation of tracks and platforms for train traffic controlers
  • Or this way?

  • Source: NS/Verhoef.

    Public transport signs



    Design of in car systems


    Speed control information for cars.
    Point with cursor for an explanation.


    Design of train indicators

    Departure in 30 min.


    Grey half circle:
    Go shoping.
    Departure in 30 min.

    Departure in 15 min..
    Yellow 1/4 circle:
    Go to train.
    Departure in 15 min.


    Departure in 30 sec.

    Source: Amersfoort, The Netherlands, 2008.


    Orange half circle:
    Hurry up!
    Departure in 30 sec.

    Source: Experimental
    designs, Verhoef 2010.


    Trains indicator Amsterdam approx. 1990-2010

    Experimental design destinations indicator.
    Source: Verhoef.

    Design ticket vending


    Check in/out Dutch electronic public transport ticket system (trip costs, debit remaining, bye bye ).

    Experimental check in/out device.
    Source: Verhoef
    NS touch screen train ticket vending machine
    NS touch screen train
    ticket vending machine
    Routing problems
    solved using ...



    Ticket vending machine.
    Language optionfirst step
    (hierarchical solution)?
    Source: Belgium Railways.


    Ticket vending machine.
    Change language any time
    (parallel solution).
    Source: NS/ Verhoef.

    Netherlands Railways touch screen train ticket vending machine.

    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.


    coffee drink vending machine, use of gray out.
    The train ticket vending
    machine solution is general
    applicable. It also can
    be used for complex drink
    vending machines.
    Source: Verhoef.

    Road traffic signs



    Complex data

    line graphs usability
    What is after this generation
    of graphs?
    Source: www.gapminder.org.

    visualizing database and complex data usability
    This?
    Yes, it is after.
    Yes, it is futuristic.
    Has it future?
    Probably not
    because ...
    Source: IBM.


    three dimensional presentation of complex data
    Probably
    h's got new
    software
    for his birthday.
    Source: Volkskrant.

    visualizing database and complex data, usability
    Or this? New, for most of us.
    Futuristic: no,
    more than
    20 years old.
    Has it future?
    Certainly yes
    because ...

    visualizing database and complex data, multi dimensional, usability
    Why tell these 20
    year old
    character smileys ...
    ... more than
    today's smileys?


    Traditional GUI elements


    type mismatch

    What is the problem here?
    Why the designer
    made this error?

    Progress indicator, hour glass.
    15 requirements
    for “are you sure?“
    How many
    requirements meets
    this window?

    error with tab interface
    A traditional window
    and tabs, what is
    the psychological
    evaluation of
    this kind of windows?

    presenting files in a directory, gui
    One way to order files.

    presenting files in a directory, gui
    Another way to
    order files
    Which one is best?
    Why?

    Word main menu
    What is better?
    Horizontal menu?
    Vertical menu?
    What are advantages
    of the latter?

    Word main menu.
    The Word main menu,
    what is an alternative?
    Not using other words
    of course but...

    Desktop and usability
    Hmm, the desktop.
    What is the visual and
    conceptual structure
    the inventers had
    in mind?.


    Tape recorder as metaphor for printer.
    Hmmm, another
    metaphor
    Tape recorder
    for printer.
    Good idea?

    date calendar input usability
    What is the difference
    between a calender
    on paper and
    on a screen?


    dancing paperclip to solve usability problems
    Can a dancing
    paperclip solve
    userunfriendlyness?"
    Why not?
    Some perfect designs
    A form to order supermarket products.

    Why is this
    a perfect design?

    A combination of marketing and usability
    Why is this
    a perfect design?

    Pie charts, usability
    Why does the eye
    like pie charts?
    Why do brains
    not like them?

    MS-DOS file directory, usability
    And why brains
    liked this one?Waterway traffic signs




    To top of list of pictures.


    Meer psycho­logie voor Gui en web


    Design van beeps, ringtones, trillen en vegen
    Desktop, top of flop?
    Gebruik van metaforen is riskant
      GUI en psychologie, welke de beauty, welke de beast?
    Handelingspsychologie en interface design
    Help is ongelukkige term voor uitleg
    Homepage van morgen


    Huidige interfaces hebben geen toekomst
    Handvriendelijkheid van handhelds
      Menu combineert spraak- en taalstoornissen
    Met KISS heb je het mis
    Smart technology in traveller’s future: van dictatoriaal wensdenken naar dienend design
    Niemand, zelfs de ontwerpers, weten wat het is:
    een desk-top, e-book, e-reader, gsm, handheld, hands-top, hand-top, iBook, iPad, iPhone, iPod, lap-top, note-book, pda, smart phone, tablet en een ultra-book
      Personaliseren en aanpassen
    Psycholoog moet technicus detailontwerp dicteren
      Gebruik van metaforen is riskant
    Tag clouds zijn te mistig
      Tansformatie ok, voor interface nee
    User experience, ervaringen in het openbaar vervoer
    Van piepende meester word je niet wijzer
    Vingervriendelijke toetsen

    From putting data in statistics to controlling conclusions.

    Is cognitive psychology dead?

    Presenting numbers to teachers, drivers, travellers.
    Kenniswijzer interface-psycho­logiekenniswijzer toegepaste cognitieve psychologie
    Behalve psycho­logie voor gui en web ook psycho­logie voor:
    Public information: bewegwijzering, dynamische (reis)informatie, kaartverkoop, OV-chip, ed.   

      Grammatica voor graphics: Begrijpelijke bordjes op straat, stations en auto- en waterwegen.                

    Toekomst: ons dagelijks leven in een technische toekomst, maar volgens de psychologie    huisalarm  typekamer  typekamer      

    Leren rekenen op de basisschool: computers, toekomst, didactiek


    Snelheidsbeheersingsinformatie (ATB) voor machinisten van hogesnelheidstreinen (ERMTS).      

    Naar top.

    Zoeken in humanefficiency.nl

    Contact


    cognitieve psychologie, gebruiksvriendelijkheid, interface design, mmi, ontwerp, usability, web page design
    Human Efficiency
    Leonard Verhoef

    +31 (653) 739 750

    Parkstraat 19
    3581 PB Utrecht
    Nederland

    leonardverhoef@gmail.com
    Kamer van koophandel, inschrijvingsnummer: 39057871, Utrecht.
    Naar top.