zoo.dk - redesign webdesign og webkommunikation forår 2012 underviser: Sigurd Trolle Gronemann

webdesign og webkommunikation forår 2012 underviser: Sigurd Trolle Gronemann zoo.dk - redesign Signe Gry Braad Anette Meldgaard Andersen Mette Kragh Wismann Mette Solgaard Frøst 1

Indholdsfortegnelse 1 Indledning (mkwi) side 3 2 Problemformulering/problemstilling (msol) side 3 3 Metode (amel) side 3 4 Desk Research (sgpe) side 4 4.1 Analyse af Zoo-hjemmesider (sgpe) side 4 4.2 Web-inspiration (mkwi) side 6 4.3 Kontakt til Zoo København (msol) side 7 5 Usability 6 (amel) side 7 6 Målgruppe 9 (sgpe) side 9 7 Personaer 10 (mkwi) side 10 8 Card sorting 13 (msol) side 12 9 Wireframes 16 (amel) side 15 10 Responsive design 18 (sgpe) side 16 11 Visuelt udtryk (mkwi) side 18 12 HTML og CSS 20 (msol) side 19 12.1 Arbejdsmetode (msol) side 19 12.2 Generel opbygning (amel) side 20 12.3 Media querias (sgpe) side 20 12.4 Dynamiske elementer (mkwi) side 21 12.5 Slidere (msol) side 21 13 Konklusion (amel) side 22 14 Perspektivering (sgpe) side 23 15 Litteraturliste side 24 16.0 Bilag side 26 mkwi: Mette Kragh Wismann msol: Mette Solgaard Frøst amel: Anette Melgaard Andersen sgpe: Signe Gry Braad Pedersen 2

1 Indledning 2 Problemformulering/problemstilling Zoo København er en populær og traditionsrig attraktion med et stærkt brand. Hvert år har haven mere end en million gæster, og i 2011 blev www.zoo.dk besøgt af 1.135.293 personer 1. Desværre mener vi ikke, at haven udnytter sit potentiale på nettet godt nok. Siden fremstår uoverskuelig, teksttung og de samme oplysninger optræder flere gange. Derfor har vi valgt at arbejde med redesign af www.zoo.dk. Vores ambition er at lave en enkel hjemmeside, som også fungerer på mobile platforme som tablets og smartphones. I vores øjne er zoo.dk oplagt til det formål, fordi hjemmesiden på den måde også kan fungere som en slags guide, når gæsterne bevæger sig rundt i haven. Zoo København er et sted, man kommer for at få en oplevelse - et dynamisk og levende sted. Det vil vi gerne have afspejler sig i vores design, og vi synes, det er en spændende designmæssig udfordring, både hvad angår indhold, teknik og visuelt udtryk. Vi har prioriteret, at arbejde med den del af siden, som henvender sig til besøgende, da det i vores øjne er den mest vigtige målgruppe. 1 Zoo Københavns årsrapport 2011 Hvordan kan vi skabe en hjemmeside for Zoo København, som på en nytænkende og intuitiv måde både understøtter brandet og sikrer brugerne den nødvendige information, og som også kan bruges på varierende skærmstørrelser? 3 Metode Den nuværende zoo.dk er teksttung og præget af intern og specialiseret information, som vi ikke mener, den almindelige bruger har behov for at se. Derfor stod det hurtigt klart for os, at en stor del af vores arbejde ville handle om at sætte målgruppen i højsædet og forenkle siden. Derfor har vi udviklet to personaer, som har fungeret som ledesnore i opgaven. Fordi zoo.dk er så fyldt med informationer - og kan virke en smule uoverskuelig - lavede vi en omfattende card sorting af hele siden. Det skabte overblik og hjalp os med at prioritere indholdet på den nye side. Da vi har arbejdet med mobile first (Wroblewski, 2011), udvik- 3

lede vi først wireframes til smartphones, derefter tablets og bærbare. Vores wireframes har gennem hele forløbet fungeret som en rød tråd, som vi flere gange vendte tilbage til. Vi har desuden besøgt flere hjemmesider for zoologiske haver - både i Danmark og i udlandet. Det har vi primært gjort for at få inspiration til gode løsninger men også for at få et indblik i, hvilke tendenser der går igen. Vi har en iterativ arbejdsproces, hvilket er naturligt i de fleste designopgaver, man vil oftest i processen opnå indsigt, som betyder, at man tilretter projektet. Det vil sige, at vi i hver fase af opgaven gennemløber en form for miniudgave af vandfaldsmodellen 2. I den traditionelle vandfaldsmodel afsluttes hver fase, før man påbegynder den næste. I slutforløbet har vi lavet en tænke-højt-test af det nye site til Zoo København. 4 Desk Research Indledende skrivebords-research. 4.1 Analyse af zoo-hjemmesider Da ingen af os har stor viden om hvilke elementer, der skal være på en hjemmeside for zoologiske haver, besøgte vi et hav af hjemmesider fra ind- og udland i startfasen af vores arbejde. Vi var interesserede i at finde ud af, om der er en form for konsensus omkring, hvordan en hjemmeside skal se ud: Hvad er traditionelt og hvad er avanceret? Den amerikanske designer, Raymond Loewy, er ophavsmand til de såkaldte MAYA-principper 3 (Most Advanced Yet Acceptable) der går ud på, at der er grænser for, hvor nyskabende man kan være, hvis man også skal have brugerne med sig. Den viden havde vi i baghovedet, når vi så nærmere på siderne. I researchen fokuserede vi desuden på, hvilke virkemidler der er brugt som eksempelvis hierarki, dynamik, farver, informationsmængde og valgmuligheder. Vi valgte nogle specifikke zoo-forsider fra ind- og udland ud, som vi gik mere i dybden med: 2 http://da.wikipedia.org/wiki/iteration 3 http://da.wikipedia.org/wiki/raymond_loewy 4

