Interface-ontwerp

Lees eerst Soorten interfaces

2.1.3 User Interface design en UX-design

UX-design staat voor User Experience design. Bij het ontwikkelen van digitale interfaces moet men uitgaan van een “User centered design process”. De ontwikkelaar(s) moeten verschillende factoren tegen elkaar afwegen:

  • User Centered Design Process

  • User needs

  • Business needs

Bij het ontwikkelen van een interface komt heel wat kijken:

  • visual design

  • information architecture

  • user interface design

  • usability

Bekijk zeker eens dit filmpje: https://www.youtube.com/watch?v=Ovj4hFxko7c

De ontwikkelaar bevindt zich op het knooppunt tussen het digitale systeem en de eindgebruiker. Aan de kant van de machine moet hij 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 HCI (Human Computer Interface) zelden het werk van één persoon.

2.1.4 Interactie-ontwerp

In dit deel bekijken we niet zo zeer hoe je een interactieve interface ontwerpt, want daarvoor moet je doorgaans al aardig wat kunnen programmeren. We bekijken echter een aantal universele ontwerpprincipes, die niet enkel gelden voor HC-interfaces, maar voor elk product dat een bedieningsinterface nodig heeft, en bij uitbreiding voor nagenoeg elk ontwerp (product, affiche...) dat je ooit zal maken of bedenken. De tips die je in dit onderdeel leest, zijn niet altijd “wetenschappelijk” bewezen, maar in veel gevallen eerder “good practice”. Hanteer ze bij het ontwerp van presentaties, websites, producten, affiches, logo's, reclamefolders. Uiteraard bespreken we onderstaande tips vooral in het kader van HC-interfaces.

