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

BAlternatief B: Panorama Tap

Beschrijving van de interactie

Na de plattegrond-aanpak van Alt A wilde ik een andere richting verkennen die de kamer toont zoals je hem ziet, niet als abstracte kaart van bovenaf. Funda biedt bij veel woningen al 360°-foto's aan. Professioneel geschoten panorama's waarmee je vanuit één standpunt de hele kamer kunt rondkijken. Die data ligt er al.

Bij dit alternatief opent de bezoeker de 360°-foto's van de woning in de Funda-app, selecteert de kamer waar het gebrek zit, en navigeert door het panorama met swipes. Ziet hij de vochtplek? Dan tikt hij er gewoon op, in de 360°-foto. Er verschijnt een menu met drie opties (Vocht, Schade, Opmerking) en na selectie staat er een anker-icoon op die exacte plek in het panorama.

De interactie is egocentrisch (Klatzky, 1998): de bezoeker bekijkt de kamer vanuit het standpunt van de fotograaf, alsof hij er zelf staat. De interface IS de kamer en niet een abstracte plattegrond van bovenaf, maar de muren, het plafond, de vloer, precies zoals je ze ziet als je rondkijkt. Dat is wat d'Silva (2019) bedoelt met Spatial Interfaces: "A great spatial interface meets our expectations of a physical model."

Het verschil met Alt A is dat de Gulf of Execution aanzienlijk kleiner is. De bezoeker hoeft niet te navigeren op een abstracte 2D-kaart, maar ziet de kamer in perspectief en tikt op het gebrek. Er is wel een korte oriëntatiestap want je moet de juiste plek in het panorama vinden — maar die stap is intuïtief omdat de 360°-foto de kamer toont zoals je hem kent.

En thuis op de bank opent de bezoeker dezelfde 360°-foto's en ziet alle ankers op hun originele posities. De 360°-foto's zijn de ruimtelijke context professioneel geschoten, hoge resolutie, rijke visuele details. De bezoeker ziet het gebrek in de context van de kamer, en kan rondkijken om zich te oriënteren.

Theoretische onderbouwing

Direct Manipulation (Shneiderman, 1983)

Het kernidee blijft simpel: de beste interface is er eentje waarbij je het gevoel hebt dat je het ding zelf aanraakt. In dit alternatief tikt de gebruiker op het gebrek in het panorama. De actie is direct en herkenbaar: je wijst iets aan in een beeld dat de kamer toont zoals je hem ziet. Niet zo direct als tikken in een live camera-feed, maar aanzienlijk directer dan een pin plaatsen op een abstracte 2D-kaart.