Knuthenborg Safaripark Zoo Barcelona Los Angeles Zoo Zoo Berlin Zoo Praha Zoo København Alle seks sider er baserede på et layout med en fast bredde på cirka 900px. Baggrunden i hele skærmens bredde er udnyttet i varierende grad; fra ingenting eller svag farve, til tung farve eller et visuelt fængende billede. Tre af siderne kan ses i deres fulde længde på en normal skærm - på resten skal man scrolle for at komme til bunden. De fleste sider benytter farver indenfor samme farvetone/hue, og der er ikke store kontraster. Los Angeles Zoo 4 har de klareste farver, som bliver fremhævet yderligere af at stå på en hvid baggrund. Zoo Berlin 5 har en meget dominerende grøn farve. Der er en del dynamik på siderne: To Zoo s har lyd, Knuthenborg 6 har tre korte film, som kører i ring, to har billeder, der skifter i en boks og Zoo Praha 7 har små, grafiske elementer som bevæger sig hen over skærmen. 4 Se bilag 3 5 Se bilag 6 6 Se bilag 2 7 Se bilag 7 Zoo København 8 har den mest informationstunge forside. Brugeren kan træffe 35 valg mod mellem 10 20 på de andre sider. Siden bærer præg af at være bygget op efter deres egen virksomhedsstruktur, hvor de løbende har tilføjet punkter efter behov. Hierarkierne på de seks sider er generelt tydelige: en topbar med pulldown menuer, en primær boks og en undergruppe med sekundære bokse. Desuden benyttes gestaltloven om forbindelse, og en masse mindre vigtige punkter er knyttet sammen i en grafisk svag boks (typisk grå) i bunden af siden. Der var en del kategorier, som gik igen på siderne: information til skoleklasser, fremhævelse af sponsorer, fremhævelse af tiltag for naturbeskyttelse og så selvfølgelig de åbenlyse som information om billetter, åbningstider osv. Fotos optræder hyppigt, og specielt Los Angeles Zoo gør sig bemærket ved at have en fotografisk høj kvalitet. Generelt har siderne horror vacui 9, og der er ikke meget luft omkring elementerne. Zoo Praha og Zoo København er mest pakkede, mens Los Angeles Zoo har den mest hvide/tomme baggrund. På baggrund af vores analyse konkluderede vi, at der hersker konsensus om, hvilke elementer, der skal være til stede på en 8 Se bilag 1 9 http://en.wikipedia.org/wiki/horror_vacui 5

hjemmeside for zoologiske haver uanset hvor i verden, haven befinder sig. Det betyder, at der er visse bærende elementer, som brugerne forventer at finde på siden. Det drejer sig eksempelvis om billetpriser, åbningstider, kalender og billeder af dyr. Ingen af siderne udstråler derfor det, vi går efter i vores design. De er kompakte, relativt fastlåste, og det traditionelle boks-layout hersker. Derfor gik vi andre veje i vores jagt på inspiration. 4.2 Web-inspiration Desuden var vi alle meget begejstrede for det slideshow, som kører horisontalt på siden, og vi blev inspireret til at forsøge at lave noget lignende. www.beetle.de er hjemmeside for Volkswagens beetle. Det er en utroligt sej side, som udnytter skærmen fuldt ud, og den har blandt andet inspireret os i forhold til at forstå, hvordan en lang side også kan se ud. www.oljenorge40aar.no er en hjemmeside lavet i anledningen af et jubilæum og vi synes, at siden er et godt eksempel på, hvor- Vi har gennem hele forløbet brugt meget tid på at besøge inspirerende hjemmesider. Det har specielt været brugbart i forhold til vores arbejde med responsive design og mobile first, hvor vi er stødt på utroligt mange gode løsninger. Et udvalg af de sider, som inspirerede os mest - og som vi løbende vendte tilbage til er: www.nordkapp.fi, der ejes af et finsk webbureau. Det er, i vores øjne, en super side, som indeholder mange elementer, vi har forsøgt at indarbejde i vores projekt. Eksempelvis er den bygget op som én lang side, og man kommer hurtigt tilbage til toppen ved hjælp af en lille knap i højre side. www.gravitatedesign.com er hjemmeside for et canadisk webbureau. Her er billede til kant og velfungerene responsive design. 6