Tip: Met de open source tool Pencil (http://pencil.evolus.vn/) kan je snel een GUI prototypen. Dat wil zeggen dat je er een interface mee kan bouwen van hoe een programma of GUI voor een applicatie er volgens jou zou moeten uitzien.

1. Modulariteit

Arduino en Little bits uit het vorige deel zijn voorbeelden van modulair ontwerp. Ook desktopcomputers en in wezen elke “thuis”computer, zijn voorbeelden 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 in moderne programmeertalen (zogenaamde object-georiënteerde talen) werken modulair, met klein 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.
Applehardware (iPhone, iPad) is vaak bewust heel beperkt modulair. Je kan de opslagcapaciteit niet eigenhandig uitbreiden, je bent als gebruiker beperkt bij het aansluiten van randapparatuur. Nochtans is ook de “binnenkant” van pakweg een iMac heel erg modulair opgebouwd (www.ifixit.com).

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.

3. Toegankelijkheid en gebruiksvriendelijkheid

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. Bedieningsgemak en eenvoud in gebruik zijn belangrijke normen. Een goed ontworpen interface zorgt ervoor dat gebruikers zo min mogelijk fouten kunnen maken.

Toegankelijkheid en gebruiksvriendelijkheid hangen 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 functionaliteit van een digitaal systeem. Een tekstverwerker bijvoorbeeld moet in eerste instantie de mogelijkheid bieden om tekst in te voeren, tekstopmaak, het toevoegen van tabellen en afbeeldingen zijn hogere behoeften.

Hierin volgt een ontwerper de behoeftepiramide.

Functionaliteit

Bepaalde functies mogelijk maken.

Betrouwbaarheid

Een videorecorder moet echt opnemen als je op de “record”-knop drukt.

Gebruiksgemak

Je kan dingen makkelijk doen.

Bekwaamheid

Je kan dingen beter doen dan voordien.

Creativiteit

Alle behoeften zijn bevredigd. Indien je dit niveau bereikt, verkrijg je van de gebruikers soms een loyaliteit met cultachtige status (vb. Apple)

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. Een PC is bijvoorbeeld heel flexibel, maar moeilijker aan te leren en te bedienen dan een smartphone. 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 dathij enkel af en toe wat wil surfen op het internet, volstaat een tabletcomputes. 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 steevast voor de simpele (de regel van “Ockhams scheermes”).

c. Mapping:

Als een gevolg overeenkomt met de verwachting dan zit de mapping goed. 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.

d. Prestaties

Het is niet omdat iets beter “presteert”, dat de voorkeur van de gebruiker daarnaar uitgaat.

e. Herkenning 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. De in besturingssystemen aanwezige API's maken het voor programmeurs mogelijk om herkenbare dialoogvenster 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.

4. Stijl en opmaak

a. Gepercipieerd gebruiksgemak:

Esthetische ontwerpen wekken de perceptie dat ze eenvoudiger in gebruik en dus gebruiksvriendelijker zijn, ook al is dit niet automatisch zo. Esthetische ontwerpen nodigen meer uit tot een positieve attitude. Mensen zijn ook toegeeflijker en toleranter tegenover ontwerpfouten als het ontwerp er esthetisch goed uitziet. Een mooi interface-ontwerp werkt als katalysator voor de creativiteit en probleemoplossend denken. Minder esthetische ontwerpen, verstikken de creativiteit. 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 Apple-gebruikers 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 perceptie voor de eigen productlijn op te wekken.

b. Kleuren:

“Over kleuren en smaken valt niet te discussiëren” zegt het spreekwoord. Nochtans klopt dit niet helemaal. Je kan twee kleuren die op het eerste zicht met elkaar “vloeken” bij elkaar plaatsen als dat uw smaak is. Maar wanneer je er andere kleuren of tinten bij betrekt, gaat die stelling niet meer op. Passende kleurcombinaties kan je wiskundig berekenen. Niet alle kleuren of tinten passen bij elkaar. Op paletton.com kan je passende kleurpaletten berekenen voor je eigen ontwerpen.

Consistentie van stijl en kleur maken een systeem meer helder en bruikbaar.

c. Fibonaccireeksen en de Gulden Snede

Oeps, dit lijkt wel een stukje wiskunde en dat is het ook. Fibonaccireeksen (oneerbiedig ook wel eens “konijnenreeksen” genoemd naar het voortplantingsgedrag waarmee deze dieren worden vereenzelvigd) komen in de natuur heel vaak voor. In een Fibonaccireeks is elk volgend getal de som van de twee voorgaande getallen. Fibonaccireeksen duiken op in de natuur, maar ook in de vormgeving (Gulden snede).

Vaak gebruikt men Fibonaccireeks in nauw verband met de zogenaamde Gulden Snede, één van de invloedrijkste patronen in wiskunde en vormgeving. Bij de Gulden Snede snijdt men een rechthoek zodanig in twee delen dat (…lees nu even heel aandachtig …) het grootste deel en het kleinste deel zich net zo verhouden als het grootste deel tov. de ganse rechthoek. Euh???? Je merkt het al in het bovenstaande voorbeeld. In de rechthoek hebben we een vierkant afgezonderd van 8 bij 8 ruitjes en eentje van 5 bij 8 ruitjes. Je kan die kleinste rechthoek opnieuw gaan indelen zodat je (net zoals in een Fibonaccireeks) opnieuw een gelijkaardige verhouding verkrijgt.

Plaats je een passer op het scheidingspunt tussen twee vierhoeken en trek je een kwartcirkel, dan bekom je een soort van spiraalvorm. De Gulden Snede duikt op in de natuur en reeds in de Oudheid gebruikten kunstenaar het in de architectuur en de kunst.

De Gulden Snede bereken je op de volgende manier: `a : b = (a+b) : a` (waarbij a en b de verhouding zijn van de brede en de lange zijde). De verhouding tussen a en b heet het Gulden Getal en uitgedrukt met de Griekse letter PHI (opgelet: niet PI of 3,14...)


Is het een voorbeeld van onze onbewuste voorkeur voor esthetiek en verhoudingen? Lees meer over de Gulden snede en Fibonacci: Gulden snede

d. Vorm volgt functie:

In de architectuur en vormgeving dook vooral sinds de twintigste eeuw de idee op dat esthetiek ondergeschikt is aan de functie. Functies zijn inderdaad minder subjectief dan esthetische overwegingen. Toch heeft het voorgaande al duidelijk aangeduid dat esthetiek niet onbelangrijk is. Als ontwerper kies je niet vorm en functie. De vorm kan best wel afgestemd zijn op de functie. De functionaliteit mag niet verloren gaan achter het uitzicht.

e. Symmetrie:

Symmetrie wordt altijd als schoon ervaren. We onderscheiden drie vormen van symmetrie

  • Weerspiegeling,

  • rotatie,

  • translatie

Translatie-symmetrie in een gridsysteem voor websites.1

Rotatie-symmetrie2


Symmetrie in webdesign.3

5. Leesbaarheid en bestendiging

Een interface/ontwerp moet vlot leesbaar zijn. Het letterbeeld, het gekozen lettertype, de lettergrootte kunnen de leesbaarheid bevorderen of kraken. In doorlopende tekst gebruik je een vlot leesbaar lettertype. Schreefloze letters zijn vlotter leesbaar voor dyslectici, maar uiteindelijk haalt iedereen er voordeel uit.

Bron4

Leesbaarheid gaat verder dan enkel het kunnen lezen van een aanwezige tekst. De informatie moet vlot opgenomen worden en bestendigen in het geheugen en de herinnering van de eindgebruiker. Informatie in welke vorm ook (teksten, afbeeldingen, artikels, invulformulieren...) kunnen zo gepresenteerd worden dat de informatie vlotter toegankelijk is en de gebruiker meteen een duidelijk overzicht krijgt.

a. Hiërarchie: De zichtbaarheid kan erg verbeteren door hiërarchische verbanden te visualiseren. Die techniek is zeer effectief om de structuur en de toegankelijkheid te te bestendigen in het geheugen van de gebruiker. Dit kan op diverse manieren met boomstructuren, netstructuren, trapstructuren, lagen...


b
. Chunking: Splits de informatie die je aanbiedt op in kleine eenheden. Mensen kunnen 5 tot 7 onderdelen vlotjes onthouden. Om die reden vind je in dit cursusboek 7 delen en vaak 5 tot 7 subonderdelen.

c. Beeldende representatie: gebruik van pictogrammen en afbeeldingen

Bron afbeelding5: Schermiconen op het bureaublad van de Xerox Star, de opvolger van de Xerox Alto (1981).

De meeste GUI's maken veelvuldig gebruik van pictogrammen. De metrointerface van Microsoft Windows is daar tendele van afgestapt. Het gebruik van schermpictogrammen als symbolische links naar bepaalde programma's of bestanden is reeds aanwezig van bij de eerste “graphical user interfaces” voor de Xerox Alto-computer in de vroeger jaren 1970.

Men onderscheidt in interfacedesign verschillende soorten pictogrammen:

– vergelijkbare pictogrammen: tekeningen die lijken op een handeling, object of concept.

– voorbeeldpictogrammen: dingen die geassocieerd worden met een handeling (vb. hangslot voor beveiliging).

– symbolische pictogrammen: afbeeldingen van een handeling op eenhoger abstractieniveau.

– weinig of geen verwantschap (vb. een schelp in SmartSchool om naar je puntenboek te gaan).


Een beeld zegt meer dan duizend woorden,” is een veel gehoorde uitspraak, maar klopt slechts ten dele. Men doelt dan op het zogenaamde visuele geheugen, maar er is weinig wetenschappelijk bewijs voor het bestaan van iets als een “visueel” of “auditief” geheugen. Uiteraard geldt ook hier “herkenning boven herinnering”, maar meer afbeeldingen leiden 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.

d. Stapsgewijze informatieverstrekking (progressive disclosure):

De complexiteit van een toepassing kan aardig verlagen door de informatie niet alleen in kleine onderdelen (chunks) op te splitsen, maar ze ook stapsgewijs te verstrekken. Een slideshow, 'lees meer'-knop, uitklapmenu's, leerpaden (in bijvoorbeeld e-learningomgevingen), tabbladen... verhogen op die manier eveneens het leerrendement.

e. Nabijheid en similariteit:

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).

