Stäng Huvudmeny

Så designar du lättöverskådliga listor

Just do it UX-Design

De flesta läser inte din text, samtidigt som ditt mål är att förmedla något, ofta via just text. Dina besökare flyter med blicken över sidan och scannar efter information, ankaren och beten. Lättöverskådliga listor förbättrar läsbarheten och lyfter fram nyckelord och budskap vilket förbättrar din konvertering.

Det här är en uppföljningspost på tidigare inlägg ”7 Tips för Bättre Typografi och Högre Konvertering”, som bevisar styrkan av typografi och hur den kan förbättra in konverteringsgrad.

De flesta formgivare ryggar tillbaka bara man nämner listor. Det är något som bör förpassas till PowerPoint och användas av ekonomer i torra rapporter. Men listor är ett mäktigt vapen i din konverteringsarsenal.

Lättöverskådliga listor bjuder på en chans att snabbt förstå var du hamnat och vad du kan göra på sidan. I några enkla rader kan du plocka russinen ur den mycket större textkakan och skapa intresse för fördjupning eller presentera dina USPar (Unique Selling Points).

Du kan göra listor som:

  • Bygger förtroende
  • Ökar tillgänglighet
  • Minskar frustrationsnivån hos dina besökare

Vi ska titta på textbaserade listor – korta, sammanfattande textrader och inte menylistor. Jag vill ge dig några exempel och dessutom en kodsnutt så du kommer igång. Vi ska titta på hur man håller ordning på enradiga, flerradiga punkttexter, numrerade listor – till och med listor med ikoner framför.

Guidelines för listor

Vi är primärt ute efter att nå högsta möjliga läsbarhet och läsförståelse eftersom att listor handlar om att förkorta och förklara.

De flesta har gjort presentationer i PowerPoint och skrivit ändlösa listor för att i lika grad ha anteckningar för sig själv som för att ha något på skärmen medan man pratar. På webben kan du inte stå och prata bredvid medan du visar saker men du kan skriva fördjupande texter. –Texter som du kan behöva presentera och introducera.

– Håll det kort. En lättöverskådlig lista bör inte innehålla fler än 5-7 punkter då hjärnan inte vill ta in mycket mer, helst bara skumma förbi. Behöver du fler punkter så kan du behöva dela upp ämnet. I en presentation kanske det räcker med bara en siffra för att hålla intresset uppe i väntan på att du ska förklara vad den betyder.

– Se till att behålla marginalerna. Punkter eller nummer bör ligga separerat från textinnehållet som håller sin marginal.

– Varje rad ska vara tydlig. Om man har flera textrader bör man ha ett extra avstånd till nästa punkt.

…se där. En lista till som syns bra även om den inte är ”formgiven”.

Listans typografi

Listor befinner sig, liksom allt annat webb-innehåll, sällan i ett vakuum på sidan. Beroende på situation krävs det olika lösningar på listans funktion, disposition, indrag, radmellanrum mm. Anpassa därför listans formgivning till sin närmiljö men tänk samtidigt på att ha kontinuitet i din övergripande design. Följ din grafiska profil alltså.

Fyra typografivarianter – ser du dem?

Ur boken Detail In Typography av Hochuli Jost

Ur boken: Detail In Typography av Jost Hochuli

Listans uppbyggnad

  • Det ska vara tydligt att listan bryter ut ur den vanliga texten. Genom att ha ett indrag och lite marginaler till de övriga textstyckena kan listan separeras på ett subtilt men tydligt sätt. Du kan också välja mellan att ha punkterna längs med huvudtextens vänstermarginal eller låta punkterna ligga utanför marginalen åt vänster.
  • Behåll samma textstorlek och radmellanrum som den övriga texten (gäller vid enradiga texter) men testa att byta ut ditt vanliga texttypsnitt (brödtext) mot rubrikstilen till exempel.
  • Punkterna (bullets) ska inte vara alltför skrymmande utan mera markera ut var texten börjar. Detta gäller i synnerhet i PPT-presentationer.
  • Du måste inte använda prickar som listmarkering. Som i exemplet ovan använder Jost Huchuli talstreck. En elegant metod att leda in ögat mot raden. I de flesta typsnitt finns det tecken som kan vara användbara.
• Punkt (Bullet)
» Dubbelvinklat citattecken
– Full fyrkantsstreck (em-dash)
✓ Check bock (Check mark)