dan man kan udnytte hele skærmen og undgår at bruge bokse og menuer. Vi har desuden brugt www.mattkersley.com/responsive/ til at teste sidernes layout på forskellige skærmstørrelser. 4.3 Kontakt til Zoo København Vi forsøgte tidligt i forløbet at komme i kontakt med Zoo København, da vi var interesserede i at få svar på forskellige praktiske oplysninger: Hvor mange sidevisninger har de, hvad er resultatet af de brugerundersøgelser, de har fået lavet, hvad er tankerne bag opbygningen af hjemmesiden osv. Vi forsøgte både lykken hos en PR-medarbejder, hos en medarbejder i Skoletjenesten og en administrativ medarbejder. Desværre gav det ikke pote, og vi baserer i stedet vores viden på årsrapporterne fra 2010 og 2011. 5 Usability Den anerkendte definition på usability er: I hvilken grad et produkt kan anvendes af en specifik bruger til at opnå specifikke mål funktionelt, effektivt og tilfredsstilende i en specifik brugskontekst. (Gregersen og Wisler-Poulsen, 2009) I vores problemformulering skriver vi, at vi gerne vil lave en intuitiv side, som både er tilfredsstillende og funktionel. Det betyder, at vi har haft fokus på usability gennem hele forløbet, og vi har prøvet at definere, hvad en tilfredsstillende web-oplevelse ville være for vores to personaer og prioriteret indholdet ud fra det. Det grundlæggende mål i arbejdet med usability er, at brugerne skal kunne finde den information, de søger, så hurtigt som muligt. (Gregersen og Wisler-Poulsen, 2009) Derudover kan man ønske sig, at siden f.eks. er æstetisk flot, at den signalerer et givent brand og at brugerne inspireres til at gå på opdagelse. Via privat netværk til Zoo København fandt vi ud af, at brugerne oftest søger efter ordene billetter og åbningstider på zoo.dk. Derfor har vi prioriteret, at netop disse praktiske oplysninger er tydelige på siden. 7

I virkeligheden kan man designe hjemmesider, som man vil. Men hvis hvis man har som mål, at brugerne rent faktisk skal læse, forstå og bruge siden, så er opbygningen altafgørende. Hvis de ikke finder det, de leder efter, går brugerne hurtigt videre til et andet sted, (Gregersen og Wisler-Poulsen, 2009) hvilket ikke umiddelbart er muligt for besøgende på www.zoo.dk. Forfatteren og usability-konsulenten, Steve Krug, opfordrer webdesignere til at lave enkle og fokuserede hjemmesider. Det er altså ikke nok at kunne sætte et flueben ud for hvert af punkterne på en af de mange usability-tjeklister, som florerer på nettet, og så tro, at den er hjemme. (Krug, 2006) Hans hovedpointe er, at siden skal være selvfølgelig/self-evident. Det vil sige, at en gennemsnitsbruger, alene ved at kigge på siden, skal kunne regne ud, hvor man finder hvad. Hvis siden indeholder store informationsmængder, som betyder, at det ikke er muligt at lave den self-evident, skal man i stedet forsøge at gøre den selv-forklarende/self-explanatory. Det vil sige, at der ikke må være elementer på siden, som giver anledning til tvivl og sekundære valg hos brugeren. For at leve op til de pointer har sidens visuelle hierarki stor betydning. Steve Krug definerer tre virkemidler, beslægtede med gestalt-lovene: 1. Fremhævelse: Jo vigtigere elementet er, jo mere skal det fremhæves. 2. Gruppering: Emner, der er relaterede visuelt, er også indholdsrelaterede. 3. Underdeling: Emner der visuelt er under et andet. Med udgangspunkt i ovenstående har vi valgt at give de informationer, som besøgende oftest søger efter (priser og åbningstider) en central placering øverst på siden. Desuden har vi placeret en nyhedsboble centralt på siden. Det er tanken, at denne nyhed ofte skiftes ud, så indholdet skifter, hvis en bruger med jævne mellemrum besøger zoo.dk. Nyheden skal være af en sådan art, at brugeren får lyst til at læse mere og på sigt besøge haven. Syv steder har vi valgt at skære siden over ved at sætte en meget tynd, prikket streg. Det har vi gjort for at gruppere indholdet på siden og give den en visuel struktur, så sammenhængen bliver tydeligere. Vi har afprøvet forskellige stregfarver og tykkelser for at finde det rigtige udtryk, så stregen grupperer indholdet, uden den bliver dominerende og ødelægger fornemmelsen af, at det er én lang side. En andet vigtigt element i usability handler om at gøre klik nemme. (Krug, 2006) 8

