UI- en UX-ontwerp

User interface & User experience design 

Bij het ontwikkelen van een applicatie of een stuk software bevind je je op het knooppunt tussen het digitale systeem en de eindgebruiker. Aan de kant van de machine moet je kennis hebben van grafisch ontwerp, besturingssysteem, programmeertalen en ontwikkelomgevingen. Aan de menselijke kant komen grafisch ontwerp, communicatietheorie, taal, sociale wetenschappen, psychologie, emoties... om de hoek kijken. Daarom is het ontwerp van een interface zelden het werk van één enkel persoon.

Waar moet je allemaal rekening mee houden bij het ontwerpen van een interface? Hoe kan je zowel rekening houden met de verwachtingen van de opdrachtgever, als met de eindgebruiker? Bij het ontwerpen van een interface spreken we daarom van UX-design: de gebruiker staat centraal (user experience), want de “klant is koning”.

1. Modulariteit

Hardware is op zich een sterk voorbeeld van modulair ontwerp. Wie wat overweg kan met computeronderdelen kan zijn eigen toestel modulair samenstellen. Een externe harde schijf, een USB-stick, een printer/scanner... kan je beschouwen als afzonderlijke modules. Ook moderne programmeertalen (zogenaamde object-georiënteerde talen) werken modulair, met kleine herbruikbare stukjes code. Software en apps op tabletcomputers en smartphones kan je beschouwen als apart te installeren modules. Een modulair ontwerp maakt het voor de gebruiker mogelijk om zijn digitaal systeem uit te breiden of te wijzigen.

2. Schaalbaarheid

Modulariteit betekent echter niet automatisch dat we een systeem of een interface onbeperkt kunnen schalen. Iets wat functioneert op kleine schaal werkt bijvoorbeeld niet noodzakelijk op een grote schaal.  

Een touchscreeninterface werkt fijn op een smartphone of een tablet, maar op een computer met een groot beeldscherm is het niet meteen een gebruiksvriendelijke interface. Een toetsenbord werkt handig op een laptop of computer, maar is behoorlijk onhandig op een mobiele telefoon.  

Bij webdesign staat responsive webdesigncentraal: een website moet zowel op een mobiel toestel als op een computer perfect weergegeven worden: een website moet “schalen” naargelang de schermbreedte.

3. Toegankelijkheid

Toegankelijkheid blijft niet beperkt tot een systeem bruikbaar maken voor mensen met een beperking. Iedere gebruiker heeft baat bij een toegankelijk systeem. Een interface dient zo ontworpen te worden dat hij vlot toegankelijk is voor iedereen. Bedieningsgemaken eenvoud in gebruik zijn belangrijke normen. Een goed ontworpen interface zorgt ervoor dat gebruikers zo min mogelijk fouten kunnen maken. Toegankelijkheid en gebruiksvriendelijkheidhangen af van een heleboel factoren.

Een gebruikersinterface moet eerst de lagere behoeften van de gebruiker bevredigen, daarna pas de hogere. We hebben het hier uiteraard niet over voedselvoorziening, maar over de functionaliteitvan een digitaal systeem.

4. Wat wil de gebruiker? 

Bij het ontwerp kies je niet tussen flexibiliteit (veel mogelijkheden) en gebruiksgemak.Je moet zelf afwegen welk onderdeel voor jouw ontwerp of interface het meest doorweegt.  

Een flexibel ontwerp biedt de gebruiker meer mogelijkheden, maar is minder efficiënt. Een vaak gemaakte fout is veronderstellen dat flexibiliteit boven gebruiksgemaak gaat.  

Bijvoorbeeld:
Bij een PC zijn veel mogelijkheden bij aankoop nog onbekend. Een student die de richting multimedia start, heeft geen idee waarvoor hij/zijn zijn toestel een paar maand later allemaal zal gebruikt hebben. De verkoper/ontwerper moet in dit geval anticiperen op het toekomstig gebruik.  

