Webbplatskritik

Jag tycker till om webbplatser.

Wiki med nyheter kommer inte att fungera

Peter Dahlgren 6 Comments

Har du använt Wikipedia så känner du säkert till att det är ett öppet uppslagsverk. Vem som helst kan lägga till eller ändra bland texterna, en så kallad wiki.

Nu försöker man sedan en tid tillbaka att göra samma sak med nyheter – Wikinews.

Det kommer aldrig att fungera. Här är varför:

  1. Internet har drivit utveckling av nyheter till snabbare publicering. Den som publicerar snabbast vinner. Ingen kan publicera snabba nyheter på en wiki utan att få förstahandsinformation, och det kostar i dagsläget.
  2. En nyhet varar väldigt kort tid. En gammal nyhet är ingen nyhet, brukar jag säga (men citatet kommer säkerligen från någon annan). Varför ska man lägga ned frivillig energi på något som ingen läser om några timmar. Ett uppslagsverk är däremot tidslöst.

När Anna Lindh mördades kunde man följa hela utvecklingen på uppslagsverket Susning. Det är en sorts nyhetsrapportering i sig, att skriva om aktuella händelser kring ett ämne. Ett betydligt mer relevant sådant och som tekniken lämpar sig väldigt bra till.

Som jag sa, Wikinews kommer aldrig att fungera. Vi får däremot se vad som händer i framtiden. Jag blir bara glad om jag blir överbevisad för idéen är intressant, även om jag tror att de har för stor tillit till wikitekniken.

Amazon inte längre förebilden för e-handel

Peter Dahlgren Leave a comment

Jakob Nielsen har i sin Alertbox i dag skrivit att Amazon inte längre är förebilden för design av e-handelswebbplatser.

Nielsen skriver att Amazon fungerat bra därför att det är en av de största nätbutikerna på nätet. Att vara störst innebär att Amazon kunnat sätta standarder för hur saker och ting ska fungera. Om mindre nätbutiker kopierat detta sätt så får besökaren mindre problem att handla eftersom de känner igen sig. (Ungefär som i nätets barndom, de som utformade webbsidorna då lade grunden till hur vi använder det i dag, även om det givetvis utvecklats sedan dess.)

Så har det fungerat fram tills nu, säger Nielsen. Amazon har ändrat för mycket på sin webbplats att de i stället bryter mot konventioner som blivit vanliga på nätet. Vi förväntar oss alltså att det ska fungera på ett visst sätt, medan Amazon gör tvärtom.

Amazon har alltså blivit sämre därför att:

  • För mycket skit på sidorna. För varje sak man lägger till på en webbsida blir det svårare att hitta det man verkligen ska göra. Köpa böcker.
  • Sökfunktion som söker på hela nätet. Om en användare vill söka på nätet så går de till sin favoritsökmotor. Inte Amazon.
  • Annonser bland sina böcker gör naturligtvis att de tjänar mer pengar, men samtidigt kanske kunden inte köper Amazons egna böcker. Låter det logiskt?
  • Dåligt gränssnitt vid kategorier för speciella produktsidor. Samma stuk används på en produktsida för böcker som för plasmaskärmar. Det är två olika produkter som behöver visas annorlunda, men Amazon strömlinjeformar alla produkter till samma utformning och det ger därför problem med användbarheten.
  • Dålig integration mellan internationella webbplatserna. Amazon finns i flera länder, men det finns inget sätt att veta om en bok finns i ett land närmare dig, om du inte söker efter den själv.
  • Amazon kommer i flera förpackningar. Andra företag använder deras programvara. Det framgår inte tydligt att Amazon inte står bakom andra e-handelsplatser. Eller tvärtom.

Men Amazon har fortfarande sina ljusa stunder, menar Nielsen. Men helheten är inte vad den en gång varit.

Dagens nyheter finns på två domäner – så får det inte gå till

Peter Dahlgren 2 Comments

Dagstidningen Dagens nyheter finns under både dn.se och dagensnyheter.se. Så får det inte gå till.

Det är bra att registrera olika former av ett tidningsnamn, men det ska bara finnas en version som är den rätta. Själv föredrar jag att skriva dn.se eftersom det är kortare. Således bör den bli den officiella webbplatsen och alla andra skickar besökaren vidare dit.