Et nemt klik kræver (næsten) ikke bevidsthed, og man har en fornemmelse af at være på rette spor. Hvis man efterlever disse krav, vil man ende op med en dyb side med få valg på forsiden i modsætning til en bred side med mange valg. en rigtig god øvelse. Vi har dog udarbejdet en plan for, hvordan en mulig usability test kunne se ud 11. Forsiden på det originale zoo.dk er fyldt med links og indgange til forskellige undersider. Det vil vi gerne ændre på, og vi har derfor arbejdet med at begrænse de klikbare elementer på vores nye side. Det er afgørende for forståelsen af usability, at man også har kendskab til, hvordan mennesker generelt interagerer med digitale produkter. (Gregersen og Wisler-Poulsen, 2009) Eksempelvis skal man være opmærksom på, at vi ikke læser websider på samme måde, som vi læser printet tekst. Den kendte usability ekspert, Jakob Nielsen, har udført flere eyetrackingstudier 10, der viser, at testpersonerne skimmer fra venstre til højre, dernæst ned over siden i et F-mønster, mest mod højre i toppen, næsten kun i venstre side i bunden. Generelt skimmer vi på nettet, det vil sige, at elementer, som fremstår tydeligere end andre, eksempelvis overskrifter, linktekst, bold-tekst og bullet-lister, bliver brugt som pejlemærker. 6 Målgruppe Den franske sociolog Pierre Bourdieu mente, at individers kulturelle præferencer, har betydning for, hvordan de forstår et budskab, de bliver præsenteret for. (Rasmussen og Fischer 2008) Og det er netop én af grundene til, at man ikke må glemme målgruppen, når man arbejder med hjemmesiden. Teksten og opbygningen på siden vil nemlig blive opfattet forskelligt afhængigt af, hvem man er. Det betyder, at hvis man ønsker at ramme en bestemt målgruppe, så skal man bruge kræfter på at sætte sig ind i, hvad der er vigtigt for det pågældende segment. Vi ved fra Københavns Zoo s årsberetning, at havens primære målgruppe er børnefamilier i hovedstadsområdet samt turister fra Danmark og Norden. På baggrund af den (noget begrænsede) viden har vi skabt to personaer, som repræsenterer begge grupper. Vi har, af tidsmæssige årsager, ikke udført en usability test af vores hjemmeside, men der er ingen tvivl om, at det ville være 10 http://www.useit.com/alertbox/reading_pattern.html 11 Se bilag 9 9

7 Personaer En persona er en brugermodel, som kan hjælpe os med at sætte os ind målgruppens tanker og handlinger, og på den måde guide os på rette vej i arbejdet med hjemmesiden. I en ideel verden er personaer skabt på baggrund af eksempelvis etnografiske studier, interviews eller observationer af potentielle brugers ageren adfærd. Disse data danner derpå grundlag for en fiktiv person med personlighed og empati. I vores tilfælde - hvor tiden var knap - benyttede vi de oplysninger, vi kunne få fra Zoo København til at skabe to provisional personas også kaldet ad hoc personaer. (Cooper, A et al. 2007) Ad hoc personaer er ikke optimale, men vi er enige med Allan Cooper i følgende betragtning: Using provisional personas is better, than no user model at all. Vi har udformet vores personaer med både demografiske, socioøkonomiske og kulturelle baggrundsvariabler, for at danne et så dækkende billede, som det aktuelt er muligt at lave. (Rasmussen og Fischer 2008) Persona 1 Kathrine er 32 år, hun bor på Vesterbro i en andelslejlighed, som hun har købt sammen med sin kæreste, Andreas. Sammen har de børnene Sally på seks år og Otto på fire år. Kathrine læser dansk og er i gang med at skrive speciale. Andreas arbejder med byplanlægning i Københavns kommune. I sin fritid kan Kathrine godt lide at fotografere, og hun har tidligere været meget aktiv sportsdykker. Hun bruger ofte nettet til informationssøgning og følger med i en del blogs. Hele familien har årskort og besøger Zoo København ca. seks til syv gange om året og både i weekender, ferier og på hverdage uafhængigt af årstiden. Kathrine bruger zoo.dk før hvert besøg. Hun kigger eksempelvis efter spændende arrangementer og nye dyreunger, som de skal se på deres tur rundt i haven. Familien kender haven så godt, at de langt fra kommer rundt til alle dyr hver gang. I stedet udvælger de nogle enkelte favoritsteder, hvor de til gengæld tilbringer længere tid. Kathrine tilhører det moderne fællesskabsorienterede segment i Kompas-modellen. Et segment, som blandt andet er kendetegnet af personer med en akademisk uddannelse, der bor i storbyen og er hyppige brugere af computere og internet. (Rasmussen og Fischer 2008) Persona 2 Peter er 67 år og pensioneret tømrermester. Han bor i Kolding sammen med sin kone, skolelæreren Kirsten, som han har været gift med i 42 år. 10

