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]