Konceptdesign och gränssnittsdesign Mattias Arvola @mattiasarvola Institutionen för datavetenskap
Första handledningen Kickstarta UPG1 Design Tillsammans i smågrupper Hjälpa varandra med idégenerering och återkoppling 2
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 3
4 SÄTTA DESIGNMÅL
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? 5
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. 6
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 eller är det det? http://deseng.ryerson.ca/dokuwiki/design:why_why_why 7
UX-vision Hur vill vi att våra användare ska uppleva vår produkt eller tjänst? 8
Web Mobile Phone Store user experience 9
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 10
11 CTQ-träd i Six Sigma
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? 12
Verksamhetsmål Målgrupper Användningsmål Scenarier och funktioner Fritt baserat på en beskrivning av Antrop. 13
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 14
INITIALA ANVÄNDARSTUDIER VAD SOM SKA GÖRAS SKA MEJSLAS UT ÖVERGRIPANDE DESIGN 15
designkriterier idéer bärande idé prototyp produkt konceptfas bearbetningsfas detaljeringsfas 16
Att få designen rätt Greenberg m.fl. Ta fram en idé Iterera och utveckla den 17
18 Att få rätt design Greenberg m.fl.
19 Utforskning Greenberg m.fl.
Divergens och konvergens Double diamond 20
En process som präglas av Osäkerhet Tankeexperiment Skissning Bedömning och värdering Beslut 21
22
Nivåer i interaktionsdesign (Arvola & Artman, 2007) Designkoncept: Vem gör vad, när, var, hur och varför? Övergripande gestalt, posture eller genre Funktioner och innehåll: Handlingar och objekt Struktur: Temporal, spatial och logisk Interaktion: Hur gör användaren för att navigera strukturen, använda funktionerna och manipulera innehåll. Presentation: Look & feel. Vad som möter sinnena och hur det tolkas 23
Konceptnivån Vem gör vad, när, var, hur och varför? Agent, akt, scen, medel och syfte (Arvola, 2005) Konceptformuläret: http://www.ida.liu.se/~matar/ konceptformular.pdf 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
27 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
HUR den ska vara: Principer och kvaliteter Konsekvenser: För folk, miljö, eller samhälle Projekt: Datum: Researcher: Konceptformulär. Mattias Arvola 2014. 28
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. 29
Variera vem som gör vad när var hur och varför för ett systematiskt sätt Gör tankeexperiment: 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 Strukturerad divergens på konceptnivån I en annan tid På ett annat sätt Av en annan anledning Divergens driver innovation och iteration driver kvalitet 30
SÄTT SLUMPEN I SYSTEM! 31
Funktionsdriven divergens 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 3-6-5 6 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
Uppgift: Idé 1 Idé 2 Idé 3 1 2 3 4 5 6 36
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) 37
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 38
SKISSNING PÅ KONCEPTNIVÅN 39
VIRTUELL SIDEKICK Konceptskiss Genom mobilen kan guidedeltagarna se guidens virtuella sidekick (Figur 6). 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. I samband med ovan nämna funktion kan sidekicken följa med in i, och bli en naturlig övergång till filmsnuttar som visas i mobilerna. Designmål som konceptet bidrar till: + Förstärkt verklighet + Astrids liv och verk + Folktro och kulturhistoria + Biologi och natur Olika karaktärer på sidekicken (t.ex. skeptiker, humoristisk, ifrågasättande) tillåter guiden att bygga upp olika sorters dramaturgi genom att föra en dialog med den. Målgrupper: Guider, besökare på guidad tur. 40
Storyboarding på konceptnivå 41
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida quam vel eros lobortis congue. Suspendisse a mollis Suspendisse a mollis quam. Pellentesque a nisi dictum, accumsan felis tristique, interdum nibh. Proin cursus malesuada tellus interdum nibh. Proin cursus malesuada tellus vitae porttitor. quam. Pellentesque a nisi dictum, accumsan felis tristique, vitae porttitor. Morbi eget adipiscing dolor. In commodo lectus Morbi eget adipiscing dolor. In commodo lectus eu augue eu augue tempor euismod. Vestibulum luctus facilisis enim a tempor euismod. Vestibulum luctus facilisis enim a rutrum. rutrum. Fusce condimentum enim at erat egestas consequat. Fusce condimentum enim at erat egestas consequat. Nulla tincidunt felis a elit laoreet vulputate non vel elit. Sed Nulla tincidunt felis a elit laoreet vulputate non vel elit. Sed aliquet dapibus auctor. In erat erat, consequat eget elit a, mollis aliquet dapibus auctor. In erat erat, consequat eget elit a, malesuada dolor. Vestibulum laoreet posuere eros et sodales. mollis malesuada dolor. Vestibulum laoreet posuere eros et Praesent aliquet orci nec turpis vestibulum semper. Donec sodales. Praesent aliquet orci nec turpis vestibulum semper. iaculis tincidunt dolor id pulvinar. Mauris diam lectus, porttitor Donec iaculis tincidunt dolor id pulvinar. Mauris diam lectus, ut vulputate vitae, faucibus a velit. Aliquam nec enim fringilla, porttitor ut vulputate vitae, faucibus a velit. Aliquam nec enim tempus neque quis, commodo massa. Proin diam erat, placerat fringilla, tempus neque quis, commodo massa. Proin diam in sollicitudin et, pulvinar quis urna. Phasellus vestibulum neque erat, placerat in sollicitudin et, pulvinar quis urna. Phasellus dolor, eu suscipit nunc varius quis. vestibulum neque dolor, eu suscipit nunc varius quis. Vestibulum elementum faucibus mauris. Morbi ligula urna, 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 30 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 IDAG SÅG VI EN OVANLIG FÅGEL NERE VID VATTNET. 21 22 23 24 25 26 27 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. 42
KONCEPVAL MED MATRISUTVÄRDERING 43
God design är tekniskt praktiskt kommunikativt organisatoriskt estetiskt etiskt 44
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 45
PUGH CHART KRITERIER/KONCEPT 1. Tidsmaskin 3. Visa och berätta 4. Kartan 5. Sidekick 6. Leta sagoväsen 7. Spatial talbok a. Väcker nyfikenhet (WOW) 0 - + + + - 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 Koncept 1. Kartan + spatial talbok, och sagoväsen och tidsmaskinen som add-ons. Koncept 2: Visa och berätta med guide. 4 1 3 3 0 3 1 3-2 2 2 0 5 1 4 46
FORTSATT DETALJERING AV SYNTES EFTER KONCEPTVAL 47
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. 48
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? 49
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 50
Gränssnittsdesign
Arbeta med nedanstående för arbeta igenom er design: Wireframes Uppgiftsflöden Wireflows Sitemaps Designprinciper 52
53 Skissning av Pirmin Buchenberg
Design rationale av Matilda Zetterblom + -!? Alt # 54
55 10 idéer + 10 variationer
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. 56
START Listen to verbal or read printed instructions 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. 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 instructions on how to solve the puzzle Point the camera to the jigsaw poster View the question marks where the lost pieces should have been. Found pieces are shown at their positions Project: Digital Landscapes Creator: Mattias Arvola Modified: 17 June 2011 Product: Minnesmark Phase: Detailed Design Version: 1.3 See question marks where the lost pieces can be found See the pieces you have found on the places you found them Point the camera to the start marker outside the reception Listen to the log of wood story (or watch the movie) Get the piece of the puzzle with log of wood Read instructions on screen Point the camera to the ground See in what direction the closest peice of the puzzle is, and also the directions to the pieces further away Listen to story and read instructions to raise the phone Raise the phone and view Pippi (or Astrid) in the tree Point the camera to the marker behind the tree View photo or film of the inside of the tree and listen to sounds of owl chicken Get the piece of the puzzle with eggs, and read instructions Listen to story and read instructions to raise the phone Raise the phone and view Kristin's house from the outside. Walk closer and passed the walls of the house to see the kitchen on the other side of the walls Point to marker, find the milk piece, and read instructions Listen to story and read instructions to raise the phone View someone walking on the roof top Point camera to marker and read instructions to turn around View a panorama from the rooftop and find a whisker If all peices are found, read final instructions, and go to view the jigsaw poster in the reception Read printed instructions Point the camera to the printed reset-marker Confirm the reset on screen See how all found pieces are deleted Note: Content objects are bold. Actions are italic. 57
START Listen to verbal or read printed instructions 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. 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 instructions on how to solve the puzzle Point the camera to the jigsaw poster View the question marks where the lost pieces should have been. Found pieces are shown at their positions Project: Digital Landscapes Creator: Mattias Arvola Modified: 17 June 2011 Product: Minnesmark Phase: Detailed Design Version: 1.3 See question marks where the lost pieces can be found See the pieces you have found on the places you found them Point the camera to the start marker outside the reception Listen to the log of wood story (or watch the movie) Get the piece of the puzzle with log of wood Read instructions on screen Point the camera to the ground See in what direction the closest peice of the puzzle is, and also the directions to the pieces further away Listen to story and read instructions to raise the phone Raise the phone and view Pippi (or Astrid) in the tree Point the camera to the marker behind the tree View photo or film of the inside of the tree and listen to sounds of owl chicken Get the piece of the puzzle with eggs, and read instructions Listen to story and read instructions to raise the phone Raise the phone and view Kristin's house from the outside. Walk closer and passed the walls of the house to see the kitchen on the other side of the walls Point to marker, find the milk piece, and read instructions Listen to story and read instructions to raise the phone View someone walking on the roof top Point camera to marker and read instructions to turn around View a panorama from the rooftop and find a whisker If all peices are found, read final instructions, and go to view the jigsaw poster in the reception Read printed instructions Point the camera to the printed reset-marker Confirm the reset on screen See how all found pieces are deleted Note: Content objects are bold. Actions are italic. 58
Sitemaps HOME Den enklaste varianten är som en organisationshierarki Boxarna representerar sidor eller skärmbilder Linjerna representerar länkar 59
Butiker Teknisk info Produktinfo Manual Sitemap med storlek för att visa vikt Produkt -typ Policy Start Om oss Kontakt Kundtjänst FAQ 60
61 Wireframes (gjorda i Balsamiq) Design by Pirmin Buchenberg
Wireflows TAP SWIPE TAP TAP TAP 62
Från arbetsskisser till beskrivande och specificerande bilder 63
There is no such thing as a failed experiment, only experiments with unexpected outcomes. Buckminster Fuller 64
65 DESIGNPRINCIPER
Användbarhet (ISO 9241-11) 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. 66
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 67
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? 68
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 69
Dra nytta av konventioner Förväntningar om var saker finns, hur de funkar och hur de ser ut Style Guides and UI Guidelines http://blog.the-ux.com/?p=97 70
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 71
Dela upp sidor i tydligt avgränsade delar Använd rutnät och placera in komponenterna i det. T.ex. 960.gs 72
Gör det uppenbart vad som är klickbart 73
74
Eliminera distraktioner Använd mönster istället för clutter 75
76
77
Utforma innehållet för att stödja skanning 78
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 79
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. 80
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 81
82 NationWide / NASCAR
5 Years of Firefox 83
Links 84
85 Vimeo Profile Page Idea
86 New Local
87 Vimeo Clip Page Top Nav
88 Cartoonity.com UI Sketch
89 Early Ember Sketches
90 Wirethumbs
91 Web Layout Sketches
Original Twitter Concept 92
UPG1 Design Tre radikala koncept (4 timmar) En värderingsmatris (4 immar) Ett gränssnittsflöde (12 timmar) En litteratursammanfattning (20 timmar) 93
www.liu.se