Ramverksdesign Johan Åberg johan.aberg@liu.se Innehåll Ramverksdesign Formfaktor & interaktionsramverk Principer & mönster Process Designspråk Principer & mönster Process 1
Målsättning med ramverksdesign Tillhandahålla en konkret och övertygande vision av vad produkten är, hur den fungerar, och hur den ser ut; Att göra detta så snabbt som möjligt så att intressenterna kan fatta välinformerade beslut med minimal investering; och Att försäkra att den design du förmedlar nu kan fås att hantera alla kända framtidsplaner, även om den är fokuserad på närtida release Ramverksdesign Formfaktor Interaktionsramverk Fokus på nytta Designspråk Uttrycker upplevelseattribut i visuell och fysisk form Fokus på upplevelse 2
Formfaktor & interaktionsramverk principer & mönster Organisera objekt och aktiviteter Organizer/workspace 3
Organisera objekt och aktiviteter Hub-and-Spoke Organisera objekt och aktiviteter Wizards 4
Formfaktor & interaktionsramverk process Process 5
6
Definiera datamodellen Objekt Definition Relationer Tillstånd Handlingar Attribut Kund En människa eller organisation vars husdjur har varit hos (eller ska komma till) en veterinär eller tekniker - Innehåller alltid ett eller flera husdjur - Innehåller alltid en eller flera fakturor - Ofullständig (påbörjad men saknar information) - Aktiv (aktuell kund) - Arkiverad - Skapa - Editera - Läsa - Arkivera - Hitta - Namn - Adress - Telefonnummer - E-mail - Kontobalans - Fakturahistorik Husdjur Ett djur som har varit hos (eller har en tid hos) en veterinär eller tekniker - Är alltid en del av en kundfil - Kan innehålla ett eller flera besök - Ofullständig (påbörjad men saknar information) - Aktiv (aktuell kund) - Behöver uppföljning - Arkiverad - Avliden - Skapa - Editera - Läsa - Hitta - Namn - Typ av djur - Ålder - Kön - Färg - Temperament - Hälsohistorik - Mediciner - Allergier Besök Ett tillfälle då husdjuret undersöks -Är alltid en del av en kundfil - Vanligtvis relaterad till en faktura - Ofullständig (påbörjad men saknar information) - Fullständig - Skapa - Editera - Läsa - Anteckningar - Beställda tester - Diagnoser - Recept - Belopp fakturerad - Uppföljning behövs Metod Utgå från de mentala modeller du extraherat från användarintervjuerna Fortsätt substantivjakten från kontextscenerierna (databehov) Kolla nya objekttyper mot personorna och kontextscenarierna Är objekttypen verkligen nödvändig för personan? Kommer objekttypen att vara förståelig för personan? 7
Definiera funktionella element Visningsområde för innehåll Videofilm, lista av e-postmeddelanden Verktyg eller kontroller Skärmwidgets, hårdvaruknappar som interagerar med skärminnehåll Utrymme för att placera knappar och kontroller Exempel - kontorstelefon Funktionellt behov Ringa upp kända kontakter eller kollegor Ringa nummer som inte finns i kontaktlistan Gå igenom meddelanden Hantera samtal (dröj, flytta) Justera lutning av knappsats och display Funktionellt element Kontaktlista som visas på skärmen Knappsats (fysisk eller virtuell) Meddelandedisplay på skärm, ljuduppspelning för fjärrstyrning Dröjknapp, flyttknapp (fysisk eller virtuell) Justerbar hållare för att kunna luta hela kontorstelefonen 8
Beslutskriterier Vilket alternativ Passar bäst för personorna och scenarierna Kräver minst ansträngning (mentalt och fysiskt) Är lättast att konstruera Kan generera extra inkomster Är mest hållbart ur ett ekonomiskt, socialt, och miljömässigt perspektiv Definiera möjliga plattformar Formfaktor Bärbar tablet, liten apparat som får plats i fickan, eller massivt bord i eget rum? I/O-tekniker Hur gör användaren för att navigera, välja, konsumera, och mata in data? Touchskärm, fysiskt tangentbord, röststyrning, eller en helt ny teknik? 9
Plattformar och arkitekturer Tre olika plattformar Två arkitekturer för samma plattform Definiera interaktionsramverket Generera nyckelscenarier Gruppera funktionella element Skissa storyboards Lägg till och ändra skisser baserat på fler scenarier Justera enligt valideringsscenarier 10
Nyckelscenarier Reviderade kontextscenarier Beskrivet flödet m.h.a. de viktigaste funktionella elementen Fokuserar på de viktigaste vägarna genom systemet Exempel - bokningssystem Personan Laura, receptionist på veterinärmottagning Mål Förbli lugn i kaoset Förhindra att personal och kunder blir irriterade Hålla reda på alla detaljer Aktiviteter Gå igenom dagens bokningar Skapa en fil för en ny kund Checka in någon Checka ut någon Skicka fakturor Följa upp fråga fakturafråga Följa upp fakturor som ej betalats i tid Göra en bokning Ändra en bokning 11
Kontextscenario: göra en bokning Kontextscenario Funktionella behov Funktionella element Laura tar emot ett samtal från Mr. Cowell, som behöver boka en tid för sin katt för att ta bort en tumör. Laura kollar upp honom och ser att han har två katter. - Kolla upp personer som ringer bland existerande kunder - Se översiktsinformation om varje kund och husdjur - Area för att se kundlista - Display av översiktsinformation för kund - Display av översiktsinformation för flera husdjur Xena är markerad för uppföljning, så hon verifierar att det gäller just Xena. Hon markerar kattens namn och väljer behandlingstyp. - Kunna se vilka husdjur som behöver uppföljning av något slag, utan att gå in i detalj - Kunna mata in besöksinformation - Visuell feedback på husdjursnamn för uppföljning - Area för att sätta besöksparametrar Systemet visar de närmast kommande icke-akuta besöken för Dr. Harvey, Xenas veterinär, då det material och utrymme som behövs för ingreppet också är tillgängligt. - Systemet ska känna till hur mycket tid och vilket utrymme och vilken utrustning som krävs för olika slags ingrepp - Systemet ska föreslå lämpliga tider då alla nödvändiga resurser finns tillgängliga, exklusive tider som reserverats för mer akuta ingrepp - Editerbara defaultinställningar som allokerar personaltid och resurser för ingrepp (admingränssnitt) - Display för de bästa besökstiderna Kontextscenario Funktionella behov Funktionella element Hon föreslår de första tiderna för Mr. Cowell, som säger att han hoppats kunna ta hand om problemet tidigare. Dr. Bailey har en öppning tidigare, men Mr. Cowell föredrar Dr. Harvey. Hon kan också se att Dr. Harvey har två öppningar som nästan matchar de gällande kraven, men inte riktigt fullt ut. Hon tittar på kalendern för att se vad som finns precis före och efter. En av bokningarna är bara Dr. Harveys administrativa tid. Hon flyttar fram den till senare samma dag och erbjuder Mr. Cowell denna tid, och han accepterar. - Kunna se andra tider som nästan funkar för att tillåta mänsklig värdering - Kunna göra justeringar bland bokningar - Display av bokningar som skulle kunna fungera om kalendern justeras - Kalenderdisplay av alla bokningar per veterinär Laura talar om för honom att han kommer att få en bekräftelse via posten. Kortet skrivs direkt ut på skrivaren på Lauras skrivbord. Laura avslutar samtalet och tar hand om kunden som väntar vid skrivbordet, och som är redo att checka ut. - För kunder som inte har e- mail, skriv automatiskt ut påminnelser - Inställningar för defaultutskrifter och e-mailpåminnelser (admingränssnitt) 12
Kontextscenario -> Nyckelscenario Laura tar emot ett samtal från Mr. Cowell, som behöver boka en tid för sin katt för att ta bort en tumör. Laura kollar upp honom och ser att han har två katter. Xena är markerad för uppföljning, så hon verifierar att det gäller just Xena. Hon markerar kattens namn och väljer behandlingstyp. Systemet visar de närmast kommande icke-akuta besöken för Dr. Harvey, Xenas veterinär, då det material och utrymme som behövs för ingreppet också är tillgängligt. Laura tar emot ett samtal från Mr. Cowell, som behöver boka en tid för sin katt för att ta bort en tumör. Laura hittar honom i kundlistan och öppnar hans fil för att se detaljer i displayarean för kundöversikt, som visar att Mr. Cowell har två katter, varav en är markerad för uppföljning. Hon tittar på displayarean för husdjursöversikt, och får bekräftat av Mr. Cowell att det gäller just Xena. Hon klickar för att skapa en ny bokning och väljer behandlingstyp i displayarean för bokningsparametrar. I displayarean för bästa bokningar visar systemet de närmast kommande icke-akuta besöken för Dr. Harvey, Xenas veterinär, då det material och utrymme som behövs för ingreppet också är tillgängligt. Hon föreslår de första tiderna för Mr. Cowell, som säger att han hoppats kunna ta hand om problemet tidigare. Dr. Bailey har en öppning tidigare, men Mr. Cowell föredrar Dr. Harvey. Hon kan också se att Dr. Harvey har två öppningar som nästan matchar de gällande kraven, men inte riktigt fullt ut. Hon tittar på kalendern för att se vad som finns precis före och efter. En av bokningarna är bara Dr. Harveys administrativa tid. Hon flyttar fram den till senare samma dag och erbjuder Mr. Cowell denna tid, och han accepterar. Hon föreslår de första tiderna för Mr. Cowell, som säger att han hoppats kunna ta hand om problemet tidigare. Dr. Bailey har en öppning tidigare, men Mr. Cowell föredrar Dr. Harvey. Hon kan också se två tider i displayarean för alternativa bokningar, som nästan matchar de gällande kraven, men inte riktigt fullt ut. Hon tittar i kalendern för att se vad som finns precis före och efter. En av bokningarna är bara Dr. Harveys administrativa tid. Hon flyttar fram den till senare samma dag och erbjuder Mr. Cowell denna tid, och han accepterar. 13
Gruppera funktionella element Vilka funktionella element hör ihop (på samma skärm)? Gör diagram som beskriver flödet mellan elementen för varje nyckelscenario Exempel Kundlista möjlig utgångspunkt i ett organizer/workspacemönster? Kundlista Displayarea för kundöversikt Displayarea för bokningsparametrar Displayarea för husdjursöversikt Kalender Displayarea för alternativa bokningar Displayarea för bästa bokningar 14
Skissa skärmar och navigering Laura tar emot ett samtal från Mr. Cowell, som behöver boka en tid för sin katt för att ta bort en tumör. Laura hittar honom i kundlistan och öppnar hans fil för att se detaljer i displayarean för kundöversikt, som visar att Mr. Cowell har två katter, varav en är markerad för uppföljning. Hon tittar på displayarean för husdjursöversikt, och får bekräftat av Mr. Cowell att det gäller just Xena. Hon klickar för att skapa en ny bokning. 15
Hon väljer behandlingstyp i displayarean för bokningsparametrar. I displayarean för bästa bokningar visar systemet de närmast kommande ickeakuta besöken för Dr. Harvey, Xenas veterinär, då det material och utrymme som behövs för ingreppet också är tillgängligt. Hon föreslår de första tiderna för Mr. Cowell, som säger att han hoppats kunna ta hand om problemet tidigare. Dr. Bailey har en öppning tidigare, men Mr. Cowell föredrar Dr. Harvey. Hon kan också se två tider i displayarean för alternativa bokningar, som nästan matchar de gällande kraven, men inte riktigt fullt ut. Hon tittar i kalendern för att se vad som finns precis före och efter. En av bokningarna är bara Dr. Harveys administrativa tid. 16
Hon flyttar fram den till senare samma dag och erbjuder Mr. Cowell denna tid, och han accepterar. Laura talar om för honom att han kommer få en bekräftelse via posten. Kortet skrivs direkt ut på skrivaren på Lauras skrivbord. Laura avslutar samtalet och tar hand om kunden som väntar vid skrivbordet, och som är redo att checka ut. 17
Justera enligt fler scenarier Valideringsscenarier Informella tester på formen Vad skulle hända om? Vad skulle hända om Mr. Cowell ville boka en tid för båda katterna på en gång? Om man kan resonera sig fram till att det skulle kunna gå att fixa med nuvarande ramverk utan större ändringar -> OK Annars: omdesign 18
Avstämning med intressenter Resultatet av ramverksdesignen tas upp med intressenterna Fattar beslut om hur gå vidare Designspråk 19
Designspråk allmänt Vad är ett designspråk? Ett exempel på ett systems visuella uttryck Frikopplat från interaktionsramverket Viktiga interaktiva element designas och sätts ihop till ett exempel på en helhet Knappar Typsnitt Färger etc 20
Det handlar om att kombinera designattribut för att förmedla en sökt upplevelse Upplevelseattribut Inspired Elite Sleek Prestigious Exceptional Unique Advanced Polished Elegant Approachable Inviting Helpful Professional Reliable Efficient Powerful Solid Trustworthy Competent 21
Designattribut Material Färger Former Mönster Texturer ytkvalitet, visuell eller fysisk Layouter Typsnitt Verdana Comic Sans Designspråk - principer 22
Färglära - HSB Nyans (hue) Mättnad (saturation) Ljusstyrka (brightness) För många färger gör det svårt att upptäcka skillnader 23
För många färger gör det svårt att upptäcka skillnader Den gula cirkeln syns tydligare om det inte finns en massa andra färger omkring den Upplevelse av färger resultat från studier Färger utblandade med vitt upplevs mjukare En mörkare variant av en färg upplevs mer mogen Skinande metalliska varianter av en nyans upplevs kallare och mer hightech Rött upplevs som en energirik färg 24
Linjevikt & stil Tunna skarpa linjer upplevs precisa och sofistikerade Tjocka linjer är enkla, vänliga och ibland barnsliga Designspråksstudier Snabba utforskningar av hur upplevelseattribut kan representeras Varje attribut representerar en strategi Varje studie fokuserar på ett attribut Ej skärmdumpar eller färdig hårdvara Fokus på första 5-sekundersreaktionen 25
På vilket sätt? Är grafisk design viktigt? Första versionen 26
Som det blev Ändrad målgrupp Barnfamilj Karriär 27
Ny version 28
Designspråk process Metod Välj ut lämpliga visuella element som passar applikationen Webbsajt: foto, knapp, tabb, länk, etc Foga ihop dessa på ett generiskt sätt, men som ändå passar applikationen Ska ej representera interaktionsdesignen För varje upplevelseattribut Utforska vilka designattribut som tillsammans bäst representerar upplevelseattributet Notera: Viktigt att jobba med visuella upplevelseattribut 29
Form Storlek Textur Ramar Färg Variera designattribut för att uppnå upplevelseattribut Exempel Hårdvaruexempel: Executive Telephone Upplevelseattribut Exceptional Trustworthy Approachable 30
Upplevelseattribut Inspired Elite Sleek Prestigious Exceptional Unique Advanced Polished Elegant Approachable Inviting Helpful Professional Reliable Efficient Powerful Solid Trustworthy Competent Inspired Elite Sleek Prestigious Exceptional Unique Advanced Polished Elegant Approachable Helpful Inviting Professional Reliable Efficient Solid Trustworthy Competent 31
Inspired Elite Sleek Prestigious Exceptional Unique Advanced Polished Elegant Approachable Helpful Inviting Professional Reliable Efficient Solid Trustworthy Competent Inspired Elite Sleek Prestigious Exceptional Unique Advanced Professional Reliable Efficient Solid Trustworthy Competent 32
Exempel Mjukvaruexempel: NettApp Upplevelseattribut Complexity, simplified Brilliant Mature Empowering Complexity, simplified Brilliant Mature - Empowering 33
Complexity, simplified Brilliant Mature - Empowering Meal Planner tidigt utkast 34
Exempel utökad version Detalj med symbolvarianter 35
Slutlig version Slutlig version 36
Slutlig version 37