CMD Cursus 7 — Ontwerpstudies & Detailontwerp

Spatial Anchor

Een methodologische ontwerpstudie over het verlagen van cognitive load tijdens woningbezichtigingen door middel van ruimtelijke verankering van observaties.

OntwerperJoran Kooij
BewijslastLUK 7.2.3
ExpertsFrans
CaseFunda — Bezichtigingen

AAlternatief A: Pin op de Plattegrond

Beschrijving van de interactie

Dit is het alternatief dat het dichtst bij een "normale" app-ervaring komt. De bezoeker opent tijdens de bezichtiging de Funda-app en navigeert naar een interactieve 2D-plattegrond van de woning. De plattegrond toont een bovenaanzicht met kamerlabels (Woonkamer, Keuken, Slaapkamer 1, etc.). Wanneer de bezoeker een gebrek observeert, bijvoorbeeld een vochtplek in de keuken, zoekt hij op de plattegrond de keuken op, tikt op de geschatte locatie van de vochtplek, en voegt via een tekstinvoerveld een korte beschrijving toe ("Vochtplek naast het aanrecht"). Na het opslaan verschijnt er een gekleurde pin op de plattegrond. Na de bezichtiging kan de bezoeker alle geplaatste pins terugzien op de plattegrond als een visueel overzicht.

De interactie is allocentrisch (Klatzky, 1998): de bezoeker kijkt van bovenaf naar de plattegrond. Dat voelt intuïtief, maar je verliest daarmee de "ik sta in die kamer" beleving. Het is alsof je op Google Maps een restaurant zoekt in plaats van er zelf te staan.

Theoretische onderbouwing

Mental Models (Norman, 2013)

De plattegrond-interactie leunt op het mentale model van "pinnen op een kaart". Denk aan Google Maps, Apple Kaarten. Dit maximaliseert de Learnability: de bezoeker hoeft geen nieuw interactiepatroon te leren, omdat het patroon al duizenden keren is gebruikt in andere contexten. Het conceptueel model (Norman) sluit naadloos aan op het mentale model van de bezoeker.

Recognition vs. Recall (Nielsen, 1994; Budiu, 2014)

De plattegrond fungeert als visuele context. Door de kamerlabels en de ruimtelijke indeling te zien, hoeft de bezoeker niet puur uit het geheugen te werken. De extraneous cognitive load (Sweller, 1988; Whitenton, 2013) wordt verlaagd: de plattegrond activeert herkenning ("Ah ja, de keuken was hier") in plaats van actieve herinnering. De herkenning is wel indirect: je herkent een abstracte kaart, niet het gebrek zelf. Dat is een belangrijk verschil waar ik later op terugkom.

Gulf of Execution (Norman, 2013)

Hoewel het patroon bekend is, ontstaat er een significante Gulf of Execution. De gebruiker staat fysiek in een 3D-kamer, maar moet mentaal navigeren naar een 2D-representatie: "Ik sta hier bij het aanrecht, dus dat is... dáár op het scherm". Deze cognitieve vertaalslag van 3D naar 2D introduceert frictie, precies op het moment dat de gebruiker al onder tijdsdruk staat. De kloof tussen intentie ("ik wil dit gebrek markeren") en de benodigde actie (mentaal GPS-en op een plattegrond) is onnodig groot.

