![Page 1: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/1.jpg)
Konceptuell design
![Page 2: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/2.jpg)
Boken
• Kap 2.1-2.4
• Kap 11.3
![Page 3: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/3.jpg)
Konceptuell design…
• …är helt grundläggande inom interaktionsdesign
• …kan upplevas som abstrakt och svårt att förstå
• …förstås bäst genom att man utforskar och upplever denna designnivå på olika sätt
![Page 4: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/4.jpg)
Konceptuella modeller
![Page 5: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/5.jpg)
Konceptuell modell
• ”A high-level description of how a system is organized and operates”
• ”Enables designers to straighten out theirthinking before they start laying our theirwidgets”
![Page 6: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/6.jpg)
Mentala modeller
• Internal representations of reality that allowus to interact with the world
• Incomplete representations of reality
![Page 7: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/7.jpg)
Mentala och konceptuella modeller
Användar-gränssnitt
Designernsmentalamodell
System
Användarensmentalamodell
Systemetskonceptuella
modell
![Page 8: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/8.jpg)
SJ:s tågdörrar
Vi utformaren dörr somöppnas med en fotocell!
![Page 9: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/9.jpg)
...men folk begriper sig intepå fotoceller såvi gör en låtsas-knapp istället så
att de för in handen under
fotocellen !
Låtsasknapp
Dörr
![Page 10: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/10.jpg)
Användaren ser knappen och sluter sig till att dörren öppnas genom att man trycker på den
Låtsasknapp
Dörr
En knapp! Jag trycker på den såöppnas dörren!
![Page 11: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/11.jpg)
Ibland reagerar dock inte fotocellen…
Låtsasknapp
Dörr
Huh? Jag trycker men
inget händer? Gör jag fel? Ärdörren trasig?
![Page 12: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/12.jpg)
“Detta är en dörr med fotocellsom öppnas med en gest.”
Varför inte erbjuda en mer korrektkonceptuell modell från början?
![Page 13: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/13.jpg)
Donald Normans kylskåp
Donald Norman, The Design of
Everyday Things, sid. 13-17
![Page 14: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/14.jpg)
![Page 15: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/15.jpg)
“Kylskåpet har två separata kylsystem sombåda kan kontrolleras med var sitt reglage.”
Vilken konceptuell modell erbjuderdetta användargränsnitt?
![Page 16: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/16.jpg)
Användarens mentala modell
![Page 17: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/17.jpg)
Designerns mentala modell (av hur detta kylskåp bör fungera)
![Page 18: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/18.jpg)
Den mest kändakonceptuella modellen
“Att använda en dator är som att arbeta på kontor.”
![Page 19: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/19.jpg)
Nintendo Wii
• En konceptuell modell som bygger på TV-konceptet
![Page 20: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/20.jpg)
Diskussion
• På vilken konceptuell modell bygger de flestawebbutiker?
![Page 21: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/21.jpg)
Huvudkomponenterna i en konceptuell modell
• Metaforer (t ex bokmärken)
• Koncepten som användaren kommer interagera med (t ex spara, organisera)
• Inbördes förhållanden mellan dessa koncept (t ex hur viktig en handling är jämfört med en annan)
• Kopplingen mellan koncepten och den användarupplevelse produkten är tänkt att stödja
![Page 22: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/22.jpg)
Metaforer
![Page 23: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/23.jpg)
![Page 24: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/24.jpg)
Vad är en metafor?
Inom litteraturen: ”Min ros, jag älskar dig!”
Inom interaktionsdesing: konceptuella metaforer
![Page 25: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/25.jpg)
Definition
Mappning mellan två kognitiva domäner, en källdomän och en måldomän
Metafor MåldomänKälldomän
![Page 26: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/26.jpg)
Time Machine (Mac OS X)
![Page 27: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/27.jpg)
Varför metaforer?
Används i användargränssnitt för attunderlätta för användaren att förståmåldomänen.
Kunskap, erfarenheter och begrepp frånkälldomänen används för att organiserainnehållet i måldomänen.
En väl utformad metafor erbjuder användarenen god konceptuell modell.
![Page 28: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/28.jpg)
Problem med metaforer i användargränssnitt
![Page 29: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/29.jpg)
Gammal källdomän
En metafor som bygger på en gammal källdomän aktiverar lite eller ingen förkunskap hos yngre användare
![Page 30: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/30.jpg)
Aktiverar olämplig bakgrundskunskap i användarens mentala modell
![Page 31: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/31.jpg)
Hjälper inte användaren att hittatjänster som är datorspecifika
• Hur gör man en sökning i en bokhylla?
![Page 32: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/32.jpg)
Riskerar att bryta konventioner och kulturella regler
![Page 33: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/33.jpg)
De lider av den fysiskavärldens begränsningar
• Vad händer när bokhyllan blir full?
• Det går snabbare att hitta rätt bok med en lista.
![Page 34: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/34.jpg)
Begränsar fantasin hos designers attkomma på nya konceptuella modeller
Skrivbordsmetaforen är nästan 40 år gammal!
![Page 35: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/35.jpg)
... men ändå så kommeranvändargränssnitt förmodligen
bygga på metaforer för en lång tidframöver.
![Page 36: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/36.jpg)
Övning
• Ni ska utforma ett datorprogram för att lära 6-åringar matematik
• Vilken/vilka metaforer väljer ni till programmets användargränssnitt?
![Page 37: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/37.jpg)
En strukturerad process för att välja bra metaforer
1. Förstå vad produkten/tjänster ska kunna göra
2. Förstå vilka delar av produkten/tjänsten som är komplicerade och/eller kritiska
3. Generera metaforer
– Leta efter metaforer i användarnas beskrivningar
– Metaforer som redan används inom tillämpningsområdet
![Page 38: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/38.jpg)
Fem frågor vid utvärdering av metaforer
1. Hur mycket struktur tillhandahåller metaforen? En bra metafor ska tillhandahålla struktur och helst känd struktur.
2. Hur mycket av metaforen är relevant för problemet?
3. Är metaforen enkel att representera? 4. Kommer din publik att förstå metaforen?5. Hur utbyggbar är metaforen? Besitter den extra
aspekter som kan komma till användning senare?
![Page 39: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/39.jpg)
Övning
• Utvärdering av metafor till en delad reseplaneringstjänst
• Metafor: en tryckt resebroschyr
![Page 40: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/40.jpg)
1. Hur mycket struktur tillhandahåller metaforen?
• Den tillför struktur som är baserad på den kända pappersbaserade broschyren. Detta är en bok och har därför sidor, ett omslag, någon typ av bindning för att hålla ihop sidorna, ett index och en innehållsförteckning.
![Page 41: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/41.jpg)
2. Hur mycket av metaforen är relevant för problemet?
• Uppgifter om boende, tillgängliga faciliteter, karta över området och stödjande illustrationer är relevanta för reseplaneraren så innehållet i broschyren är relevant.
• Broschyrens fysiska struktur, t.ex. bladvändning, är mindre relevant.
• Reseplaneraren kan vara mer flexibel än broschyren och bör inte försöka efterlikna dess bokkaraktär.
• Slutligen trycks broschyren kanske en gång om året och kan inte hållas uppdaterad med de senaste ändringarna medan reseplaneraren bör kunna erbjuda den mest aktuella informationen.
![Page 42: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/42.jpg)
3. Är metaforen enkel att representera?
• Ja. Semesterinformation kan vara en uppsättning broschyrliknande sidor.
• Observera att detta inte är detsamma som att säga att navigering genom sidorna ska vara begränsad till sidvändning.
![Page 43: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/43.jpg)
4. Kommer din publik att förstå metaforen?
• Ja.
![Page 44: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/44.jpg)
5. Hur utbyggbar är metaforen?
• Funktionaliteten hos en pappersbaserad broschyr är tämligen begränsad.
• Men den är också en bok och vi skulle kunna låna funktioner från e-böcker (som också är kända föremål för de flesta i vår publik), så ja, den är utbyggbar.
![Page 45: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/45.jpg)
OBS! Sid 403 i boken
• Lämpliga metaforer
• Lämplig typ av interaktion
• Lämplig typ av användargränssnitt
Vi väntar med den konkreta interaktionen till nästa designnivå: Lo-fi prototyping
![Page 46: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/46.jpg)
Konceptuell design i projektet
• Systemets övergripande struktur• Systemets konceptuella modell• Metaforer• Gruppering av tjänster i naturliga grupper• Språkbruk/terminologi
På denna nivå ska ni börja ”utforska designrymden”, dvs. ni ska arbeta med flera olika alternativa lösningar (parallell design), genom att varje gruppmedlem tar fram var sitt designkoncept.
![Page 47: Konceptuell design - Lunds tekniska högskola...Konceptuella modeller Konceptuell modell • _A high-level description of how a system is organized and operates • _Enables designers](https://reader034.vdocuments.net/reader034/viewer/2022052014/602ba94f506a821b57154ed9/html5/thumbnails/47.jpg)
Tips från coachen
• Börja med en djupdykning i datan från användarstudien. Försök leva dig in i deras situation.
• Använd skisser, scenarios och storyboards för att ”utforska designrymden”.
• Använd card sorting method för att skapa naturliga grupper.
• Beskriv INTE din konceptuella design i termer av hårdvara/mjukvara.