DESIGNMETODER. Koncep;asen - Målträd. Dagens föreläsning. Effektkartläggning. Effektkartläggning - Projektmål. Effektkartläggning - Effektmål

Transkript

1 Dagens föreläsning DESIGNMETODER TDP022 - interak/va system KoncepAasen - Målträd Användarnära design Prototypning Konceptdesign Detaljdesign Aseel Berglund IDA - Ins/tu/onen för datavetenskap 2 Effektkartläggning Koncep;asen - Målträd I användarundersökningarna definierades vad, hur och varför folk vet, känner och gör i dagsläget. Nästa del av koncepaasen är am definiera vad folk är tänkta am veta, känna och göra i e+ fram/dsläge. MålsäMningar: q Effektmål q Produktmål q Projektmål 3 4 Effektkartläggning - Effektmål Effektkartläggning - Projektmål Handlar inte om själva designen Vad man vill åstadkomma genom am ta fram en ny design Varför em designarbete överhuvudtaget behöver genomföras Vad ska designarbetet bidra med /ll verksamheten och /ll användarna q Stödja fordonsköpare i processen am köpa nya eller begagnade fordon q Ökad effek/vitet i orderhanteringen med 25% q Förmedla värdet av produkten X 5 Hur produkten eller servicen skall tas fram inom projektgruppen. U/från projektmålen specifierar man vad som ska uppnås när projektet är slut Realis/ska, tydliga och mätbara 6 1

2 Effektkartläggning - Produktmål Avsedda kvaliteter Hur man vill am designen ska vara q Systemet ska ha en cham- funk/on q Svars/derna ska inte övers/ga 5 sek Kvaliteter avsedda am upplevas av användarna och intressenterna i användningen av en visst interak/v produkt eller tjänst. De svarar på frågan om hur produkten eller tjänsten borde vara eller ska vara i sin användning. 7 8 Målträd exempel - Mul/media plaaorm Effektkartor - En särskild sorts målträd Kvaliteter Slutmål (effektmål) avsedda kvaliteter som måste uppnås för uppnå slutmålet - värden Ger krav som ger features 9 10 Exempel Den fantas/ska turismjänsten Effekt Varför skapar vi tjänsten? Öka antal turister i Göteborg Öka försäljningen av turistprylar Målgrupp Vilka använder tjänsten och bidrar /ll effekten? Turis/ntresserade danskar Turis/ntresserade svenskar Användarnära design Användningsmål Vad behöver och vill målgrupperna? Behöver info på danska Vill ha trevlig upplevelse Behöver visa sin iden/tet Åtgärder Vad ska tjänsten innehålla? Hur /llfredsställer tjänsten användningsmålen? Språkstöd Erbjuda informa/on HiMa kompisar Låta räm personer blogga Hotell i området Museum i området Aktuella ak/viteter

3 Användarnära design 1. Planera den användarnära processen 2. Förstå och specifiera användnings- sammanhang Design Uppfyller kraven 5. Utvärdera mot användarkrav 2. Specifiera användar- och verksamhetskrav En användarnära designprocess (ISO , 2010) 4. Producera designlösningar Implementa/on Design! Konceptdesign detaljdesign specifika/on Mognad/Kunskap Iterativ process Implementa/on Risk Källa: Michael Petterstedt, Combitech Prototyping (Warfel, 2009) Prototypning Ger nya och fler idéer AM visa, beräma och uppleva är Övertygande och kvalitetssäkrande Sparar /d, ansträngning och pengar Minskar slöseri Ger värde i kundernas och användarnas verksamhet

4 Eight guiding principles (Warfel, 2009) Understand your audience and intent Plan a limle prototype the rest Set expecta/ons You can sketch It s a prototype Not the Mona Lisa If you can t make it, fake it Prototype only what you need Reduce risk prototype early and ooen Detaljerad design - Low Fidelity Ooa gjorda i papper. Används för am testa en design med användare och förutse stora problem /ll en extremt låg kostnad. Department of Computer Department and Information of Computer Science and (IDA) Information Linköpings Science universitet, (IDA) Sweden Linköpings universitet, Sweden 19 Department of Computer Department and Information of Computer Science and (IDA) Information Linköpings Science universitet, (IDA) Sweden Linköpings universitet, Sweden 20 Detaljerad design - High Fidelity Wizard- of- oz Interak/va och datorbaserade. Används i användarutvärderingen. Används för am övertyga ledning och andra intressenter man är på god väg. Kostnaden för dem kan dock vara ganska hög Kan orsaka orealis/ska förväntningar bland kunder. Ger användarna intrycket av am de jobbar med em verkligt system utan am något sådant fak/skt existerar. Styrs helt eller delvis av en wizard som /Mar på vad användaren gör/ger systemresponsen Körbara datorprototyper Vad ska prototypen testa? Påminner om slutprodukten och görs senare i utvecklingscykeln Testar känsla och detaljerad interak/on Jobbigt am ändra och en felak/g detalj kan stoppa upp testningen Funk/on Integrerad Konstruk/on Look & feel

