I uppgiften skapades en webbplats för ett påhittat kanin-café som heter “le petit lapin” vilket betyder den lilla kaninen på franska. Ett kanin-café är ett café där det finns kaniner man kan mata, klappa och umgås med medan man fikar. Man kan även adoptera en kanin om man skulle vilja det. Syfte med webbplatsen är att kunder ska få reda på all information de behöver innan de besöker caféet. Många vet inte vad ett kanin-café är då det är väldigt ovanligt, därför är det viktigt att ha med information om caféet. Målgruppen består av människor i alla åldrar som gillar kaniner och caféer, det finns ingen åldersgräns på något av det så jag har valt att ha en väldigt bred målgrupp.
Användarnas behov
- Se priser på inträde och caféet.
- Boka tid till caféet.
- Få reda på allmän information om caféet.
- Se café menyn.
- Skicka en intresseanmälan om att adoptera en kanin.
- Se bilder på kaninerna som finns på cafét och se deras namn.
- Få reda på kontaktinformation.
Innehåll
- Prislista om vad inträdet och caféet kostar.
- Sida för tidsbokning till caféet.
- Bilder på kaninerna som finns på caféet och vad de heter.
- Kontaktformulär för adoption.
- ”Om oss” sida där man kan läsa om caféet.
- En sida där man kan se café menyn.
- Kontaktinformation.
- Loggan ska agera som en länk till startsidan.
Funktion
- Den globala navigationen innehåller länkar som användaren kan trycka på för att navigera runt på webbplatsens olika sidor.
- Användaren ska kunna få information om priser, caféet och kaninerna.
- Användaren ska kunna boka en tid till caféet.
- Användaren ska kunna skicka en intresseanmälan om att adoptera en av kaninerna.
Jag började med att skissa webbplatsen hur jag ville att den skulle se ut. Jag kom fram till att jag ville ha en banner längst upp, sedan en logga och sedan en global navigation. Efter det ville jag ha ett stort område där all information skulle vara och i slutet ville jag ha en footer för att avrunda webbplatsen. När jag var nöjd med upplägget var det dags att skapa webbplatsen. Jag skapade ett HTML och CSS dokument och länkade dem till varandra. I CSS filen skapade jag ett grid-template efter min skiss och i HTML filerna la jag till div element så att de skulle synas och vara funktionella. När jag var nöjd med upplägget var det dags att skapa loggan. Jag använde mig av webbplatsen pixlr.com för att skapa loggan genom att lägga in text på en bild. När den var färdig satte jag in den på webbplatsen. Jag ändrade färg på alla grids jag tidigare skapat så att webbplatsen skulle ha ett gemensamt estetiskt utseende och passa in med loggan. Jag utgick från kravspecifikationen och skapade länkar till sidor som ska innehålla det jag skrev i kravspecifikationen. Efter det la jag in länkarna i navigeringsfältet och nu var den globala navigeringen skapad. När “skalet” av hemsidan var färdig la jag in allt innehåll på sidorna såsom bilder, text och formulär. Jag testade hur webbplatsen såg ut i olika resolutioner och jag märkte att navigationen såg malplacerad ut, den kom utanför sitt eget grid och det gick inte att gå in på vissa sidor då länkarna var för nära varandra. Bilderna var även inte responsiva. Jag skapade media queries och satte in extra kod för att lösa problemen och gjorde webbplatsen funktionell i mindre resolutioner.
Bilderna har redigerats i ett bildredigeringsprogram, där följande gjorts:
- Lagt till text på loggan.
- Ändrat ljusstyrkan.
- Förstärkt färgerna.
- Beskärt dem/ändrat storlek och resolution.
Webbplatsen uppfyller nästan kravspecifikationen till fullo.
Det som uppfylls
- Prislista om vad inträdet och caféet kostar.
- Sida för tidsbokning till caféet.
- Bilder på kaninerna som finns på caféet och vad de heter.
- Sida med ett kontaktformulär för adoption.
- ”Om oss” sida där man kan läsa om caféet.
- Sida där man kan se café menyn.
- Sida med kontaktinformation.
Det som inte uppfylls
- Loggan ska agera som en länk till startsidan.
Jag valde att inte ha loggan som en länk till startsidan då under användartestet visste ingen hur man skulle gå tillbaka till startsidan och ingen tryckte på loggan. Istället skapade jag en länk till startsidan i den globala navigeringen, det gjorde det mycket tydligare för användarna.
Jag använde mig av (Thinking Out Loud) metoden för att göra mitt användartest. Jag frågade 3 personer, 2 kvinnor och 1 man i åldrarna 23, 24 och 26.
Jag satt bredvid testpersonerna medan de använde webbplatsen och jag undersökte hur de navigerade runt webbplatsen samtidigt som de pratade om webbplatsen och kommenterade om vad de tycker.
Testperson 1 - Kvinna 23år.
“Väldigt fin hemsida, jag gillar hur den ser ut, alla färgerna gör mig glad och det får mig att vilja kolla runt på webbplatsen.”
“Jag förstår inte hur man går tillbaka till startsidan, det hade varit bra om man kunde trycka någonstans i menyn för att komma dit. Annars är det väldigt tydligt hur man ska gå runt på hemsidan”
Testperson 2 - Kvinna 24år.
“Fina färger och bilder på hemsidan, jag tycker dock att det borde finnas en knapp som man kan trycka på för att gå tillbaka till startsidan. Man kan gå mellan alla sidor förutom startsidan, det är det enda som saknas enligt mig”
Testperson 2 - Man 26år.
“Jag gillar layouten på hemsidan och den fungerar bra, det hade nog varit snyggare om menyn blev till en dropdown meny när man går in på hemsidan på mobilen.”
Garrett, J. J. (2011) The Elements of User Experience, Second edition,