7.1 Aanpak: theorie-gedreven divergentie
Denkproces: Waarom juist déze theorieën?
Het probleem uit Fase 1 is frictie bij het navigeren in een hybride interface. Drie fundamenteel andere
invalshoeken uit het college Interaction Design:
1. De Ruimtelijke Vraag → Lens 1: Spatial Memory & Oriëntatie
2. De Mentale Vraag → Lens 2: Cognitive Load & Flow
3. De Transitie Vraag → Lens 3: Spatial & Transitional Interfaces
Door vanuit verschillende theoretische lenzen naar hetzelfde probleem te kijken, ontstaan fundamenteel
verschillende navigatie-architecturen, drie andere manieren van denken over
hoe een gebruiker door de feature navigeert.
De onderzoekvraag per lens
Gegeven dat camera-input de laagste Gulf of Execution heeft, én dat de plattegrond de sterkste Mapping
biedt : hoe organiseer je de navigatie daartussen binnen de Funda-app?
7.2 Lens 1: Spatial Memory & Oriëntatie (Laubheimer, NNG)
De Theorie: Spatial Memory (Laubheimer, 2020) stelt dat gebruikers onthouden waar
informatie zich bevindt. Een persistente visuele referentie (zoals een mini-map) voorkomt desoriëntatie en
ondersteunt Recognition over Recall (Nielsen, 1994).
Vertaling naar Ontwerp
De plattegrond uit het oog verliezen tijdens het fotograferen? Oplossing: laat de
plattegrond er altijd bij staan net als een mini-map in een videogame. Dan is schakelen nietnodig.
Het Ontwerp (Alt 1 — De Radar): De plattegrond zweeft als een kleine 'Picture-in-Picture'
mini-map over de fullscreen camera-view. Na het maken van een foto pulseert de mini-map, en een tik erop laat
de kaart vloeiend inzoomen via een Spatial Transition.
De Hypothese: Als de plattegrond continu zichtbaar is als PiP-overlay, dan
ervaart de gebruiker minder desoriëntatie bij het wisselen tussen fotograferen en lokaliseren, omdat de
ruimtelijke referentie nooit verdwijnt (Spatial Memory, Laubheimer).
Wisselwerking Mens ↔ Product: De Radar
Onderstaande toont de navigatie-interactie als wisselwerking
(Mens-Product-Interactie model). Blauw = wat de mens doet (input), oranje = wat het
systeem teruggeeft (output). Het detailniveau is navigatie (Laag 2) —
micro-interacties en exacte timing volgen in Laag 3. Deze wisselwerking beschrijft de
Happy Path — voor de Error- en Partial-flows (Motion Blur, onbedoelde PiP-Tik)
zie de UI Stack hieronder en de Figma flowchart.
1
Activeer bezichtigingsmodus
Voordeur woning
Camera fullscreen + PiP mini-map verschijnt
De camera-feed neemt het volledige scherm in beslag. In de hoek
verschijnt een zwevende mini-map (Picture-in-Picture) met de 2D-plattegrond.
De plattegrond is direct zichtbaar — er is geen extra stap nodig om hem te openen.
Visueel: camera + PiP overlay
Spatial Memory (Laubheimer): referentie altijd aanwezig
2
Gebrek fotograferen
Keuken, bij het aanrecht
Foto opgeslagen + PiP mini-map pulseert
De foto wordt opgeslagen. De PiP mini-map pulseert
als visuele cue: "er is iets te doen op de kaart". Dit is de
signifier voor de volgende stap — de bezoeker weet dat hij nu de pin
moet plaatsen.
Visueel: pulsatie op PiP
Signifiers (Norman): pulsatie als uitnodiging tot actie
3
Pin plaatsen op plattegrond
Keuken (scherm in hand)
Plattegrond zoomt in + foto verschijnt als pin
De mini-map animeert vloeiend naar fullscreen via een
Spatial Transition. De foto verschijnt als pin op de geschatte locatie.
De bezoeker kan de pin verslepen naar de exacte positie als de automatische
plaatsing niet klopt.
Visueel: zoom-transitie + pin met foto-thumbnail
Recognition vs. Recall (Budiu): kaart toont visueel wáár
4
Bevestigen en terug naar camera
Keuken (scherm in hand)
Pin definitief + toast "✓ Opgeslagen" + terug naar camera
De pin wordt definitief geplaatst. Een toast-notificatie
bevestigt: "✓ Opgeslagen". De plattegrond zoomt terug naar PiP-formaat
en de camera-feed is weer fullscreen. De bezoeker is direct terug in de
bezichtiging — geen extra navigatie nodig.
Visueel: pin + toast + zoom-out
Feedback (Norman): dubbele bevestiging (visueel + tekst)
🔁
Loop 2–4 herhaalt zich per gebrek. De plattegrond verlaat nooit het scherm
(altijd als PiP aanwezig) — er is geen context-switch.
Samenvatting wisselwerking De Radar: Per gebrek: foto (1 tik) → tik op PiP
(1 tik) → bevestig pin (1 tik) = 3 navigatiestappen na de foto. De
plattegrond is continu zichtbaar als PiP — de gebruiker verliest nooit de ruimtelijke
referentie. De navigatie-frictie is minimaal, maar het risico is
fat-finger op het kleine PiP-element (zie UI Stack hieronder).
UI Stack in dit alternatief: Fysieke Context & Navigatie-Risico
De Context: Een bezichtiging is een zeer fysieke handeling. Mensen lopen, draaien, en
staan zelden stil.
Geteste Error State 1: "Te veel beweging, probeer opnieuw." Motion blur is de meest
voorkomende fysieke fout tijdens het rondlopen (Error Prevention, Nielsen #5).
Geteste Partial State 2: "Onbedoelde PiP-Tik" — de gebruiker tikt per ongeluk op de
zwevende mini-map, waardoor de kaart fullscreen inzoomt en de camera verdwijnt. Dit is een
navigatie-specifiek risico: een fat-finger op het kleine PiP-element veroorzaakt een ongewenste
modus-wissel. De recovery biedt een duidelijke "Terug naar camera"-knop (Nielsen #9: Help Users Recognize
and Recover from Errors).
Flowchart: Alt 1 — De Radar
▶
Klik om Figma flowchart te laden
De Radar — Flowchart
7.3 Lens 2: Cognitive Load & Flow (Sweller, Csikszentmihalyi)
De Theorie: Elke moduswissel of nieuw scherm voegt overbodige Extraneous Cognitive
Load toe (Sweller, 1988). Flow (Csikszentmihalyi) vereist minimale onderbrekingen. Daarnaast moet de
interface de Thumb Zone (Clark, 2015) respecteren voor eenhandig gebruik.
Vertaling naar Ontwerp
Elke moduswissel voegt frictie toe → oplossing: géén moduswissel. De plattegrond
is een persistente lade (zoals Apple Music) die je optrekt wanneer nodig — binnen duimbereik.
Het Ontwerp (Alt 2 — De Schuiflade): De plattegrond leeft als een Bottom Sheet (lade) die je
met een Swipe-omhoog over de camera-view heen trekt. De lade is geoptimaliseerd voor de Thumb Zone en werkt
offline-first.
De Hypothese: Als de plattegrond als lade binnen de camera-pagina blijft (zonder
context-switch), dan ervaart de gebruiker minder mentale belasting bij het wisselen, omdat er geen
Extraneous Cognitive Load wordt toegevoegd door een schermwissel (Sweller).
Wisselwerking Mens ↔ Product: De Schuiflade
Blauw = wat de mens doet (input), oranje = wat het systeem
teruggeeft (output). De Schuiflade onderscheidt zich door het swipe-gebaar als
navigatie-mechanisme — alles blijft binnen één scherm. Deze wisselwerking beschrijft de
Happy Path — voor de Error- en Partial-flows (Offline Scenario, onbedoelde Swipe-Up)
zie de UI Stack hieronder en de Figma flowchart.
1
Activeer bezichtigingsmodus
Voordeur woning
Camera fullscreen + lade-handle onderaan
De camera-feed neemt het volledige scherm in beslag. Onderaan
verschijnt een subtiele lade-handle (een horizontaal streepje) als
signifier: de plattegrond zit eronder verborgen. De plattegrond is
niet direct zichtbaar — in tegenstelling tot De Radar.
Visueel: camera + handle-signifier
Signifiers (Norman): handle communiceert verborgen functionaliteit
2
Gebrek fotograferen
Keuken, bij het aanrecht
Foto opgeslagen + lade-handle pulseert
De foto wordt opgeslagen. De lade-handle onderaan
pulseert kort als cue dat de plattegrond wacht. De camera blijft
actief — de bezichtiging wordt niet onderbroken.
Visueel: pulsatie op handle
Feedback (Norman): subtiele cue zonder flow-onderbreking
3
Plattegrond openen via lade
Keuken (scherm in hand)
Plattegrond schuift als Bottom Sheet over camera
De plattegrond schuift als Bottom Sheet omhoog
over de camera-feed. De camera is deels zichtbaar achter de lade — er is
geen volledige context-switch. De foto verschijnt als ongeplaatste pin die
de bezoeker op de juiste kamer kan tikken.
Visueel: lade-animatie + ongeplaatste pin
Flow (Csikszentmihalyi): camera blijft zichtbaar = continuïteit
4
Pin plaatsen en terug naar camera
Keuken (scherm in hand)
Pin geplaatst + lade schuift terug + toast "✓ Opgeslagen"
De pin wordt geplaatst bij de geselecteerde kamer. De lade
schuift automatisch terug naar de handle-positie. De camera-feed is
weer volledig zichtbaar. Een toast bevestigt: "✓ Opgeslagen". De bezoeker is
direct terug in de bezichtiging.
Visueel: pin + lade-animatie terug + toast
Feedback (Norman) + Flow (Csikszentmihalyi): automatisch terug naar camera
🔁
Loop 2–4 herhaalt zich per gebrek. De plattegrond is verborgen tot nodig
— minder visuele ruis dan De Radar, maar een extra gebaar (swipe) per cyclus.
Samenvatting wisselwerking De Schuiflade: Per gebrek: foto (1 tik) → swipe
omhoog (1 gebaar) → tik op kamer (1 tik) = 3 navigatiestappen na de foto.
De plattegrond is verborgen tot nodig, wat visuele rust biedt tijdens het
fotograferen. De navigatie-frictie is laag (swipe zit in duimzone), maar
het risico is een onbedoelde swipe-up die de lade opent (zie UI Stack hieronder).
UI Stack in dit alternatief: Infrastructurele Context & Navigatie-Risico
De Context: Woningen (vooral nieuwbouw met betonnen muren of kelders) hebben notoir
slechte 4G-dekking. Een cloud-afhankelijke app loopt hier direct vast.
Geteste Partial State 1: "Offline Modus. Recente data getoond" (Lokale Caching). Een
offline-first Partial State met lokale synchronisatie-queue voorkomt dat de flow breekt (CLT,
Sweller 1988).
Geteste Partial State 2: "Onbedoelde Swipe-Up" — de gebruiker swiped per ongeluk omhoog
(hetzelfde gebaar als scrollen), waardoor de lade opent en de sluiterknop blokkeert. Dit is een
navigatie-specifiek risico: een Gestural Conflict (Norman, 2013) waarbij één gesture meerdere
functies triggert. De recovery: swipe-down of tik op de camera-area sluit de lade.
Flowchart: Alt 2 — De Schuiflade
▶
Klik om Figma flowchart te laden
De Schuiflade — Flowchart
7.4 Lens 3: Spatial & Transitional Interfaces (D'Silva)
De Theorie: D'Silva stelt dat interfaces de z-as (diepte) kunnen gebruiken om een portaal of
modus-wissel expliciet voelbaar te maken. Een Spatial Transition communiceert: "je stapt nu een
andere wereld in." Dit ondersteunt het Mental Model van de gebruiker (Nielsen #2: Match Between System and the
Real World).
Vertaling naar Ontwerp
Theorie over 'portalen' en de z-as → wat als de overgang naar de camera letterlijk
voelt als een drempel overstappen? De 2D-plattegrond animeert weg en de camera-feed neemt het scherm over.
Bewuste modus-wissel in plaats van een onzichtbare knop.
Het Ontwerp (Alt 3 — De Drempel): De gebruiker begint bij de 2D-plattegrond (volledig
scherm) en tikt op een kamer (bijv. "Keuken"). Dit opent de camera via een bewuste Spatial Transition: de
plattegrond animeert naar achteren (z-as) en de camera-feed neemt het scherm over. Alle foto's worden
automatisch gekoppeld aan de geselecteerde kamer. Na de foto keert de animatie om en 'landt' de gebruiker
terug op de kaart, waar de foto zichtbaar is bij die kamer.
De Hypothese: Als de modus-wissel een bewuste Spatial Transition is (een mentaal
model van "door een deur stappen"), dan begrijpt de gebruiker beter in welke modus hij zich bevindt,
omdat de overgang het Mental Model expliciet ondersteunt (Nielsen #2, D'Silva).
Wisselwerking Mens ↔ Product: De Drempel
Blauw = wat de mens doet (input), oranje = wat het systeem
teruggeeft (output). De Drempel is fundamenteel anders: het startpunt is de
plattegrond (niet de camera), en de kamer wordt vóór het fotograferen
geselecteerd — niet erna. Deze wisselwerking beschrijft de
Happy Path — voor de Error- en Partial-flows (Permissie Geweigerd, Kamer-Vergeten)
zie de UI Stack hieronder en de Figma flowchart.
1
Activeer bezichtigingsmodus
Voordeur woning
Plattegrond fullscreen (niet de camera!)
In tegenstelling tot De Radar en De Schuiflade opent
De Drempel met de plattegrond als startpunt. De kamers zijn
tikbaar weergegeven. De camera is nog niet actief — de bezoeker
moet eerst kiezen welke kamer hij wil vastleggen.
Visueel: plattegrond fullscreen + tikbare kamers
Mental Model (Norman, Nielsen #2): plattegrond = het huis, kamers = deuren
2
⚡ De Drempel: kamer selecteren → camera opent
Hal / overzicht woning
Spatial Transition: plattegrond → camera via z-as
De plattegrond animeert naar achteren op de
z-as en de camera-feed neemt het scherm over. Bovenin verschijnt een
label: "📍 Keuken" — zodat de bezoeker weet in welke kamer-modus hij
zit. De transitie-animatie communiceert: "je bent nu een andere ruimte
binnengestapt."
Visueel: z-as animatie + kamerlabel bovenin
Spatial & Transitional (D'Silva): portaal-metafoor via diepte
3
Gebrek fotograferen (kamer al geselecteerd)
Keuken, bij het aanrecht
Foto opgeslagen + automatisch gekoppeld aan "Keuken"
De foto wordt opgeslagen en direct gekoppeld aan de
geselecteerde kamer. Een subtiele teller naast het kamerlabel
toont: "📍 Keuken (2 foto's)". Geen lade, geen PiP, geen extra
navigatie — de koppeling was al gemaakt bij de drempel.
Visueel: foto-teller bij kamerlabel
Feedback (Norman): teller bevestigt koppeling
4
Terug naar plattegrond (omgekeerde drempel)
Keuken (scherm in hand)
Omgekeerde Spatial Transition + foto-pins verschijnen bij kamer
De camera-feed animeert weg en de plattegrond keert terug
via de omgekeerde z-as transitie. De foto-pins verschijnen bij de
kamer "Keuken". De geselecteerde kamer pulseert kort zodat de bezoeker
direct ziet waar hij was — Recognition in plaats van Recall.
Visueel: omgekeerde z-as animatie + pulserende kamer + foto-pins
Recognition vs. Recall (Budiu): pulsatie voorkomt "welke kamer was het?"
🔁
Loop 2–4 herhaalt zich per kamer. Binnen een kamer kan de bezoeker meerdere
foto's maken (Loop 3 herhaalt) zonder extra navigatie. Pas bij een nieuwe kamer
doorloop je de drempel opnieuw.
Samenvatting wisselwerking De Drempel: Per kamer: kamer selecteren (1 tik) →
foto('s) maken (1+ tikken) → terug (1 tik) = 3 navigatiestappen per kamer.
Binnen een kamer is de frictie minimaal (alleen foto's maken). Maar elke
kamerwissel vereist een bewuste drempel-transitie — hogere Gulf of Execution
per switch, maar sterkere automatische koppeling foto↔kamer. Het risico is
kamer-vergeten na de transitie (zie UI Stack hieronder).
UI Stack in dit alternatief: Context-wissel (Permissie & Kamer-vergeten)
De Context: De camera-activatie is een bewuste stap, maar gebruikers weigeren soms
OS-permissies (privacy-zorgen). Bovendien selecteert de gebruiker de kamer vóórdat de camera opent
— na het fotograferen moet hij onthouden welke kamer hij had gekozen.
Geteste Error State 1: Harde OS-permissie flow ("Camera-toegang geweigerd. Open
Instellingen."). Gebaseerd op Permission Requests (Rosala, NNG, 2021).
Geteste Partial State 2: "Kamer-Vergeten na Transitie" — de gebruiker selecteert een kamer,
de z-as transitie opent de camera, hij maakt meerdere foto's, en bij de terugkeer naar de plattegrond weet
hij niet meer welke kamer hij had geselecteerd. Dit is een navigatie-specifiek risico dat alleen
bij De Drempel kan optreden: bij De Radar en De Schuiflade wordt de locatie na het fotograferen
gekozen, hier ervoor. De tijdskloof tussen selectie en terugkeer belast het werkgeheugen (Miller,
1956). De recovery: na terugkeer pulseert de geselecteerde kamer op de plattegrond en zoomt de kaart
automatisch in — Recognition in plaats van Recall.
Flowchart: Alt 3 — De Drempel
▶
Klik om Figma flowchart te laden
De Drempel — Flowchart