5 Evolu/onära prototyper Verktyg för am bygga datorprototyper Byggs för am både testa design och för am bygga vidare på. Görs i den utvecklingsmiljö som produkten ska utvecklas med. Risk för begränsning av de /llgängliga standrad komponenter som hindrar ifrån användning av nya interak/onskomponenter. Presenta/onsverktyg: PowerPoint, Keynote, Acrobat, FireWoeks, OmniGraffle, Visio Mul/mediaverktyg: Director, Flash, Expression Specialiserade prototypingsverktyg: Flash Catalyst, Expression Blend, Axture, Balsamiq Webbutvecklings språk: HTML, CSS, javascript Grafiska programmeringsmiljöer: Interface Builder, Visual Studio Express, LiveCode, Eclips hmp://c2.com/cgi/wiki?guiprototypingtools 25 Department of Computer Department and Information of Computer Science and (IDA) Information Linköpings Science universitet, (IDA) Sweden Linköpings universitet, Sweden 26 Designrymden Konceptdesign Öppna upp Inspireras Avgränsa Kombinera Värdera Konceptdesign: The fuzzy front- end of design and innova/on Vad är em koncept på em interak/vt system? Målbild och uaorskning Värde för vem och i vilka situa/oner? Nuläge och fram/dsvision Osäkert, tankeexperiment, skissning, bedömning, värdering, och beslut Från em okänt vad och varför /ll em känt vad och varför. Användarstudier, personas, nu- scenarios och målträd 29 em kommunika/onsverktyg som överbryggar yrkesdiscipliner och på em enkelt säm umrycker själva kärnan hos en produkt eller en tjänst. Department of Computer Department and Information of Computer Science and (IDA) Information Linköpings Science universitet, (IDA) Sweden Linköpings universitet, Sweden 30 5

6 Detaljering av em koncept Konceptdesign: VAD och VARFÖR Vem som är tänkt am använda systemet (agent) Vad de ska göra med det (akt) När och var de ska använda systemet (scen) Hur de ga /ll väga och uppleva det (medel) Varför de ska använda det (syoe) Övergripande inriktning på designens gestal Brainstorming Funk/onsanalys Konceptdivergens Konceptbeskrivning Konceptvärdering Department of Computer Department and Information of Computer Science and (IDA) Information Linköpings Science universitet, (IDA) Sweden Linköpings universitet, Sweden Brainstorming Brainstorming forts En idégenereringsmetod fokuserar på am generera idéer. Inga idéer får kri/seras Galna idéer uppmuntras Kombinera och förbämra andras idéer Alla gruppmedlemmar samarbetar med varandras idéer Skriva ned idéerna och värderar eoeråt Kvan/teten på idéerna som räknas och inte kvalitén. Department of Computer Department and Information of Computer Science and (IDA) Information Linköpings Science universitet, (IDA) Sweden Linköpings universitet, Sweden 33 Formulera em problem Skriv ned idéer på lappar individuellt i 10 minuter Läs en idé högt medan de andra skriver ned nya idéer de får och ga bordet runt Kategorisera alla lappar, ju fler lappar i en grupp desto mer lovande arbetslinje. Men! Iden/fiera de mest lovande och detaljera dem ymerligare för am kunna värdera dem 34 Metod 635 Funk/onsanalys Skicka idéerna vidare runt bordet: 6 deltagare 3 idéer 5 varia/oner Tot 6x3x6 = 108 idéer Svarar på frågan om vad användaren ska kunna göra med systemet q <verb, substan/v> t.ex. ta foton Prioritera funk/oner som nödvändiga (N), önskvärda (Ö), eller onödiga (O) (onödiga men roliga?) Iden/fiera vilka funk/oner som skulle kunna vara huvudfunk/oner (HF) Vad skulle det bli för design om man tog andra HF än den man tänker på först?

