Jakob Nielsen

Frågan är både intressant och befogad. En viktig del i framtagandet av en webbplats är naturligtvis själva strukturen. När denna är klar kommer den grafiska formen och till sist läggs texten in. Allt detta hör i grunden ihop.

För att kunna skapa en bra, fungerande och användarvänlig webbplats krävs det att man ägnar tid åt att få strukturen bra och att man lär känna sina besökare.

När man gör en struktur till en ny webbplats har man ett otal parametrar man ställer sig till så som förstudier av statistik, undersökningar och inte minst beställarens mål. Jag skrev tidigare om att Verva gör ett bra jobb med att strukturera upp webben för offentlig sektor. I själva grundstrukturen är det ganska naturligt för de flesta interaktionsdesigners att bygga sidan efter grids pch dela upp sidan i block. Att dela upp sidan i block i ett tidigt stadium ger en snabb överblick över hur sidan kommer att uppfattas.

Ibland kan det dock vara intressant att göra en analys av en nuvarande webbplats. Hur upplever besökaren webbplatsen? Varför besöker så många en viss sida medan andra sidor inte allt har lika många besök?

När man sitter framför en webbplats upplever man sidan i just block. Att lokalisera sina egna block kan ge en hjälp på hur besökaren uppfattar webbplatsen. Det kan också hjälpa dig att hitta det nyckelpunkten på din webbplats. En nyligen startad webbplats – som jag hämtat inspiration från i mitt exempel nedan – är web.without.words. Där plockar de fram nyckelpunkter i designen utifrån block. T.ex. Jämför de Ombamas webbplats med McCains och kanske och kan ge en hint varför Obamas site rönt så mycket större framgång än McCains. Jag passade på att göra en liknande skiss på denna webbplats startsida. Även om det är svårt att göra några avancerade analyser av detta är ändå rätt intressant. Tänker man efter en stund märker man snabbt vilka block som drar till sig fokuset och jämför man det sen med hur man faktiskt upplever själva startsidan, så märker man faktiskt samma ögonrörelse.

Här är sidan hur den blev när jag plockade bort innehållet.

Klicka för större bild.

Här är startsidan som den såg ut vid tillfället:

Klicka för större bild.

Med några en väl genomförd analys kan man faktiskt göra stora förbättringar på webbplatsen. Nästa steg blir att införskaffa Jakob Nielsens Eye-trackningstudie som kommer i februari.

För tillfället studerar jag användbarhet på hemsidor. Användbarheten är ofta något som får komma i andra hand då man producerar webbplatser – eller i alla fall verkar det ofta så. Jakob Nielsen menar att om man bara satsar 10% av sin budget på användbarheten kommer resultatet, dvs. antal besökare, sålda produkter eller vad de nu månde vara sidan har för funktion, att öka kraftigt.

Ofta ser man dock ganska dåliga exempel på hur man inte bör göra när man producerar en webbsida. Ett problem man ofta brottas med är att man vill få med så mycket som möjligt på sin startsida vilket ofta leder till att man proppar den full med text och länkar.

Startsidan är som ett reklamfönster; här ska de synas vad det är för webbplats och här ska det även gå att få en klar och tydlig överblick på vad som finns på sidan. Ta bort all onödig information och låt det finnas luft mellan elementen. För mycket text och bilder gör att det blir rörigt och man som besökare får det svårare att hitta det man söker. Detta är ett vanligt förekommande problem framför allt hos kommunala webbplatser (se Linköpings webbplats som ett exempel på detta) men det finns så klart även på andra ställen.

Östgötateatern – ett exempel

Jag tänkte därför visa på ett väldigt dåligt exempel när det gäller användbarhet, nämligen

Östgötateaterns webbplats

. Det var efter att jag för en tid sedan skulle kolla om det gick någon teater i Linköping som jag var tvungen att göra detta. Det visade sig nämligen vara nästintill omöjligt (eller ganska krångligt för att inte överdriva allt för mycket) att hitta när, var och vilka föreställningar som gick.

Efter att läst Steve Krugs ”Don´t make me think!” kände jag mig tvungen att göra ett eget exempel av webbplatsen – en som den är nu och en omdesignad av mig, där jag kort beskriver hur jag tänkt och gjort.

Ostgotateatern.se som den är idag:

