F1 Usability

Usability - introductie
lgg usability
  • Je kan uitleggen wat usability is
  • Je kan twee voorbeelden geven van heuristieken
1 / 30
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolvwoLeerjaar 5

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

Onderdelen in deze les

Usability - introductie
lgg usability
  • Je kan uitleggen wat usability is
  • Je kan twee voorbeelden geven van heuristieken

Slide 1 - Tekstslide

Usability
  • Volgens de module: "Gebruiksvriendelijkheid"
  • Volgens internet: "Bruikbaarheid" 
  • Een definitie - "de mate waarin een product door bepaalde gebruikers in een bepaalde gebruikersomgeving kan worden gebruikt om bepaalde doelen effectief, efficiënt en naar tevredenheid te bereiken"

Slide 2 - Tekstslide

Wat is usability?
Misschien kan je heel goed programmeren. 
Maar kunnen mensen ook overweg met de app's die jij maakt?
Doel is om de sterke kanten van computers en mensen te combineren in de apps die je maakt

Slide 3 - Tekstslide

Usability en design
  • Design - De vormgeving van een app

  • Usability - De gebruiksvriendelijkheid van een app

  • User experience - De juiste combinatie van design en usability

Slide 4 - Tekstslide

Gebruikerservaring
Bij het ontwerpen van een app speelt gebruikerservaring een belangrijke rol. 

Gebruikerservaring is eigen een combinatie van usability en design. Als een site goed is ontworpen en functioneel slim in elkaar zit is voor de gebruiker de beste ervaring. Zie volgende slide..

Slide 5 - Tekstslide

Gebruikerservaring
Usability en design

Waar het hier bij design en usability om gaat, is een zo mooi en goed mogelijke weg aan te leggen. Die weg moet gebruikers effectief, efficiënt en comfortabel van A naar B laten gaan. En natuurlijk moet hij er mooi uit zien.
User experience

Hoewel het een mooi, effectief en comfortabel tegelpad is, is de gebruikerservaring anders. En ondanks dat het pad door het gras niet comfortabel is, is het wel zeer efficiënt. Een soortgelijke situatie herken je vast wel in je eigen omgeving.

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Eat your own dogfood!

Slide 8 - Tekstslide

Wat is er mis met deze website?

Slide 9 - Open vraag


Welk design vindt jij duidelijker?
A
Links
B
Rechts

Slide 10 - Quizvraag

Kijk naar de afbeelding rechts. Wat is er fout gegaan bij het ontwerpen?

Slide 11 - Open vraag

Slide 12 - Tekstslide

Als we het hebben over het design van een app. Waar richt je je dan op?

Slide 13 - Open vraag

Als we het hebben over de usability van een app. Waar richt je je dan op?

Slide 14 - Open vraag

Geef in je eigen woorden aan wat het verschil is tussen design en gebruikerservaring.

Slide 15 - Open vraag

Heuristieken
  • Vuistregels of richtlijnen voor dagelijks gebruik
  • b.v. eerst je haren kammen, dan je t-shirt aan trekken
  • b.v. (duidelijke) foutmeldingen
  • b.v. een gebruiker van je website moet altijd weten waar hij is

Slide 16 - Tekstslide

Heuristieken voor goed ontwerp
Usability heuristieken (=vuistregels) van Nielsen:
  1. Eenvoudige Toegang
  2. Geef gebruiker controle
  3. Bied veiligheid
  4. Zorg voor aansluiting


Slide 17 - Tekstslide

Nielsen’s Usability Heuristics 

Slide 18 - Tekstslide

R1: Eenvoudige toegang
Zichtbaarheid door slimme kleurkeuze en opmaak

Slide 19 - Tekstslide

R1: Eenvoudige toegang
Zichtbaarheid:
  • Slim gebruik van afbeeldingen ipv tekst
  • Niet teveel lappen tekst, plaatjes duidelijker

Slide 20 - Tekstslide

R1: Eenvoudige toegang
Rangschikking door ordening
  • Goed gebruik van headings
  • Kleuren
  • Groottes
  • Kaders
  • Etc.

Slide 21 - Tekstslide

R1: Eenvoudige toegang
Consistentie en doelgerichtheid:
  • Dingen steeds op dezelfde plek
  • Duidelijk doel: webshop, blog,
      nieuwssite, etc.



Slide 22 - Tekstslide

Less is more

Slide 23 - Tekstslide

R2: Geef gebruiker controle
Laat duidelijk de status van het systeem zien. Geef de gebruiker feedback:
  • Voortgang van stappen     -->
  • Laadindicatie

  • Navigatie: Waar ben ik op de site?


Slide 24 - Tekstslide

R3: Bied veiligheid
Geef de grenzen aan en voorkom fouten zo veel mogelijk.
Bijvoorbeeld door dingen uit te schakelen als ze niet gebruikt kunnen worden:

Slide 25 - Tekstslide

R4: Zorg voor aansluiting
Denk na over je doelgroep:
  • Tekst en taalgebruik
  • Design en kleuren
  • Lettertypes
  • ...

Slide 26 - Tekstslide

R4: Zorg voor aansluiting
Skeuomorfisme. Digitale dingen ontwerpen met het uiterlijk van de analoge tegenhanger.

Slide 27 - Tekstslide

R4: Zorg voor aansluiting
Sluit aan bij gewoontes, standaarden en verwachtingen
  • Standaardknoppen en menu's
  • Logisch kleurgebruik



  • Locaties van dingen. Bv: Menu zit meestal links of boven

Slide 28 - Tekstslide

...
Bedenk een (of meer) goede heuristiek(en) bij deze afbeelding

Slide 29 - Tekstslide

Noem 3 dingen die je deze les geleerd hebt.

Slide 30 - Open vraag