les 4 IxD - Vormgeving, gebruikerservaring en heuristieken van Nielsen)

• Informatica
• Middelbare school
• vwo
• Leerjaar 5

Interaction Design

Les 4 - Vormgeving en gebruikerservaring

Stappenplan IxD

1. Probleemstelling                             Wat is het nut van de app?
2. Programma van Eisen                    Wat moet de app kunnen?
3. Use cases                                            Welke functies zitten er in?
4. Navigatiemodel                                Via welke schermen werk je?
5. Vormgeving en UX                           Passende look & feel
6. Persona's                                             Wie zijn de gebruikers?

Grafische Vormgeving/
Stijlkenmerken

Lettertypen ​(met/zonder schreef)

Kleuren​ (koud/warm)

Beeld en fotografie​

Beeld / tekst-verhouding​

Vlakverdeling​

benoem kleurpalet keuze in je verslag

Vormgeving​: opfrissen!

Algemene wetmatigheden binnen vormgeving en de stijlkenmerken die je kunt gebruiken in je app-ontwerp:​

• Lettertypen ​

• Kleuren​

• Beeld en fotografie​

• Beeld / tekst-verhouding​

• Vlakverdeling​

Letters

• Waarmee associeer jij deze lettertypen?​
• Voor welke stijl of sfeer zou je dit gebruiken?​
• Welke zou jij gebruiken voor jouw app en waarom?

kijk op https://www.dafont.com voor gratis fonts

Kleuren

Kleuren hebben gevoelswaarde.

Warme-koude kleuren

Heldere - Vuile kleuren

Zachte - Harde kleuren

• Welke kleuren zou je waarvoor kunnen gebruiken?

• Voor welke sfeer zou je welke kleuren gebruiken?

• Welke kleuren zou jij voor je app gebruiken en waarom?

Kleuren

Kleuren hebben naast gevoelswaarde ook betekenis!

Verkeerd gebruik geeft vergissingen.

Niet alle kleurencombi's werken goed bij iedereen...

https://flash3000.nl/blog/hoe-zien-kleurenblinden-een-website/

Beeld en fotografie

Kleur- ZwartWit

Felle - Schrale kleuren

Zachte - Harde contrasten

• Welke fotografie, illustratie of animatie zou je waarvoor gebruiken?

• Wat is de sfeer die je hiermee oproept?

• Welke stijl zou je voor jouw app gebruiken?

Metaforen

Een metafoor is een vorm van beeldspraak: je gebruikt een woord of beeld voor iets anders, waarmee het een overeenkomst vertoont

benoem gebruikte metaforen in je verslag.

wanneer is iets nou een goede/duidelijke metafoor? > belangrijk voor gebruiksvriendelijkheid/usability!

Oefening Vormanalyse (1)

Oefening Vormanalyse (2)

Vóór je gaat ontwerpen: Benchmark (onderzoek)

Ga kijken.....

• Wat is er al op de markt in jouw segment? 
• Wat is hier goed aan?
  
• Wat kan beter?
  
• Bedenk wat jouw Unique Selling Point is: wat kan je doen om hiertussen op te vallen? 
• Wat maakt jouw product juist onderscheidend?
  

Je moet dus proberen erachter te komen wat voor jouw gebruiker werkt. Hiervoor ga je een benchmark doen: 

Tips voor je app-ontwerp

• Wat is je doelstelling? Zorg dat deze helder is.
• Neem je gebruiker mee aan de hand: 

     -> zorg dat het duidelijk is waar je moet zijn 
     -> maak dus een gebruiksvriendelijke tool

• Hou het simpel. De kracht ligt in de eenvoud;
  
• Zorg voor korte, duidelijke pakkende teksten;
  
• Details van foto’s werken goed: maak uitsneden.

Experimenteer en leer.

Interaction Design

Usability

Vuistregels van Nielsen voor goed ontworpen software

Stappenplan IxD

1. Probleemstelling                             Wat is het nut van de app?
2. Programma van Eisen                    Wat moet de app kunnen?
3. Use cases                                            Welke functies zitten er in?
4. Navigatiemodel                                Via welke schermen werk je?
5. Vormgeving en UX vervolg          Usability
6. Persona's                                             Wie zijn de gebruikers?

Jakob Nielsen heeft een aantal richtlijnen ontwikkeld die je gebruiken kan tijdens het ontwerpen en optimalizeren van een nieuw product. Deze richtlijnen zijn bedoeld om inzicht te geven in de meest voorkomende problemen van usability.

Jakob Nielsen, een bekende onderzoeker op het gebied van user experience, heeft een aantal richtlijnen geformuleerd die je gebruiken kan tijdens het ontwerpen en optimalizeren van een nieuw product. Deze richtlijnen zijn bedoeld om inzicht te geven in de meest voorkomende problemen van usability en hulp te bieden bij het ontwerpen van een product of systeem.

De heuristieken komen oorspronkelijk uit 1994, dus al een tijd geleden. Toch kun je deze nog goed toepassen. Dit komt omdat het universele vuistregels zijn die makkelijk toe te passen zijn op allerlei producten of services.

Vuistregels (heuristieken) van Nielsen

Regel 1: laat zien wat er gebeurt

Regel 2: Overeenkomst systeem en  wereld van de gebruiker

vertrouwde woorden, zinnen, concepten. (contactpagina heet Contact)

informatie in logische volgorde. (swipen ereaders)

Regel 3: Gebruiker heeft keuze en vrijheid

de opties om een proces te verlaten duidelijk aangeven

Regel 4: Wees consistent

Interne (product zelf, lay-out) en externe (winkelwagentje) consistentie (hoe de gebruiker het gewend is in de rest vd wereld)

Regel 5: Zorg dat de gebruiker niks hoeft te onthouden

herkennen vs herinneren

Wat is de hoofdstad van Polen?

Is Warsaw de hoofdstad van Polen?

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

Regel 6: Voorkom fouten

melding batterij bijna leeg

Regel 7: Flexibiliteit en efficientie

accelerators

Ctrl C + Ctrl V of rechtermuisklik

Regel 8: Hou het minimaal en verfijnd

Regel 8: Hou het minimaal en verfijnd

Welke website heeft een betere lay-out?

Regel 8: Hou het minimaal en verfijnd

lage vs hoge signaal-ruis verhouding

Regel 9: Maak foutmeldingen niet eng

Wel belangrijk? aangeven dat er iets fout is gegaan en wat het probleem dan is, daarbij simpele oplossingen geven (link om op te klikken), simpele taal. oplossing geven zonder gebruiker de schuld te geven

Regel 10: Bied een helpende hand
(help en documentatie)

Alleen als het nodig is

naast help pagina's , ook: walkthroughs, tooltips, video’s en chatbots.

Regel 6 en 9 lastig voor klikmodel

6

Regels (Heuristieken) van Nielsen

Aan de slag

• In je verslag staat een hoofdstuk vormgeving. Hierin geef je de volgende zaken aan met toelichting waarom je dit hebt gekozen.

   

1. Kleurgebruik; keuze voor palet
2. Gebruikte metaforen (iconen)
3. Minimaal 5 voorbeelden van toepassen vuistregels van Nielsen
4. Wat is je Unique Selling Point

Aan de slag met vormgeving en Nielsen

Uitleg over vormgeving in je verslag:

• Kleurgebruik; keuze voor palet
• Gebruikte metaforen (iconen)
  
• Uitleg bij toepassen vuistregels van Nielsen

Lever navigatiemodel in voor feedback!