Page 1

Multimedieteknologi og interaktionsdesign 2011

Erhvervsakademiet LillebĂŚlt v. Per Rasmussen

Bo Andersen Hans M. Børsting Reidar Holm

http://www.wp.tutsi.dk

Kontaktperson: Reidar Holm reidarholm@hotmail.com

1


Indholdsfortegnelse: Indledning

side 3

Foranalyse

side 3

Undersøgelsestrin

side 3

Designtrin

side 4

Realisering

side 4

Skitse over idéudvikling (Illustration)

side 5

Redegørelse for brug af de fire designparametre

side 6

Form

side 6

Typografi

side 7

Iillustration

side 7

Farve)

side 7

Storyboard

side 8

Skitse over den færdige hjemmeside (Illustration)

side 8

Header

side9

Menu

side 9

Content

side 10

Footer

side 10

Nyhedsboks

side 10

Slideshow/Header

side 10

Galleri

side 11

Procesdokumentation

side 12

Vurdering af samarbejde

side 14

Konklusion

side 14

2


Indledning: Baggrunden – og kunden - for denne projektrapport og tilhørende hjemmeside er Terrariet Vissenbjerg. Terrariet har et eksisterende website, som på alle måder virker forældet. Hjemmesiden giver ikke tilstrækkelige oplysninger, lige som det fremstår uoverskueligt. Vores mål er at re-designe websitet for at gøre det mere nyttigt. Vi vil give brugeren flere oplysninger og en mere brugervenlig og overskuelig grænseflade/UI, hvilket i sidste ende skulle give brugeren en grundigere information om dyr og terrariet som helhed. Projektet udarbejdes til kurset: Multimedieteknologi and interaktion design.

Foranalyse: Kunden i projektet er som nævnt Terrariet Vissenbjerg, en mindre zoologisk have for krybdyr. Efter et grundigt studie af Terrariet Vissenbjergs hjemmeside, nåede vi frem til den konklusion, at der i høj grad var brug for en nyudvikling og omstrukturering af hjemmesiden, der fremstår lettere kaotisk. En sammenligning med nogle af de nærmeste konkurrenter til terrariet i Vissenbjerg viser, at selv om hjemmesiderne er af svingende karakter, så udmærker de sig alle ved at være langt mere kundevenlige og imødekommende end kundens. Se eksempelvis: http://www.krokodillezoo.dk http://www.zoo.dk http://www.malmoreptilcenter.se/ http://www.regnskoven.dk/ Vores studie af Terrariet Vissenbjerg som turistattraktion i lokal og regionsområdet viser, at det er forholdsvist unikt og uden indholdsmæssige konkurrenter – fraset Odense Zoologiske Have. Dette forhold må også siges at være befordrende for et løft af hjemmesiden, ikke mindst udbredelsen af kendskabet til både hjemmeside og terrarium.

Undersøgelsestrin: Gennem henvendelse til Terrariets direktør blev aftalt et møde angående udviklingen af forslag til ny hjemmeside til firmaet. Under mødet gav direktør Klaus Dræby med det samme udtryk for, at han ikke personligt mente, at der var nogen grund til at beskæftige sig yderligere med udvikling af hjemmesiden, som han mente fungerede

3