f. Van Restorff-effect:

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. Dat heet het “Van Restorff”-effect. Wil je elementen benadrukken, zorg dan dat ze opvallen. Gebruik eventueel ongewone beelden, speel met het tekstbeeld...

g. Seriële positie-effect:

Gebruikers onthouden items aan het begin van een lijst (of het nu gaat om 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.. Dit recentheidseffect geldt vooral bij een auditieve lijst.

h. Signaal-ruisverhouding:

Houd een interface of voorstelling overzichtelijk, en overlaadt ze 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”.

6. Fouten beperken

Ik bestel om 19 uur 's avonds treintickets op de website van de NMBS. Vooraleer ik de bestelling kan uitvoeren, moet ik de gebruiksvoorwaarden, die ik uiteraard niet lees, goedkeuren. Ik wil vooral dat dit snel is afgehandeld. Dat verwacht je ook van de gebruikersinterface. De betaling verloopt via een externe site en even later krijg ik in mijn mail de bestelde tickets in PDF-formaat. Wanneer ik ze afdruk, blijkt dat ik de (zo goed als) voorbije dag als afreisdatum heb ingesteld. Er zit niets anders op dan de tickets nogmaals aan te kopen en, inderdaad, nogmaals 65 euro te betalen. Ik meld mijn fout aan de online support van de NMBS, maar krijg nooit antwoord en het geld wordt ook niet terugbetaald. Als gebruiker ben ik bestraft voor mijn onoplettendheid en vooral omdat ik snel wou zijn. Nergens heeft de site me gewaarschuwd dat het wel vreemd is dat ik tickets bestel voor een dag die zo goed als afgelopen is. Nochtans is het nogal waanzinnig om tickets met toegang tot het pretpark Plopsaland de Panne te bestellen als het pretpark al een uur is gesloten. Het foutief betaalde bedrag krijg ik niet terug omdat ik “akkoord” ben gegaan met de gebruiksvoorwaarden. Toegegeven, mijn fout, maar ook: welkom in de wereld van slecht interface-design en gebrek aan feedback. De support achter de digitale omgeving hult zich in stilzwijgen. In de echte fysieke wereld zouden zulke vormen van “bestraffing” als bijzonder onrechtvaardig ervaren worden.

Een goede UI moet deze vormen van “digitale onrechtvaardigheid” voorkomen door gerichte foutcontroles in te bouwen.

a. Bevestigingsprocedure:

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?”

b. 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:

symbolen: waarschuwing, icoontjes, pictogrammen kunnen gebruikersgedrag beïnvloeden

conventies: rood is gevaar, geel is waarschuwing


mapping: welke handelingen zijn mogelijk? De zichtbaarheid, het uiterlijk, de plaatsing van de interface-elementen... spelen hier een rol.

c. Garbage in, garbage out:

Als je fouten kan invoeren, krijg je foute output (vb. in veld van postcode: niet invullen of geen cijfer invoeren). Foutcontrole voorkomt foute output. Als UI-ontwerper moet je voorkomen dat troep wordt ingevoerd. In webpagina's gebeurt op basis van “reguliere expressies” (zie 5.3.1) een controle op invoer van gebruikers in formuliervelden.

d. De wet van Fitts en inspanningsbelasting

Hoe verder een doel verwijderd is, hoe langer het duurt om het te bereiken. Hoe sneller de beweging 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:

e. 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. Men hanteert bij UI-design drie methodes: positieve en negatieve bekrachtiging, bestraffing (vb. volgend level of game over).

7. Functionaliteit

a. Wet van Hick en controle van de 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).



