Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1

2 Idag Lite av varje Resten av Tidwell Små skärmar Kodtips för projekt Tenta Hjälpmedel 1 A4 (2 sidor) med egna anteckningar skrivna för hand eller på dator Innehåll (kort version) Allt som gåtts igenom på kursen Tidwell förutom kap 8 Utdelat material (mer kommer) Föreläsningar Projekt mm Frågor? Test onsdag eller fredag? Det är övning som vanligt på onsdag 2

3 Att läsa förutom boken Cooper Implementation Models and Mental Models Cooper Platform and Posture Cooper Orchestration and Flow Cooper Eliminating Excise Cooper Menus Cooper Toolbars Dessutom tillkommer GUI-historia, länk finns på hemsidan under resurser Cooper några sidor om personas Text om utvärdering Tidwell Hela boken förutom kapitel 8 Alla kapitelintron ska läsa då de innehåller sammanfattande kunskap kring det område som behandlas i kapitlet Läs Preface också Kapitel 1 Kunna sammanfatta o exemplifiera 1, 2, 3, 4, 5, 7,8,11 Känna igen/känna till 6,9,10,12 Kapitel 2 Kunna sammanfatta o exemplifiera 13, 15, 16 Känna igen/känna till 14, 17, 18 3

4 Tidwell Kapitel 3 Kunna sammanfatta o exemplifiera 21, 22, 26, 27, 29 Känna igen/känna till 23, 24, 25, 31 Kapitel 4 Kunna sammanfatta o exemplifiera 32, 33, 34, 35, 38, 43 Känna igen/känna till 36, 37, 41, 42 Kapitel 5 Kunna sammanfatta o exemplifiera 44, 45, 46 Känna igen/känna till 49, 50 Tidwell Kapitel 6 Kunna sammanfatta o exemplifiera 59, 60, 63, 64 Känna igen/känna till 54, 61, 62 (56) Kapitel 7 Kunna sammanfatta o exemplifiera 68, 69, 70, 71, 77 Känna igen/känna till 71, 72, 74, 75, 76, 78 Kapitel 9 Kunna sammanfatta o exemplifiera 89 Känna igen/känna till 88, (90, 93) 4

5 Interaktionsdesignspraxis Fastställ behov och krav loop Utveckla alternativa designförslag Bygg interaktiva prototyper för kommunikation och analys Utvärdera designen baserat på prototyperna end loop Torsdagens föreläsning kommer att ta upp utvärdering MAKING IT LOOK GOOD 5

6 Utseende spelar roll Inte speciellt förvånande, men även vetenskapliga undersökningar visar att det spelar roll hur en sida ser ut Användaren trivs bättre Ökar chansen att man vill prova igen Ökar chansen att man få gott rykte Användaren får större tolerans Ökar chansen att man har överseende med småproblem Användbarheten ökar helt enkelt Microsoft Be great at look and do Samma innehåll olika utseende 6

7 Samma innehåll olika utseende Lite om visuell design Har talat om vissa saker Alignment Grouping Preattentive variables Färg Form Kognitivt inbyggda fenomen Hjärnan uppfattar vissa saker automatiskt Känslor och instinktiva reaktioner spelar in också Kultur Förväntningar Erfarenheter 7

8 forts Nämner några grundläggande saker Färg Typografi Utrymme och trängsel Vinklar o kurvor Textur Bilder Kultur Upprepade visuella motiv Inverkan på desktop-program Färg Det är bra att fundera ut ett färgschema Grundregler Använd mörk förgrund mot ljus bakgrund eller tvärtom För att testa skillnaden kan man göra om till gråskala Använd aldrig röd kontra grön för kritiska distinktioner 10% av alla män har nån form av färgblindhet Ha aldrig liten blå text på en röd eller orange bakgrund eftersom man inte kan läsa text skriven med komplementärfärger Text mer text och lite till 8

9 Varma o kalla färger Varma Röd, orange, brun, beige Kalla Blå, grön, lila, grå (stora mängder) För att framkalla respekt och konservatism används typiskt kalla färger i synnerhet blått Bakgrund o kontrast Ljus eller mörk bakgrund? Gör stor skillnad Ljusa klart vanligast Vanliga kontroller funkar bäst på dessa Mörka fräckare, dyster, energisk Finns undantag Sketchflow t ex Kontrast Skarpa kontraster Spänning o styrka Mindre kontrast Lugnande och avslappnande 9

10 Mättade o omättade färger Mättade eller rena (saturated) färger Klara, briljanta, skarpa gula, röda gröna etc Framkallar energi, livlighet, värme Vågade och karakteristiska Också tröttande för ögat Vanligast att ha max 1 eller 2 mättade färger Resten omättade, nedtonade Exempel 10