Det har däremot Göteborgs-Posten tänkt på och skickar användaren vidare till gp.se när man försöker skriva in goteborgs-posten.se (om du glömmer bindestrecket spelar det ingen roll, goteborgsposten.se är också registrerad och skickar dig vidare till gp.se).

Nyttan med alt-texter i snyggt exempel

Peter Dahlgren 5 Comments

Ibland kan det vara bra att visa vanliga problem med exempel. Att alt-texter ska använvdas för att förbättra tillgängligheten för blinda är det många som vet. Men det underlättar också för oss som är seende.

Smålandsposten är i blåsvädret igen. I en filmrecension för Så som i himmelen har recensenten gett filmen ett betyg. Det är ett enkelt sätt att skilja bra filmer från sämre.

Men vad de gjort är att visa betyget som en bild. Som inte finns och saknar alt-text. På detta sättet är det totalt omöjligt att veta vilket betyg de gett filmen.

Viktig alt-text saknas, filmbetyg går inte att utläsa

Så här ser deras html-kod ut:

<img src="/images/lowest_betyg.gif" width="" height="" border="0">

Det enda betyget vi kan gissa oss till är tack vare att bildfilen heter lowest_betyg.gif (exemplarisk svengelska för övrigt). Troligtvis är det fråga om lägsta betyg. Men det hela hade enkelt kunna undvikas genom att lägga till följande lilla kod:

<img src="/images/lowest_betyg.gif" width="" height="" alt="Betyg 1 av 5" border="0">

Alt-texter ska alltid anges på bilder. Fyller bilden ingen mer funktion än att bara vara snygg, så ska du skriva alt="" eller ännu hellre använda css. Då slipper blinda höra den i sin skärmuppläsare.

En annan rolig sak är att attributen width och height är tomma. I Microsoft Internet Explorer får därför alt-texten ingen effekt, utan bilden visas med storleken 1 x 1 pixel. Det går alltså inte att läsa alt-texten som annars visas samtidigt.

Detta problemet hade aldrig behövt uppstå om de valt att följa standarden för att utveckla webbsidor. I xhtml 1.0 ska koden se ut som följande:

<img src="/images/lowest_betyg.gif" alt="Betyg 1 av 5" />

Eftersom width och height inte har något värde måste de plockas bort. Attributet border tar vi också bort eftersom det kan vi sköta med css i stället. Sedermera lägger vi till ett avslutande snedstreck eftersom alla taggar måste ”avslutas”.

Nu har vi konstaterat två saker:

  1. Alt-texter är viktiga, både för seende och blinda.
  2. Följ standarden, annars fungerar inte webbsidorna likadant överallt. I teorin i alla fall.

För mycket information är ett hinder på tillganglighet.se

Peter Dahlgren 3 Comments

När jag letade lite efter tillgänglighet på nätet så hamnade jag på www.tillganglighet.se. Det är nästan så att man sätter hjärtat i halsgropen.

Skärmpdump från tillganglighet.se

Visserligen verkar webbplatsen mest förespråka tillgänglighet i det vanliga livet, men man kan ju inte förstå varför webbplatsen inte får vara mer tillgänglig.

Efter ett litet test på förstasidan kan vi konstatera:

  • Flera bilder saknar (eller använder felaktig) alt-text.
  • Bilderna saknar dessutom attributen width och height som förklarar storleken på bilderna. Det innebär att när sidan laddas kommer bilderna att dyka upp allt eftersom och på så vis ”hoppar” texten runt tills allt laddat färdigt.
  • Förstasidan väger totalt 93 kB med alla bilder. Under 20 kB vore idealet, men hälften är godkänt.
  • Layouten utformas med hjälp av tabeller, när det borde göras med css i stället.
  • På grund av tabellayout har de använt bilder stora som en pixel (”osynliga”) för att utforma sidan som de vill. Det kan undvikas helt med css.

Bortsett från detta har vi ”information overload”. Vi får helt enkelt för mycket information på en gång och på grund av bristande typografi går det inte urskilja vad som är rubriker eller vad som går att klicka på. Ibland blir länkarna understrukna när man håller musen över dem. Ibland inte.

