Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Avslutning om användare Postures Top-level patterns NetBeans-demo Idag Om onsdagsövningarna (9.00-11.45) Närvaro obligatoriskt Missar man är kursen inte godkänd Uppsamlingstillfälle räcker för en missad övning 1
Interaktionsdesignspraxis Fastställ behov och krav loop Utveckla alternativa designförslag Bygg interaktiva prototyper för kommunikation och analys Utvärdera designen baserat på prototyperna end loop Implementation Model User Mental Model Represented Model Modeller 2
Implementation Model Hur programmet är implementerat Klasser Databaser Händelser (Film vs TV) User Mental Models Eller Conceptual models Hur användarna tänker på systemet Skiljer sig ofta från hur det faktiskt funkar El Mobiltelefoner Celler i Excel. 3
Represented Models Eller presenterad modell Den modell programmet faktiskt visar för användaren Denna måste ligga så nära användarens som möjligt Hur tänker man Vad kan man Vilka förutfattade meningar har man etc Implementation vs Mental Mjukvara byggs alltför ofta på implementationsmodellen Designerns uppgift är att ta reda på användarens mentala modell Designa efter den Se till att detta implementeras Ju närmare desto bättre 4
Exempel Boolean Logic Användare förstår inte matematiskt tänkande Exempel AND och OR Betyder inte samma sak i vanligt och formellt språk Visa alla studenter från Partille AND Kungälv Resultat tomt Visa alla studenter från Partille OR Kungälv Det man antagligen menar Personas Vad gör man med resultatet från användarstudier? Anteckningar, inspelningar Hela poängen är att det ska hjälpa design Modell Ger en bild av verkligheten som ökar förståelse En modell av en användare skapad utifrån användarstudier kallas persona 5
Exempel Tanke Produkt för många olika användare Gör den så bred som möjligt så den passar alla? Effekten snarare att den inte passar någon Grejen är att hitta rätt användare att designa för Personas är modeller av användare där man tänkt igenom olika grupper Prioritera och designa utifrån dessa 6
2012-01-23 Olika mål En produkt? 7
Fördelar Personas kan användas för att Bestämma vad en produkt ska göra och hur den ska fungera. Personas mål utgör grunden för design. Kommunicera med stakeholders, utvecklare, andra designers. Stärka konsensus och engagemang inom gruppen lättare att relatera till än feature-lists och flödesdiagram Mäta hur bra designen är utgå ifrån vad personan skulle tycka och prova Bidra till utveckling av marknadsföring och försäljningsplaner Hjälper till att undvika The elastic user Self-refential design Edge cases forts The elastic user Genom att spika användarens egenskaper i en persona undviker man att låta användarens egenskaper förändras efter vad man känner för för tillfället Self-referential design Utvecklarna mappar sina egna önskemål, motiv, kunskaper etc på produkten. Personas hjälper till att undvika detta Edge cases Specialfall. Saker som kan hända men typiskt inte gör det för den persona man designar för. Dessa ska inte ha fokus i design. 8
Mer personas Personas bygger på användarstudier Hur mycket man vet avgör kvalité Personas presenteras som individer Gunnar, 22, IT-student Ökar inlevelseförmåga hos designers Personas representerar grupper av användare Specifik grupp användare Specifik applikation Beteendemönster Personatyper Primary Typiska målgruppen. Helst en Secondary Kompletterar primary med variationer Supplemental Behoven täcks av grupperna ovan T ex illustration Customer Användare!= kund Served Personer som påverkas av produkten Negative Visa vad man inte täcker 9
DESIGN Software Postures Talat om Beginners Intermediates Experts En komplementerande bild är att dela in program i Sovereign Transient Alla dessa parametrar ger input för design 10
Posture Ungefär: inställning, attityd, (hållning) Ett programs posture är något som måste bestämmas tidigt Är det Försynt Kaxigt Neutralt Tråkigt Färgglatt Hjälpsamt? Oavsett vilket, så ska det vara det av en orsak baserat på användarstudier. Mer posture Ett program kan ha flera olika postures för olika grupper Ett programs olika delar kan ha olika postures beroende på hur/ av vem/hur ofta/ etc de används Det bör dock finnas en överordnad posture 11
Platform Platform måste bestämmas tidigt också Givetvis olika program för Mobil Desktop Web Kiosk Game-console Etc Användarstudier Användarmodeller Mentala modeller Platform Posture Typiska kategorier Intermediate Expert Novice Vad har vi? 12
Postures enligt Cooper Soverign Posture Enväldig, härskande, suverän attityd/hållning Transient Posture Kortvarig, flyktig, övergående attityd/hållning Bara 2 kategorier, men kan vara användbart ändå Sovereign Posture Program som används under en längre tid med användarens fulla uppmärksamhet (helskärm) Utför ett antal relaterade uppgifter med dem under denna tid Exempel Word Excel E-mail NetBeans Vertical Applications Program för en smal niche (ofta specialbyggda) Journal och tidsbokning Videoaffär, bibliotek 13
Egenskaper Sovereign Intermediates vanligaste användare Optimera för fullscreen Körs under längre period Låt saker ta den plats som behövs Använd minimal visuell stil Konservativ stil Tröttnar på flärd/flashiga grejor Van -> saker kan vara ganska små Rich visual feedback Statusbar Titlebars etc Rich input Menyer, kortkommandon, drag&drop etc Exempel 1 14
Exempel 2 Egenskaper Transient Kommer och går En väl avgränsad uppgift Kort tid Användargränssnittet måste visa tydligt vad man ska göra Simple clear and to to the point Utför biuppgift Ta inte upp mer plats än vad som behövs (från sovereign) Bright and clear Kan ha ett starkare visuellt uttryck Men se till att instruktioner finns och är tydliga 15
Mer Keep it simple Ett fönster Inga små fippliga knappar etc Behövs det många dialogrutor har man designproblem Kom ihåg användarens val Kort tid Enklare om allt är likadant nästa gång Exempel 16
Användarstudier Användarmodeller Mentala modeller Platform Posture Sovereign Transient Typiska kategorier Intermediate Expert Novice Next Organizing the Content Vad har vi? Demo Egna paneler i NetBeans Properties Dra ut på designen CardLayout Controller Ngt om lab 2 Egen design Standardkomponenter bör räcka 3 vyer men måste inte vara 3 olika sidor 17
Organisera innehåll Tidwell kap 2 Har kunskap om användare, platform, posture,,, Organisera innehåll nästa steg Informationsarktektur Delar Logisk kategorisering utan gränssnittstankar Kategorier av innehåll Grupper av verktyg Indelning i olika sidor/paneler/fönster Struktur Dags att börja organisera i fönster/kontroller Först övergripande ansats Ett fönster? Flera fönster? Ett fönster som byter sidor? Flera paneler i ett fönster? Alla på en gång? Inget enkelt svar Användning/användare styr Vad är man van vid? Behöver man jobba med annat samtidigt Vilka delar måste finnas tillgängliga på samma gång? 18
Några vanliga Multiple Windows Tiled Panes One-Window paging De två första tillåter mycket mer frihet för användaren Är detta bra eller dåligt? Enskild sida Varje enskild sida gör en av Visa upp en sak Karta, bok, film, spel. Visa en lista av saker Tillhandahålla verktyg för att skapa ngt Underlätta en enskild uppgift Diverse mönster för varje grupp 19
Feature Search and Browse Feature Search and Browse Vad 3 element på huvudsida: feature, sökruta, lista att bläddra i När Man har långa listor som passar för att söka och bläddra. Vill erbjuda något direkt Varför Mycket vanligt. Söka och bläddra kompletterar varandra väl. Hur Sökruta längst upp. Feature center stage. Lista nära feature. Se till att feature visar intressant innehåll 20
2012-01-23 Exempel Wizard 21
Wizard Vad Led användaren steg för steg i given ordning När Flertal steg, användaren behöver hjälp och är villig att överlåta kontroll Varför Underlätta genom att dela i flera steg Hur Dela upp informationen Navigation Karta Wizard 22
Dashboard Dashboard Vad Samla flera datavyer i en informationsrik och anpassningsbar sida som uppdateras regelbundet När Applikationen sysslar med ett flöde av inkommande information som användaren har nytta av att se Varför Välkänd och igenkännlig stil. Finns på många ställen. Hur Bestäm information Välj komponenter 23
Alternative Views Vad Låt användaren välja mellan flera olika vyer som är signifikant olika När Applikationer som visar upp någon form av strukturerat innehåll som kan ses på olika sätt Varför En vy räcker inte för att fungera bra för allt som behövs. Genom att skifta synvinkel ges fler möjligheter och mer/annan information. Hur Designa speciella vyer för scenarios som inte fungerar bra med standardvyn. Visa dessa istället för standardvyn. Placera en switch för att byta vyer på något lämpligt ställe. 24
2012-01-23 Exempel Canvas Plus Palette 25
Exempel Many Workspaces 26
Many Workspaces Vad Använd flera tabbar/fönster på toppnivå så användaren kan ha flera sidor/projekt/filer/.. öppna samtidigt När Program där man betraktar/arbetar med någon slags innehåll Varför Folk multitaskar, underlättar därför byte fram o tillbaka Hur Tabbar Flera fönster Flera kolumner/paneler i ett fönster Exempel 27
Läs också Multi-Level Help Följande kan läsas kursivt News Stream Picture Manager Settings Editor Att göra Börja titta på lab 2 Läsa kapitel 2 i Tidwell Cooper om Mental Models Cooper om Posture Cooper om Personas måndag, tisdag onsdag Minst 7 timmar finns för att läsa 28