Spatial Interfaces & Natural Mapping (d'Silva; Norman, 2013)

Norman schrijft over Natural Mapping: de relatie tussen wat je doet en wat er gebeurt moet zo direct mogelijk zijn. In de 360°-foto is die mapping sterk. De bezoeker ziet de keuken zoals hij die in het echt ziet: dezelfde muren, hetzelfde aanrecht, dezelfde hoek. Tikken op de vochtplek in het panorama = markeren van die plek. Er zit een kleine vertaalstap in want de bezoeker moet de plek in de foto matchen met wat hij in de echte kamer ziet, maar die stap is veel kleiner dan bij Alt A, omdat het perspectief overeenkomt.

Recognition vs. Recall & Dual Coding (Budiu, 2014; Paivio, 1991)

Het terugkijken via 360°-foto's combineert twee sterke geheugenprincipes. Ten eerste: Recognition want de bezoeker ziet het gebrek in de volledige visuele context van de kamer, niet als abstracte pin op een kaart. Ten tweede: Dual Coding want de 360°-navigatie activeert zowel het ruimtelijke geheugen (je draait door de kamer, oriënteert je) als het visuele geheugen (je ziet de muur, de tegels, het aanrecht). Die combinatie maakt de herinnering sterker dan bij een plattegrond (alleen ruimtelijk-abstract) of bij losse foto's (alleen visueel, zonder ruimtelijke navigatie).

Flow-behoud & fysieke belasting

De bezoeker hoeft de telefoon niet continu omhoog te houden. Er is geen camera die constant moet draaien. De bezoeker kijkt normaal rond in de kamer, pakt de telefoon erbij als hij een gebrek ziet, opent de 360°-foto, markeert het gebrek, en legt de telefoon weer weg. De Flow (Csikszentmihalyi) wordt kort onderbroken, maar niet permanent doorbroken. De bezichtiging blijft primair een fysieke ervaring, niet een scherm-ervaring.

Afhankelijkheid van bestaande data

De zwakte van dit alternatief is de afhankelijkheid van Funda's 360°-foto's. Niet alle woningen hebben ze. En de foto's zijn op een bepaald moment gemaakt dus als de eigenaar sindsdien heeft verbouwd of de vochtplek is nieuw, dan klopt de foto niet meer met de werkelijkheid. De bezoeker moet dan mentaal matchen: "Dit is de muur waar ik nu sta, maar in de foto staat er nog een kast." Die discrepantie kan verwarrend zijn.

Interactieve Flow (stap voor stap)

  1. Stap 1 — Woningpagina: De bezoeker opent de Funda-app en ziet de woningpagina. Naast de reguliere foto's en plattegrond staat een prominente sectie "360° Foto's 🔄" met thumbnail-previews per kamer. De 360°-icoon communiceert direct dat je een ruimtelijke ervaring kunt verwachten.
    Signifiers (Norman): de icoon en de kamer-thumbnails maken de beschikbare actie zichtbaar zonder uitleg.
  2. Stap 2 — Kamer selecteren: De bezoeker tikt op "360° Foto's". Een overzicht verschijnt met thumbnails per kamer (Keuken, Woonkamer, Badkamer, Slaapkamer). De bezoeker selecteert "Keuken" en de kamer waar hij zojuist de vochtplek zag. De thumbnails activeren herkenning: de bezoeker ziet welke kamer het is.
    Recognition (Budiu): de kamer-thumbnails activeren herkenning, niet actieve herinnering. De bezoeker hoeft niet te onthouden hoe de plattegrond eruitziet.
  3. Stap 3 — 360° viewer opent: Het fullscreen panorama van de keuken verschijnt. De bezoeker kan met swipes rondkijken: links, rechts, omhoog, omlaag. Een subtiel kompas-icoon bovenaan toont de kijkrichting. De bezoeker ziet de keuken vanuit een egocentrisch perspectief alsof hij er staat.
    Spatial Interfaces (d'Silva): de interface toont de ruimte zoals je hem ervaart. Egocentrisch perspectief (Klatzky, 1998) in tegenstelling tot Alt A's allocentrisch bovenaanzicht.
  4. Stap 4 — Gebrek spotten: De bezoeker swiped naar de muur naast het aanrecht en ziet de vochtplek in de 360°-foto. Hier is de korte oriëntatiestap: de bezoeker matcht wat hij in de echte kamer ziet met het panorama. Omdat de foto de kamer toont vanuit hetzelfde perspectief, is dit intuïtief.
    Natural Mapping (Norman): de 360°-foto toont de kamer zoals je hem ziet. De vertaalstap is klein want het is dezelfde muur, dezelfde hoek en dit is veel kleiner dan de 3D→2D vertaling bij Alt A.
  5. Stap 5 — Tik op het gebrek: De bezoeker tikt op de vochtplek in het panorama. Een subtiel crosshair verschijnt op het tikpunt en kleurt blauw. Een korte haptische trilling bevestigt de registratie.
    Direct Manipulation (Shneiderman): tikken OP het gebrek in het panorama. De Gulf of Execution is klein maar niet perfect 1:1 zoals in een live camera, maar veel kleiner dan bij Alt A.
  6. Stap 6 — Type selecteren: Rondom het tikpunt verschijnt een menu met drie opties: 💧 Vocht, 🔨 Schade, 👁️ Opmerking. De opties zitten rondom de exacte tiklocatie zodat de bezoeker niet hoeft weg te kijken.
    Fitts' Law: het menu verschijnt op het tikpunt, niet elders op het scherm. Minimale afstand tot de target.
  7. Stap 7 — Anker geplaatst: De bezoeker selecteert "💧 Vocht". Het menu verdwijnt, en op die plek verschijnt een blauw anker-icoon dat in het panorama blijft staan. Het beweegt mee als je verder swiped. Een toast bevestigt: "✅ Gelogd in Woning-dossier". Door naar het volgende gebrek, nul navigatie.
    Spatial Interface (d'Silva): het anker zit IN de ruimtelijke context. Feedback (Norman): toast + visueel anker bevestigen samen de actie.
  8. Stap 8 — Meer gebreken: In dezelfde 360°-foto of in een andere kamer kan de bezoeker meer gebreken markeren. Het patroon herhaalt zich identiek: swipe naar gebrek → tik → type → anker.
    Consistency (Nielsen): identiek herhalend patroon. De gebruiker leert het na één cyclus.
  9. Stap 9 — Thuis: 360° met ankers: Na de bezichtiging opent de bezoeker het woningdossier. De 360°-foto's zijn beschikbaar met alle ankers op hun originele posities. De bezoeker navigeert door het panorama en ziet precies waar elk gebrek zat en dit in de volledige visuele context van de kamer. De foto's zijn professioneel geschoten: hoge resolutie, goede belichting, rijke context.
    Recognition (Budiu): maximaal want de bezoeker ziet het gebrek in de volledige visuele + ruimtelijke context. Dual Coding (Paivio): ruimtelijke navigatie + visuele rijkheid gecombineerd.

Schetsen: Wisselwerking Mens ↔ Product

De wisselwerking bij Alt B draait om navigatie in bestaande 360°-foto's. De bezoeker hoeft geen eigen scan of foto te maken want het materiaal ligt er al. Per gebrek zijn dat 3 stappen (swipe naar plek + tik op gebrek + selecteer type).

🧑
Mens (Bezoeker)
wisselwerking
📱
Product (Funda 360°)
1
360° viewer openen + kamer selecteren📍 Keuken, bij het aanrecht
🧑
Input
Tik op "360° Foto's" → selecteer "Keuken"
De bezoeker ziet een vochtplek bij het aanrecht. Hij pakt de telefoon, opent de Funda-app, en tikt op de 360°-sectie. Hij selecteert "Keuken" uit de kamerlijst. De kamer-thumbnails activeren herkenning: de bezoeker ziet welke kamer het is, niet via een abstracte label maar via een foto.
Touch: 2–3 tikken Duur: ~3–5 seconden Recognition (Budiu): kamer-thumbnails
📱
Output
360° panorama van de keuken verschijnt
Het fullscreen panorama opent. De bezoeker ziet de keuken vanuit een egocentrisch perspectief alsof hij er staat. Een subtiel kompas-icoon toont de kijkrichting. De bezoeker kan met swipes rondkijken: links, rechts, omhoog, omlaag. Het perspectief komt overeen met hoe je de kamer in het echt ervaart.
Visueel: fullscreen panorama + kompas Spatial Interface (d'Silva): perspectief = de kamer Egocentrisch (Klatzky): vanuit eigen standpunt
Schets: Loop 1 — 360° viewer openen
2
Gebrek markeren in 360°-panorama📍 Keuken, muur naast aanrecht
🧑
Input
Swipe naar vochtplek + tik erop in panorama
De bezoeker swiped door het panorama naar de muur naast het aanrecht en ziet de vochtplek. Er is een korte oriëntatiestap: de bezoeker matcht wat hij in het echt ziet met het panorama. Omdat het perspectief overeenkomt, is dit intuïtief. De bezoeker tikt op het gebrek. De actie = de intentie.
Touch: swipe + 1 tik op gebrek Duur: ~3–5 seconden Direct Manipulation (Shneiderman): tikken OP het gebrek Natural Mapping (Norman): panorama ≈ echte kamer
📱
Output
Crosshair blauw + achtergrond dimt + trilling + menu
Een crosshair verschijnt op het tikpunt en kleurt blauw. De achtergrond dimt licht. Een haptische trilling bevestigt de registratie. Rondom het tikpunt verschijnt een menu met drie opties: 💧 Vocht, 🔨 Schade, 👁️ Opmerking. Het menu cirkelt rond de exacte tiklocatie zodat de bezoeker niet hoeft weg te kijken.
Visueel: crosshair + dim + menu Haptisch: trilling Fitts' Law: menu op tikpunt → minimale afstand
Schets: Loop 2 — Gebrek markeren in panorama
3
Type selecteren + anker plaatsen📍 Keuken (telefoon normaal vast)
🧑
Input
Tik op "💧 Vocht" in radiaal menu
De bezoeker selecteert het type gebrek met één tik op het juiste icoon. Het menu is rondom het tikpunt en de vinger hoeft nauwelijks te bewegen. Geen typen, geen tekstveld, geen toetsenbord. De totale input per gebrek bij Alt B is: swipe + 2 tikken (1× op gebrek, 1× op type). Vergelijk: Alt A vereist scroll + tik + typen + opslaan.
Touch: 1 tik Duur: <1 seconde Extraneous Load: minimaal (geen typen)
📱
Output
Anker geplaatst in panorama + toast "✅ Gelogd"
Het menu verdwijnt. Op de exacte plek verschijnt een blauw anker-icoon (💧) dat in het panorama blijft staan. Het beweegt mee als de bezoeker verder swiped. Een toast bevestigt: "✅ Gelogd in Woning-dossier". De bezoeker kan direct door naar het volgende gebrek in dezelfde 360°-foto of in een andere kamer. Nul navigatie.
Visueel: anker in panorama + toast Spatial Interface (d'Silva): anker IN de ruimtelijke context Feedback (Norman): toast + visueel anker
Schets: Loop 3 — Type selecteren + anker plaatsen
🔁 Loop 2–3 herhaalt zich per gebrek. Bij 5 gebreken = 5× deze wisselwerking. Per gebrek: swipe + 2 tikken (~5–8 seconden). De bezoeker houdt de telefoon normaal vast — geen arm omhoog, geen camera actief.
4
Terugkijken thuis via 360° met ankers📍 Thuis op de bank
🧑
Input
Open woningdossier → 360° foto's
De bezoeker opent thuis het woningdossier in de Funda-app en tikt op "360° Overzicht". De kernvraag: "Wat had ik allemaal gezien, en waar zat dat precies?"
Touch: 2 tikken (navigatie) Duur: ~3 seconden
📱
Output
360°-foto's met ankers op originele posities
De bezoeker opent de 360°-foto's en ziet alle ankers op hun originele posities in het panorama. Hij swiped door de kamer en ziet precies waar de vochtplek zat, in de volledige visuele context: de muur, het aanrecht ernaast, de kleur van de tegels. De foto's zijn professioneel geschoten in hoge resolutie, rijke context. Tikken op een anker toont het type en de kamer. Het verschil met Alt A: de context is visueel en ruimtelijk, niet abstract. Het verschil met Alt C: de context is navigeerbaar, niet een los fotoalbum.
Visueel: 360°-panorama + ankers Recognition (Budiu): maximaal — visuele + ruimtelijke context Dual Coding (Paivio): ruimtelijk + visueel gecombineerd
Schets: Loop 4 — Terugkijken thuis via 360°
Samenvatting wisselwerking Alt B: Per gebrek doorloopt de bezoeker 3 input-stappen (swipe naar plek + tik op gebrek + selecteer type) en ontvangt 2 output-stappen (crosshair+menu + anker+toast). De Gulf of Execution is klein. De totale interactietijd per gebrek is ~5–8 seconden. Na de bezichtiging kan de bezoeker thuis door dezelfde 360°-foto's navigeren met de ankers op hun originele posities. De sterkte is de combinatie van Direct Manipulation met visueel rijke Recognition thuis en het feit dat Funda de 360°-data al heeft. De zwakte is de afhankelijkheid van beschikbare 360°-foto's en mogelijke discrepanties tussen foto en werkelijkheid.
Markeren: ~40s actief bij 5 gebreken (telefoon normaal vast) | Terugkijken: 360° panorama thuis

Storyboard

Onderstaand storyboard toont de volledige interactieflow van Alt B: van het openen van de 360°-foto's tot het terugkijken van geplaatste ankers thuis.

Storyboard Alternatief B: Panorama Tap interactieflow

Waarde van dit alternatief voor het ontwerp

Waarom deze theorie relevant is

Alt B is gebouwd op het idee van Spatial Interface Design (d'Silva, 2016): als de representatie van de ruimte overeenkomt met hoe je de ruimte ervaart, dan valt de vertaalstap weg. Bij Alt A zagen we dat de 3D→2D vertaalslag (Gulf of Execution, Norman) de bottleneck is. Alt B pakt dat aan door de bezoeker in dezelfde visuele ruimte te laten werken. Daardoor wordt de executie-kloof een stuk kleiner want de bezoeker tikt gewoon op het gebrek dat hij ziet.

Direct Manipulation (Shneiderman, 1983) past hier goed bij omdat de interactie aan alle drie criteria voldoet: (1) je ziet het object continu, (2) je doet fysieke acties, en (3) je krijgt directe feedback. De bezoeker tikt op een vochtplek in de foto en niet op een abstracte kaart, niet via een camera, maar gewoon recht op het gebrek. Van de drie alternatieven is dit de meest directe manier van interactie.

Dual Coding Theory (Paivio, 1991) voorspelt dat de combinatie van ruimtelijke navigatie (swipen door de 360°-foto) én visuele context (het gebrek in hoge resolutie) een sterkere herinnering oplevert dan elk kanaal apart. Dit is relevant omdat het verklaart waarom het overzicht achteraf bij Alt B theoretisch sterker zou moeten zijn dan bij Alt A (alleen abstracte kaart) want de bezoeker navigeert thuis door dezelfde ruimte en ziet de ankers op hun originele posities.

Waarde voor het ontwerp

Alt B is het middenalternatief dat de balans zoekt tussen directheid en haalbaarheid. Het lost het kernprobleem van Alt A op (de 3D→2D vertaalslag) zonder de complexiteit van AR-technologie te introduceren. De 360°-foto's bestaan al op Funda en er hoeft geen nieuwe technologie te worden ontwikkeld, alleen een interactielaag bovenop bestaande media.

De unieke waarde is de egocentrische interface: de bezoeker ervaart de ruimte vanuit zijn eigen standpunt, niet vanuit een bovenperspectief. Dit sluit aan op het referentiekader van Klatzky (1998): egocentrische representaties matchen beter met de fysieke ervaring dan allocentrische. Het concept bewijst dat Spatial Anchoring niet afhankelijk is van de telefoon-camera (zoals bij Alt C), maar kan werken via bestaande professionele fotografie.

De zwaktes heb ik bewust benoemd: je bent afhankelijk van of er 360°-foto's op Funda staan, en foto's kunnen verouderd zijn na verbouwingen. Dat zijn dingen om mee te nemen naar de convergentie want ze bepalen wanneer dit alternatief wel en niet goed werkt.