1. No category

1ME321 Webbteknik 1 – Lek0on 3 HTML & Projektstrategi Rune Körnefors Medieteknik 1 © 2015 Rune Körnefors [email protected] Agenda • 
• 
Veckoplanen –  Vecka 38 –  UppgiG U1 — U1=L1+L2+L3 –  UppgiG U3 –  Läsanvisningar –  Länklista HTML –  Tabeller –  Strukturelement 2 • 
Webbutveckling –  GarreRs modell – Strategy plane –  Fältanalys och målgruppsanalys • 
Exempel –  Påbörja utveckling av en webbplats –  SyGe och mål –  Analys av målgrupp –  Persona och behov Bilder från freedigitalphotos.net och pixabay.com Tabeller •  Element och aRribut – 
– 
– 
– 
table, tr, th, td cap]on border-­‐aRributet colspan, rowspan •  Använd inte tabeller ]ll aR skapa layout !!! •  Tabeller är inte tabu •  Tillgänglighet –  cap]on, th, koppla ihop th och td med id/headers-­‐aRribut –  undvik stora, komplexa tabeller Felke-­‐Morris, T. (2015) Basics of Web Design, Third ed., Pearson Educa]on, Inc., kap. 9 3 mpel
e
x
e
R
n av e r aR 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åR 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å aR ]digare kunder ska känna igen sig och vara kvar. Men man vill nu även nå nya kunder och skaffa en webbplats. 4 Uppdrag Gretas Blommor kontaktar webbyrån Webb-­‐3-­‐2-­‐1 för aR 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 aN vi är en gammaldags, hederlig och gemytlig bu0k." Genomförande: 1.  Förstudie • 
Analysera mål, behov, område och ta fram en kravspecifika]on. 2.  Design och prototyp • 
Ta fram en prototyp för webbplatsen. 3.  Konstruk]on och lancering • 
Utveckla webbplatsen med konkret innehåll. 5 Analys •  Analys av syGe och mål •  Analys av målgruppen –  Vilka mål har beställaren med webbplatsen? –  Iden]fika]on av målgruppen •  Delgrupper? •  Vad vill vi veta om användarna? •  Hur kan vi få fram informa]on om målgruppen? –  Studera området •  Terminologi, produkter, kategorisering, etc. •  Liknande (konkurrerande?) webbplatser •  Webbplatser med online-­‐försäljning –  Meod för analys •  Intervjuer •  Fältstudier –  Vilken målgrupp har vi? •  En eller flera? –  Sammanställning av resultat •  Personas (användarmodell) •  Behov –  Vilka mål har vi med webbplatsen? •  Hänsyn både ]ll beställare och målgrupp GarreR, J. J. (2011) The Elements of User Experience, 2nd edi0on, New Riders 6 Intervju med beställaren (de nya ägarna) •  Företagets nya ägare säger: –  Vi är främst inriktade på bukeRer, blomsteruppsäRningar och kransar. –  Gretas Blommor har en trogen kundkrets med personer i åldern 55+ (kanske 50-­‐70 år) som brukar köpa bukeRer och blomstergrupper ]ll födelsedagar och andra evenemang. Vi vill visa aR vi forsarande ä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 aR man via webbplatsen ska kunna beställa deRa. –  Webbplatsen ska vara klatschig, välkomnande och omfamna besökaren. Det ska vara många bilder. 7 Beställarens mål •  En första lista eGer analys av intervju med beställare: – 
– 
– 
– 
– 
– 
– 
Visa aR 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 deNa webbplatsens mål? 8 Lär känna området •  Analysera andra webbplatser –  Blomsterbu]k, ]Ra t.ex. på: •  hRp://www.google.se/search?q=blomsterbu]k –  Beställa blommor på nätet, ]Ra t.ex. på: •  hRp://www.google.se/search?q=beställa+blommor 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? 20-­‐55 år?) –  Kyrkogårdsbesökare –  Beställare på nätet •  Vilka är webbplatsens målgrupp? –  Primära och sekundära målgrupper? 10 nalys
a
r
e
G
ltat e ch mål u
s
e
R
Ge o
av sy
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 för leverans Tydlig informa]on med läRläst text och mycket bilder En webbplats som användarna oGa återkommer ]ll •  Målgrupp –  Tidigare kunder –  Nya kunder –  Online-­‐kunder 11 Analys av målgruppen •  Iden]fiera målgruppen Tidigare Nya kunder kunder Online-­‐
kunder •  Vad vill vi veta? •  Hur får vi reda på det? •  Sammanställning av resultat 12 Vad vill vi veta? •  Bakgrund –  Ålder, kön –  Vana av webben, vad gör de på webben, hur oGa, dator, mobil, webbplatser de tycker om –  Har de handlat på webben? eller skulle de kunna tänka sig aR göra det? –  Har de besökt någon webbplats för en blomsterbu]k? –  Hur oGa 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? 13 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 14 Intervjuer Utdrag av intervjuresultat, där det både varit fler frågor och intervjuade personer. Fråga intervju 1 Var brukar du hemma använda dator och Internet? intervju 2 hemma Hur oGa är du på 1 ]mme om webben? dan 2 ]mmar om 2 ]mmar om dan mer än 8 ]mmar eR par gånger 4 ]mmar om dan dan om dan per vecka Vad gör du på webben? Betalar Betala räkningar, ]Ra räkningar, på sidor om spela spel trädgård Brukar du gå in på Ibland sidor för någon blomsterbu]k? Nej intervju 3 på jobbet intervju 4 hemma & på jobbet intervju 5 hemma TiRa på personalinfo, uppdatera företagets webb Sköta bokningar, Betala arrangera möten, räkningar, skicka fakturor, chaRa med handlar kläder barnbarnen Vet inte Ja för aR beställa]ll konferenser på jobbet intervju 6 hemma & på jobbet … … Spela spel, handla på auk]on Ja då jag ska Nej köpa blommor för något speciellt ]llfälle … … Sammanställs ]ll en persona eller en persona (GarreR, 2011, s.49-­‐51) per iden]fierad målgrupp GarreR, J. J. (2011) The Elements of User Experience, 2nd edi0on, New Riders 15 "Persona"
Användarm odell r na fö o
s
r
e
En p ålgrupp
m
varje
Personas Åke Tidigare kund 67 år, tre barn och sju barnbarn Bor i andra änden av stan, men tycker aR 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 aR arbeta med Word och Excel. Brukar också gå ut på nätet och söka eGer sådant som han vill veta mer om. Vill gärna ]Ra på webben och få inspira]on, innan han går ]ll bu]ken och handlar. Stefan Ny kund 34 år, giG och har två barn Arbetar som försäljare i eR byggvaruhus. Använder inte datorn så mycket på jobbet, utan det är mest för aR leta eGer produkter i den egna bu]kens sor]ment. På fri]den använder han datorn och Internet för aR betala räkningar, ]Ra 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. Online-­‐kund Eva 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å oGa som hon vill. Arbetar på en konferensaläggning med aR 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 aR det är smidigt och spar mycket ]d aR handla olika varor på nätet. Det är vik]gt aR man tydligt ser den totala kostnaden och inte bara priset för varan. GarreR, J. J. (2011) The Elements of User Experience, 2nd edi0on, New Riders, s.49-­‐51 16 nalys
a
r
e
G
ltat e uppen u
s
e
R
ålgr
av m
Behov •  Behov som kommit fram i målgruppsanalysen – 
– 
– 
– 
– 
– 
– 
Se vad som finns i bu]ken. Se var bu]ken finns och öppezder. Se vad man kan beställa online. Se priser, även alla ]llägg som t.ex. leveransavgiG. Kunna beställa blommor online. Kunna använda webbplatsen både på dator och mobila enheter. Få erbjudanden, t.ex. vid helger. 17