Design för användbarhet Designexempel, hur tänkte man vid designen?

Storlek: px

Starta visningen från sidan:

Download "Design för användbarhet Designexempel, hur tänkte man vid designen?"

Astrid Lundgren
för 5 år sedan
Visningar:

1 Design för användbarhet Designexempel, hur tänkte man vid designen? Bengt Göransson :: Användbarhetsdesigner Guide Redina AB :: Why? Bengt Göransson, Guide Redina AB, :: 1

2 Views on design Craft approach It focuses on the designer's need for talent, not for methodology. Enhanced software engineering approach Attempts to introduce HCI techniques into the repertoire of traditional systems engineering. Cognitive engineering approach Aims at applying theories from cognitive psychology to the problems facing the designer. Technologist approach Tries to solve the problems of interface design by providing appropriate tools. Wallace, M.D., & Anderson, T.J. (1993). Approaches to Interface Design. Interacting with Computers, Vol. 5, No. 3, pp What s in Design? 1. Design is a process, it is not a state and cannot be adequately represented statically. 2. The design process is non-hierarchical, neither strictly bottom-up nor top-down. 3. The process is radically transformational, involving the development of partial and interim solutions which may ultimately play no role in the final design. 4. Design intrinsically involves the discovery of new goals. Carroll, Rosson, 1985 Bengt Göransson, Guide Redina AB, :: 2

3 Fem steg till god interaktionsdesign Förstå Vad är det som pågår? Vilka problem är det som skall lösas? Designern studerar och pratar med användare och intressenter analyserar. Den studerade verksamheten dokumenteras med bilder, anteckningar, video, strukturerade intervjuer etc. Abstrahera Vilka är huvuddelarna? Vilken typ av information används? Hur används informationen? Vad är viktigt? Vad är oviktigt? Skisser, diagram, listor etc används som dokumentation. Förstå Abstrahera Strukturera Representera Detaljera Crampton Smith och Tabor, 1996 Fem steg till god interaktionsdesign Strukturera. Hur förhåller sig de olika delarna, till varandra? Hur kan delarna struktureras för att bli effektiva för användarna? Vad är användarna intresserade av? Designers bild av strukturen stäms av med användarnas bild. Representera. Hur kan denna struktur representeras? Finns det någon»inneboende«representation hos informationen? Hur kan designern representera informationen med tanke på användarnas bild? Designern jobbar i detta skede med skisser på papper och bildspel samt med interaktiva prototyper. Förstå Abstrahera Strukturera Representera Detaljera Crampton Smith och Tabor, 1996 Bengt Göransson, Guide Redina AB, :: 3

4 Fem steg till god interaktionsdesign Detaljera. Vilka attribut skall användas? Hur skall detaljerna utformas? Vilken stil skall utseendet formas efter? Hur utformas dynamiken? Kanske skall en illustratör anlitas. Förstå Abstrahera Strukturera Representera Detaljera Crampton Smith och Tabor, 1996 Liten övning Hur har man tänkt här då? Bengt Göransson, Guide Redina AB, :: 4

5 Tänk efter Kan en telefon se ut hur som helst? Vad vill man kombinera telefonfunktionen med? Är det en telefon eller en dator, eller en spelmaskin, eller? Mjuka knappa Bengt Göransson, Guide Redina AB, :: 5

6 Vad är ett»bra«användargränssnitt? Lätt att lära Så att användaren snabbt kommer igång med arbetet. Effektivt att använda När användaren har lärt sig systemet måste det vara effektivt att arbeta med. Lätt att komma ihåg Det måste gå att återkomma till systemet efter en tids frånvaro och ändå kunna komma ihåg hur det fungerar. Få fel Användarna skall kunna göra så få fel som möjligt. Om de ändå gör fel måste det gå att komma tillbaka till situationen innan felet uppstod. Tillfredsställande Det skall kännas»angenämnt«att använda systemet. Man skall känna en tillfredsställelse att jobba med systemet, helt enkel tycka om det. Interaktionsdesign Överblick och detalj, samtidigt. Placera funktionalitet där den används. Strukturerad navigeringsmodell; det skall vara tydligt»var man är«och hur man går till de andra delar. Effektivt och målinriktat utnyttjande och disponering av skärmen. God läsbarhet. Minimalistisk design; enkel, diskret och effektiv estetik. Användaren skall känna sig i kontroll och få informativ och konstruktion återkoppling på sina handlingar. Tvinga inte användaren att behöva»styra«system, flytta omkring saker, etc. Utforma felförebyggande och tillhandahåll flera möjligheter till hjälp. Var konsekvent och använd uttryck och termer som är bekanta för användarna. Bengt Göransson, Guide Redina AB, :: 6

7 Interaktionsdesign för professionella användare Utforma för effektiv användning över tiden. Ibland avvägning mellan»enkelhet«och effektivitet. Tillåt automatisering av arbetsprocessen. Rätt informationsmängder samtidigt tillgängliga. Ofta mycket information samtidigt. Välj lämplig grundmetafor (arbetsytor, rum ). Gör designen färdig. Visa detalj och helhet parallellt. Tillåt växling mellan arbetsuppgifterna. Gör kodningen av information tydlig och konsekvent.»korrekt«användning av ikoner och färger. M.m. Design av innehåll Uppgiftsrelaterad layout och design Är skärmlayouten relaterad till hur användarna jobbar? Är det uppenbart hur uppgifterna kan utföras? Parallell visning av information Är all behövlig information synlig när användaren skall utföra en uppgift? Om inte, vilken information är inte synlig? Betona viktig information Syns den viktiga informationen tydligt? Är den betonade informationen viktig? Använd genvägar och standardvärden Finns genvägar för vanliga uppgifter? Är det rätt standardvärden? Använd användarnas termer och språkbruk Är språket naturligt för användarna? Vilka uttryck är svåra att förstå? Bengt Göransson, Guide Redina AB, :: 7

8 God interaktionsdesign Skärmdisposition fönster Den statiska layouten ger stöd för minnet. Fönsterhantering innebär avbrott i tankeprocessen, och skall undvikas! Bengt Göransson, Guide Redina AB, :: 8

9 Överlappande fönster är dåligt men vanligt förekommande Mycket bättre! Bengt Göransson, Guide Redina AB, :: 9

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.

10 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. Tidigare Bengt Göransson, Guide Redina AB, :: 10

11 Ny design! Result Find item in workflow <Barcode> Ok Microsoft Windows User Experience However, adhering to these design guidelines does not guarantee usability. The guidelines are valuable tools, but to be part of an effective software design process, they must be combined with other factors such as design principles, task analysis, prototyping, and usability evaluation. Bengt Göransson, Guide Redina AB, :: 11

12 Tack för att ni lyssnade! Bengt Göransson, Guide Redina AB, :: 12

Relevanta dokument

Design för användbarhet Designexempel, hur tänkte man vid designen?

Design för användbarhet Designexempel, hur tänkte man vid designen? Bengt Göransson :: Användbarhetsdesigner Guide Redina AB :: Bengt.Goransson@guide.se Varför? Bengt Göransson, Guide Redina AB, 2005 http://www.guide.se/