Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1

2 Idag Lite av varje Utvärdering Rapport JComboBox? Tenta 55% av betyget Hjälpmedel 1 A4 (2 sidor) med egna anteckningar skrivna för hand eller på dator Innehåll (kort version) Allt som gåtts igenom på kursen Tidwell förutom kap 8 Utdelat material Föreläsningar Info Måndag gästföreläsning Erik Fagerholt iphone/ipad/små skärmar Onsdag uppsamlingsheat Ledigt för de som gjort alla övningar Nästa onsdag (9/3) Test (cognitive walkthrough) på projekt Behöver vara rimligt klart Onsdag 11/3, fredag 11/3 Demo av projekt Återkommer med detaljer Frågor? 2

3 Repetition - användbarhet Oftast vill man att ens produkter ska ha hög användbarhet Det finns ett antal standardfaktorer man tittar på Sen undersöker man produkten för att förbättra dessa Usability a product should be Effective to use (effectiveness) Efficient to use (efficiency) Safe to use (safety) Having good utility (utility) Easy to learn (learnability) Easy to remember (memorability) Bra? 3

4 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 Utvärderingstekniker kommer in under hela processen då utvärdering sker i varje varv Val av utvärderingsteknik beror bl a på hur långt man kommit i utvecklingen Utvärdering Utvärdering är något som bör pågå kontinuerligt under utvecklingsprocessen Interaktionsdesignsprocessen har en utvärderingsfas i varje cykel Tidig utvärdering kan göra att man undviker att lägga resurser på att utveckla fel produkt Kollar på funktionalitet och användbarhet Avser såväl design som implementering 4

5 Mål med utvärdering Utvärdera systemets funktionalitet Alla önskade funktioner finns Alla funktioner är lätta och nå Alla funktioner motsvarar användarnas förväntningar Utvärdera systemets effekt på användaren Lätt att lära Trevligt att använda (satisfaction) Excise/overload Identifiera specifika problem Detaljer som inte funkar som förväntat Viktigt att korrigera innan release Huvudkategorier Utvärdering av experter Designer Usability-expert Mäter inte hur systemet verkligen funkar utan bara om det är designat enligt bästa rådande principer Utvärdering med faktiska användare Testar om systemet faktiskt funkar för avsedda personer Fältstudier Laboratorieexperiment 5

6 Expertutvärdering Utvärdering av experter kan utföras under hela designprocessen och är förhållandevis enkelt och billigt 4 metoder Cognitive walkthrough Heuristic evaluation Use of models Use of previous work Cognitive Walkthrough Jmfr code walkthrough där man stegar igen delar av koden för att se vad som händer Främst inriktat på att man kan lära sig systemet genom att utforska det Det är så de flesta gör En expert walks through/stegar sig igenom olika uppgifter för att hitta eventuella problem Genomgången stöds av ett formulär Efteråt sammanställer man eventuella problem Det är förstås mycket viktigt att detta görs systematiskt 6

7 Cognitive Walkthrough, forts För cognitive walkthrough behövs 1. En prototyp Behöver inte vara färdigt system, men nära hur man tänkt sig 2. En beskrivning av uppgiften användaren ska utföra 3. En fullständig lista över de steg användaren behöver göra för att utföra uppgiften 4. Info om vem användarna är och vilken kunskap och erfarenhet testarna kan anta att de har. Cognitive Walkthrough, forts För varje steg i listan i 3 ovan försöker testarna besvara följande frågor 1. Motsvarar handlingen användarens mål i den givna situationen? Är det man ska göra det man vill? 2. Kommer användarna att se att handlingen som ska utföras finns tillgänglig? T ex syns meny/knapp man ska använda? 3. När användaren hittat rätt handling, kommer de att veta att det är den de behöver? Det är en sak att en knapp syns en annan att man förstår att den ska användas 4. När handlingen utförts kommer användaren förstå den feedback som ges? Dvs vet man om man lyckats eller ej? 7