aldeles upåklageligt. Klaus Dræby fortalte, at hjemmesiden var udviklet af en frivillig, som også fungerede som webmaster samt redaktør. Klaus Dræby kunne ikke bidrage med ønsker eller krav til forslag til ny hjemmeside, og dermed er det op til vores gruppe selv dels at udvikle nyt design samt rydde op i det lettere virvar af informationer, som siden fremstår med i dag. Direktør Klaus Dræby udleverede dog statistik over Terrariet Vissenbjergs hjemmeside og heraf fremgår det, at siden er rimelig godt besøgt af et mindre sted at være, hvilket danner grundlag for at kunne øge besøgstallet væsentligt, da hjemmesiden i dag kører uden speciel søgeoptimering. Eksempelvis skal man søge helt konkret ind til ”krybdyr vissenbjerg”, før man får kontakt til kundens hjemmeside. Vi besluttede derfor ikke at tage yderligere kontakt til firmaet og i stedet koncentrere os om at udvælge indhold og design indenfor gruppen. Terrariets målgruppe er ifølge Klaus Dræby 75 procents voksne og 25 procents børn. Disse tal er dog udelukkende baseret på direktørens fornemmelse, der ligeledes ikke rigtigt kunne redegøre for, om der var udenlandske turister blandt de besøgende. En af terrariets tidligere større opgaver var dog en skoleordning, hvor elever blev vist rundt i terrariet. Denne ordning er dog foreløbig lagt i mølposen. Undersøgelse af tilsvarende Zoologiske haver med krybdyr viser dog, at disse i højere grad henvender sig til børn og forældre. Det er derfor vores vurdering, at terrariets kunder i langt højere grad skal findes hos børn og forældre. Dels blandt fastboende på Fyn og Sydjylland, men i høj grad også blandt de mange tusinde turister, som hvert år valfarter til især Fyns sydlige og vestlige områder og naturligvis Odense. Ikke mindst taget i betragtning, at transport tid til terrariet, som et placeret blot 15 minutters kørsel fra Odense og maksimum en times tid fra Sydfyn, gør, at turister i højere grad burde finde frem til kunden.

Designtrin Med ovennævnte i rygsækken gik vi videre til design af hjemmesiden, og vi blev hurtigt enige om, at siden skulle være enkel og mindre akademisk, overskuelig, brugervenlig og samtidigt en smule spraglet, ikke mindst fordi den også bør appellere til børn. Vi nåede frem til, hvilke ingredienser, der skulle indgå på siden og i hvilken form, de skulle præsenteres. Grundformen på hjemmesiden er: Header (med billeder), en/to spalter/sidebars til praktisk indhold og hovedområdet til tekstindhold og billeder. Hertil kommer en fast Footer med kontaktoplysning. Vi valgte at placere hovedmenuen under Header for at give god plads til tekst og billeder i hovedområdet, hvor vi på nogle undersiderne så valgte at tage den ene spalte/sidebar ud.

Realisering: Herefter var det blot at gå i gang. Under kundebesøget havde vi taget billeder til præsentation på hjemmesiden. Disse billeder skulle udvælges og behandles, tekst skulle udarbejdes, hvor det var

4


nødvendigt og ikke mindst så skulle der luges kraftigt ud i det nuværende indhold, som også skulle struktureres meget bedre under det nye design. Vi fordelte opgaverne blandt gruppens deltagere og gik i gang.

Skitse over grundlæggende ideudvikling til hjemmesidens indhold.

5


Redegørelse for brug af de fire designparameter Denne projektrapport indeholder ikke en lang række ideoplæg efterfulgt af en endelig udvælgelse. Vi vurderer, at der er lav risiko forbundet med dette projekt. Der er usikkert, om kunden overhovedet vil have en ny hjemmeside, og vi vurderer, at forudsætningerne, som ligger til grund for dette projekt, ikke ændrer sig væsentligt, før opgaven skal være afsluttes. Vi har derfor valgt at formulere vores forventninger til det færdige resultat og på den baggrund vælge et egnet Wordpress Tema. Vores arbejdsmåde har meget til fælles med vandfaldsmodellen. (Fischer, ooasterbaan: Digital Media Management.)