Als het publiek inzicht heeft in wat het wil, heeft specialisatie voorkeur. Voor iemand die klaar en duidelijk weet dat hij enkel af en toe wat wil surfen op het internet, volstaat een tabletcomputer. Wie niet precies weet waarvoor hij een computer allemaal zal inzetten, mikt op flexibiliteit.  

Flexibiliteit betekent echter niet dat we gebruiksgemak uit het oog moeten verliezen. Eenvoud in gebruik heeft steeds de voorkeur boven complexiteit. Volg het KISS-principe(keep it simple and smooth of keep it simple and stupid). Twijfel je bij het ontwerp van een interface tussen een simpele oplossing en een meer complexe omdat die bijvoorbeeld intelligenter overkomt, kies dan altijd voor de simpele ( de regel van “Ockhams scheermes”).

Als een gevolg overeenkomt met de verwachting dan zit de mappinggoed. Wanneer een knop of een reeks acties of commando's in een digitaal systeem precies leidt tot wat de gebruiker verwacht, dan zit het gebruiksgemak goed. Plaats de bedieningsonderdelen (knoppen, sliders...) zodanig dat mensen weten wat er zal gebeuren als ze er gebruik van maken.

5. Functionaliteit

Hoe meer opties een gebruiker krijgt, hoe langer de benodigde tijd om een beslissing te nemen ( wet van Hick). Dit wil niet zeggen dat je de mogelijkheden van een interface volledig moet afbouwen en de mensen enkel voorzien van een simplistische interface met nagenoeg geen mogelijkheden. Heel wat software begrenst de mogelijkheden afhankelijk van de kennis en de ervaring van de gebruikers. De gebruiker krijgt dan via een knop toegang tot een aantal geavanceerde opties. In games vorderen gebruikers stapsgewijs doorheen verschillende niveaus (levels).

De 80/20-regel:Gebruikers benutten volgens schatting 80% van de werktijd slechts 20% van de functies in een UI. Bij het ontwerp van een interface moet je je dan ook richten op die 20%. Niet-kritische (niet noodzakelijke) functies die behoren tot de 80%, beperk je tot een minimum of je gooit ze helemaal weg. Ondermeer om die reden zit bij software veel functionaliteit verborgen achter uitklapmenu's.  

6. Waarom hebben interfaces niet altijd het verwachte succes?

Het is niet omdat iets beter “presteert”, dat de voorkeur van de gebruiker daarnaar uitgaat.  Het succes van een applicatie, product of interface hangt niet alleen af van de eigen eigenschappen. De firma General Magic ontwikkelde in de vroege jaren 1990 een smartphone met toegang tot de cloud, maar kende geen succes. Dezelfde ontwikkelaars stonden later aan de basis van de iPod en iPhone, maar ook van Android en eBay en kenden toen wel succes. Het falen van een dienst of product kan van heel veel factoren afhangen. Goede producten kunnen dus mislukken en omgekeerd kunnen ‘slechte’ producten heel succesvol worden.  

7. Herkenning gaat boven herinnering

In de eerste computerinterfaces gaf de gebruiker commando's via een tekstinterface. Je moest de instructies of commando's goed onthouden om de computer te vertellen wat je precies wou doen. In een GUI zitten commando's achter knoppen verstopt. Dat maakt het gebruik veel eenvoudiger. De gebruiker “herkent” de commando's en hoeft ze niet meer te onthouden. Houd hier rekening mee wanneer je een interface bouwt.

Wanneer de gebruiker te veel stappen moet onthouden, zal hij sneller geneigd zijn hulp in te roepen.Maak de gebruiker desnoods bij elke stap duidelijk wat de volgende stap is.   Beperk je tot 5, maximaal 7 stappen.

De in besturingssystemen aanwezige API’s maken het voor programmeurs mogelijk om herkenbare dialoogvensters op te roepen vanuit hun eigen software.

Maak zelf ook gebruik van herkenbare symbolen en de plaats waar je ze geeft op het computerscherm. Hoe herkenbaarder, hoe groter het gebruiksgemak.  

