SÖK:

Avdelningar


Blogroll


Arkiv


Grundläggande synergonomi för webdesign

[ 2008-04-11 ] - Avdelningar: Design & Ergonomi, Tips & Trix, Utvärdering av hemsidor |

Webdesign handlar rätt mycket om att testa sig fram. Alldeles för ofta ser man dock webdesign som är ganska dålig när det gäller användning av färger, kontrast, ljus och teckensnitt (synergonomi). Ofta är det ganska uppenbart att webdesignern gick på “känsla” vid skapande av en design. Synd! Synd för att det finns omfattande studier och rekommendationer som är väldigt användbara och som talar ett väldigt tydligt språk. God synergonomi och snygg design är inte samma sak, vilket gör att många lätt luras att en snygg hemsida är bra designad.

För min egen del har kunskap inom synergonomi gjort att jag automatiskt hoppar över mycket av testandet vid skapande av hemsidedesign för att jag vet i förväg att det inte kommer att fungera.

Varför är god synergonomi viktig?

Begreppet synergonomi behandlar frågor kring hur information som fås genom synförmågan är utformad, hur den uppfattas, hur den tolkas och bearbetas samt miljön runt omkring. Tyngden läggs på ögats uppfattningsförmåga, läsbarhet av text och de faktorer som påverkar och bör beaktas. God synergonomi är alltså väldigt viktig om man vill att budskapet på (t.ex.) en hemsida ska uppfattas effektivt.

Färger

97 % av befolkningen, dvs de som inte är färgblinda, sorterar mer eller mindre automatiskt in information med hjälp av färger. Detta utnyttjas ofta vid designarbete. Olika färger används för att framhäva och förstärka information, man använder sig av en s.k. färgkodning. Fördelarna med färgkodning är stora.

Färg står ut från en monoton bakgrund. Därför uppfattas färgkodade detaljer snabbt och enkelt. Söktiden av ett färgkodat föremål är oberoende av hur stor yta som söks av. Vissa färger har en väletablerad symbolisk betydelse. Rött betyder fara eller varning, grönt står för trygghet eller gå osv. Färger kan knyta ihop utspridda element som hör samman.

Pga att färgkodning till viss del sker automatiskt ökar dess värde som redundant (”överflödig”) kodningsverktyg i kombination med form, storlek eller lokalisering. Ett klassiskt exempel på detta är trafiklysen. Översta lampan betyder stop, den röda färgen ger en redundant information som bekräftar detta. Undersökningar har visat att redundant användning av färger minskar avsökningstiden på exempelvis flygplansdisplayer eller när en uppsättning av multipla mål ska identifieras. Det har även framkommit att det krävs färre ögonrörelser vid redundant färgkodning dvs det är lättare att hitta målet när färger används.

Det finns vissa begränsningar och faror som bör beaktas när färger används vid design. Hur färgerna upplevs beror på personens absoluta bedömning. Enbart färg räcker inte för att visa betydelsen. Människor uppfattar färger olika, dessutom kan inte alla se alla färger. För att minska risken för missförstånd eller utebliven kodning är det effektivt att kombinera till exempel färg och symbol, färg och text eller färg och rörelse i bilden. För att färgkodningen inte ska bli missvisande och förvirra mer än det underlättar vid avsökningen ska maximalt fem till sex färger användas i en display. Detta är speciellt viktigt vid svåra eller ansträngande ljusförhållanden som t.ex. varierande belysning och bländning. I dessa situationer blir det svårare att uppfatta och särskilja färger. Rött kan misstas för brunt, blått för svart osv. De lättast åtskiljbara färgerna är röd, gul, blå och grön.

Färgskalan är inte naturligt definierad. Det är stor skillnad på hur olika personer tycker att färger ska delas in, inte ens regnbågens spektra kan anses som ett kontinium.

Stereotyper kan försämra designen om en färg förknippas med en speciell innebörd. Exempel på detta är en termometer där grönt indikerar låg temperatur i ett system där låg temperatur bör undvikas. En sådan design är motsägande. Irrelevant färgkodning kan vara distraherande. När färger används för att lysa upp vissa delar av informationen är det viktigt att upplysningen stämmer överens med de indelningar som användaren upplever när han eller hon betraktar skärmen. Överdriven färgkodning och ogynnsamma färgkombinationer ger ett rörigt intryck och blir därför svårläst. Särskilt dåliga kombinationer är rött och grönt samt rött och blått.

