Rapport för uppgift 3

1. Syfte och målgrupp

Hemsidan skapades för restaurangen Terra kolgrill & bar, en krog utanför staden men vill ge en urban men inte pretentiös känsla. Temat är sydeuropeisk grill med fokus på Grekland och Turkiet som inspiration, och målgruppen sträcker sig från åldrarna 18 till 65 för de som vill äta mat av högre kvalitet men inte nödvändigtvis betala gourmet-priser.

Syftet med hemsidan är främst att gäster ska kunna boka bord och kontakta restaurangen, för att kunder ska kunna navigera sig till restaurangen på internet och därefter interagera med restaurangen. Syftet med webbplatsen är också för att restaurangen ska kunna planera sin verksamhet och kunna ta emot bokningar och frågor digitalt.

Eftersom krogen ligger lite utanför stadskärnan så vill man helst attrahera lokalbefolkningen, men också självklart stadsbor på utflykt. Man vill fokusera på unga vuxna och mindre sällskap i åldrarna 25-40, men öppnar samtidigt för en meny för större sällskap och möjlighet för större sällskap och familjer med alkoholfria drycker till exempel. Målgruppen har delats upp dessa kategorier;

Användarnas behov

2. Kravspecifikation

Enligt modellen som presenteras i boken "The elements of user experience" av Jesse James Garrett har jag gjort en kravspecifikation för restaurangen Terra kolgrill & bar. Klientens affärsmål är att öka omsättningen, som att sälja mer drinkar och tillbehör och få in fler gäster under lågsäsong och vardagar, stärka sin närvaro på nätet och med ett bokningssystem kunna optimera personalkostnader, strukturera beställningar utav råvaror och minska matsvinn och möjliggöra en bättre service. Man vill kunna erbjuda en bättre upplevelse för större sällskap som kräver mer planering och andra resurser för en krog som vanligtvis har sällskap på runt 3-5 personer. För att förenkla kraven enligt Garretts "The Scope Plane" (2011, s. 65) har jag identifierat dessa som centrala utifrån klientens behov;

Efter jag har jämfört dessa med användarnas behov blir det enklare att ringa in funktionerna som behövs för att bygga klientens hemsida. Enligt sista delen av "The Scope Plane" (2011 s.74-75) ska funktionerna prioriteras och eftersom en hemsida för en restaurang ska leda gästen till bordet, precis som att gästen vill veta först vad restaurangen är och erbjuder, sen veta om och när de kan äta eller dricka där (om hemsidan väckt intresse, det vill säga). Alla är väl egentligen ganska överens om vad man vill göra med en sådan produkt blev prioriteringen relativt enkel; Där det centrala för affärsverksamheten och för kundresan är att kunna boka bord och det är det som är den viktigaste enskilda funktionen, menyn representerar på något sätt själva kärnan i produkten så man kan argumentera för att den är minst lika viktig, men bokningssystem berör fler punkter som underlättar verksamheten och då i längden förbättrar även produkten.

Innehåll

Funktion

3. Beskrivning av arbetet

I första steget "Strategi" har jag identfierat både behoven hos först beställaren som hemsida ska representera, samt behoven hos kunderna som ska använda hemsidan. Avstampet till detta tas med två kärnfrågor (Garrett 2011, s. 36);

