Hemmablind design av länklistor

Jag stöter på tafatta försök till länklistor (se exempel i Figur 1 ovan) i ökande omfattning på svenska webbplatser och känner att jag vill dra i nödbromsen. Det är inte ok att bara slänga upp en lista med länkar och tro att människor ser dem.

Det viktigaste i en länklista är, trots allt, själva länken. Om man tycker att länken är viktig så kommer här ett hett tips: välj inte en minimal storlek på typsnittet och strunta för all del inte i att signalera att det är en länk.

Läs mer

Trots att bägge grupperna tillgänglighetsexperter och sökoptimeringskonsulter länge varnat för länken “Läs mer” så dyker den upp titt som tätt. Sluta med det, den ger inte mervärde för någon. Länka det som betyder något, i exemplet ovan alltså själva rubriken på nyheten.

Rubriksättning

Rubriken på en länklista är inte oviktig. I mitt exempel i figur 1 ovan har jag medvetet valt Pressmeddelanden eftersom det ofta är ett irrelevant begrepp. Pressmeddelanden används internt på företagen som i “skicka ett pressmeddelande” och av nyhetsbyråer: “nu har det kommit ett pressmeddelande”.

Men pressmeddelandet är en nyhet och jag lovar att en vanlig besökare inte riskerar att stamma sig över begreppet nyheter på samma sätt som man kanske undrar varför det är viktigt att poängtera att det är ett pressmeddelande (betyder det att det är mer viktigt än en nyhet, eller bara att det faxats till en massa nyhetsbyråer, eller vad menar man egentligen?). Om det faktiskt är mer viktigt än någon annan nyhet finns det massor av sätt att visualisera det på.

Signalera länk

Visst, man kan argumentera för att understrykningen av länkar i långa listor kan vara ansträngande för ögat. Men fortfarande måste det vara tydligt att det är en länk; det räcker inte med att man måste leta med musen och upptäcka att något ändrar färg eller får en understrykning. Ett vanligt förekommande sätt är en symbol, stiliserad pil, som i Figur 2 ovan.

Textstorlek och kontrast

Större skärmar med högre upplösning innebär att ett typsnitt ser mindre ut än i lägre upplösningar. Fler människor med synfel surfar på nätet. Och allvarligt, vill du fylla upp en skärm med innehåll är det bättre att förstora den relevanta texten du har på plats än att försöka hitta på fler lådor med innehåll.

Hemligheten: Stor text är lättare att läsa.

Blå text mot blå bakgrund är sällan rätt och att blanda för många ljusa och mörka ytor nära varandra kan verka störande. Människor med nedsatt syn, färgblindhet och kognitiva handikapp uppskattar när det är skarpa raka linjer och du står för vad du säger. Ingen idé att göra det suddigt.

Metadata (exempelvis datum, författare, m.m.)

Om vi bestämmer oss för att länken är det viktiga, sätt då länken först. Om länken fångar intresset, så ska det mest relevanta metadatat förmodligen finnas tillgängligt (i mitt exempel datumet) – och resterande metadata finns när man klickar på länken.

Sida vid sida förtydligar

Du kanske inte hann uppfatta alla detaljskillnader mellan figur 1 och figur 2 i bilden ovan, men jag misstänker att du snabbt insåg värdet av figur 2. Att ställa två designförslag sida vid sida är ofta ett bra sätt att visualisera och identifiera brister. Med miljarder webbsajter därute är det inte ont om designförslag att jämföra sig mot.

Eller fråga mig, jag brukar ha en åsikt 😉