Webbdesign

Utforma och layouta webbsidor.

Våra ögon fokuserar bara på delar av webbsidan när vi surfar

Eye-tracking är ett sätt att följa ögonrörelser på en webbplats och se vad försökspersonen tittar på. StomperNet har satt ihop ett videoklipp om hur vi ”ser” webbsidor och ger tips om hur man designar webbsidor med ögonen i fokus (ursäkta ordskämtet):

I klippet talas om fovea, det område i vårt seende där vi ser som mest detaljer. Det är utformat precis som en widescreen-tv, det vill säga i formatet 16:9.

Grundregeln är att webbsidor därför bör designas med små bitar av information som är bredare än vad de är högre. Då kan ögat se helheten direkt utan att behöva skanna för att se hela innehållet.

Dela också av information med hjälp av hög kontrast eller genom vitt utrymme.

Dessutom är en vanlig uppfattning att man inte ska göra listor eller menyalternativ mer än sju till antalet. Anledningen är att man inte kan hålla fler objekt i huvudet, få översikt och att det tar längre tid att räkna och därmed uppfatta.

Gillar nördiga webbanvändare flash? Troligtvis inte.

Do Geeky Web Users Like Flash? Probably Not.

One might think decision makers in an IT department would appreciate the enhanced experience Flash, AJAX, and other animation technologies offer.

I was mistaken.

Our firm has performed many usability tests on Flash- and AJAX-enhanced sites. Below are some of the actual comments we received from one-on-one usability tests:

Och sedan listas ett antal kommentarer, bland annat denna:

”I want to get down to business. I want to see things. What’s with this [expletive] animation thing?”

Vad blir ”skip to content” på svenska?

På många webbplatser finns det nu en länk överst i html-dokumentet i stil med ”Skip to content”. Men det finns inget vedertaget sätt att skriva det på svenska.

Emil Janitzek frågade mig hur man bör göra:

Vilken formulering bör man använda sig av på svenska hemsidor? ”Hoppa till innehållet”, ”Gå direkt till innehållet”? Om man letar inspiration bland statliga hemsidor så ser man att hemsidor som regeringen.se, sr.se, ud.se osv har valt frasen ”Hoppa till sidinnehållet”. Bör man vara helt enhetlig och använda den engelska texten eller ska man ta efter regeringens utformning?

Det är en bra fråga. Hoppa till sidinnehållet tycker jag fungerar bra, eller bara Hoppa till innehållet, eftersom det är kortare. Att skriva ” till innehållet” tycker jag inte är någon vidare idé eftersom verbet ger sken av att man ska ta sig från en punkt till en annan (så som länkar fungerar). Man ”hoppar” inte mellan webbsidor, men däremot kan man göra det inom en webbsida.

Hur som helst, jag skulle följa majoriteten i detta fall. Det underlättar för alla om folk gör likadant och man vet vad som väntar. Konventioner is the shit. Söker man på Google får man dessutom runt 300 000 träffar på ”Hoppa till innehållet”, men dock bara två träffar på ”Hoppa till sidinnehållet” (dock verkar det som att regeringen har 1,3 miljoner webbsidor indexerade hos Google).

En oöversatt ”skip to content” tycker jag är helt uteslutet. Varje språk ska ha sin utformning, utan krav på att läsaren ska kunna andra språk.

De största misstagen inom webbdesign någonsin

Webbplatsen Web Pages That Suck har satt ihop en lista med the biggest web design mistakes. Väldigt humoristisk text, värd att läsa.

Misstagen i nummerordning:

  1. Believing people care about you and your web site.
  2. A man from Mars can’t figure out what your web site is about in less than four seconds.
  3. Mystical belief in the power of Web Standards, Usability, and tableless CSS.
  4. Using design elements that get in the way of your visitors.
  5. Navigational failure.
  6. Using Mystery Meat Navigation.
  7. Thinking your web site is your marketing strategy.
  8. Site lacks Heroin Content.
  9. Forgetting the purpose of text.
  10. Too much material on one page.
  11. Confusing web design with a magic trick.
  12. Misusing Flash.
  13. Misunderstanding graphics.

Glöm design på nätet, innehåll är viktigare

Varje gång jag hör någon lovorda design på nätet blir jag nästan lite förbannad. Enda anledningen till att design finns är för att kommunicera innehållet.