Den första frågan besvaras att klienten vill använda hemsidan som en huvudkanal för få bokningar och kunna ta emot gäster på ett strukturerat sätt och kunna visa tillgänglighet för gäster i form av plats för att kunna maximera sin försäljning utifrån sina affärsmål. Strategin är att avlasta personal för att låta sidan ta emot bokningar och kunna planera och strukturera sin verksamhet utifrån det, samtidigt som man kan erbjuda sina gäster en sida där de kan interagera och ta del av information innan de hör av sig till restaurangen och kan på så sätt "betjäna sig själva". Strategin är utifrån målen att presentera sig och konceptet samtidigt som man kan föra gäster till bordet eller baren där försäljningen sker och intäkterna kan säkras. Den andra frågan besvaras av målgruppen och användarna själva i att de vill ha en klar bild av vad det är för restaurang, vilken mat och dryck som serveras samt vad den kostar, sen kunna säkra ett bord där och sedan hitta dit. I andra steget "Omfång" konkretiserar jag vad hemsidan ska göra för både klienten och för kunderna. Det görs genom att fastställa funktionella krav från båda parters behov (Garrett 2011, s. 62-63). Krasst så är dessa krav att beställaren vill ha gäster som kommer dit och spenderar pengar, kunder vill äta en god middag och/eller dricka drinkar. Konkret ska alltså sidan ge dessa kunder möjlighet att själva kunna göra en bokning, men kunder kommer inte vanligtvis bara göra detta eftersom möjligheten erbjuds, de måste först lockas och själva göra ett val utifrån att de lockas av maten, konceptet samt att det är i deras prisklass. Sällan bokar gäster bord "i blindo" och behöver därför i första hand veta lite mer vad de faktiskt kan förvänta sig eller vill ha innan de gör en bokning. Därför gjorde jag en kundresa eller som i boken benämns som "scenario" (Garrett 2011, s. 67). En kund har hittat restaurangens hemsida och ser namnet på restaurangen, och möts av en liten introduktion av restaurangen, presenteras för konceptet och vad man kan beställa och vad det kommer kosta. Efter de fått en uppfattning och gjort bedömningen att de vill boka, återstår fler frågor efter eller under bokningen vill de kanske ställa frågor till restaurangen via telefon eller mail. Efter vi konstaterat det scenariot kan man faställa funktionella krav som måste finnas på sidan för att den ska vara av värde för våra användare; När jag ringat in vad sidan ska göra i de två förgående stegen blir det enklare att bygga grunden för hemsidan i steg 3 som kallas "Struktur". För att strukturera funktionaliteten i sidan gjorde jag en kundresa utifrån vår målgrupp. Resan börjar med att kunden öppnar sidan, ser namnet, och som tidigare nämnt är hög prioritet bokningsfunktionen så den funktionen ligger centrerat och nederkant i skärmen för att vara närmare tummen vid mobilanvändning. Det var då ganska enkelt utifrån den lilla ytan som man ska ta hänsyn till i mobilen att använda "bottom-up"-metoden(Garrett 2011, s. 90-91) och kategorisera innehållet som både beställaren ville ha och som identifierades i användarnas behov; Utifrån dessa huvudkategorier sorterades det som skulle finnas på sidan och som lätt ska kunna nås i en initial startskärm, främst på mobilskärmen. Semantiskt ligger kategorierna från vänster till höger utifrån vårat scenario i steget innan, först menyn, sedan bokningen och sist kontakt. Startsidan fungerar som en hälsning där användaren lär känna restaurangen. Innehållet på startsidan går inte under huvudkategorierna för innehållet som delades upp i steget innan men har samtidigt ett viktigt syfte som introducerar användaren till restaurangen och startar kundresan där man ska bli sugen att veta mer om produkterna efter den. Efter strukturen kring hemsidan gjorts ritar jag först en snabb skiss för att enklare visualisera sidan i enlighet med fjärde steget "Skelettet". Utifrån restaurangens önskemål efter målgruppsanalysen gör jag den först och främst för mobilen, men även en responsiv desktop-variant som ska fungera lika bra och erbjuda samma innehåll. Huvudkategorierna blir flikar i sidan och funktioner som konstaterats utifrån behoven hos både kund och beställare. Navet i sidan blir en startsida som leder kunden in på de tre kategorierna och fördelar utifrån behov användarna till de olika sektionerna av sidan. Den huvudsakliga funktionaliteten i sidan kretsar kring navigeringsfältet som jag lagt i nederkant i startskärmen i mobiltelefonen enligt Hoobers teori om vikten av närhet mellan tumme och klickyta för användaren. Detta navigeringsfält finns i samtliga sidor på samma ställe för att användaren sömlöst ska kunna se och hoppa mellan innehållet på hemsidan. Startskärmen är majoriteten bild från restaurangen enligt användarnas behov av att inspireras och förstå vad beställarens koncept är. Enligt det sista steget i Garretts modell ska hemsidans yta utvecklas (Garrett 2011, s. 134). En process som är mer komplex än att följa tyckte och smak hos en designer(i det här fallet, mitt eget) eller att låta beställaren och användarna kompromissa mellan vad de föredrar eller tycker ser häftigt ut. Grunden för de visuella besluten ska först göras för att underlätta för användaren baserat på allt vi byggt upp under de tidigare stadierna (Garrett 2011, s. 136-137) samt att förmedla företagets varumärkesidentitet. För Terra implementerades detta genom en varm färgpalett för att fånga den hemtrevliga känslan och ge en injudande atmosfär i hela sidan, men inte för starka färger för att hålla en professionell och stilren ton. Den responsiva layouten med flexbox gör den funktionell på alla enheter. Texten för rubriker var i fonten "Reenie Beanie" som ska se handskriven ut och ge en genuin känsla. Brödtexten är i fonten "Cutive Mono" som liknar maskinskrivet för att det ska vara tydligt men samtidigt lite lekfullt.

4. Bilder

Jag redigerade följande bilder som användes i hemsidan med det inbyggda "Foton"-applikationen i windows. Storleken minskades till en maximal bredd på 1200 pixlar för att ta ner filstorleken, samt beskars för att ta bort onödigt utrymme. Alla bilder förutom Grill.jpg fick minskad ljusstyrka eftersom den vita texten ovanpå skulle synas.

Picture-elementet används på sidan för Grill.png-bilden. Den skalar ner bilden så den blir mindre och lättare på mindre skärmar och enheter.

5. Utvärdering mot kravspecifikationen

Efter jag har jämfört dessa med användarnas behov blir det enklare att ringa in funktionerna som behövs för att bygga klientens hemsida. Enligt sista delen av "The Scope Plane" (2011 s.74-75) ska funktionerna prioriteras och eftersom en hemsida för en restaurang ska leda gästen till bordet, precis som att gästen vill veta först vad restaurangen är och erbjuder, sen veta om och när de kan äta eller dricka där (om hemsidan väckt intresse, det vill säga). Alla är väl egentligen ganska överens om vad man vill göra med en sådan produkt blev prioriteringen relativt enkel; Där det centrala för affärsverksamheten och för kundresan är att kunna boka bord och det är det som är den viktigaste enskilda funktionen, menyn representerar på något sätt själva kärnan i produkten så man kan argumentera för att den är minst lika viktig, men bokningssystem berör fler punkter som underlättar verksamheten och då i längden förbättrar även produkten.

Källförteckning

Garrett, J.J. (2011) The Elements of User Experience. 2. uppl. New Riders.