användbarhet

En trend som inte riktigt slagit igenom än inom webbdesignen är väldigt breda sidor. Det har tidigare diskuterats en del om att ha webbplatserna i flexibel bredd, utan att det slagit igenom riktig. Genom att enbart använda procent kan sidan lätt te sig konstigt i många upplösningar. Nu börjar det dock komma en del varianter där javascript används för att anpassa innehållet efter besökarens upplösning. Detta gör att allt mer av skärmens yta kan användas och att användarupplevelsen ofta blir bättre.

Schibstedt har på både SvD.se och Aftonbladet.se gått ifrån att bygga webben för upplösningar på 1024px och breddat sidorna till att vara anpassade för 1280px istället. De har dock valt att inte göra sidorna flexibla vilket gör att högerspalten försvinner för dem som har en upplösning på lägre än 1280px i bredden. Personligen tycker jag det är helt rätt då de allra flesta har högre varianter av upplösningar.

I A List Apart läste jag en väldigt intressant artikel om "responsive web design". I artikeln visar de hur man kan arbeta med bilder i en flexibel design på ett snyggt sätt. Detta är något som jag tycker fler webbyråer borde ta fasta på. Tänk en magasinwebb eller liknande där du får artiklar och artikelbilder mycket större än vad som ofta ges i dagens läge, vilket större intryck sidan skulle kunna ge.

Ett väldigt bra exempel på en sida som utnyttjar sidans bredd är den nyligen lanserade Sjoraddning.se som Forsman & Bodefors skapat på ett föredömligt sätt (som så ofta när de gör saker). Sidans högerspalter lägger sig olika beroende på hur hög upplösning du har och de ger ett väldigt mäktigt intryck. Ericsson, som också lanserade sin nya webb nyligen, har gjort någon mitt emellan och breddar sidan någon när man har en högre upplösning, vilket är ett steg i rätt riktning.

Jag tror och hoppas att detta är något som vi kommer få se allt mer av framöver.

I dagarna lanserade Sydsvenskan syn nya webbplats, en webbtidning som modigt väljer att inte följa gängse standard som så många andra webbtidningar följer. Kritiken har varit ganska stor och många gillar inte det nya upplägget, något som troligtvis är någon form av rädsla för det man inte direkt känner igen.

Sydsvenskan nya layout

Medietidningarna har varit snabba på att ta upp Svenskans nya upplägg (Dagens Media, Resumé 1, Resumé 2, CA&Design och Medievärlden) och på Twitter har kommentarerna varit många.

Själv tycker jag det är ganska bra och intressant att de vågar gå sin egen väg och utifrån den analys de gjort av besöksstatistiken så har det skapat ett upplägg som inte har prövats bland de större webbtidningarna. Upplägget med en snurra i toppen har dock funnits länge, Nyheter 24 är nog något de tittat på när de skapade den. De ändrade också snabbt den avlånga snurran de först testade till en med puffarna under. Det måste ses som en ganska stor miss att man bara efter en dag måste göra omstruktureringar i layouten.  Den nya varianten är dock betydligt bättre och mer överskådlig.

Så här såg gamla snurran ut. Bilden lånad från Resumé

Annars så tycker jag faktiskt att det finns en rad frågetecken kring deras nya sida. Den känns lite plottrig och den stora snurran högst upp innehåller faktiskt en del "gamla" nyheter, men det är kanske en tanke bakom det att lyfta fram de större nyheterna. Ska man göra det måste man också tydligt visa på de aktuella sakerna på sidan.

Sektionen Senaste nytt som är det allra senaste innehåller enbart rubrik, kategori samt en pytteliten artikelbild. Jag tror just utseendet på detta är det som gör att sidan känns svårnavigerad och ger ett rörigt intryck. Att ha så små artikelbilder känns bara dumt, speciellt om man ser att klockslaget när nyheten publicerades är nästan lika stort. Jag skulle personligen vilja se större tumnagelsbilder och en kort ingress till artikeln. Detta skulle lyfta hela denna sektion och rörigheten skulle försvinna.

Scrollar man ner på sidan tills precis under senaste videoinslagen blir det genast luftigt och fräscht. Lagom stora tumnaglar, tydlig rubrik och allmänt trevligt. Varför är inte detta högre upp?  Så här rent och snyggt kunde senaste nytt se ut!

Jag tror också att man skulle kunna slippa stor del av kritiken om att sidan känns rörig om de hade varit mer noggranna med detaljerna. Senaste nytt ovan är ett exempel. Läsarreaktionerna man kan ge - som är en exakt kopia av Newmills idé - känns rörig och svår att direkt förstå. Man kräver nästan att besökaren måste läsa och leta för att ge uttryck för sin känsla. Det tar två sekunder, men skapar ändå en liten onödig irritation hos läsaren. Newsmill har gjort detta riktigt bra och det är också något som gjort att Newsmill känns mer modern i detta sammanhang.