När man designar måste man vara konsekvent. Om utvalda ställen får sitt alldeles egna utseende (”där ser det snyggt ut”) skapar det bara förvirring. Vad vi behöver är en hel webbplats som fungerar likadant på vilken sida vi än är på. Och det ska absolut inte ändra sig för vilken del av den enskilde webbsidan man tittar på. Det är därför css-layout är så bra. Det går att göra en central fil som alla webbsidor använder. En ändring i filen och ändringen visas på alla webbsidor omedelbart. Smidigt, enkelt och framför allt rätt.

Bredbandsbolaget kör fortfarande med splash-screens

Peter Dahlgren 4 Comments

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.

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

Peter Dahlgren 1 Comment

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?

Discshop vet hur en kundvagn ska se ut

Peter Dahlgren 2 Comments

Som alla fanatiker av webben har jag en favorit. Min heter Discshop och säljer dvd-filmer. Det är en nästan helt perfekt nätbutik i alla avseenden.

Dessutom är den en av få svenska butiker som verkligen har gjort en användbar kundvagn. Det finns inga som helst fel där.

Så här ser kundvagnen ut tom respektive med några filmer i:
Tom kundvagn
Kundvagn med tre filmer i

Varför tycker jag egentligen att Discshops kundvagn är så bra? Jo, därför att:

  1. Visar tydligt när det inte finns några filmer i den.
  2. Ligger väl synlig och högt upp på sidan (den så kallade ”ettan” i tidningstermer).
  3. Filmerna ligger inte i en drop-down-meny. Jag kan därför lätt överblicka vilka filmer som finns där, utan att klicka. Dessutom ser jag vad varje film kostar, och om priset blir för högt kan jag enkelt sortera bort de filmer som är för dyra.
  4. Den totala summan visas inklusive frakt. Jag får inga överraskningar om hur mycket det kommer att kosta.
  5. Jag kan utan problem ta bort en film genom att klicka på det röda krysset.
  6. Samtidigt kan jag läsa beskrivningen av filmen genom att klicka på titeln.
  7. När jag lägger en film i kundvagnen så hamnar jag på samma sida som jag var på, med ett litet diskret meddelande om att ”Filmen lades till i din kundvagn!”. Jag har alltså kontroll över sidorna.

Drop-down-menyer har återigen visat sig värdelösa för kundvagnar och det är konstigt att de fortfarande används i vissa nätbutiker. För att ta bort en film måste man gå till en separat sida där (oftast) antalet filmer fylls i. För att ta bort en film fyller man i ”0” och uppdaterar listan. Inte speciellt logiskt.

Det hade varit mycket bättre med en knapp där det stod ”Ta bort denna film”. Vill jag köpa flera filmer av samma titel så är det mer logiskt att jag klickar på ”köp” två gånger, än att gå in i kundvagnen och uppdaterar antalet.

Använd inte drop-down-menyer för navigering

Peter Dahlgren 6 Comments

Det finns webbplatser som lägger menyn i en drop-down. Det tar upp samma antal pixlar på skärmen, oavsett hur många alternativ det finns i den. Men det ställer också till nya problem.

Titta här på företaget DirektDesigns webbplats:
Meny som drop-down

Drop-down-menyer är särskilt värdelösa eftersom:

  1. De går inte att överblicka. Varje gång man vill överblicka får man klicka på den och skrolla.
  2. De ger ett extra klick. Först måste du klicka på den för att se vad den innehåller. Sedan måste du klicka på det alternativ du väljer. För personer med nedsatt motorik kan det vara ett problem med tillgängligheten.
  3. Kräver javascript. En vanlig länk (<a href="sida.html">Länktext</a>) fungerar i alla typer av miljöer, även de allra äldsta. Javascript är bara ett hinder och sökmotorer hittar inte länkarna.
  4. Går inte att förstora texten. Trots att webbläsare blir allt smartare finns det en del webbläsare som inte kan förstora texten i dessa menyer. Därmed har vi ytterligare ett problem med tillgängligheten.

Om jag hade fått bestämma så hade menyn gjorts om till vanliga länkar.
Meny som länkar
Det kan alla förstå, kräver inte javascript och går snabbt att överblicka. Dessutom är det inga tvivel att dessa länkar går att klicka på.