Real Life Design Cases
description
Transcript of Real Life Design Cases
![Page 1: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/1.jpg)
1 65
Real Life Design Cases
Sus Lundgren
![Page 2: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/2.jpg)
2 65
On Design…“Design, by nature, is a series of trade-offs. Every choice has a good and bad side, and you make your choice in the context of overall criteria defined by necessity. Good and bad are not absolutes, however. A good decision in one context might be bad in another. ”
– Allen Holub
(”Why getter and setter methods are evil”)
http://www.javaworld.com/javaworld/jw-09-2003/
jw-0905-toolbox.html
![Page 3: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/3.jpg)
3 65
My Dragon’s Gold• Project at ITU, HCI-course
• Focus: The game as social context
• Scoring (ca 40)
![Page 4: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/4.jpg)
4 65
![Page 5: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/5.jpg)
5 65
![Page 6: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/6.jpg)
6 65
![Page 7: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/7.jpg)
7 65
![Page 8: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/8.jpg)
8 65
![Page 9: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/9.jpg)
9 65
![Page 10: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/10.jpg)
10 65
![Page 11: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/11.jpg)
11 65
![Page 12: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/12.jpg)
12 65
![Page 13: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/13.jpg)
13 65
Apple Instructions 1• Bruce Tognazzini, 1979, Apple II Plus
• Task: Find out if the user is using a color monitor
• Users: New owners, customers in computer stores, memebers in a class
• Test users: Customers in computer stores, non-computerists in a classroom environment, friends, relatives
![Page 14: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/14.jpg)
14 65
Iteration 1
Are you using a color TV on the Apple?
Undefined color graphic
![Page 15: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/15.jpg)
15 65
1st Iteration• Users didn’t know wheter they watched a
black-and-white TV or if the color was turned off
![Page 16: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/16.jpg)
16 65
Iteration 1
Is the picture above in color?
Undefined color graphic
![Page 17: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/17.jpg)
17 65
2nd Iteration• Again: Users didn’t know wheter the color
was turned off or not
![Page 18: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/18.jpg)
18 65
GREEN BLUE ORANGE MAGENTA
Are the above words in color?
![Page 19: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/19.jpg)
19 65
3rd Iteration• Failure rate:
– Color TV – users: None
– Black and white monitor users: none
– BUT…
![Page 20: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/20.jpg)
20 65
GREEN BLUE ORANGE MAGENTA
Are the above words in color?
![Page 21: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/21.jpg)
21 65
3rd Iteration• Failure rate:
– …green-screen monitor users: 100%
![Page 22: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/22.jpg)
22 65
GREEN BLUE ORANGE MAGENTA
Are the above words in more than one color?
![Page 23: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/23.jpg)
23 65
4th Iteration• Failure rate:
– Color TV – users: None
– Black and white monitor users: 20% however deliberately answering wrong
– BUT…
![Page 24: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/24.jpg)
24 65
GREEN BLUE ORANGE MAGENTA
Are the above words in more than one color?
![Page 25: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/25.jpg)
25 65
4th Iteration• Failure rate:
– …gren-screen monitor users: 50% black and green = 2 colors
![Page 26: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/26.jpg)
26 65
GREEN BLUE ORANGE MAGENTA
Are the words above in several different colors?
![Page 27: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/27.jpg)
27 65
5th Iteration• Failure rate:
– Color TV – users: None
– Black and white monitor users: 20%
– Green-screen-monitor users: 25%; misreading question: ”Are the words above several different colors”
![Page 28: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/28.jpg)
28 65
GREEN BLUE ORANGE MAGENTA
Do the words above appear in several different colors?
![Page 29: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/29.jpg)
29 65
6th Iteration• Failure rate:
– None! Hurra!
![Page 30: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/30.jpg)
30 65
MyTHeme• …on to seperate presentation… …in
Swedish
![Page 31: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/31.jpg)
31 65
Case: myTHeme
Sus Lundgren
![Page 32: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/32.jpg)
32 65
In this region a blood-thirsty troll terrorizes a small village. The villagers feel so threatened that they are afraid to tend to their crops. The closer Stefano the Stubborn gets to the village, the heavier the stench of the troll gets. Suddenly cracking noises are heard from the shrubbery that lines the path and the stinking beast emerges in front of our hero.
But instead of bravely facing the troll this time, perhaps in order to save his strength for more pressing matters, Stefano | cleverly decides to take a different route to avoid the | troll.
![Page 33: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/33.jpg)
33 65
As our hero walks along his path, he sees a leather pouch lying on the ground. The owner is nowhere to be seen, so he opens it and sees gold pieces sparkling inside. Thanking his luck, Stefano the Stubborn keeps the pouch and continues onward.
![Page 34: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/34.jpg)
34 65
Vad är myTHeme• ”A Storytelling game for non-storytellers”’
• Ett datorförstärkt kortspel
![Page 35: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/35.jpg)
35 65
Personer• Staffan Björk (PLAY/II) –
javaprogrammering spel(regel)design
• Jennica Falk (PLAY/II) – texter
• Sus Lundgren (PLAY/II) – spel(regel)design, grafisk design av kort & spelplan
• Karl Petter Åkesson (SICS) – hårdvara
• Divere annat löst folk– Jussi Holopainen (Nokia) – provspelande,
muntra tillrop, feedback
– Tobias Rydenhag – provspelande
– Johan Thoresson - provspelande
![Page 36: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/36.jpg)
36 65
Designprocess• Notech-iterationer
• Hitech-iterationer
• Demo i Stockholm
• Demo i Utrecht
![Page 37: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/37.jpg)
37 65
Så började det…
![Page 38: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/38.jpg)
38 65
Narrativa strukturer• Vad finns i en historia?
• Tretal vanliga, sju också ett vanligt tal
• Ett äventyr ofta en serie problem/lösningar och ibland konsekvenser av dessa
![Page 39: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/39.jpg)
39 65
Det första embryot till spelidé
• Det skulle handla om att få sina kort att ingå i det som blir den ”riktiga” historien;– hela tiden kan det finnas upp till tre
tänkbara förlopp som konkurrerar
• Ett förlopp blir ”sant” så snart det har ”jämna par” problems/solutions och ett resultat– Men det kan finnas upp till tre problem-
solution-par i en ”tråd” alltså max sju kort i en tråd (resultatet är ju ett kort också)
• Man får poäng för att matcha teman och symboler
![Page 40: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/40.jpg)
40 65
Grafisk Design del 1• Det fanns fyra sorters kort
– Problems, Solutions, Results, Conclusion
• Varje kort har alltså följande egenskaper:– Namn (”Drake”, ”Häxa”,
”Bro”,”Förtvivlan”)
– Tema (Episkt, komiskt eller tragiskt)
– Symbol (enbart till för poängräkning; flera kort med samma symbol i en följd ger poäng)
– Typ (Problem, Solution, Result)• Variant: Problems & Solution kunde handla
om Enemies/Physical obstacles/Psychological problems
• Hur ser den grafiska designen ut då?
![Page 41: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/41.jpg)
41 65
![Page 42: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/42.jpg)
42 65
Fysisk spelplan
![Page 43: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/43.jpg)
43 65
Provspel visade att…• Alldeles för komplext med fyra färger och
fyra symboler
• Vi fick aldrig till budgivningsfasen
• Det var oklart vem som spelat vilket kort
• Det var svårt att se skillnad på typerna av kort, var de problem eller solutions och av vilken typ?
• En feature att man kunde se färgen på ett kort även på baksidan– Kunde se vilka färger motståndarna hade
– Kunde se vilken färg man drog
![Page 44: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/44.jpg)
44 65
![Page 45: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/45.jpg)
45 65
![Page 46: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/46.jpg)
46 65
Fysisk spelplan
![Page 47: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/47.jpg)
47 65
Sen kom verkligheten• Bra spel men svårt att stödja rent tekniskt
• Verklighet: 1 RFID-läsare per substory– Påverkade reglerna!
• RFID-taggningen påverkade också kortens storlek
![Page 48: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/48.jpg)
48 65
Om texterna• Texterna definierade de tre teman (färger)
som kom att finnas: epic, tragic, comic
• Som sagt; tre typer av problem-lösningar; fiender, fysiska hinder och psykologiska hinder
![Page 49: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/49.jpg)
49 65
Ett ”Problem” ... <variants>
loud savage hulking enormous menacing green
</variants>
<type>
Obstacle
</type>
<class>
Opponent
</class>
<activated>
<default>
And as the tales have been told, just as the air fills with the sound of booming footsteps, something rather large is approaching - a $variant$ giant!
</default>
</activated>
<waiting>
Suddenly the ground shakes and tremors violently…,
</waiting>
...
![Page 50: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/50.jpg)
50 65
En ”Solution”...
<variants>
strangles punches tackles beats figths strikes battles combats chokes
</variants>
<type>
Solution
</type>
<class>
Opponent
</class>
<activated>
<default>
Mustering great courage and strength the hero $variant$ the life out of the $obstaclename$.
</default>
</activated>
...
![Page 51: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/51.jpg)
51 65
Texter matchning• 3 x 6 kort av varje Problem 3 x 6 kort
som var Solutions
• Alla måste matcha alla!– Inte så stort problem för Enemies &
Psychological Problems
– Problem: öken – Solution: rep
• Vad göra?
![Page 52: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/52.jpg)
52 65
Texter matchning• ”Fluffiga” Solutions
– Struggle
– Endurance
– Toil
– Luck
– Vision
– Unexpected Help
– …
• Svåra att rita…
![Page 53: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/53.jpg)
53 65
Spelplanen• Skulle visa
– De pågående historierna
– Den redan skrivna historien
– Poäng
– Inventory
– …
![Page 54: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/54.jpg)
54 65
Spelplanen
![Page 55: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/55.jpg)
55 65
Problem• För ont om plats!
– Waiting texts
• 72 dpi är 72 dpi är 72 dpi…
• Ledde till skapandet av Control Cards
![Page 56: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/56.jpg)
56 65
• Results – inventorysaker som automatiskt användes vid passande kort
• Hjältar/hjältinnor infördes
• Förslag på att dela upp spelplanen i två
• Jokerkort som alltid kan spelas
• Nya kort
• Ange namn på spelare
• Massor med nya idéer på hur spelet tar slut
Vidareutvecklingar efter speltest
![Page 57: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/57.jpg)
57 65
BIG ISSUE• Att korten måste spelas i rätt ordning
• Påverkade speltaktiken negativt
• Påverkade spelplansdesignen positivt
• Påverkade textskrivandet
![Page 58: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/58.jpg)
58 65
Lärdomar…• Allt påverkar vartannat!
• Datorförstärkning ger helt nya möjligheter inom speldesign– (vill ni veta mer om just det kan ni läsa mitt
exjobb…)
![Page 59: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/59.jpg)
59 65
Linuxnyheter
![Page 60: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/60.jpg)
60 65
Linuxnyheter• Linuxnyheter was a website with news
about Linux and Open Source
• Linuxnyheter was targeted towards executives and IT-managers
• Goal: Marketing, increasing reliability, goodwill, sales
• Design Reusability
![Page 61: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/61.jpg)
61 65
![Page 62: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/62.jpg)
62 65
![Page 63: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/63.jpg)
63 65
![Page 64: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/64.jpg)
64 65
![Page 65: Real Life Design Cases](https://reader035.fdocuments.us/reader035/viewer/2022062519/568153f2550346895dc1f3ec/html5/thumbnails/65.jpg)
65 65
Bôs• Presentationer på onsdag
– Börjar 09.00
– Redovisningsordning: 12, 11, 10, 9, 8, 7, 6, 5, 4 ,3, 2, 1
• De individuella projekten
• Handleding