b. 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 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.

8. Herkenbaarheid

Herkenning gaat boven herinnering, Een herkenbare “omgeving” verhoogt de gebruiksvriendelijkheid.

a. Affordance en skeuomorfisme

Afbeelding: Skeuomorfisme in Apple Garageband.

De fysieke eigenschappen van een object of omgeving (bijvoorbeeld een interface) beïnvloeden het functioneren ervan. Dat klinkt nogal ingewikkeld, maar een paar voorbeelden maken veel duidelijk. Een deur nodigt uit om een kamer te betreden, een raam biedt die functie ook, maar is hiervoor minder “uitnodigend” (tenzij je een inbreker zou zijn natuurlijk). Die vorm van “uitnodiging” noemt men affordance. Als de affordance van een object om omgeving goed overeenkomt met de bedoelde functie, dan verhoogt het gebruiksgemak en de doelmatigheid van de prestaties. 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. De affordance zit op dat moment zeer goed.

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 andere omgeving, heet skeuomorfisme. Het beperkt zich zeker niet tot software alleen. Het nabootsen van materialen in meubels of bij interieurdesign, is eveneens een vorm van skeuomorfisme. Bij software is het de bedoeling dat zogenaamde "skeuomorphs" de herkenbaarheid en het gebruiksgemak verhogen. 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. Dit verklaart de plotse ommekeer in de Apple-interface van een sterk aanwezig skeuomorfisme naar een meer vlakke stijl in de aard van Microsofts "metro"stijl. Tegenstanders van skeuomorfisme argumenteren dat skeuomorfisme enkel een "overgangsfase" was:

"Now recall what skeumorphism really is: it’s a transitional design to aid us over the bridge from old ways of doing something to the new way. But now almost all adults have crossed over that bridge. Future smartphone sales are going to be either replacement phones or to the young just entering the marketplace. And those latter won’t have any clue at all about those old ways of doing things. Who currently under the age of 20 will ever see a Rolodex outside a museum (or their grandparents’ study)?" (Tim Worstal)1


