Koncept och (lite) gränssnittsdesign Ove Jansson Baserad på tidigare föreläsningar av Jody Foo och Mattias Arvola

Transkript

1 Koncept och (lite) gränssnittsdesign Ove Jansson Baserad på tidigare föreläsningar av Jody Foo och Mattias Arvola

2 Avstämning ->

3 Anonyma frågor ->

4 Vad som ska göras: Okänt I stort känt Känt Känt Hur det ska göras: Okänt Okänt I stort känt Känt

5 Designmål - vad vi vill uppnå med vår design

6 Effektmål De förväntade effekterna av projektet Varför något behöver göras överhuvudtaget Vad ska det bidra med till verksamhet och användare?

7 Effektmål ska vara SMARTA Specifikt konkret vad, vart vill jag nå? Mätbart t.ex. antal, storlek (kvantitativt). Vi ska veta när målet är nått. Attraktivt målet ska kännas givande och angeläget att nå. Förankra i visioner och drömmar, så att det leder till sånt jag verkligen vill göra eller uppnå. Realistiskt det ska vara genomförbart. Tidsbestämt När ska målet vara nått? Accepterat Målet ska vara accepterat av mig och de som berörs av målet.

8 Varför-varför-varför Varför klagar folk när det blir trafikstockning?: För att det gör dem irriterade. Varför blir de irriterade?: För att de blir oväntat försenade. Varför är oväntade förseningar irriterande?: För att man tvingas ändra sina planer. Varför har trafikanterna planer?: För att bilresan inte är ett mål i sig(?)

9 UX-vision Hur vill vi att våra användare ska uppleva vår produkt eller tjänst?

10 Målträd Önskvärd kvalitet 1 Kvalitetskriterium 1 Kvalitetskriterium 2 Värde Önskvärd kvalitet 2 Kvalitetskriterium 3 Kvalitetskriterium 4 Önskvärd kvalitet 3 Kvalitetskriterium 5 Kvalitetskriterium 6

11 CTQ-träd i Six Sigma

12 Effektkartläggning Vilka effekter och värden ska vi bidra till? Vilka intressenter kan skapa dessa effekter eller värden? Vad är deras mål? Hur kan designen bidra till deras mål?

13 Verksamhetsmål Målgrupper Användningsmål Scenarier och funktioner Fritt baserat på en beskrivning av Antrop.

14 Arbeta med designmålen löpande Design och prototypning är en lärandeprocess Revidera målen Specificera målen Konkretisera dem allteftersom du lär dig

15 Anonyma frågor ->

16 Att skapa koncept

17 designkriterier idéer bärande idé prototyp produkt konceptfas bearbetningsfas detaljeringsfas Arvola (2014)

18 Att få designen rätt Greenberg m.fl. Ta fram en idé Iterera och utveckla den

19 Att få rätt design Greenberg m.fl.

20 Divergens och konvergens

21 En process som präglas av Osäkerhet Tankeexperiment Skissning Bedömning och värdering Beslut

22 Konceptnivån Vem gör vad, när, var, hur och varför? Agent, akt, scen, medel och syfte (Arvola, 2005) Konceptformuläret:

23 Designkoncept Nr. VAD konceptet heter: VEM som ska använda den: VAD konceptet är för något: NÄR och VAR den kommer att användas: VAD den gör (huvudfunktion och -innehåll): VARFÖR användaren vill ha och använda den: HUR den används (rita en storyboard): Användarens upplevelse innan Interaktionssteg 1 Interaktionssteg 2 Interaktionssteg 3 Interaktionssteg 4 Användarens upplevelse efter HUR den ska vara: Principer och kvaliteter Konsekvenser: För folk, miljö, eller samhälle Projekt: Datum: Researcher: Konceptformulär. Mattias Arvola 2014.

