Interaction Design, Patterns & Gedrag

Interactieve ervaringen ontwerpen voordat je ze bouwt

Wat we gaan leren:

Fundamenten van interaction design
Analyseer gebruikersgedrag
Herken veelvoorkomende designpatronen
Ontwerp gedrag vóór de visuele vormgeving
Prototyping van interactief denken

Hoofdstukken

Fundamenten van Interaction Design
Designpatronen
Wireframing?

Deel 1

Basisprincipes van Interaction Design

Wat is Interaction Design?

Het ontwerpen van de dialoog tussen:

Gebruiker
Interface
Systeem

Formule

Gebruiker → Actie → Reactie

[AFBEELDING PLACEHOLDER: Gebruiker die interageert met een digitaal product]

Focus van Interaction Design

Niet:

Visuele

Maar:

Gedrag
Acties
Reacties

Waarom Interaction Design belangrijk is

Gebruikers bezoeken producten omdat ze:

Doelen willen bereiken
Problemen willen oplossen
Taken willen voltooien

Voorbeelden van doelen, problemen, taken?

Voorbeelden:

Muziek luisteren
Berichten versturen
Producten kopen
Aanmelden voor evenementen

Wat wil de gebruiker?

Gebruikersdoelen zijn cruciaal voor het ontwerpen van interacties.

[AFBEELDING PLACEHOLDER: Illustratie van de gebruikersreis]

Gebruikersdoelen

Gewenst resultaat?

Behoeften
Motivatie
Resultaat
Waarde

Voorbeelden

Spotify

Muziek luisteren

Instagram

Content bekijken
Content delen

Notion

Informatie organiseren

[AFBEELDING PLACEHOLDER: Doelgericht gebruikersgedrag]

Gebruikersacties

Gedrag uitgevoerd om doelen te bereiken.

Input
Gedrag
Interactie

Wat onderneem je om een doel te bereiken met een digitaal apparaat?

Voorbeelden van gebruikersacties

Klikken
Scrollen
Zoeken
Swipen
Slepen
Typen

[AFBEELDING PLACEHOLDER: Verschillende webinteracties]

Systeemreactie

Reactie van de interface.

Doel:

Statusveranderingen communiceren.

Voorbeelden van een systeemreactie?

Na het klikken:

Menu opent
Formulier verschijnt
Content laadt
Knop verandert

[AFBEELDING PLACEHOLDER: Voorbeelden van interfacereacties]

Feedbackloops

Wat is feedback?

Het systeem communiceert resultaten.

Zelfvertrouwen
Vertrouwen
Duidelijkheid

Welke soorten feedback bestaan er?

Soorten feedback

Succes

Voltooid

Waarschuwing

Aandacht vereist

Fout

Probleem opgetreden

Laden

Verwerken

[AFBEELDING PLACEHOLDER: Voorbeelden van feedbackberichten]

Feedbackloopmodel

Gebruikersactie

↓

Systeemreactie

↓

Gebruiker interpreteert

↓

Volgende actie

Goed ontwerp

Duidelijke loop

Slecht ontwerp

Onderbroken loop

[AFBEELDING PLACEHOLDER: Diagram van feedbackloop]

Recap: Samenvatting Interaction Design

Gebruiker

Doel

Gedrag

Actie

Interface

Reactie

Communicatie

Feedback

Resultaat

Doel voltooid

[AFBEELDING PLACEHOLDER: Framework voor interaction design]

Interaction Design herkennen

Actie → Reactie mapping.

Analyseer een applicatie naar keuze, documenteer ten minste 5 interacties.

Documenteer

Actie

↓

Reactie

Vragen

Wat gebeurde er?
Was de feedback zichtbaar?
Was de feedback duidelijk?
Kon het verbeterd worden?

[AFBEELDING PLACEHOLDER: Analyse-sjabloon voor studenten]

Deel 2

Designpatronen

Bij het kijken naar Interaction Design valt het op dat de meeste interacties vergelijkbaar zijn, je zou bijna kunnen zeggen identiek.

Aan welke voorbeelden van veelvoorkomende interacties kun je denken?

Wat is een designpatroon?

Herbruikbare oplossing voor terugkerende problemen. Gebruikers willen niet elke interface opnieuw hoeven leren.

Vertrouwdheid
Verwachtingen
Herkenning

Herkenning boven leren.

[AFBEELDING PLACEHOLDER: Veelvoorkomende webpatronen]

Waarom bestaan patronen?

Sneller leren
Minder verwarring
Betere bruikbaarheid

Voorbeelden:

Navigatie bovenaan
Zoekicoon
Winkelmandje
Inlogknop
...

[AFBEELDING PLACEHOLDER: Voorbeelden van vertrouwde interfaces]

Waarom werken designpatronen?

1. Mentale modellen

