Praktiskt användande av användbarhetstekniker 1 (58)

Transkript

1 Praktiskt användande av användbarhetstekniker 1 (58)

2 Vem är jag? Lise-Lotte Thuse, Software Developer & Usability Expert, Industriell IT Kand. & Mag. i Informatik, inrikt. Systemutveckling & Usability 2 års lärarutbildning, SO-lärare 4-9 Arbetat med webbdesign, webbutveckling, testning, undervisning, etc Usability: Wireframing, prototyping, workshops, användartester, utvärderingar 2 (58)

3 Definitioner Usability The degree to which specific users can achieve specified goals in a particular environment with effectiveness, efficiency and satisfaction. Interaction Design Källa: ISO-9241 del 11 The practice of designing interactive digital products, environments, systems, and services. Källa: 3 (58)

4 Definitioner UX User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products. Källa: User experience design fully encompasses traditional Human-Computer Interaction (HCI) design and extends it by addressing all aspects of a product or service as perceived by users. Källa: 4 (58)

5 Measurements for Usability Effectiveness Efficiency measures of the accuracy and completeness of the goals achieved measures of the resources (e.g. time money, effort) used to achieve goals Satisfaction measures of the physical comfort and subject acceptability of the product to its users 5 (58) Källa: ISO-9241 del 11

6 Forskning inom Usability Guru inom området Usability Jacob Nielsen, Ten Usability Heuristics, Rolf Molich in 1990 Otaliga studier och rekommendatiotioner, böcker, föreläsningar etc. Källa: ISO-9241 del 11 6 (58)

7 10 riktlinjer för Usability i användargränssnitt 1: Visibility of system status Informera användarna om vad som händer, genom lämplig feedback inom rimlig tid. Exempel 1: Klickat på Upload the file visas progressbar Exempel 2: Lösenordstyrka visas grafiskt 7 (58)

8 10 riktlinjer för Usability i användargränssnitt 2: Match between system and the real world Prata ett språk användarna förstår. Följ konventioner ifrån den riktiga världen. Exempel 1: itunes Grupperas som i verkligheten 8 (58)

9 10 riktlinjer för Usability i användargränssnitt 2: Match between system and the real world Exempel 2: Mindomo Dra och släpp enkel organisering 9 (58)

10 10 riktlinjer för Usability i användargränssnitt 3: User control and freedom Användarna gör fel och behöver enkelt kunna ångra. Exempel 1: CollabFinder Enkelt fylla i och avbryta. 10 (58)

11 10 riktlinjer för Usability i användargränssnitt 3: User control and freedom Exempel 2: Wufoo Markera tydligt vart användaren är och vart de ska. 11 (58)

12 10 riktlinjer för Usability i användargränssnitt 3: User control and freedom Exempel 3: Numbers (Apple:s Excel ) Visa tydligt vart användaren redigerar. 12 (58)

13 10 riktlinjer för Usability i användargränssnitt 4: Consistency and standards Användare skall inte behöva fundera. Följ standard och konventioner. Exempel 1: Gmail Liknar en installerad mejlklient 13 (58)

14 10 riktlinjer för Usability i användargränssnitt 4: Consistency and standards Exempel 2: Microsoft Office Word, Excel, PowerPoint, etc har samma utseende på menyerna. 14 (58)

15 10 riktlinjer för Usability i användargränssnitt 5: Error prevention Designa för att undvika fel, t.ex. Är du verkligen säker fråga före viktiga val. Exempel 1: Update knappen blir inaktiverad så man inte dubbel-postar. 15 (58)

16 10 riktlinjer för Usability i användargränssnitt 5: Error prevention Exempel 2: Gör valen tydliga. 16 (58)

17 10 riktlinjer för Usability i användargränssnitt 5: Error prevention Exempel 3: Google Auto Recommend Automatiska förslag minimerar risken för felstavningar. 17 (58)

18 10 riktlinjer för Usability i användargränssnitt 5: Error prevention Exempel 4: Wikpedia Autofokus när man söker undviker en hel del frustration. 18 (58)

19 10 riktlinjer för Usability i användargränssnitt 6: Recognition rather than recall Minska informationen användaren måste se. Instruktioner skall vara synliga eller enkla att få när de behövs. Exempel 1: Visual Studio Intellicense, användaren behöver inte minnas klasser, metoder, etc. 19 (58)

20 10 riktlinjer för Usability i användargränssnitt 6: Recognition rather than recall Exempel 2: Word 2010 Font preview, istället för att bara se fontnamnet. 20 (58)