Belangrijke tip:
Ontwikkel een interface op zo’n manier dat een gebruiker geen handleiding of uitleg meer nodig heeft. Maar voor heel geavanceerde software (zoals Adobe Photoshop) is dit natuurlijk niet altijd mogelijk. In sommige gevallen primeert functionaliteit op eenvoud.

8. Mooi werkt beter

Esthetische ('mooie') ontwerpen wekken de indruk dat ze gebruiksvriendelijker zijn, ook al is dit niet automatisch zo. Gebruikers zijn toleranter tegenover ontwerpfouten als het ontwerp er esthetisch goed uitziet. Esthetische ontwerpen worden sneller geaccepteerd, en wekken de indruk dat ze gebruiksvriendelijker zijn. Uiteraard blijft “schoonheid” en “esthetiek” een zeer subjectief gegeven, maar de perceptie is op dit vlak moeilijk te wijzigen. Denk aan het idee dat veel Applegebruikers hebben over de producten van hun favoriete merk. Wie aan Apple denkt, denkt aan mooi design, gebruiksvriendelijkheid, eenvoud in gebruik, stabiliteit... ook al klopt dat niet altijd. Voor concurrenten is het bijzonder moeilijk om die perceptievoor de eigen productlijn op te wekken.

9. Grafische vormgeving

In het hoofdstuk “How to become a smartist” leer je waar je allemaal rekening moet mee houden bij de opmaakvan een interface. Je kan de leesbaarheid verhogen door het juiste lettertypete kiezen. Niet alle kleurenpassen bij elkaar. Maar ook uitlijningvan elementen en symmetriezijn van belang. Gebruikers ervaren symmetrische ontwerpen als mooier en makkelijker.

Belangrijke tip:
Een ontwerp moet er goed uitzien. Ontwikkelaars moeten niet neerkijken op het belang van de vormgeving. Anderzijds moet het product of de applicatie voldoende functies bieden. Beide zijn even belangrijk. Het ene kan niet zonder het andere.

10. Technieken om beter te onthouden

Hoe moest ik dit nu weeral doen?Vaak vergeten gebruikers hoe ze een bepaalde functie in een interface moesten doen of waar ze iets konden terugvinden. Met kleine aanpassingen kan je ervoor zorgen dat informatie beter “bestendigd” (blijft hangen) in het geheugen van de gebruiker.

Een aantal tips:

• Mensen kunnen 5 tot 7 itemsmakkelijk in één keer memoriseren. Als je een navigatiebalk bouwt, beperk je je best tot maximaal 7 knoppen.  
• Gebruikers onthouden items aan het begin van een lijst (een reeks slides in de presentatie, een lijst met knoppen...) het best, die in het midden het minst. Naar het einde van de lijst toe, blijven items weer beter in het geheugen hangen (= Seriële positie-effect).  
• Nabijheid en gelijkenis: Gebruikers ervaren elementen die dicht bij elkaar liggen als gerelateerd, en elementen die elkaar overlappen als “gemeenschappelijk”. Knoppen die op elkaar gelijken, lijken eerder bij elkaar te horen. Hoe dicht bepaalde elementen bij elkaar staan, bepaalt dus in sterke mate hoe ze door de gebruiker ervaren worden. Zorg ervoor dat benamingen vlak bij elementen staan en niet in afzonderlijke “legenda” (zoals bijvoorbeeld bij grafieken in MS Excel).  
• Splits tekstinhouden op in kleinere onderdelen (uiteraard op een zinvolle manier) en je gebruiker zal de inhouden beter kunnen memoriseren. De techniek om info op te splitsen in kleine eenheden (ook niet te klein), noemt men chunking.
• Soms helpt het om informatie in stapjes zichtbaar te maken.
  Stapsgewijze informatieverstrekking (progressive disclosure): kan de complexiteit van een toepassing aardig verlagen. Een slideshow, 'lees meer'-knop, uitklapmenu's, leerpaden (in bijvoorbeeld e-learningomgevingen), tabbladen...verhogen op die manier het leerrendement.
