Analys av hemsidan www.merrild.se Av Anneli Olsen, e0nannis@ituniv.se
Innehållsförteckning Inledning... 2 Översikt... 2 Färger... 3 Bilder... 4 Förstasidan... 4 Navigationsområden... 4 Övre navigationsmenyn... 4 Huvudnavigationsmenyn... 5 Informationsfönstret... 6 Bottennavigationen... 7 Diskussion och slutsats... 7 1
Inledning Sidan jag har valt att analysera tillhör ett företag som hur ut och sköter kaffemaskiner som heter Merrild. Hemsidan ligger på www.merrild.se. Jag känner inte till företaget särskilt väl sedan tidigare och att jag valde just detta var mest tillfälligheter. Jag hittade hemsidan då jag gjorde lite research för en sida för min pappas företag som har service för Merrild. Den såg trevlig ut tyckte jag så därför valde jag att göra en analys på den. Jag har inte gjort någon liknande analys förut så jag har inte haft någon direkt plan för den, men har delat upp det såhär: Översikt över hur sidan ser ut i stort, en analys av de färger som använts, en analys av bilderna som finns på sidan, mina tankar om förstasidan, lite mer ingående analyser av sidans olika delar och därefter följer en kombinerad diskussion och slutsats om vad jag tycker om sidan. Översikt När man går in på länken Vår affärsverksamhet kan man läsa att: Vi utvecklar och marknadsför ett brett och unikt sortiment av kaffesystem för professionell verksamhet. Vi erbjuder en komplett lösning, som inkluderar kaffe, service och kaffemaskiner av högsta kvalitet. Vår erfarenhet i branschen sträcker sig från 1753. Det är alltså inte ett helt nystartat företag utan ett seriöst, gammalt företag och det syns på hemsidan. Den är gjord med ett klassikt, välprövat koncept i lugna färger och menysystem till vänster. Bakgrunden till sidan är vinröd och hela sidan går i rött. Det verkar som om rött är den färg som symboliserar företaget eftersom den även återfinns på pappersmuggar och reklamtavlor som finns med på bilder på sidan. Sidan är uppbyggd av tabeller och informationen är inramad. Samtliga tabellrutor har olika färger för att man skall kunna särskilja dem. Texten är skriven med färger som lätt går att skilja från bakgrunden och som inte påfrestar ögat. Högst upp på sidan tonar den från vinrött till klarrött och det är också där, till höger, man återfinner några länkar som är tillgängliga var man än är i sidsystemet: Kontakta oss, Översikt och FAQ. När man inte är på förstasidan finns även länken Hem med som tar besökaren tillbaka till förstasidan. Sidkonstruktörerna har inte följt konventionen att länka logotypen som finns längst till vänster högst upp till förstasidan utan löst det med Hem-länken istället. Över huvudfönstret, där informationen finns samt huvudmenyn, till vänster finns en sökruta. Denna ligger dock inte där på förstasidan även om den fortfarande är tillgänglig. Läs mer om detta senare. Huvuddelen av navigationen sker med hjälp av ett vertikalt menysystem till vänster, under logotypen. Menysystemet innehåller åtta rubriker: Vår affärsverksamhet, Globalt ansvar, Kaffe en upplevelse, Våra produkter, Anpassat kaffekoncept, Kaffekonsultation, Service och Pressmat. Cafitesse 700. När man klickar på någon av dessa får man upp undermenyer. I botten på menyrutan finns hela tiden en bild som har med den huvudmeny man har valt att göra. Till höger det ovan nämnda menysystemet finns den information man klickat fram. Jag benämner rutan i vilken informationen kommer som informationsfönstret. Hur innehållet 2
i denna ruta ser ut beror på vilken rubrik man klickat på. Det finns vissa mönster, men alla sidor ser inte likadana ut. Längst ner på alla sidor finns länkar som leder till sidor som rör lag och rätt samt användbara länkar. Där finns även en länk till Merrilds moderföretag, SaraLee/DE. Färger Bild 1. Några av de färger som används på Merrilds hemsida. Sidan går i rött, gult och svart i olika nyanser, se Bild 1. Eftersom de valt att främst använda en mörk vinröd nyans som bakgrund blir ändå sidan vilsam att titta på även om rött annars har en tentens att dra blicken till sig och alltså inte lämpar sig att ha runt om det man egentligen vill läsa. Sökrutan ligger på en nästan hudfärgad rand ovanför huvudfönstret. Formen gör att ögat dras mot sökrutan vilket stärker min tro att sidan är noga genomarbetad och mycket arbete är lagt på att styra användarens läsande på sidan. Navigationsmenyn till vänster har en ljusare röd bakgrund, men det är fortfarande en hyfsat diskret färg som är vilsam att titta på. Informationsfönstret till höger har en ljust, ljust rosa bakgrund på vilken korta textstycken som verkar sammanfattande ligger i en svagt orange ruta och rubriken finns hela tiden högst upp i en röd ruta. Beroende på vilken sida man befinner sig på så finns textstycken i orange, gula och vita rutor, men det är alltid gjort så att det ser naturligt och strukturerat ut. Under informationsfönstret ligger svart och rödrandig rand som går mot svart mot högerkanten. Det är där länkarna till lagar och bestämmelser, användbara länkar och företagets moderbolags sida ligger. Tack vare att linjen är ganska tunn och dessutom inte massivt svart står drar den inte uppmärksamheten till sig utan hjälper bara till att rama in informationsfönstret. Textfärgerna är väl avvägda i hela sidsystemet. Länkarna högst upp på sidan är skrivna i vitt mot en klarröd bakgrund, men då texten är ganska liten så står de ändå inte ut alltför mycket. Texten i den hudfärgade söktabellrutan är mörkt vinröd och pilen man måste trycka på för att sökningen skall börja är gul med en svart ram så att den syns bra mot bakgrunden. Huvudrubrikerna i den röda menyrutan har en gul nyans som är lättläst mot bakgrunden. Underrubrikerna är vita och är inte skrivna i fetstil som huvudrubrikerna är. I informationsfönstret finns flera olika bakgrundsfärger. Högst upp där rubriken står är bakgrunden röd så där är texten gulaktig. Där bakgrunden är ljusrosa är texten antingen mörkt vinröd eller svart och där bakgrunden är gul är texten i förmodligen svart. Det är svårt att avgöra eftersom färgen ser annorlunda ut mot gul bakgrund än mot rosa. Länkar är dock skrivna i klarrött och de är dessutom understrukna för att tydligt visa att det är just en länk. Längst ner, mot den svarta, bakgrunden är texten vit, men väldigt liten så den stör inte den heller. Sammanfattningsvis kan det sägas att färgerna är genomtänkta och väl matchade för att bra läsbarhet skall uppnås och sidan skall vara behaglig att titta på. Färgerna är varma och ger ett i det närmaste mysigt utseende på sidan. Den ser ut som en varm kaffehörna man kan krypa in i när det är mörkt och ruskigt ute. Att texterna finns på rutor med olika 3
bakgrund gör att det blir lätt att särskilja dem och färgerna gör att man ser vilka texter som ändå hör ihop. Bortsett från logotypen så är samma teckensnitt använd på alla sidor och bara i fyra teckenstorlekar. Detta följer väl konventionerna för hemsidor 1. Bilder På sidan finns det otaliga bilder på kaffekoppar, folk som dricker kaffe, kaffebönor, kaffeplantager och så vidare. Det finns även bilder på solnedgångar och folk som befinner sig utomhus där det är kallt. Samtliga bilder handlar antingen om kaffe eller situationer då det vore gott med en kopp kaffe. Färgerna på bilderna är dämpade och tar inte alltför mycket uppmärksamhet. De återanvänder flera av bilderna på olika sidor inom sidsystemet. Annars är det ganska mycket bilder i siduppbyggnaden så den är inte helt vänlig mot användare med långsam uppkoppling. Förstasidan Förstasidan skiljer sig av okänd anledning från övriga sidor på det sättet att tabellen i mitten är mycket smalare. Jag kan inte se någon uppenbar anledning till detta förutom att man tydligt ska se skillnad på förstasidan och övriga sidor. På förstasidan saknas sökfunktionen ovanför huvudfönstret men återfinns istället under välkomsttexten. Vid sidan av sökfunktionen kan man välja på vilket språk sidan skall presenteras. Detta görs med en rullgardinsmeny där det språk som den sida du befinner dig på har ligger överst. De andra språk du har att välja på, bortsett från svenskan, är danska, norska och finska. På den svenska sidan står det Välj språk i rutan, men på övriga sidor står det choose language. Varför vi svenskar särbehandlas vet jag inte riktigt. En annan skillnad från övriga sidor är att navigationsmenyns längst ner har en röd bakgrund istället för svart som den har överallt annars i systemet. På förstasidan finns det inga nyheter utan dessa återfinns istället under Vår affärsverksamhet. Istället för nyheter finns korta texter om deras nyaste kaffemaskin, deras varumärken och deras kaffekoncept. Det finns även en kort välkomsttext och de tidigare omtalade rutorna för sökning och språkbyte. Navigationsområden Övre navigationsmenyn Bild 2. Övre navigationsmenyn Denna meny ligger högst upp till höger och, bortsett från länken Hem, finns dessa länkar tillgängliga och väl synliga hela tiden man navigerar på sidan. Det är uppenbarligen en grupp länkar som företaget, eller den som gjort sidan, tycker är mycket viktiga eftersom dom ligger där dom ligger och är en egen grupp. Hem-länken leder tillbaka till förstasidan. Kontakta oss- länken leder till en sida där man kan fylla i ett formulär som 1 MDI-föreläsning, 2003-10-07, http://www.cs.chalmers.se/cs/education/courses/mdi/2003/f11_screendesign_web.pdf 4
sedan skickas till företaget. Där finns också kontaktinformation i form av adress, telefonnummer, faxnummer och mailadress. Översikt-länken leder till en site map där alla sidor finns länkade organiserade efter var de ligger i menysystemet. FAQ-länken går till en sida där frågor som användaren förväntas ha besvaras. En sak som jag tyckte var dåligt med denna menyrad är att bilderna inte är klickbara. Jag kan inte fundera ut någon anledning till varför de inte länkat dem. Huvudnavigationsmenyn Menyn består i sitt grundtillstånd av en punktlista med åtta punkter. Eftersom den är vertikal får ordningen på punkterna betydelse och man kan se vad företaget helst vill betona. Rubrikerna är gula och skrivna i fetstil medan underrubrikerna är vita och med normal tjocklek. Man kan hela tiden se var bland rubrikerna man är då den man just klickat på blir understruken. När man klickat på en rubrik eller underrubrik blir huvudrubriken vit och punkten försvinner. I botten på menyrutan finns hela tiden en bild som har med den huvudmeny man har valt att göra. Överst finns Vår affärsverksamhet som har underrubriker som innehåller information om nyheter, globala distributörer, jobbtillfällen samt företagets historia och mål. Förmodligen tror sidmakarna att besökarna först och främst vill veta lite om företaget innan de anlitar dem. Att företaget är globalt kan ge en viss indikation på att det är stabilt tillräckligt stort för att vara en pålitlig framtida arbetspartner även om detta samarbete bara inkluderar kaffesystemleverans. Kaffe kan dock vara nog så vikigt för anställda på ett företag så att den som levererar kaffet är pålitlig och i tid är nog en stor faktor då man bestämmer sig för vilket system man väljer. Det och priset förstås. Nästa rubrik är Globalt ansvar där alltifrån miljö, värderingar, socialt ansvar, livsmedelssäkerhet, kvalitetsgaranti och en policy rörande småskaliga odlare avhandlas. Även detta säger en hel del om hurdant företaget är och kan vara en viktig faktor att beakta när man beslutar om man skall anlita dem istället. Att Merrild lyfter fram sitt globala ansvar kan vara en konkurrensfördel då kaffeindustrin inte anses vara speciellt bra för världens fattiga befolkning exempelvis eller speciellt miljövänlig. Många företag vill ju profilera sig som både miljövänliga och etiska och då måste alla delar i kedjan, både underleverantörer och kaffeleverantörer, uppfylla dessa miljö- och etikkrav. Därefter följer Kaffe en upplevelse. Denna avdelning handlar bara om kaffe. Kaffets historia, kaffets resa, världens kaffe, kaffeblandningar och vanliga frågor om kaffe är de underrubriker som finns. Det enda jag kan tänka mig att denna rubrik har för syfte är att ge besökaren intrycket av att Merrild verkligen kan allt om kaffe. Det är en trovärdighetsrubrik. Först här kommer rubriken Våra produkter. Här kan du få reda på vad företaget har att erbjuda det vill säga kaffe, te, kaffehörnor, lite övriga produkter som juiceautomater samt tillbehör som exempelvis muggar. Denna underrubriksamling har själva underrubriker då det finns olika sorters kaffe, thé, kaffehörnor och så vidare. Fortfarande hålls konventionen om att den länk du klickat på blir understruken så du vet hela tiden var du är. 5
Nästa rubrik, Anpassat kaffekoncept, har ett syfte, men det är inte uppenbart. Om jag som användare skulle gå in och vilja beställa en kaffemaskin hade jag nog gått direkt in på Våra produkter och inte på Anpassat kaffekoncept som vid närmare granskning verkar lämpligare. Anpassat kaffekoncept påvisar nämligen att inte kaffehörnorna kommer att se likadana ut överallt utan bör ha olikheter beroende på var de finns. Exempelvis ser ju inte en kaffehörna på en vårdmottagning likadan ut som den gör i en fabrik. Om användaren väl hittat till denna rubrik så kan den nog få mycket hjälp här när den skall bestämma sig för om den ska anlita Merrild eller inte då det här erbjuds färdiga koncept så man inte behöver lägga mycket tid på att läsa in sig på vad man egentligen behöver. Det enda man behöver göra är att välja vad kaffehörnan skall erbjuda. När man väl gjort det visar sidan vilken lösning Merrild rekommenderar. Kaffekonsultation är nästa rubrik. Underrubrikerna är Recept, Försäljningstips och En kopp kaffe. Den första, Recept, innehåller just recept på olika kaffedrinkar och det är inte helt uppenbart hur det passar ihop med de övriga rubrikerna som behandlar hur man säljer mycket kaffe och hur man räknar ut hur mycket man skall ta betalt för kaffet man säljer. Möjligen skall man blanda till kaffedrinkarna och sälja dessa, men det framgår inte riktigt. Den näst sista rubriken är Service. Företaget vill inte bara erbjuda en kaffemaskin utan ett helt koncept som inkluderar skötsel och service av systemet. Det erbjuder utbildning för anställda på företagen dit kaffemaskinerna ställs så att dessa kan sköta delar av kaffemaskinshanteringen själva. De erbjuder även att kontrollera vattenkvaliteten och, om så behövs, installera filter för att se till att kaffet och thét blir av bästa kvalitet. Den sista rubriken, Pressmat. Cafitesse 700, gör mig lite förvirrad. Det enda ett klick på denna rubrik ger är några bilder på en kaffeautomat och hur den används. Det finns ingen förklaring till varför inte dessa bilder eller denna rubrik ligger där den ligger och inte under produkter, men eftersom den ligger där den ligger så måste det ju finnas ett syfte med det. Sidan har ju hittills varit hyfsat logiskt uppbyggd. Informationsfönstret I detta fönster skall all information komma upp som besökaren efterfrågar. När man klickar på en huvudrubrik kommer den upp som rubrik i informationsfönstret i en röd ruta med gul text. Rutan innehåller även en kort text som sammanfattar vad underrubrikerna handlar om. Den innehåller dessutom en bild som skall illustrera texten. Rubriken och bilden är klickbara, men ingen av dem leder någonstans. Under den röda rutan kommer underrubrikerna upp. Framför varje underrubrik finns en relevant bild samt en pil. Både bilden, pilen och rubriken är klickbara och leder till den text som sammanfattas lite kort under underrubriken. En del av rubrikernas förstasidor har en gulaktig ruta längst till höger som innehåller länkar som rör rubriken. En sak jag fann underlig var att för Service saknades en underrubrik som fanns i menyrutan, men inte i informationsfönstret nämligen Utbildning av anställda. Jag misstänker att detta bara är ett misstag, men det är en sådan sak som dom borde ha undersökt innan de lade upp sidan. 6
Underrubrikernas sidor ser lite olika ut beroende på vad de innehåller, men har den saken gemensam att rubriken hela tiden syns skriven med gul text i en röd ruta högst upp. De flesta underrubriker har en gul ruta högst upp med en inledande text, men det gäller inte alla sidor. På en del sidor ligger hela texten, som då är väldigt kort, i en gul ruta. Varför dom gjort så framgår inte riktigt. Texterna är för övrigt av ganska olika längd, men det är inga jättelånga texter och dom är luftigt skrivna med mycket bilder. Många texter innehåller dessutom länkar till andra sidor inom sidsystemet. Dessa finns både i en gul ruta bredvid texten och som en del av själva texten. Det verkar som om att när det är få länkar finns de i själva texten och om det är en större samling får de en gul ruta. Bottennavigationen Länksamlingen längst ner är inget man lägger märke till i första taget, men den innehåller i alla fall en viktig länk: Villkor och bestämmelser. Den innehåller en lång, massiv text som befriar företaget från allt ansvar vad gäller vad deras webbsida kan ställa till med. Den förklarar även att alla bilder och texter lyder under lagen om copyright. Användbara länkar leder till en länksida där underleverantörer och sidor som på något sätt har med Merrild att göra länkas. Moderföretaget Sara Lee/DE länkas både därifrån och via en egen länk i bottennavigationsrutan. Diskussion och slutsats Hittills har jag nästan skrivit ett reklamblad både för Merrild och företaget som konstruerat sidan. Jag tycker sidan i stort är bra, men den har ändå sina brister. Både de bra och dåliga delarna sammanfattar jag här. Jag misstänker att sidan är skapad av någon anställd av Merrild som följer en grafisk profil utarbetad av moderbolaget eftersom sidan ser likadan ut hos dotterbolag runt om i världen. Mycket arbete är nedlagt på sidan. Allt tycks vara noga genomtänkt och följer de konventioner vi har fått lära oss både i kursen Grafiska gränssnitt och i MDI-kursen. Saker som hör ihop är tydligt grupperade och avskiljda från övrigt material. Ramar används för att avgränsa sidans olika delar. Punktlistor är använda för att öka läsbarheten. Färgerna är valda så att de sprider harmoni och inte försvårar läsningen för någon inklusive de som har problem med färgblindhet. Det jag skulle kunna klaga på vad gäller det grafiska är väl att då många bilder finns synliga samtidigt och dessutom texter är inramade i informationsfönstret kan sidan bli lite rörig att titta på med många saker som vill stjäla ens uppmärksamhet. Texten kan även vara svårläst för äldre besökare då den är väldigt liten. Rubrikerna följer konventionen om 7+-2 då det inte finns fler än 8 rubriker i något rubriksteg. Allt är dock inte bra. Sidan som finns under Våra produkter/kaffe och som handlar om Piazza doro Expresso har exempelvis en brun ruta för länkar istället för den vanliga gula. I denna ruta har länkarna en röd färg som är mycket svårläst mot den bruna bakgrunden. På sidan om felsökning som ligger under Service står det: Klicka på länkarna nedan för att ladda ner snabbreferenskorten i pdf-format. Dock finns det inga pdf-filer med snabbreferenskort utan bara en text på engelska som förklarar att det är på gång. Det finns även länkar för att ladda ner Acrobat Reader. En annan sak som inte är speciellt bra är att 7
du inte på en gång kan se skillnad på länkar som leder ut från sidan och sådana som leder någon annanstans inom sidorna. Det är inte alltid det framgår av texten att det är en extern sida som länkas. Sidan verkar rikta sig till beställare av nya kaffesystem snarare än de som redan har ett system ifrån Merrild. Denna slutsats drar jag av att servicedelen av sidan inte är fullt utvecklad. Sidan hade varit klart bättre om det funnits dokument för att hjälpa användaren att själv fixa enklare fel på automaterna eller fylla på dem. Det finns inga länkar till eventuella manualer vilket kanske skulle efterfrågas då dessa i pappersform säkert kan tappas bort av användarna. Dock finns många sidor som är till för att sälja in Merrilds system hos en besökare. Under rubriken Anpassat kaffekoncept får användaren mycket hjälp med att välja ett system som passar just dem. Dock utstrålar inte sidan personlig service utan en mer distanserad professionalism. Du får exempelvis inte veta någonting om de anställda. Inte ens om VD:n eller ledningsgruppen. Allt som framhävs är själva företaget och dess egenskaper. 8