De interne verwachting van de gebruiker over hoe iets werkt. Het ontwerp moet dus aansluiten bij de verwachtingen.

Voorbeeld

Winkelmandje

Mensen verwachten:

Item toevoegen
Item opslaan
Afrekenen

[AFBEELDING PLACEHOLDER: Diagram van mentaal model van gebruiker]

2. Vertrouwdheid

Mensen geven de voorkeur aan bekende oplossingen.

Comfort
Herkenning
Eenvoud

Voordelen

Snellere beslissingen
Minder cognitieve belasting
Groter zelfvertrouwen

[AFBEELDING PLACEHOLDER: Voorbeelden van vertrouwde UX]

3. Consistentie

Elementen gedragen zich vergelijkbaar door het hele product heen.

Consistentie is van toepassing op

Lay-out
Navigatie
Knoppen
Formulieren
Animaties

Voordelen

Vertrouwen
Voorspelbaarheid
Leerefficiëntie

[AFBEELDING PLACEHOLDER: Consistent UI-systeem]

Soorten patronen

Navigatiepatronen
- Helpen gebruikers door content te navigeren.
Zoekpatronen
- Helpen gebruikers informatie te vinden.
Formulierpatronen
- Begeleiden bij het voltooien van taken.
...

Oefening

Patronenjacht

Vind 4 voorbeelden voor elke categorie:

Navigatiepatronen
Zoekpatronen
Formulierpatronen

Bespreek

Waarom werken ze?
Waarom begrijpen gebruikers ze?
Welke beweging ondersteunt ze?

[AFBEELDING PLACEHOLDER: Werkblad voor patroonanalyse]

Voorbeelden

Bovenste navigatie
Zijbalknavigatie
Hamburgermenu
Tabbladnavigatie
Zoekbalk
Zoeksuggesties
Filters
Sorteren
Labels
Validatie
Voortgangsindicatoren
Bevestigingsberichten

Patronen en beweging

Interactie vereist beweging

Voorbeelden:

Navigatie

Menu openen

Zoeken

Resultaten weergeven

Formulieren

Successtatussen
Foutstatussen

[AFBEELDING PLACEHOLDER: Geanimeerde UI-patronen]

Recap: Designpatroon

Mentale modellen

Verwachtingen van de gebruiker

Vertrouwdheid

Bekend gedrag

Consistentie

Voorspelbaar gedrag

Patronen

Herbruikbare oplossingen

[AFBEELDING PLACEHOLDER: Patroon-ecosysteem]

Deel 3

Wireframing voor gedrag

Wat is een wireframe?

Blauwdruk van een ervaring. Content is erg belangrijk, maar nu wireframen we alleen de interactie.

Niet:

Kleuren
Branding

Maar:

Structuur
Gedrag
Functionaliteit

[AFBEELDING PLACEHOLDER: Website wireframe]

Ontwerpen vóór visuele vormgeving

~~Eerst het uiterlijk ontwerpen.~~

Betere aanpak

Doel

↓

Gedrag

↓

Structuur

↓

Visueel ontwerp

[AFBEELDING PLACEHOLDER: Diagram van ontwerpproces]

Wireframing voor gedrag

Stel vragen

Wat kunnen gebruikers doen?
Waar kunnen ze klikken?
Wat verandert er?
Wat gebeurt er daarna?

Focus

Interactiemogelijkheden.

[AFBEELDING PLACEHOLDER: Annotaties bij interactieve wireframe]

Uitdaging

Studenten-evenementenplatform

Creëer

Homepage
Pagina met evenementdetails
Registratiestroom

Beperkingen

Geen kleur
Geen branding
Geen visuele styling

Focus alleen op gedrag.

[AFBEELDING PLACEHOLDER: Concept voor studenten-evenementenplatform]

Nadenken over de homepage

Vragen

Welke informatie verschijnt als eerste?
Wat moeten gebruikers doen?
Hoe worden evenementen ontdekt?

Trefwoorden

Ontdekken
Bladeren
Zoeken

[AFBEELDING PLACEHOLDER: Homepage wireframe]

Nadenken over evenementdetails

Vragen

Welke informatie is het belangrijkst?
Waar is de registratieactie?
Hoe kan de motivatie worden verhoogd?

Trefwoorden

Informatie
Beslissing
Conversie

[AFBEELDING PLACEHOLDER: Wireframe voor evenementdetails]

Registratie

Vragen

Stappen?
Formulieren?
Bevestiging?

Trefwoorden

Voortgang
Voltooiing
Feedback

[AFBEELDING PLACEHOLDER: Diagram van registratiestroom]

Oefening

Ontwerp

Homepage
Detailpagina
Registratiestroom

Indienen

Papieren schetsen

Evalueer

Kunnen gebruikers gemakkelijk taken voltooien?

[AFBEELDING PLACEHOLDER: Workshopactiviteit]