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 verbeteren en in functie van interacties?

Deel 1

Basisprincipes van Interaction Design

Wat is Interaction Design?

Het ontwerpen van de dialoog tussen:

• Gebruiker
• Interface
• Systeem

Formule

Gebruiker → Actie → Reactie

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.

Gebruikersdoelen

Gewenst resultaat?

• Behoeften
• Motivatie
• Resultaat
• Waarde

Voorbeelden producten en hun doel?

Voorbeelden producten en hun doel?

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

Voorbeelden van gebruikersacties

• Klikken
• Scrollen
• Zoeken
• Swipen
• Slepen
• Typen
• ....

Systeemreactie

Reactie van de interface.

Doel:

Statusveranderingen communiceren.

Voorbeelden van een systeemreactie?

Na het klikken:

• Menu opent
• Formulier verschijnt
• Content laadt
• Knop verandert

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

Feedbackloopmodel

Gebruikersactie

↓

Systeemreactie

↓

Gebruiker interpreteert

↓

Volgende actie

Goed ontwerp

Duidelijke loop

Slecht ontwerp

Onderbroken loop

Recap: Samenvatting Interaction Design

Gebruiker

• Doel

Gedrag

• Actie

Interface

• Reactie

Communicatie

• Feedback

Resultaat

• Doel voltooid

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?

Deel 2

Designpatronen

Ga op zoek naar minstens 5 interacties online.

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

Waarom bestaan patronen?

• Sneller leren
• Minder verwarring
• Betere bruikbaarheid

Voorbeelden:

• Navigatie bovenaan
• Zoekicoon
• Winkelmandje
• Inlogknop
• ...

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

2. Vertrouwdheid

Mensen geven de voorkeur aan bekende oplossingen.

• Comfort
• Herkenning
• Eenvoud

Voordelen

• Snellere beslissingen
• Minder cognitieve belasting
• Groter zelfvertrouwen

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

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?

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

Recap: Designpatroon

Mentale modellen

Verwachtingen van de gebruiker

Vertrouwdheid

Bekend gedrag

Consistentie

Voorspelbaar gedrag

Patronen

Herbruikbare oplossingen

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

Ontwerpen vóór visuele vormgeving

Eerst het uiterlijk ontwerpen.

Wireframing voor gedrag

Stel vragen

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

Focus

Interactiemogelijkheden.

Prototype in
Figma

Uitdaging: Overzicht

Loopevenementenplatform

Creëer

• Homepage
• Pagina met evenementdetails
• Registratiestroom

Beperkingen

• Geen kleur
• Geen branding
• Geen visuele styling

Focus alleen op gedrag.

Nadenken over de homepage

Vragen

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

Trefwoorden

• Ontdekken
• Bladeren
• Zoeken

Nadenken over evenementdetails

Vragen

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

Trefwoorden

• Informatie
• Beslissing
• Conversie

Registratie

Vragen

• Stappen?
• Formulieren?
• Bevestiging?

Trefwoorden

• Voortgang
• Voltooiing
• Feedback

Oefening

Ontwerp

• Homepage
• Detailpagina
• Registratiestroom

Indienen

Papieren schetsen met een Wireflow of Figma Prototype

Evalueer

Kunnen gebruikers gemakkelijk taken voltooien?