21 10 riktlinjer för Usability i användargränssnitt 7: Flexibility and efficiency of use Acceleratorer kan öka effektiviteten för vana användare. Exempel 1: Listor med kortkommandon. 21 (58)

22 10 riktlinjer för Usability i användargränssnitt 7: Flexibility and efficiency of use Exempel 2: Numbers Förhandsvisning av resultaten till vänster. 22 (58)

23 10 riktlinjer för Usability i användargränssnitt 8: Aesthetic and minimalist design Dialoger ska innehålla relevant och nödvändig information. Extra information tävlar om uppmärksamhet ifrån viktig information och gör den mindre synlig. 23 (58)

24 10 riktlinjer för Usability i användargränssnitt 8: Aesthetic and minimalist design Exempel 1: Kontain Kontrast: fet text Repetition: orange, blå och grön text visar media typer Justering: text vänster, drop-down höger Avgränsning: grå box avskiljer Tags 24 (58)

25 10 riktlinjer för Usability i användargränssnitt 8: Aesthetic and minimalist design Exempel 2: Harvest Avstånd gör det läsbart. Ljusgul färg på summeringar. 25 (58)

26 10 riktlinjer för Usability i användargränssnitt 9: Help users recognize, diagnose, and recover from errors Felmeddelanden skall: Använda vanligt språk (inga koder). Förklara vad problemet är. Föreslå en lösning. 26 (58)

27 10 riktlinjer för Usability i användargränssnitt 9: Help users recognize, diagnose, and recover from errors Exempel 1: Digg Ger omedelbar respons med specifika instruktioner. 27 (58)

28 10 riktlinjer för Usability i användargränssnitt 10: Help and documentation Hjälp informationen skall vara: Enkel att söka i. Fokusera på vad användarna kan göra i systemet. Hur användarna kan använda systemet utan långa förklaringar. 28 (58)

29 10 riktlinjer för Usability i användargränssnitt 10: Help and documentation Exempel 1: Picnik Ge hjälp i rätt kontext. 29 (58)

30 10 riktlinjer för Usability i användargränssnitt 10: Help and documentation Exempel 2: GoodBarry Video kan vara en bra introduktion. 30 (58)

31 10 riktlinjer för Usability i användargränssnitt 10: Help and documentation Exempel 3: Hjälpen besvarar de vanligaste frågorna för just det fältet. 31 (58)

32 10 riktlinjer för Usability i användargränssnitt 10: Help and documentation Exempel 4: BaseCamp by 37signals Help öppnar ett nytt fönster med sök, FAQ, videos, forum etc. 32 (58)

33 Hur utför man Usability Studier? - Arbetsprocess Definiera vad Usability är i projektet. Definiera mätvärden som är applicerbara i projektet. Sätt planerade nivåer för mätvärdena. Utför lämpliga Usability tester för att undersöka mätvärdena. Uppdatera designen efter resultat ifrån Usability testerna. Upprepa tills upprepa tills mätvärdena är uppnådda Källa: Howell Istance, De Montfort University 33 (58)

34 Exempel på mätvärden Tidsåtgång för att slutföra en uppgift. Procent av en samling uppgifter som utförs på given tid. Förhållandet mellan att lyckas & misslyckas att utföra en uppgift. Antal fel som görs. Tiden som spenderas på fel. Hur lång tid man använder för att hitta hjälp. Hur ofta man behöver hjälp för att utföra uppgifter. 34 (58)

35 Exempel på mätvärden.. Förhållandet mellan positiva resp. negativa åsikter ifrån användare. Antal repetitioner eller misslyckade kommandon för att utföra en uppgift. Förhållandet mellan bra resp. dåliga funktioner enligt användare. Antalet kort-kommandon som inte används. Antalet gånger som användare måste hitta alternativa lösningar för att lösa en uppgift. 35 (58)

36 Vanliga styrdokument i projekt Projektplan Testplan Kvalitétsplan Utbildningsplan och Usability Plan? 36 (58)

37 Vad kan en Usability plan innehålla? Beskrivning av Usability mätvärden. Hur de skall mätas (t.ex. workshops, enkäter, användarsamtal). Hur man skall uppnå de satta mätvärden. Målgruppen för systemet och testgrupp hos kunden. Förberedelser för tester (t.ex. utbildning, prototyping) 37 (58)

38 Praktiska exempel: Projekt 1 MES system för tillverkningsindustri Uppgradering av: VB6 applikation, SQL Server databas, Windows Services Till: Silverlight, SQL Server 2008, Windows Services Tid: till Deltagare: 1 projektledare, 4 projektdeltagare 2 st Client-Side utvecklare (inklusive Usability ansvarig) 2 st Server-Side utvecklare 38 (58)

