lillbra.se

Konsten att bli länkad – användarvänliga webbadresser

Förra veckan skrev jag om konsten att länka – hur du skriver användbara länkar. I den här artikeln tar jag upp användarvänliga webbadresser, som bland annat underlättar när andra vill länka till dig. Bra webbadresser gör det enklare för dina läsare att hitta, och återkomma, till dina sidor.

Längden

Idag har många sajter alldeles för långa url:er – ja, längden har betydelse:

The shorter the URL, the easier to copy & paste, read over the phone, write on a business card, or use in a hundred other unorthodox fashions, all of which spell better usability & increased branding.

SEOmoz Blog 11 Best Practices for URLs (2006-09-27)

Per Axbom konstaterar att de långa krångliga webbadresserna är publiceringsverktygens fel (via Framtider.net). Content management systemens databasgenererade sidor ger ofta rappakalja i adressraden med ”?”-tecken ”=”-tecken, siffror och dylikt. Men det behöver inte vara så, i många opensource-verktyg har man möjlighet att ange själv hur url:erna ska se ut. Till exempel i det bloggverktyg jag använder: så här enkelt skapar du användarvändliga url:er i WordPress. Och de stora kommersiella publiceringssystemen börjar följa efter. I senaste versionen av EpiServer kan man göra samma sak (vilket dock kan innebära andra problem).

Riktlinjer

Men det räcker inte att korta ned url:erna. Det finna många andra saker att tänka på för att en url ska vara användarvänlig. Nedan presenteras en lista som jag sammanställt, och fritt översatt, från Mike Schinkels Well Designed URLs are Beautiful (via Beta Alfa 2.0) och Randfishs 11 Best Practices for URLs (via Fyra nyanser av brunt).

1. Ändra aldrig en sida – låt sidan och adressen vara permanent
2. Låt adressen vara bokmärkningbar
3. Använd endast parametrar ihop med formulär
4. Gör adressen läsbar och hierarkisk
5. Ge adressen en betydelse – låt den beskriva sig själv
6. Gör adressen läsbar i tryck och utskrifter
7. Låt adressen vara hacknings-vänlig
8. Försök göra så att adressen går att gissa sig till
9. Gör adressen varken kortare eller längre än nödvändigt
10. Beskriv istället för att använda siffror i adressen
11. Undvik subdomäner för att förenkla adresser
12. Om ord ska separeras i adressen – använd bindestreck
13. Gör adressen case in-sensitive

Kommentarer till riktlinjer

Alla har vi väl varit med om att irriteras över en trasig länk. Ännu värre är när alla gamla adresser för en hel sajt slutar fungera, som när idg.se bytte publiceringssystem. Samma sak har nyss hänt på tv-feber. Låt därför länken alltid fungera. En beskrivande länk är större chans att kunna ha kvar, när man byter tekniskt system, än en url som använder databasid:n eller liknande. Om samma adresser kan behållas, behåller man även pagerank för sidan hos sökmotorerna.
Att adresser ska vara hacknings-vänliga betyder att en användare ska kunna ändra adressen direkt i adressraden i webbläsaren för att navigera till ett annat ställe på sajten. Genom att t.ex. byta ut eller ta bort ett ord i url:en.
Att url:er ska vara bokmärkningsbara betyder att du ska kunna spara adressen och gå in på den igen senare, eller någon annan ska kunna gå in på den. För att det ska fungera krävs att det inte finns några sessionsvariabler i adressen.
Om ord ska separeras i adressen har frågan ofta varit om man ska använda understreck (_) eller bindestreck (-). De flesta menar att man ska använda det senare, bl.a. för att bindestreck indexerar bättre i sökmotorer. Över huvudtaget underlättar de ovanstående riktlinjerna inte bara för användarna utan även för sökmotorernas indexeringsrobotar.

Dåliga domännamn

Nu spelar det ju ingen roll om hela adressen till sidan är enkel och fin, om själva domännamnet är dåligt. The Digerati Life har sammanställt en lista över de 13 värsta domännamnen genom tiderna (via Beta Alfa 2.0). Listan visar att sammansatta ord kan råka referera till något man inte alls menar – några utvalda adresser från listan är: therapistfinder.com, penisland.net.

Till sist

Förmodligen tar det ett tag innan vi slipper krångliga adresser helt. Tills dess kan du använda TinyURL.com. Det är en webbtjänst där du skriver in en lång krånglig adress och sedan genereras en enklare url till dig efter modellen ”tinyurl.com/nyckelord”. Smidigt!

För vidare läsning om användbara url:er kan jag hänvisa till inlägget och kommentarerna på 24-timmarsbloggen – Hur ser en tydlig webbadress ut?.[tags]html, användbarhet, url, webbadresser, länkar[/tags]

Konsten att länka

