Responsive Design. Projektplanlægning. Problemformulering. Målgruppeanalyse. Krav til website. Websitet skal være tilpasset følgende skærmstørrelser:

Transkript

1 Responsive Design Gruppe 5 Margrethe Hansen, Karina Rossing, Lucas Perch & Niclas Sand Projektplanlægning Som led i planlægning af vores projekt har vi anvendt en række projektplanlægningsværktøjer. Først har vi lavet en PBS til at definere vores produkt og de tilhørende leverancer. Dernæst har vi opdelt og uddelt de forskellige arbejdsopgaver ved hjælp af WBS. Sidst har vi lavet et Gantt-diagram til at disponere vores tid. Gantt-diagram med tilhørende PBS og WBS ses i bilagsmappen. Ligeledes kan de opstillede resource estimater ses i bilagsmappen. Problemformulering Hvordan kan vi tilpasse et eksisterende website til forskellige mobile devices ved hjælp af responsivt design? Krav til website Websitet skal formidle den nødvendige information til målgruppen ved udvikling af responsive design. Websitet skal indeholde en serie piktogrammer der understøtter navigationen. Ved hjælp af et tilmeldingsmodul skal websitet engagere den ledige markedsføringsøkonom til at komme et skridt nærmere videreuddannelse? Websitet skal være tilpasset følgende skærmstørrelser: Desktop: 1200 x 800 Tablet: portrait 768 x 1024 Tablet: landscape 1024 x 768 Smartphone: portrait 240 x 320 Smartphone: landscape 320 x 240 Websitet har til hensigt at formidle den rette information og henvende sig til den konkrete målgruppe. Som en del af formidlingsprocessen vil der på websitet være tilgængelig information om: - Markedsføringsøkonomers muligheder for videreuddannelser - De enkelte uddannelsers indhold og fremtidsmuligheder - Geografisk placering af uddannelsessteder - Ansøgningskrav og vejledning - Beskæftigelsessituationen for færdiguddannede markedsføringsøkonomer Målgruppeanalyse For at afdække forventninger, behov og præferencer hos modtageren af websitet, har vi udarbejdet en målgruppeanalyse. En målgruppeanalyse har til formål at afdække i hvilket omfang, der er behov for produktet og hvordan produktet skal udformes for at få den ønskede modtagelse hos målgruppen/brugeren. Målgruppen er det segment, som vores informationsside henvender sig til. I dette tilfælde ledige markedsføringsøkonomer. En analyse af dette segment er nødvendig for at opnå det ønskede mål med produktet hos modtageren. Analysen af målgruppen er baseret på statistisk materiale Beskæftigelsesundersøgelse for markedsføringsøkonomer af Gitte Damgaard, Erhversakademi Århus. Demografiske og socioøkonomiske kriterier - alder, uddannelse, erhverv/beskæftigelse og personindkomst - danner udgangspunkt for analysen. 1

