HTML & Projektstrategi

Transkript

1 1ME321 Webbteknik 1 Lek0on 3 HTML & Projektstrategi Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Agenda Veckoplanen UppgiE U1 = L1+L2+L3 UppgiE U3 Läsanvisningar Exempel Påbörja utveckling av en webbplats SyEe och mål Analys av målgrupp Persona och behov HTML Tabeller Strukturelement Webbutveckling GarrePs modell Strategy plane Fältanalys och målgruppsanalys 2

3 Tabeller Element och apribut table, tr, th, td cap[on border-apributet colspan, rowspan Använd inte tabeller [ll ap skapa layout!!! Tabeller är inte tabu Tillgänglighet cap[on, th, koppla ihop th och td med id/headers-apribut undvik stora, komplexa tabeller Felke-Morris, T. (2015) Basics of Web Design, Third ed., Pearson Educa[on, Inc., kap. 9 Niederst Robbins, J. (2012) Learning Web Design, 4th ed., O'Reilly, kap. 8 3

4 mpel e x e P n av e r ap ta o [ k e du Intro vi komm a kursen som om hel en upp g Exempel: En webbplats för en blomsterbu0k Greta Olsson har under drygt 40 år drivit blomsterbu[ken Gretas Blommor. Hon har då också byggt upp en bra kontakt med en trogen kundkrets. Men nu har hon gåp i pension och sålt bu[ken. De nya ägarna vill nu utöka verksamheten. Bu[ksnamnet är inarbetat och förknippas med kvalitét, så det vill man ha kvar. Man vill också ap [digare kunder ska känna igen sig och vara kvar. Men man vill nu även nå nya kunder och skaffa en webbplats. 4 Bilder från freedigitalphotos.net och pixabay.com

5 Uppdrag Gretas Blommor kontaktar webbyrån Webb för ap ta fram en webbplats. Uppdrag: "Vi vill ha en webbplats som visar bu0ken. Den ska både passa gamla kunder och locka nya kunder. Det ska vara en modern webbplats, men sam0digt visa ao vi är en gammaldags, hederlig och gemytlig bu0k. Det ska också vara möjligt ao på webben beställa blommor för leverans." Genomförande: 1. Förstudie Analysera mål, behov, område och ta fram en kravspecifika[on. 2. Design och prototyp(er) Ta fram en prototyp för webbplatsen. 3. Produk[on och lancering Utveckla webbplatsen med konkret innehåll. 5

6 Analys Analys av syee och mål Vilka mål har beställaren med webbplatsen? Studera området Terminologi, produkter, kategorisering, etc. Liknande (konkurrerande) webbplatser Webbplatser med online-försäljning Vilka mål har vi med webbplatsen? Hänsyn både [ll beställare och målgrupp Analys av målgruppen Iden[fika[on av målgruppen Delgrupper? Vad vill vi veta om användarna? Hur kan vi få fram informa[on om målgruppen? Metod för analys Intervjuer Fältstudier Sammanställning av resultat Personas (användarmodell) Behov Vilken målgrupp har vi? Målgrupp enligt beställaren. GarreP, J. J. (2011) The Elements of User Experience, 2nd edi0on, New Riders 6

7 Intervju med beställaren (de nya ägarna) Företagets nya ägare säger: Vi är främst inriktade på bukeper, blomsteruppsäpningar och kransar. Gretas Blommor har en trogen kundkrets med personer i åldern 55+ (kanske år) som brukar köpa bukeper och blomstergrupper [ll födelsedagar och andra evenemang. Vi vill visa ap vi forrarande är måna om dem. Vi vill också nå yngre kunder. Med webbplatsen vill vi nu nå ut [ll dem. Bu[ken ligger precis in[ll en kyrkogård, så vi brukar också få många som köper blommor och kransar då de ska besöka den. Vi erbjuder också leverans av blommor och kransar, och vi vill ap man via webbplatsen ska kunna beställa depa. Webbplatsen ska vara klatschig, välkomnande och omfamna besökaren. Det ska vara många bilder. 7

8 Beställarens mål En första lista eeer analys av intervju med beställare: Visa ap bu[ken finns och vilka produkter som finns Visa var bu[ken finns Locka nya kunder Behålla gamla kunder Erbjuda online-beställning för leverans Klatschig och välkomnande webbplats (?) Många bilder Business goals Beställarens mål med företaget Är deoa webbplatsens mål? 8

9 Vilken målgrupp har vi? Bu[kens målgrupp (kunder): Tidigare kunder Gretas trogna kundkrets (55+?) Andra kunder Nya kunder Yngre kunder (20-30 år? år?) Kyrkogårdsbesökare Beställare på nätet Vilka är webbplatsens målgrupp? Primära och sekundära målgrupper? 9

10 Resultat eeer analys av syee och mål Avstämning med beställaren Mål för webbplatsen Visa vilka produkter och tjänster som erbjuds Locka nya kunder [ll bu[ken Erbjuda online-beställning av blommor och kransar för leverans Tydlig informa[on med läpläst text och många bilder En webbplats som användarna oea återkommer [ll Målgrupp Tidigare kunder Nya kunder Online-kunder 10

11 Lär känna området Analysera andra webbplatser Blomsterbu[k, [Pa t.ex. på: hpp:// Beställa blommor på nätet, [Pa t.ex. på: hpp:// 11

12 Resultat av analys av andra webbplatser. Analys av andra webbplatser Vanliga avdelningar på webbplatsen (länkar i navigeringen): startsida, produkter, om bu[ken, interiör- eller inspira[onsbilder, bäställning, kontaktsida / gästbok. Adress i sidfoten. Öppevder på startsidan eller i sidfoten på alla sidor. Produkter visas med små bilder som man kan klicka på, för ap förstora dem. OEa olika sidor för olika kategorier eller händelser (begravning, bröllop, etc.). Pris anges på en del webbplatser, men på flera visas endast bilder på bukeperna, men inget pris. Sidan om bu[ken ger kort beskrivning av bu[ken (vad som erbjuds eller kort historik) och personalen, ibland med bilder. Beställningssidan innehåller ibland endast kontaktuppgieer och ibland ep formulär. Större kedjor som interflora och euroflorist har flera steg med ap välja bukep och sedan fylla i formulär för beställning. Kan sedan se på deras formulär vad som ska vara med. På dessa sidor anges all[d priset för bukeperna i stor s[l redan i första valet. Kontaktsidan innehåller adress och telefonnummer, ibland kompleperat med en karta. Ibland finns det även ep kontakrormulär. 12

13 Analys av målgruppen Iden[fiera målgruppen Vad vill vi veta? Tidigare kunder Onlinekunder Nya kunder Hur får vi reda på det? Sammanställning av resultat 13

14 Bakgrund Ålder, kön Vana av webben, vad gör de på webben, hur oea, dator, mobil, webbplatser de tycker om Har de handlat på webben? eller skulle de kunna tänka sig ap göra det? Har de besökt någon webbplats för en blomsterbu[k? Vad vill vi veta? Hur oea besöker de en blomsterbu[k i "verkligheten"? Vad brukar de köpa? Om webbplatsen Varför skulle de besöka webbplatsen? samt när och var? Vad skulle de vilja se på webbplatsen? Vad vill de kunna göra? Om inget sägs: ge förslag, t.ex. beställa blommor [ll en vän? Vad är vik[gt för en bra webbplats? Andra förslag eller idéer? 14

15 Metod Intervjuer av kunder i bu[ken (Eventuellt enkät i bu[ken) Intervjuer av personer på stan Fältstudie i bu[ken test av hur webben används Kan testa andra webbplatser eller prototyper av den som utvecklas Intervju av bu[kens personal Kan kanske göras i en fokusgrupp Även målgruppen online-beställare kan täckas av ovanstående 15

16 Utdrag av intervjuresultat, där det både varit fler frågor och intervjuade personer. Intervjuer Fråga intervju 1 intervju 2 intervju 3 intervju 4 intervju 5 intervju 6 Var brukar du använda dator och Internet? hemma hemma på jobbet hemma & på jobbet hemma hemma & på jobbet Hur oea är du på webben? 1 [mme om dan 2 [mmar om dan 2 [mmar om dan mer än 8 [mmar om dan ep par gånger per vecka 4 [mmar om dan Vad gör du på webben? Betalar räkningar, [Pa på sidor om trädgård Betala räkningar, spela spel TiPa på personalinfo, uppdatera företagets webb Sköta bokningar, arrangera möten, skicka fakturor, handlar kläder Betala räkningar, chapa med barnbarnen Spela spel, handla på auk[on Brukar du gå in på sidor för någon blomsterbu[k? Ibland Nej Vet inte Ja för ap beställa Ja då jag ska [ll konferenser på köpa blommor jobbet för något speciellt [llfälle Nej Sammanställs [ll en persona eller en persona per iden[fierad målgrupp (GarreP, 2011, s.49-51) "Persona" Användarmodell GarreP, J. J. (2011) The Elements of User Experience, 2nd edi0on, New Riders 16

17 En persona för varje målgrupp Personas Åke Tidigare kund 67 år, tre barn och sju barnbarn Bor i andra änden av stan, men tycker ap Gretas blommor har bra kvalitét och trevlig personal. Köper blommor c:a en gång i månaden. Lite fler [ll helger som påsk, jul, etc. Har [digare arbetat på kontor och har vana av ap arbeta med Word och Excel. Brukar också gå ut på nätet och söka eeer sådant som han vill veta mer om. Vill gärna [Pa på webben och få inspira[on, innan han går [ll bu[ken och handlar. Stefan Ny kund 34 år, gie och har två barn Arbetar som försäljare i ep byggvaruhus. Använder inte datorn så mycket på jobbet, utan det är mest för ap leta eeer produkter i den egna bu[kens sor[ment. På fri[den använder han datorn och Internet för ap betala räkningar, [Pa på några sportsidor och spela spel. Han brukar också kolla runt på nätet, då han ska köpa något speciellt, men vill sedan helst gå [ll bu[ken och handla där. Blommor köper han ibland [ll sin fru och vänner vid t.ex. födelsedagar. Han har ännu inte varit i Gretas blommor, men passerar bu[ken på väg hem från jobbet. Eva Online-kund 26 år, sambo, inga barn Bor i Malmö, men har många vänner runtom i landet. Hinner tyvärr inte besöka dem så oea som hon vill. Arbetar på en konferensaläggning med ap ta hand om bokningar, arrangera konferenser, mm. Hon använder många olika system i datorn på jobbet, både en sta[onär dator på kontoret och en ipad. På fri[den använder hon mest sin ipad då hon surfar på webben. Hon tycker ap det är smidigt och spar mycket [d ap handla olika varor på nätet. Det är vik[gt ap man tydligt ser den totala kostnaden och inte bara priset för varan. GarreP, J. J. (2011) The Elements of User Experience, 2nd edi0on, New Riders, s

18 Resultat eeer analys av målgruppen Användarnas behov Behov som kommit fram i målgruppsanalysen Se vad som finns i bu[ken. Se bu[kens öppevder. Kunna beställa blommor online. Se vad man kan beställa online. Se priser, även alla [llägg som t.ex. leveransavgie. Kunna använda webbplatsen både på dator och mobila enheter. Få erbjudanden, t.ex. vid helger. 18