Interactieve Flow (stap voor stap)

  1. Stap 1 — Funda Woningpagina: De bezoeker opent de Funda-app en bekijkt de woningpagina van het huis dat bezichtigd wordt. Foto's, prijs, en basisinformatie zijn zichtbaar. De "Start Bezichtiging" knop is prominent zichtbaar onderaan.
    Signifiers (Norman): de knop communiceert direct de beschikbare actie.
  2. Stap 2 — Start Bezichtiging: De bezoeker tikt op de knop "Start Bezichtiging". De app schakelt over naar de bezichtigingsmodus met een fade-transitie.
    Feedback Principle (Norman): de transitie-animatie bevestigt dat de modus is gewijzigd.
  3. Stap 3 — Plattegrond verschijnt: Een interactieve 2D-plattegrond van de woning verschijnt. Kamers zijn gelabeld (Woonkamer, Keuken, Hal, WC). De bezoeker ziet het volledige huis in bovenaanzicht. Dit is een allocentrisch perspectief: het verschilt fundamenteel van hoe de bezoeker de ruimte fysiek ervaart.
    Mental Models (Norman): het "pin-op-kaart" patroon sluit aan op bestaande mentale modellen (Google Maps). Learnability is hoog.
  4. Stap 4 — Gebruiker observeert gebrek: De bezoeker loopt fysiek door de keuken en ziet een vochtplek naast het aanrecht. De bezoeker moet nu de telefoon erbij pakken, hier begint de Flow-onderbreking: het rondkijken stopt, de aandacht verschuift naar het scherm.
    Flow-onderbreking (Csikszentmihalyi): de bezichtiging wordt onderbroken door telefoongebruik. Context-switch van fysieke ruimte naar digitaal scherm.
  5. Stap 5 — Locatie zoeken op plattegrond: De bezoeker zoekt op de 2D-plattegrond waar de keuken is. Er vindt een mentale 3D-naar-2D vertaling plaats: "Ik sta hier bij het aanrecht, dat is... dáár op de plattegrond." De bezoeker scrollt en oriënteert zich. Deze stap kost 5-10 seconden cognitieve verwerking.
    ⚠️ Gulf of Execution (Norman): de kloof tussen de intentie ("markeer dit gebrek") en de benodigde actie (navigeer een abstracte kaart) is hier het grootst. De 3D→2D vertaling is de zwakte van dit alternatief.
  6. Stap 6 — Tik op locatie: De bezoeker tikt op de geschatte plek op de plattegrond. Een invoerveld schuift omhoog met de vraag: "Beschrijf het gebrek..." Het tikpunt wordt gemarkeerd met een pulserende stip.
    Perceived Affordance (Norman): het invoerveld verschijnt als directe reactie op de tik, de signifier communiceert wat er nu verwacht wordt.
  7. Stap 7 — Typ beschrijving: De bezoeker typt: "Vochtplek naast het aanrecht, ca. 20cm doorsnee". Het toetsenbord neemt het onderste 50% van het scherm in beslag. De plattegrond is nauwelijks meer zichtbaar. De bezoeker kijkt naar het scherm, niet naar de kamer, de bezichtiging is volledig gepauzeerd.
    Extraneous Cognitive Load (Whitenton): het typen en tegelijk proberen te onthouden wat je zag voegt onnodige belasting toe. Het toetsenbord blokkeert bovendien de visuele context van de plattegrond.
  8. Stap 8 — Pin geplaatst: Na het opslaan verschijnt een gekleurde pin (💧) op de plattegrond met een label. Een toast-notificatie schuift omhoog: "✓ Opgeslagen". Het toetsenbord verdwijnt. De plattegrond is weer volledig zichtbaar.
    Feedback (Norman): de toast en de visuele pin bevestigen samen dat de actie is voltooid. Dubbele feedback (visueel + tekst) versterkt het gevoel van controle.
  9. Stap 9 — Overzicht na bezichtiging: Na de bezichtiging toont de app alle geplaatste pins op de plattegrond. De bezoeker kan elk pin-label aantikken om de beschrijving terug te lezen. De pins zijn gegroepeerd per kamer door hun positie op de kaart.
    Recognition vs. Recall (Nielsen/Budiu): de plattegrond met pins activeert herkenning ("Ah ja, de keuken was hier"). Maar de Recognition is indirect want de bezoeker herkent een abstracte kaart, niet het gebrek zelf.

Schetsen: Wisselwerking Mens ↔ Product

Onderstaand diagram toont de interactie als wisselwerking (Mens-Product-Interactie model, HAN): elke rij is een input-output uitwisseling. Blauw = wat de mens doet (input), oranje = wat het systeem teruggeeft (output). Let op: bij Alt A herhaalt Loop 2–4 zich per gebrek — bij 5 gebreken doorloop je deze wisselwerking 5×. De ⚠️ in Loop 2 markeert de cognitieve bottleneck: de 3D→2D mentale vertaalslag.

