Do-it-yourself Interfaces

Of drie principes voor betere gebruiksvriendelijkheid

Ik heb een magnetron thuis. Werkelijk een prachtig ding. Ik gebruik hem om mijn kip te ontdooien/per ongeluk te koken. Soms warm ik er een kliekje in op. En heel af en toe maak ik er diepvriesspinazie in warm. Om dat allemaal mogelijk te maken heeft mijn magnetron 21 knoppen! En een tweeëntwintigste om het deurtje te openen. Ik gebruik er zeven. Het lijkt wel of ik de ‘maximale potentie van mijn magnetron’ niet benut.

Magnetron Interface
Mijn magnetron is een klassiek geval van feature creep. Ontwikkelingen in de soft- en hardware maken het simpel om functionaliteit toe te voegen en dat doen we dan ook. Net zolang tot er met dezelfde knoppen zowel de tijd als het gewicht van het op te warmen product in te stellen is. Net zolang tot er twee knoppen met Start zijn. Net zolang tot mijn magnetron email kan versturen.
Dit is een groter probleem dan het op het eerste gezicht lijkt. Hoe meer functies er in software zit, hoe meer er stuk kan gaan, hoe meer training het personeel nodig heeft, hoe meer er getest moet worden. Kortom, hoe meer de magnetron uiteindelijk kost. Mijn magnetron heeft zelfs de kritische massa bereikt. Er zitten zoveel features in dat ik het maar opgegeven heb. Ik gebruik alleen een paar knoppen waarvan ik absoluut zeker ben hoe ze werken.

Feature richtlijnen
Normaal gesproken zou ik me er nu makkelijk van af maken. Geen feature creep! Alleen de minimale set functies! Maar daar schieten we niets mee op. We worden tóch opgescheept met projecten waar feature op feature gebouwd moet worden. Dus we kunnen er beter het beste van maken. Daarom volgen hier drie richtlijnen om het makkelijk te houden:
1. Gestalt psychologie
Volgens de Gestalt psychologie interpreteert het menselijk waarnemingssysteem een waarneming altijd op de simpelste manier. Een interface moet deze simpele verklaringen dus proberen te ondersteunen. Volgens de Gestalt Psychologie zijn er zes principes die van invloed zijn op het interpretatieproces: Closure, Similarity, Proximity, Symmetry and Area (onderaan), Continuity en Common Fate [java applet]. Bezoek vooral de links, die maken het veel duidelijker.
Mijn magnetron doet dit redelijk. De knopjes voor High, M-High tot aan Low zien er allemaal ongeveer hetzelfde uit (Law of Similarity) en staan dicht op elkaar (Law of Proximity). Daarom is het logisch om te veronderstellen dat ze dezelfde soort functie hebben. En inderdaad, ze zijn alle vijf te gebruiken om het vermogen in te stellen.
Helaas gaat het mis met de knoppen voor Auto defrost en Clock/A. start. Ze lijken op elkaar, staan dicht op elkaar, maar hebben toch niets met elkaar te maken. En met de knoppen in het grijze vlak wordt het helemaal een rotzooi. De vier knoppen met de schematisch weergave van voedsel (?) lijken wel in dezelfde categorie te horen, maar wat hebben de plus en de min ermee te maken? En waarom staan er twee aan de linker- en twee aan de rechterkant? Mag ik ze absoluut niet door elkaar halen?
Voor bonuspunten, met welk principe houdt deze pagina geen rekening?

2. Herkennen in plaats van onthouden
Mensen zijn slecht in dingen onthouden. Computers niet.
Computers zijn slecht in dingen herkennen. Mensen niet.
Probeer gebruik te maken van de sterke punten.
Mijn magnetron houdt al helemaal geen rekening met mijn vergeetachtigheid. Als hij eindelijk eens mijn kip perfect heeft ondooid dan hoef ik er niet vanuit te gaan dat ik dat de dag erna nog eens kan herhalen. Nee, ik krijg weer deels ontdooide, deels bevroren en deels gekookte kip. Ik ben natuurlijk de tijd- en vermogensinstellingen al lang weer vergeten. En mijn magnetron ook. Jammer.