Design i allmänhet och webbdesign i synnerhet har inget annat syfte än att föra fram innehåll. Det går därför inte att bygga en design och trycka in innehåll i den. Det är ungefär som att skräddarsy ett par byxor utan att ta hänsyn till vem som ska ha dem. Byxor är gjorda för individen. Individen är inte gjorda för byxorna.

Sedan har vi det här med ”ful” och ”snygg” design. Det är ett så vagt ord att jag nästan blir mörkrädd bara jag tänker på det. När amatörer ber om kritik blir det ofta ”det där var inte snyggt”. Det är ju helt meningslöst att veta om något är snyggt eller inte. Vad man vill veta är om något fungerar, om webbsidan ifråga kommunicerar det man vill ha sagt.

Jag läste på ett forum om hur konstigt det var att Blocket.se var så framgångsrik trots att designen var ”ful”. Det är väl ganska enkelt. Det är där alla köpare finns.

Sedan hur de har kommit till Blocket är en annan fråga som jag inte tänker tar upp (en stor koncern bakom webbplatsen, fungerande marknadsföring mot rätt målgrupper med mera).

Men en designer måste ju öva på att designa och skapa ett portfolio

Ursäkta om jag får några ovänner nu, men jag tycker att en designer är riktigt korkad om han eller hon gör saker för att ”visa upp” eller för att fylla sin portfolio. Internet är i första hand ett användarcentrerat media, till skillnad från exempelvis tidningar, där användarens krav och mål sätts i första rummet. Vad designern tycker är därför helt ointressant. Han eller hon ska bara se till så att det på ett enkelt sätt går att göra det som webbplatsen är till för.

Jag värdesätter vilken interaktionsdesigner som helst framför en webbdesigner.

Du är ju sjuk i huvudet, klart att man ska göra snygga sidor!

Layout är ett kommunikationsmedel i första hand, estetik i andra hand.

Och vad innebär estetiskt tilltalande? Om majoriteten av alla tillfrågade säger att webbplatsen är ”ful”, innebär det att den måste göras om? En ny förfrågan bland andra användare kan ge det omvända resultatet. Utseende är alltid subjektivt och det finns inget ”rätt” svar. Layout är däremot ett kommunikationsmedel och kan därför mätas och användbarhetstestas.

Snyggheten kan vara avgörande för hur framgångsrik en webbplats är

Enda sättet att mäta hur ”snygg” en sida är, är genom omröstningar. Om majoriteten tycker att en sida är ”snygg” måste den därför vara snygg. Det är min teori. Fast sedan har ju alla olika uppfattningar, vilket gör frågan lite mer komplex.

Om vi då tar Blocket som exempel igen, och gör om den ungefär som 2advanced (som är riktigt läcker) kommer vi då att få fler nöjda besökare? Troligtvis inte, eftersom den spartanska desigen på Blocket är i harmoni med vad man ska göra där: leta eller lägga ut en annons. Ganska enkla uppgifter, som kräver en väldigt snabbarbetad (interaktions)design.

Därefter har vi dilemmat: Om personer har svårt att hitta på en webbplats, men tycker designen är ursnygg, kan man då verkligen ändra något? Vad ska man ändra?

Jag kan inte hitta ett enda exempel där en ”snygg” design måste övervinna användbarhet.

Inte ens en portfolio, eftersom portfolions jobb inte är att vara snygg, utan att illustrera vad personen ifråga kan och inte kan. Om portfolion inte är användbar, kommer det heller inte att framgå vem formgivaren är. Då säger du givetvis att portfolion i sig kan vara snygg, vilket är riktigt, men då på bekostnad av användbarheten. I ett sådant fall skulle jag faktiskt föredra en så kallad splash-screen, eftersom arbetssättet på en portfolio är förhållandevis linjär. Den potentiella arbetsgivaren kanske säger: ”Oj, det här var snyggt… men nu vill jag veta lite mer om den här personen”!

Men om alla skiter i designen blir det bara fula hemsidor kvar!

Man ska absolut inte strunta i utformningen av en webbplats. Vad jag vill ha sagt är att du ska sluta tycka så mycket, försök testa i verkligheten om det praktiskt fungerar och omprioritera målsättningarna. Utveckla användbara saker för målgruppen och försök även göra det på ett, enligt ditt tycke, vackert sätt när alla väsentliga bitar först fallit på plats.

Alltså:

1. Få det att fungera.
2. Gör det snyggt.

Läs också: