Utvärdering av webbplats,

Utvärdering av webbplats, www.beckers.se IT-universitetet, Chalmers Grafiska Gränssnitt, 6p Kursansvariga: Staffan Björk, Sus Lundgren 2003-10-27 Annelie Günzel, 761212-

1. INTRODUKTION... 3 2. METOD... 3 3. TEORI... 3 3.1 RIKTLINJER FÖR ANVÄNDBARHET... 3 3.2 NIELSENS TIO-I-TOPP, RIKTLINJER FÖR EN HEMSIDA... 4 4. KOPPLING TILL TEORIN SAMT PERSONLIGA ÅSIKTER... 6 4.1 BECKERS TIO-I-TOPP, RIKTLINJER FÖR HEMSIDA... 6 4.2 RIKTLINJER FÖR ANVÄNDBARHET... 8 SLUTSATS... 11 REFEREN SER... 11 BILAGA 1... 12

1. Introduktion Jag har valt att studera en webbplats som uppgift till den personliga uppsatsen. Paradoxalt nog var valet av webbplats inte så lätt. Först funderade jag på att välja någon som jag verkligen är irriterad på och då föll valet på Horde-webbmail, så jag började att spåna där men insåg snart att det skulle bli alldeles för tråkigt att studera den. Min sambo och jag håller som bäst(?) på att renovera sovrummet, ny färg på väggarna är målet. Det var därför jag gick in på Beckers hemsida för att studera olika färgalternativ och där hittade jag min webbplats - www.beckers.se! Svenska folket har drabbats av ett Martin Timell -syndrom. Inredningsprogram som Äntligen hemma och Room Service får allt fler tittare vilket leder till människorna hemma i sina bostäder drar igång nya inredningsprojekt. Samtidigt som färghandlarna och tapetserarfirmorna glädjer sig åt sin ökade försäljning, så ökar också konkurrensen dem emellan. Trycket på att inspirera och locka kunder har kanske aldrig varit så stort för en färghandlare som nu! Jag tycker därför att det skall bli intressant att se hur Beckers använder sin webbplats just för detta ändamål. Jag tror även att webbplatsen har många ovana besökare, många är nog även engångsbesökare som söker specifik information till ett specifikt tillfälle. Intressant är därför att studera hur företaget anpassar sin webbplats efter denna målgrupp. 2. Metod Jag väljer att utvärdera Beckers hemsida med hjälp av Jakob Nielsen s tankar och idéer om design- och användbarhetsprinciper eftersom han anses vara en guru inom området. Jag kommer att analysera webbplatsen utifrån Nielsens tio designprinciper. Jag kommer att fokusera på utseende, innehåll och navigation. 3. Teori Jag kommer i detta avsnitt kommer jag först att gå igenom Jakob Nielsens riktlinjer för användbarhet. Efter det kommer jag att behandla hans tio-i-topp riktlinjer för en hemsida. Nielsens riktlinjer för användbarhet innefattar 10 designprinciper [1]. Jag väljer dock inte att behandla samliga av dessa, utan har valt ut de principer jag anser är av värde för min analys. Det presenteras enligt nedan: 3.1 Riktlinjer för användbarhet Koppling mellan systemet och verkligheten Relatera systemet till verkligheten - tala samma språk som användaren, använd ord och fraser som målgruppen är bekant med.

Användarkontroll och frihet Ge användaren möjlighet att gå tillbaka från platser de tagit sig till av misstag. Stöd funktioner för redo och undo. Konsekvens och standard Användaren skall inte behöva fundera på om samma knappar, text eller handlingar betyder olika saker i olika situationer. Flexibilitet och duglighet Skilj mellan experter och nybörjare genom att skräddarsy vissa funktioner. Estetisk och minimalistisk design Undvik att använda information som inte är relevant eller av mindre betydelse. Hjälp och dokumentation Hjälp och dokumentation bör alltid finnas, även om systemet skall fungera utan det. 3.2 Nielsens tio-i-topp, riktlinjer för en hemsida En webbplats är företagets ansikte utåt världen. Den viktigaste sidan av alla på en webbplats är startsidan, då det är den som besöks mest och som skall fånga besökarens intresse [2]. Det första en besökare av en webbplats gör, är nämligen att bege sig till startsidan. Här nedan beskriver jag dessa riktlinjer: Gör sidans syfte tydligt och klart: förklara vem du är och vad du gör 1. Inkludera en slogan Att ha en slogan på första sidan som summerar vad företaget gör är mycket viktigt och ger besökaren en snabb inblick i vad företaget bedriver för verksamhet. Detta är speciellt viktigt på okända företag eller nya företag, men även för kända företag som vill locka nya kunder. 2. Använd en fönstertitel med god synlighet i sökmotorer och bokmärken Att börja titelraden med företagets namn följt av en kort beskrivning av sidan är av god designprincip. Att inleda titelraden med ord som till exempel välkommen till är opraktiskt då företaget kommer att listas under v i sökmotorer och under bokmärken.

