ERHVERVSAKADEMIET LILLEBÆLT

WEBSITE: TERRARIET I VISSENBJERG

MULTIMEDIETEKNOLOGI & INTERAKTIONSDESIGN

Lisanne Gerlich, Stine Godske Jacobsen & Helle Skovbjerg Karoff 07-06-2011

[1]

Indholdsfortegnelse

Indledning...................................................................................................................................... 3

Metode .......................................................................................................................................... 3

Foranalyse ..................................................................................................................................... 3

Projektbeskrivelse ......................................................................................................................... 4

Undersøgelse ................................................................................................................................. 4

Afsender .................................................................................................................................... 4

Det eksisterende website .......................................................................................................... 4

Design ............................................................................................................................................ 6

Informationsdesign ................................................................................................................... 6

Interaktionsdesign ..................................................................................................................... 6

Præsentationsdesign ................................................................................................................. 7

Grafiske designparametre ............................................................................................................. 7

Format ....................................................................................................................................... 7

Farver ........................................................................................................................................ 7

Illustration ................................................................................................................................. 8

Typografi ................................................................................................................................... 8

Animation & lyd......................................................................................................................... 8

Realiseringstrin .............................................................................................................................. 8

Anvendt teknologi ..................................................................................................................... 8

Opsamlende overvejelser ......................................................................................................... 9

Bilag ............................................................................................................................................. 10

Tidsplan ....................................................................................................................................... 10

Flowchart ................................................................................................................................. 11

Mindmap (1) ............................................................................................................................ 12

Storyboard (1) ......................................................................................................................... 13

Storyboard (2) ......................................................................................................................... 14

Storyboard (3) ......................................................................................................................... 15

Storyboard (4) ......................................................................................................................... 16

Storyboard (5) ......................................................................................................................... 17

Skelet og mål ........................................................................................................................... 18

[2]

Gordon Gekko med boble ....................................................................................................... 19

Gordon Gekko (1) .................................................................................................................... 20

Gordon Gekko (2) .................................................................................................................... 21

Gordon Gekko (3) .................................................................................................................... 22

Gekko duset............................................................................................................................. 23

Fonte og farver ........................................................................................................................ 24

[3]

Indledning Denne rapport er udarbejdet som det afsluttende projekt i faget Multimedieteknologi og Interaktionsdesign. Vi fik som opgave at udarbejde et forslag til et nyt website til Vissenbjerg Terrarium, og rapporten beskriver processen og idéudviklingen i den forbindelse.

Metode Home-modellen (Holistic, Open Multimedia development method) danner udgangspunkt for vores projekt. Modellen består af 4 trin: Foranalyse, Undersøgelse, Design og Realisering. Den er helhedsorienteret, dvs. den medtager både produktet og processen. Da den samtidig er åben, dvs. justerbar, kan vi tilrette den lige netop vores projekt.

Foranalyse Kundebesøg

Den 26. maj besøgte vi Vissenbjerg Terrarium. Her udforskede vi først stedet på egen hånd, hvor vi fik mulighed for at tage billeder. Vi havde derefter en samtale med direktør Klaus Dræby, hvor han fortalte, at der på TERRARIET og blandt kunderne hersker stor tilfredshed med det nuværende website. Vi fik samtidig udleveret statistikker over antal besøgende på websitet, som skulle underbygge dette udsagn. TERRARIET ønsker ikke et nyt website, men Klaus er åben over for nye idéer til det nuværende. Der er altså ingen forventninger eller krav til det website, vi skal udvikle. Der er ingen mulighed for brugeren for at interagere med hverken ansatte eller andre brugere. På kundebesøget blev en blog forslået, men dette er der ifølge Klaus hverken tid eller økonomi til. Han udtrykte dog et ønske om at opnå mere dialog med brugerne omkring nyhedsbreve. Man benytter sig allerede af nyhedsbreve, men ikke i forbindelse med websitet.

Statistikken i forhold til hjemmesiden kunne vi ikke bruge til så meget i forhold til udviklingen af websitet. Den viser alene antallet af besøgende pr. måned, men vi får ikke andet besked, det kunne eksempelvis være om nationalitet, hvor i landet brugerne bor mm. Vi ved heller ikke noget om, hvilken side, der er mest eftertragtet, om det er slanger eller åbningstider.

