Analys av com hems startsida

Transkript

1 IT-Universitetet Interaktionsdesign Grafiska gränssnitt, 6p Göteborg ht 2003 Analys av com hems startsida Björn Nord

2 1. Innehållsförteckning 1. Innehållsförteckning Inledning Allmänt om sidan Startsidan Beskrivning Analys Övergripande Navigering Layout Färger och bilder Diskussion Referenser

3 2. Inledning En hemsida kan till stor del vara ett företags ansikte utåt, speciellt då företaget är ett tjänsteföretag. Då så är fallet blir det extra viktigt att hemsidan ger ett bra intryck som skapar förtroende hos kunden. Utseendet på hemsidan ska även fånga företagets identitet samtidigt som innehållet ska presentera företaget och dess tjänster. Hemsidan ska också vara anpassad för den målgrupp som företaget har tänkt ska använda sidan. Om målgruppen är generell så gäller det att utforma sidan så att den passar så många besökare som möjligt. Det är lätt att göra en hemsida men det är svårt att göra en bra hemsida. Jag har valt att fokusera denna rapport på företaget com hems startsida som återfinns på adressen D.v.s. den sida som företagets bredbandskunder automatiskt får upp då de kopplar upp sig mot nätet. Anledningen till att jag valde just denna sida är för att jag själv är kund hos com hem och ser därför denna sida i stort sett varje dag. Dock har jag väldigt sällan använt sidan förutom för att få tag i supporten. När jag i början av uppsatsen tänkte efter, kunde jag faktiskt inte minnas vad sidan egentligen innehöll. Anledningen till detta är förmodligen att jag aldrig ägnat den någon större uppmärksamhet. Varför det är på det viset hoppas jag att jag i alla fall delvis ska få svar på i denna uppsats. Com hem är ett företag som erbjuder tv-underhållning, bredbandsaccess och interaktiva fastighetstjänster. Bredbandet som erbjuds går via kabel-tv nätet och finns i hastigheter från 0.25 till 2Mbit. Analysen i uppsatsen är gjord utgående från kända riktlinjer och konventioner samt egna kunskaper som bl.a. inhämtats under kursens gång. Några användartester har inte genomförts och jag har inte heller kontaktat com hem för uppgifter om sidans design. I rapporten kommer jag att analysera webbplatsen med utgångspunkt från startsidan och sedan även titta på den övergripande strukturen och utformningen. Jag kommer inte att analysera företagets riktiga hemsida eller gå in i detalj på de olika delarna på webbplatsen utan endast på en övergripande nivå. 3. Allmänt om sidan Com hems startsida är inte företagets egentliga hemsida utan är den sida som bredbandskunder hos com hem automatiskt får som startsida. Detta eftersom att det krävs att användaren har sin startsida satt till en viss adress för att inloggning ska kunna ske. Därefter länkas användaren automatiskt till com hems startsida och det är därmed den första sida som kommer upp efter att kunden loggat in. Com hem har valt att göra sin startsida till en plats som endast visar information om abonnemanget och företaget, samt dess tjänster och erbjudanden. Det finns inga externa 3

4 länkar, allmänna nyheter eller liknande. Det fungerar alltså inte som en portal som t.ex. Telias startsida. Sidan är anpassad för att fungera i upplösningen 800x600, vilket kan vara bra även om de flesta användare förmodligen använder 1024x768 eller högre. Eftersom IE 5.0 är ett krav från com hems sida vad gäller deras bredbandstjänst har jag inte utgått från någon annan webbläsare då jag gjort analysen. Eftersom startsidan visas för alla kunder kan man anta att målgruppen innehåller människor med olika bakgrund och ålder som inte har något mer gemensamt annat än att de har sin bredbandsuppkoppling hos com hem. Datorvanan kan antas variera kraftigt bland målgruppen. Dock kan det förutsättas att besökarna har en någorlunda snabb uppkoppling och webbsidan kan därför göras mer grafisk utan att för den skull ge långa laddningstider. 4. Startsidan Detta är den sida som användaren först möts av då han/hon kopplar upp sig (fig. 1). På denna sida är det viktigt att besökaren får den viktigaste informationen tydligt presenterad utan att behöva leta för mycket. Eftersom kunden ser sidan varje gång han/hon kopplar upp sig är det också extra viktigt att sidan ger ett bra intryck om kunden överhuvudtaget ska ägna den någon uppmärksamhet innan han/hon surfar vidare. P.g.a. detta måste det även gå enkelt att se ifall sidan innehåller något nytt sedan det senaste besöket på sidan. I com hems fall kan man anta att det är nyheter om abonnemanget eller andra relevanta nyheter samt driftstörningar. Nya tjänster och erbjudanden kan också tänkas vara viktig information för företaget att förmedla. Dock får det inte ske på bekostnad av att den redan nämnda informationen faller bort eller blir svår att se. Detta kan irritera besökaren som istället lämnar sidan utan att läsa något överhuvudtaget. Man kan sedan anta att övriga funktioner är av mindre vikt eftersom de antagligen inte används lika ofta. De flesta besök på sidan sker ju för att kunden automatisk får upp sidan och inte för att använda sidan i övrigt. 4