Form Første skridt er at skabe opmærksomhed om produktet. Øverst på websitet har vi valgt at vise en række billeder af terrariets dyr, som kan skiftes med jævne mellemrum. AIDA-modellen viser, at hvis der er skabt opmærksomhed om produktet, vil kunden som det næste lede efter en ”afsender”. Klar henvisning til en afsender skaber troværdighed om produktet og giver de besøgende på websitet mulighed for at vurdere om de tilhører den relevante målgruppe. Vi har derfor valgt at tilføje en Footer, som indeholder terrariets kontaktoplysninger. I midten vises indholdet. Links har vi valgt at placere ”inline” under headeren. Det har vi valgt, fordi vi finder det mere naturligt at læse fra højre mod venstre end oppefra og ned. Desuden giver det mere plads til visning af indholdet, end hvis vi eksempelvis havde valgt en venstrestillet navbar med linkene vist på listeform. Vi gik derefter i gang med at lede efter en passende skabelon i Wordpress. Valget faldt på Sliding Door, som vi mener passer bedst på de ønsker, vi har til det færdige resultat. Med denne template kan vi som ønsket vise en række billeder øverst på siden. Vi mener, at headerens "slideshow" er med til at understøtte kravet om opmærksomhed på en lækker og funktionel måde. Hjemmesiden er enkel og brugervenlig i sin opbygning, hvilket efter vor opfattelse gør det lettere at fokusere på hjemmesidens egentlige formål, nemlig at formidle kendskabet til terrariet Vissenbjerg. Brugervenligheden giver Terrariet mulighed for selv at opdatere hjemmesiden uden det store tekniske kendskab. Det var selvfølgelig nødvendigt at tilpasse det valgte tema Sliding Doors til vores ide. Vi gennemgik derfor temaets css-filer og rettede til hvor det var nødvendigt. Eksempelvis baggrundsfarver, fontstørrelser og så videre. Vi mener, at et af problemerne ved Terrariets nuværende hjemmeside er, at der er linket til nyheder og events overalt på hjemmesiden. Vi har derfor forsøgt at stramme op og strukturere oplysningerne ved at benytte en blanding af plugins i kolonner samt bedre håndtering af menuen. Den valgte template/tema er udstyret med en kolonne i højre side og en i venstre side. I venstre side har vi valgt at vise en begivenhedskalender. Her kan brugeren orientere sig om fremtidige arrangementer i Terrariet. Der eksisterer flere kalender-plugins. Vi har valgt WP Events Calendar af Luke Howell.

6


I kolonnen til højre har vi valgt at placere en nyhedsboks. Nyhedsboksen kan skifte mellem en række prædefinerede nyhedstekster. Nyhederne kan enten fungere som selvstændige ”teasers”, eller de kan placeres menuen Nyheder sammen med andre væsentlige historier. Vi er naturligvis klar over, at Terrariet gerne vil henvende sig til udenlandske besøgende. I Wordpress er det muligt at tilvælge plugins, så siderne kan forholdsvist nemt kan oversættes til andre sprog, eksempelvis Engelsk og Tysk. Typografi Vi har valgt følgende skrifttyper: Trebuchet MS, Lucida Grande, Lucida, Vernada, sans-serif. Terrariet skal nå et bredt publikum, ikke kun herhjemme men også på verdensplan. Derfor har vi valgt fra de såkaldte websikre fonte. Dermed er der større sandsynlighed for, at siden vises korrekt, uanset hvor i verden man befinder sig. Illustration Blikfang er det primære formål for valg af illustrationer. Illustrationer kan bestå i fotografier og tegninger, som eksempelvis et logo. På websitet er blikfang det væsentligste formål for brug af illustrationer, og da gruppens medlemmer ikke mener at kunne frembringe brugbare tegninger, har vi valgt at bruge billeder af terrariets dyr og på den måde at lade dyrene selv være bærere af budskabet. Farve I vores brainstorm fik vi flere ideer til, hvilke farver som skulle være en del af websitet. Flere krybdyr er potentielt farlige, så for os var det naturligt at tænke på lidt spraglede farver, da disse farver i naturen ofte optræder som advarsels- og opmærksomhedsfarver. Gul og sort kan være skabe opmærksom om produktet, eksempelvis kan nævnes Netto reklamerne hvor farverne gul og sort er dominerende. I naturen lever dyrene i regnskoven, derfor er den grønne farve fra regnskovens vegetation også en oplagt farve. Vi har valgt grøn som baggrundsfarve, da grøn er mere behagelig at se på end sort og gul. Efterfølgende vil vi eventuelt lade de spraglede farver indgå i siderne under stærk kontrol. I første omgang har vi ladet farverne indgå i Header. Et andet vigtigt spørgsmål er tekstfarven. Hvis vi vælger en komplementærfarve, får vi et meget uroligt udtryk. Vi risikerer at skabe indtrykket af, at det er vigtigere, at teksten bliver set, end at den bliver læst. Hvis vi derimod vælger en farve som befinder sig nærmere grøn i farvecirklen, får vi et roligere udtryk, men vi risikerer samtidig, at det bliver sværere at læse teksten. Vi har derfor valgt tekstfarven hvid, da det er en meget neutral farve. Vi har dog tilladt, at begivenhedskalenderen kan indeholde farver i modsatte ende af farveskalaen. Dette er en fordel, hvis man vil gøre brugeren opmærksom på, at kalenderen indeholder begivenheder på bestemte datoer.