7 Konceptdivergens Konceptbeskrivning - KoncepAormulär Extrema designkoncept q gör am man bämre uaorskar designrymden q sporrar diskussion q tänjer på gränserna för det acceptabla Med koncepaormuläret kan man arbeta fram skillnaderna och likheterna mellan olika koncept med fokus på formulärets rubriker. Sedan kan man ta fram en balanserad syntes Konceptbeskrivning - scenario Text En seriestripp - storyboard ex på em scenario som beskriver em problem i personan Gretas vardag Greta är 76 år, änka och bor i Norrköping. Greta har något nedsam hörsel. Hon har dock en hörapparat som hon använder då och då. När hon använder hörapparaten för am /Ma på TV störs hon dock ooa av am någon granne spelar rockmusik på hög volym, ooa sent på kvällarna. DeMa tycker Greta är väldigt störande och hon har ooa velat ga upp /ll den unge killen en trappa upp som måste vara den som spelar den höga musiken. En trappa upp från Greta bor Johan, 26, som jobbar som ordningsvakt på olika uteställen i Norrköping. DeMa gör am han ooa först kan ga och lägga sig vid fyra eller fem på namen. Det händer dock nästan varje vecka am han väcks ur sin sömn av am någon granne dammsuger, skramlar med disk eller andra störande ljud /digt om morgnarna. Han misstänker am det är den gamla damen en trappa ner, man vet ju vilka /der pensionärer har. 41 hämtat från Arvola m.fl., 2008: Greta och Torsten: Två personas för äldre användare av hälsans nya verktyg. 42 7

8 Storyboarding på konceptniva Konceptvärdering Öppna upp Inspireras Avgränsa Kombinera Värdera Illustra/on Johanna Hultcrantz God design Kriterier för konceptval E/sk Prak/sk Este/sk Social Organisatorisk Teknisk Konceptval ska primärt baseras på am maximera bidraget /ll de vik/gaste effektmålen för användaren och andra centrala intressenter Även centrala produkt- och projektmål kan tas med TiMa /llbaka på vad som kom fram i användarstudien Pugh- tabeller Procedur för am göra Pugh- charts 1. Konsensus om kriterier 2. Konsensus om alterna/v 3. Värdering av alterna/v 4. Sammanställning 5. AngreppssäM för nega/va värderingar 6. Designbeslut och syntes

9 Detaljdesign: HUR Detaljdesign UAorskning q Designmönster q Skissning q Design ra/onale Beskrivning q Sitemaps q Wireframes Designmönster (se Tidwell) Designmönster (se Tidwell) forts En samling av designregler för am lösa designproblem och förbämra användbarheten. förklarar problemen, samt när, varför och hur dessa designmönster kan implementeras Mönstren fångar vanliga strukturer utan am ga in på exakt hur något skall se ut Lämnar en möjlighet för designern am vara krea/v i sim arbete. Designmönster beskriver hur designelement bör förhålla sig /ll användaren Designmönstren måste all/d anpassas u/från kontexten och användarens mål Inspira/on och saker am tänka på Inga recept! Ingen kokboksdesign! Magne/sm Magne/sm - Exempel Use when: The user needs to posi/on objects very precisely, such as next to other objects or against Guides. Why: Magne/sm helps compensate for users lack of perfect dexterity with a mouse. How: When the user drags an object closer to another object s edge, make it snap to the other object. Likewise, when it s dragged away, keep it there for a few pixels, and then let it move away. 53 En toolbar i Word som hakar fast, magnetiskt 54 9

10 Designteamet vet nu vad som ska göras Hur ska huvuddragen uaormas? Skissning Skissning Forma en övergripande bild av hur produkten eller tjänsten ska vara uaormad. Designens huvuddrag och systemlösningar utvecklas och fastställs Principerna för designen bestäms. Rights reserved by pocopina Picture by peterme Design Ra/onale Sitemaps En explicit dokumenta/on av skälen /ll beslut som famas när man uaormar em system eller artefakt.? alt + -! För webbsajt eller hirarkiskt ordnade applika/oner Kartor över sjaten/applika/onen baserat på kategoriseringen av innehållet Den enklaste varianten är som en hirakisk organisa/onskarta Boxarna representerar sidor eller skärmbilder Linjerna representerar länkar Utdrag ur en skissbok av Ma/lda ZeMerblom Vad har designteamet nu? Och sedan? Sitemap med olika storlekar på noderna för am visa hur vik/g en viss sida är för användare och andra intressenter Ger grund för prioritering av utvecklinsresurser Funk/oner Innehåll Struktur Skissa på layouten av gränssnimet

11 Wireframes Dagens föreläsning Grundläggande layouten av hur gränssnimet ska struktureras. DeMa inkluderar hur sidor/vyer kommer am relatera /ll varandra och hur den övergripande designen kommer am se ut. Wireframes ger en guide för hur användargränssnim kommer am konstruera. KoncepAasen - Målträd Användarnära design Prototypning Konceptdesign Detaljdesign Källa: Wireflows av Kelly Backlöf, Johanna Engstam, Åsa Ericson, Sofia Flårback och Elin Vretlund