11 forts Kombinationer av kulörer Hue kulör, färg, nyans, färgton, färgnyans Ofta använder man ett litet antal grundfärger och sedan variationer på dessa Mindre splittrat intryck Man kan förstås göra tvärtom Kan bli för mycket 11

12 Exempel forts 12

13 kuler -demo Color Scheme Designer - demo 13

14 En till Sammanfattning Färgval spelar roll Se över färgscheman i projektet Recap Visual Framework 14

15 Typografi Vilket/vilka typsnitt man använder spelar också roll för vilket intryck man ger Sans-serif Serif Sans-serif ofta bättre i små storlekar på datorskärm forts ANVÄNDA INTE TEXT MED BARA STORA BOKSTÄVER EFTERSOM DET ÄR SVÅRARE ATT LÄSA Undantag kan vara vissa rubriker Undvik kursiv text eller fonter med mycket ornament eftersom de är svårare att läsa ord per kolumn är ungefär lagom för att behålla läsbarhet (10 + siffror) Låt kortare textstycken vara vänsterjusterade GUI-kits och guidelines har vanligen rekommenderade fonter och fontstorlekar 15

16 Exempel Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Arial) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Didot) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Verdana) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Comic Sans MS) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Goudy old style) forts Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Chalkboard)! Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Georgia) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Bank Gothic) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Courier) Text skriven med en font och sen kan man jämföra med intrycket som en annan font ger (Lucida Grande) 16

17 Rymd, vinklar o textur Hur mycket man stoppar in på en sida spelar roll Alltför mycket kan vara stressande (visual excise) Å andra sidan kan det vara hemtrevligt Träning/omdöme Vinklar o kurvor Lagom är bäst typ Ha inte alltför många olika formelement Textur När man ska täcka en yta ser ofta någon slags textur bättre ut än bara att fylla med en färg Typiskt icke-markanta saker gjorda av små variationer Bilder Kan vara effektivt, men finns i desktop-gui:n mest när de har en funktion (ikoner) Desktop-GUI:n Desktop-GUI:n ofta hårt styrda av design-guidelines Speciellt nyttoprogram Man kan dock profilera sig genom att göra egna grejer Exempel Bakgrunder Visat hur man kan göra en JPanel med bild som bakgrund Färger och fonter Går att styra, bara man har en tanke bakom Kanter I Java kan man styra kanter på en massa sätt Bilder Visat hur man kan göra bilder helt byggda av knappar Träd, listor mm kan också justeras med bilder 17

18 (32) visual framework (32) visual framework Vad Designa varje sida med samma grundläggande layout, färg, stil. När Applikationer eller sajter med många olika sidor (typ allt). Man vill att det ska sitta ihop Varför Konsistent design av varje sida gör att man känner igen sig och inte behöver anstränga sig lika mycket. Bidrar till branding också. Hur Skapa en genomgående look-and-feel för alla sidor i applikationen Färger, fonter, stil på text Navigation Layout-grid 18

19 Exempel forts 19

20 (88) deep background (88) deep background Vad Placera en bild i bakgrunden som ger intryck av att finnas bakom övriga gränssnittselement När Man har en layout med ett antal distinkta GUI-element som inte är särskilt överbefolkad och villa att det ska vara intressantare än med vanlig vit/grå bakgrund Varför Lyckas man göra en bakgrund som ser ut att finnas bakom så kan det vara snyggt helt enkelt Hur Lite överkurs. Boken talar om soft focus, color gradients, depth cues och no strong focal points 20

21 Exempel (89) few hues, many values 21

22 (89) few hues, many values Vad Välj en, två eller max 3 huvudkulörer (hues). Skapa en färgpalett genom att ha olika varianter av dessa När Man skapar en färgpalett och vill undvika ett splittrat intryck, men ha någon slags karaktär Varför Alltför många färger, speciellt klara och mättade gör lätt GUI:t överlastat och stökigt. Färgerna slåss om användarens uppmärksamhet. Hur Välj ett par färger (svart o vitt räknas inte) Sen kan man ha ett stort antal inom dessa färger om det krävs. Verktyg som visats kan vara användbara för detta. Exempel 22

23 Non-desktop Vanliga datorer bara en liten del av allt som har ett GUI Mobiler Mikrovågsugnar Displayer i bilar Bankomater Informationskiosker Biljettautomater ipod/ipad etc Kylskåp Några tips Tänk inte på produkten som en dator Designar man en ugn/mediaspelare/infotainment så gäller andra förväntningar Försök inte trycka in ett förminskat standard-gui Integrera mjuk- och hårdvarudesign ipod succé tack vare integrering av hårdvara o mjukvara iphone samma sak Egentligen samma sak som att inte tänk på produkten som en dator 23

