naar top
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.

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.
De aanpak van de psychologie is een andere dan: , gebruiks­vriendelijkheid, intuïtief, , mensgericht ontwerpen, persuasive design, ,social interfaces, software ergonomie, usability, user centered design, en verplaatsen in de gebruiker. De invalshoek van de psychologie is vaak net iets anders:









Dat blijkt uit een analyse van de concepten: , , en


Wat de psychologie betreft gaat het onder andere om:








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 : 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 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
  • 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( ) en in de academische wereld werd user centered design populair ( 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 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. 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 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. 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


    Waterway traffic signs


    To top of list of pictures.


    Meer toepassingen van de psychologie bij GUI en web


    Naar top.



    Behalve psychologie voor GUI en web ook psychologie voor:
    Naar top.






    Zoeken in humanefficiency.nl

    Contact

    +31 (653) 739 750
    Parkstraat 19
    3581 PB Utrecht
    Nederland

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