• Welke momenten uit je schooltijd heb je het best onthouden? Niet zo zeer de leerstof, maar vooral de anekdotes. Opvallende dingen onhoud je nu eenmaal beter dan gewone dingen. Dit heet het “Van Restorff”- effect. Wil je elementen benadrukken, zorg dan dat ze opvallen. Gebruik eventueel ongewone beelden, speel met het tekstbeeld...

10. Zeggen beelden meer dan tekst?

“Een beeld zegt meer dan duizend woorden,” hoor je vaak. Mensen met een zogenaamd “visueel geheugen”, zouden er voordeel uit halen. Maar er is weinig wetenschappelijk bewijs voor het bestaan van iets als een “visueel” of “auditief” geheugen. Meer afbeeldingen leiden echter niet noodzakelijk tot een “betere herinnering”. In het ontwerp van user interfaces en presentatie gaat de voorkeur uit naar een combinatie van tekst en afbeelding.  

Een aantal tips:

Als je relaties en verbanden tussen diverse elementen wil aantonen, probeer dit dan te visualiseren met netstructuren, lagen, boomstructuren... Grafiekenkunnen helpen bij de visualisatie van cijfergegevens, maar dat is niet altijd zo. Het kan ook leiden tot overdaad.

De meeste GUI's maken veelvuldig gebruik van pictogrammen. De metrointerface van Microsoft Windows is daar gedeeltelijk van afgestapt. Het gebruik van schermpictogrammen als symbolische links naar bepaalde programma's of bestandenis reeds aanwezig van bij de eerste “graphical user interfaces” (Xerox).

11. Overdrijf niet…

Houd een interface of voorstelling overzichtelijk. Overlaad een interface niet met te veel beeld of animatie.Alles wat de ontvanger te veel afleidt van de eigenlijke boodschap vormt ruis. Een goede interface zorgt voor betere communicatie met de eindgebruiker. Richt je daarom op het “signaal” en beperk de “ruis”.  

12. Herkenning

Een deur met een “klink” nodigt uit om aan te trekken, niet om tegen te duwen. Als je de klink vervangt door een vlakke metalen plaat, weet de gebruiker meteen dat hij/zij tegen de deur moet duwen om binnen te komen.  Die vorm van “uitnodiging” noemt men affordance. Als de affordance van een object om omgeving goed overeenkomt met de bedoelde functie, dan verhogen het gebruiksgemak en de prestaties.  

Bij het ontwerp van software-interfaces gebruikt men vaak afbeeldingen van fysieke objecten om de functie van de interface-elementen te verduidelijken. Het programma Garageband van Apple gebruikt bijvoorbeeld herkenbare knoppen van gitaarversterkers om de affordance te verhogen.

Die techniek waarbij men afbeeldingen van bestaande toestellen of onderdelen ervan gebruikt binnen een digitale omgeving, heet skeuomorfisme. In wezen kan je heel wat "metaforen" die men bij het ontwerpen van interfaces gebruikt, skeuomorfismen noemen: de prullenmand, het bureaublad.De graad waarin een ontwerper de overeenkomst met fysieke objecten doorvoert kan echter meer of minder prominent zijn.  

Steve Jobs en Apple-ontwerper Scott Forstall waren grote voorstanders van skeuomorfisch ontwerp. Na de dood van Steve Jobs en het ontslag van Forstall, kreeg John Ive, een groot tegenstander van skeuomorfisme, de leiding over de "look and feel" van iOS7. Tegenstanders van skeuomorfisme argumenteren dat skeuomorfisme enkel een "overgangsfase" was. Vroeger zag de interface van een camera-app er nog uit als de knoppen van een analoog fototoestel. De meeste huidige gebruikers hebben echter nooit een analoog fototoestel gebruikt.

