Filmtajm Designmetoder! The Exciter:! http://www.youtube.com/watch?v=pycycosopfq INTERAKTIVA SYSTEM Mattias Arvola Institutionen för datavetenskap 2 Dagens föreläsning!konceptdesign!detaljdesign med planering av prototyp och wireframes Konceptdesign 3 Divergens! På konceptnivå! Olika syften! Olika målgrupper! Olika brukssituationer! Olika sorts produkter/ tjänster! Olika användarupplevelser! Olika funktioner och innehåll! På detaljnivå! Olika informationsarkitektur (layout, navigationsstruktur, informationsgrupper)! Olika interaktionstekniker (vad användaren gör och vad systemet svarar)! Olika look & feel Funktionsdriven divergens Man ska kunna: Titta film Kommunicera med andra Hitta rätt Kontrollera vad barnen gör Spela spel 5 6
7 Kommunicera med andra Kommunicera med andra Titta film Hitta rätt Titta film Hitta rätt Spela spel Kontrollera vad barnen gör Spela spel Kontrollera vad barnen gör 8 Metafordriven divergens Det ska vara som en/ett: Medium Verktyg Medium Dröm Person Spel Verktyg Dröm Spel Person 9 10 Kvalitetsdriven divergens Det ska vara: Medium Verktyg Dröm Upptäckarlusta Stämningsfullt Fantasifullt Överraskande Suggestivt Spel Person 11 12
13 Stämningsfullt Stämningsfullt Upptäckarlusta Fantasifullt Upptäckarlusta Fantasifullt Suggestivt Överraskande Suggestivt Överraskande 14 Brainstorming Brainstorming forts.! Förberedelse! Ha allt forskningmaterial och problemformuleringar till hands och inom synhåll. (På väggarna?)! Whiteboard (eller en gigantisk pappersrulle), pennor (olika färger och sorter), gula lappar, och tomma stora pappersark.! Uppvärmning! Börja med att göra något roligt kring det som projektet handlar om. Vad är mindre viktigt, men händer, munläder, och huvud ska sättas igång i att skapa idéer. 15 16 Brainstorming forts. Brainstorming forts.! Genomförande! Avsätt 2 timmar för att generera så många idéer och varianter på idéer som möjligt.! Säg inte nej! Var fokuserad och lägg sidospår åt sidan! Stanna inte länge på en idé. Fler är bättre.! Använd hela rummet. Att se idéer ger nya idéer! (re-)invention! Ställ frågor som: vad påminner den här produkten om? vad påminner den inte om?! Byt perspektiv: se datorn som ett medium, ett verktyg, en byggnad, ett system, en tanke, ett spel, en handling, en chock, en vision, en mardröm. Hur skulle produkten eller tjänsten te sig om det var alla dessa olika saker?! Gruppera idéerna och namnge grupperna! Gör en brainstorming enligt ovanstående metod för ert grupparbete! 17 18
Definiera designmål och kriterier! För vem är designen? Målen/kriterierna ska vara grundade i er persona! I vilka situationer ska den användas?! Varför, varför, varför?! Användningen av produkten ska upplevas som! Tänk igenom praktiska, kommunikativa, organisatoriska, estetiska, etiska, och tekniska aspekter och konsekvenser. 2011-03-09 Datorförstärkta landskap Målträd version 01 Glädjande Lek Suggestivt Upptäckter Stämning Fantasi Överraskningar 19 20 Konceptformulär Konceptbild 1! http://www.ida.liu.se/~matar/konceptformular.pdf Genom mobilen kan guidedeltagarna se guidens virtuella sidekick. I Vimmerby skulle den kunna utgöras av t.ex. en rumpnisse, som lämpligt nog ständigt frågar varför då då? och ger guiden tillfälle att förklara vidare om det ena och det andra. 21 22 Konceptbild 2 En funktion som gör att du på vissa utvalda ställen kan rikta mobilkameran mot en vy och få upp ett tidsfilter. Filtret visar hur platsen man filmar antas ha sett ut förr i tiden. Genom att dra i ett reglage kan man se hur vyn skulle ha sett ut från istiden, fram till nutid. Konceptbild 3 Guiden använder sin mobil för att broadcasta film till gruppdeltagarnas mobiltelefoner. Det kan vara förinspelade temarelaterade filmsnuttar eller direktsänt från guidens mobilkamera. På så sätt kan även de som hamnar längst bak i större sällskap se tydligt vad det är guiden pratar om. Det ger guiden möjlighet att peka ut detaljer och att visa saker som inte kan ses med blotta ögat. 23 24
Scenarios Storyboarding på konceptnivå När Yngve och Marianne äter sin första hotellfrukost i Vimmerby diskuterar de vad de ska göra under dagen. De tänker starta på Nääs, promenera runt lite i staden och sedan ta bilen för att titta på omgivningarna. De kollar vilka platser som är inkluderade i mobilapplikationen och beslutar sig för att helt enkelt lägga upp rutten efter dem. Det visar sig att även flera byggnader och platser inne i stadskärnan är inkluderade i applikationen så när de är färdiga på Näs aktiverar Yngve appen. Visa & berätta: En funktion för guider som vill kunna visa på sådant som ej är synligt för blotta ögat. T.ex. dolda processer, globala system eller bara hur en växt ser ut under en annan årstid. 25 26 När guiden vill att gruppen ska kunna se någonting via sina telefoner plockar han/hon fram en grafisk tag. Användarna riktar telefonens kamera mot tagen för att aktivera det guiden vill visa. På mobilens display syns då både det kameran filmar och det objekt eller animation som guiden vill visa. För att ändra på bilden eller i animationen som visas kan guiden byta ut eller lägga till en ny tag. 27 28 Konceptval med Pugh-charts! Konsensus om kriterier: Det första steget var att vi kom överens om vilka kriterier vi skulle ha för att bedöma de olika designkoncepten som vi har. Vi utgick från tidigare uppsatta designmål och på workshoppen gick vi igenom om någon ville lägga till kriterier. 10-15 minuter.! Konsensus om alternativ: Det andra steget var att vi kom överens om vilka designkoncept som var kandidater att ingå som alternativ i vår värdering. Vi utgick från de fem som vi tidigare tagit fram fram och såg om någon vill lägga till något koncept ur samlingen på över 30 idéer. 10-15 minuter. VIDEOSCENARIOS 29 30
Konceptval med Pugh-charts forts.! Värdering av alternativ: Vi bestämde vilket som var det det mest lovande alternativet av designkoncepten genom enkel handuppräckning och använde det som utgångspunkt för att jämföra med de andra koncepten på vart och ett av våra kriterier. Om ett alternativ var bättre på ett kriterium än vår utgångspunkt så gav vi det ett plus på det kriteriet och om det var sämre än vår utgångspunkt fick det ett minus. Om det var likvärdigt med vår utgångspunkt så fick den ett S. 20 minuter. Konceptval med Pugh-charts forts.! Sammanställning: Vi räknade samman hur många plus alla fick, hur många minus de fick och vad summan blev för varje alternativ (alla minus subtraherat från alla plus). Man kan inte bara utse gå på den som får flest poäng till vårt val, eftersom att kriterierna vi kommit överens om antagligen inte var lika viktiga. Så detta steg krävde lite tankemöda. 20 minuter! Angreppssätt för negativa värderingar: De alternativ som var uppenbart sämre än de andra stryktes ur listan, men de som bara hade något minustecken på sig tittade vi närmare på och försökte se om det fanns något sätt vi kunde eliminera minustecknet, t.ex. genom att gör en variation av designalternativet. 10 minuter. 31 32 Konceptval med Pugh-charts forts.! Designbeslut: Vi bestämde vilket eller vilka koncept vi skulle köra på, eller om vi skulle göra en syntes av olika koncept. 10 minuter. 1. Tidsmaskinen 3. Visa och berätta 4. Kartan 5. Sidekick 6. Leta sagoväsen a. Väcker nyfikenhet (WOW) 0 - + + + - 7. Spatial talbok b. Fokus på natur och kulturlandskap 0 0 0 0 0 0 c. Förmedlar ALs liv & verk 0 0 0 0 - + d. Stödjer utomhuspedagogik 0 + 0 0 - + e. Kostnad 0 0 0-0 + f. Genomförbarhet 0 + 0-0 + g. Bärighet för FRT sektorn 0 + + 0 + + h. mmm, ahh, Håller över tid 0 + + - 0 0 Totalt + Totalt - Totalt 0 0 0 4 1 3 3 0 3 1 3-2 2 2 0 5 1 4 Koncept 1. Kartan + spatial talbok, och sagoväsen och tidsmaskinen som add-ons. Koncept 2: Visa och berätta med guide. 33 34 Storyboarding på gränssnittsnivå Detaljdesign med uppgiftsflöden och wireframes! Informella och snabba, där man tänker igenom hur användningsfall och procedurer ska se ut.! Lätt att jobba med alternativ.! Annotera skisserna med +, -,?, och!. 36
NationWide / NASCAR 18 Great Examples of Sketched UI Wireframes and Mockups Posted by Henry Jones on May 20, 2010 http://webdesignledger.com/inspiration/18-great-examples-of-sketched-uiwireframes-and-mockups 37 38 5 Years of Firefox Links 39 40 GEOINT2009 (Microsite) Coastal Capital Partners 41 42
New Local Vimeo Profile Page Idea 43 44 Layout for BPgraphics Vimeo Clip Page Top Nav 45 46 Cartoonity.com UI Sketch CommLogix Wireframe 47 48
Early Ember Sketches Wirethumbs 49 50 More Ember Sketches ipad App Sketch 51 52 Web Layout Sketches Librespeak interface sketch 53 54
Original Twitter Concept Färdigställda wireframes 55 56 START Listen to verbal or read printed in the reception to install and start the application. MINNESMARK Task Flow END A final story is played (audio or video) when all peices of the puzzle are found and the camera is pointed to the jigsaw START Listen to verbal or read printed in the reception to install and start the application. MINNESMARK Task Flow END A final story is played (audio or video) when all peices of the puzzle are found and the camera is pointed to the jigsaw poster in the reception. poster in the reception. View the jigsaw poster with lost pieces in the reception View the map Start the Log of Wood story View the compass Enter the Owl Tree region Enter the Kristin's House region Enter the Astrid's Home region Reset the application View the jigsaw poster with lost pieces in the reception View the map Start the Log of Wood story View the compass Enter the Owl Tree region Enter the Kristin's House region Enter the Astrid's Home region Reset the application Read printed See question Listen to story Listen to story Listen to story Read printed See question Listen to story Listen to story Listen to story on marks where the and read and read and read Read printed on marks where the and read and read and read Read printed how to solve the puzzle lost pieces can be found to the start to the ground raise the phone raise the phone raise the phone how to solve the puzzle lost pieces can be found to the start to the ground raise the phone raise the phone raise the phone to the jigsaw poster View the question marks where the lost pieces should See the pieces you have found on the places you found them marker outside the reception Listen to the log of wood story (or watch the movie) See in what direction the closest peice of the puzzle is, and also the directions to the pieces further away Raise the phone and view Pippi (or Astrid) in the tree to the marker behind the tree Raise the phone and view Kristin's house from the outside. View someone walking on the roof top Point camera to marker and read turn around to the printed reset-marker Confirm the reset on screen to the jigsaw poster View the question marks where the lost pieces should See the pieces you have found on the places you found them marker outside the reception Listen to the log of wood story (or watch the movie) See in what direction the closest peice of the puzzle is, and also the directions to the pieces further away Raise the phone and view Pippi (or Astrid) in the tree to the marker behind the tree Raise the phone and view Kristin's house from the outside. View someone walking on the roof top Point camera to marker and read turn around to the printed reset-marker Confirm the reset on screen have been. Found pieces are shown at their positions Get the piece of the puzzle with log of wood View photo or film of the inside of the Walk closer and passed the walls of the house to View a panorama from the rooftop and find a whisker See how all found pieces are deleted have been. Found pieces are shown at their positions Get the piece of the puzzle with log of wood View photo or film of the inside of the Walk closer and passed the walls of the house to View a panorama from the rooftop and find a whisker See how all found pieces are deleted tree and listen to see the kitchen tree and listen to see the kitchen Read on screen sounds of owl chicken on the other side of the walls If all peices are found, read final, Read on screen sounds of owl chicken on the other side of the walls If all peices are found, read final, Project: Digital Landscapes and go to view Project: Digital Landscapes and go to view Creator: Mattias Arvola Get the piece of Point to marker, the jigsaw Creator: Mattias Arvola Get the piece of Point to marker, the jigsaw Modified: 17 June 2011 the puzzle with find the milk poster in the Modified: 17 June 2011 the puzzle with find the milk poster in the Product: Minnesmark eggs, and read piece, and read reception Product: Minnesmark eggs, and read piece, and read reception Phase: Detailed Design Phase: Detailed Design Version: 1.3 Version: 1.3 Note: Content objects are bold. Actions Note: Content objects are bold. Actions are italic. are italic. 57 58 MINNESMARK Object-Action Model Project: Digital Landscapes Creator: Mattias Arvola Modified: 17 June 2011 Product: Minnesmark Phase: Detailed Design Version: 1.1 MINNESMARK Requirement specification OBJECTS ACTIONS Note: Requirements are referred to by [group].[type].[number], for example: BM.F.3. Be able to view visual media. Requirements hav not yet been prioritized in this version of the document. BM. BASIC MEDIA AC. APPLICATION CONTROL F. FUNCTIONAL REQUIREMENTS D. DATA REQUIREMENTS F. FUNCTIONAL REQUIREMENTS D. DATA REQUIREMENTS 1. Be able to listen to sound 1. Short texts 1. Be able to reset the application, so that 1. The reset dialog 2. Be able to read text 2. Background sound loops no lost pieces are found. jigsaw poster 3. Be able to view visual media 3. Foreground sounds 4. Movies 2. Not be able to reset the application by mistake. marker 5. 2D-images region map listen 6. 3D-objects 7. Panorama TC. TREASURE HUNT COMPASS the ground direction camera the phone the application the compass screen question marks lost pieces found pieces closest piece pieces further away positions for pieces background sound foreground sound read raise view watch point to turn around find get reset confirm see walk closer and passed enter start MC. MEDIA CONTROL F. FUNCTIONAL REQUIREMENTS D. DATA REQUIREMENTS 1. Change accessed media by entering 1. Markers and leaving a region 2. Regions 2. Be able to see or hear media in a 3. 3. Self position specific diraction with camera image in 4. Other positions the background 5. Map data 4. Be able to change accessed media by 6. Compass directions changing direction in which the phone is 7. Gyroscope data held 8. Accellerometer data 5. Be able to change view of media by 9. Camera image changing direction in which the phone is 10. Media size held 11. On screen position 6. Be able to see or hear media in the F. FUNCTIONAL REQUIREMENTS D. DATA REQUIREMENTS 1. Be able to see in which direction the 1. Self position closest piece is 2. Other positions 2. Be able to see in which directions all 3. Compass directions not found pieces are 4. 2D-images 4. On screen position TM. TREASURE HUNT MAP F. FUNCTIONAL REQUIREMENTS D. DATA REQUIREMENTS 1. Be able to see where lost pieces can be 1. Self position found on an augmented printed map 2. Other positions 2. Be able to find a lost piece 3. 3D-objects 3. Be able to see all found pieces on 4. Markers augmented printed media 5. On screen position 4. Be able to see your own position 6. Camera image movie place of a marker detected by the image camera, with the camera image in the Project: Digital Landscapes Creator: Mattias Arvola Modified: 17 June 2011 Product: Minnesmark Phase: Detailed Design Version: 1.1 3D-object panorama the reset dialog background 7. Change view of object by walking closer to a position, passed it, and further away from it 8. Be able to view media fullscreen 9. Pause media playback 10. Resume media playback Note: 59 60
Andra typer av flöden 61 62 Site maps: Basic Gråskala för att visa vikt Teknisk info Manual! Den enklaste varianten är som en organisationshierarki Butiker Produkt -info! Boxarna representerar sidor eller skärmbilder! Linjerna representerar länkar HOME Policy Start Produkt -typ Kontakt Om oss Kundtjänst FAQ 63 64 Storlek för att visa vikt Teknisk info Manual Skärmbilder gjorda i ritprogram Produktinfo!Snygga bilder som säljer ens design Policy Butiker Produkt -typ!grafisk design pålagd!säljande och övertygande Start Om oss Kontakt Kundtjänst FAQ 65 66
www.liu.se