Kontrast och ljus

Bra kontrast har stor betydelse för läsbarheten. Även om text och bakgrund har olika färg blir texten svår att läsa om färgerna har samma mättnad. Stark blå eller grön färg på vit bakgrund är lätt att avläsa. Däremot är en omättad, svag blå eller grön färg svår att läsa på vit bakgrund. Hur färger uppfattas beror på kontrastförhållandet mellan dem. En och samma färg uppfattas olika beroende på bakgrundens färg.

Svart tecken på ljus bakgrund är bäst på bildskärmar. Det är lättast för ögat att avläsa. Tecknet behöver vara minst tre gånger så mörkt som bakgrunden (1:3). För riktigt god läsbarhet krävs att den är sju gånger så mörk (1:7). Svart bakgrund på bildskärmar är ofta olämpligt i kontorsmiljö. Objekten kring skärmen är ofta ljusare och kontrasten blir för stor och därmed ansträngande. På motsatt sätt, en starkt lysande skärm i en bil under nattetid är direkt olämplig i och kommer att störa förarens mörkerseende. Detta har säkert många av er som läser själva upplevt och vet därför att t.o.m enskilda lysande knappar kan störa. Ljusstyrkan ska med andra ord anpassas efter den miljö som betraktaren befinner sig i.

Tecken

Det finns väldigt många typsnitt, dvs utformningar av bokstäver. Seriffer, däribland Times New Roman, bör undvikas på datorskärmar då tvärsnitten är svåra att presentera korrekt pga typiska tvärssträck som karaktäriserar typsnittsfamiljen. Istället bör sans-seriffer som är rena streck utan några tvärstreck användas då dessa är mer lättlästa. Exempel på dessa är Arial och Verdana. Typsnittet Verdana är specialutvecklat för små tecken på dataskärmar. Vidare är det viktigt att välja typsnitt som inte minimerar risken att man blandar ihop bokstäver och siffror, såsom 1 och I, C och G eller å och ä.

För bra läsbarhet behöver bokstäver och siffror vara ca 4 mm vid synavstånd på ca 70 cm. Detta motsvarar text i storlek 12 punkter på en vanlig datorskärm. Olika typsnitt ger dock olika intryck och läsbarheter, storleken är därför beroende på typsnittet. Text eller symboler i färg behöver vara större än när de är i svart, detta beror på kontrastskillnaden.

En skarp avgränsning mellan tecken och bakgrund är också viktig. Oskarpa tecken ger försämrad läsbarhet och man blir snabbare trött i ögonen. Kantutjämning ska dock inte misstas för skarphet. Kantutjämning används för att undvika den kantighet som uppstår pga att bilden på en skärm är uppbyggd av punkter.

Ytterligare riktlinjer för läsbarhet är att undvika små tecken-, ord- och radavstånd, kursiv text samt långa rader. Text i enbart versaler ska också undvikas i löpande text, undantaget är rubriker och menyrader.

Mycket mer om synergonomi

Det finns väldigt mycket att lära sig inom synergonomi och ämnet växer konstant. Ovanstående stycken är synergonomi i sin mest grundläggande form men ändå användbart.

2 Responses

  1. anna eckeskog Says:

    Intressant att du skriver allt detta med mörk bakgrund.. Är det för att förtydliga hur dålig avläsbarhet det blir eller… :-)

    mvh

  2. admin Says:

    Jag har inte planerat det hela så pass mycket. Den tråkiga sanningen är att jag ville matcha min existerande företagshemsida (www.marcinnowak.se).

    Att min företagshemsida ser ut som den gör beror på att jag ville skilja mig från andra och förhoppningsvis lägga hemsidans utseende på besökarnas minnen. I och med att den har begränsat med information ansåg jag att den kompromiss (mellan utstickande utseende och synergonomi) som hemsidan har blivit är godtagbar.

    En kompromiss är nödvändig när man har olika mål och resultatet behöver inte vara dåligt men det förutsätter nog att man målen är korrekta.

Kommentera