Klaus fortæller desuden, at han kun har overfladisk kendskab til de besøgene, men understreger dog at 1/3 af de besøgene er børn.

På trods af dette nævner Klaus, at han har et ønske om at have mulighed for i højere grad at appellere til børn på websitet. TERRARIET havde indtil for nylig en

[4]

skoletjeneste, der gav skoler og børnehaver lejlighed til at opdage stedet og den omkringliggende natur. Skoletjenesten og besøgene på skolerne i lokalområdet er ifølge Klaus TERRARIETs kernekompetence i forhold til formidling til børnene. Skoletjenesten blev financieret af Assens Kommune som ikke ønskede at fortsætte financieringen i 2011. Der er dog håb om at skoletjenesten kan genetableres på længere sigt. På nuværende tidspunkt udgør børn ca. 33% af de besøgende. Klaus Dræby udtrykte ønske om at denne andel skulle øges betragteligt. På baggrund af ovenstående har vi valgt at udforme TERRARIETs nye site så de i højere grad at appellere til børnene.

Projektbeskrivelse Projektet består i at fremstille et website til Vissenbjerg Terrarium. Websitet skal have et omfang på minimum 3-4 sider, og det implementeres i Wordpress. Der er ingen krav til det website, vi skal udarbejde, men TERRARIETs ønske om at tiltrække flere børn via websitet er udgangspunkt for processen. Vores mål er at udarbejde et website med et mere børnevenligt udtryk, dog på en sådan måde, at siden henvender sig til besøgende i alle aldre. Designet skal være mere moderne, de vigtigste oplysninger skal præsenteres på forsiden, og det skal være nemmere at navigere rundt på websitet.

Undersøgelse

Afsender Vissenbjerg Terrarium blev stiftet i 1973 af Carl Aage Gram og var indtil dennes død i 1992 privatejet. Klaus Dræby har været stedets direktør siden 1992. TERRARIETs mission er at formidle kendskabet til krybdyr og padder og disses levevilkår samt at give de besøgende en oplevelse af glæde og fascination ved dyrene. Da TERRARIET ikke understøttes økonomisk af staten, har det ofte haft problemer med lukning, og kun særbevillinger fra kommunen og private bidrag har reddet stedet. Man har et ønske om at bevare TERRARIET og har bl.a. forsøgt sig med sponsorater, men dette har der ikke været nok interesse for fra virksomhedernes side. Den ringe økonomiske situation betyder, at man i høj grad er afhængig af frivillige kræfter.

Det eksisterende website TERRARIETs nuværende website er udviklet af en frivillig, Rune Midtgaard, som er ven af TERRARIETS ansvarlige, Klaus Dræby. Vi har i gruppen diskuteret websitet, og har identificeret følgende problemer samt positive ting angående det nuværende website:

[5]

Overordnet layout:

Websitet bærer præg af gammeldags løsninger på en række områder, f.eks. er den opbygget i tabeller, og vores fornemmelse er, at siden ikke er bygget ved brug af css-koder, men alene er baseret på html-koder.

Menuen findes i venstre side, men den føres ikke med over på alle sider og læseren mister dermed mulighed for at komme tilbage på forsiden, eller videre på andre sider. Brug af ⇐-tasten virker, men er ikke optimalt.

Teksten virker optimeret til meget lave skærmopløsninger, hvilket giver lange, smalle tekstafsnit og en al for stor brug af scrollfunktion.

Der er al for megen unødig tekst. Vi har dog identificeret ”den gode historie”, hvilket er positivt, men disse historier fremhæves ikke.

Der mangler konsistens i typografien til overskrifter og underoverskrifter, der ændrer sig, alt efter hvilken side, man befinder sig på. Også æstetikken ændrer sig fra side til side. Nogle gange er siden venstrestillet, mens den i andre tilfælde er centreret.

Der er mange billeder på siden, men ofte står disse billeder alene, uden tekst eller historie. Oplevelsen af det visuelle bliver, at billederne flyder sammen.

Forsiden:

Forsiden er ustruktureret og overskrifter er ikke velvalgte i forhold til at guide læseren om indholdet.

Navigationsmenu:

Denne er rodet og uklar, ordvalget er upræcist i forhold til indholdet, og teksten er både farvet, understreget, i punktform og for lang. Brugervenligheden er derfor helt i bund.