Länkar, eller hyperlänkar, är en av grundprinciperna för internet. De är så vanliga att vi kanske inte alltid tänker på dem, men för användbarhetens skull finns det en hel att ta hänsyn till. Här presenterar jag viktiga saker att tänka på när du länkar. Råden är, när inte annat anges, hämtade från Vägledningen 24-timmarswebben (pdf 2Mb).

Du får länka

Först, för att rensa alla tvivel – du får länka till vad du vill. Länka mycket och gärna! Jag kan bli irriterad då jag läser artiklar som inte underlättar för användaren att hitta mer information genom länkar, eller inte länkar till källan. Beta Alfa 2.0 skriver att nätet inte är rätt plats för den som ogillar länkar.
Och Fredrik Wackå uppmanar att länka allt vad du kan – den som lägger upp material på nätet måste acceptera att materialet blir länkat till. Länkpolicys eller dyligt är bara löjligt och gammaldags.

Namnge och beskriv länkarna utförligt

Alltför ofta ser man länkar som bara är döpta till “Klicka här” eller “Läs mer”. Detta ger ingen som helst ledtråd om var länken leder. Emil Stenström har behandlat fenomenet i artikeln “Click here to read this article” och pekar ut fler nackdelar med sådan namnsättning:

• Användare tvingas läsa mer än nödvändigt
• Sämre indexeringsmöjligheter för sökmotorer
• Svårare att navigera för användare med skärmläsare

En bra regel är att man ska kunna läsa länken tagen helt ur sitt sammanhang och ändå förstå var den går/vad som händer när man klickar på den.
Förutom en beskrivande länktext kan länken gärna ges en utförligare titeltext. Detta görs med title-attributet på a-taggen. Titeltexten visas i många webbläsare som en liten tool-tip ruta när användaren håller muspekaren över länken.
Om länken öppnas i nytt fönster bör det anges i länktexten. Om du länkar till dokument i andra format än (x)html bör filformatet anges. Om filen dessutom överstiger 1 Mb bör filstorleken stå med i länktexten. Alltså, döp länken till exempel: “Vägledningen 24-timmarswebben (pdf 2Mb, nytt fönster)”.

Utmärk länkar tydligt

Länkar bör – med undantag för menyer – vara understrukna. Hmm… märker själv att jag bryter mot den regeln. Får ändra!
Vidare ska länkarna ha en färg som avskiljer dem från annan text. Man bör även använda olika färger för besökta och icke-besökta länkar, och visa vilken länk som är aktiv. Detta gör man genom s.k. pseudo-klasser i css. Till exempel:
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: magenta;}
a:active {color: red;}
Roger Johansson upplyser om att ordningen är viktig vid specifieringen av länkarnas utseende. Den ska vara :link :visited :hover :active, som förkortat blir “LVHA” eller “LoVe HAte” för den som vill få lättare att komma ihåg.

Gör det enkelt att klicka

Personer med nedsatt finmotorik kan behöva större ytor att klicka på. Sätt därför gärna padding för länkar i ditt css. Om ikoner/symboler används i anslutning till länken ska de också vara klickbara. Om du har flera länkar efter varann bör de skiljas åt med minst ett tecken (gör helst en lista av dem) så att de blir tydligt separerade.

Länkar till andra språk

Tantek visar oss hur länkar till andra språkversioner bör kodas (via anvandbart.se): de ska ha attributen rel="alternate" och t.ex. hreflang="es" för en spansk version.

Länka telefonnummer

Att länka telefonnummer var något helt nytt jag lärde mig när jag läste Vervas vägledning, och något som jag inte sett på så många ställen hittills på nätet. Detta är ett led i att Skype eller någon annan VOIP-klient numer finns på mångas datorer, och att fler surfar med mobilen. Med länkade telefonnummer kan användaren med ett klick ringa upp direkt från webbläsaren! Sättet att koda en länk till ett telefonnummer är t.ex följande: href="tel:+46855050000".

Det var allt – nu är det bara att sätta igång och sprida lite link-love! Nästa vecka skiver jag om användbara url:er, vilket kan vara viktigt om någon vill länka till dig.[tags]användbarhet, webbutveckling, html, länkar, länkning[/tags]

Idag är det användbarhetens dag

Idag är det användbarhetens dag – World usability day – då begreppet ”användbarhet” ska uppmärksammas och firas världen över:

Syftet med World Usability Day är att verka för användbarhet och användarcentrerad utveckling. World Usability Day är ett sätt att öka medvetandet om vikten av att skapa produkter och tjänster som har en hög användbarhet.

World Usability Day 2006 Världsanvändbarhetsdagen (2006-11-14)

Dagen är utsedd av Usability Professionals’ Association, och en rad seminarier etc. kommer hållas runt om i Sverige. Se vilka aktiviteter som anordnas i din stad.
Hur ska du fira användbarhetsdagen? Själv hoppas jag att våra interaktionsdesigners på mitt jobb bjuder på fika [tags]användbarhet, världsanvändbarhetsdagen[/tags]