39 Projekt 1: Usability aktiviteter Analys, omstrukturering och förenkling enligt användbarhetsprinciper av befintligt UI Wireframing i Balsamiq Möten, diskussioner och godkännande av UI via wireframes Prototyp testning, diskussioner med kund 39 (58)

40 Projekt 1: Gamla systemet En bild säger mer än 1000 ord 40 (58)

41 41 (58)

42 Projekt 1: Wireframes Skapade i Balsamiq och visade för kunden för att få godkännande innan utveckling av gränssnitt. 42 (58)

43 Usability Projekt 1: Wireframes En bild säger mer än 1000 ord 43 (58)

44 Projekt 1: Slutgiltiga resultatet Utvecklat i Silverlight mot SQL Server databas med hjälp av ett antal Windows services. 44 (58)

45 Usability Projekt 1: Slutgiltiga resultatet Utvecklat i Silverlight mot SQL Server databas med hjälp av ett antal Windows services. 45 (58)

46 Projekt 1: Fördelar med uppgraderingen Förenklade användargränssnittet avsevärt Lyfte fram viktig information för användarna, dolde mindre kritisk information Underlättade användarnas arbete Möjlig gjorde effektivare produktion genom analys av deras produktion 46 (58)

47 Åsikter ifrån Projekt 1: Projektledaren Kunden fort in i projektet & verifierade att vi förstått önskemålen Kunden gav feedback på layout, funktionalitet och innehåll Kunden såg systemet växa fram (genom prototyp tester) Vid installation fanns inga stora överraskningar för kunden Användare ifrån prototyptester behövde mindre utbildning på färdiga systemet 47 (58)

48 Åsikter ifrån Projekt 1 : Client-Side utvecklarna Utvecklare får snabbt veta vilken informationen som skall visas En bild säger mer än 1000 ord Smidigt vid utvecklingen att se hur det skulle se ut (m.h.a. wireframes) Sparar tid med wireframes jämfört med att göra en färdig applikation och visa i slutet - och fixa missförstånd Analysen gjorde systemet enklare att använda än förut och lyfte fram viktig information åt användarna 48 (58)

49 Åsikter ifrån Projekt 1 : Server-Side utvecklarna Var inte delaktig i prototyp testningen och påverkades bara indirekt av användbarhetsteknikerna Det vore bra att förmedla wireframes och resultat av prototyp tester tydligt till hela gruppen 49 (58)

50 Praktiska exempel: Projekt 2 MES system för tillverkningsindustri SIMATIC IT, Silverlight, Reporting Services, SQL Server, Windows Services, WinCC, m.m till huvudprojektledare, 1 delprojektledare, 7-10 delprojektdeltagare Usability ansvarig Testansvarig QA-ansvarig 50 (58)

51 Projekt 2: Usability aktiviteter Analys och strukturering enligt Usability och grafik riktlinjer Wireframing i Balsamiq Möten, diskussioner och godkännande av UI via wireframes Regelbundna möten med demos Prototyp testning, diskussioner med kund Grafiska riktlinjer & Usability riktlinjer Undervisning 51 (58)

52 Projekt 2: Gamla systemet Pappersblanketter och pärmar Dokumenterar produktionen manuellt 52 (58)

53 Projekt 2: Wireframes Skapade i Balsamiq i samband med workshops och Skype möten med kunden för att ge grunden för användargränssnittet. 53 (58)

54 Usability Projekt 2: Wireframes Skapade i Balsamiq i samband med workshops och Skype möten med kunden för att ge grunden för användargränssnittet. 54 (58)

55 Projekt 2: Tidig version av GUI Utvecklat i Silverlight med Visual Studio och Blend. 55 (58)

56 Usability Projekt 2: Tidig version av GUI Utvecklat i Silverlight med Visual Studio och Blend. 56 (58)

57 Åsikter ifrån Projekt 2 Kunden är positiv till wireframing och att få vara med i processen Delprojektledare positiv till Usability (var projektledare i projekt 1) Tidigt i implementationsfasen av projektet, avvaktar åsikter ifrån utvecklare 57 (58)

58 Vidareutveckling ifrån Projekt 1 till Projekt 2 Skype möten med kunden för snabbare beslutsvägar Utbildning av projektgruppen (sprida kunskap) Dokumenterade riktlinjer för Usability & Grafik Stort projekt och Usability ansvarig blir rådgivande roll (flera personer utvecklar UI) 58 (58)