2 Som resultat af målgruppeanalysen defineres vores målgruppe som unge færdiguddannede markedsføringsøkonomer, der ikke er i job, grundet den finansielle krise med deraf afledt arbejdsløshed. Gruppen dækker nyuddannede ledige markedsføringsøkonomer samt ledige markedsføringsøkonomer, der har været ledige i mere end to år og derfor ikke længere kan modtage dagpenge fra deres A-kasse. I form af flyers og plakater, placeret på relevante uddannelsessteder samt jobcentre, bliver der skabt fokus på informationswebsitet. Ved hjælp af information fra flyers og plakater på uddannelsessteder, der henviser til websitet, kan kommende dimittender imødekomme den stigende ledighed på arbejdsmarkedet og indhente information om videreuddannelse i god tid. Ved hjælp af en qr-kode på flyers og plakater, der linker direkte til websitet, gør det det nemmere for de ledige markedsføringsøkonomer at komme et skridt nærmere videreuddannelse. Implementeringplan Kampagnen skal henvende sig til fastlagte målgruppe via specifikke udvalget medier. De særligt udvalgte medier har til hensigt at øge besøgstallet på websitet. Følgende medier vil blive brugt som led i implementeringen: - Streaming på musiktjenester: lydreklame inkl. banner. - Relevante uddannelssteder: flyers, plakater - Jobcentre: flyers - Uddannelsesinstitutioner: flyers, plakater - Gratisaviser: Reklame - Facebookside: Side - Qr-kode: Link fra flyers og plakater til website Via annoncering i gratisaviser bliver websitet eksistens ligeledes tydeliggjort og tilgængeligt for mange unge. Ved oprrettelse af en side på facebook, kan de ledige udveksle erfaringer og gode oplevelser. De opnår også herigennem en følelse af fællesskab. Facebook er utrolig populært og det er derfor også et godt sted at skabe fokus og håb for de ledige. Vi har valgt at bruge ressourcer på få medier. Dette med formålet om at opnå en høj kvalitet og få det det maksimale udbytte af ressourcer. Via streaming på online musiktjenester kan vi ramme det unge segment, som vores målgruppe er basseret på. Dette kan starte opmærksomheden omkring websitet, og der skabes gennem banneret direkte link til websitet, fra musiktjenestens brugerflade. 2

3 Designargumentation Responsive design Websites er ofte designet og tilpasset faste rammer, der fungerer i forskellige browsere. Når brugeren benytter sig af andre mobile enheder, som f.eks. smartphones og tablets, kan det ikke-tilpassede design medføre, at brugeren finder sitet uoverskueligt og forlader siden grundet tvungen downloads af større filer og/eller tvungen benyttelse af zoomfunktion og scrolling. Responsivt design giver dermed brugeren et hurtigt og nemt overblik over indholdet på et website. Når en bruger, fra en smartphone eller tablet, besøger vores website, vil det hovedsageligt være fordi, personen søger hurtige oplysninger om muligheder, uddannelser, uddannelsessteder, tilmelding for infomøde og information om ansøgning. Når en bruger derimod besøger websitet fra en pc eller bærbar med høj hastighed, forventer brugeren bla. større billeder og grafer. Disse overvejelser har vi arbejdet med i forbindelse med udviklingen af det responsive design. Den kraftige vækst i antallet af danskere, som har en smartphone sammenholdt med de nyeste tal for brugen af smartphones (trafiktal) viser, at dette er en platform, som står lige foran sit gennembrud som kommerciel medieplatform. Noget som vi ser frem til og er parate til Væksten i antallet af tablets på bare et enkelt år er helt exceptionelt, og vi ser også en tendens til, at flere og flere danskere har deres helt egen personlige tablet Grundet disse undersøgelser, er det vigtigt, at brugeren af vores website opnår den bedste kvalitet i oplevelse af websitet uanset om brugeren benytter PC, bærbar computer, smartphone eller tablet. Websitet er tilpasset til følgende 5 skærmstørrelser: Desktop: 1200 x 800 Smartphone: portrait 240 x 320 Smartphone: landscape 320 x 240 Tablet: portrait 768 x 1024 Tablet: landscape 1024 x 768 Valget af skærmstørrelser er baseret på en stigende udvikling i brug af smartphones og tablets hos den definerede modtagergruppe. ( NAL_ pdf) 3

4 Mock-ups De udarbejdede mockups har fungeret som udgangspunkt for vores arbejde med det responsive design. Disse har dannet et godt grundlag og god grundforståelse for hvor meget indhold de enkelte skærmstørrelser kan vise. 4