7


Storyboard

Skitse over den fĂŚrdige hjemmeside.

Hjemmesiden har følgende baggrundsfarve: Background-Color:#000000; Background-Color for wrapper: #003300; 8


Header I headeren finder vi Site-name og Site-description. Site-name er Terrariet Vissenbjerg. Site-description indeholder en forklarende tekst. Vi har i denne forbindelse valgt et fængende USP (Unique Sales Point), som gerne skulle vække læserens interesse: Skandinaviens første special-ZOO for krybdyr

Site name font: 40px; Color:#ffffff; text-align:center; Site description font: 14px text-align: center; Color:#ffffff;

Menu Der er følgende punkter i menuen: Hjem, Terrariets historie, Se billeder, Spørgsmål og svar om krybdyr, nyheder, kontakt os og Praktisk info. Menupunktet ”Se billeder” fører til galleriet. Mere om galleriet senere i teksten. Menupunktet praktisk info har følgende underpunkter: Billetpriser, åbningstider, litteratur, links, vejviser.

For de nævnte menupunkter/links gælder følgende. Links, Links Visited color: #aaa; text-decoration: none; padding: 0 21px 0 16px; Links Hover Text color:#ffffff; Background-color:#aaa; Text-decoration:none; 9


Padding: 0 21px 0 16px;

Content Color:#ffffff; Brødtekst: Verdana, 14px Overskrift: Trebuchet, 28px Under-overskrift: Verdana, 14px, bold, italic Fodnoter: Verdana, 8px.

Footer Font: 11px, Verdana Color: #ddd Position: Align Center Font style:Italic

Nyhedsboks Font: 11px, Verdana Color: #ddd

SlideShow/Header Headerens slideshow består af 7 billeder. Disse billeder måler alle 320px gange 200px. Billederne er placeret i selve pluginens mappe i folderen ImageFolder. Ved udskiftning af disse billeder, kan man nemt ændre på indholdet i Headeren. Filanavnene på billederne i Headerens slideshow er henholdsvis: 1.jpg, 2.jpg og så videre op til syv. Filnavnene afgør hvor i Headerens slideshow, at billedet placeres.

10


Galleri Billedgalleriet skal indeholde følgende billeder. Man skal komme til galleriet ved at klikke på menupunktet ”Se billeder”. Der benyttes NextGEN Gallery i wordpress. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

Galleri Snohaleskink Krølhåret fugleedderkop Ruskællet pladeøgle Gilaøgle Krybdyr hmm Krybdyr leguan Grøn basilisk Krybdyr lizard Krybdyr marsvin Krybdyr padde Krybdyr padder kryb Krybdyr padder Krybdyr to kryb Vissenbjerg Terrariet l1000234 l1000208 l1000210 l1000248

11


Process Dokumentation Pre Projekt Start

Krav

Tasks/Info

Detaljer

Hvad er hele projektet for? Involverede I projektet

Website for terrariet og projekt rapport

Ansvsr

Definer projektet

Projekt plan/ Hold møde

Realiseret tidsforbru g Timer

Hans, Bo, Reidar,

Hvordan? Indsamling Kunde møde med indsamling Holdet af informationer og billeder. af oplysninger og og krav fra ejer/kunde. kunde Websitet er ikke bruger venligt, selv om ejer mener andet!! Problem

Forventet tidsforbrug Timer

Mange opkald på en dag med hensyn til zoo og dyr. Behov for mere brugbare infomationer på websitet Terrariet har som nu er et existerende website, men det giver ikke tilstrækkelige oplysninger, hvilket tydeligvis giver problemer for ejeren, der må bruge lang tid på personlige telefonsamtaler med kunderne. Vi vil redesigne websitet for at gøre det mere nyttigt, det vil give brugeren flere oplysninger og en mere brugervenlig og overskuelig grænseflade/UI, hvilket i sidste ende skulle give brugeren en grundigere information om dyr og terrariet som helhed. Dette projekt omfatter også projekt dokumentation.. Projektet udarbejdes til Kurset: Multimedieteknologi and interaktion design. Definer opgaver Opgave fordeling

