Myt: Ju färre musklick, desto lättare att hitta

Jag har stött på en del personer som verkar tro att ju färre gånger man behöver klicka på en webbsida, desto lättare är det att hitta.

Så är det givetvis inte. Det som är intressant är hur relevanta klicken är. Det är inget fel med många klick, snarare tvärtom. Två klick som leder fel är mycket värre än fyra klick som leder besökaren rätt.

Var inte rädd för att visa helheten och sedan låta besökaren klicka sig djupare in på detaljer. Låt varje sida på din webbplats handla om bara en sak. Behöver du förklara något så länkar du vidare till en sida som handlar om det. Korslänka informationen. Det är ju det som nätet är så bra på.

”Information” – länken som inte betyder något

På många sidor finns det länkar som heter ”Information”. Det säger mig inte ett dyft. Vad är information? Allt som ligger på nätet är väl information? IT är ju till och med en förkortning för informationsteknik!

  • På en e-handelsplats brukar information ofta vara fraktkostnader, leveransvillkor och hantering av returer.
  • På en personlig portfolio kan det vara en ”vem-är-jag?”-sida som handlar om personen som gjort portfolion.
  • På en företagssida kan det vara ”om oss” och vad företaget sysslar med.

Det finns alltså inget direkt svar på vad ”information” är på en webbplats. Det kan vara precis vad som helst. Telia tar ändå priset med deras mångfaldigt onödiga splash-screen:

Här på vår webbplats Telia.se finner du information, vare sig du söker fakta om våra produkter och tjänster eller om vårt företag.

Precis vad jag letar efter. Information. Grattis Telia!

Vad vill jag ha sagt? Skriv vad dina länkar verkligen leder till. Om vi klickar på en länk ska det inte stå ”läs lite information”. Om vi klickar på en bild ska det inte stå ”titta på ett fotografi”. Om vi ska spela upp ett videoklipp så ska det inte stå ”rörliga bilder”.

Andra tabbar med text som jag tycker är irriterande:

  • Länkar som länktext. Det är konstigt att man har en länk som heter länkar. Hur hänger det ihop? Tänk dig en dagstidning där det finns en avdelning som heter ”ord”.
  • Välkommen! Det finns ingen anledning att välkomna besökare (det fyller samma funktion som splash-screens: ingen). Ge mig svar på frågan ”vad kan jag göra här?” i stället.

Bra webbplatser låter dig gissa adressen

Ibland vill jag få tag i information om ett program, exempelvis Photoshop. Jag vet vilket företag som har gjort programmet och brukar därför bara skriva in företagets domän plus programmets namn i webbläsarens adressfält och trycka enter.

Skriver jag in adobe.com/photoshop skickas jag vidare till http://www.adobe.com/products/photoshop/main.html. Adobe klarar också felstavningar:

Det är helt suveränt! Det är enkelt, tillgängligt och underlättar för mig som besökare. Likadant är det med alla deras program (testa själv med InDesign, Premiere eller Acrobat).

Det går betydligt snabbare att gissa adressen än att leta upp den bland bokmärken eller att söka efter den hos Google (även om det också går ganska snabbt).

Därför är det bra om du:

  • Har ett enkelt domännamn. Om det är lätt att skriva så är det lätt att komma åt (vilket innebär att du säljer mer).
  • Låter besökaren komma åt produkter genom att gissa. Det är väldigt vanligt (i alla fall för mig) att försöka med företagsnamn.se/produktnamn.
  • Tar hänsyn till stavfel. Jag skriver själv både mycket och ofta men även jag gör fel emellanåt (även om det var många år sedan sist ;)).

Användbarhetsexperten Jakob Nielsen ger också några tips om enkla adresser som underlättar för besökaren.

Bredbandsbolaget kör fortfarande med splash-screens

En splash-screen är en webbsida som visas innan man kommer in till huvudinnehållet. Det kan vara för att man ska välja språk eller land. Splash-screens är ofta ett säkert tecken på dålig webbdesign.

Går man in på Bredbandsbolaget möts man av en splash-screen:

Bredbandsbolagets splash-screen med flash

Där får man välja mellan ”About us”, ”Företagskund”, ”Privatkund”, ”BRF” och ”Fastighetsägare”. Jag finner ingen logik i alternativen och jag vet inte vad BRF betyder (Bostadsrättsföreningen visar det sig).

Men vänta. Det blir ännu roligare. Själv kör jag med tillägget flashblock som blockerar flash från att köras på webbsidor. Jag måste därför klicka på varje flash-objekt för att se dem. Det första jag ser är alltså:

Bredbandsbolagets splash-screen utan flash