3. Gruppera all företagsspecifik information inom ett särskilt område Det första en besökare gör när han/ hon kommer till en webbsida är sällan att leta reda på detaljerad företagsinformation. Att ha bra och lättillgänglig information om vilka företaget är, är mycket viktigt, inte minst för att locka nya kunder men även för att öka företagets tillförlitlighet. Det bästa sättet att leda en besökare till djupare företagsinformation är genom en enkel länk med om <företagsnamn>. Hjälp användaren hitta vad han/hon söker 4. Betona webbplatsens viktigaste delar Hemsidan skall ge användarna en klar utgångspunkt utifrån huvuduppgiften till övriga relaterade delar. 5. Inkludera en sökfunktion En sökfunktion är en viktig del av en stor webbsajt. Sökfunktionen skall vara en enkel sökruta, som bör rymma minst 25 tecken så det finns chans att göra en sökning innehållande flera ord. Avslöja sajtens innehåll 6. Ge exempel på verkligt innehåll Genom att visa en del av det bästa eller det mest aktuella innehållet på hemsidan visas exempel på vad som komma skall, det vill säga vad som finns bakom hemsidan. 7. Namn på länkar bör börja med det mest viktiga nyckelordet En besökare skummar igenom sidan vid sitt besök för att hitta den del av sidan som innehåller den information han/hon söker. Genom att ha ett relevant namn på sina länkar på hemsidan blir det enklare att urskilja vad länkarna innehåller och gör det lättare för besökaren att sålla bort länkar som inte är intressanta. 8. Erbjud enkel tillgång till senast använd information En besökare som återkommer till en webbplats kommer ofta ihåg vilka tidigare artiklar, produkter eller övrig information som fanns utlagda på hemsidan vi första besöket. För att hjälpa besökaren att hitta tillbaka till denna information så snart den har flyttats, bör hemsidan innehålla en lista med länkar till materialet i fråga.

Använd visuell design för att förhöja, inte begränsa interaktionen 9. Överdriv inte kritiska fakta En vanlig uppfattning är att viktiga delar på en hemsida kräver utförliga illustrationer, färger och bilder. Nielsen menar dock att besökare tenderar att bortse från sådan grafik och fokuserar istället på de delar av startsidan som verkar användbara. 10. Använd meningsfull grafik En hemsida skall inte dekoreras med onödig grafik. Bilder är slagkraftiga när de innehåller information som är av intresse för besökaren och som kan relatera till ämnet. 4. Koppling till teorin samt personliga åsikter I detta avsnitt kommer jag att koppla Nielsens teorier till Beckers webbplats. Sist i analysen finner läsaren en bilaga med skärmdumpar på några av Beckers sidor. Det kan vara fördelaktigt att parallellt med att analysen läses, även besöka deras webbplats, www.beckers.se 4.1 Beckers tio-i-topp, riktlinjer för hemsida 1. Inkludera en slogan Längst upp på Beckers första sida visas en text som säger livet är fullt av färgprover (se figur 1, bilaga 1). Jag skulle inte vilja kalla detta en direkt slogan då en slogan för mig mer är exempelvis Nike s - just do it. Nu är jag personligen mer sportintresserad än färgintresserad, men jag vågar ändå säga att Nikes slogan är mer etablerad och har mycket högre igenkännlighets faktor än vad Beckers text har. Jag förmodar dock att innebörden av deras text skall vara den samma som för Nike, inte minst på grund av att texten blinkar och byter färg med jämna mellanrum. Rörelse och färg fångar uppmärksamhet och jag tycker därför att Beckers lyckas i detta avseende. 2. Använd en fönstertitel med god synlighet i sökmotorer och bokmärken Beckers har en enkel titelrad endast bestående av deras namn. Varför inte lägga till ovan nämnda text (livet är fullt av färgprover)!? 3. Gruppera all företagsspecifik information inom ett särskilt område Längst upp i menyraden finns alternativet om Beckers vilket ger användaren snabb och enkel tillgång till den företagsspecifika informationen. De grupperar informationen väl och verkar samla all fakta om företaget här.

