Page 1

Värt att läsa om färger i webbdesign

Det klassiska färghjulet. Bilden lånad från Six Revisions.

Färger och färgval har en stor betydelse när det gäller hur man uppfattar en webbplats, vilket inte är så svårt att förstå. Dock ser man allt för ofta webbplatser där skaparna inte gjort eller kunnat göra en ordentlig analys av färgvalen.

Inom konstens värld är detta en given kunskap, något det också borde vara hos webbdesigners. En ganska bra genomgång av färgteori görs idag på Six Revisions, en läsning jag rekommenderas.

Ny webbplats för Vansbro kommun – så här gjordes den

3

Vansbro kommun har i dagarna lanserat en ny version av deras webbplats.

Vansbro.se - Startsidan vid lanseringen

Startsidan som det såg ut när sidan lanserades

 

Som delaktig i projektet att ta fram den nya webbplatsen tänkte jag i detta inlägg ge en förklaring till varför sidan ser ut som den gör och hur jag tänkte. Mitt uppdrag i projektet bestod av att ta fram den grafiska designen och göra huvudstrukturen.

 

Första kommunen med Drupal

Vansbro kommun hade tidigt funderingar kring att använda sig av ett open source-cms, dels för att de själva hade tänkt stå för den mesta av installationen och programmeringen. I början lutade det mot att de skulle välja Joomla, men efter noga övervägande valde de Drupal i stället. Vilket måste ses som tur i sammanhanget då Drupal har betydliga fördelar gentemot Joomla när det gäller saker som rättighetshantering och möjligheten att strukturera innehållet på sidan.

Vansbro kommun blir första kommunala webbplatsen i Sverige som väljer att använda Drupal till sin webb, något fler kommuner redan börjat ta efter.

 

Arbetet

I projektet hade vi väldigt fria händer och det enda vi hade som riktlinjer var att göra en bättre sida än den förra. Min första tanke var att ta det bästa från framgångsrika sidor och lägga ihop det till denna sida, samtidigt som den skulle bli grafiskt väldigt tilltalande – något som alldeles för få kommuner satsar på idag. En viktig del i detta var också att sidan i så stor utsträckning som möjligt följde de krav Verva satte upp på en offentlig sida.

 

Designen

Jag testade med flera olika färgkombinationer och hade först tankarna på att göra en sida med en mörk bakgrund kanske mest för att den skulle sticka ut lite från mängden, men det stötte ganska snabbt på patrull och det fick bli en ljusare variant i stället med blå som primärfärg i menyn.

Efter ett tags skissande kom jag fram med en struktur som de gillade och jag började med själva designen. Jag ämnade tidigt göra något speciellt med menyn och lägga sökrutan i fokus. Som syns på skissen var sökrutan först centrerad på sidan men denna flyttades senare ut till höger på sidan – men ändå väldigt stor för att hamna i fokus. En annan detalj som efterfrågades var att få webbplatsen att inkludera inte bara Vansbro som ort utan även de övriga orterna i kommunen. Detta löste jag genom att göra en ljus karta som ligger i huvudet på webbplatsen, en detalj som jag tycker blev riktigt bra.

38
Tidig skiss som senare gjordes om en hel del. Siffrorna visar var de olika elementen skulle ligga.

 

En annan sak var att storleken på typsnittet ökades något än de 12px som ofta brukar användas på webbplatsen. Det är snyggt och stilrent med ett litet typsnitt, men min tanke var att man i första hand vill göra det lätt för besökaren att läsa texten och så får det estetiska komma i andra hand på just den biten.

 

Menyn

En huvudmeny bestående av fyra ingångar: invånare, näringsliv, turism och kommun och politik. Jag gillar när det finns tydliga ingångar på en webbplats och detta gör det väldigt lätt för besökaren att se vart på webbplatsen de ska börja. För att än mer tydliggöra innehållet bakom menyn lade jag till en kort beskrivande text under varje meny; ett ord kan ibland vara svårt att förstå men med en beskrivande text så tror jag det kan hjälpa en del att lättare hitta. Lite inspiration till detta fick jag genom Smashing Magazine.

Efter en del förstudier valde vi att ändra strukturen på startsidan lite grand och göra så att startsidan blir en kombinerad ingångssida för alternativet ”Invånare” och själva webbplatsen. Detta sparar en hel del klickande i menyn.

Ett bildspel lades även till på startsidan; denna yta är även tänkt att kunna utnyttjas till att framhäva viktiga saker vid tillfällen. Startsidan är fortfarande den sidan man ofta kommer till när man besöker en webbplats och bilder skapar snabbt en varmare och trevligare kännsla.

 

Färgkodning beroende på innehåll

En annan detalj är att allt innehåll i högerspalten färgkodas beroende på vad det är för sorts innehåll. Det finns fyra varianter på färgkodat innehåll: grönt, blått, rött och grått. Tanken var att man snabbt ska känna igen färgen och då se om det finns t.ex. dokument att ladda ned. Grön bakgrund i titelfältet innebär kontaktinformation; blå bakgrund är interna och externa länkar; röd bakgrund är dokument att ladda ned; grå bakgrund innebär att det är en kalender. Detta visade sig fungera väldigt bra vid användarstudier.