Det ska tilläggas att även sökmotorer ser detta (alltså inte ett skit). De kan inte läsa flash och kan därför inte ta sig vidare på sidan. Allt som indexeras är troligtvis titeln på html-dokumentet. Inte speciellt trevligt.

Så här bör man göra i stället:

Använd inte splash-screens. Skicka användaren direkt till innehållet och markera alternativet ”Privatkund” från början. Jag skulle tippa på att de är i majoritet.

Om besökaren visar sig vara en företagskund så ska man enkelt kunna byta från privatkund. Tänk om en företagare hamnar på en undersida från en sökmotor. Undersidan är för privatpersoner och det går inte att byta till företagskund. Tror du att företagaren kommer att handla från Bredbandsbolaget då? Nej, tjänsten ”finns ju inte för företag” hade reaktionen blivit.

Det är dålig struktur på informationen. Man kan inte förlita sig på en splash-screen ska guida besökaren rätt. Alla går inte in via startsidan, utan kommer ofta från sökmotorer, bokmärken, länkar från andra sidor och dylikt. Därför är det ett måste att man kan ta sig till vilken del som helst av webbplatsen, från vilken del som helst.

Det handlar om att korslänka. Nätet är inte linjärt som Bredbandsbolaget vill göra den (gå från splash-screen > vidare till avdelning för privatkunder > läs mer om abonnemang). Nätet är helt icke-linjärt. Besökaren kanske vill börja läsa om vilka abonnemang de erbjuder, och sedan välja för privatkund eller företagskund. Kanske jämföra priser (”ska jag köpa bredband som privatperson eller för min enskilda firma?”).

Det hela är därför mycket enkelt:

Utgå från besökarens behov! Låt inte designnissar utforma din webbplats. Låt inte någon annan än besökaren ta kontrollen.

Så bygger du om din webbplats men behåller plats på Google

Planerar du att flytta webbsidor eller kanske bygga om hela din webbplats? Då kan det vara praktiskt att se till så att gamla adresser inte slutar fungera. Det finns flera tekniker att göra det på, men bara ett som är rätt.

När sökmotorn Google indexerar din webbplats så får du en PageRank. Det är Googles mått på hur bra din sida är i förhållande till alla andra. PageRank är en tiogradig skala och ju högre, desto bättre. PageRank är en av de faktorer som avgör din position på sökresultatsidan (ofta kallad SERP).

När du byggt en stor webbplats och hamnat högt upp hos sökmotorerna är det inget kul att kasta bort det. Byter du från ett publiceringssystem till ett annat är risken stor att adresserna ändras. När en besökare hittar din sida på Google hamnar de i stället på 404 File Not Found. Det är ett allt för vanligt problem på nätet.

När du flyttar en webbsida:

När någon kommer till din gamla sida så ska du skicka status i meddelandehuvudet om att sidan är flyttad. Det heter 301 Permanently Moved och innebär att Google ska ersätta den gamla adressen med den nya. Samtidigt så skickas man automatiskt vidare till den nya webbsidan.

Så här kan det se ut i PHP:

/gammalsida/index.php
<?
header("Status: 301 Moved Permanently");
header("Location: /nysida/");
?>

Så här kan det se ut i ASP:

/gammalsida/default.asp
<%@ Language=VBScript %>
<%
Response.Status = "301 Moved Permanently"
Response.AddHeader("Location", "/nysida/")
%>

Så här kan det se ut i ASP.NET med C#:

/gammalsida/default.aspx
<script language="c#" runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = "301 Moved Permanently";
Response.AddHeader("Location","/nysida/");
}
</script>

Du kan också använda redirects för att flytta besökaren automatiskt till en ny sida. Men kom ihåg att en vanlig redirect fungerar som en tillfällig ändring. Om du skriver in /gammalsida och skickas vidare till /nyasida kommer Google fortfarande att använda /gammalsida i sitt index. Och ibland fastnar även den nya sidan (det kan alltså bli två adresser med samma innehåll).

När du vill ta bort en webbsida:

Det händer ju också att man behöver ta bort sidor. Sidor som inte längre får finnas kvar av en eller annan orsak. Vad du inte ska göra är att ta bort dokumentet och tro att allt är frid och fröjd. Nej, Google (plus alla dina besökare) kommer då i stället att få 404 File Not Found. Vi betraktar det som att webbpublicisten har gjort ett fel, kanske länkat fel när en ändring har gjorts eller liknande. Google kommer då försöka tills den hittar filen. Det kan vara vara i all oändlighet verkar det som. Jag tog bort några sidor för tre år sedan och ibland droppar det in besökare från Google som letar efter just den sidan. Den finns ju i Googles index när man söker efter webbsidan.

