Gebruikers interface - heuristieken Nielsen

Gebruikers interface





De 10 principes van Jakob Nielsen (1994)
1 / 29
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolvwoLeerjaar 4

In deze les zitten 29 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

Gebruikers interface





De 10 principes van Jakob Nielsen (1994)

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Leerdoel



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

Slide 2 - Tekstslide

Deze slide heeft geen instructies

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


Slide 3 - Tekstslide

Deze slide heeft geen instructies

Waar moet een
goede gebruikersinterface aan voldoen?

Slide 4 - Woordweb

Deze slide heeft geen instructies

De 10 principes van Nielsen

Slide 5 - Tekstslide

Deze slide heeft geen instructies

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.

Slide 6 - Tekstslide

Deze slide heeft geen instructies

Principe 2 - 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.

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Slide 8 - Link

Deze slide heeft geen instructies

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

Slide 9 - Open vraag

Deze slide heeft geen instructies

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.

Slide 10 - Tekstslide

Deze slide heeft geen instructies

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.

Slide 11 - Tekstslide

Deze slide heeft geen instructies

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

Slide 12 - Woordweb

Deze slide heeft geen instructies

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.

Slide 13 - Tekstslide

Deze slide heeft geen instructies

Sleep de afbeeldingen naar het juiste doel.
Gebruiker heeft geen controle en/of vrijheid.
Gebruiker heeft controle en/of vrijheid.

Slide 14 - Sleepvraag

Deze slide heeft geen instructies

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.

Slide 15 - Tekstslide

Deze slide heeft geen instructies

Geef een voorbeeld van consistentie
in de gebruikersinterface?

Slide 16 - Woordweb

Deze slide heeft geen instructies

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.

Slide 17 - Tekstslide

Deze slide heeft geen instructies

Is dit een goede foutmelding en waarom?

Slide 18 - Woordweb

Deze slide heeft geen instructies

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.

Slide 19 - Tekstslide

Deze slide heeft geen instructies

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.

Slide 20 - Tekstslide

Deze slide heeft geen instructies

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?

A
Menu items die de gebruiker voor het eerst ziet.
B
Taken en items die de gebruiker eerder heeft gezien.
C
Interface functionaliteit die de gebruiker eerder heeft gezien.
D
Symbolen die de gebruiker eerder heeft gezien.

Slide 21 - Quizvraag

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

Slide 22 - Tekstslide

Deze slide heeft geen instructies

Kan je een concreet voorbeeld noemen die de efficiency verhoogd?

Slide 23 - Open vraag

Deze slide heeft geen instructies

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.

Slide 24 - Tekstslide

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?

Slide 25 - Open vraag

Deze slide heeft geen instructies

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.

Slide 26 - Tekstslide

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.

Slide 27 - Tekstslide

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.

Slide 28 - Open vraag

Deze slide heeft geen instructies

Welke 10 principes ken je nu?

Slide 29 - Open vraag

Deze slide heeft geen instructies