Design av användargränssnitt. Vad behöver man veta? Generella designprinciper. Vad är ett användargränssnitt? Några egenskaper hos människan

HTML
DOWNLOAD

Storlek: px

Starta visningen från sidan:

Download "Design av användargränssnitt. Vad behöver man veta? Generella designprinciper. Vad är ett användargränssnitt? Några egenskaper hos människan"

Ellinor Bergman
för 8 år sedan
Visningar:

1 Design av användargränssnitt Vad är ett bra användargränssnitt? Vad påverkar designen? Utvärdering viktig Praktiska råd och tips - Heuristik Exempel på bra och mindre bra design Några egenskaper hos människan Korttidsminnet är begränsat - kan lagra få informationsenheter - kort avklingningstid - känsligt för kognitiva störningar Viss informationsbehandling sker automatiskt Inmatning via fingrarna är långsam Bra på att skapa och känna igen mönster Vad är ett användargränssnitt? Vad behöver man veta? Domänkunskap Vilka är arbetsuppgifterna? Vem gör vad? Vilken information används? Hur tas beslut? Gränssnitt Kunskap om användaren Kunskap Erfarenhet Utbildning Utseende och dynamik Det som användaren ser och upplever Det enda som intresserar användaren Teknisk kunskap Skärmstorlek/Upplösning Verktyg Databas Människa-dator kunskap Styleguides Guidelines Domänspecifika styleguides Standarder Rekommendationer. Vad är ett bra användargränssnitt? m.m. Rätt funktionalitet Effektivt i dagligt arbete Minimerar kognitiva belastningar Lätt att lära och att komma ihåg Accepterat av användarna 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

2 Designprinciper forts. Använd (ofta) bläddring för informationsväxling Lagom stora pekytor Anpassa pekfunktioner och pekdon till arbetssituationen 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 Utvärdering under designfasen experts Result from the analysis Design of the first prototype Computer experts 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 Time Utvärdering 1. Identifiera generella problem 2. Identifiera verksamhetsspecifika problem 3. Dokumentera fynden 4. Gör om prototypen 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 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, tillstånd 6. Läsbarhet och layout Logiskgrupperingavdata Gruppera med närhet, färger, fonter, ramar Avläsning i kolumner där varje tecken tar lika stor plats Läsbarafonter Betona det väsentliga Färganvändning 4. Inmatning Gäller data, parametrar, menyalternativ, kommandon Minimerainmatning 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 7. Utseende Subjektivt Använd färger med måtta (se nedan) Linjering Objekten ska bilda en helhet Balans 5. Fel och hjälp Tillåt användaren att göra fel Tydliga felmeddelanden Ge hjälp om nödvändigt Om hjälp behövs kan designen vara dålig 8. Färganvändning Designa för gråskala - addera färger Färger används till -förmedlabudskap-ejkosmetika - ge en harmonisk miljö Undvik argfruktsallad 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

4 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ändfåfärger - utnyttja kontrast - koda informationsstatus -tydligmening-konsekvens - betona det viktiga - lämpliga färgkombinationer - ej blå i förgrund 1. Arbetssätt Metafor Stödjer gränssnittet arbetsuppgiften? Information logiskt grupperad Viktig information ska betonas Verksamhetsspec utvärdering Med användare Skapa scenarion Gå igenom de olika aspekterna 2. Samtidig visning av inform. Belastande för korttidsminnet att växla bild All information som behövs i ett beslut synlig samtidigt Undvik överlappande fönster Formulär för läsning och skrivning bör visas samtidigt Detskaframgåtydligthurman når information somejsyns Verksamhetsaspekter 1. Arbetssätt 2. Samtidig visning av information 3. Betona det viktiga 4. Kortkommandon och genvägar 5. Användarnas språk 3. Betona det viktiga Data ofta viktigare än rubriker Koda med färg, form, font, storlek Status (ex inkomst > , temp>37 är feber) Använd färg, form, font för att visa status

5 4. Kortkom. och genvägar Kortkommandon för den vane användaren Knapptryckning snabbare än musklick Gå direkt till en viss sida/plats (genvägar) Inte behöva gå tillbaka i flera steg Använd defaultvärden Konflikter vid design I all design handlar det mycket om att lösa designkonflikter!! 5. Användarnas språk Använd verksamhetstermer Undvik dataspråk Ikoner med bilder som knyter an till verksamheten Väljfärgersomhörihopmed verksamheten Analys av utvärderingen Gå igenom resultatet av utvärderingen Vad är viktigast att åtgärda? Prioritera. Förslag till förbättringar Kompromissa

Relevanta dokument

Design av användargränssnitt

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?