Så här ser Sydsvenskans variant ut, Inte jätteestetisk.

Newsmills känslomätare är desto snyggare.

Den sista saken jag tänkte på är att man under varje artikel kommer direkt till sidfoten. Flera tidningar väljer att låta förstasidan  vara kvar under artikeln så att man bara kan scrolla vidare ner istället för att klicka sig bakåt och börja om. De flesta studier inom detta område visar ju att människor är beredda på att scrolla.

Överlag är det ändå en spännande och lite banbrytande satsning som Sydsvenskan gjort. Jag tror dock att mottagandet hade blivit bättre om de satsat mer på detaljer och på så sätt fått bort den röriga känslan man nu lätt får. 

Äntligen är min nya webbplats färdig. Jag har länge funderat på att uppdatera sidan som har legat i dvala ett tag nu. Både designen och tekniken är ny bakom sidan, vilket är en anledning varför den inte kommit upp tidigare. Designen har varit klar ett tag men det är först senaste veckorna jag börjat implementera den ordentligt.

Gamla sidan såg ut så här

Nytt är också publiceringsverktyget som är utbytt från Textpattern till Drupal. Jag har tidigare framhållit Textpattern som ett mycket bra och flexibelt system, men tyvärr har det liksom många andra ett väldigt teknikfokus vilket gör att användbarheten hamnar i andra hand. Drupal är å andra sidan heller ingenting som kommer ”out of the box” utan det krävs ganska mycket jobb enbart för att sätta upp en relativt enkel sida men de nödvändigaste funktionerna. Däremot så är detta system oerhört flexibelt när man väl fått det att fungera som man vill. Kanske kommer jag att skriva lite mer om de olika systemen längre fram, men det får framtiden utvisa.

Det är inte så mycket nytt på denna sida utan det mesta är sig likt förutom framsidan som har fått ett litet annat utseende. Likaså är portfolion uppdaterad och påfylld med de senaste alstren.

Ofta när man är i uppstarten av ett webbprojekt märker man att beställaren ofta har ganska dålig koll på vad de vill ha för funktioner på webbplatsen. Det jag också märkt är att man bör vara ganska noga med vad man visar för möjligheter som det finns på webbplatsen. Naturligtvis ska man hjälpa beställaren i fall denne saknar beställarkompetens, men det kan också få bakslag.

Ett sådant bakslag jag märkt av är att det fortfarande är många som vill ha rörliga bilder båda här och där på sidan. Jag har råkat nämna bildspel någon gång och då får man direkt svaret: ”ja, vilken bra idé.” Och sen kommer bildspelen att ligga till grund för varje sida. När man då frågar varför de vill ha bildspelet och vad det ska uppfylla för funktion har de sällan något bra svar, men att de absolut vill ha ett bildspel de håller de fast vid.

Bildspel är bra, men då i måtta.

Verva har arbetat fram en guide med fokus på placeringen av de olika elementen på webbplatsen, för att förbättra användbarheten på offentliga webbplatsen.  Guiden, som finns att ladda ned i beta-version, har en hel del intressanta inslag. För att inse att en sådan guide behövs behöver du bara besöka en handfull myndighetswebbplatser. 

Ett väldigt bra sätt att få reda på något om ens hemsida är att fråga folk (ganska självklart). Jag har själv kommit på när jag arbetat med webben att det är bra att fråga äldre personer hur de upplever en webbplats. Själv så är det ofta inga problem att hitta på en webbplats även om den är upplagd på ett krångligt vis och man klickar sig lätt fram och tillbaka på webbplatsen tills man hittat det man önskar. Det är dock inte alla som är lika snabba vad gäller att navigera på webben. När jag menar att man ska fråga äldre så är det för att de ofta inte är lika vana webbanvändare och därför tar det ofta längre tid för dem att navigera på webbplatsen. Därför är det viktigt att ha tydliga och noggrant utvalda ord i menylänkarna.

Själv brukar jag testa webbplatser på mina föräldrar. De använder Internet dagligen men har inget jättekunnande om webben, därför är det viktigt att man är tydlig i vad man menar med sin webbplats.

Ett tydligt exempel kan vara en så enkel sak som att välja mellan ordet Hem eller Startsida för den länk som ska ta en tillbaka till webbplatsens – just det – startsida. Vad menas egentligen med Hem i menyn? Jag tror inte det är helt självklart för alla. Nu fattar nog de flesta ändå att Hem tar dig till startsidan, men det kan leda till en extra sekunds tänkande för vissa. Jag har precis återigen börjat bläddra i Steve Krugs bok ”Dont´t make me think” – vilket är just det man vill att besökarna ska slippa (vad gäller strukturen förstås).