5 Indhold Det har været et højt prioriteret fokusområde at opnå et så funktionelt site som muligt, gældende på alle skærmstørrelser. Gennemgående for den store skærmstørrelse har vi givet vores tekstboks en bredde på 70% i forhold til vores article tag. Dette er gjort med hensigten at gøre indholdet let overskueligt og fremme læseligheden. Ved de smallere skærmstørrelser ændres tekstboksens bredde til 95%, for at udnytte de mindre skærme. Navigation Der er foretaget nogle ændringer i websitets navigation siden udgangspunket. Menuen var tidligere placeret i øverste højre hjørne, men som led i tilpasningen til de mindre skærmstørrelser, er den erstattet af en gennemgående menubjælke, placeret under headeren. På denne måde kan menubjælken bevare dens placering på tværs af de forskellige skærmstørrelser, hvilket skaber en konsekvent genkendelighed. Samtidig fremstår menuens funktion tydeligt. På mockup-oversigten fremgår det desuden at boks 2 forsvinder ved mindre skærmstørrelser. I dette tilfælde er det fordi indholdet i boks 1 er prioriteret vigtigere end indholdet i boks 2. Indholdet i boks 2 er formularen hvor tilmelding til informationsmøde kan ske. Dette brugerregistreringsmodul er ved de mindre skærmstørrelser tilgængelig fra piktogrammet til information-siden. På statistik-siden hvor beskæftigelsessistuationen for ledige markedsføringsøkonomer kan ses, er ikke tilgængelig på den mindste skærmstørrelse. Dette valg er taget i og med at informationen på denne side er tilegnet den ekstra interesserede læser. Diagramoversigten på denne side er desuden ikke tydelig i så lille visning. På hvor-siden hvor der fremgår et danmarkskort med uddannelsesinstitutionernes placering ændrer sig også indholdsmæssigt ved de mindre skærmstørrelser. Det er vores vurdering at kortet ikke kunne bruges optimalt ved mindre skærmstørrelser. Drop-down oversigten, der ved de mindre skærmstørrelser erstatter kortet, gør det stadig let tilgængeligt at få den ønskede information. På de største skærmstørrelser ses menubjælken blot som en linje, med fire mulige valg. Der fremgår på intet tidspunkt en brødkrummesti, da der på de underliggende sider er en tilbage-funktion. Denne knap er indikeret med teksten Tilbage samt et piktogram. Gennemgående på websitet er der kun et niveau, hvilket også har ligget til baggrund for vores overvejelser om, hvorvidt vi skulle implementere en brødkrummesti. 5

6 Som det ses på billedet med de tre menudesign, er menuen på smartphones indikeret med et piktogram. Dette piktogram kender de fleste, da det går igen på utrolig mange websites. Piktogrammet illustrerer at der ved et touch foldes en menubar ud. I footeren på websitet ses fire piktogrammer. Siderne der kan tilgås via disse piktogrammer er en slags extra features, og indholdet er for den ekstra interesserede bruger. Footeren fungerer altså også som en slags sekundær menu. Animationer I det første projekt på andet semeste fremgik der ingen animationer. Ved udviklingen af det responsive design har vi valgt at tilføje enkelte. Vi har igennem arbejdet med jquery ændret den eksisterende menu og desuden tilføjet en drop-down-funktion på hvor-siden. Menuen på websitet er udarbejdet med jquery-metoden Toggle. Det relevante for Toggle er, at den skifter mellem skjul og vis -information for et valgt element. Piktogrammer Et piktogram er et symbol, som repræsenterer et objekt eller et begreb ved en illustration. Piktogrammer har til formål at indfange det generelle kendskab til visuelle symboler for forskellige kategorier af kommunikationsemner. Piktogrammer kan med fordel anvendes, hvis analfabetisme eller manglende sprogkundskaber gør sig gældende. Vores piktogrammer består af klare hvide tegninger på grøn baggrund. Kontrasten gør risikoen for fejltolkning mindre, idet brugeren ikke bliver forstyrret af for mange farver og detaljer. På den måde bevarer tegningerne en kvalitet, trods størrelsen, der sikrer brugeren en god oplevelse. Da piktogrammer kan tolkes forskelligt fra person til person, har vi valgt at udarbejde en række piktogrammer, som vi mener, at brugeren uden særlig tilvænning eller abstraktionsevne let kan aflæse. Alle piktogrammer vi har haft til overvejelse kan ses i bilagsmappen. Vi har brugt piktogrammer til at tydliggøre andre ting end dem der allerede figurerer i menuen. (facebook, info, kontakt, og statistik) Accordion er ligeledes en jquery-metode. Accordion har ved dette website været brugbart, i og med dets hovedfunktion er at arbejde med sammenklappende indholdspaneler til at præsentere information på en begrænset mængde plads. På hvor-siden har vi ændret listevisningen til et indholdspanel med fire oversigtsvalg. De fire valgmuligheder kan med drop-down-funktionen rulle ned ved specifikt valg. Ændringen på denne side har til hensigt at gøre den aktuelle side mere overskuelig og let tilgængelig på små skærmstørrelser. Information Symbolet - i et - repræsenterer begrebet information, som hyppigt bruges i denne sammenhæng, hvad end det er online/offline medier eller fysiske informationsstande. Statistik Statistik illustreres hyppigst med en graf eller et diagram. Piktogrammet er en illustration af et søjlediagram, som vi antager, at brugeren har kendskab til og genkender, da dette diagram ofte ses og anvendes i forbindelse med sammenligninger og præsentationer. 6

