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 data
Utseendet spelar roll Inte speciellt förvånande 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
Utseendet 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.
Utseende spelar roll
Samma innehåll olika utseende Utseende spelar roll
Samma innehåll olika utseende Utseendet spela roll
Samma innehåll olika utseende Utseende spelar roll
Visuell design Kognitivt inbyggda fenomen - Hjärnan uppfattar vissa saker automatiskt (preattentive variables) - Vissa reaktioner kan förutses Känslor och instinktiva reaktioner spelar in också - Kultur - Förväntningar - Erfarenheter osv... Vad använder man då och hur?
Färg Markera, beteckna, sätta etikett på
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
Färg Ha aldrig liten blå text på en röd eller orange bakgrund Det är svårt att läsa text skriven med komplementärfärger
Bakgrund och kontrast Ljus eller mörk bakgrund? - Gör stor skillnad - Ljusa klart vanligast - Mörka - Vanliga kontroller funkar bäst på dessa - fräckare, dyster, energisk - Finns undantag - Sketchflow, Photoshop t.ex.
Bakgrund och kontrast Skarpa kontraster - Spänning o styrka Mindre kontrast - Lugnande och avslappnande
Hue (kulör, färgton, nyans)
Varma och 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
Färgmättnad Mättad Omättad
Färgmättnad 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
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
Exempel
Färgblindhet Röd-grön - Protanopia - Deuteranopia Blå-gul - Tritanopia
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 - Testa, testa, testa! http://colorschemedesigner.com/ https://kuler.adobe.com/ Mer info
Sammanfattning Färgval spelar roll Se över färgscheman i projektet Rast!
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
Typografi Sans-serif (sans = utan) 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 Undvik kursiv text eller fonter med mycket ornament eftersom de är svårare att läsa
Typografi 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 GUI-kits och guidelines har vanligen rekommenderade fonter och fontstorlekar
Online text Oftast scannar man texten. Bli så kort och direkt så mycket som möjligt Länkar, rubriker, punkter etc används för att dra uppmärksamhet till viktigt eller intressant innehåll 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.
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 lättare att läsa än tvärtom Läs mer...
Desktop GUI 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) - 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 och 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 Corner treatments mönster Bilder - Kan vara effektivt, men finns i desktop-gui:n mest när de har en funktion (ikoner)
Mönster: 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 (också på Contrasting Font Weights
Exempel
Mönster: 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
Mönster: Deep Background 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)
Mönster: 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.
Few hues, many values exempel
Few hues, many values exempel
Att visa komplex 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 de blå prickarna
Hitta tal > 1
Mera
Forts preattentive variables
Forts preattentive variables
The End
Do this Don t do this