Jag kom därför på idén att titta lite på Kalmars nya webbplats. Jag gillar den verkligen, den känns både luftig och fräsch. Men när jag diskuterade detta med min far så väcktes några frågor: återigen ordvalen i menyerna. På startsidan har man ett sökfält och fem kategorier: Demokrati, Invånare, Näringsliv, Tursim och International.

Vad menas egentligen med Demokrati i detta fall, och om jag som invånare vill ha reda på hur jag kan vara med och påverka ska jag då trycka på Invånare eller Demokrati? Detta kanske inte heller är ett jättestort dilemma men ju tydligare det är vad som gömmer sig bakom alternativen desto bättre. Ett väldigt bra exempel på bra menyval tycker jag Sigtuna är. Där rymmer man alla sorters webbplatsbesökare under fyra rubriker i huvudmenyn – enkelt och okomplicerat.

Jag tog mig därför friheten att använda mig av Krugs teorier och visa på hur man skulle kunna göra på Kalmars startsida. Detta är gjort i all hast men jag tycker ändå att en sådan enkel sak skulle kunna hjälpa besökarna att hitta rätt.

Idag är det World Usability Day. Min förhoppning var att jag skulle befinna mig vid KTH i Stockholm för att närvara på olika föredrag om användbarhet. Tyvärr blev fallet så att jag inte kunde åka dit. Däremot kommer det säkert att finnas en rad trevliga bloggar att läsa om det efteråt.

Det fina med Internet är ju nu faktiskt så att man kan följa vissa saker trots att man inte befinner sig på samma ställe som själva händelsen. Är man som jag intresserad av e-tjänster och användbarhet så har 24timmarbloggen en onlinedebatt om just detta tema idag.

Själva dagen handlar alltså om användbarhet generellt och inte enbart användbarhet på webben. Ett bra exempel på en produkt som verkligen är användbarhetsanpassad är Senifons mobiltelefoner med extra stora knappar och tydligare och större skärm. Jag kan tänka mig att det är massor av både äldre och andra som har svårt att slå rätt nummer på en telefon med minimala knappar, där en produkt som denna är exemplarisk.

Ett liknande resonemang som med Senifons mobiltelefon kan man använda kring på webben. Allt handlar naturligtvis om vilken målgrupp man har och vad man har för tankar generellt kring sin webbplats. Vissa har dock bredare och större målgrupper, t.ex. en myndighet, och de måste då ha en webbplats som är så användbar och lättförstålig som möjligt. Frågan många ställer sig är nog varför ska man satsa på användbarhet? Den frågan svarar Verva ganska bra på sin webbplast – som förövrigt innehåller väldigt mycket nyttig information. De listar fem effekter man kan uppnå med en användbar och tillgänglig webbplats:

• Ger enklare och effektivare service till medborgare och företag
• Kan användas av fler medborgare
• Verksamheten får ut mer av sin investering
• Informationen blir lättare hittad, läst och förstådd
• Går att använda oberoende av val av utrustning.

Väl värt att fundera på om man bygger en webbplats ”åt alla”.

Idag släppte Verva sin halvårsmätning av offentliga webbplatser och som väntat ser det fortfarande väldigt dåligt ut vad gäller koden på dessa sidor. Trots att samma resultat ofta förekommer görs det lite för att förbättra detta. Om man ser det i ett vidare perspektiv så spelar kodkvaliteten ofta in i ett användarperspektiv – inte för de allra flesta användare men personer med olika handikapp kan ofta få onödiga problem. Tex att inte använda rätt rubrikstruktur kan försvåra läsbarheten för synskadade. Det finns vidare en rad mer onödiga svårigheter som kan uppkomma vid en allt för dålig kodning.

Ett väldigt trevlig Firefox-tillägg är “Web Developer“ med det tillägget kan man enkelt hitta både småfel och prova sig fram genom hemsidorna på ett väldigt smidigt sätt.

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.

Jag läser, som jag tidigare skrivit, en kurs som heter Webbinformatik och går vid Mittuniversitetet. En väldigt viktig del i kursen är användarbarhet på webben, dvs hur enkelt man hittar det man söker på en hemsida. Det roliga är att de själva har misslyckats totalt med detta då kursens hemsida är bland det rörigastes som finns. Ett bevis på detta är att forumet är överöst med frågor om uppgifterna och kursens innehåll m.m.

Men saken är den att kursen är på 5 poäng men arbetsbördan liknar mer en 15 poängskurs. I kursen ska vi skriva tre rapporter á 10 sidor, göra två laborationer samt producera en hemsida åt ett företag där vi också ska dokumentera det vi gjort. Inte nog med det vi ska även göra någon form av opponering på två rapporterna. Hade det inte varit ett så intressant ämne som det är så hade jag nog övergett kursen för länge sedan.