Peter abonnerer på Jydske Vestkysten og lytter dagligt til P4 syd. Han holder meget af at gå på jagt og lave god mad serveret sammen med franske rødvine. Ferierne tilbringer Peter helst i Frankrig, hvor han kører ned sammen med Kirsten. De har to børn; Lars på 41 år og Henrik på 38 år. Lars bor stadig i Kolding og har overtaget tømrervirksomheden. Henrik bor i Virum med sin kone og de to døtre; Laura på syv år og Asta på 10 år. Han er tandlæge og har egen praksis. Peter kommer ca. hver 2. måned for at hjælpe med at passe de to piger, og ca. én gang om året tager han pigerne med på til Zoologisk Have. Når de er i haven, vil Peter gerne se det hele, så han føler, han får noget for pengene. Hvis han skulle vælge, er det dog de afrikanske savannedyr, som står ham nærmest. Han bruger ikke nettet ofte, og hvis han endelig gør, synes han hurtigt, at det er uoverskueligt og mister tålmodigheden. Han har besøgt zoo.dk for at lede efter information om parkering og åbningstider. Peter tilhører det individorienterede segment i Kompas-modellen, som er kendetegnet af personer, som bor vest for Storebælt, har en erhvervsuddannelse og læser lokalaviser. (Rasmussen og Fischer 2008) På vegne af Kathrine og Peter har vi udarbejdet nogle specifikke ønsker til, hvordan zoo.dk kan fungere bedre. Kathrine ønsker sig: Inspiration til nye opdagelser i den velkendte have med hjælp fra mobilen. Let tilgang til nyheder og dagens begivenheder Forslag til ruter, f.eks. Dyreunger eller Polarrute At kunne få fakta om zoo på sin smartphone, mens hun går i haven. Peter ønsker sig: En let og overskuelig side Oversigt over parkeringsforhold og åbningstider Et kort over haven, som han kan printe hjemmefra Søger specifikt på emner og vil gerne læse i detaljer om f.eks. byggeriet af den arktiske ring eller fakta om forskellige dyr Da det ikke var muligt at teste vores dummy-side på testpersoner, har vi i stedet udtænkt nogle scenarier med vores to personaer. Vi har diskuteret, hvordan Kathrine og Peter vil bruge Zoo Københavns hjemmeside før, under og efter deres besøg i Zoo. Vi fandt frem til, at Katrine vil bruge sin mobil hjemmefra til at læse nyheder og se dagens program. Derudover vil hun f.eks. bruge mobilen i Zoo til at prøve en interaktiv rute sammen med børnene og til at finde hurtige oplysninger om de enkelte dyr, 11

hvis børnene spørger om noget, hun ikke kan svare på. Peter vil besøge zoo.dk fra sin stationære computer, før han tager hjemmefra. Han har hverken smartphone eller tablet. Han vil kigge på åbningstider og parkeringsforhold. Det, som har fanget hans interesse under besøget i haven, tjekker han op på, når han kommer hjem. han/hun synes giver mening. I en lukket card sorting er kategorierne navngivet og fastlagte på forhånd, og det er testpersonens opgave at fordele sideindholdet i disse kategorier( Spencer & Warfel 2007). Vi startede med at foretage en åben card sorting, hvor vi selv udgjorde testpersonerne. Vi er godt klar over, at dette ikke er ideelt, men vi mener alligevel, at øvelsen kan bruges. 8 Card sorting Card Sorting er en organiseringsøvelse, som blandt andet kan hjælpe informations arkitekter samt personer i lignende stillinger med at få styr på den hjemmeside, de arbejder med. En veludført card sorting kan eksempelvis besvare spørgsmål som: Hvilke informationer skal prioriteres højest, og hvor giver det mest mening, at de pågældende informationer bliver placeret (Spencer & Warfel, 2007). Card sorting er særligt nyttigt i forbindelse med design og redesign af hjemmesider, og det er derfor et oplagt værktøj for os. I en åben card sorting bliver en eller flere testpersoner præsenteret for kort med sideindhold, som de skal inddele i kategorier Det nuværende zoo.dk er, som tidligere nævnt, meget tungt og omfangsrigt 12, og vores ambition om at gøre siden mere enkel og ligetil virkede næsten uoverskuelig i vores indledende arbejde. Vores håb var, at en card sorting-øvelse ville skabe det nødvendige overblik og hjælpe os med at målrette informationerne på siden bedre. Efter vi havde noteret ALLE elementer på zoo.dk ned på hvide papirslapper, begyndte vi sorteringsarbejdet 13. Undervejs diskuterede vi frem og tilbage, og vi havde især fokus på, hvilke elementer, der skal placeres på forsiden. Samtalen drejer sig meget om, hvilke placeringer, der virker logiske, og hvor vi selv ville lede. Efter en frasortering af gengangere fordelte vi kortene på seks 12 Site map Zoo.dk:http://www.zoo.dk/sitemap.aspx 13 Bilag 11 billede fra card sorting 12

