Design

Skapa visuella intryck som underlättar förståelse

Det visuella intrycket har två huvudsakliga syften:

  1. Skapa en form som underlättar användningen och som ser till att användaren tar sig i mål.
  2. Skapa en form som tydliggör vem som är avsändare.

 

Använd följande riktlinjer för att formge formulär och blanketter:

  • Få det att se lätt ut.
  • Gör det särskilt lätt att komma igång.
  • Arbeta med en spalt.
  • Gör presentationsordningen logisk.
  • Skapa visuellt tydliga grupperingar.
  • Skapa ett harmoniskt och logiskt intryck.
  • Använd relativt breda marginaler.
  • Göm/expandera block av information.
  • Markera tydligt vad som är obligatoriskt eller vad som är frivilligt.

Knappar

Knappar ska ha formuleringar som beskriver vad som händer vid klick på knappen. De ska vara visuellt utformade så att de ser ut att vara klickbara.

Finns det två alternativa knappar och den ena till exempel avbryter interaktionen är det bra om det alternativ som för interaktionen framåt framträder tydligare.

Om det ännu inte går att använda en knapp är det okej om den är visuellt utformad för att signalera det. Observera dock att även nedtonade alternativ måste klara reglerna för tydliga kontrastskillnader.

Exempel på bra och dåliga knappar

          

 

 

 

Fel                             Rätt

 

Knappar ska tydligt ange vad som händer vid klick på knappen.
De ska vara visuellt utformade så att de ser ut att vara klickbara.

 

Formulär

Placera objekt i formulär

Det bästa sättet att skapa formulär är att placera objekt i en spalt, under varandra.

Det är viktigt att läsordningen blir tydligt utan ansträngning. Står objekt bredvid varandra skapas en läsordning i zick-zack. Det är störande och tar energi att följa med. Dessutom bildas osynliga linjeringar, vilket gör att många användare riskerar att leta i ”fel mönster” för att hitta objekten. Ett annat problem kan vara att användare faktiskt inte ser de objekt som finns till höger.

 

Formulär med rörig struktur

 

 

 

 

 

 

 

 

 

Fel. Exempel på ett formulär som kan skapa svårigheter för många människor. Det är svårt att se var fokus är, och var formuläret startar.  Läsordningen är oklar och det är otydligt vad som hänger ihop.

 

Fel. När formulär skapar många ”lodräta linjeringar” ger det ett oroligt intryck.

 

Fel. Formulär som kräver ögonfixeringar både från vänster till höger och uppifrån och ner kräver stor koncentration.

 

Fel.  Detta exempel visar att det kan uppstå en osäkerhet om vilken läsordning som gäller när ögonrörelserna behöver flytta både ner, sidledes och upp.

Fel. Användaren riskerar att missa att fylla i de uppgifter som ligger till höger.

 

Rätt! Användaren kan följa ordningen i formuläret utan att tveka när objekten ligger under varandra.

 

Formulär – ledtexter

Ledtexterna ska tydligt hänga samman med ifyllnadsfälten.

När ifyllnadsfälten är för långt från ledtexterna krävs onödig energi att hålla sig kvar på rätt rad och att förflytta ögonen mellan.

Fel. Här skapas långa förflyttningar för ögat mellan de objekt som ska vara i fokus.

Fel.  Här skapas kortare förflyttningar mellan objekt som ska vara i fokus men zick-zackmönstret i interaktionen är kvar.

 

Rätt! Det här ger en tydlig riktning för interaktionen med formuläret.
Genom att placera objekten under varandra skapar du det mest harmoniska interaktionsmönstret.

 

Formulär – Håll samman ledtexterna

Ledtexterna ska skrivas samlat på ett ställe. Står ledtexter som hör till samma fält på olika ställen riskerar användaren att missa delar av informationen.

 

Formulär med ledtexter

 

 

 

                Fel                                           Rätt

För att användaren ska få del av all nödvändig information behöver du hålla ihop informationen. Lägg alltid hjälptexterna tillsammans med ledtexterna.

Arvsfondens logotyp