8 Heuristic Evaluation Man identifierar en uppsättning användbarhetskriterier (heuristics) Kollar på Nielsens 10 heuristics Sen låter man experter utvärdera designen och undersöka om de principer man valt följs Flera utvärderare som testar oberoende 3-5 utvärderare fångar 75% av problemen Kan användas på specifikationer, prototyper och färdiga system Enkelt och billigt Jakob Nielsens heuristics Jakob Nielsen välkänd usability-guru, se Detta är ytterligare en uppsättning principer det är allmänbildning att ha hört talas om. Tänkta bl a för att kunna användas i utvärdering Fungerar också som designprinciper Visibility of system status Systemet ska alltid hålla användaren informerad om vad som sker Match between system and real world Systemet ska alltid följa användarens modell och termer istället systemmodell och terminologi. Följ real-world conventions. User control and freedom Användare väljer ofta fel väg och behöver nödutgång för att komma tillbaka enkelt. Stöd undo och redo. 8

9 Nielsens heuristics, forts Consistency and standards Man ska inte behöva fundera på om saker betyder vad de brukar. Följ plattformskonventioner. Error prevention Ännu bättre än felhantering är att se till att inga problem uppstår. Leta efter problemsituationer och begär konfirmation för farliga handlingar Recognition rather than recall Minimera användarens minnesbelastning genom att visa det som kan utföras. Man ska inte behöva komma ihåg saker från en dialog till en annan. Instruktioner ska vara synliga eller lättåtkomliga när det behövs. Nielsens heuristics, forts Flexibility and efficiency of use Shortcuts o accelarators kan ofta snabba upp interaktionen för erfarna användare. Erbjud möjlighet att anpassa vanliga actions. Aesthetic and minimalist design Dialoger ska inte innehålla information som är irrelevant eller sällan behövs. Varje bit onödig information slåss om uppmärksamhet med den relevanta informationen och minskar dess synlighet 9

10 Nielsens heuristics, forts Help users recognize, diagnose and recover from errors Felmeddelanden ska uttryckas på vanligt språk (inga felkoder), tala om precis vad problemet är och föreslå en konstruktiv lösning Help and documentation Även om det är bäst om systemet kan användas utan hjälp så kan den behövas. Hjälp ska vara lätt att nå, lätt att söka i, fokuserad på användarens uppgift, lista konkreta stega att göra och inte vara för stor. Modeller och tidigare arbete Model-based evaluation Använder kognitiva eller designmodeller för design GOMS Goals, operators, methods, selection Förutspå problem utifrån modellen Även andra varianter som dialogmodeller Use of previous work Dyrt göra studier Man kan därför söka i litteraturen efter tidigare arbeten som stöder eller motsäger den design man föreslår Designmönster kan vara ett exempel 10

11 Utvärdering med användare Expertutvärdering är mycket användbart men kan inte ersätta faktiska tester med riktiga användare Görs ofta i senare faser av utvecklingen I början måste man förstås lära känna sina användare också Kräver typiskt någon forma av system att testa Huvudkategorier Labstudier Fältstudier Labstudier Fördelar Tillgång till specialutrustning Inga störningar från miljön Nackdelar Kontexten saknas Man kanske studerar saker som aldrig sker på riktigt Svårt att observera samarbete Lämpligt Om systemet används på farligt eller svåråtkomligt ställe Man vill studera kontrollerad manipulation 11

12 Fältstudier Fördelar Naturlig omgivning Kontext (observation kan störa/ändra) Studier över lång tid möjliga Nackdelar Störningar, distraktion Oväsen Lämpligt När kontext är viktig Studier över lång tid Experimental Evaluation Kontrollerad utvärdering av specifika aspekter av interaktion Bevisa att något är på ett visst sätt Utvärderaren väljer en hypotes som ska testas Man ställer upp ett experiment där vissa förhållanden undersöks genom att man varierar vissa saker och håller andra konstanta Sen mäter man och mappar resultat på de olika förhållanden experimentet görs under 12

13 Faktorer i experiment Deltagare Vem representativa, tillräckligt många Statistisk analys minst 10 Variabler Saker man varierar och mäter Hypotes Det man vill visa Experimentdesign Hur man utför experimentet Variabler Independent variable (IV) Något man ändrar för att framställa olika villkor Stil på GUI:t Antal menyelement Dependent variable (DV) Något som mäts i experimentet Tid Antal fel Antal klick 13