🧑
Mens (Bezoeker)
wisselwerking
📱
Product (Funda App)
1
Opstarten bezichtigingsmodus 📍 Voordeur woning
🧑
Input
Tik op "Start Bezichtiging"
De bezoeker staat bij de voordeur, opent de Funda-app op de woningpagina, en tikt op de prominente oranje knop onderaan het scherm. Eén tik en geen uitleg nodig.
Touch: 1 tik Duur: <1 seconde Signifiers (Norman)
📱
Output
2D plattegrond verschijnt
De app schakelt naar bezichtigingsmodus. Een interactieve 2D-plattegrond toont het bovenaanzicht van de woning met kamerlabels (Woonkamer, Keuken, Hal, WC). De bezoeker ziet de ruimte allocentrisch vanuit een extern vogelperspectief, niet vanuit eigen oogpunt.
Visueel: plattegrond + labels Mental Models (Norman): Google Maps-patroon
Schets: Loop 1 — Opstarten bezichtigingsmodus
2
⚠️ Mentale vertaalslag: 3D ruimte → 2D kaart 📍 Keuken, bij het aanrecht
🧑
Input
⚠️ Zoek locatie op plattegrond (3D→2D vertaling)
De bezoeker ziet een vochtplek naast het aanrecht. Nu pakt hij de telefoon. De Flow breekt: hij stopt met rondkijken en kijkt naar het scherm. Hij moet mentaal navigeren: "Ik sta hier bij het aanrecht, dus dat is… dáár op de plattegrond." De bezoeker scrollt, oriënteert zich, en tikt op de geschatte plek.
⚠️ Flow-onderbreking Duur: 5–10 seconden (cognitief) Touch: scroll + 1 tik Gulf of Execution (Norman): maximaal Context-switch: fysiek → digitaal
📱
Output
Invoerveld verschijnt
Na de tik verschijnt een pulserende stip op het tikpunt. Een invoerveld schuift omhoog met de vraag: "Beschrijf het gebrek...". De plattegrond blijft zichtbaar boven het invoerveld, maar krimpt. Het systeem reageert direct op de tik, perceived affordance is correct: de actie leverde het verwachte resultaat.
Visueel: stip + invoerveld Perceived Affordance (Norman)
Schets: Loop 2 — Mentale vertaalslag 3D→2D
3
Beschrijving invoeren + opslaan 📍 Keuken (scherm in hand)
🧑
Input
Typ beschrijving + tik "Opslaan"
De bezoeker typt: "Vochtplek naast het aanrecht, ca. 20cm doorsnee". Het toetsenbord neemt 50% van het scherm in beslag en de plattegrond is nauwelijks meer zichtbaar. De bezoeker kijkt volledig naar het scherm, niet naar de kamer. De bezichtiging is gepauzeerd. Na het typen tikt hij op "Opslaan".
⚠️ Bezichtiging volledig gepauzeerd Duur: 8–12 seconden (typen) Touch: typen + 1 tik Extraneous Cognitive Load (Whitenton)
📱
Output
Pin geplaatst + toast "✓ Opgeslagen"
Na opslaan verdwijnt het toetsenbord. Een gekleurde pin (💧) verschijnt op de plattegrond. Een toast-notificatie schuift omhoog: "✓ Opgeslagen". Dubbele feedback: de pin is visueel permanent, de toast is tijdelijk tekstueel. Samen geven ze het gevoel van controle.
Visueel: pin + toast Feedback Principle (Norman): dubbel kanaal
Schets: Loop 3 — Beschrijving invoeren + opslaan
🔁 Loop 2–3 herhaalt zich per gebrek. Bij 5 gebreken = 5× deze wisselwerking. Totale interactietijd: 5 × ~25s = ~2 min actief schermgebruik van een 15-minuten bezichtiging.
4
Overzicht na bezichtiging 📍 Buiten / thuis
🧑
Input
Open overzicht
Na de bezichtiging opent de bezoeker de Funda-app en navigeert naar het woningdossier. De bezoeker wil alle observaties terugzien, de kernvraag is: "Wat heb ik allemaal gezien, en waar was dat?"
Touch: 2 tikken (navigatie) Duur: ~3 seconden
📱
Output
Plattegrond met alle pins
De plattegrond toont alle geplaatste pins, gegroepeerd per kamer door hun ruimtelijke positie. De bezoeker tikt op een pin om de beschrijving terug te lezen. De herkenning is indirect: de bezoeker herkent een abstracte kaart met symbolen, niet het gebrek zelf. "Ah ja, de keuken was hier", maar de bezoeker ziet geen foto, geen visuele context van het gebrek.
Visueel: kaart + pin-labels Recognition vs. Recall (Budiu): indirect ⚠️ Geen visuele context van het gebrek zelf
Schets: Loop 4 — Overzicht na bezichtiging
Samenvatting wisselwerking Alt A: Per gebrek doorloopt de bezoeker 3 input-stappen (locatie zoeken + tikken + typen) en ontvangt 3 output-stappen (plattegrond + invoerveld + pin+toast). De bottleneck zit in Loop 2: de mentale 3D→2D vertaalslag kost 5–10 seconden cognitieve verwerking per gebrek, precies op het moment dat de bezoeker al onder tijdsdruk staat. De totale interactietijd per gebrek is ~25 seconden.
Totale schermtijd bij 5 gebreken: ~2 min 5s van 15 min bezichtiging (≈14%)