grupper: Om Zoo: 56 punkter som eks. direktion, job i zoo, osv. Forside: 16 punkter som eks. nyheder, dagens program osv. Praktisk info: 13 punkter som eks. parkering, billeter osv. Dyr og hus: 29 punkter som eks. abegrotten, hyppige spørgsmål om dyr osv. Oplev Zoo: 16 punkter som eks. rundvisninger, rid på en pony osv. Skoletjenesten: 23 punkter som eks. biologisk værksted, undervisningsmateriale osv. Oven på vores åbne card sorting foretog vi en mindre lukketcard sorting med to testpersoner. Testpersonerne var enige i vores kategorisering i cirka 70 procent af tilfældene. Der var dog lidt forvirring i forhold til kategorien Om Zoo, hvor rigtigt mange elementer blev placeret. Hvis man fulgte denne tankegang ville Om Zoo hurtigt blive proppet til randen, og vi ville få brug for en masse underkategorier. I stedet har vi lavet en kategori med navnet Virksomheden Zoo. Så bliver det forhåbentligt mere tydeligt, at det er her, man finder information som jobmuligheder, årsberetninger og pressekontakt - og ikke et sted, man som besøgende nødvendigvis behøver at bevæge sig hen. De syv vigtigste punkter vi kom frem til på baggrund af vores card sorting: Det skal være muligt at vælge mellem tre hovedsider: Virksomheden Zoo, For Besøgende og Skoletjenesten. Vi vil udelukkende fokusere på siden For BesøgendeVi vil samle en masse forskellige informationer i kortet over Zoo København. Nyheder fra sidst år hører ikke hjemme på siden. Reklamér for Facebook-siden frem for tilmelding til nyhedsbrev. Drop zoo-tv og link til kanal på youtube. Generelt samle information, hvor det hører til - i stedet for at det ligger spredt ud over hele siden som nu. Alt i alt er card sorting en virkeligt god og, bogstaveligt talt, håndgribelig metode til at skabe overblik. Og mange vigtige beslutninger blev truffet i løbet af processen. 13

Billed 1: Wireframe Billed 2: Wireframe 14

9 Wireframes Wireframes er en simplificeret oversigt over, hvad der skal være på den endelige hjemmeside, og de fungerer som en ledestjerne i arbejdet. Ordet wireframe kan oversættes til trådramme. Det dækker over, at man arbejder med simple illustrationer, der opridser, hvad der skal være hvor på siden - uden at gå for meget i detaljer med det visuelle udtryk. Der findes en del wireframe-værktøjer på nettet, og man kan også bruge et simpelt program som PowerPoint. Vi har valgt at arbejde med pen og papir, hvilket giver en meget levende og demokratisk proces, hvor alle kunne deltage og en ny tegning hurtigt kunne ridses op. Vi arbejdede med low-fidelity, hvilket vil sige, at vi koncentrerede os om, hvor tingene skulle placeres på siden og ikke diskuterede ting som farver, typografi osv. Vi lavede desuden kun en enkelt wireframe til hver skærmstørrelse, da vi netop arbejder med én lang side. Da vi er meget inspirerede af tankerne om mobile first 14, startede vi med at lave en wireframe til smartphones med en skærmstørrelse svarende til en iphone. Vi lavede flere forskellige wireframes, indtil vi nåede frem til en endelig model, som vi alle var tilfredse med. Derefter gik vi videre til at lave en wireframe til bærbare/tablets. De wireframes, vi lavede, blev hevet frem flere gange i vores videre arbejde, hvis der opstod tvivlsspørgsmål i forhold til specifikke elementers placering. Hvis vi skulle overlevere vores wireframes til andre, som derefter skulle arbejde videre med dem, ville vi på baggrund af skitserne lave en digital version, så de blev mere forståelige og entydige. Ifølge vores problemformulering er vores mål, at zoo.dk skal være nyskabende og intuitiv og kun give brugerne den information, de rent faktisk har behov for. Det forsøgte vi at opnå ved at tage udgangspunkt i vores card sorting og den efterfølgende mini-bruger-test under udarbejdelsen af vores wireframes. 14 Se afsnit 10 15