Toch wil dit geenszins zeggen dat hiermee elke overeenkomst met “fysieke” objecten of omgevingen overboord wordt gegooid.


b. Metaforen

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. Adobe Flash noemt zijn werkgebied de “scene” en objecten kan je bewaren in de “library”. Gelijkenissen en metaforen zorgen voor herkenbaarheid en dat is misschien maar goed ook.

c. 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:

  1. nabootsing van uiterlijk

het uiterlijk lijkt op iets anders

pictogram van een map

  1. nabootsing van gedrag

het ontwerp gedraagt zich zoals iets anders

een robot die zich beweegt zoals een insect

  1. nabootsing van functie

het ontwerp werkt zoals iets anders

toetsenbord van een rekenmachine bij een oude Nokia-GSM.

9. Storytelling

Een goed en herkenbaar verhaal, een pittige anekdote, een pakkend emotioneel verhaal... zorgt voor een gevoel van herkenbaarheid. Bij de presentatie van een product, een film of animatie, een presentatie trekt een sterk verhaal de aandacht van de gebruiker. Bij User Interface- of User Experience-design kan storytelling op nog een andere manier ter hulp schieten.

Het ontwerp bepaalt hoe gebruikers (mensen) het eindproduct ervaren. Dit gebeurt op verschillende niveaus en vertaalt zich in drie vormen van ontwerp: 2

Visceral design

we houden automatisch van bepaalde dingen (knappe mensen, symmetrie...) en voelen ons afgestoten van andere (spinnen, rot vlees...). Dit niveau bepaalt onze eerste relatie met een ontwerp.

We kiezen er bewust voor om “bang” te zijn als we naar een griezelfilm gaan kijken.

Behavioral Design

Hoe werkt het product? De look and feel, gebruiksvriendelijkheid...

Hoe ervaren we de film?

Reflective Design

Welke waarde kennen we aan het product toe na het eerste gebruik.

We weten dat de vampieren niet echt bestaan en ons (zeker niet vanuit de film) lastig kunnen vallen.

Bij het ontwerp van een product, dienst, interface... moeten we terdege rekening houden met die drie niveaus. Hoe de eindgebruiker de interface of het product emotioneel aanvoelt, bepaalt mee het succes van het ontwerp. Bij UX-design werken professionals met heel verschillende achtergronden samen aan één project. Er moet rekening gehouden worden met grafisch ontwerp, technische mogelijkheden en beperkingen, commerciële overwegingen enz. Het is niet eenvoudig om in zo'n samenwerkingsverband de eindgebruiker centraal te stellen. De eindgebruiker is het “Experience Theme” (Cindy Chastain), de hoofdrolspeler van het UX-ontwerp. Zonder zo'n leidraad kan er wel een product afgeleverd worden, maar dan blijft het een verhaal zonder doel, of beter gezegd een verhaal zonder rode draad.

Oef, dit klinkt allemaal nogal ijl en wellicht denk je, wat moet ik hiermee? Nochtans is het niet zo vreemd dat het uiteindelijke doel van een ontwerp een eindgebruiker (en liefst meer dan één is). Ongetwijfeld heb je al een beeld voor ogen van het doelpubliek. Door fictieve personages met al even fictieve, maar potentieel mogelijke, verhalen te verzinnen voor de ontwerpronde, krijgt ieder lid van het ontwerpteam een duidelijk beeld van wat het uiteindelijke doel van het ontwerp is. Ieder lid van het team kan op die manier het oorspronkelijke doel en de strategie voor ogen houden, ongeacht zijn/haar taak of achtergrond. Elk lid van het ontwerpteam kan zich hierdoor inleven in de eindgebruiker.

1.

2

1KNIGHT, K., "Symmetry in Design: Concepts, Tips and Examples", (http://sixrevisions.com/web_design/symmetry-design/), Geraadpleegd op 9 september 2015.
2Ibid.
3Ibid.
4"Welk lettertype gebruik ik het best?", (http://www.wallacesanders.be/veelgestelde-vragen/welk-lettertype-gebruik-ik-het-best/), Geraadpleegd op 10 september 2015.
5INTERACTION DESIGN FOUNDATION, "A Brief History of the Origin of the Computer Icon", (https://www.interaction-design.org/ux-daily/21/a-brief-history-of-the-origin-of-the-computer-icon), Geraadpleegd op 10 september 2015.

home