Design av användargränssnitt Jan Gulliksen IT-system och människor i samspel Interaktionsdesign 1
Is user interface design common sense? Comparison of 7 interface design solutions to the task of reordering 4 data fields: Ranking by experienced interface designers 1. Drag & drop on 2. Drag & drop between 3. Menus 4. Radio buttons 5. 4 entry areas 6. 1 entry area 7. Icons Observed performance 1. 1 entry area 2. Radio buttons 3. Drag & drop on 4. Drag & drop between 5. Menus 6. Icons 7. 4 entry areas No correlation was found (Tullis, 1993) Interaktionsdesign Definitioner på design Finna rätt fysisk komponent till en fysisk struktur. En målinriktad problemlösningsaktivitet Simulera vad vi vill göra innan vi gör det tillräckligt många gånger för att bli tillfreds med resultatet Det tänkta språnget från dagens faktum till framtidens möjligheter En kreativ process som innebär att något nytt och annorlunda tas fram som ej tidigare har existerat Interaktionsdesign 2
Engineering design Användandet av vetenskapliga principer, teknisk information och fantasi i definitionen av en mekanisk struktur, maskin eller system som har till uppgift att utföra en fördefinierad funktion med maximal effektivitet och funktionalitet. Interaktionsdesign Interaktionsdesign 3
Interaktionsdesign Syfte med designavsnittet Att visa hur man utvecklar är mycket viktigare än att tala om vad man skall göra. Design är en process Interaktionsdesign 4
Vad påverkar utformningen av ett gränssnitt? Standarder Style Guide Arbetssituationerna Verksamheten Generella designregler Designerns Kompetens/förmåga kreativitet Användarna Kunskaper Erfarenheter Datorer Nätverk Utvecklingsverktyg Bildskärmar Upplösning/Prestanda Interaktionsdesign Processen snarare än produkten Analys -> Design -> Utvärdering -> Återkoppling -> Iterativ Inkrementellt Återkoppling Analys Utvärdering Design Interaktionsdesign 5
Användaranalyser Analys Vilka användare har vi? (demografi) Vad har dessa användare för mål, krav och behov? Hur ser situationen ut idag? Är IT egentligen lösningen på deras problem? (Oftast inte!) Uppgiftsanalyser Användningsfall och andra formella notationer Informationsanvändningsanalys Dokumentation Analys Samla kopior av alla dokument som används Fotografera mycket Videofilma Interaktionsdesign Design/Prototyper Skissernas styrka Parallell design Kreativitetshöjande åtgärder Deltagande design Design Interaktionsdesign 6
Utvärdering Experttyckande tämligen värdelöst Enkäter ger tvivelaktiga resultat och är arbetskrävande att konstruera och sammanställa Deltagande metoder där användaren utför uppgifter under det att de observeras är klart underskattade Utvärdera ofta Utvärdera inte när det är för sent! Formativa utvärderingar framför summativa Utvärdering Interaktionsdesign Återkoppling Fatta medvetet beslut baserat på resultaten Dokumentera inte för mycket Visa video Deltag i överlämnandet förklara/förstå/lös problemen Tala inte bara om att något är fel utan även varför! Tveka inte att föreslå alternativa lösningar Ödmjukhet och respekt Återkoppling Interaktionsdesign 7
Används Designmetoder idag på företag som utvecklar gränssnitt? Ett antal företag utfrågades vilken metod de använde för att designa användargränssnitt. Följande blev svaren: Nja, vi använder ingen speciell design-metod men......vi gör det så enkelt som möjligt för användaren (Frågan är om de vet hur man gör detta)...vi följer Windows...vi har anställt en som är specialist...vi diskuterar den nya funktionen med kunden och gör några nya formulär...hittar du någon bra metod så kan du väl tala om det för oss! Undersökning gjord av Eva Olsson, CMD) Interaktionsdesign Designexempel 1 Vilken knappformation föredrar du? Vilken har du? Vilken är bäst i ett visst sammanhang? Hur tar du reda på det? 1 2 3 4 5 6 7 8 9 0 7 8 9 4 5 6 1 2 3 0 Interaktionsdesign 8
Interaktionsdesign Interaktionsdesign 9
Designexempel 2 Hur skulle du placera ut de aritmetiska tecknen +,-,*,/ på denna panel? Hur skulle du utnyttja de övriga knapparna? 7 8 9 4 5 6 1 2 3 0 Interaktionsdesign Tangentbordsbaserad positionering Interaktionsdesign 10
Designexempel 3 Skissa en designlösning för salt och peppar-förpackningen på ett flygplan Interaktionsdesign 11