39t
Högerspalten färgkodades

 

Sammantaget kan man nog säga att nya webbplatsen för Vanbro kommun fått ett betydligt lyft även om jag kan sakna interaktiviteten från medborgarna; interaktivitet genom forum, politikerbloggar och nyhetskommentarer. Förhoppningsvis kommer detta att komma längre fram.

Ny webb för Configura med höga ambitioner

Idag får vi på Configura vår beta-site levererade. Den största förändringen från föregående webb är att vi slagit ihop tre hemmasnickrade webbplatser (Configura.com, cet-extensions.net och instantplanner.com) och fått en helt ny grafisk design. December månad kommer att ägnas åt tester och strukturell finslipning så att vi kan inviga 2009 med en ny och fräsch webbplats.

 

Att slå ihop tre webbar men ändå hålla produkterna isär är inte så enkelt som man kan tro, men jag tror att jag lyckats ganska bra. Jag tänkte under slutet av december göra ett inlägg här på bloggen om hur arbetet har gått till.

 

En sak som dock slagit mig under arbetets gång är hur många företag är rädda för att ligga i framkant med sin webbplats. I studier man läser ser man hur många det är som säger att sociala medier är viktigt och att de tänker på detta i sitt arbete med webben, men detta är långt ifrån vardag idag. Ofta när något görs skapas en extern webbplats som knappt går att hitta till från deras officiella webbplats. T.ex. Electrolux som har ett Newsroom som inte länkas till från officiella webbplatsen, likaså har Scania.

 

Internetworld har jämfört att par stora företagswebbplatser och där fick Electrolux bäst betyg med 9 av 10 möjliga poäng. Nu kan det i och för sig vara svårt att skapa en webbplats för ett så pass stort företag, men personligen tycker jag inte att man blir allt för upphetsad över vad man ser.

 

I och med nya webben på Configura har jag helt enkelt gjort så att allt ska samsas på samma ställe, det vill bl. säga att vårt sociala newsroom kommer helt att ersätta den traditionella nyhetsvisningen, företagets ledning och vi som arbetar här kommer att synas mer osv. I och med detta tror jag att vi kommer att skapa en betydligt större öppenhet både mot våra användare och mot journalister, eller vem det nu kan vara som är intresserad av vad vi gör. Vi kommer även att försöka få in mer personlighet i det vi gör på webben, något som Fredrik Wackå menade saknas när han jämförde några sociala mediesiter (bl. vår), och man kan inte annat än att hålla med honom.

 

I bakgrunden av den nya siten, som släpps i januari, kommer utvecklingen av ytterligare webbprojekt att fortgå.

 

Det vi siktar på är helt enkelt att bli den optimala företagswebben, målet är högt men om man inte siktar högt vinner man heller inget.

Ständigt dessa bildspel

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.

Satsa mer på webbanalysen

I Internetworld skriver webbanalytikern Lars Johansson hur viktig webbanalysen är i lågkonjunktur, eller snarare att den är ännu viktigare då än i vanliga fall.

”Syftet med webbanalys är att mäta, analysera och optimera webbkommunikation och webbfunktioner för att minska den friktion som besökarna upplever.

En webbplats är till för dess besökare och det är därför – såklart – viktigt att underlätta för besökaren på webbplatsen. Detta låter ganska självklart, men när man väl kommer i kontakt med företag/personer som ska skapa en ny webbplats utgår de ofta från sina egna referenser: Vad vill vi säga, istället för vad vill besökaren veta.

Förutom att göra en grundlig analys över hur besken sett ut tidigare på din webbplats kan man prova olika sätt när man senare sätter upp strukturen.

Jag har själv börjat testa ett koncept som funkat ganska bra när jag jobbat med att strukturera ett innehåll på en webbplats.  Det är viktigt att grafiskt rita upp hur strukturen kommer att se ut på din webbplats, så man lätt kan se hur navigeringen ser ut. Detta är speciellt viktigt om man bygger en webbplats åt någon som inte i det dagliga arbetet jobbar med webbplatser. Efter att man gjort det har jag provat att sätta upp mål för varje delsida. T.ex. kan det vara så enkelt som en kontaktsida där målet är att besökaren ska hitta en e-postadress och andra kontaktuppgifter.

Detta är en ganska lång process om man gör det ordentligt, men resultatet blir ofta väldigt givande. Dessa sidmål jämför sen mot de personas man tidigare gjort (om man gjort dessa). Detta sätt hjälper dig att sätta dig in i besökarens situation. Man kommer snabbt fram till att många sidor är relativt överflödiga eller att de kan slås ihop med andra sidor. Genom att ta bort ”onödiga” sidor är det ofta så att man gör det lättare för besökaren att hitta det denne vill hitta. Att sätta dessa mål hjälper dig även att se vad huvudfokuset på sidan är.

Hur upplever man egentligen en webbplats?

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.

Jons.nu i skelettform

Klicka för större bild.

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

Jons.nu - min egna webbplats

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.