24 Designkoncept Nr. VAD konceptet heter: VEM som ska använda den: VAD konceptet är för något: NÄR och VAR den kommer att användas: VAD den gör (huvudfunktion och -innehåll): VARFÖR användaren vill ha och använda den: HUR den används (rita en storyboard): Användarens upplevelse innan Interaktionssteg 1 Interaktionssteg 2 Interaktionssteg 3 Interaktionssteg 4 Användarens upplevelse efter HUR den ska vara: Principer och kvaliteter Konsekvenser: För folk, miljö, eller samhälle Projekt: Datum: Researcher: Konceptformulär. Mattias Arvola 2014.

25 Designkoncept Nr. VAD konceptet heter: VEM som ska använda den: VAD konceptet är för något: NÄR och VAR den kommer att användas: VAD den gör (huvudfunktion och -innehåll): VARFÖR användaren vill ha och använda den: HUR den används (rita en storyboard): Användarens upplevelse innan Interaktionssteg 1 Interaktionssteg 2

26 HUR den ska vara: Principer och kvaliteter Konsekvenser: För folk, miljö, eller samhälle HUR den används (rita en storyboard): Användarens upplevelse innan Interaktionssteg 1 Interaktionssteg 2 Interaktionssteg 3 Interaktionssteg 4 Användarens upplevelse efter

27 HUR den ska vara: Principer och kvaliteter Konsekvenser: För folk, miljö, eller samhälle Projekt: Datum: Researcher: Konceptformulär. Mattias Arvola 2014.

28 Strukturerad divergens på konceptnivån Variera vem som gör vad när var hur och varför på ett systematiskt sätt Gör tankeexperiment: På ett annat sätt Av en annan anledning Divergens driver innovation och iteration driver kvalitet Vad skulle det blir för sorts produkt eller tjänst om det var En annan användare Som ska göra något annat På en annan plats I en annan tid

29 Anonyma frågor ->

30 Randomisering av huvudfunktion

31 Funktionsdriven divergens Syftet är att man ska kunna: Mediesystem i bilen Titta film Kommunicera med andra Hitta rätt Kontrollera vad barnen gör Spela spel

32 Kommunicera med andra Titta film Hitta rätt Spela spel Kontrollera vad barnen gör

33 Kommunicera med andra Titta film Hitta rätt Spela spel Kontrollera vad barnen gör

34 Funktionsdriven divergens baserat på Brainwriting personer skriver 3 funktioner på 5 minuter och skickar vidare pappret: 108 funktioner Vad ska personan kunna göra med produkten eller tjänsten Varje funktion består av ett verb och ett substantiv: stapla stolar Provokationer på brukssituation om man kör fast: Trupptransport På väg hem från fotbollsmatch För statsministern Vid en olycka

35 Funktionsanalys Gå igenom funktionerna och kategorisera dem utifrån personornas perspektiv: Nödvändiga (N) Önskvärda (Ö) Onödiga (O) Onödiga men roliga (OR)

36 Lista alla nödvändiga funktioner, några av de intressantaste önskvärda och någon onödig men rolig Fundera på hur det skulle vara om en av dem var huvudfunktion (HF) och fick dominera och strukturera upp hela systemet. Namnge de resulterande produkten Detaljera koncepten med konceptformuläret

37 Designkoncept Nr. VAD konceptet heter: VEM som ska använda den: VAD konceptet är för något: NÄR och VAR den kommer att användas: VAD den gör (huvudfunktion och -innehåll): VARFÖR användaren vill ha och använda den: HUR den används (rita en storyboard): Användarens upplevelse innan Interaktionssteg 1 Interaktionssteg 2 Interaktionssteg 3 Interaktionssteg 4 Användarens upplevelse efter HUR den ska vara: Principer och kvaliteter Konsekvenser: För folk, miljö, eller samhälle Projekt: Datum: Researcher: Konceptformulär. Mattias Arvola 2014.

38 Anonyma frågor ->

39 Storyboarding på konceptnivå

