Det första valet i huvudmenyn är ”Inspiration” med följande undermenyer: ”H&M Man”, ”Paper Love”, ”A Day To Remember”, ”Cosmetic”, ”Le Guide Denim”,
”Modebarometern”, ”Hitta Din Stil”.
Här följer en kort analys av tre av dem.
5.1.1 H&M Man
När man klickar på ”H&M Man” under ”Inspiration” får man upp ett popupfönster (se figur 3). Jag tycker att popupfönster är bra när man som här får upp dem i en efter innehållet passande storlek och det inte går att surfa vidare till andra sidor vare sig på samma eller andra webbplatser.
Figur 3. H&M Man
På den här sidan hittar användaren navigeringen högst upp och man ser tydligt var man befinner sig. Det finns inga undermenyer och texterna är korta.
Till vänster ser vi olika bilder som knappar och när man trycker på dem övergår den stora bilden långsamt till den valda. En fräck funktion men man kan ju undra hur väl detta fungerar för dem som inte har bredband.
Under ett av menyvalen (”butikslista”) är texten lite längre så där finns det en scrollista till höger. Det är den gråa rad som finns i figur 3, och som finns på alla sidorna under ”H&M Man”, som ändrar utseende till en scrollista. Detta ger ett
enhetligt intryck av sidorna men samtidigt kan det försvåra för ovana användare när scrollistan inte ser ut som den brukar.
Loggan (Har herravdelningen en egen logga eller är det bara en överdimensionerad rubrik?) uppe i vänstra hörnet tar användaren till startsidan för ”H&M Man”.
För att komma tillbaka till huvudsidan får man stänga ner fönstret.
5.1.2 Cosmetic
När man klickar på ”Cosmetic” under ”Inspiration” får man också upp ett popupfönster i en anpassad storlek (se punkt 5.1.1).
Musiken som spelas här känns malplacerad men den går att stänga av genom att klicka på ikonen, som man först inte ens ser, under loggan.
På den här sidan (visas inte) ligger navigeringen som två textlänkar under rubriken.
Man kan även klicka på orden (sexig, cool, spännande osv.) i bilderna. Här uppfattar jag det som att orden är flera olika länkar men det är samma länk och samma som texten under rubriken.
Figur 4. Cosmetic
När man väljer någon av länkarna så kommer en kort beskrivning av de olika make-up-typerna samt en länk ”Så här gör du” upp. När man klickar på den länken dyker nästa sida upp (figur 4 förutsatt att man tidigare valt ”dark eve”) där
Här är det lätt att förstå att de små bilderna till höger visar vilken delsida man befinner sig på samt att de även utgör navigeringen i tillvägagångssättet.
Längst ned finns en länk till produkterna som använts och en länk för att komma tillbaka till sidan innan. Dock saknar jag ett sätt att komma till startsidan för
”Cosmetic” förutom att klicka på loggan för jag tror inte att den funktionen framgår.
Animeringen av bilderna är lite onödiga men de ger ett häftigt intryck.
Vi jämförelse av figur 3 och 4 kan man tydligt se att H&M tagit hänsyn till deras respektive målgrupp.
5.1.3 Le Guide Denim
”Le Guide Denim” under ”Inspiration” innebär ytterligare ett popupfönster. Den här gången verkar sidan vara uppbyggd av frames och jag kommer att hänvisa till sidan på det viset.
Figur 5. Le Guide Denim
I den övre, vänstra framen ligger bilden ”le Guide Denim" och den länkar liksom loggan till startsidan för ”Le Guide Denim” (figur 5). I den övre, högra framen ligger en bild som innehåller menyn och loggan. En pil markerar i menyn vilken sida man befinner sig på.
Dessa två frames ser likadana ut för fyra av de fem menyvalen men för det femte hoppar menyn över till den övre, vänstra framen vilket är inkonsekvent (figur 6).
Resten av startsidan verkar till en början rörig, sedan upptäcker man att det är samma länkar som i menyn.
Det är dessutom väldigt mycket och starka färger vilket är ännu ett bevis för att H&M tar hänsyn till sin målgrupp (i det här fallet ungdomar).
Ljudikonen flyttar på sig mellan de olika sidorna, inkonsekvens igen! (jfr. Figur 5 och 6)
Figur 6. Le Guide Denim > Basmodeller
Här har jag valt att kommentera en undermeny till ”Le Guide Denim” nämligen
”basmodeller” (figur 6).
5.1.3.1 basmodeller
Här försvinner tyvärr den övre, högra framen som finns på de andra sidorna och detta antagligen p.g.a. platsbrist (se figur 6) då den tecknade bilden till höger som visar vad som skiljer de olika jeansmodellerna åt är för hög.
Den grå framen till vänster känns aningen för ljus för att ha vit text på. Texten är om de modeller som finns i undermenyn längst ned. En pil markerar vilken modell användaren tittar på/läser om för tillfället.
På den här sidan har ljudikonen flyttats längst ner till höger istället (jfr. figur 5).
I övrigt känns det här som en väldigt matnyttig sida.
6 Förslag till förbättringar
Här tänkte jag redogöra för de förbättringar man kan tänka sig på H&M’s webbplats.
Man kan ju alltid göra saker och ting annorlunda och ändå behålla konceptet. I det här fallet är det inte så stora förändringar som behöver göras och de behöver inte
Mer konsekvens på sidorna är en sak som man lätt kan förändra utan att det förändrar sidornas utseenden speciellt mycket. T.ex. kan man bestämma att i popupfönstrena alltid ha menyraden uppe (precis som på startsidan) och ljudikonen under loggan.
En annan förbättring skulle vara om undermenyerna till huvudmenyn fortsatte att vara tillgängliga efter det att man gjort sitt val och hamnade tillsammans med
underundermenyerna.
Dessutom kunde statusen lätt indikerats ännu tydligare med lite större nyansskillnader i textfärgen.
7 Sammanfattning
Till slut kan jag konstatera att trots att H&M bryter mot många konventioner och principer så fungerar deras sida verkligen bra. Än så länge har jag hittat allt jag sökt efter och även om konsekvensen inte alltid är på topp så är det lätt att navigera sig runt på webbplatsen.
Nu är det ju mycket möjligt att jag inte har representativ datorvana för H&M’s målgrupp för att kunna uttala mig i den här frågan men jag kan ju knappast gissa heller. Hade gärna testat hemsidan på någon med mindre datorvana men tyvärr känner jag ingen sådan person i Göteborg.
Det är ju inte heller säkert att H&M’s fokus ligger på funktionalitet och användarvänlighet utan mer på känsla och utseende.
“If you're creating a site that's for a media company |…|, fashion company, art school -- sites where there's no accountability for the bottom line, then it's ok to use "wild and crazy" design techniques.” [5]
Om nu H&M’s fokus och intentioner med hemsidan är att framstå som moderna och stilfulla men ändå lite ”wild and crazy” så har de, åtminstone enligt mig, lyckats.
Väldigt mycket roliga bilder och animationer blir tillsammans med en bra uppkoppling succé!
8 Referenser
[1] Webbsida: http://www.useit.com/alertbox/20021223.html Top Ten Web-Design Mistakes of 2002
(Jakob Nielsen's Alertbox, December 23, 2002)
[2] Webbsida: http://www.useit.com/alertbox/20020512.html Top Ten Guidelines for Homepage Usability
(Jakob Nielsen's Alertbox, May 12, 2002)
[3] Webbsida: http://www.useit.com/alertbox/20010722.html Tagline Blues: What’s the Site About?
(Jakob Nielsen's Alertbox, July 22, 2001)
[4] Webbsida: http://www.useit.com/alertbox/980906.html
Microcontent: How to write Headlines, Page Titles, and subject Lines (Jakob Nielsen's Alertbox, September 6, 1998)
[5] Webbsida: http://www.fixingyourwebsite.com/everything.html
Everything you need to know about web design my father taught me in 1964
(Vincent Flanders’ Fixing your web site) [6] Webbsida http://www.hm.com
H&M’s hemsida
Samt såklart även föreläsningar med tillhörande presentationer