Flowchart:

Der er en ulogisk hierarkisk opbygning med mange oplysninger, der er præsenteret uoverskueligt. Konsekvensen bliver, at man går glip af essensen.

Generelt:

Den gode historie findes mange steder på siden, men den forsvinder i mængden af information.

Der er alt for mange billeder, det hele kommer til at flyde i oplevelsen af siden.

[6]

Positive ting, som vi ønsker at arbejde videre med:

• Den lille gekko er fin i sin æstetik • Den gode historie eksisterer mange steder på sitet, men skal i centrum og skal

forfølges. • Der er et stort galleri af gode, vellignende billeder.

Design Resultatet af design, flowchart og brugerflade er skabt i en cirkulær proces, hvor vi har blandet forskellige paradigmer. Som Fischer & Oosterbann formulerer det:

”Sammenblanding af forskellige paradigmer kan fx betyde, at du itererer mellem Undersøgelses- og Designtrinnet og herefter kører Realiseringstrinnet mere målrettet” ((jf. Fischer & Oosterbaan, 53).

Fremgangsmåden var ikke på forhånd defineret således, men opstod som en konsekvens af pragmatiske valg- og fravalg. Det vil fremgå klarere i det følgende.

Informationsdesign Informationsdesignet angår sitets information. For TERRARIET er forundringen over både kendte og ukendte dyrs liv i naturen det primære tilbud til sitets og TERRARIETS besøgende. De farverige dyr og historierne om dem er det primære, mens at teksten er sekundær. Det betyder ikke, at teksten ikke er vigtig. Derimod er det centrale, at billederne og historierne i det fremtidige design er knyttet sammen på en meningsfuld måde, der både er letforståelig og logisk.

Interaktionsdesign Interaktionsdesignet omhandler brugerens interaktion med websitet. TERRARIETs nuværende website er meget statisk, og en større grad af interaktion med brugerne har derfor været højt prioriteret i udviklingen af sitet.

Enkelhed er højt prioriteret, hvorfor strukturen af undermenuer er justeret kraftigt i sammenligning med det eksisterende site. De overordnede menuer er dropdown menuer, hvor siderne er kategoriseret under hovedpunkterne: Dyrene på TERRARIET, Besøg TERRARIET, Det sker på TERRARIET, Om TERRARIET og Nyheder.

Gordon Gekko er en karakter, der er skabt i forbindelse med udviklingen af sitet. Det skyldes på den ene side ønsket om i højere grad at appellere til den yngre del af de besøgende og på den anden siden ønsket om at sætte den gode historie i centrum.

[7]

Man møder Gordon Gekko på home, her kan man via et klik få historien om, hvad Gordon Gekko er for en lille fyr. På de efterfølgende sider bruges Gordon Gekko til at præsentere sjove facts om dyrene.

Præsentationsdesign I præsentationsdesignet konkretiseres information og interaktion, så indhold og struktur både opleves og kommunikeres. Designet er skabt på baggrund af de layoutskitser, mindmaps og idegenereringsprocesser, som er vedlagt som bilag.

Websitets forside består af en header med TERRARIETS navn, samt slogan, som vi i processen har udviklet. Menubaren er vandret og består af dropdownmenuer. Det er kun i andet niveau, at siderne vises i dropdown menu. Mængden af sider, især omkring de individuelle dyr, gjorde at næste menu-niveau simpelthen blev for langt og uoverskueligt. Vi valgte derfor en mellemvej, så man f.eks. under ”Dyrene på TERRARIET”, kan vælge mellem, ”Frøer + Tudser, Krokodiller, Skildpadder m.v.” og i næste niveau er de enkelte dyr listet og linket på ”artssiden”.

Sitet er skabt med tre kolonner. De to sidekolonner indeholder statisk såvel som dynamisk indhold. Til højre fremgår åbningstider (statisk) og Facebook icon, og desuden møder man karakteren Gordon Gekko. Til venstre er der en søgefunktion samt en tegnekonkurrence og nyhedsbrev. Sitets content area har skiftende indhold.

Sitets baggrundsbillede er TERRARIETS nuværende kendetegn. Det er valgt, fordi æstetikken og udtrykket appellerer til barnet i os alle. Billedet er behandlet i Photoshop, så farverne er mindre kraftige, men i stedet dusede. Vi har valgt denne fremgangsmåde for at ramme sitet æstetisk ind, men samtidig underspille farverne, for at lade historierne få plads.

Grafiske designparametre

Format Websitets forside er lavet med fast bredde på 940px, centreret på skærmen, mens højden varierer alt efter omfanget af indhold. Den er lavet i tre kolonner. Forsiden er i udgangspunktet designet, så scroll ikke er nødvendigt med de fleste skærmopløsninger. Underliggende sider har den højde, som indholdet naturligt medfører.

Farver Udgangspunktet for farvevalg har været TERRARIETS orange og grønne gekko, der også er brugt på den eksisterende site. Disse går igen dels i header og dels i sitets overskrift. Desuden har vi tilføjet den orange skrift i hover, da det skaber sammenhæng på sitets enkelte dele. Den grønne farve giver samtidig associationer til både dyr og natur, og

[8]

det klare og markante look appellerer i højere grad til det unge publikum end, hvis vi havde valgt sorte, hvide eller grå farver.

Illustration Vi har valgt primært at anvende allerede eksisterende fotos. Det hænger sammen med et ønske om at understrege sammenhængen mellem foto og facts. Man kunne forestille sig, at dette ønske ville blive vanskeliggjort af undertegnedes manglende kendskab de præsenterede arter. Desuden er de allerede eksisterende fotos af høj kvalitet, hvad angår farve og livagtighed.

Typografi Vi har valgt verdana som gennemgående typografi på hele sitet. Det hænger sammen med, at den er enkel og læsevenlig på skærmen. Desuden bliver det vanskeligt at fastholde det enkel og overskuelige udtryk, når vi samtidig har valgt så dominerende farver, både i overskrift og header på sitets første side.

Animation & lyd Gordon Gekko er skabt i et enkelt udtryk med en simpel blyantsstreg. Ideen er, at brugeren skal få en fornemmelse af, at karakteren hænger fast på skærmen, som om, at han er ved at komme ud til en. Man kunne forestille sig Gordon Gekko i en animeret udgave, der både taler og bevæger sig, men den løsning ville have krævet brug af flash, og TERRARIETS økonomiske og tidsmæssige rammer ville ikke kunne skaffe den nødvendige finansiering.

På sitets homepage møder brugeren en video hentet fra Youtube med musik og billeder. Ideen med video er at give både bruger og kommende besøgende en smagsprøve på, hvad man kan forvente, når man besøger TERRARIET. De levende billeder giver en realistisk og dragende oplevelse af TERRARIETS dyr.

Realiseringstrin

Anvendt teknologi TERRARIETs nye hjemmeside er designet i CMS-systemet WordPress, og her er temaet Emerald Strech. Vi afprøvede forskellige temaer til at begynde med, men fandt at netop dette bedst understøttede vores designideer udviklet gennem storyboards, flowchart og skelet. Det samme gjorde sig gældende mht. undermenu og sidebars. Samtidig gjorde opbygningen af temaet i html, css og php-koderne, der for alles vedkommende var meget overskuelige og lige til at gå til, det muligt for os at lave korrektioner, hvor det var nødvendigt. Billederne og Gordon Gekko er redigeret og layoutet i Photoshop og efterfølgende brugt i WordPress.

[9]

Derudover integrerede vi en række WordPress plugins for at opnå alle de ekstra elementer vi manglede i det originale tema.

PageMash – en plugin der gjorde det muligt for os manuelt at styre hvilke menupunkter der skulle vises hvor.

Search – Pga. af TERRARIETS meget omfattende antal af sider med meget relevant indhold, fandt vi det imperativt at der kunne søges overalt på siden.

Smart YouTube - Et lille effektivt program der muliggør indhentning af YouTube videoer direkte på en side, blot ved at indsætte stien og ændre http:// til httpv://.

Facebook – Så man hurtigt fra sitet kunne ”like” en side på Facebook.

cformsII – En formular generator der kan bruges til mange formål. Vi har valgt at bruge den til nyhedsbrevstilmeldinger.

Opsamlende overvejelser Formålet med projektet har været at afprøve, udvikle og forfine vores forståelse og praktikker inden for webdesign, helt fra ideen tager form, videre til skitsen og i den afsluttende realisering af websitet. Fra begyndelsen af processen har kundens behov eller mangel på samme været et centralt omdrejningspunkt i processen. Hvordan laver man en hjemmeside til en kunde, der ikke ønsker en hjemmeside? Strategien blev at finde et behov hos kunden og eksemplificere dette gennem forslaget til en ny hjemmeside. Denne strategi oplever vi gjorde opgaven betragtelig nemmere.

I processen har vi brugt meget tid på undersøgelses- og designtrinnet. Det hænger sammen med, at designet hele tiden skulle afstemmes med den overordnede ide om at kommunikere klarere til den yngre del af publikummet.

Vores samarbejde har båret præg af, at vi alle havde adgang til Wordpress gennem adressen http://gerlich.dk. Arbejdet var derfor ikke bundet til en computer og wampserver, og vi har derfor kunne arbejde på sitet alle sammen.

Samarbejdet i gruppen har fungeret optimalt, og det skyldes på den ene side vores meget forskellige fagligheder, der i samspil har virket rigtig godt sammen, og på den anden side at alle har gjort det, de var gode til. Der var desuden fra starten enighed om, hvordan vi kunne komme omkring dilemmaet med kundens behov, som vi i det foregående gentagne gange har berørt. Det har gjort processen meget ukompliceret.

Websitet er afslutningsvist blevet præsenteret for Klaus Dræby, og han var begejstret i forhold til løsningen om at kommunikere til det yngre publikum. Særligt synes han, at ideen om Gordon Gekko var rigtig god og nævnte desuden, at TERRARIET tidligere har arbejdet med en lignende ide med Boaen Bo.

[10]

Bilag

Tidsplan 26.5.2011 I forhold til

HOMEmodellen Kundebesøg TERRARIET

30.5.2011 Test af eksisterende side og diskussion af kundebehov, brainstorm og ideudvikling Flowchart, mindmaps.

31.5.2011 Flowchart, mindmaps 1.6.2011

Diskussion af skitser, fordeling af arbejdsopgaver og disposition til rapporten. Skitse af HOMEmodellen Afprøvning af forskellige temaer i wordpress

2.6.2011 Valg af tema Wordpress Flowchart korrigeres Arbejde på rapporten Storyboard

5.6.2011 Wordpress Rapport Gordon Gekko Layout Bilag

6.6.2011 Wordpress Rapportskrivning Bilag Evaluering af arbejdsproces Korrekturlæsning Rapport oploades

7.6.2011 Færdig med processen.

Foranalyse

Undersøgelse d

esign

Realisering

[11]

Flowchart

[12]

Mindmap (1)

[13]

Storyboard (1)

[14]

Storyboard (2)

[15]

Storyboard (3)

[16]

Storyboard (4)

[17]

Storyboard (5)

[18]

Skelet og mål

Wrapper 940 px bred Midter sektion (content) 540 px bred Sidebars 170 px brede Margener højre & venstre 15 px Afstand sidebars og content 15 px Header i alt 100 px høj Border top – 10 px Titel bar – 65 px høj Nav bar - 35 px høj Margen – 15 px Overskriftsbar i sidebars 25 px høj

[19]

Gordon Gekko med boble

[20]

Gordon Gekko (1)

[21]

Gordon Gekko (2)

[22]

Gordon Gekko (3)

[23]

Gekko duset

[24]

Fonte og farver

Farver:

H1, H2, H3: color: #006600; - mørkegrøn

Navigations bar/menu

color: #FFFFCC; /*meget lys gul, næsten hvid*/

Header overskrift: color: #ff6600 - Orange

Links: color: #7AA055 - støvet grøn Links hover og aktive i teksten: color: #ff6600 - Orange

Brødtekst: color: #000000; - sort – størrelse 62,5%

Fonte: I basis fontstørrelse 12 og justeret med %

font-family: Helvetica, Arial, Verdana, sans-serif;

Header h1 Font: 350% = 42 Content h1: 190% = 22,8 Header h2 Fon: 160% = 19,2

Content h2: 160% = 19,2 Content h3: 130% = 15,6

Content: 120% = 14,4

Sidebars h2: 12% = 14,4

Sidebars: 110% = 13,2