3

3

1 2 0.5

1 3 0.5

Holdet

Holdet

Holdet Holdet

12


Design

Hvad skal websitet indeholde? User interface/Brugergrænseflade Hold møde/Brainstorming Layout Indhold Wordpress Excel/word Software brugt: Email Notepad++ Storyboard Home model De fire designparametre Procesdokumentation

Implementation Implementation og udvikling

Testing Enhedstesting

Integrationstesting

System testing Reevaluering

Vedligeholdelse

Header/footer/menu/content/ plugins/graphics/widgets Udgivelse af billeder Redigering af tekst Afprøvning af en bestemt kode eller ændringer der foretages løbende Afprøvning af websitet efter at have integreret alle ændringer fra holdet Teste alle websitets funktionaliteter baseret på krav og definitioner

1 2 2

1 3 2

Hans Bo

2 2

4 3

Hans

3

2

Reidar

2

4

5 1 2

7 2 2

Udvikler

25

14

Holdet Kvalitetssikring/ holdet Holdet

2

2

2 2

1 1

1

0.5

1

2

61

57

Holdet

Holdet Bo Holdet

Bruger testing

Produkt informationer og manualer eller produkt dokumentation til ejeren Bruger afprøvning

Website vedligeholdelse

Efter implementering af websitet på internet, retning af Holdet fejl hvis der er nogle m.m.

Kunde

Link Til website www.wp.tutsi.dk/

13


Vurdering af samarbejde Samarbejdet I gruppen har fungeret ganske udmærket. Vi var gode og hurtige til at få uddelegeret opgaverne, og der har været en god løbende dialog og opfølgning på de ting, vi hver især har udarbejdet for at få både rapport og website tilpasset bedst muligt. Vi har haft en meget åben tilgang til projektets udvikling og vores egne krav til websitet, da vi for så vidt ikke har nogle forventninger fra kunden, der bestemt ikke ønskede sig et nyt eller forbedret website, så det stod os frit for at gøre, hvad vi selv havde lyst til. Vi blev også meget hurtigt alle enige hvordan vi ønskede websitet skulle se ud med nogle mindre justeringer hen ad vej. Selvom vi har haft meget forskellige tilgange, har vi formået at bruge vores kompetencer og været meget lyttende overfor hinandens synspunkter.

Konklusion Med resultatet som kan ses på adressen www.wp.tutsi.dk mener vi, at vi er nået et godt stykke af vejen til en markant bedre udgave af Terrariet Vissenbjergs nuværende hjemmeside www.terrariet.dk. Vi har strammet op på indholdet, så det er struktureret mere klart under henholdsvis kolonner og menu. Vi har tilføjet nyt – ”Spørgsmål og svar om krybdyr”, som var et emne direktøren under besøget gik meget op i, men forunderlig nok ikke mente hørte hjemme på den eksisterende hjemmeside, og endelig har vi fastlagt et farveskema, som skal gå igen på alle siderne. Projektet er ikke gjort færdigt, idet det vil kræve yderligere indsats, ligesom det vil fordre en bedre dialog med direktøren for terrariet. Vi har koncentreret os om at lægge grunden for en bedre hjemmeside og naturligvis underbygge vores teori ved at udvælge enkelte sider, som kan ses på projektets hjemmeside. Vi mener, at resultatet et en hjemmeside, hvor informationer og farverige billeder supplerer hinanden på en fornuftig og overskuelig måde uden at det går ud over læseværdigheden. Fravælgelsen af for mange, smarte effekter får hjemmesiden til at fremstå hurtig og strømlinet. Sidst skal nævnes, at indholdet er - og skal – udarbejdes i en SEO-venlig form i langt højere grad end tilfældet er i dag.

14

Projektrapport Hans, Reidar og Bo  

Multimedieteknologi og interaktionsdesign 2011

Read more
Read more
Similar to
Popular now
Just for you