1ME321 Webbteknik 1 Lek0on 3 HTML & Projektstrategi Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se
Agenda Veckoplanen Vecka 38 HTML UppgiG U1 U1=L1+L2+L3 UppgiG U3 Läsanvisningar Länklista Tabeller Strukturelement 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 2 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
Introduk]on av er exempel som vi kommer ar ta upp genom hela kursen 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 Vilka mål har beställaren med webbplatsen? Studera området Terminologi, produkter, kategorisering, etc. Liknande (konkurrerande?) webbplatser Webbplatser med online- försäljning Vilken målgrupp har vi? En eller flera? 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? Meod för analys Intervjuer Fältstudier Sammanställning av resultat Personas (användarmodell) Behov 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
Resultat eger analys av syge 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 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 Vad vill vi veta? Tidigare kunder Online- kunder Nya kunder Hur får vi reda på det? Sammanställning av resultat 12
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? Vad vill vi veta? 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
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 oga är du på webben? 1 ]mme om dan 2 ]mmar om dan 2 ]mmar om dan mer än 8 ]mmar om dan er par gånger per vecka 4 ]mmar om dan Vad gör du på webben? Betalar räkningar, ]Ra på sidor om trädgård Betala räkningar, spela spel TiRa på personalinfo, uppdatera företagets webb Sköta bokningar, arrangera möten, skicka fakturor, handlar kläder Betala räkningar, chara 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 ar beställa]ll konferenser på jobbet 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 "Persona" Användarmodell GarreR, J. J. (2011) The Elements of User Experience, 2nd edi0on, New Riders 15
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 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 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. Ny 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. Online- kund GarreR, J. J. (2011) The Elements of User Experience, 2nd edi0on, New Riders, s.49-51 16
Resultat eger analys av målgruppen 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