Design och konstruktion av grafiska gränssnitt. Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU

Storlek: px

Starta visningen från sidan:

Download "Design och konstruktion av grafiska gränssnitt. Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU"

Emma Axelsson
för 6 år sedan
Visningar:

1 Design och konstruktion av grafiska gränssnitt Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU

2 Idag Making it look good: Visual Style and Aesthetics Visuell design Färger Typografi Exempel och patterns Komplex data

3 Ett exempel

4 Ett exempel

5 Ett exempel

6 Ett exempel

7 Mycket billigt! Armin Flajt Delajt

8 Utseende spelar roll Även vetenskapliga undersökningar visar att det spelar roll hur en sida ser ut Man litar inte på en sida som ser ut att vara gjord av amatörer Användaren trivs bättre Ökar chansen att man vill prova igen Ökar chansen att man få gott rykte Ökar tiden användaren spenderar på sidan Användaren får större tolerans Ökar chansen att man har överseende med småproblem Användbarheten ökar helt enkelt Ibland också effektivitet

9 Utseende spelar roll Väldesignad software tar hänsyn till utseendet, språk och dess ton lika mycket som till kvalitén (kodning) Produkter och websidor stödjer också branding. Interface kan skapa emotionell respons.

10 Samma innehåll olika utseende

11 Samma innehåll olika utseende

12 Samma innehåll olika utseende

13 Samma innehåll olika utseende

14 Samma innehåll olika utseende

15 Visuell design Kognitivt inbyggda fenomen Hjärnan uppfattar vissa saker automatiskt Vissa reaktioner kan förutses Känslor och instinktiva reaktioner spelar in också Kultur Förväntningar Erfarenheter osv...

16 Markera, beteckna, sätta etikett på Färg i UI

17 Färg Färg är det bland det första vi ser. 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 Upp till 10% av alla män har någon form av färgblindhet Ha aldrig t ex liten blå text på en röd eller orange bakgrund Text mer text och lite till

18 Bakgrund o kontrast Kontrast Skarpa kontraster Spänning o styrka Mindre kontrast Lugnande och avslappnande 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

19 Hue ( kulör, färgton, nyans )

20 Varma o kalla färger Varma Röd, orange, brun, beige Kalla Blå, grön, lila, grå ( i stora mängder) För att framkalla respekt och konservatism används typiskt kalla färger i synnerhet blått

21 Mättad Färgmättnad Omättad

22 Mättade och 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 har karaktär Också tröttande för ögat Vanligast att ha max 1 eller 2 mättade färger Resten omättade, nedtonade

23 Exempel

24 Exempel

25 Kombinationer Vad händer om man kombinerar? 2 mättade färger = mer liv, energi än bara 1 färg 1 mättad och 1 omättad = mer uppmärksamhet mot mättad Ofta använder man ett litet antal grundfärger och sedan variationer på dessa Mindre splittrat intryck

26 Exempel

27 Exempel

28 Färgblindhet

Undvik röd-gröna kombinationer If possible use only yellow, blue, black,

29 Färgblindhet Förmedla aldrig information med enbart färg Använd istället medföljande text, form eller något annat. Undvik röd-gröna kombinationer If possible use only yellow, blue, black, grey and white hues Test, test, test! Mer info

30 Sammanfattning Färgval spelar roll Se över färgscheman i projektet

31 Typografi Typografi är läran om texter och dess utformning. En text kan avstavas, radbrytas och sidbrytas på flera olika sätt. Mellanrummet mellan raderna, bredd, marginaler, placering påverkar det totala intrycket Traditionellt = hur lätt det är att läsa och förstå en text Idag = att påverka Viktigt på nätet

32 Sans-serif (sans = utan) Serif Typografi Sans-serif ofta bättre i små storlekar på datorskärm men på pappret är det tvärtom. Webben: Verdana Georgia

33 Typografi Vilket/vilka typsnitt man använder spelar också roll för vilket intryck man ger Varje typsnitt har sin egen röst

34 Typografi ANVÄND INTE TEXT MED BARA STORA BOKSTÄVER EFTERSOM DET ÄR SVÅRARE ATT LÄSA Undantag kan vara vissa rubriker

35 Läsbarhet Undvik kursiv text eller fonter med mycket ornament ord per kolumn är ungefär lagom för att behålla läsbarhet (ungefär 500 pixels) Låt kortare textstycken vara vänsterjusterade

36 Online text Man läser inte allt online utan man snarare scannar texten. Text ska vara kortare online än på papper Länkar, Headings, punkter etc används för att dra uppmärksamhet till viktigt eller intressant innehåll Bli kort och direkt så mycket som möjligt Det är viktigt med trovärdighet (välskriven text, bra grafik, utgående länkar) Read more:

37 Online text Kontrasten mellan text and bakground ska inte vara för stor eller för liten Mörkgrå på vit bakgrund är bättre än svart på vitt Svart på en off-white bakgrund är inte svårt att läsa heller Och mörk text på en ljus bakgrund är är mer läsbart än ljus text på en mörk bakgrund

38 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

39 Exempel

40 Exempel

41 Desktop-GUI:n Desktop-GUI:n ofta hårt styrda av design-guidelines speciellt nyttoprogram Vad kan man göra Bakgrunder Deep Background Färger och fonter (vikt och kontrast) Separerar informationsnivå och vikt Kanter (man kan använda runda kanter och diagonaler) Bilder Man kan göra knappar gjorda av bilder Träd, listor mm kan också justeras med bilder

42 Rymd, vinklar o textur 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 Bilder Kan vara effektivt, men finns i desktop-gui:n mest när de har en funktion (ikoner)

43 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 vill 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

Depth cues (ledtrådar att något är långt bort,

44 Soft focus (undvik detaljer) Color gradients (starka och rena färger OK men inte hårda linjer mellan dem) Depth cues (ledtrådar att något är långt bort, vertical gradient, oklarhet) No strong focal points Deep Background

45 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.

46 Exempel

47 Exempel

48 Showing Complex Data

49 Showing Complex Data Tidwell kap 7 Preattentive variables (färg, storlek mm) Saker som uppfattas direkt av människor utan vidare tänkande Fortsättning på föregående om visual flow, grouping etc Bra att känna till vid design

50 Hitta de blå prickarna

51 Hitta de blå prickarna

52 Hitta tal > 1

53 Hitta tal > 1

54 Hitta tal > 1

55 Hitta tal > 1

56 Mera

57 Forts preattentive

58 Forts preattentive

59 Exempel

60 Exempel

61 Showing Complex Data Tidwell kap 7 Läs inledning och Overview plus detail

Relevanta dokument

Den här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag

Den här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag Den här veckan Kapitel 7 och 11 Kom ihåg att boka tiden för handledning på fredag Uppsamling av missade övningar på onsdag Making it look good Visuell design Färger Typografi Exempel och patterns Komplex