Skissning. INL2 Mobil och webb: Skissning och motiverad utformning. Undervisningstillfällen. Omfattning och redovisning.

Transkript

1 2 Skissning Mattias Arvola With some material from presentations accompanying the book Sketching User Experiences, the Workbook, by S. Greenberg, S. Carpendale, N. Marquardt and B. Buxton INL2 Mobil och webb: Skissning och motiverad utformning För G-nivå ska du: i en idélogg skissa divergent (minst 10 olika idéer och 10 varianter på vald idé) I en reflektionstext på 1000 ord motivera fattade utformningsbeslut grundat i gränssnittsriktlinjer (ios, Android), -principer (Arvola), samt -mönster (Tidwell). Referera med sidhänvisning. För VG-nivå: I idéloggen arbeta fram ett tydligt förklarande gränssnittsflöde. I reflektionstexten analysera skillnader och likheter i mobildesignen jämfört med webbdesignen och dra lärdomar av det för framtida designarbete (max 500 ord extra. 3 Beskrivning av uppgift Välj en av följande webbplatser att designa om till en applikation för mobiltelefon: Lantmäteriet - Historiska kartor Riksarkivet - Heraldiskt register Statistiska centralbyrån - Hitta statistik Kemikalieinspektionen - Vägledning för konsumenter Dinsäkerhet.se Arbeta med skissning i en idélogg Säkerställ att du i allt relevant följer gränssnittsriktlinjerna för ios eller Android Förberedd en skisstavla till kritiksessionen. Skriv en reflektionstext där du motiverar och analyserar din design Omfattning och redovisning 50 arbetstimmar inklusive skrivning och läsning i vecka (utöver schemalagd tid). Muntlig redovisning av idélogg samt kritiksession med skisstavla. Inlämning av idélogg. Deadline: Skisstavlan redovisas på anvisad kritiksession vecka 43. Deadline för inlämning av idélogg med tillhörande reflektion är fredag 28/10 kl. 17:15 (lämnas i låda utanför Mattias kontor). Återkopplingsformer: Muntligen på kritiksessionen kring skisstavlan och kort skriftligen kring idéloggen. Undervisningstillfällen Fö Skissning (Arvola sid och sid ) Fö Navigation och interaktion (Arvola kap 4 och Tidwell kap 2-6, 8, och 10) Le Skissningsövningar Ha Grupphandledning 1 timme per grupp om 10 studenter. Re Kritiksession 2 timmar per grupp om 10 studenter.

2 8 Skisstavla Att skissa handlar inte om att rita Det handlar om design. Att skissa är ett verktyg för att: gestalta utveckla, och kommunicera designidéer Att skissa är en del av en process: idégenerering, utveckling av en design designbeslut, konstruktion Varför skissa och föra idélogg? 9 Skapa tidigt idéskapande tänka öppet om idéer tänka igenom idéer tvinga sig att visualisera hur saker ska gestalta sig i sin helhet brainstorming: skapa ett överflöd av idéer utan att bry sig om kvalitet uppfinna och utforska konceptidéer Dokumentera idéer som du utvecklar idéer som du hittar spara idéer att överväga senare Reflektera, dela, kritisera, besluta kommunicera idéer till andra bjuda in till reaktioner, kritik och alternativ välja idéer värda att jobba vidare med Utforska en idé: Få rätt design Utveckling och reduktion Design är att välja Utveckla gestalta och utveckla lösningar. De utgör dina valmöjligheter Reducera besluta om vilka som är värda att jobba vidare med Upprepa utveckla och reducera igen på de lösningarna Det finns två delar av processen där kreativiteten spelar in kreativiteten som krävs för att ta från en mångfald av meningsfulla och distinkta valmöjligheter mellan vilka du kan välja kreativiteten som krävs för att definiera mål, kriterier eller tumregler enligt vilka du gör dina val

3 13 14 Skissers egenskaper Snabba I rättan tid Kan förkastas Talrikliga Tydlig vokabulär framställning & visar att det är en skiss och inte en implementation inte högre än vad som krävs för att fånga kärnan Samstämmighet med var i processen du är förfiningen av framställningen motsvarar idéns utvecklingsfas Öppnande ofärdig, utrymme för att skapa Stram och exakt färdig, inget mer att göra Begränsad upplösning Minimalt med detaljer Ta endast med det som krävs för att gestalta det tänkta syftet eller idén Lämplig förfiningsnivå Gör skissen lika förfinad som idén: (a) Om du har en stabil idé, så gör du en skiss som ser mer definitiv ut (b) Om du har en vag idé, så gör du en skiss som ser grövre och och mindre definitiv ut Skisser föreslår Om du vill få ut så mycket som möjligt ur en skiss så måste du lämna utrymme för folk att fylla med sin fantasi En skiss Föreslår och utforskar snarare än bekräftar föreslår eller provocerar vad som skulle kunna vara En katalysator framkallar samtal och diskussion

4 19 20 Idélogg spåna många initiala idéer både bra och dåliga utforska och förfina idéer både på det stora och i det lilla utveckla variationer, alternativ och detaljer arkivera dina idéer för att överväga dem senare reflektera över hur tankegångarna ändras över tid kommunicera idéer till andra genom att visa dem välj vilka som är värda att utveckla vidare dokumentera goda idéer som du ser på andra håll klistra in inspirerande bilder från t.ex. tidningar ta, skriv ut och samla inspirerande foton Bär med dig och använd din idélogg ofta skissa var än du befinner dig den fungerar bara om du har den med dig Fyll sidorna med en enda välkomponerad idé en serie relaterade skisser på en designidé saker som kan inspirera till idéer 21 Skissa alternativ (få rätt design) olika aspekter av gränssnittet olika representationer av gränssnittet olika användningssituationer Skissa detaljer (få designen rätt) detaljerade skisser som utvecklar och förfina nyanser i gränssnittet Anteckna i skisserna beskrivningar som du inte kan rita, textuella tillägg, inspirationskällor, datum, andra relevanta detaljer Sudda inte ut idéer det är en dokumentation av alla idéer som dyker upp, dåliga såväl som goda Använd inte idéloggen till andra saker endast för design Det handlar inte om konst Idéer Variationer på idéer Anteckningar

5 25 Versioner av en idé 28 Pilar visar på relationer Flöden över tid Inspirationsmaterial Kladdskisser att tänka igenom saker medan man går ger nya och andra idéer samtal ger nya tankar en science fiction-film visar något intressant ett interaktionselement i något som du använder du vaknar upp ur en dröm heureka-tillfällen Fånga snabbt kärnan i en idé eller något du ser

6 31 32 Hur kladdskissar man? skissa mycket snabbt (några få sekunder) väldigt låg detaljeringsgrad fokus och emfas på kärnan i idén bortse från andra detaljer Testa Jag kommer att visa en bild 15 sekunder: välj och fånga en idé eller del från bilden 30 sekunder: kladda ned den Kladda ned den på 30 sekunder

7 37 Emfas: layout Detaljer: betonade strukturer på paneler, viktiga knappar och fält Abstraherat: ikoner, etiketter, text som kladdade karikatyrer Utelämnat: dekorationer, faktisk text, mindre viktiga komponenter Emfas: navigation i mappar Detaljer: annoterat interaktionssätt i navigationslisten Abstraherat: ikoner, etiketter och text är kladdade karikatyrer Utelämnat: dekorationer, faktisk text, mindre viktiga komponenter Från Pirmin Buchenbergs idélogg 41 Så att du kan göra det även i mörkret 42 Mellanmjölksskisser Fångar och förklarar ett ögonblick i interaktionstiden Består av flera grundläggande element

8 43 Skillnader i detaljgrad: Kladdskiss, mellanmjölksskiss, renritad Pilar betonar något av intresse binder samman olika delar av en skiss indikerar riktning 45 gestaltar rörelse betecknar en sekvens (interaktionsflöde) Anteckningar 44

9 49 50 Design rationale av Matilda Zetterblom Anteckingar av idéer om designelementen som inte finns med i bilden alternativa valmöjligheter till element i bilden +!? Alt # designproblem 52 Scenarios och storyboards Pia, Tom och Ola startar Minnesmark-appen för att gå på en datorförstärkt skattjakt. Pia väljer skattjakt och sedan beger de sig iväg. På platser längs med vägen tar de del av berättelser. Markörbaserad augmented reality används för att levandegöra berättelsen. Så att virtuella objekt bäddas in med kameravyn i bakgrunden. På en del platser finns panoraman som visar hur det såg ut förr i tiden. De ser man sig omkring i genom att hålla sin ipad framför sig och vända sig runt. Längs med vägen har de hittat skatter i form av media som i slutet av skattjakten skickas till Olas e-postadress. Vad bra att Olas lärare med hjälp av Minnesmark Editor, kunde sätta upp den här skattjakten åt dem. MINNESMARK Pia, Tom och Ola startar Minnesmark-appen för att gå på en datorförstärkt skattjakt. Pia väljer skattjakt och sedan beger de sig iväg. På platser längs med vägen tar de del av berättelser. Bjud med hjälp av ipadappen Minnesmark in till en datorförstärkt skattjakt där deltagarna kan utforska både den fysiska miljön och de media som du förberett. Använd editorn för att skapa skattjakten. Minnesmark är en ARbrowser (AR = augmented reality) som bygger på en princip om fysisk interaktion i den verkliga världen, vilket bidrar till en motiverande aktivitet. Deltagarna hittar skatter i form av media, som sedan skickas till dem via e-post i slutet av skattjakten. Med editorn kan vem som helst sätta ihop egna skattjakter. Markörbaserad augmented reality används för att levandegöra berättelsen. Så att virtuella objekt bäddas in med kameravyn i bakgrunden. På en del platser finns panoraman som visar hur det såg ut förr i tiden. De ser man sig omkring i genom att hålla sin ipad framför sig och vända sig runt. Mattias mattias.arvola@liu.se Längs med vägen har de hittat skatter i form av media som i slutet av skattjakten skickas till Olas e-postadress. Vad bra att Olas lärare med hjälp av Minnesmark Editor, kunde sätta upp den här skattjakten åt dem.

10 View the jigsaw 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 56 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 poster in the reception. Enter the Reset the Astrid's Home application region Skissa upp funktioner och innehåll Read printed instructions on See question marks where the Point the camera Listen to story and read Listen to story and read Listen to story and read Read printed Vad ska objekten ha för datatyp? how to solve the puzzle Point the camera to the jigsaw poster View the question marks where the lost pieces should 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) to the ground See in what direction the closest peice of the puzzle is, and also the directions to the pieces further away 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 instructions to raise the phone Raise the phone and view Kristin's house from the outside. instructions to raise the phone View someone walking on the roof top Point camera to marker and read instructions to turn around instructions Point the camera to the printed reset-marker Confirm the reset on screen Vilka tillstånd kan de vara i? Vad kan man göra med dem? Vilka attribut ska de ha? 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 Read instructions on screen sounds of owl chicken on the other side of the walls If all peices are found, read final instructions, Project: Digital Landscapes and go to view 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 Product: Minnesmark eggs, and read piece, and read reception Phase: Detailed Design instructions instructions Version: 1.3 Note: Content objects are bold. Actions are italic. MINNESMARK Object-Action Model Kravspecifikation 58 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. OBJECTS ACTIONS 3. Be able to view visual media 3. Foreground sounds 4. Movies 2. Not be able to reset the application by mistake. 5. 2D-images 6. 3D-objects 7. Panorama TC. TREASURE HUNT COMPASS F. FUNCTIONAL REQUIREMENTS D. DATA REQUIREMENTS 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 listen 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 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 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 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 panorama the reset dialog 60 Innehållsorganisation, kortsortering Webbkartor (sitemaps) Den enklaste varianten är som en organisationshierarki Boxarna representerar sidor eller skärmbilder Linjerna representerar länkar HOME

11 Webbkarta med storlek för att visa vikt Produktinfo Policy Butiker Produkt -typ Teknisk info Manual 61 En skiss visar gränssnittet men inte beteendet 62 Start Om oss Kontakt Kundtjänst FAQ Skärmbildsritningar (wireframes) i en storyboard Gränssnitts- eller skärmbildsflöden (wireflows) ger översikt Sekventiell visuell narrativ visar en serie ögonblicksbilder Skärmbildsritningar Design by Pirmin Buchenberg Förgrenade storyboard

12 67 Tillståndsdiagram 72 Förgrenade skärmbildsflöden Computer Telephone Last Name: First Name: Phone: Place Call Help Computer Telephone Help You can enter either the person's name or their Last Name: number. Then hit the First Name: place Phone:button to call them Place Call Return Help TAP SWIPE Computer Telephone Computer Telephone TAP Last Name: Greenberg First Name: Phone: Dialling... Last Name: Greenberg First Name: Cancel Phone: TAP Place Call Place Call Help Help TAP 14

13 Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 The Overview map (where are we?) Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284 Looking at the agenda and seeing that there is a 10am meeting with someone named Mary Ford Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p 284

14 Bill Buxton Sketching User Experiences, Morgan Kaufman Figure 99, p Skissningens språk Select Message Grundelement Linjer, rektanglar och cirklar är grändläggande element i skisserna Bekanta dig med dessa olika former och lek med linjetjocklekar och mönster Kombinera grundläggande skisselement för att komponera olika former och objekt 83 Skissteknik Enkelhet är nyckeln: försök att förenkla skissade objekt till ett minimum med detaljer Ikoner kan vara en bra inspirationskälla till hur man representerar objekt med enkla former 3D är oftast inte nödvändigt Skissa med snabba långa pendrag

15 85 86 Skissa folk Aktiviteter Kroppsspråk och känslor Ansikten och känslor

16 There is no such thing as a failed experiment, only experiments with unexpected outcomes. Buckminster Fuller 93 Från skisser till prototyper Skisser: tidigt i designprocessen för att ta fram idéer Prototyper: fångar eller detaljerar faktisk utformning 94 Early design Brainstorm different ideas and representations Choose a representation Rough out interface style Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Multitude of sketches Sketch variations and details Sketch or low fidelity prototypes Low to medium fidelity prototypes High fidelity prototypes Limited field testing Alpha/Beta tests Working systems Late design

17 97 Skissade pappersprototyper Görs tidigt i utvecklingsprocessen för att utforska idéer Interaktiva! Billiga, snabba och portabla Lätta att ändra, kan t.o.m. skapas under en session med användare Användare har lätt att föreslå förändringar Vad vill du testa? Ju finare de är desto mer fokuserar användare på utseende

18 104 Dagens föreläsning Skissning i idéloggen Skisstavlan Kortsortering Webbkartor (sitemaps) Skärmbildsritningar (wireframes) Gränssnitts- eller skärmbildsflöden (wireflows) mattias.arvola@liu.se