4. Betona webbplatsens viktigaste delar Jag kan urskilja en indelning av informationsutrymmet(menyrad ej medräknad) i en huvuddel och en övrig del på hemsidan. Huvuddelen är informationsytan på mitten av sidan och har inspiration som tema. Ytan är indelad ytterligare i tre delar där text och bild om den senaste kollektionen har fått mest utrymme. Den övriga delen är högersidan som visar lite axplock över vad som är på gång just nu. Erbjudande, och Aktuellt är två länkar som skall locka till nyfikenhet. 5. Inkludera en sökfunktion Beckers har valt att ha en ruta för snabbsök längst ner i vänstra hörnet på hemsidan. Det är en textruta som verkar rymma hur många tecken som helst. Att en sökfunktion finns är positivt tycker jag. 6. Ge exempel på verkligt innehåll På hemsidan möts besökaren av en avdelning för Trend 2004 Life som är Beckers nya innefärger, som de beskriver det själva. Här uppmuntras besökaren att kolla in den senaste färgkollektionen. Beckers försöker att locka sina besökare till inspiration genom text och bilder. Varje informationsdel innehåller en länk läs mer som påvisar att det finns underliggande information att hämta. Som tidigare nämnt visas i högerdelen aktuella saker som är på gång just nu. 7. Namn på länkar bör börja med det mest viktiga nyckelordet Beckers har bra namn på sina länkar i menyn. Det framgår tydligt vad de innehåller. De olika informationsdelarna på hemsidan har alla en textrubrik, en bild och en läs mer - eller se själv- länk. Hela informationsdelen är klickbar, det vill säga såväl text, bild som läs mer - länk länkar till underliggande sidor. Detta uppfattas som förvirrande. Är det någon skillnad på att klicka på bilderna i de olika delarna respektive på de tillhörande läs mer -länkarna? Jag tycker personligen inte att bilder/foton skall användas som länkar, då en tolkning av en bild är högst subjektiv. Ett exempel på en sida där bilder är länkar är sidan kampanjtitta i taket (se figur 3, bilaga 1). Det finns tre bilder på sidan, varav de två nedersta är länkar vilket besökaren inte förstår om han/hon för muspekaren över. Varför är inte den tredje bilden också en länk, kan man fråga sig!? Ingen hjälptext finns för att förtydliga att bilderna är länkar. Länkarna leder till nya produkter vilket har alltså inget samband alls med föregående sida!

8. Erbjud enkel tillgång till senast använd information Beckers har ingen funktion som stödjer enkel access till tidigare aktuella sidor. 9. Överdriv inte kritiska fakta Beckers hemsida innehåller mycket bilder och färger. Det är naturligt med tanke på vilken bransch de är i och den känsla av inspiration som de vill förmedla. De använder inga reklambanners som kan stjäla besökarens uppmärksamhet 10. Använd meningsfull grafik Beckers hemsida visar många färgglada bilder som visar olika miljöer där färg används. En bild på hemsidan visar ett färgglatt vardagsrum med två personer vid en soffa, vilket kan få besökaren att identifiera sig med sin egen hemmiljö. En bild på ett hus lockar de besökare som har tänkt måla om fasaden på det egna huset. Ett exempel på grafik som inte är meningsfull finns under sidan butiksguiden (se figur 4, bilaga 1) där en illustration tar upp väldigt mycket plats på sidan och egentligen inte fyller någon annan funktion. Huvuduppgiften och syftet med den här sidan är ge besökaren möjlighet att söka efter sin närmsta Beckershandlare. Konstigt nog så får illustrationen lika stort utrymme på sidan som själva sökfunktionen och illustrationen är dessutom placerad till vänster, vilket är en placering som har ett större intresseområde än det till höger! Grafik av denna typ återfinns på flera sidor och fungerar då endast som utsmyckning och tar inte alls samma utrymme som det nämnda exemplet, vilket jag då tycker fungerar bra. 4.2 riktlinjer för användbarhet Koppling mellan system och verklighet Beckers använder ett lätt språk och förklarar på ett enkelt sätt facktermer och produkter. Webbplatsen talar således besökarens språk och ställer inga krav på förkunskaper hos besökaren. Användarkontroll och frihet Det är svårt för besökaren att veta var han/hon befinner sig i webbstrukturen. En flesta sidor som nås direkt under huvudmenyn har en överskrift med samma namn som länken, vilket skall förtydliga navigationen. Besökta länkar blir inte markerade, vilket gör det mycket svårt för besökaren att lokalisera sig på webbplatsen. Väldigt få sidor innehåller dessutom en tillbaka -länk.