Storyboard

Onderstaand storyboard toont de volledige interactieflow van Alt A: van het openen van de plattegrond tot het terugkijken van geplaatste pins na de bezichtiging.

Storyboard Alternatief A: Pin op de Plattegrond interactieflow

Waarde van dit alternatief voor het ontwerp

Waarom deze theorie relevant is

Dit alternatief is bewust ontworpen vanuit de spanning tussen twee theoretische kaders. Aan de ene kant voorspelt Mental Models (Norman, 2013) dat het plattegrond-patroon maximale Learnability biedt want iedereen kent het "pin op kaart"-patroon van Google Maps. Aan de andere kant voorspelt Gulf of Execution (Norman, 2013) dat de 3D-naar-2D vertaalslag cognitieve frictie oplevert, precies op het moment dat de bezoeker al onder tijdsdruk staat. Alt A is ontworpen om deze spanning zichtbaar te maken: hoe ver kom je met een universeel begrepen patroon als de executie-kloof groot is?

De theorie van Recognition vs. Recall (Budiu, 2014) is hier relevant omdat de plattegrond een indirecte vorm van herkenning biedt want de bezoeker herkent een abstracte kaart, niet het gebrek zelf. Dat is precies het verschil met Alt B (ruimtelijke herkenning) en Alt C (fotografische herkenning) en daardoor wordt de vergelijking tussen de drie ook echt zinvol.

Waarde voor het ontwerp

Alt A is als de baseline van de ontwerpstudie. Het maximaliseert technische haalbaarheid want Funda beschikt al over plattegronden bij veel woningen, dus de data-infrastructuur bestaat al en dus de universele begrijpelijkheid.

De waarde van deze aanpak is dat het de ondergrens van Spatial Anchoring definieert. Als zelfs een plattegrond al helpt om observaties te verankeren (ondanks de cognitieve vertaalslag), dan bevestigt dat het kernprincipe van Spatial Anchoring. Tegelijk legt Alt A precies bloot waar de opportunity zit voor de andere alternatieven: de 3D→2D vertaalslag in Loop 2 kost 5-10 seconden per gebrek. Dat is de ontwerpruimte die Alt B en C proberen te elimineren.

De zwakte van de cognitieve vertaalslag is dus geen falen, maar een bewuste ontwerpkeuze die de waarde van de andere alternatieven pas zichtbaar maakt. Zonder Alt A als referentiepunt kun je niet goed beoordelen wat 360°-navigatie (Alt B) of camera-first interactie (Alt C) nou eigenlijk beter doet.