Det första man möts av är ett bildspel som går väldigt fort fram och som efter ett litet tag snarare irriterar är informerar mig som besökare. Man blir även lurar av att det går att trycka på de olika föreställningarna när de visas, vilket man inte kan, men som man så klart borde kunna (se SF.se som ett mycket bra exempel på detta!).

Det första intrycket man får av sidan är att den stora mängden av text. Först har man vad som spelas i en spalt till vänster. Mycket vit text på en röd bakgrund samtidigt som länkarna är understrukna gör det svårt att se vad det egentligen står. Samma sak är det med nyhetsnotiserna på den högra sidan. Varför blå bakgrund? Behövs det verkligen så många nyheter på sidan? var frågor som genast slog mig.

Det som framför allt irriterade mig var att det absolut inte fanns någon kalender på sidan. Av någon helt oförklarlig anledning har de valt att inte ta med någon sådan på sidan. Vad är det första man vill veta då man besöker en webbplats för en teater? Naturligtvis är det VAD som visas och NÄR det visas. Det finns i och för sig en länk till Ticnet, men den är felaktig och tar en tillbaka till Ticnets startsida.

Min version av Östgötateaterns webbplats

Jag tog mig lite tid att ändra om webbplatsens utseende för att göra den mer lättnavigerad – detta utan att ta bort själva grunddesignen, även om jag tycker att man mycket väl skulle kunna göra om hela sidan.

Vad är det då jag gjort? Det första jag gjorde var att flytta bildspelet till vänster på sidan och tog bort det röda fältet med spelplan. Dessa lade jag istället till höger om bildspelet och gjorde det mycket tydligare med vart och vad som spelas just nu. Vilket jag anser vara det primära hos en teater.

Jag tog även bort den blå nyhetsnotisen på högersidan och de tre ”informationsrutorna” under bildspelet. Istället för detta lade jag tre större kolumner under bildspelet och ”Just nu”. Längst till vänster är nyheter; i mitten det absolut nödvändiga kalendariet där man kan se nästa föreställning och även gå vidare till alla föreställningar i kalendariet. Till höger i dessa kolumner lade jag de tre informationsruorna som tidigare varit under bildspelet. I min version är det ganska tråkiga med en och samma färg och utan grafiska element. Det är naturligtvis inte nödvändigt att det ska vara så om sidan skulle produceras. Men att placera dem så gör att det mesta av fokusen hamnar på vad som visas för tillfället istället för att dessa element tar fokus av detta.

Högst upp på sidan lade jag även till en sökruta och ändrade lite i menyn, något som skulle kunna göras lite tydligare. Något som även det är en nackdel på sidan är att menyn ser likadan ut även när man är på en undersida, vad jag menar är att det finns inget i menyn som indikerar på att du är under en viss kategori på sidan, vilket det naturligtvis bör vara.

Således har jag ändrat på en rad olika saker där jag framför allt skapat mer luft och ett – vad jag anser – tydligare upplägg. Genom att lägga ”just nu på…” och kalendariet relativt centralt på sidan har jag sett till att dessa ska komma i fokus. Intressant inom detta område är StomperNets film de satt ihop om hur man tittar på en hemsida (Hos Youtube). Genom att skilja av dessa med tunna linjer visar jag även att de är olika avdelningar. Den blå färgen som finns på originalsidan känns som det tar för mycket plats och den tillsammans med den röda på motsatt sida gör att sidan känns mindre och trängre.

Idag har DN.se premiär för sin uppiffade sida. Det finns några tydliga förändringar vad gäller utseendet. Det första man lägger märke till är den nya färggladare menyn, istället för att bara ha en underlinje i samma färg som de olika avdelningarna har så har man nu färgat hela menyn.

Bort har även flera av avgränsningslinjerna mellan de olika textstyckena vilket ska skapa ett luftigare intryck. Borta är även de flera “läs mer”-länkar och nu använder man istället en intromening som får bli länken. Det känns som DN:s webbteam läst Jakob Nielsen när de gjorde uppdateringen.

Ett annat plus är den snygga sidfoten och de många möjligheterna de erbjuder att följa deras nyheter. Jag har alltid gillat DN:s site och tycker att de är outstanding vad gäller nyhetssiter. Betydligt mer lättnavigerad och renare än tex. Aftonbladet, SvD och Expressen. Synd bara att de inte gjorde så att siten validerar korrekt, men annars är det mest positivt.

