CMD Cursus 7 — Ontwerpstudies & Detailontwerp

2. Alternatief A — Pin op de Plattegrond

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

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, zoekt hij op de plattegrond de keuken op, tikt op de geschatte locatie van het gebrek, en voegt via een tekstinvoerveld een korte beschrijving toe. 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.

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 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 2d 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 grote Gulf of Execution. De gebruiker staat fysiek in een 3D-kamer, maar moet mentaal navigeren naar een 2D-representatie. Deze cognitieve vertaalslag van 3D naar 2D zorgt voor frictie, precies op het moment dat de gebruiker al onder tijdsdruk staat. De kloof tussen intentie en de benodigde actie 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 duidelijk 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 van hoe de bezoeker de ruimte fysiek ervaart.
    Mental Models (Norman): het "pin-op-kaart" patroon sluit aan op bestaande mentale modellen. 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. 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". 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

Onderstaande toont de interactie als wisselwerking (Mens-Product-Interactie model): elke rij is een input-output uitwisseling. Blauw = wat de mens doet (input), oranje = wat het systeem teruggeeft (output). Bij Alt A herhaalt Loop 2–4 zich per gebrek dus bij 5 gebreken doorloop je deze wisselwerking 5×. De ⚠️ in Loop 2 geeft de cognitieve bottleneck aan: 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 oranje knop onderaan het scherm. Eén tik; er isgeen uitleg nodig.
Touch: 1 tik Duur: <Minder dan een seconde
📱
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)
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 (of langer) seconden (cognitief) Touch: scroll + 1 tik Gulf of Execution (Norman): groot 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 (25s per loop) 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: ~5 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 pins, 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 van 15 min bezichtiging (≈14%)

Storyboard (AI gegenereerd)

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

Theoretische afwegingen van dit alternatief voor het ontwerp

Waarom deze theorie relevant is

Aan de ene kant voorspelt Mental Models (Norman, 2013) dat het plattegrond-patroon maximale Learnability biedt want iedereen kent het "pin op kaart"-patroon. 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 maakt deze ''spanning'' zichtbaar: hoe ver kom je met een universeel begrepen patroon als de executie-kloof groot is?

De theorie van Recognition vs. Recall 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.

De waarde van deze aanpak zit ook in het feit dat het de ondergrens (het minimum) van Spatial Anchoring definieert. Als iets simpels als 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 een bewuste ontwerpkeuze die de waarde van de andere alternatieven 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.