5 (fig 1. Startsidan ) 4.1. Beskrivning Com hems startsida har en ljusblå bakgrund som ligger som en ruta bakom innehållet på varje sida på webbplatsen. Till vänster på webbsidan är huvudmenyn placerad ovanpå en lite mörkare blå ruta. Företagets logotyp ligger längst upp till vänster ovanför huvudmenyn och länkar till startsidan som sig bör. Området till höger om menyn visar innehållet på varje sida. På startsidan består innehållet av en rubrik med en kort text, båda i vitt, som hälsar besökaren välkommen samt beskriver vad som finns på sidan. Mitt på sidan ligger en box innehållande en meny som visar snabblänkar till olika delar av webbplatsen och till ett urval av de tjänster som finns att tillgå på webbplatsen. Menyn är utformad som en tabell och varje alternativ indikeras av en pil. Längst ner till höger visas kontaktinformation om företaget. På startsidan finns även tre färgglada rutor som länkar till specifika nyheter, erbjudanden och artiklar på webbplatsen. Rutorna innehåller på denna sida text, men rutorna, som även finns på andra sällen på webbplatsen, innehåller också ritade bilder eller ibland animationer. På de mindre varianterna finns en pil nere i vänstra hörnet. 5

6 4.2. Analys De problem som jag ser på startsidan är bl.a. den tabellformade menyn som ligger mitt på sidan. Just utformningen leder till att den inte uppfattas som en meny vid första anblick och den gör det dessutom svårare att leta bland alternativen. Det är lätt att tro att rutan bara är en box som visar information av annat slag, eller helt enkelt bara listar vad som finns på sidan. Färgvalet gör att texten på alternativen är det som blir minst iögonfallande och uppmärksamheten dras till ramen och pilarna som indikerar alternativen. Kombinationen av en intensiv lila färg som ram och den vita bakgrunden gör det ansträngande för ögat och när detta sedan är placerat på en ljus blå bakgrund skapar det 1+1=3 effekter [1]. Alternativen i menyn känns dock relevanta med undantag för beställ digital-tv som länkar till en funktion där man helt enkelt beställer digital-tv till sin bostad, vilket är något man förmodligen inte gör så ofta. Dock kanske vissa av alternativen kunde presenteras på ett annat sätt än i en meny. På förstasidan finns även kontaktinformation om företaget vilket kan vara bra, även om det kanske inte känns helt nödvändigt då alternativet kontakta oss finns både i menyn mitt på sidan och i huvudmenyn till vänster. Om man ändå vill visa informationen känns det inte nödvändigt att ha med den fysiska adressen utan mailadress och telefonnummer till kundservice borde räcka på förstasidan. De färgade annonsrutorna som ligger på förstasidan borde även dessa kunna utformats bättre. Placeringen av dessa på sidan gör att sidan känns ostrukturerad och spretig. Mer om dess färg och form i avsnitt 5.3. Som tidigare nämnts så är nyheter och driftinformation något som borde finnas lättillgängligt för besökaren och som det är nu ligger det länkar till detta i menyn mitt på startsidan. Man kan dock tycka att aktuella nyheter som berör besökaren borde synas direkt på sidan och inte en länk bort. En enkel lista med begränsat antal poster skulle kunna visa nyheter samt innehålla en länk till äldre nyheter. Om utrymmet är begränsat kan det räcka med att visa rubrikerna med datum och sedan länka till nyheten. Detta skulle även bidra till att ge intrycket av att sidan är aktuell. På startsidan i dess nuvarande utförande finns inget som visar att sidan uppdateras regelbundet, vilket kan leda till att besökare avfärdar sidan som inaktuell. Alla dessa saker bidrar till att sidan inte känns som en riktig startsida utan som om man hamnat någonstans mitt på en webbplats, vilket så också är fallet även om det inte borde vara det. Sidan känns ostrukturerad och den ger ingen välkomnande känsla vilket borde vara viktigt för en startsida. Bara en sådan sak som att rubriken ligger så långt ovanför texten under visar på en ogenomtänkt layout. Att förstasidorna på de olika rubrikerna i menyn ser bättre ut i det avseendet ger intrycket av att man inte tagit sig tid och ansträngt sig då man konstruerat startsidan. 6

