Ramverksdesign Johan Åberg johan.aberg@liu.se
Innehåll Ramverksdesign Formfaktor & interaktionsramverk Principer & mönster Process Designspråk Principer & mönster Process
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
Formfaktor & interaktionsramverk principer & mönster
Organisera objekt och aktiviteter Organizer/workspace
Organisera objekt och aktiviteter Hub-and-Spoke
Organisera objekt och aktiviteter Wizards
Formfaktor & interaktionsramverk process
Process
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?
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) 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) Justera lutning av knappsats och display Justerbar hållare för att kunna luta hela kontorstelefonen
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?
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
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
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)
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.
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
Kundlista möjlig utgångspunkt i ett organizer/workspacemönster? Kundlista Exempel 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
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. Skissa skärmar och navigering
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.
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.
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.
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
Avstämning med intressenter Resultatet av ramverksdesignen tas upp med intressenterna Fattar beslut om hur gå vidare
Designspråk
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
Det handlar om att kombinera designattribut för att förmedla en sökt upplevelse
Upplevelseattribut Elite Inspired Sleek Prestigious Exceptional Unique Advanced Polished Elegant Approachable Inviting Helpful Professional Reliable Efficient Powerful Solid Trustworthy Competent
Designattribut Material Färger Former Mönster Texturer ytkvalitet, visuell eller fysisk Layouter Typsnitt Verdana Comic Sans
Designspråk - principer
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
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
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
På vilket sätt? Är grafisk design viktigt?
Första versionen
Som det blev
Ändrad målgrupp Barnfamilj Karriär
Ny version
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
Form Storlek Textur Ramar Färg Variera designattribut för att uppnå upplevelseattribut
Exempel Hårdvaruexempel: Executive Telephone Upplevelseattribut Exceptional Trustworthy Approachable
Upplevelseattribut Elite Inspired Sleek Prestigious Exceptional Unique Advanced Polished Elegant Approachable Inviting Helpful Professional Reliable Efficient Powerful Solid Trustworthy Competent
Elite Inspired Prestigious Exceptional Sleek Unique Advanced Polished Approachable Helpful Elegant Inviting Professional Reliable Efficient Solid Trustworthy Competent
Elite Inspired Prestigious Exceptional Sleek Unique Advanced Polished Approachable Helpful Elegant Inviting Professional Reliable Efficient Solid Trustworthy Competent
Inspired Elite Prestigious Exceptional Sleek Unique Advanced Efficient Solid Professional Reliable Trustworthy Competent
Exempel Mjukvaruexempel: NettApp Upplevelseattribut Complexity, simplified Brilliant Mature Empowering
Complexity, simplified Brilliant Mature - Empowering
Complexity, simplified Brilliant Mature - Empowering
Meal Planner tidigt utkast
Exempel utökad version
Detalj med symbolvarianter
Slutlig version
Slutlig version
Slutlig version