14 Hypotes Förutsägelse/antagande om resultatet Uttrycks i termer av IV och DV T ex antalet fel kommer att öka när fontstorleken minskar Null hypothesis Säger att ingen skillnad kommer att kunna iakttas Antalet fel påverkas inte av fontstorlek Målet är att motbevisa detta Experimentdesign Within groups design Varje deltagare utför experimentet under samtliga villkor Kan leda till överförande av inlärning Mindre kostsamt Inga problem från olika användare Between groups design Varje deltagare deltar bara under ett villkor Inga problem med överfört lärande Fler deltagare behövs Variation bland användare kan påverka resultat 14

15 Analys av data För att visa att resultaten man får är giltiga gör man typiskt statistisk analys på materialet Typ 95% säkert att fontstorlek påverkar antalet fel Innan man börjar bör man Spara originaldata Titta på datan Val av statistisk metod beror på Typ av data Vilken information man vill ha ut Typiska kategorier av data Diskret ett ändligt antal värden Kontinuerlig godtyckliga värden Analys av data, forts Vad är man ute efter? Finns det (verkligen) en skillnad? Hur stor är skillnaden? Hur korrekt är resultatet/uppskattningen Statistiska metoder är en vetenskap i sig och ingår inte i denna kurs. Man kan skumma igenom texten för att få en bild av vad det handlar om. 15

16 FÄLTSTUDIER Observationsmetoder För att samla in information om faktisk användning samlar man ofta in data genom att observera användare när de använder systemet. Typiskt utförs specificerade uppgifter Det finns lite olika metoder: Think aloud Cooperative evaluation Protocol analysis Automated analysis Post-task walkthroughs 16

17 Think aloud Tänka högt Man iakttar användaren när han/hon utför uppgifter Användaren uppmanas att beskriva vad han gör och varför, vad man tror händer etc Fördelar Enkelt, kräver inte mycket expertis Kan ge värdefulla insikter Kan visa hur systemet faktiskt används Nackdelar Subjektivt Selektiv info Att beskriva samtidigt kan påverka hur man gör saker Cooperative evaluation Variation på tänka-högt Experten deltar mer aktivt i utvärderingen, samarbetspartner Anändare och utvärderare kan ställa frågor till varandra under hela session Fördelar Mindre begränsat och enklare att använda Användaren uppmuntras att kritisera systemet Mer möjligheter till förklaringar/följdfrågor 17

18 Protokollanalys Nyttan av observationsmetoder beror på hur bra man kan notera och samla in det som kommer fram. Kallas protokoll Analys kan utföras på flera sätt Papper o penna billigt, begränsat till skrivhastighet Ljudinspelning bra för tänka högt, synka med notes svårt Video bra data, kräver utrustning, inkräktar Dataloggar automatiskt, diskret, mycket data att analysera User notebooks mest för studier över tid Ofta blandar man flera metoder i verkligheten Audio/video-transkription är inte enkelt Frågetekniker Att ställa frågor till användarna ofta bra sätt att få information Resultat subjektiva Även mycket användbart under tidiga faser för att skapa en bild av användarna och deras behov Två huvudkategorier Intervjuer Enkäter/frågeformulär 18

19 Intervjuer Analytiker ställer frågor till användarna en och en med förberedda frågor Informellt, subjektivt, ganska billigt Fördelar Kan anpassas till situationen Man kan gå vidare och utforska frågor på djupet Kan få fram användarnas åsikter och oförutsedda problem Nackdelar Mycket subjektivt Tar lång tid Intervjuer, forts Det är viktigt att förbereda frågor i förväg Ofta delar men in intervjuer i 3 kategorier Structured interview Man har vissa förberedda frågor och ställer bara dessa Semi-structured Man har förberedda frågor men går också vidare med följdfrågor för att utforska svar vidare Open Mer som en diskussion Semi-structured antagligen vanligast 19

20 Enkäter En uppsättning bestämda frågor som ges till användare Fördelar Snabbt och når en stor användargrupp Kan analyseras mer rigoröst Nackdelar Mindre flexibelt Går mindre på djupet Enkäter, forts Behöver noggrann design Vilken information efterfrågas Hur ska svaren analyseras Typer av frågor Allmänna Öppna (open-ended) Skalära Flerval Rankade 20

21 Frågetyper Allmänna Samlar in bakgrund om användaren Ålder, kön, yrke, bostadsort, datorvana Öppna Möjlighet att skriva vad man vill Kan du föreslå förbättringar för gränssnittet? Svåra att analysera men kan ge information man inte tänkt på Skalära Det är lätt att rätta till fel 1-5 Skalan viktig, 1-3 kan var för lite, 1-10 för mycket 1-5 eller 1-7 funkar ofta bra Frågetyper, forts Flerval Ett antal rutor eller checkboxar Ofta bra för att samla information om tidigare erfarenheter Ja/nej är ett specialfall Rankade Ordna ett antal alternativ Bra för att ta reda på vad man föredrar Frågeformulär bör testas innan man skickar ut dem av 4-5 användare Det är vanligt med låg svarsfrekvens (20-30%) Påverkar förstås hur representativa svaren kan anses vara 21

22 Välja evalueringsmetod När i processen: design vs implementation Typ av evaluering: laboratorie vs fält Hur objektiv: subjektiv vs objektiv Typ av mätningar: kvalitativa vs quantitative Nivå på information: hög nivå vs låg nivå Grad av interference: obtrusive vs unobtrusive Resurser som finns: tid, deltagare, utrustning, expertis PROJEKTRAPPORT 22

23 Allmänt Max 15 sidor Viktigast Reflektion kring arbetet och resultatet Beskriva produkten Använd bilder för att visa designen 15 sidor försvinner lätt Deadline 18/3 kl Innehåll Man måste inte organisera rapporten på ett visst sätt. Men följande är en möjlighet Titelsida Abstrakt Innehållsförteckning 1 Inledning 2 Bakgrund (kanske inte behövs) 3 Koncept (översiktlig beskrivning av imat) 4 Realisering (design och implementationsprocessen) 4.1 Pappersprototyp 4.2 Test och utvärdering 4.3 Mjukvaruprototyp 5 Resultat (beskrivning av slutresultatet) 6 Diskussion 23

24 forts 1 Inledning Sidan 1 Startar berättelsen Hellre I dagens samhälle erbjuds alltfler tjänster på internet.. än Detta är en projektrapport på kursen Sammanfattar lite om problemställning och arbete 2 Bakgrund Kanske inte behövs Här kan man berätta lite av varje som sätter rapporten i ett sammanhang Kan också behandla liknande andra saker som gjorts forts 3 Koncept Översiktlig beskrivning Konceptet är en online mataffär för äldre Någon bild 4 Realisering Beskriv hur arbetet genomfördes 4.1 Pappersprototyp Om pappersprototypen och hur den utvecklades 4.2 Test och utvärdering Om testning och vilka eventuella ändringar som gjordes 4.3 Mjukvaruprototyp Om byggandet av programmet 24

25 forts 5 Resultat Beskriv er prototyp och de tankar och designmönster som ligger bakom 6 Diskussion Diskutera er prototyp och arbetet med att ta fram den. Reflektera kring vad som är bra och mindre bra Ta upp förslag på förbättringar JCOMBOBOX 25

26 Exempel i NetBeans Bygger upp GUI med panel New File - > Swing GUI Forms -> JPanel För info om JComboBox Vad har vi? Användarstudier, mentala modeller, personas Platform & Posture kategorier intermediate, expert, novice Organisera innehåll - lista objekt, handlingar,,tiled panes, single windows Mönster two-panel selector, one-window drilldown Minimera navigation & Navigationsmönster clear entry points, global navigation Visuell hierarki, grouping & alignment visual framework, titled sections, card stack Ett antal olika sätt att utföra handlingar och affordances Button groups, action panel Shneidermans och Nielsens principer Flow, Showing complex data Cascading lists, row striping Getting input from user En massa kontroller, Structured format, input hints Eliminating excise tips/regler för att undvika krångel Making it look good (färger etc) och lite om non-desktop Utvärderingstekniker - Summan av detta saker att utgå från i en top-down process 26