Gebruikers interface

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

Gebruikers interface

De 10 principes van Jakob Nielsen (1994)

Leerdoel

Kennis van de 10 principes van Jakob Nielsen en een vertaling kunnen maken naar de gebruikersinterface.

Enkele begrippen

Usability: Bruikbaarheid (ISO 25010 kwaliteitskenmerken software); de mate waarin een product of systeem gebruikt kan worden door gespecificeerde gebruikers om effectief, efficiënt en naar tevredenheid gespecificeerde doelen te bereiken in een gespecificeerde gebruikscontext. 

User Interface (UI): Gebruikers interface; Niet alleen het ontwerp, maar vooral ook het functioneren van alle elementen in de interface zijn van groot belang.Let op: UI richt zich uitsluitend op de interface.

User Interface Design (UID): Gebruikers interface ontwerp richt zich op User Interface Design is om tot een betere gebruikerservaring te komen.

User Experience (UX): De waarneming en reacties van een persoon die voortvloeien uit het gebruik of vooruitlopen op het
gebruik van een product of dienst.”  Let op: UX richt zich op de totale gebruikservaring!

User experience design (UXD): het proces dat zich richt op alles wat te maken heeft met de interactie van een gebruiker met een product. Dit product kan zowel digitaal als fysiek zijn (https://www.ensie.nl/david-notte/user-experience-design).

Waar moet een
goede gebruikersinterface aan voldoen?

Principe 1: Zichtbaarheid van systeemstatus

(Visibility of system status)

Het systeem moet de gebruikers altijd informeren over wat er gebeurt, door geschikte feedback binnen redelijke tijd.

Principe 1 - Praktijk voorbeelden

Na selectie van een button verandert de kleur en verschijnt er een checkbox. Dit laat aan de gebruiker zien dat zijn keuze is vastgelegd.

Voortgangsindicator bevestigt aan de gebruiker dat langer wachten normaal is en dat het systeem nog steeds werkt.

De Amazon Music app op iOS staat gebruikers toe de volgorde van de items direct te wijzigen in de playlist. Gebruikers zijn bewust van de systeemstatus en kunnen deze makkelijk herkennen en een fout corrigeren.

Zoek in je omgeving (ook internet) naar voorbeelden van gebruikersinterfaces waarbij de systeemstatus duidelijk is. Geef hier een beknopte uitleg bij.

Principe 2 - Overeenkomst systeem en de "echte" wereld

(Match between system and the real world)

Spreek dezelfde taal als gebruiker (en niet in systeemtaal!), gebruik de termen die de gebruiker ook gebruikt en de icoontjes waaraan ie gewend is. Volg de conventies in de "echte" wereld, zodat de informatie in een logische en natuurlijke manier getoond wordt.

De kiosk van een Apple device, in deze afbeelding wordt een boekenkast afgebeeld.

Principe 2 - Praktijkvoorbeelden

De About pagina van Abacus legal software’s website gebruikt veel technische termen die lastig zijn voor de gebruiker.

UI elementen in de kompas app (links) zijn gelijk aan de kompas in de "echte" wereld (rechts). Voor gebruikers is het gebruik en de functies van de app eenvoudig te begrijpen.

De volume knoppen + en - van koptelefoons zijn een voorbeeld van een "natuurlijke" afbeelding van het volume. Met de knop + neemt het volume toe en met de knop - neemt deze af.

Kan je een voorbeeld noemen van een gebruikersinterface
die goed overeenkomt de "echte" wereld en waarom?

Spreek dezelfde taal als de bezoeker, gebruik de termen die hij ook gebruikt en de icoontjes waaraan hij is gewend. Bijvoorbeeld: Gebruik termen die de bezoekers begrijpen, jongerentaal of vaktaal bij hoogopgeleiden.

Principe 3 - Gebruiker heeft controle en vrijheid

(User control and freedom)

Zorg ervoor dat de bezoeker belangrijke beslissingen op eenvoudige wijze (undo, redo) ongedaan kan maken, zonder allerlei dialogen.

Als gebruiker moet je een nieuw account of transactie bij nader inzien kunnen cancelen.

Sleep de afbeeldingen naar het juiste doel.

Gebruiker heeft geen controle en/of vrijheid.

Gebruiker heeft controle en/of vrijheid.

Principe 4 - WEES CONSISTENT

(Consistency and standards)

Wees consistent in woorden, functies, layout, symbolen en acties waar de gebruiker aan gewend is.

Emoticons uit Whatsapp

Menubalk MS Office

Op een website is meestal het logo linksboven aan de pagina en de zoek functie boven aan de rechterzijde. Hier staan de items waar de gemiddelde gebruiker ze verwacht.

Praktijkvoorbeeld Principe 4

Gebruik elementen en acties waar de bezoeker aan gewend is. Dat kunnen bepaalde woorden zijn, maar ook waar dat je bepaalde functies en layout van een pagina plaatst. Een zoekbalk zoekt men altijd bovenin de pagina. Net als het winkelmandje, rechts bovenin. De belangrijkste plaats voor een website is rechtsboven, want daar kijkt de bezoeker het eerst. Het logo staat meestal linksboven op de website en het menu staat meestal ook boven aan.

Elementen: indeling webpagina, kleuren, lettertyp en grootte, taalgebruik, naamgeving, iconen, logo

Acties: zoekfunctie, navigeren volgende pagina, verzenden bericht.

Geef een voorbeeld van consistentie
in de gebruikersinterface?

Principe 5 - Voorkom fouten

(Error prevention)

Voorkom foutgevoelige situaties of geef een mogelijkheid tot bevestiging voordat de actie definitief wordt.Geef bij een fout direct aan wat fout is en een manier om te corrigeren.

Southwest’s kalender widget om vluchtdata te selecteren, ondersteunt de gebruiker. Als de terugvliegdatum voor de vertrekdatum ligt, zal de widget de gebruiker vragen om eerst een vertrekdatum te selecteren. De kleuren worden gebruikt om aan te geven welke datum zal veranderen (hier: blauw voor vertrek).

Google’s Inbox app voor iOS staat het “snooze” van een  email toe tot een later moment. De default opties zijn  doordacht en voor-komen dat er type fouten gemaakt worden voor standaard keuzes.

Is dit een goede foutmelding en waarom?

Fouten zijn belangrijk om te voorkomen. Wanneer een bezoeker iets ziet wat niet klopt, bestaat de kan dat de pagina wordt weg geklikt. Het aangeven van een foutmelding is altijd snel gedaan, maar als de bezoeker niet weet wat hij fout heeft gedaan zal hij de ervaring as vervelend ervaren en de pagina verlaten. Help de klant dus altijd met het aangeven. Een voorbeeld hiervoor is dat wanneer je je wachtwoord wilt veranderen op een website, deze twee maal moet worden ingetypt om spelfouten te voorkomen. Zo weet je zeker dat je je wachtwoord goed heb ingevuld.

Principe 6: ZORG DAT DE GEBRUIKER NIKS HOEFT TE ONTHOUDEN

(Recognition rather than recall)

Zorg dat de app de dingen onthoudt die belangrijk zijn, of geef die informatie gewoon nog een keer daar waar nodig is.

Bing zoekmachine heeft een link naar de zoekgeschiedenis, zodat gebruikers geholpen worden met eerdere zoekacties.

Als een gebruiker Amazon.com opent verschijnt er een gepersonaliseerde home pagina met een lijst van recent bekeken items.

Principe 6: Praktijkvoorbeelden

Mailbox is een email app voor de iPad. De iconen rechts bovenaan het scherm zijn moeilijk herkenbaar (behalve de X waarschijnlijk). Een label bij het icoon zal de gebruiker helpen bij de eerste keren dat ie dit icoon gebruikt. De handelingen bij de app worden uitgelegd in een initiele tutorial,  maar de gebruiker moet dit dan gaan onthouden. Een tip bij de handeling zal de gebruiker helpen bij het gebruik.

Bij Google vul je  twee woorden in de zoekbalk in; in dit geval ‘ze staat’. Google geeft mogelijke zoek resultaten weer zoal hiernaast te zien is.

Principe 6: ZORG DAT DE GEBRUIKER NIKS HOEFT TE ONTHOUDEN
Een gebruikersinterface die gebruikers ondersteunt bij het oproepen van geheugeninformatie.
Welk antwoord is niet goed?

1. Menu items die de gebruiker voor het eerst ziet.
2. Taken en items die de gebruiker eerder heeft gezien.
3. Interface functionaliteit die de gebruiker eerder heeft gezien.
4. Symbolen die de gebruiker eerder heeft gezien.

Het opvragen van geheugeninformatie hangt af van hoe vaak die informatie opgevraagd is, hoe recent dit gebeurt is, en hoezeer het gerelateerd is aan de context.

Principe 7: FLEXIBILITEIT EN EFFICIENCY

(Flexibility and efficiency of use)

De gebruikersinterface dient afgestemd te zijn op de bezoeker. Geef de mogelijkheid aan de gebruiker om acties op maat in te stellen.

Door opties in de gebruikersinterface aan te zetten kan er efficienter gewerkt worden.

Sneltoetsen op maat instellen kunnen de efficientie verhogen.

Kan je een concreet voorbeeld noemen die de efficiency verhoogd?

Principe 8: HOU HET MINIMAAL EN VERFIJND.

(Aesthetic and minimalist design)

Zorg ervoor dat de gebruiker zijn taak op de app kan uitvoeren en schrap overbodige content.

Overbodige content die de gebruiker afleiden van een eenvoudige zoekactie.

Het Google scherm is minimalistisch en elke gebruiker weet wat hier moet gebeuren.

Duidelijk signaal (informatie) en geen ruis

Communiceer en maak geen overbodige versieringen.

Waarom is het voor de gebruiker prettig om op een minimalistisch scherm te werken?

Principe 9: MAAK FOUTMELDINGEN DUIDELIJK.

(Help users recognize, diagnose, and recover from errors)

Maak van foutmeldingen een duidelijke melding (geen foutcodes). Leg uit wat er aan de hand is en doe een voorstel voor een goede "vluchtroute".

Voor de gebruiker wordt het niet duidelijk wat er aan de hand is en er wordt geen "vluchtroute" aangegeven.

Een foutcode maakt niet duidelijk wat er aan de hand is. Ook wordt er geen "vluchtroute" aangegeven.

Duidelijk signaal (informatie) en geen ruis

Communiceer en maak geen overbodige versieringen.

Principe 10: BIED EEN HELPENDE HAND (HELP EN DOCUMENTATIE).

Bied een helpende hand in de vorm van een ‘help’ of documentatie, maar alleen als het nodig is! Deze moet eenvoudig te doorzoeken zijn gebaseerd op de gebruikers taak.

Het help scherm vult aan met een zoekactie voor alle lokaties.

In het helpscherm zoekveld verschijnen vaak voorkomende vragen waaruit geselecteerd kan worden.

Duidelijk signaal (informatie) en geen ruis

Communiceer en maak geen overbodige versieringen.

Ga naar youtube en start een zoekactie. Wat valt je op?
Maak hier een foto van.

Welke 10 principes ken je nu?