7 Argumentation for tilmeldings-modul Kontakt Symbolet - brevet - repræsenterer begrebet kontakt. I forbindelse med dette begreb er piktogrammer oftest illustreret som enten et brev, en telefon eller et snabel a. Trods den forældede form for kommunikation (brevet) og illustrationen af et gammeldags telefonrør, er de tre symboler alle lette at tolke for brugeren. Facebook Er brugeren bekendt med det sociale medie Facebook, er der ingen problemer i tolkningen af piktogrammet. Piktogrammet repræsenterer Facebook-ikonet ved illustration, som brugeren allerede har kendskab til. Tilmeldingsmodulet på websitet kan ved stor skærmstørelse tilgås via forsiden samt under piktogrammet der henviser til tilmeldings-siden. Ved de mindre skærmstørrelser kan modulet udelukkende tilgås via piktogrammet i footeren. Designet af modulet er udarbejdet med henblik på at virke troværdigt. Troværdigheden underbygges ligeledes af websitets design som helhed. Modulet på websitet er et tilmeldingsmodul. Vi har valgt ikke at lave et brugerregistreringsmodul, da websitet som udgangspunkt er et informationsgivende website. Via tilmeldingsmodulet kan brugeren tilmelde sig et informationsmøde omhandlende en specifik uddannelse. De indtastede data vil efter registrering blive behandlet, og brugeren vil modtage en mail med bekræftelse på deltagelse til informationsmøde. Brugertest Menu Symbolet for menu, der gør sig gældende i skærmstørrelsen for smartphones, er illustreret ved tre vandrette streger. Dette symbol er standardsymbol i forbindelse med navigationsmenuer på websites, der er tilpasset forskellige mobile enheder. Navigation Symbolerne - Pilene - understøtter henholdsvis forståelse af begreberne læs mere og tilbage. Disse symboler er standardsymboler i forbindelse med navigation på websites. Ganstertest Ved et hvert projekt, der berører optimering af brugervenlighed, er det ideelt at lave en afsluttende brugertest. En Gangstertest er en simpel metode til at teste websitets informationsarkitektur herunder den samlede struktur, værktøjer til at bevæge sig rundt i strukturen samt navngivning og sprog. For at sikre at websitet overholder de mest almindelige konventioner, har vi testet websitet på to forskellige skærmstørrelser - Desktop: 1200 x 800 og Smartphone - portrait: 240 x Brugertestne er udført på fire testpersoner, der delvist dækker målgruppen i form af alder. Pointresultat kan ses bilagsmappen 7

