Voor mijn volgende uitdaging heb ik mezelf ingeschreven in een kortlopende cursus “introduction to UI Design” gedoceerd aan de University of Minnesota. Via afstandsleren (Coursera) zal gedurende 4 weken door 5 verschillende professoren (Dr. Brent Hecht, Haiyi Zhu, Joseph A Konstan, Loren Terveen, Lana Yarosh) een basis van UI design uit de doeken worden gedaan.
De algemene cursus intro leek me aanvankelijk best saai en vrij herhalend gebracht maar de besproken topics met diverse voorbeelden in de eerste week maakten voor mij al snel veel goed.
Week 1: “Introduction: Hall of Fame/ Hall of Shame and case studies”
Onder de introductie van deze week valt het idee dat ontwerpen best zo simpel mogelijk zijn dat ze geen uitleg meer nodig hebben. Hierbij worden enkel foto’s van toegangsdeuren getoond en de vraag gesteld “moet je bij deze deur duwen of trekken om ze te kunnen openen?”. Een vraag die ook aan de studenten van de faculteit zelf werd gesteld en waarbij 1/3e tot de helft van de ondervraagden een verkeerd antwoord gaven, behalve bij de foto van een nooddeur omdat deze voorzien is van een extra lange “drukbalk” alvorens deze te kunnen openen. Nadien blijkt overigens dat men op de deur de bordjes “duwen” en “trekken” heeft moeten toevoegen, iets waarvan als de uitvoering beter was geweest, dit niet had gemoeten.
Samenvatting: probeer design uitvoeringen zo simpel mogelijk te houden. Simpele dingen zouden in principe ook geen extra uitleg nodig moeten hebben. Als dit wel nodig hebben is het een teken dat het een “designfout” betreft. De “visibility” van het product: de bedoeling/werking zou voor de gebruiker duidelijk moeten zijn.
Voor de rest wordt er deze week een aantal UI-case studies besproken waarbij het design kan worden ondergebracht in een “Hall of Fame”(=goede UI) dan wel in een “Hall of shame” (=slechte UI). Men wil hierbij duidelijk maken dat een goede UI belangrijk is niet enkel omdat het geld kan besparen en gebruikers gelukkiger kan maken, maar zeker ook omdat het “rampen/problemen” kan voorkomen. Een voorbeeld:
- Een ouder koppel in Brazilië ging hun dochter bezoeken. Ze gebruikten hiervoor de Waze-App. Er waren echter meerdere eenzelfde straatnamen, het koppel selecteerde per ongeluk deze uit een verkeerde buurt, welke later een onveilige omgeving bleek te zijn. Helaas werd een van de twee personen later in deze buurt vermoord.
Men zou hierbij de bemerking kunnen maken dat het ook aan de gebruiker kan liggen: “hoe kon deze zo stom zijn om het verkeerde te selecteren”. Maar vanuit een design-standpunt komt het er eigenlijk op neer om net te voorkomen dat mensen dergelijke foutieve keuzes kunnen maken. Er wordt hiervoor verwezen naar Heuristiekregel #5: “Error prevention” (Nielsen 1994, Nielsen 2014).
Even better than good error messages is a careful design that prevents a problem from occurring in the first place. Either eliminate error prone conditions or check for them and present users with a confirmation option before before they commit to the action.
Toegepast op het voorbeeld: het is niet mogelijk om alle foutgevoelige mogelijkheden/voorwaarden eruit te filteren. Het is immers onmogelijk om alle straatnamen over heel de wereld aan te passen zodat ze allemaal uniek zijn. Maar de tweede mogelijkheid zou wel kunnen, namelijk het inbouwen van een verzoek tot bevestiging alvorens tot effectieve uitvoering over te (kunnen) gaan. Zo wordt de gebruiker niet alleen aangezet tot nadenken over zijn beslissing maar ook om de keuze effectief te bekrachtigen, bijvoorbeeld: “Volgens overheidsraadgevingen is het adres gelegen in een onveilige buurt, bent u zeker van uw bestemming?”: “Ja ik begrijp het risico en ik wil daar naartoe” of “neen ik bedoelde eigenlijk een andere locatie”.
Enkele andere voorbeelden:
- De Fair Act 25- dit is een bestralingsmachine. Onder andere door een gebrekkige UI werden 6 mensen serieus gewond dan wel kwamen zij om het leven. Enkele oorzaken: er werd geen begrenzing in de machine voorzien waardoor het mogelijk was een (dodelijke) hoeveelheid toe te dienen; systeem-zichtbaarheid: de bediener kreeg niet te zien hoeveel dosis er werd toegepast of reeds in het verleden was toegediend; daarnaast zat er een foutieve “error” in het systeem dat aangaf dat er nog geen enkele dosis was toegediend terwijl in werkelijkheid dit wel al gebeurde, bijgevolg kreeg de patiënt per ongeluk nog een extra dosis toegediend…
- In Amerika kwam Star Trek acteur Anton Yelchin op 27 jarige leeftijd om het leven in een auto-ongeluk. Dit bleek later een designfout te zijn van het automerk Chrysler. Voor de automaat hadden zij voor een toepassing gekozen waarbij de hendel telkens automatisch terug in het midden van het bedieningspaneel kwam te staan. Hiervoor is echter reeds een universele toepassing ingeburgerd: het hendel blijft staan in de stand waarin het wordt geduwd. Dit maakt het voor een gebruiker ook visueel duidelijk. Maar door de nieuwe toepassing was dit niet langer het geval, het was onduidelijk in welke stand de auto zich bevond met het ongeluk tot gevolg.
Samenvattend: (1) systeem-visibiliteit is voor gebruikers uiterst belangrijk. Laat het systeem duidelijk communiceren naar de gebruiker. (2) Standaarden zijn niet zomaar te veranderen. Voorzichtigheid is hierbij zeer sterk geboden! (3) Ga niet voorbij aan gebruikersevaluaties: leer hiervan en pas ze toe.
Een ander belicht aspect met voorbeeld is het idee om te leren uit de UI-design toepassingen van andere en dit te hervormen tot wel een geslaagd design.
Als voorbeeld hierbij wordt verwezen naar Citibank ATM. Omdat het niet evident was om geld af te halen in de bank vanwege bepaalde selectieve openingsuren werd er uiteindelijk op het idee gekomen om geldautomaten te voorzien. Het gebruik ervan was echter erg omslachtig. Zo moesten gebruikers een speciaal rekeningnummer openen, minstens 200 dollar op de rekening + het bedrag dat ze wilden afhalen hebben staan. Waarbij trouwens de 200 dollar als basis niet eens mogelijk was om af te halen. Het probleem daarbij was dat men zowel de machine als het geld zo goed wilde beschermen dat bij de minste fout de machine de bankkaart al meteen inslikte. Het merendeel van de gebruikers werd hiermee geconfronteerd waarna ze besloten om alles op te zeggen en niet meer te werken met een bankautomaat. First national City Bank of New York had echter middels onderzoek geleerd van deze fouten en aanpassingen doorgevoerd. De kaart zou moest enkel nog ingebracht worden en werd meteen teruggegeven waarna de transacties werden uitgevoerd, met andere woorden het was niet meer mogelijk geworden dat de automaat de kaart zou inslikken. Samen met een goede marketing opzet kenden de geldautomaten een groot en gekend succes.
Samenvattend: een klein designfout kan zorgen voor een slechte/ongelukkige User Experience.
Microsoft office 2007 Ribbon is een ander voorbeeld. Hierbij werd een casestudie uitgevoerd om na te gaan welke knoppen gebruikers het meest gebruiken en bijgevolg informatie oplevert over wat deze functionaliteiten moeten zijn en de locatie waar ze zich het best bevinden. Zo vonden mensen bv. print-preview weinig interessant maar stonden opties als plakken, opslaan, kopiëren, ongedaan maken, en in vet maken in de top 5. Onderzoekers ontdekten daarbij “the long tail distribution”. Dit betekent dat enkele commando’s heel frequent worden gebruikt en het merendeel van de commando’s eigenlijk zelden worden gebruikt. (zij worden niet frequent gebruikt en door slechts een kleinere gebruikersgroep.) Hierbij werd dan ook rekening gehouden in de opmaak van de ribbon en de toetsenbordcommando’s. Zoals je zal zien staat meteen links een grote “plak”-knop. Het grote verschil lag daarnaast in het design: Microsoft ging hierbij meteen van een intuition-based design naar een evidence based design.
Samenvattend: (1) evidence based design voorziet in een beter design opzet omdat intuïtief design tussen designers en gebruikers overigens kan verschillen. (2) long tail of commando’s gebruik: misschien is een commando niet zoveel in gebruik en zou men kunnen overwegen om het weg te laten, toch zou uit onderzoek kunnen blijken dat dergelijke commando’s nog steeds worden gebruikt weliswaar minder frequent en door een kleinere gebruikersgroep, maar dat kan verklaren waarom ze helemaal weglaten misschien toch geen goede keuze is.
Een ander voorbeeld van een succes verhaal gelinkt aan het gevoerde onderzoek is de digitale kinderboekenbibliotheek. De vraag hierbij die werd gesteld was: “hoe zie jij het design van een dergelijke bibliotheek?” Misschien met een zoekbalk en een vergrootglas om op te klikken? Kinderen houden van kleur: dus misschien wat met verschillende kleuren werken? Eventueel wat aangevuld met leuke cartoonachtige afbeeldingen? Al deze ideeën bleken echter voorbeelden te zijn van een slecht UI-design. Er werd immers samen met kinderen onderzoek gedaan naar hoe zij naar boeken wilden zoeken. Daaruit kwamen een aantal interessante punten naar voren:
– kinderen onthouden boeken eerder door hun coverkleur dan naar titel > er werd de mogelijkheid ingevoerd om te zoeken op kleur.
– kinderen zoeken liever op genre > er werd de mogelijkheid ingevoerd om te kiezen uit boeken met sprookjesfiguren, met echte dieren,…
– kinderen kiezen/zoeken graag een leesboek op basis van dikte> er werden keuzeknoppen voorzien om te kiezen tussen dun (vb. voor het slapen gaan), gemiddeld of dik boek (vb. boekbesprekingen)
Samenvattend: een goede UI designer zoekt uit wat de gebruiker wil en bekijkt dit vanuit zijn standpunt.
Dit kan trouwens ook worden toegepast op de online aangifte van belastingen. Het was al een hele vooruitgang dat mensen tegenwoordig niet ieder jaar op papier dezelfde dingen opnieuw moeten invullen maar dat met de online aangifte het nu ook mogelijk is om dingen van jaren ervoor te bekijken en terug in te laden en dat de overheid zelf al bepaalde elementen ingevuld voorziet.
Een laatste onderdeel van deze week is de casestudy van AirBnB vergeleken met CouchSurfing. Beide sites voorzien wel in een andere doelstelling. Waar AirBnB voornamelijk gericht is op het vinden van een verblijfplaats, is couchsurfing meer gericht om mensen te vinden en er te verblijven. De interface van beiden is dan ook verschillend. AirBnB voorziet eerder informatie omtrent de verblijfplaats: locatie, woonruimtes, foto’s, etc. Terwijl CouchSurfing meer informatie voorziet over de personen waarbij men kan verblijven: leeftijd, studie-achtergrond, interesses, etc.
Samenvattend kan worden gesteld dat een goede interface in socio-technische systemen de manier van interactie tussen mensen kan beïnvloeden.
Tot slot: de opdracht voor deze week: zoek een designfout vb. in de buitenwereld (zoals de deuren) maar eventueel ook op het internet naar websites die misschien niet zo duidelijk zijn vb. tekst die verspringt/onduidelijk wordt weergegeven, foto’s waarvan men verwacht dat ze als link zouden dienen, etc. Maar zoek ook voorbeelden voor de Hall Of Fame. De bedoeling is om een getraind oog en gevoeligheid te creëren voor deze materie.
Zoals enkele van deze toffe bouwblunders. (bron skynet.be)
Op naar volgende week !
Christine 