13. Metaforen en analogieën

Hoe sterk tegenstanders van skeuomorfisme ook hun best doen, een digitale interface blijft op één of andere manier wel steeds schatplichtig aan zijn analoge voorgangers. We spreken nog steeds van een bureaublad of desktop, ook al ervaart lang niet iedereen dit meer als een digitale versie van een “echt” bureaublad. Een map (Engels: folder) heet nog steeds een map. Een “prullenmand” blijft nog steeds aanwezig in zo goed als elke GUI.

In heel wat applicaties blijven ontwikkelaars zich bedienen van metaforen en analogieën met “analoge voorgangers”. Adobe Photoshop gebruikt net zoals een massa andere digitale beeldbewerkingsapplicaties virtuele “lagen” waarmee je als gebruiker composities kan samenstellen, net zoals tekenfilmmakers vroeger elk beeld opbouwden door afzonderlijke figuren op celluloidlagen boven elkaar te plaatsen. De tijdlijn in videomontagesoftware is nog steeds een virtuele weergave van een klassiek filmspoor. Gelijkenissen en metaforen zorgen voor herkenbaarheid en dat is misschien maar goed ook.

14. Nabootsing of mimicry

In de natuur bootsen wandelende takken een echte “tak” na om zich te verbergen voor hun vijanden. Op dezelfde manier bootsen interface-ontwikkelaars fysische objecten of hun functionaliteit na om de herkenbaarheid te verhogen. Een klassiek telefoontoestel en zelfs een iPhone bootst in zijn toetsenbord het toetsenbord van een rekenmachine na. Die nabootsing kan op drie niveaus gebeuren:  

15. Voorkom dat gebruikers fouten maken

Een interface moet voorkomen dat de gebruiker fouten kan maken én bij fouten duidelijke feedback geven. 

Een aantal tips:

• Vraag de gebruiker om te bevestigen:
  Door bevestiging te vragen, kunnen onopzettelijke en ondoordachte handelingen voorkomen worden. Overdrijf hier echter niet in, want anders krijgen gebruikers het “ben je hier wel zeker van”-gevoel. Verificatie is enkel noodzakelijk indien het beslissingen nadien niet meer kunnen aangepast worden. In het bovenstaande NMBS-voorbeeld had de site kunnen vragen: “U staat op het punt tickets te bestellen voor een dag die bijna afgelopen is. Bent u hier zeker van?”
• Restricties:
  Door stapsgewijze informatieverstrekking kan het aantal potentiële fouten tot een minimum herleiden. Zulke fysieke restricties (begrenzingen, paden) laten de gebruiker toe bepaalde functies enkel binnen een bepaalde zone uit te voeren.
• Daarnaast kan je het foutief gedrag van eindgebruikers voorkomen door een reeks psychologische restricties:

• Garbage in, garbage out:
  Als je fouten kan invoeren, krijg je foute output. Bijvoorbeeld: In een invoerveld voor een leeftijd mag je enkel de mogelijkheid hebben om cijfers in te tikken.Foutcontrole voorkomt foute output. Als UI-ontwerper moet je voorkomen dat troep wordt ingevoerd. 
• De wet van Fitts en inspanningsbelasting:
  Hoe verder een doel verwijderd is, hoe langer het duurt om het te bereiken. Hoe sneller de beweging (van de cursor) en hoe kleiner het doel, hoe groter de foutenmarge (door snelheid en accuraatheid). Het menu dat tevoorschijn komt als je op de rechtermuisknop drukt, staat meteen bij het doel. Die beperkt het aantal potentiële fouten bij de invoer of bewerking van gegevens. Hier geldt eveneens de inspanningsbelasting: hoe meer inspanning vereist om doel te bereiken, hoe meer kans op fouten. 
• Operante conditionering: 
Operante conditionering is een techniek om gewenst gedrag positief te bevestigen/belonen en ongewenst gedrag te bestraffen. Het duikt vaak op in leeromgevingen (e-learning) en games.