Om besökaren går mer än ett steg från huvudmenyn, det vill säga mer en sidas djup, tappar han/hon bort sig fullständigt för där finns varken markerade länkar eller sidrubriker att tillgå. Beckers navigation är med andra ord långt ifrån användarvänlig och många gånger rent av frustrerande. Det gör ett besök på Beckers sajt mycket rörigt och det är väldigt svårt att hitta tillbaka till en sida man nyss har besökt. Positivt är dock att besökaren alltid kan komma tillbaka till startsidan via loggan samt att huvudmeny alltid finns synlig. Konsekvens och standard Meny Att ha en högerplacerad meny är en väl vedertagen standard bland webbsidor på Internet. Beckers har anammat detta vilket gör det lätt för en besökare att känna igen sig. De menyval som är minst frekventa har placerats sist bland menyalternativen, vilket känns logiskt och bra. En del menyalternativ har även undermenyer. Som tidigare har nämnts finns även en liten meny längst upp i högra hörnet för återförsäljare och proffs. Färg Något som tog mig runt två till tre dagar att upptäcka var att det finns en utarbetad tanke bakom de bakgrundsfärger som omsluter informationsytan (se figur2, bilaga 1)! De olika menyvalen som finns har ju tilldelats olika färg och dessa färger ser jag nu används som bakgrundsfärg när besökaren är inne på sidor under respektive menyval. Länkar Länkarna på sidan innehåller stor inkonsekvens. Länkar kan vara såväl bilder som text. Texten kan vara understruken såväl som inte understruken och kan bestå av enbart versaler eller bara av gemener. En annan variant på en länk är text tillsammans med liten pil. Färgerna på länkarna varierar också. Några exempel; länkarna i menyn består bara av versaler och har vit färg. Detta är konsekvent och genomgående för alla menyval, vilket är bra. Det verkar som om övriga länkar är tänkta att vara röda, men på vissa ställen lyckas man inte hålla fast vid detta argument. På sidan inspiration finns bilder, röd text med pil samt en lila text som länkar. Går vi vidare till sidan inspiration-utomhus så består länkarna där enbart av olika bilder. På sidan för arbetsguide-utomhus har alla länkar samlats i en högerspalt med rubriken länkar där alla länkar har röd färg samt är understrukna. Logga När muspekaren förs över loggan så visas texten startsida som förtydligar för besökaren vad ett klick på loggan innebär. Detta tycker jag kanske inte är nödvändigt eftersom loggan är väl vedertagen som symbol för hem, men det känns heller inte onödigt eftersom webbplatsen förmodligen har många ovana besökare. Om besökaren har varit inne på ett menyalternativ som har undermenyer och väljer att klicka på loggan för att