Vad vi ska göra då i stället är att säga till Google att sidan har tagits bort – för alltid. Statusmeddelandet för borttagna webbsidor är 410 Gone. Nästa gång Google ska kräla igenom din webbplats kommer den att plockas bort.

Så här kan det se ut i PHP:

/borttagen/index.php
<?
header("Status: 410 Gone");
?>

Så här kan det se ut i ASP:

/borttagen/default.asp
<%@ Language=VBScript %>
<%
Response.Status = "410 Gone"
%>

Så här kan det se ut i ASP.NET med C#:

/borttagen/default.aspx
<script language="c#" runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = "410 Gone";
}
</script>

Så här säkrar du dina adresser för framtiden:

  1. Planera vad som ska indexeras och inte indexeras. Lägg robots.txt i roten av din webbplats. Där kan du centralt styra alla webbsidor som inte ska indexeras. Vill du bara kontrollera enstaka sidor räcker det med en meta-tagg för index/follow. Det finns ingen mening att låta Google indexera dokument som du vet kommer att tas bort.
  2. Gör adresserna läsliga för människor. Använd adresser som exempelvis webshop.se/produkter/mobiltelefoner/sonyericsson/k750i/. Det säger mer än webshop.se/display-products.php?categoryid=23&productid=451. Läs också mina tips för lättare adresser.

Fotnot: Du kan räkna ut din PageRank för din egen webbplats. Ta det dock inte på blodigt allvar.

17 affärsidéer som är beprövade och fungerar

På nätet finns det mängder av affärsidéer du kan tillämpa. Det bästa av allt är att det inte behöver kosta så mycket. Mer än ditt engagemang förstås.

Här kommer en lista på 17 affärsidéer du kan bygga ditt nätföretag på.

  1. Starta ett virtuellt skivbolag. Som Demoradio.
  2. Sälja annonsplats för privatpersoner. Som Blocket. Detta kommer jag att ge mig in på inom kort också.
  3. Starta en webbtidning. Som Dagens PS. Min webbplats Voodoo Film skriver nyheter om film.
  4. Köp och sälj på auktionssajter. Som Mobillagret.
  5. Roliga och nyttiga 3g-tjänster. Som Musicbrigade.
  6. Sälj musik som abonnemang. Som Emusic.
  7. Starta en prylblogg. Som Engadet.
  8. Starta specialcommunity. Som jag har gjort med Voodoo Film.
  9. Importera och sälj på webben. Som Jens Of Sweden.
  10. Starta lågprisbutik på nätet. Som Netxtra. Fast de säljer käk på nätet. Det tror jag inte ett ögonblick på. Kan man reklamera en rutten gurka?
  11. Shoppingagent för resor. Som Luftgrop.
  12. Sälj illustrationer. Som Artbooster.
  13. Visa film. Som SF Anytime.
  14. Haka på spelvågen. Som Ongame.
  15. Starta en nyhetsagent. Som Google News.
  16. Öppna virtuellt webbhotell. Eller nej. Skit i det förresten. Det finns så mycket äckliga webbhotell som existerar enbart för att suga ut pengar. 99-kronor är ett sådant exempel. Varning för dessa!
  17. B2b-sajt för din bransch. Som Industritorget.

Listan kommer ursprungligen från InternetWorld nr 5, juni 2005. Och jag har lyckats pricka in tre utav dessa med min webbplats Voodoo Film. Inte illa pinkat!

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.

”Du som tror dig kunna allt – varför är inte din egen webbplats så bra?!”

Den frågan har inte kommit än. Men den kommer.

När man predikar för att webbplatser ska göras på ett visst sätt är det naturligt att granska källan. ”Har han [alltså jag] själv gjort som han tycker att andra ska göra?

Nja, det har jag väl inte. Här är mina ursäkter (välj valfri):

  • Jag har inte tid. Jag har visserligen gott om tid emellanåt. Så det kan jag inte riktigt skylla på.
  • Jag vet inte hur man gör. Hmmm, jag lär ju ut hur andra ska göra så då borde jag väl ha kunskapen?
  • Jag har inga pengar. Inga kommentarer.
  • Jag vet inte vad jag gör. Jo, jag är ganska noga med att klargöra ett syfte med det jag skapar, så då kanske det faller sig lite platt.
  • Programmet gör inte som jag vill. Här har vi en riktig ursäkt! Äntligen kan jag skylla problemet på något annat än mig själv. Den här ursäkten är bra. Så är det.

Ja, som synes är alla fel på den här webbplatsen någon annans fel. Jag gör aldrig fel.

