Design av användargränssnitt Vad är ett bra användargränssnitt? Vad påverkar designen? Utvärdering viktig Praktiska rekommendationer - Heuristik Exempel på bra och mindre bra design Vad är ett användargränssnitt? Utseende och dynamik Det som användaren ser och upplever Det enda som intresserar användaren Vad är ett bra användargränssnitt? Rätt funktionalitet Effektivt i dagligt arbete Minimerar kognitiva belastningar Lätt att lära Accepterat av användarna m.m.
Några egenskaper hos människan Korttidsminnet är begränsat - kan lagra få informationsenheter - kort avklingningstid - störningskänsligt Viss informationsbehandling sker automatiskt Inmatning via fingrarna är långsam Bra på att skapa och känna igen mönster Vad behöver man veta? Domänkunskap Vilka arbetsuppgifter Vem gör vad Vilken information Hur tas beslut etc Gränssnitt Kunskap om användaren Kunskap Erfarenhet Utbildning etc Teknisk kunskap Skärmstorlek/Upplösning Verktyg Databas etc Människa-dator kunskap Styleguides Guidelines Domänspecifika styleguides Standarder Rekommendationer etc. Generella designprinciper Designa för skickliga användare (i arbetslivet) Tillåt automatisering av arbetsprocessen Rätt informationsmängder samtidigt tillgängliga Välj lämplig grundmetafor (skrivbord, rum ) Gör designen färdig Visa detalj och helhet samtidigt Tillåt växling mellan arbetsuppgifterna Gör informationskodning tydlig, konsistent och konsekvent Vettig användning av ikoner och färger
Designprinciper forts. Använd (ofta) bläddring för informationsväxling Lagom stora pekytor Anpassa pekfunktioner och pekdon till arbetssituationen Utvärdering under designfasen Result from the an aly sis D omain exp erts Des ign of the fir st p rototyp e Compu ter exp erts Domain specific evaluation D omain s pecific evaluation Domain s pecific evaluation D omain specific evaluation Tim e Domain specific evaluation Utvärdering 1. Identifiera generella problem 2. Identifiera verksamhetsspecifika problem 3. Dokumentera fynden 4. Gör om prototypen
Generella aspekter 1. Skärmdisposition 2. Orientering och navigering 3. Kontroll och återkoppling 4. Inmatning 5. Läsbarhet 6. Fel och hjälp 7. Utseende 8. Användning av färg 1. Skärmdisposition Begränsad resurs Väl avgränsade huvuddelar Fasta och genomtänkta positioner Undvik överlappande fönster Betona det väsentliga Kompakt bild 2. Orientering och navigering Veta var man är och var man ska Se var man är utan att behöva tänka Se var man är i en lista eller bunt Visa översikt och detalj samtidigt Visa om det finns/inte finns mer information Visa hur man når den informationen Bläddring är ofta bättre än scrollning
3. Kontroll och återkoppling Viktigt att användaren styr - inte blir styrd Utföra arbetet på olika sätt Att visa vad som händer Återkoppling viktigt för säkerhet Tangentnedtryckning, väntetid, vilket tillstånd 4. Inmatning Gäller data, parametrar, menyalternativ, kommandon Minimera inmatning Undvik växling av mus och tangent Snabbare med tangent än mus Visa vilka fält som är inmatningsbara Breda istället för djupa menyer Defaultvärden, snabbkommandon, snabbhopp mellan fält 5. Fel och hjälp Tillåt användaren att göra fel Tydliga felmeddelanden Hjälp om nödvändigt Om hjälp behövs kan designen vara dålig
6. Läsbarhet och layout Logisk gruppering av data Gruppera med närhet, färger, fonter, ramar Avläsning i kolumner där varje tecken tar lika stor plats Läsbara fonter Betona det väsentliga Färganvändning 7. Utseende Subjektivt Använd färger med måtta Linjering Objekten bildar en helhet Balans 8. Färganvändning Designa för gråskala - addera färger Färger används till - förmedla budskap - ej kosmetika - ge en harmonisk miljö Undvik arg fruktsallad Använd få färger Använd mest omättade färger Kontrast är det viktigaste uttrycksmedlet Bakgrund: stilla och lugn yta (t ex mattblå) Undvik interfererande färger, t ex grön vs. röd
Färganvändning forts. Förgrund: färg anger informationskodning För text: hög kontrast mot stilla bakgrund - svart text på vit bakgrund - ljusgrå bakgrund ger möjlighet till vit text Färganvändning för informationskodning - använd få färger - utnyttja kontrast - koda informationsstatus - tydlig mening - konsekvens - betona det viktiga - lämpliga färgkombinationer - ej blå i förgrund Verksamhetsspec utvärdering Med användare Skapa scenarion Gå igenom de olika aspekterna Verksamhetsaspekter 1. Arbetssätt 2. Samtidig visning av information 3. Betona det viktiga 4. Kortkommandon och genvägar 5. Användarnas språk
1. Arbetssätt Metafor Stödjer gränssnittet arbetsuppgiften? Information logiskt grupperad Viktig info kliver fram 2. Samtidig visning av inform. Belastande för korttidsminnet att växla bild All information som behövs i ett beslut synlig Undvik överlappande fönster Formulär för läsning och skrivning samtidigt Framgår tydligt hur man når information som ej syns 3. Betona det viktiga Data ofta viktigare än rubriker Koda med färg, form, font, storlek etc Status (ex inkomst > 400 000, temp>37 är feber) Använd färg, form, font etc för att visa status
4. Kortkom. och genvägar Kortkommandon för den vane användaren Knapptryckning snabbare än musklick Gå direkt till en viss sida/plats (genväg) Inte behöva gå tillbaka i flera steg Använd defaultvärden 5. Användarnas språk Använd verksamhetstermer Undvik dataspråk Ikoner med bilder som knyter an till verksamheten Välj färger som hör ihop med verksamheten Analys av utvärderingen Gå igenom resultatet av utvärderingen Vad är viktigast att åtgärda Förslag till förbättringar Kompromissa
Konflikter vid design Två exempel: - Orientering vs. samtidig presentation - Tala användarnas språk vs. samtidighet