Webbdesign

Utforma och layouta webbsidor.

Öppna allt utom webbsidor i nytt fönster

Jakob Nielsen har genomfört ytterligaren en studie och konstaterar att exempelvis pdf-filer bör öppnas i ett nytt fönster.

Anledningen till hans slutsats är att användare tenderar att se de öppnade filerna som applikationer (som Word eller Adobe Reader) och därför klickar på krysset för att stänga filen, i stället för att trycka bakåt i webbläsaren.

Problemet har nog att göra med att Microsoft Word och Adobe Reader har tilläggsprogram som tillåter att deras filtyper att öppnas inuti webbläsaren. Det är ungefär som att öppna upp en webbisda i Adobe Reader. Det skapar bara förvirring och det fungerar inte som man vill. Åtminstone för mig.

Jakob ger också några tips, som alltid, för att förbättra tillgängligheten:

  • Öppna allt som inte är webbsidor i nya fönster.
  • Varna besökarna i förväg att ett nytt fönster kommer att öppnas.
  • Ta bort menyraden från det nya fönstret.
  • Bäst av allt: förhindra webbläsaren att öppna filen – tvingen den att ladda ned den. Det går att lösa med något serverspråk.

Visa länkar i löpande text eller vid sidan om?

Var ska man lägga länkarna i en nyhetsartikel? Ska de ligga i den löpande texten, eller som en lista vid sidan om?

Jag tycker det bara finns ett sätt att göra i nästan alla fall. Lägg det i den löpande texten.

Länkarna får automatiskt större relevans när det förekommer i en mening. Men se till att länka viktiga ord.

Dessutom kan man plocka ut alla länkar automatiskt från den löpande texten och visa som en lista. Man kan alltså få det bästa ur två världar! Tvärtom går däremot inte.

Vilket sätt tycker du är bäst?

Fler besökare men färre klick på annonser?

Ibland stiger antalet besökare väldigt snabbt. Logiskt nog borde även antalet klick på annonser stiga lika mycket. Men det gör det inte alltid.

Vad beror det på? Enligt undersökningar jag har läst så visar det sig att återkommande besökaren ”lär sig” var annonserna finns och medvetet undviker annonser.

Ett sätt att råda bot på det är att hela tiden organisera om och flytta annonserna. Det får däremot inte bli för ofta och för häftigt, för då kan webbplatsen upplevas som rörig. Det är en balansgång.

Hur gör du?

Vilka meta-taggar måste jag använda?

Behöver man använda meta-taggar i html-koden? Vad fyller de för funktion?

Meta-taggar är till för att beskriva en webbsida. Metadata betyder nämligen just ”information om information”. Det kan vara saker som vem som har skrivit dokumentet, när det senast ändrades och en kort beskrivning av innehållet. Ibland kan man även använda nyckelord för att sökmotorer ska hitta dessa ord. Men det har missbrukats, och knappt någon sökmotor vill känna vid nyckelord inmatade i meta-taggarna.

Den enda taggen som används flitigt av Google är description. Den kan ibland visas i sökresultatet hos sökmotorer. Se nedan:

Description visas på Google

Meta-taggen ser ut så här och placeras mellan <head>:

<meta name="description" content="Konsten att bygga webbplatser som är enkla och användbara." />

Det är denna du ska koncentrera dig på. Men lägg inte in nyckelord här, utan skriv en slagkraftig beskrivning som ger känslan ”åh, det måste jag läsa mer om”. Det är trots allt människor som ska läsa den texten, inte sökmotorer.

Dessutom finns det flera länkkataloger som till exempel Dmoz som använder description. Då visas startsidans titel och beskrivningen från meta-taggarna.

Bry dig inte om vad folk tycker om utseendet

Många frågar ”vad tycker du om min webbplats?” och får till svar i stil med ”ganska fult, jag gillar inte de röda strecken – gröna hade varit snyggare”. Sådan kritik är inget att ha.

Vi människor är alla olika och gillar olika saker. Det person A tycker är snyggt har person B garanterat en annan uppfattning om. Det går inte att säga att ”grönt är snyggare än rött”. Det är en smaksak. Sådan kritik finns ingen mening att ta till sig.

Däremot är ”grönt, i stället för rött, passar bättre till texten och är lättare att läsa” betydligt bättre. Det gynnar alla om texten är lättare att läsa. Men det gynnar bara ett fåtal om gröna strecken är gröna i stället för röda.

Så, fråga aldrig vad de tycker om utseendet på din webbplats. Fråga om det enkelt kan hitta det de söker, om de tycker att färgerna matchar innehållet (till exempel fotboll = grön, fiske = blått, bilar = stålgrått) och så vidare. Det är betydligt viktigare än om det är ”snyggt”.

Ta bort dina länkar som leder till W3C validator

Ibland kan man se små länkar nere i sidfoten på webbplatser. Det står ”XHTML – CSS” och är länkad till valideringstjänsten hos w3c. Vad fyller det för funktion för besökaren?

Ta bort, bort, bort! Jag skiter i om webbsidan är gjord i strikt XHTML eller inte. Som besökare vill jag att den ska fungera överallt, men jag ska inte behöva informeras om det.

Uppdaterat 10 juli: Ännu värre blir det om man använder bilder, där alt-texten är ”Valid CSS!”. Detta kommer även dyka upp på Google i sökresultatet, vilket gör att dessa ord blir sökbara på sidan. Likadant är det med länkar.

Sökresultat med css och xhtml-länkar
Bilders alt-text visas som sökresultat på Google. Har besökaren nytta av att veta att sidan är gjord i ”Valid CSS!” innan man går in på den?

Så utformar du dina länkar

Att länka verkar vara svårt. Därför kommer här en lathund.

  • En viktig sak är att när du klickar på en länk så ska den byta färg. Då vet man var man har varit.
  • Länka bara viktiga ord. Börja alltid med att länka ett viktigt ord. En länk tappar hela sin betydelse om du länkar en lång mening. Länka inte allt: Se en lista med böcker om användbarhet. Länka i stället bara de viktiga orden: Se en lista med böcker om användbarhet.
  • Skriv inte ”klicka här” eller ”läs mer”. Skriv inte: För att ladda ned rapporten om användbarhet, klicka här. Skriv hellre: Ladda gärna ned rapporten om användbarhet. Vi klickar på det vi vill veta mer om, och ingen vill veta mer om ”klicka här”. Tänk också på att skärmläsare (för blinda) kommer att läsa upp alla länkar: ”Det finns tre länkar på den här sidan: klicka här, klicka här och klicka här. Vilken väljer du?”.
  • Länka bara till webbsidor. Alltså html-sidor. Om du länkar till något annat (ett videoklipp, pdf-fil eller zip-fil) så måste du säga det! Skriv exempelvis Ladda ned rapporten (PDF-fil på 45 kB). En ikon som illustrerar filtypen ger ännu bättre effekt. Det finns inget värre än när det händer oväntade saker.
  • Använd attributet title för att beskriva länken. Men skriv något som vi inte redan vet! Allt för ofta ser man beskrivningar som säger samma sak: <a href="filmer.html" title="Lista över mina filmer">Lista över mina filmer</a>. Det fyller ingen som helst funktion. Skriv hellre något nytt: <a href="filmer.html" title="83 st dvd-filmer">Lista över mina filmer</a>. Och du, skriv inte adressen i beskrivningen. Den ser vi ju i statusfältet när vi håller muspekaren över länken.