Interakt lär ut användbarhet men klarar inte själv testet

Jag skickade in min webbplats som ett tips på en resurs till interakt.nu. Som svar ville de även ha en länk tillbaka, så då passar jag på att göra ett annorlunda länkbyte. 😉 Lite webbplatskritik helt enkelt.

När en besökare kommer till en ny webbplats finns det en fråga som ska besvaras så fort som möjligt. Den är:

Vad kan jag göra här?

Det är därför jag har skrivit ”Konsten att bygga webbplatser som är enkla och användbara” i sidhuvudet på alla sidor. Den som hamnar här ska veta direkt att det handlar om att bygga webbplatser. Det går inte att köpa rosa elefanter här.

Titta här på interakts hemsida:

Interakts hemsida

Interakt.nu säger sig handla om användbarhet, informationsarkitektur och interaktionsdesign. Men det framgår inte någonstans på sidan. Hur användbart är det?

Det här tycker jag om interakt:

  • Vad handlar det om? Ingenstans står det vad Interakt är för något, bortsett från i fönstertiteln. Jag måste klicka på ”Om Interakt” i menyn för att få reda på det. Jag hade gärna sett en liten beskrivning under loggan. Det kan stå ”Artiklar om hur du skapar interaktiva produkter”.
  • Vad kan jag göra på Interakt? På förstasidan presenteras nyheter. Tror jag. Men när jag klickar på en nyhet så markeras ”Artiklar” i menyn. Alltså är det artiklar som visas på förstasidan. Varför skrev de inte det från början?
  • Fönstertiteln rapar upp nyckelord. Sökmotorer kanske gillar att höra ”INTERAKT.NU – användbarhet, informationsarkitektur, interaktionsdesign” men inte jag. Det ger mig visserligen lite tips om vilket ämne webbplatsen tar upp, men inte vad det är för slags webbplats (finns här artiklar eller är Interakt ett konsultföretag?). Jag föredrar ”Interakt.nu – artiklar om användbarhet, informationsarkitektur och interaktionsdesign”. Samtidigt skippar jag versalerna som ändå inte fyller någon funktion.
  • Ologisk meny. I toppen har vi huvudmenyn med alternativ som ”Forum”, ”Artiklar”, ”Resurser” och så vidare. I vänstra kolumnen har vi bland annat ”Skriv en artikel” och ”Tipsa om resurs”. I stället för att ta upp värdefullt utrymme på förstasidan hade dessa två länkar kunnat placerats in under respektive kategori. ”Skriv en artikel” skulle alltså ligga under ”Artiklar” och ”Tipsa om resurs” under ”Resurser”. Dessutom är ”Prenumerera” inget upphetsande alternativ. Liknande menyalternativ i en nätbutik hade varit ”Köp”. Det är bättre att skriva vad man ska prenumerera på. Skriv ”Nyhetsbrev” i stället. Vi fattar att man prenumererar på nyhetsbrev.
  • Tråkiga artiklar. På hemsidan möts vi av fyra artiklar, där en av dem heter ”Återupprätta arkitekten”. Jaha? Låter det intressant och får dig att känna ”det här måste jag läsa”? Nej, inte jag heller. Lite mer fokuserade artiklar kanske hade varit på sin plats. Trots att jag är väldigt intresserad av ämnet så känner jag snarare avsky. Ni som behärskar användbarhet skriver inte ens användbara rubriker! Baaaah!

Ska vi ta och titta på tekniken också? Ja, då gör vi det:

  • För liten text. Varför ska alla webbplatser envisas om att köra 10 pixlar som textstorlek? Det är dåligt av två anledningar. För det första kan jag inte förstora texten i webbläsaren Internet Explorer och för det andra så är text till för att läsas. Därför ska text synas bra redan från början.
  • Menyn är av bilder. Menyn i toppen syns knappt, ligger för högt upp och försvinner liksom nästan. Dessutom är den gjord av bilder, men innehåller text. Vad är logiken i det? Det är ingen tidning ni ska försöka trycka, så släpp taget om designen och låt det se lite fulare ut till fördel för tillgängligheten.
  • Väldigt bra alt-texter. Visst är jag negativ i mångt och mycket men Interakts alternativtexter på bilder är suveräna. I menyn (som egentligen ska bestå av ren text) så uppenbarar sig följande text i menyalternativet ”Artiklar”: ”Artiklar kring bl a användbarhet och användingsnytta”. Det fungerar bättre att surfa på Interakt.nu utan bilder, än med. Det är lättare att hitta rätt tycker jag. Vad fyller då bilderna för funktion?