40 NÄRSTÅENDE INGALILL GICK BORT FÖR MÅNGA ÅR SEDAN, MEN DIN SON - SIMON, KOMMER ATT HÄLSA PÅ REDAN I MORGON VAR ÄR INGALILL? SIMON KAN GENOM INVÅNARTJÄNSTERNA MEDDELA PERSONALEN T EX NÄR HAN PLANERAR ATT BESÖKA SIN PAPPA. I SAMMA GRÄNSSNITT KAN PERSONALEN OCKSÅ KONTAKTA SIMON OCH FÖRA ANTECKNINGAR KRING ALBERT. DE SER OCKSÅ DEN INFORMATION (SOM ÄVEN FINNS I JOURNA- LEN) SOM SOM ÄR VIKTIG FÖR ATT GE VÄRDIG VÅRD - SÅSOM INTRESSEN OCH MATVANOR MM. SIMONS PAPPA ALBERT HAR ALZHEIMERS SJUKDOM. BÅDE SIMON OCH ALBERT SJÄLV VILL ATT ALBERT SKA KUNNA BO KVAR HEMMA SÅ LÄNGE SOM DET FUNGERAR MED DE DAGLIGA RUTINERNA. ALBERT VET FORTFARANDE HUR MAN TVÄTTAR SIG, VÄRMER MAT OCH TAR MEDICINER MEN IBLAND GLÖMMER HAN BORT. DÄRFÖR HAR SIMON MED HJÄLP AV INVÅNARTJÄNSTERNA STÄLLT IN PÅMIN- NELSER FÖR DE AKTIVITETER HAN INTE FÅR GLÖMMA BORT. VID SIDAN OM ATT HJÄLPA SIN PAPPA KAN SIMON SJÄLV OCKSÅ FÅ STÖD OCH RÅDGIVNING FRÅN INVÅNARTJÄNSTERNA I SIN ROLL SOM ANHÖRIG. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida quam vel eros lobortis congue. Suspendisse a mollis quam. Pellentesque a nisi dictum, accumsan felis tristique, interdum nibh. Proin cursus malesuada tellus vitae porttitor. Morbi eget adipiscing dolor. In commodo lectus eu augue tempor euismod. Vestibulum luctus facilisis enim a rutrum. Fusce condimentum enim at erat egestas consequat. Nulla tincidunt felis a elit laoreet vulputate non vel elit. Sed aliquet dapibus auctor. In erat erat, consequat eget elit a, mollis malesuada dolor. Vestibulum laoreet posuere eros et sodales. Praesent aliquet orci nec turpis vestibulum semper. Donec iaculis tincidunt dolor id pulvinar. Mauris diam lectus, porttitor ut vulputate vitae, faucibus a velit. Aliquam nec enim fringilla, tempus neque quis, commodo massa. Proin diam erat, placerat in sollicitudin et, pulvinar quis urna. Phasellus vestibulum neque dolor, eu suscipit nunc varius quis. Vestibulum elementum faucibus mauris. Morbi ligula urna, sodales a ullamcorper id, porttitor vitae augue. Morbi molestie massa et facilisis ultrices. Etiam porttitor pellentesque placerat. Ut sed lobortis lacus. Praesent tempus pretium odio, vitae malesuada ligula convallis ut. Nulla dapibus diam non vehicula accumsan. Quisque placerat metus nibh. Maecenas interdum, sapien quis malesuada auctor, libero metus tristique tellus, et Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida quam vel eros lobortis congue. Suspendisse a mollis quam. Pellentesque a nisi dictum, accumsan felis tristique, interdum nibh. Proin cursus malesuada tellus vitae porttitor. Morbi eget adipiscing dolor. In commodo lectus eu augue tempor euismod. Vestibulum luctus facilisis enim a rutrum. Fusce condimentum enim at erat egestas consequat. Nulla tincidunt felis a elit laoreet vulputate non vel elit. Sed aliquet dapibus auctor. In erat erat, consequat eget elit a, mollis malesuada dolor. Vestibulum laoreet posuere eros et sodales. Praesent aliquet orci nec turpis vestibulum semper. Donec iaculis tincidunt dolor id pulvinar. Mauris diam lectus, porttitor ut vulputate vitae, faucibus a velit. Aliquam nec enim fringilla, tempus neque quis, commodo massa. Proin diam erat, placerat in sollicitudin et, pulvinar quis urna. Phasellus vestibulum neque dolor, eu suscipit nunc varius quis. Vestibulum elementum faucibus mauris. Morbi ligula urna, IDAG SÅG VI EN OVANLIG FÅGEL NERE VID VATTNET Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida quam vel eros lobortis congue. Suspendisse a mollis quam. Pellentesque a nisi dictum, accumsan felis tristique, interdum nibh. Proin cursus malesuada tellus vitae porttitor. Morbi eget adipiscing dolor. In commodo lectus eu augue tempor euismod. Vestibulum luctus facilisis enim a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida quam vel eros lobortis congue. Suspendisse a mollis quam. Pellentesque a nisi dictum, accumsan felis tristique, interdum nibh. Proin cursus malesuada tellus vitae porttitor. Morbi eget adipiscing dolor. In commodo lectus eu augue tempor euismod. Vestibulum luctus facilisis enim a rutrum. GENOM INVÅNARTJÄNSTERNA HAR ALBERT GETT SITT MEDGIVANDE TILL ATT SONEN FÅR SE HANS VÅRDPLAN OCH ÄVEN VARA DELAKTIG I BESLUT. NÄR ALBERTS SJUKDOM FORTSKRIDER BLIR DET TILL SLUT DAGS ATT FLYTTA TILL ETT VÅRDHEM. DÅ KAN SIMON NOGA JÄMFÖRA OLIKA ALTERNATIV OCH VÄLJER ETT SOM PASSAR. SIMON ANVÄNDER INVÅNARTJÄNSTERNA TILL ALLA PRAKTISKA FÖRBEREDELSER KRING FLYTTEN. SIMON KÄNNER SIG TRYGG MED ATT PAPPAN FÅR BRA VÅRD, OCH KAN SE PLANERADE OCH GENOMFÖRDA AKTIVITETER....OCH NÄR SIMON TRÄFFAR SIN PAPPA PÅ VÅRDHEMMET KAN DE UMGÅS OCH PRATA OM DAGEN.

41 Konceptval med matrisutvärdering

42 God design är Etisk Praktisk Estetisk Social Organisatorisk Teknisk tekniskt praktiskt kommunikativt organisatoriskt estetiskt etiskt

43 Kriterier för konceptval Konceptval ska primärt baseras på att maximera bidraget till de viktigaste effektmålen för användaren och andra centrala intressenter Även centrala produkt- och projektmål kan tas med Titta tillbaka på vad som kom fram i er användarstudier och intressentintervjuer

44 PUGH CHART KRITERIER/KONCEPT 1. Tidsmaskin 3. Visa och berätta 4. Kartan 5. Sidekick 6. Leta sagoväsen a. Väcker nyfikenhet (WOW) b. Fokus på natur och kulturlandskap c. Förmedlar ALs liv & verk d. Stödjer utomhuspedagogik e. Kostnad f. Genomförbarhet g. Bärighet för FRT sektorn h. mmm, ahh, Håller över tid Spatial talbok Totalt + Totalt - Totalt Koncept 1. Kartan + spatial talbok, och sagoväsen och tidsmaskinen som add-ons. Koncept 2: Visa och berätta med guide.

45 Fortsatt detaljering av syntes efter konceptval

46 Scenarios 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.

47 MINNESMARK Object-Action Model OBJECTS jigsaw poster marker region map the ground direction camera the phone the application the compass screen question marks lost pieces found pieces closest piece instructions pieces further away positions for pieces background sound foreground sound movie image 3D-object panorama the reset dialog ACTIONS listen read raise view watch point to turn around find get reset confirm see walk closer and passed enter start Skissa upp funktion- och innehållsnivån Revidering efter konceptval Vad ska objekten ha för datatyp? Vilka tillstånd kan de vara i? Vad kan man göra med dem? Vilka attribut ska de ha?

48 Revidering av krav efter konceptval F. FUNCTIONAL REQUIREMENTS 1. Be able to listen to sound 2. Be able to read text 3. Be able to view visual media F. FUNCTIONAL REQUIREMENTS 1. Change accessed media by entering and leaving a region 2. Be able to see or hear media in a 3. specific diraction with camera image in the background 4. Be able to change accessed media by changing direction in which the phone is held 5. Be able to change view of media by changing direction in which the phone is held 6. Be able to see or hear media in the place of a marker detected by the camera, with the camera image in the 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 BM. BASIC MEDIA MC. MEDIA CONTROL D. DATA REQUIREMENTS 1. Short texts 2. Background sound loops 3. Foreground sounds 4. Movies 5. 2D-images 6. 3D-objects 7. Panorama D. DATA REQUIREMENTS 1. Markers 2. Regions 3. Self position 4. Other positions 5. Map data 6. Compass directions 7. Gyroscope data 8. Accellerometer data 9. Camera image 10. Media size 11. On screen position F. FUNCTIONAL REQUIREMENTS 1. Be able to reset the application, so that no lost pieces are found. 2. Not be able to reset the application by mistake. F. FUNCTIONAL REQUIREMENTS 1. Be able to see in which direction the closest piece is 2. Be able to see in which directions all not found pieces are F. FUNCTIONAL REQUIREMENTS 1. Be able to see where lost pieces can be found on an augmented printed map 2. Be able to find a lost piece 3. Be able to see all found pieces on augmented printed media 4. Be able to see your own position AC. APPLICATION CONTROL D. DATA REQUIREMENTS 1. The reset dialog TC. TREASURE HUNT COMPASS TM. TREASURE HUNT MAP D. DATA REQUIREMENTS 1. Self position 2. Other positions 3. Compass directions 4. 2D-images 4. On screen position D. DATA REQUIREMENTS 1. Self position 2. Other positions 3. 3D-objects 4. Markers 5. On screen position 6. Camera image

49 Gränssnittsdesign och flöde

50 Skissning Johanna Seger

51 Skissning Johanna Seger

52 Gränssnittsflöde Alice Rosberg Emma Jonsson

53 Gränssnittsflöde Alice Rosberg Emma Jonsson

54 There is no such thing as a failed experiment, only experiments with unexpected outcomes. Buckminster Fuller

55 Designprinciper

56 Användbarhet (ISO ) Den grad i vilken specifika användare kan använda en produkt för att uppnå ett specifikt mål på ett ändamålsenligt, effektivt och för användaren tillfredsställande sätt i ett givet sammanhang.

57 Tvinga mig inte att tänka (Krug, 2014) Dra nytta av konventioner Skapa effektiva visuella hierarkier Dela upp sidor i tydligt avgränsade delar Gör det uppenbart vad som är klickbart Eliminera distraktioner Utforma innehållet för att stödja skanning Undvik svåra val Ta bort onödiga ord

58 Tvinga mig inte att tänka Var är jag? Var ska jag börja? Var finns X? Vad är de viktigaste sakerna på denna sida? Varför kallar de det så? Är det här reklam eller en del av sajten?

59 Vad gör folk egentligen? Folk läser inte, de skannar. Tillräckligt bra är bra nog: Tidsbrist Det kostar inte så mycket att gissa fel Tjänar inte på att överväga alternativen Det är skoj att klicka sig runt

60 Skapa effektiva visuella hierarkier Ju viktigare något är desto mer framträdande ska det vara Saker som hör ihop logiskt ska också höra ihop visuellt (och vice versa) Saker nästlas visuellt för att visa delar i helheter

61 Dela upp sidor i tydligt avgränsade delar Exempelvis rutnät

62 Gör det uppenbart vad som är klickbart

63 Eliminera distraktioner Använd mönster istället för clutter

64

65

66 Utforma innehållet för att stödja skanning

67 Undvik svåra val Hjärndöda val gör inget, men ibland måste svåra val göras: Ge då kort information Ge den då den behövs Utforma den så att det inte går att missa den

68 Ta bort onödiga ord Bla, bla bla bla bla bla innehållslöst pladder för artighetens skulle är förkastligt. Folk interagerar inte med datorn som de gör med människor. Långa instruktioner är av ondo och ett misslyckande.

69 UPG1 Koncept Tre radikala koncept En värderingsmatris Ett gränssnittsflöde En litteratursammanfattning

70 Anonyma frågor ->

71 Quiz ->

72 Feedback ->