10 Responsive design Take advantage of the enormous growth in mobile internet usage and find new ways for people to use our websites and applications. (Wroblewski, 2011) Sådan lyder opfordringen fra forfatteren og webudvikleren Luke Wroblewski i hans bog, Mobile First. Og det er netop det, som er et af målene med denne opgave. I vores problemformulering skriver vi, at det nye zoo.dk skal tilpasse sig alle skærmtyper og størrelser automatisk. Dette kaldes også responsive webdesign. Responsive webdesign er i kraftig fremgang i takt med at antallet af smartphones og tablets vokser 15, og nye tal viser, at selv inden for hjemmets fire vægge, hvor computeren ellers er inden for rækkevidde, sker en stigende andel af vores internetbesøg via en mobiltelefon. (Wroblewski, 2011) Vi ønsker at udnytte de muligheder, som denne udvikling lægger op til og vi er inspireret af det følgende citat fra den grafiske designer, Mark Boulton: 15 http://www.comscore.com/press_events/press_releases/2012/3/comscore_reports_ January_2012_U.S._Mobile_Subscriber We need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out. 16 Mark Boultons pointe er, at vi indtil nu har opfattet internettet som et fast medie, hvor man har udviklet layouts, som passede til rammen på en standard computerskærm. Men hvis vi vil følge med udviklingen, må vi ændre vores traditionelle opfattelse og begynde at tænke i fleksibelt design, der passer til den moderne internetbruger, som både går på nettet fra mobilen, tv et og ipad en. Vi synes, det er meget interessant at redesigne Zoo Københavns hjemmeside med udgangspunkt i brugeren, indholdet og den lille skærmstørrelse. Vi kan forestille os flere oplagte muligheder, hvor man eksempelvis kan søge informationer om dyr, begivenheder, guidede ture og så videre fra sin telefon, mens man fysisk befinder sig i haven eller er i færd med at planlægge et besøg. I mobiludgaven har vi valgt at nedprioritere virksomheden zoo og skoletjenesten, da vi vurderer, at det primært er besøgende der vil tilgå zoo.dk fra mobilen. Vi er desuden meget opmærksomme på, at der skal være nem adgang til oplysninger som åbningstider, dagens program, 16 http//wwwmarkboulton.co.uk/journal/comments/a-richer-canvas 16

nyheder, spisesteder, parkeringsforhold og så videre. I mobiludgaven har vi dog fjenet cirklerne og dermed åbningstider og billetpriser fra toppen af siden. Knappen med praktisk info har nu fået så central en placering, at vi mener, at brugerne intuitivt vil trykke her for at fi nde åbningstider og priser. Der er dog også udfordringer ved mobile fi rst -udviklingen. En af dem går ud på, at folk typisk kun har den halve opmærksomhed på telefonen, og dermed altid er klar til at vende opmærksomheden mod noget andet. Wroblewski beskriver det på følgende måde: One eyeball - one thumb (Wroblewski, 2011) Det betyder, at vi skal simplifi cere designet af siden både i forhold til indholdet og det visuelle aspekt. Med hjælp fra vores card sorting og vores personaer har vi forsøgt at skære helt ind til benet og hele tiden stillet spørgsmålet: hvad er vigtigt for brugerne? Når man arbejder med sidens visuelle udtryk på en mobil, er det desuden vigtigt at huske på, at folk ofte manøvrerer med højre tommel- eller pegefi nger. Derfor skal felterne være forholdsvis store, så de er nemme at markere. Eksempelvis skal menu-baren være foroven, så der ikke er for Figur 1: Det mørkegrønne felt er nemt at nå, det lysegrønne er ok og det gule felt kan let nås ved at strække fi ngeren. (Wroblewski, 2011) mange menupunkter på den lille skærm. Figur 1: Det mørkegrønne felt er nemt at nå, det lysegrønne er ok og det gule felt kan let nås ved at strække fi ngeren. (Wroblewski, 2011) Som nævnt tidligere vil en webside opbygget efter principperne bag mobile fi rst, som den vi arbejder med, altid være forholdsvis lang. En af forklaringerne på det er, at det giver en bedre brugeroplevelse, hvis siden kun skal loade én gang. På den måde tager vi også hensyn til, at det mobile net kan 17

være både langsomt og kostbart. En måde at undgå for meget tekst på siden er ved at vise indholdet i stedet for at skrive det. (Wroblewski, 2011) Det har vi forsøgt at gøre ved at samle mange forskellige informationer, som man tidligere kunne finde spredt på mange sider, i en visuel genstand: Et oversigtskort over Zoo København. På denne måde får vi præsenteret en masse praktisk information på en overskuelig og visuel måde, der både appellerer til at blive brugt fra den stationære computer såvel som mobilen. På oversigtskortet kan brugeren blandt andet få vist spisesteder, toiletter og så videre. 17 I forbindelse med vores æstetiske overvejelser har vi ladet os inspirere af Lektor og studieleder ved Kommunikation på RUC, Lisbeth Thorlacius. Hun har opstillet fire vigtige punkter, som man ikke må glemme, når man laver webdesign: Æstetikken skal understøtte de indholdsmæssige og funktionelle aspekter Æstetikken skal tilpasses den websitegenre, som vi opererer indenfor. Æstetikken skal tilpasses målgruppen De æstetiske aspekter er udarbejdet i forhold til funktion, websitegenre, målgruppe og afsenderprofil. (Thorlacius, 2005) 11 Visuelt udtryk Farvevalget har stor betydning for brugerens opfattelse af en hjemmeside, og de forkerte farver kan være med til at ændre opfattelsen af en virksomhed. 18 Desuden kan farver hjælpe sidens usability på vej. 17 se bilag 13 18 http://www.smashingmagazine.com/2009/01/28/colors-in-corporate-branding-anddesign/ Vi har valgt vores farver med udgangspunkt i det farveunivers, som allerede er på Zoo Københavns hjemmeside i dag, og det er vores mål, at farverne signalerer liv og appellerer til både voksne og børn. Rent praktisk brugte vi hjemmesiden Kuler 19 til at sammensætte vores egen farvepalet 20. Vi har fundet de grafiske tegninger af zebraerne i årsberetnin- 19 http://kuler.adobe.com/#themes/rating?time=30 20 Se bilag 12 18