komma till startsidan, ligger undermenyn kvar som synlig. Detta tror jag är ett fel för om sidan uppdateras, så försvinner undermenyn och endast huvudmeny-alternativen är synliga. Sökrutan Sökrutan är planerad längst ner i vänstra hörnet. Denna placering känns lite undangömd och ologisk. Jag hade hellre velat se den högt upp på sidan, gärna i högerhörnet. Det känns mer vedertaget och är lättare att se. Flexibilitet och duglighet Ett plus ger jag Beckers för att de har utformat en egen meny längst upp i högra hörnet för proffs och återförsäljare. Här användaranpassar de sidan och grupperar den information som inte en vanlig besökare är intresserad av och heller inte störs av. Det visar tecken på flexibilitet och är bra och genomtänkt! Kanske kunde länken åf-support ha hetat något annat, det var inte helt självklart för mig från början vad den betydde. Estetisk och minimalistisk design Beckers design är snygg och färgsprakande. Den ger ett glatt och kreativt intryck. Tycker speciellt mycket om bakgrundsfärgerna som skiftar mellan de olika menyvalen. Informationen är väsentlig för besökaren och de gånger då målgruppens intresse går isär, jag syftar på vanliga besökare privatpersoner och återförsäljare, urskiljs dessa två informationsmängder och visualiseras på ett bra sätt. Jag upplever inte att informationen upprepas på onödigt sätt. Beckers sidor är trevliga och lättöverskådliga. De innehåller lagom med text vilket gör att känns lätta att ta sig igenom och fasthåller besökarens intresse. Hjälp och dokumentation Jag väljer att behandla just den här designprincipen av en speciell anledning. Då webbplatsen innehåller en sökfunktion och har en lättillgänglig länk kontakta oss där besökaren kan få ställa frågor, anser jag att en renodlad hjälpfunktion är onödig. Det finns dock en länk på hemsidan som heter komponera själv där varje bokstav i länkens text har en egen färg. Där hade jag verkligen behövt förtydligande information om vad som kommer att hända härnäst! När jag klickar på denna länk, startas nämligen, helt utan förvarning Beckers egna målarverktyg; Beckers Painter! Dessutom öppnas verktyget i helskärm istället för bara i ett nytt fönster, vilket döljer allt annat som jag har på skrivbordet, inklusive aktivitetsfältet. Detta är ett bra exempel på val som är icke intuitiva och kan rent av verka skrämmande för en ovan besökare. För att komma tillbaka till webbplatsen igen får jag antingen stänga appleten eller använda kortkommandot alt+tab för att byta fönster, vilket inte heller är helt självklart för den ovane användaren. Jag vill även passa på att nämna några mer ingående ord om Beckers målarverktyg. Här kan användaren leka med Beckers olika färger för att färgsätta till exempel husfasader,

sovrum, trappor eller kök. Här skulle kanske en hjälpfunktion eller så här använder du Painter -länk för programmet är inte helt intuitivt. Slutsats Mitt första intryck av Beckers hemsida var mycket positiv. Jag möts av en färgglad och mycket trevlig och inspirerande första sida. Hemsidan gör mig snabbt på glatt humör. Som besökare får man en god överblick över vad som finns på sidan. Jag upplever att det är lagom mycket information. Menyalternativen är välformulerade och ger en inblick i vilket innehåll de döljer. Jag tycker därför att Beckers lyckas bra med att återspegla innehåll och budskap i sina underrubriker. Beckers design, rent estetiskt tilltalar mig mycket. Jag tycker att den innehåller vackra färger som inspirerar och lockar fram en skaparglöd hos mig. Här lyckas de alltså med att fånga sin målgrupps intresse. Att sidan är anpassad efter förstagångs-besökare och personer utan branschvana märks i deras enkla och lättförståliga texter om exempelvis produkter, tips eller ideér vilket visar god koppling mellan system och verklighet. Mycket positivt upplever jag att Beckers även väljer att låta återförsäljare och proffs, som de själva uttrycker det, ha ett eget utrymme och meny på sidan. Flexibilitet är en viktig aspekt inom Nielsens principer om användbarhet. Jag är förvånad över att Nielsen inte talar om vikten av att snabbt och enkelt hitta en kontakta oss -länk på webbplatsen! Han menar att en länk om företaget skall finnas, men varför är inte kontakta oss minst lika viktigt eller ännu viktigare, undrar jag!? Jag vill i alla fall påpeka att Beckers har en sådan länk som sista val i deras huvudmeny. På så sätt kan besökaren lätt hitta hur han/ hon kommer i kontakt med företaget. Många gånger är ju det kanske enda anledningen till att en person besöker en webbplats! Tyvärr övergår min positiva inställning till webbplatsen till en blandning av frustration och maktlöshet när jag upptäcker att Beckers verkligen har misslyckats beträffande navigeringen. Röriga länkar och en avsaknad av information om var jag befinner mig på sidan gör att jag inte hittar tillbaka till min favoritsida och att mitt intresse för webbplatsen svalnar. Här ser vi tydliga tecken på inkonsekvens och avsaknad av användarkontroll och frihet, vilket Nielsen poängterar är som mycket viktigt att se över. Referenser [1]http://www.useit.com/papers/heuristic/heuristic_list.html [2]Top Ten Guidelines for Homepage Usability, http://www.useit.com/alertbox/20020512.html

Bilaga 1 Figur 1 hemsidan www.beckers.se

Figur 2 Sidan Nyheter med undermeny och bakgrund i samma färg som menyalternativ Figur 3 Sidan Kampanj-titta i taket De två nedersta bilderna är länkar! Länkar till vad kan man undra?

Figur 4, sedan butiksguiden exempel på icke meningsfull grafik