UX voor interactieve media en webanimaties

Wireframing, Informatiearchitectuur, User flows &
Designsystemen in het AI-tijdperk

Aan het einde van deze sessie ben je in staat om:

• Informatiearchitectuur (IA) uit te leggen
• Een eenvoudige sitemap te maken
• Een user flow in kaart te brengen
• Low-fidelity wireframes te schetsen
• De rol van designsystemen te begrijpen
• Te herkennen hoe AI het ontwerpproces verandert

User Experience

Waarom UX belangrijk is

Animatie kan een verwarrend product niet repareren.

Goed interactieontwerp begint met:

• Gebruikersdoelen
• Inhoudshiërarchie
• Structuur
• Navigatie

"Wat gebeurt er als gebruikers niet kunnen vinden wat ze nodig hebben?"

UX vóór UI

UX = Hoe het werkt ← → UI = Hoe het eruitziet

Informatiearchitectuur
↓
User Flow
↓
Wireframes
↓
Visueel ontwerp
↓
Animatie & Interactie

Informatie
architectuur

Wat is informatiearchitectuur?

Informatiearchitectuur is:

"De organisatie en structuur van inhoud."

Doelen:

• Vindbaarheid
• Duidelijkheid
• Voorspelbaarheid

Voorbeeld uit de praktijk

Denk aan:

• Netflix
• Spotify
• Amazon

Waarom zijn items op die manier gegroepeerd? Gebruikers navigeren met behulp van mentale modellen en voorspelbare stromen.

Mentale verwachtingen

Gebruikers verwachten:

Winkelwagen → Afrekenen

Profiel → Instellingen
Zoeken → Resultaten

Ontwerp moet aansluiten bij de verwachtingen.

Resultaat van informatiearchitectuur

Sitemap

Visuele weergave van:

• Pagina's
• Secties
• Relaties

Voorbeeld:

User flows

Navigatie

Hoe gaan we van de ene pagina naar de andere?

Goede versus slechte navigatie

Goed:

• Duidelijke labels
• Beperkte keuzes
• Logische groepering

Slecht:

• Te veel menu-items
• Dubbelzinnige labels
• Diepe structuren

User flow

Een user flow beschrijft:

Hoe een gebruiker door een product beweegt om een doel te bereiken.

Focus op:

• Doel
• Stappen
• Beslissingen

Voorbeeld van een user flow

Doel: Een concertticket kopen

Landing page 
↓ 
Evenementpagina 
↓ 
Ticket kiezen 
↓ 
Betaling 
↓ 
Bevestiging

User flow - componenten

Veelvoorkomende symbolen:

Rechthoek = Scherm Ruit = Beslissing Pijl = Richting

Hou flows eenvoudig.

Happy path versus edge cases

Happy path: Alles werkt naar behoren.

Edge cases:

• Verkeerd wachtwoord
• Lege zoekopdracht
• Betaling mislukt

Goede ontwerpers houden rekening met beide.

Van flows naar schermen

User flow beantwoordt: "Wat gebeurt er?"

Wireframes beantwoorden: "Wat verschijnt er op het scherm?"

Wireframing

Wat is een wireframe?

Een wireframe is:

Een weergave van een scherm met weinig detail.

Focus op:

• Indeling
• Hiërarchie
• Inhoud

Niet op kleuren of esthetiek.

Waarom beginnen met low-fidelity?

Voordelen:

• Snel
• Goedkoop
• Eenvoudig aan te passen
• Moedigt feedback aan

Denk na voordat je gaat decoreren.

Anatomie van een wireframe

Veelvoorkomende elementen:

• Koptekst
• Navigatie
• Inhoudsgebieden
• Call-to-action
• Voettekst

Voorbeeld van een wireframe

Wat is de primaire actie?

Wat is de primaire actie?

Veelvoorkomende wireframing-fouten

• Te vroeg visueel ontwerpen
• Te veel detail
• Hiërarchie negeren
• Gebruikersdoelen overslaan
• Inhoud negeren

Designsystemen

Designsysteem = herbruikbare bouwstenen

Bevat:

• Componenten
• Patronen
• Tokens
• Regels

Doel: Consistentie en schaalbaarheid.

Designsystemen in de praktijk

Componenten:

• Knoppen
• Navigatie
• Kaarten
• Formulieren
• Modals

Eén keer bouwen. Overal hergebruiken.

UX in het AI-tijdperk?

Het AI-tijdperk

AI kan het volgende genereren:

• Layout-ideeën
• UI-concepten
• Variaties van componenten

AI kan niet vervangen:

• Gebruikers begrijpen
• Informatie structureren
• Ontwerpbeslissingen nemen

Nieuwe rol van de ontwerper

Minder tijd aan:

• Repetitieve schermen tekenen

Meer tijd aan:

• Systemen definiëren
• Problemen oplossen
• AI-outputs evalueren

AI-ondersteunde workflow

Onderzoek
↓
Informatiearchitectuur
↓
Gebruikersstroom
↓
AI-ondersteunde wireframes
↓
Verfijning
↓
Prototype

Laten we oefenen!

Oefening

Ontwerp een website of app voor:

"Een platform voor lokale culturele evenementen"

Gebruikers kunnen:

• Evenementen bekijken
• Details bekijken
• Tickets reserveren

Stappen:

1. Inhoud verzamelen:
2. Sitemap
3. User flow
4. Low-fidelity wireframes

Workshop stap 1

Maak een sitemap

Resultaat: Maximaal 5–10 pagina's

Tijd: 10 min

Workshop stap 2

Maak een user flow:

Scenario:

"Reserveer een ticket voor een evenement"

Resultaat: Eén happy path

Tijd: 15 min

Workshop stap 3

Maak low-fidelity wireframes

Ontwerp:

• Startpagina
• Evenementdetail
• Reserveringsscherm
• Bevestigingsscherm

Tijd: 25 min

Groepsbeoordeling

Vragen:

• Is de navigatie duidelijk?
• Zijn onnodige stappen verwijderd?
• Is het doel van de gebruiker duidelijk?