gen fra 2010, og aben under menuen fandt vi et magasin. Da de ikke var tilgængelige i høj opløsning, har vi bearbejdet dem i Photoshop, tegnet ovenpå og gemt dem i gif-format og pngformat, der hvor vi havde brug for gennemsigtighed. De skal signalere bevægelse og give siden liv på en anderledes måde. Vi har bevidst forsøgt at undgå illustrationer, der bliver skåret over i bunden, og derfor skærer siden over. Vi har prioriteret at holde en gennemgående linje i det grafiske udtryk, og vi har arbejdet med organiske former og runde hjørner på bokse og menuer. Vores ambition har hele tiden været at bevæge os væk fra den traditionelle boks-model, som ellers huserer på zoo-hjemmesider 21. Det har blandt andet betydet, at vi har beskåret indholdet på siden, så det nærmest er på vej ud over kanterne og sprænger rammerne. Vi vil gerne have, at forsiden har en robust, grafisk identitet, som giver presseafdelingen mulighed for selv at opdatere indholdet i form af eksempelvis nyheder ellertilføje og fjerne de runde bobler. Desuden er det vigtigt, at siden er fremtidssikret, så man kan skifte den grafiske illustration ud om et halvt år og stadig gen- 21 Se afsnit 4.1 i opgaven kende Zoo København. 12 HTML og CSS 12.1 Arbejdsmetode I det indledende kodningsarbejde koncentrerede vi os om hvert vores element, og efterfølgende satte vi dem sammen i ét dokument. Der skulle løses en del større og mindre problematikker undervejs, så det virkede som en god løsning. Det gav dog lidt udfordringer, når vi sammenføjede koderne. På et tidspunkt krævede det eksempelvis et større opklaringsarbejde at finde ud af, hvorfor dele af siden pludseligt fungerede som ét stort link. Omvendt har vi svært ved at se, hvordan vi skulle have arbejdet sammen på én computer eller i det samme dokument. Vi har mødt en del tekniske udfordringer i forbindelse med designet af den nye hjemmeside. Eksempelvis kortet, der skulle vise forskellige ikoner, de horisontale slidere og kalenderen med pop up tekst. Vi har brugt nettet til at finde mulige løsninger og analyseret an- 19

dre siders kildekoder for at blive inspireret til, hvordan vi eventuelt kunne løses vores egne problemer. 12.2 Generel opbygning Siden er optimeret til at blive vist i browserne Mozilla Firefox og Chrome. Vi har opbygget siden i procenter og em s, så den tilpasser sig forskellige skærmstørrelser med responsive design. Vi har designet siden som en lang side, som kan scrolles ned, eller man kan via menuens punkter komme til bestemte dele. Menuen har af samme grund position: fixed, så den følger med hele vejen. Headeren og elementerne på toppen af siden har en bredde på 100 %, og menuen har en bredde på 12% procent. Resten af indholdet er i en article med width sat til 82% og en margin til venstre på 13% for at holde den fri fra menuen. Derefter er hver del i henhold til menuen i en særskilt article som har position: relative for at kunne placere elementer med position:absolute. På baggrund af vores overordnede designstrategi har vi valgt ikke at have en fast bredde på 900 pixels, og i stedet udnytte den relevante skærm 100 procent. Vi har justeret elementerne med media querias til størrelse < 1200px, 960px, 700px, 480px og 320px. I den givne opgave har vi fokuseret på media query for <480px og 320px. Vi har i vid udstrækning benyttet pseudoselectors og z-index til at udforme de dynamiske elementer. Kompositionen og placeringen af cirklerne øverst på siden er vigtig for helhedsindtrykket af siden. Det viste sig at blive for ukontrollabelt med procenter, derfor er de defineret med højde, bredde og border-radius i pixels og justeret med media query. I koden er hele remsen -moz-border-radius og -webkit-borderradius med for at borderradius understøttes i andre browsere, det validerer dog ikke som CSS3. I forbindelse med media queries har vi desuden haft brug for at udelukke nogle elementer, det er gjort med display: none; herved optager elementet ikke stadig sin plads, men resten af indholdet flytter sig respektivt. 12.3 Media querias 12.4 Dynamiske elementer 20