7 5. Övergripande 5.1. Navigering Webbsidan har sin huvudmeny placerad till vänster på sidan på ett traditionellt sätt. Menyn expanderar då man klickar på ett alternativ och dess underrubriker listas då under det valda alternativet. En högerriktad pil indikerar varje rubrik och då ett alternativ väljs pekar pilen sedan nedåt för det valda alternativet. Underrubrikerna presenteras i en punktlista. Det går inte på något sätt att se i menyn på vilken underrubrik man befinner sig utan detta visas endast som en rubrik där innehållet presenteras till höger om menyn. Överlag går det ganska bra att navigera på webbplatsen även om det kan kännas lite irriterande att positionen på menyalternativen hoppar upp och ner på skärmen när man byter rubrik. Webbplatsen har en bred och grund struktur med endast två nivåer. Dock finns det på vissa sidor länkar till tjänster som skapar ett popup-fönster där interaktionen fortsätter. För att göra det extra tydligt var man befinner sig på webbplatsen kunde detta indikeras i menyn genom att underrubriken där man befinner sig markeras på något sätt samt att den inte längre går att klicka på som en länk. Den vita texten syns bra mot den lite mörkare blå bakgrunden även om underrubrikerna är i minsta laget. Personligen hade jag nog föredragit om rubrikerna började med stor bokstav, men jag antar att det är ett medvetet val av com hem att låta det vara små bokstäver eftersom com hem skrivs med liten bokstav. Stor bokstav hade nog gjort det lättare att utskilja alternativen, i synnerhet underrubrikerna som kan vara svåra att urskilja trots punkterna. En annan sak är att de orangea pilarna som finns vid varje alternativ är så starka i färgen och ligger så nära texten att det blir svårt att läsa den. Färgen kunde gärna tonas ner lite eller att bilden gjordes mindre i förhållande till texten. Som det är nu så stjäl pilen för mycket uppmärksamhet vilket leder till att det blir svårare att hitta rätt alternativ. Under menyn har man valt att placera ett sökfält där det också syns bra. Problemet med sökfältet är att det endast rymmer ca 6 tecken och är därmed alldeles för kort för att det ska gå att se vad man skriver särskilt om man söker efter flera ord [2]. Ett annat sätt att navigera är med hjälp av de bildannonser som finns på många sidor. I vissa fall länkar de till andra sidor på webbplatsen och i andra fall kommer den nya informationen i ett popupfönster Layout Layouten på förstasidorna för rubrikerna i huvudmenyn skiljer sig inte nämnvärt från startsidan. Menyn återfinns på alla sidor på webbplatsen, förutom i de tjänster som visas i popupfönster. Till höger om menyn, längst upp till vänster ligger en något ljusare blå ruta som innehåller en bild, rubriken på sidan och en kort text om vad man kan hitta under 7

8 denna rubrik. Resten av sidan tas upp av färgrutor som innehåller annonser och erbjudanden likt de som återfinns på startsidan. Dessa ligger både under den första rutan och i en spalt till höger om den. (fig 2. Förstasida på rubriken Beställ direkt ) På nivån under dessa, d.v.s. underrubrikerna i huvudmenyn, ligger innehållet oftast som en textmassa. Oftast finns även underrubriken från menyn med som rubrik på sidan, men inte alltid. På de sidor där den saknas finns det inget sätt att se var man är, bara under vilken huvudrubrik. 8

9 (fig 3. Underrubriken Bredband ) Typsnittet som används genomgående på webbplatsen är Verdana, vilket är ett vanligt sans serif typsnitt som fungerar bra på Internet. Brödtexten på sidorna är väldigt liten (10 punkter) och den vita texten kan kännas klen mot den blå bakgrunden vilket gör det lite svårt att lästa, särskilt eftersom texten dessutom inte går att ändra storlek på. För unga friska ögon kanske detta inte utgör något större problem, men med tanke på målgruppen så finns det säkert en del äldre användare med sämre syn som kan lida av detta [3]. Djuplänkar i texten är inte heller understrukna utan är skrivna i fet stil och oftast men inte alltid markerade med >> framför länken. Endast när man för muspekaren över dessa blir länken understruken. Vissa rubriker i texten står också skrivet med fet stil vilket gör att det enda som skiljer länkarna från rubrikerna är att tecknet >> står framför länken. Detta kan göra det svårt att avgöra om det är en länk utan att föra muspekaren över länken, eftersom användare kan vara vana vid att länkar är understrukna och letar efter dessa när de söker igenom en sida. Texten är på vissa sidor också för lång och ostrukturerad för att det ska gå lätt att hitta det man söker. Om man tittar på alternativet bredband -> bredband i huvudmenyn (fig. 3) så ligger det en följd av rubriker med tillhörande text utan tydlig uppdelning. Detta borde gå att strukturera bättre för att få en tydligare översikt på sidan. Eftersom sidan är anpassad för 800x600 så täcker inte sidan hela fönstret i webbläsaren. Sidan är då vänsterjusterad vilket gör att det blir en vit ram till höger om, och i vissa fall under, sidan. Detta gör att sidan blir osymmetrisk och med tanke på att man har valt att göra bakgrunden som en färgad ruta kanske man skulle ha centrerat sidan för att få det vita att framträda mindre och göra att sidan inte känns så tom. 9