8 Testene viser, at et fælles problem, for de fire testpersoner, er den manglende placeringsindikator, der har til formål at fortælle brugeren, hvordan personen er kommet til den pågældende underside. Dette er tilfældet for begge skærmstørrelser. Vi har i gruppen ikke fundet det nødvendigt at integrere en brømkrummesti, da websitets struktur er meget simpel med få menupunkter, der går igen med samme placering på hver underside. Dette underbygges yderligere ved, at testperson 2 og 3 nævnte, at websitets brugervenlighed ikke blev forringet, på trods af den ikke-eksisterende placeringsindikator, der medfører de 0 point i testene. Resultatet af Gangstertesten er alt i alt tilfredsstillende. Løbende igennem designprocessen har testning af websitet været utrolig relevant. Vi har meget ofte testet løsninger på forskellige devices. Vi har ligeledes brugt responsinator.com til at se endelige løsninger i forskellige skærmløsninger. FURPS FURPS repræsenterer en model til klassificering af kvalitetsegenskaber - funktionelle og non-funktionelle krav. Funktionalitet Websitet skal fungere som en færdigudviklet informationside for ledige markedsføringsøkonomer. Websitet skal fungere i de nyeste versioner af alle browsere; Chrome, Opera, Safari, Firefox og internet Explorer. Websitet skal give brugeren kort og præcis information om videreuddannelse og skal være tilgængeligt og fungere på alle mobile enheder - Ingen flash-filer eller effekter, der er afgørende for visning af information. Websitet skal fortsat påvirke ledige markedsføringsøkonomer til at tage videreuddannelse. Websitets information har til formål at mindske arbejdsløsheden og forøge markedsføringsøkonomers muligheder på arbejdsmarkedet i form af en professionsbachelor. Brugervenlighed Websitets navigation skal være let og overskuelig. Websitets informationsarkitektur skal være logisk. Websitets design skal være simpelt og klart med fokus på sitets indhold, der underbygger budskabet. Webjournalistik - Alt tekst på websitet skal være tilpasset webmediet. Statistiske modeller skal fremstå interessante, klare og let forstålige for brugeren. Modellerne må ikke overses. Målgruppen skal være tydelig. Websitet skal henvende sig til og tilpasse sig målgruppen æstetisk og funktionelt. Websitet skal være tilgængeligt fra og tilpasset til flere mobile enheder. Pålidelighed Statistisk indhold skal fremstå troværdigt - Statistiske modeller skal bygges på pålidelige kilder. Statistisk indhold og øvrig information kræver vedligeholdelse/opdater- 8

9 ing, så brugeren finder informationen relevant/nyttig. Forældet data og forkert information skaber upålidelighed. Designet skal fremstå troværdigt.hvis serveren på websitet går ned, vil det blive behandlet omgående. Ydelse Websitet skal være tilgængeligt 24 timer i døgnet, således at brugeren ikke får problemer med at finde eller genfinde information opdateringer sker offline. Vedligeholdelse Websites statistiske indhold skal opdateres, så snart nyt data er beregnet og tilgængeligt. Websitet skal opdateres løbende med nye informationer, såsom nye uddannelser, muligheder og eventuelle ændringer i uddannelser. Med fokus på målgruppen, bør den æstetiske del af websitet opdateres løbende sådan, at målgruppen fortsat rammes bedst muligt. 9

10 Kilder Bøger Jacobsen, J. K. (2011). 29 spørgsmål (2. udgave). Samfundslitteratur Gregersen, O. & Wislet-Poulsen, I. (2009). Usability (1. udgave). Grafisk Litteratur Wisler-Poulsen, I. (2012). 20 Designprincipper (1. udgave). Grafisk Litteratur Fischer, L. H. (2010). Digital Media Management (3. udgave). Nyt Teknisk Forlag Links NAL_ pdf