3. Fitts’ Law
De belangrijkste formule in het interface ontwerp. Eigenlijk de enige formule, dus winner by default. Fitts’ law schat de tijd die iemand nodig heeft om een knop op een scherm te klikken afhankelijk van de afstand van de muisaanwijzer tot de knop en de afmetingen van de knop. Nogal logisch. In formule-vorm:
Fitts’s Law
Kort gezegd, hoe verder de knop is van de muisaanwijzer (D:distance), hoe langer het duurt voordat de gebruiker op de knop kan klikken (T:time). En als de knop klein is (W:width), dan duurt het ook langer.
Door het scherm zodanig in te delen dat de velden elkaar logisch opvolgen en de gebruiker zijn muis dus nooit erg ver hoeft te bewegen wordt de interface sneller en makkelijker. En maak de knoppen even groot. Als de knop zichzelf aanpast aan zijn tekstuele inhoud wordt de ‘ok’-knop ongeveer drie keer zo klein als ‘cancel’ en zelfs vierenhalf keer zo klein als ‘annuleren’ en duurt het langer om vooruitgang te boeken.
Mijn magnetron doet dit best goed. De belangrijkste knoppen die ik het meeste gebruik zijn ook het grootst en zijn dus sneller te bedienen.

Conclusie
De drie principes, Gestalt psychologie, herkennen in plaats van onthouden en Fitts’ Law, kunnen direct toegepast worden in de interface van nieuwe applicaties en met een minimale inspanning een grote verbetering in de gebruikersvriendelijkheid betekenen. Met deze principes kan zelfs een simpele magnetron gebruiksvriendelijker worden.


2 reacties »

  1. Goed artikel en begrijp (tot op zekere hoogte misschien) het hele verhaal achter Gestalt ook wel. Maar de conclusie “kunnen direct toegepast worden … met minimale inspanning” zie ik niet helemaal voor me. Hoe ga je daar practisch mee om dan? Het ontdekken van fouten in interfaces is vaak niet zo moeilijk: je gebruikt ze en na verloop van tijd ga je je ergens aan ergeren. Het probleem met het direct toepassen is dat je heel hard moet nadenken over wat mensen later misschen gaat irriteren *en* er ook nog een goede oplossing voor moet bedenken.

    Overigens gaat dat voornamelijk over punt 1 en 2. Punt 3 vind ik iets practischer.

    Auke van Leeuwen - april 28, 2008 18:38

  2. Laat ik vooropstellen dat dit hele simpele principes zijn die natuurlijk nooit een goed ontwerp kunnen vervangen.

    Laat ik een concreet voorbeeldje geven over het toepassen van Gestalt principes. Deze principes komen bijvoorbeeld erg van pas bij het opdelen van pagina’s in logische groepen. In vrijwel alle enterprise software zitten een paar pagina’s waar de gebruiker data kan invoeren; de primaire invoerschermen. Deze schermen zijn vaak directe weergaves van de tabellen uit de onderliggende database. Er zijn twee kenmerken:
    1. Ieder data-element wordt weergegeven als label - input (button, checkbox, veld, etc.)
    2. Meerdere data-elementen kunnen samen gegroepeerd worden (bijvoorbeeld tot klantgegevens of producteigenschappen)
    Door nu de gestaltprincipes toe te passen op dit type schermen kun je aangeven welke elementen bij elkaar horen. Zet de data-elementen die bij klantgegevens horen dicht bij elkaar en zet de volgende groep er verder vanaf (Proximity). Houd de labels dicht bij het corresponderende input-element (ook Proximity). Het is nogal voor de hand liggend, maar het maakt een interface echt beter bruikbaar.
    Een voorbeeld Common Fate vind je in webapplicaties met frames. In een frame wordt het menu getoond en in een ander de ‘content’. De content kan vaak scrollen, maar het menu niet. Dit maakt direct duidelijk wat bij elkaar hoort (dit wordt primair gedaan met behulp van kleurverschillen tussen het menu en de content en door de borders te tonen; het is maar een voorbeeld).

    Marco Plaisier - mei 2, 2008 9:25

Reageer

RSS feed for comments on this post · TrackBack URI