TNM040 Kommunikation och användargränssnitt HT2016, FÖ7 Deadline projektgrupper idag Mailar kontaktansvarig om tid för avstämning (tider v40) Deadline individuell uppgift kritisk granskning nu på onsdag 5e, inlämning via e- post till Camilla Rättning av rapporter klar v44 (31 okt- 4nov) Idag Språk Språk Hur vi når information på en skärm och ytterligare några designprinciper Utvärdering Metaforer Blue Tooth (blåtandskommunikation) varför heter det så? Metaforer Blue Tooth (blåtandskommunikation) varför heter det så? 1
10/3/16 Metaforer Metaforer Liknelser - begrepp och existerande m entala m odeller används för att karaktärisera och förklara det som är okänt - överföring från en domän till en annan. Används för att främja förståelse och organisera tänkande. Kan användas för att designa ändamålsenliga och effektiva sätt att kommunicera Metaforer Metaforer För att organisera en hel arbetsyta på en skärm, tex skrivbord. För att utföra något, tex drag- och- släpp, navigation via karusell Genom exempelvis ikoner som avbildar något meningsfullt för användaren, tex. filer/mappar, fönster. skrivare etc. Tar upp lite utrymme (mindre än text) Känns (ofta) igen snabbare än text Oberoende av språk (bra för användning i olika länder) Är oftast estetiskt tilltalande Det första en användare gör är att försöka förstå/lista ut vad något är innan man klickar på det (öppnar det) Viktigt med design och igenkänning/förståelse av ikoner Den metafor som valts bidrar starkt till igenkänning av vad/vilken funktion de representerar 2
Två viktiga saker att tänka på vid design: 1) Tolkning (vad ska ikonen förmedla) kan vara svårt, en ikon kan förstås vad gäller en bild/ett objekt men vara oförståelig vad gäller dess betydelse ikoner med text? (för att förhindra att deras betydelse inte framgår) men då försvinner fördelen med att använda ikoner (koncisa, små, sparar plats etc). Olika sätt på vilket en ikon kan representera ett underliggande koncept Godtycklig (arbitrary) Symbolisk (symbolic) Likhet (resemblance) Godtycklig Har ingen relation till avsedd betydelse så en association måste läras in Inte nödvändigtvis dålig design även fast den måste läras in Symbolisk Refererar till ngt (handling, objekt eller begrepp) som ligger på en högre abstraktionsnivå än bilden i sig bilden av ett vinglas med en spricka förmedlar begreppet ömtåligt (här ömtåliga varor, inte bara vinglas) 3
Likhet Presenterar en likartad/jämförbar avbildning av något (objekt, funktion etc.) Ikonen är en reproduktion av ett objekt, funktion Vägskylten för fallande stenar presenterar en direkt likhet med den fara den varnar för Två viktiga saker att tänka på vid design: 1) Tolkning (vad ska ikonen förmedla) kan vara svårt, en ikon kan förstås vad gäller en bild/ett objekt men vara oförståelig vad gäller dess betydelse med text? (för att förhindra att deras betydelse inte framgår) men då försvinner fördelen med att använda ikoner (koncisa, små, sparar plats etc). 2) Läsbarhet (avser om man kan se/skilja mellan ikoner eller inte) ikoner visas inte alltid under ideala förhållanden (svag eller stark belysning, skärmupplösning, storlek på själva ikonen) under vissa förhållanden är det ikonens utseende som styr dess uppfattning och urskiljbarhet, ikoner ska inte designas så att de bara varierar/skiljs åt av små detaljer. När man designar för en telefon/platta måste man tänka på att och hur dessa ska hållas i handen, det handlar inte bara om vad som visas på skärmen. Hur vi når information på en skärm Tänk på var du placerar information/navigering. Ska vara lätt att se och nå, synas tydligt och inte döljas av fingrar. Heller inte vara jobbig att använda. Tänk på att det vi når lätt kanske vi inte ser lätt! Placera knappar som inte används ofta/som ger allvarliga fel på ställen som är svåra att nå. 4
En människas fingertopp är ca 16-20mm. (När vi använder en touchskärm är det som att navigera med en prinskorv:- ). Kontroll för att ändra layout är för liten för att man ska kunna trycka på den/träffa den med säkerhet. Tänk på: Storlek (1x1cm rekommenderas, oftast mindre i standarder för olika plattformar ) Mellanrum TESTA Knapparna är tillräckligt stora men det är för litet mellanrum mellan dela och edit. Knappar med bra storlek och bra mellanrum. Undvik att det här händer! Hur vi når information på en skärm Hur vi når information på en skärm Placera saker som inte görs så ofta på ställen som är svårare att nå. Gör medvetet vissa saker svåra att göra. tex sådant som ändrar information, tar bort information etc. Placera sådant som är viktigt/intressant/som ska ske just nu där det är lätt att nå, och gör kontrollerna stora. Placera sådant som används ofta längst ned (överst på Android för att undvika att man trycker på fysiska knappar istället). Begränsningar (constraints) Konsekvens (consistency) Smarta lösningar för att stötta användaren och hjälpa denne att undvika misstag, onödiga handlingar Begränsar de handlingar som kan utföras av användaren Inkonsekvens leder till ineffektivitet, förvirring, osäkerhet, rädsla Du kan inte kopiera, klippa etc. ut förrän du har markerat något. 5
10/3/16 Konsekvens (consistency) Sidlayout (se föreläsning Användbarhet TNMK30 2015) Användare klickar ofta på knappar och länkar utan att titta så noga på dem. Deras uppfattning av en skärmyta baseras mer på tidigare erfarenhet än av vad som faktiskt står på den. Om vi letar efter något men det är placerat på en annan plats än vad som är brukligt, eller om det ser annorlunda ut än det brukar kan vi missa det. Vi letar efter det förväntade på en förväntad plats. Användare förväntar sig att saker finns på samma ställe som de brukar finnas på Logo Navigering Sök Logga in Var konsekvent i din design. Följ konventioner i så stor utsräckning som möjligt. Grunder i sidlayout - Visuell hierarki (se föreläsning Användbarhet TNMK30 2015) Det viktigaste innehållet ska synas/sticka ut mest, och det minst viktiga ska synas minst En bra visuell hierarki visar omedelbart: hur viktiga olika element på en sida är relationen mellan dem Placering Storlek Färg Tidwell (2011). Designing interfaces. Grunder i sidlayout - Visuellt flöde (se föreläsning Användbarhet TNMK30 2015) Isolering Form Textur Sidlayout gestaltlagar (se föreläsning Användbarhet TNMK30 2015) Guidar läsaren från det ena elementet till det andra Kontrollerar hur information uppfattas och i vilken ordning Viktiga element betonas, och innehåll organiseras på ett sätt som är logiskt och förutsägbart Bra design och och ett genomtänkt visuellt flöde vägleder användarna och gör deras upplevelse enklare och roligare Tidwell. (2001). Designing Interfaces, p 135. 6
10/3/16 Konstruktivism Enligt den här skolan är perception en aktiv process. Vad vi ser är inte en kopia av ngt: snarare en m odell konstruerad av det visuella systemet genom transformation, förstoring, förvrängning och bortfall av information. Vad vi ser är konstruerat både från information i omgivningen och från erfarenhet (tidigare lagrad kunskap). Exempel på processen. Tidigare kunskap hjälper oss att förstå ofullständig information/tvetydigheter. 7
Att minnas Kognitiv psykologi och människa- dator interaktion Bra kunskap om kognition gör att vi kan designa bra gränssnitt Vad kan vi förvänta oss av användare av ett system Hur kan vi göra deras uppgifter så lätta sommöjligt Förutsäga, identifiera och förklara problem somanvändare har eller kan komma att utsättas för Tillhandahåller metoder för att skapa gränssnitt somförbättrar användares kapacitet Relevans Morgondagens civilingenjör är en kommunicerande och socialt kompetent person, med kunskaper och färdigheter inom en mängd olika kompletterande områden. Civilingenjörsförbundet Vad krävs? kunskaper och färdigheter i att handha produkter, processer och arbetsmiljö med hänsyn till människors förutsättningar och behov. Högskoleförordningen c Utvärdering Utvärdering Handlar om att testa något på något sätt för att få kunskap,, ideér. Datainsamling. Varför utvärdera? Det är svårt att förutse vad som kommer att ske vid användning/bruk Det är (mycket) lätt hänt att man missat något Andra är inte som du! Du är inte användaren! Kontrollera att du förstått kundens krav och användares behov och förutsättningar Kontrollera att gränssnittet följer viktiga designprinciper Bestäm om produkten är klar (exempelvis tillräckligt användbar ) för att klara specifika mål Etc. Problem hittas och kan upptäckas och lösas i tid Minskad utvecklingstid, förbättrad utveckling/resultat 8
Användbar Utvärdering Vad vill man undersöka? effektiv att använda lätt att lära lätt att komma ihåg säker att använda tillfredsställande att använda etc. Handlar om att testa något på något sätt för att få kunskap, få svar. Datainsamling När i designprocessen? beror på syftet återkommande i en iterativ process Definiera/operationalisera användbarhet och mål!! exakt vad menar du med användbarhet? Utvärdering Intervju Kvalitativ Kvantitativ Kontrollerad (merellermindre) Utförs av experter (analytisk) Utförs av användare (empirisk) Explorativ/utforskande Formativ Summativ Observation Intervju Tänka- högt Enkät Mätning Inspektion (heuristiker/designprinciper) Ostrukturerad tillåter den som intervjuas att tala helt fritt Strukturerad följer en fördefinierad lista med frågor minimerar påverkan av kontexteffekter och tillåter bra sammanställning av svar En kombination av båda Kom ihåg att fråga Varför!! Enkät Enkät Skrivna frågor/påståenden Öppen fråga: Innan test för att samla in viktig kunskap om personen som deltar (bakgrundsinformation som ålder, erfarenhet, vana, vanor etc.) Efter test för subjektiv återkoppling, för att samla in reaktioner, attityder, preferenser etc. Har du några förslag på hur gränssnittet skulle kunna vara lättare att använda? Två typer: öppna (svara fritt) (kvalitativ) slutna (välja mellan olika fördefinierade alternativ, exempelvis Likertskala) (kvalitativ, kvantitativ) 9
Enkät Sluten fråga: Semantisk skala: Presenterar par av motsatta adjektiv på skalans olika sidor Att interagera med gränssnittet var Lätt 1 2 3 4 5 svårt Jag upplevde gränssnittet som Konsekvent 1 2 3 4 5 Inkonsekvent Svårt att hitta ord som verkligen är varandras motsatser och likvärdiga Exempelvis: användarvänligt - användarovänligt användarvänligt - icke användarvänligt användarvänligt - fientligt Enkät Sluten fråga: Likert skala: ett (positivt eller negativt) påstående till vilket respondenten skattar i vilken utsträckning denne håller med Det är alltid tydligt var jag kan hitta den funktion som jag behöver 1. Instämmer inte alls 2. Instämmer inte 3. Vet ej 4. Instämmer 5. Instämmer helt Det är svårt att veta var jag är när jag navigerar i gränssnittet 1. Instämmer inte alls 2. Instämmer inte 3. Vet ej 4. Instämmer 5. Instämmer helt Var försiktig då du sammanställer och analyserar resultaten! Överväg antal steg i skalan, neutralt val (3) i mitten? Tänka högt Observation av någon som använder ett system och då personen uppmuntras till att tänka högt under tiden. Personen berättar: vad han/hon gör, försöker göra vad han/hon tror händer varför han/hon gör vissa saker vad han/hon skulle vilja kunna göra vad han/hon tycker om något Tänka högt Observation av någon som använder ett system och då personen uppmuntras till att tänka högt under tiden. Personen berättar: vad han/hon gör, försöker göra vad han/hon tror händer varför han/hon gör vissa saker.. Mycket beror på hur bra du är på att få folk att prata och hur väl du följer upp vad personen säger Fördel: man förstår användares mentala modeller Nackdel: kan upplevas som distraherande, onaturligt, tröttsamt inga mätningar! Mätning Heuristisk utvärdering Tid Fel eller inte Antal fel Antal klick Kvantitativa mått i enkäter Viktigt med konkret syfte och mål (vad säger annars tiden 37 sekunder för att slutföra en uppgift?) En granskningsteknik (inspektion) En sorts korrekturläsning för utvecklare/designers Syftar till att hitta användbarhetsprobelem, misstag, Bygger på tumregler/guidelines som är utprovade (kända, meningsfulla) inte påhittade Genomförs av experter (och/eller användare) Som formativ utvärdering används ofta tidigt under design ger grund för prioriteringar vid omdesign Lätt att lära och att utföra, kräver få resurser ( budgetteknik ) 10
10 Usability Heuristics for User Interface Design, Jacob Nielsen http://www.nngroup.com/articles/ten- usability- heuristics/ Fler heuristiker/guidelines 1. Synlighet av systemets status. 2. Använd ett naturligt språk. 3. Kontroll och frihet. 4. Konsekvens och standard. 5. Felprevention/förebygg fel 6. Minimera minnesbeslastning. 7. Flexibilitet och effektivitet i användning. 8. Estetisk och minimalistisk design. 9. Hjälp användare känna igen sig, diagnostisera och komma tillbaka från fel. 10. Hjälp och dokumentation. Det finns givetvis fler (en uppsjö:- ) designprinciper, guidelines, riktlinjer, tumregler se exempelvis: Schneidermans "Eight Golden Rules of Interface Design http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneider mangoldenrules.html Tognazzini First Principles of Interaction Design http://www.designprinciplesftw.com/collections/first- principles- of- interaction- design.. http://www.id-book.com/firstedition/catherb/index.htm http://www.id-book.com/firstedition/catherb/index.htm Rogers, Sharp & Preece. (2011). Interaction Design. http://www.id-book.com/firstedition/catherb/index.htm 11
Metoder Metod och resultat Rapportera hur utvärderingen gick till deltagare (antal, bakgrund, användartyp) metod och procedur Rapportera och analysera resultatet på ett meningsfullt sätt och presentera det så att det är lätt att läsa och förstå Heuristiker, guidelines etc. (kursens designprinciper!) kan användas som rubriker. http://www.usabilitypartners.se/om- anvandbarhet/metoder Roller vid utvärdering Att tänka på Användare försöker lösa en given uppgift genom att interagera med prototypen/gränssnittet. Dator känner till programlogiken och styr gränssnittet. (Simulerar datorns respons utan kommentarer). Testledare styr sessionen, ger instruktioner till användaren och frågar efter åsikter och tankar. Observatör antecknar under tystnad. Realistiska uppgifter Etiska frågor Praktiska förberedelser Icebreaking? Instruktion (träning om det behövs) Utför testet och följ upp med frågor Led inte användaren rätt om det inte behövs/om det förstör testet Försvara ALDRIG designen inför användaren Poängtera att det är gränssnittet som testas med hjälp av användaren och inte tvärtom! Metoder behöver inte var avancerat/tidskrävande! Inför projekt 6 tips Kortare aktiviteter enkla 5 minuters intervjuer ( Haffa någon vid fikat ) (Fö2 analys av användare/sammanhang etc.) Vad vill man ha? Typiska anledningar/motiv för att använda hemsidan, appen, spelet etc. Vad saknas, är problematiskt med nuvarande lösning om sådan finns? Hur vill man att något ska fungera? Vad vill man ha snabb tillgång till? Ändrat? Tillagt? Etc. Visionera Konkretisera Visualisera Utvärdera Revidera Arbeta från lågupplöst till högupplöst iterera! Tillräckligt många användare tillfrågade dela in i användare, målgrupp, annan viktig bakgrundsinformation. Skriv scenarier, användarhistorier etc. 12
Ta reda på behov, presentera förslag, KOMMUNICERA, visualisera, testa, gör om och gör rätt. Tack! Vi nästa vecka. 13