Jag har skrivit om vikten av textens upplägg på en hemsida. En sak som dock är viktigt är faktiskt utseendet på sidan, alltså hur snygg den är rent estetiskt. Naturligtvis beror allt detta på vilken målgrupp man har för sidan, men jag stannar hellre längre och tittar runt på en snygg sida än en sida med bara text. Jakob Nielsen håller inte alls med om detta utan han tycker att bilder bara fördröjer sidans laddningstid, men med allt fler bredband och snabbare servrar försvinner det problemet allt mer.
 
Ett bra sätt att få en snygg sida är att fotografera. Därefter behandlar man bilderna i sitt bildredigeringsprogram – i mitt fall Photoshop – gör en snygg sida eller en snygg logga. På nätet finns det massor av bra sidor med tips för redigering av bilder. Bilden ovan är gjord utifrån de två bilderna nedan, båda tagna på Island i början på året. Till vänster är det Blå lagunen och till höger är det jag och syster som beställer mat på en restaurang. Bara med lite ansträgning kan man faktiskt göra rätt coola bilder, även om man inte ska ha det till en hemsida. Idéer kring upplägget av bilden ovan kommer bla från Moderskeppet.

Jag läser för närvarande om användarbarhet på webben. Jag har precis läst boken ”Webbdesign med fokus på användbarhet” av Rolf Molich samtidigt som jag börjat öppna Nielsens bok igen. Det ska sägas att Molichs bok känns som en sammanfattning av Nielsen, då han nästan kommer upp med identiska förslag som Nielsen.
 
Båda dessa påvisar att språket på en hemsida bör skilja sig ganska markant åt mot text på papper. Nielsen har även skrivit om den upp och nervända pyramiden då man skriver text till en hemsida. Det vill säga att man i börjar kommer med en liten sammanfattning eller slutsats av texten. Samtidigt är det vikigt att använda tydliga stycken med beskrivande rubriker.
 
Så långt håller jag med helt och hållet, men jag skulle vilja lägga till några tankar jag fått när jag suttit med detta. På en del sidor ser man utdragna beskrivande citat från texten, och då ofta i en annan teckenstorlek. Ofta ser man även att citatet får ett tydligt citationstecken bredvid så det inte går att missa att det är ett utdrag från texten. Sådant tycker jag är väldigt bra och lättar ofta upp en lång text.
 
En annan sak jag reagerat på är att ingen av dem tar upp teckensnitt eller teckenstorlek. Personligen tycker jag att det är väldigt noga med vilket teckensnitt man använder sig av, då det faktiskt skiljer sig ganska mycket mellan de olika stilarna. Tyvärr är det så att alla system inte stödjer olika teckentypsnitt. Tex i IE 7 har de valt att bara använda sig av ett san-serif och ett serif-teckensnitt. Lika är det också när man använder Linux som plattform. Detta gör att det inte i samma grad går att använda sig av olika teckensnitt. Här tycker jag man ska försöka likna dagstidningarna (alltså papperstidningarna) mer, dvs att använda kanske både två och tre olika typsnitt. Kanske ett för ingress, ett för brödtext och ett för citat.
 
Det ska alltså både vara enkelt och lättsamt att läsa samtidigt som man som skribent förstärker vissa viktiga delar av texten. Det leder in på teckenstorleken som också kan ha viss betydelse. Att använda sig av allt för liten text kan bidra till att det blir jobbigt att läsa, speciellt om det är en längre text. Däremot kan det bli väldigt snyggt med ett litet typsnitt vid kortare texter, men generellt bör texten inte vara för liten.
 
Det sista jag tänkte ta upp, förutom teckenstilen och teckenstorleken, är luften mellan och bredvid texten. Som jag ovan nämnde är alla överens om att det är skillnad på att skriva för webben än på papper. För att texten ska vara lättöverskådlig och att det ska vara behagligt för läsaren bör man använda sig av luft mellan texten, alltså öka line-heighten. Jag tycker att det nästan är lika viktig att använda sig av luft på sidorna av texten, man behöver inte tränga ut texten ända ut till kanterna, låt då hellre själva textytan bli smalare. Som ett bra exempel på detta kan jag ge er den amerikanske pastorn Billy Graham (som jag även tidigare använd som bra exempel).