I en numrerad lista kan siffrorna hänga utanför marginalen för att man lättare ska hitta ibland det övriga innehållet. Se till att siffrorna linjerar mot höger och texten mot vänster. På det viset syns det vilken rad siffran hör till bäst.

Exempel på listor

Svårast är kanske att få till listor med längre texter i. Klart olämpligt för PowerPoint-presentationer men mycket bra för webblayout. Det blir en sorts mellanting mellan punkt och förklarande text. Tricket är att se till att vänstermarginalen behålls för alla rader så att markeringen, punkten (bullet point) alltid svävar utanför listans kolumn och att separera text-stycken en aning sinsemellan. Då syns varje listning tydligt.

Här nedan redigeras texten till en lista med tre punkter. Det är en kompott av flera olika metoder rekommenderade av Mitchelle & Wightmans Book of Typography – A Designer’s Manual. Använd de delar du gillar, bara du håller dig till samma stil i andra listor på din webbsajt.

Uppbyggad av en flerraders-lista. Animering

Några andra exempel

Enklast möjliga punktlista

Numrerad lista. Du kan ladda ner css koden för den här »

Numrerad lista. Hämta koden här »

Lista med hela textstycken. Bra för topp 10-listningar.

Lista med hela textstycken. Bra för topp 10-listningar.

En punktlista i två nivåer

En punktlista i två nivåer.

Varför inte gå loss helt och göra en lista i tabellform?

Varför inte gå loss helt och göra en lista i tabellform?

Hur du själv kodar en snygg lista

Vi börjar med själva grunden – det som definierar en tabell i html-kod. Om du behöver lite påminnelse:

UL – Un-ordered List
LI – List Item
OL – Ordered List och ger siffror istället för punkter

Uppsättning HTML/ CSS

Börja med en enkel uppställning i html:

<div class="base">
<ul>
<li>Textrad 1</li>
<li>Textrad 2</li>
<li>Textrad 3</li>
<li>Längre text som är ganska lång. Så lång att den kommer behöva två rader.</li> 
</ul>
</div>

Genom att placera listan i en <DIV></DIV> kan vi ge listan en grundläggande css styling.

#base {
 border: 1px solid #000;
 margin: 0em;
 width: 10em;
 padding: 5px;
 padding-left: 1em;
 }

Nu ska vi ge oss på att bestämma vilken sorts punkt det ska vara framför varje listrad.
I CSS-koden skriver vi:

ul {
list-style-image: url(bullet.gif);
list-style-type: disc;
 }

Den andra raden definierar en punkt framför varje rad ifall browsern inte förstår den första instruktionen.

Om din bulletpunkt inte hamnar som du tänkt dig kan du lägga till raden ”list-style-position: inside;” för att lägga punktbilden på listraden.

ul {
list-style-image: url(bullet.gif);
list-style-type: disc;
list-style-position: inside;
 }

Vill du inte ha några punkter alls så kan du använda ”list-style: none;” och göra några marginaljusteringar.


ul {
list-style: none;
 margin-left: 0;
 padding-left: 1em;
 text-indent: -1em;
 }

Font Awesome – no coding skills

Genom att länka in Font Awesome kan vi använda fina ikoner istället för runda bullets. Följ instruktionerna för hur du implementerar deras css-länkning och sedan kan du skriva in förbestämda anrop i din HTML.

Kopiera in denna sträng mellan <HEAD></HEAD> på din webbsida.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

och lägg sedan till styling i din lista:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>Listikoner</li>
  <li><i class="fa-li fa fa-dot-circle-o"></i>kan användas</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>som bullets</li>
  <li><i class="fa-li fa fa-square"></i>i dina listor</li>
</ul>

Så här ser den listan ut. Ganska spännande eller?

  • Listikoner
  • kan användas
  • som bullets
  • i dina listor

check_mark_greenMen var är de gröna bockarna?

I en kommande bloggpost ska vi ta upp de kraftfulla check-bockarna och varför de fungerar så bra.

 

Läs mer om listor

Böcker

Har du erfarenhet eller testresultat relaterade till listor? Lämna en kommentar nedan och låt oss diskutera!


Om Jörgen

Jörgen är en traditionell Art Director som är alltför nyfiken. Han arbetar analytiskt och emotionellt - med lång erfarenhet och djup kunskap. Han är en ifrågasättande formgivare som levererar innovativa och användarvänliga designlösningar.

Comments