24 forts Låt kontext driva design Användare o deras situation alltid viktig Ännu mer här Vanliga GUI:n har rätt mycket givet Man sitter vid en skär Har troligen mus o tangentbord Non-desktop Handdator Informationskiosk Avancerad ugn System i bil Helt olika förutsättningar forts Begränsa användning av olika modes T ex verktygspaletter som ger olika modes Avgränsa väl Handdatorer som försöker vara allt har ingen historia av framgång Ofta bättre göra få saker bra än många dåligt Satellit till desktop-program kan vara användbart koncept Balansera navigation och diplaytäthet Vanligen liten skärm Man måste jobba med avvägning mellan hur mycket som kan synas på en sida och att flera sidor leder till mer navigation 24

25 forts Minimera inmatningskomplexitet Typiskt inget tangentbord Även bästa varianter fippliga i jämförelse Viktiga att minimera och förenkla inmatning så mycket som möjligt Handenheter Fundera på hur enheten kommer att hållas och bäras Här behövs modeller av enheten och scenarios för hur den ska användas Det är stor skillnad på en enhet för lagerföring och en fjärrkontroll för TV Bestäm tidigt om applikationen ska stödja enhands eller tvåhandsoperationer Här behövs användningsscenarion Finns det vissa sammanhang där det är ok att 2 händer krävs 25

26 forts Bestäm om applikationen ska vara stand-alone eller satellit Stand-alone fristående Satellit extragrej till desktopapplikation itunes Man kan lämna avancerade operationer till den mer lämpade desktopapplikationen Handenheten reduceras till det som verkligen behövs mobilt Undvik flera fönster och dialoger På små skärmar är det typiskt ingen plats för mer än en skärm åt gången Dela upp i lämpliga delar och ordna bra navigation lösningen Några mönster Allmänt Mönster är förslag på fungerande lösningar Måste anpassas efter situationen Nytta Kan man många är chansen större att man hittar något lämpligt för en given situation Ger en vokabulär för att diskutera design Studera/reflektera kring program man använder Är beprövade 26

27 (15) one-window drilldown (15) one-window drilldown Vad Visa alla applikationens vyer/sidor i samma fönster. När man väljer ett alternativ byts hela ytan ut mot den nya sidan. När Programmet består av många olika sidor (organiserade linjärt eller hierarkiskt) att navigera genom och man har en liten skärm eller det blir enklare för användarna på detta sätt. Varför Enkelt. Allting finns på en skärm. Alla vet hur man navigerar på webben som funkar på detta sätt. Hur Organisera innehållet i lagom stora delar. Förse dessa med lämpliga navigationskontroller. Se till att man kan komma tillbaka. Andra mönster som Breadcrumbs kan vara till hjälp. 27

28 Exempel (23) hub-and spoke 28

29 (23) hub-and spoke Vad Isolera de olika delarna i mini-applikationer. Alla med en väg in från huvudsidan och en väg ut till huvudsidan När GUI:t innehåller flera olika väl avgränsade uppgifter. Använd huband-spoke om man vanligen inte navigerar direkt mellan olika saker. Typiskt för små skärmar i kombination med one-window drilldown Varför Man reducerar navigationsmöjligheterna och förenklar därmed både GUI och navigation. Det är också ganska enkelt att lägga till nya saker i den centrala hubben Hur Dela upp innehållet i ett antal miniapplikationer. Var och en kan designas som det är bäst. Se till att alla är åtkomliga från en central hub Exempel 29

30 Projekt API Frågor? Arkitektur Ha flera forms i implementationen! Ingen arkitektur Extralager ovanpå IMatDataHandler Extralager + central controller/presenter Extralager + flera controller/presenter Inget extralager flera controller/presenter Extralager på central director + flera controller/presenter Vad har vi? Användarstudier, mentala modeller, personas Platform & Posture kategorier intermediate, expert, novice Organisera innehåll - lista objekt, handlingar,,tiled panes, single windows Mönster two-panel selector, one-window drilldown Minimera navigation & Navigationsmönster clear entry points, global navigation Visuell hierarki, grouping & alignment visual framework, titled sections, card stack Ett antal olika sätt att utföra handlingar och affordances Button groups, action panel Shneidermans och Nielsens principer Flow, Showing complex data Cascading lists, row striping Getting input from user En massa kontroller, Structured format, input hints Eliminating excise tips/regler för att undvika krångel Making it look good (färger etc) och lite om non-desktop Summan av detta saker att utgå från i en top-down process 30