10 5.3. Färger och bilder Genomgående på webbplatsen har com hem valt att använda färger från företagets logotyp för att på så vis skapa en egen look and feel. Hela sidan är uppbyggd av färgade rutor med rundade hörn. Färgerna ur logotypen används sedan som bakgrundsfärger på dessa olika rutor. Bakgrundsfärgen på webbplatsen är dock alltid blå. De rutor som innehåller annonser och erbjudanden har däremot varierande färger och på vissa sidor använder de samma färgschema medan de på andra sidor har olika färger. De textbaserade rutorna har ibland texten i en annan färg plockad ur logotypen och ibland svart eller vit. Det tycks inte finnas någon logik bakom valet av färger. Annonsrutorna innehåller ibland bara text men ofta finns även en tecknad bild med för att anknyta till syftet. (fig 4. Rubriken Fastighetsägare) Problemet med att plocka färgerna direkt från logotypen är att de är alldeles för starka för att användas direkt som de är. Färger skall användas sparsamt, hellre för lite än för mycket. De kan användas för att lyfta fram information eller för att påkalla uppmärksamhet. Om det används för mycket och för starka färger blir det lätt rörigt och distraherande. Ett exempel på det syns i fig 4. Alla dessa färger tillsammans med de teckningar som finns på vissa annonser ger enligt mig ett barnsligt utseende på sidan. Färgerna på sidan verkar användas utan någon tanke på vilka konsekvenser det får för 10

11 sidans läsbarhet eller vilka effekter som uppkommer då de olika färgerna kombineras. Exempel på detta kan ses i fig 5 där två färger med hög mättnad används tillsammans vilket gör det jobbigt för ögat och svårt att läsa. Man kan också fråga sig varför ordet modernare ska stå i vitt. (fig 5. Annonsruta) En risk med att använda färggranna och illustrerade rutor för annonserna är att de kan avfärdas som reklam av besökarna som istället fokuserar på andra delar av sidan [2]. Då inte alla annonsrutor innehåller reklam för andra tjänster eller erbjudanden, utan viktig information kan detta vara ett dåligt sätt att representera dessa. En annan riktlinje som com hem bryter mot är att man på en sida bör ha antingen foton eller tecknade bilder men inte båda (fig4). 6. Diskussion Utgående från vad jag sett i den här analysen så antar jag att com hem vill försöka skapa en lite mer personlig och hemtrevlig sida. Vad de sedan tjänar eller förlorar på detta med tanke på trovärdighet och kompetens kan jag inte svara på i denna uppsats. För att reda ut detta krävs en större användarundersökning. Det intryck som jag personligen får är dock att företaget inte tagit designen av startsidan på allvar, vilket för mig ger ett oprofessionellt intryck. Det känns förvånande att ett så pass stort och välkänt företag som com hem trots allt är, inte lagt ner mer resurser på att skapa en genomtänkt webbplats. Man kan däremot säga att de onekligen lyckats skapa sin egen look and feel på webbplatsen. Om man ska peka på något speciellt så är nog färgvalet det som jag ser som det största problemet med sidan. Den blå bakgrundsfärgen med den vita texten gör att webbplatsen känns lite kall och tråkig. Om de är för att upphäva detta man använder så mycket färg som de gör på resten av sidan eller inte spelar mindre roll, problemet kvarstår ändå. Man kan också få intrycket av sidan känns lite omodern om man jämför med många av dagens sidor. Visserligen är sidan ganska enkel, vilket kan vara en fördel, men för att göra den mer användbar finns som sagt en del detaljer att ändra. Framför allt gäller det de starka färgerna som används på ett sätt som bryter mot nästan alla riktlinjer. Det borde gå att hitta bättre sätt att skapa sin egen look and feel och fånga företagets identitet. Det finns som sagt ganska mycket man kan ha åsikter om när det gäller com hems startsida och jag har inga möjligheter att fånga in alla dessa i den här uppsatsen. Jag tror dock att jag har rett ut några av de allvarligaste problemen som faktiskt finns på webbplatsen. 11

12 7. Referenser [1] Edward R. Tufte, Envisioning infromation, Graphic Press, 2001 [2] Jacob Nielsen, Top Ten Guidelines for Homepage Usability, 2002, [3] Jacob Nielsen, Top Ten Web-Design Mistakes of 2002, 2002, 12