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

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

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

Ett exempel

Mycket billigt! Armin Flajt Delajt

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

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.

Samma innehåll olika utseende

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

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

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

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

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

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

Mättad Färgmättnad Omättad

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

Exempel

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

Exempel

Färgblindhet

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! http://colorschemedesigner.com/ https://kuler.adobe.com/ Mer info

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

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

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

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

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

Läsbarhet Undvik kursiv text eller fonter med mycket ornament 10-12 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

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: http://www.useit.com/papers/webwriting/

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

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

Exempel

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

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)

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

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

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

Showing Complex Data

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

Hitta de blå prickarna

Hitta tal > 1

Forts preattentive

Exempel

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