Afsluttende opgave 2009 Kommunikation/IT Tema: Kulløse Miljømesse Rapport af: Jacob Almann Tinnesen, Oliver Mørk og Oscar Helmersen Roskilde Tekniske Gymnasium Klasse 1.1 Afleveret: 24-04-2009 Side 1 af 12
Indholdsfortegnelse Intro... 3 Målgruppe... 3 Inspiration... 4 Første ideer til hjemmesiden... 4 Papirsprototype af hjemmeside... 4 Udformning af testen... 5 Valg af testpersoner... 5 Testen... 6 Endelige beslutninger i forhold til hjemmesiden... 8 Test af den færdige hjemmeside... 8 Værktøjer brugt til hjemmesiden... 8 Opsamling... 10 Bilag... 11 Side 2 af 12
Intro Vi har valgt at arbejde med opgave 2 information hvor vi vil lave en hjemmeside der kan indeholde alle nødvendige informationer i forbindelse med messen. På den måde kan man på plakater eller andre informationsmedier nøjes med at skrive de vigtigste info og derudover henvise til hjemmesiden. Målgruppe Overordnet set er det alle implicerede i Kulløse miljømesse, men da der er mange forskellige interesser (udstillere, besøgende, presse og arrangører) vil vi dele vores hjemmeside op i forskellige afdelinger som henvender sig mere specifikt til de forskellige målgrupper i målgruppen. Fx skal udstillere gerne vide hvem der kommer og hvad der forventes af dem at de fremlægger/udstiller. De skal også gerne vide hvordan de får et sted at sove og noget at spise fx om mad og husly blev betalt af messen eller om de selv skal betale disse udgifter. De skal også vide hvordan de bliver udstillere og hvordan de får booket en stand. De besøgende, som for det meste er moderne og miljøorienterede mennesker, skal vide hvem der udstiller og have links til udstilleres hjemmesider så de ved hvilket fokus de forskellige har. De skal også vide hvor de kan få noget at spise og hvor de kan sove hvis de har brug for dette, muligvis inddelt efter prisklasser. De besøgende på messen skal også have et program så de ved hvad der sker hvornår. Dette vil også blive uddelt på selve messen, men kan også ligge elektronisk da nogen måske gerne vil planlægge deres dag i forvejen. Pressen som vi må formode vil have en vis interesse i messen skal vide hvilke pressemeddelelser der er kommet fra arrangørernes side og hvad der sker under messen, dette kunne gøres med en konstant/dagligt opdateret nyhedspost på hjemmesiden. Selvfølgelig kan der også være nogle reportere der har ca. samme behov som de besøgende og måske skal henvises dertil, f.eks. i forhold til restauranter og overnatningsmuligheder. Arrangørerne skal vide hvem der kommer og holde styr på dette. Derudover skal de nok have en intern kommunikation og en optælling af mængden af gæster i de ovennævnte kategorier, dog har de nok ikke behov for mad og husly da de nok ikke skal rejse til messen eller i så fald allerede har været der et stykke tid for at klargøre messen. Arrangørerne ville nok også gerne have tildelt en form for administratorrettigheder, måske især over pressemeddelelser og nyhedspost, ellers kunne der alternativt være en der tog sig af at forfatte disse som så også havde styr på det hele ved hjælp af en konstant nyhedsstrøm fra arrangører o. lign. Udover disse grupper havde vi tænkt os at lave en generelt-tab som så skulle indeholde generel information, hvor messen holdes, af hvem messen afholdes etc. Man kunne også vælge at have nyhedsposten her så alle på messen finder den og får gavn af den. Side 3 af 12
Inspiration Vi har bl.a. kigget på Messecenter Hernings hjemmeside hvor vi har fået ideerne til fx vores presseafsnit. Vi mener at messecentre er den rette inspirationskilde da de afholder mange messer derfor har en masse erfaring på området. http://www.messecenter.dk/ Vi kiggede også på en hjemmeside for en enkeltstående messe, Scanpack messen i Sverige som er Skandinaviens største emballage-messe. Her fik vi bl.a. inspiration til en menu i toppen af hjemmesiden hvor man kan vælge hvem man er, besøgende, udstiller, presse osv. http://nemonet.swefair.se/templates/flexiblepage 166568.aspx Første ideer til hjemmesiden Holde hjemmesiden i lyse grønne og blå farver, giver associationer til planter, blå himmel og på den måde også miljø. Have nogle overskuelige menuer for hver af de enkelte grupper. Have en top-menu hvor man kan vælge hvem man er, besøgende, udstiller osv. Lave en dansk og engelsk version af hjemmesiden så internationale udstillere/besøgende også kan finde den information de har brug for. Have et menupunkt der hedder f.eks. overnatning og spisning så besøgende og udstillere kan finde steder i nærheden hvor de kan overnatte og spise. Have et menupunkt der hedder presse hvor man kan finde kontaktinfo til den/de presseansvarlige, billeder fra/om messen og pressemeddelelser. Have et ur der tæller ned til Kulløse miljømesse. Mest bare for sjov og for at give kunden noget spændende ny teknologi. Papirsprototype af hjemmeside For at teste vores ideer til hjemmesiden valgte vi at lave en papirsprototype af den, hvor folk navigere igennem papirerne på samme måde som en hjemmeside, det er bare os der giver dem nye skærmbilleder i form af papir, i stedet for at hjemmesiden selv gør det. Vi valgte denne metode for hurtigt at få en ide om hvilke ideer der var gode, og hvilke der kunne gøres bedre eller bare anderledes. Papirsprototypen testede vi ved hjælp af en tænke-højt-test som går ud på at testpersonen siger højt hvad han/hun tænker, når han/hun interagerer med hjemmesiden. Papirsprototypen har vi scannet ind og lagt under bilag så de er i så stor størrelse som muligt. Side 4 af 12
Udformning af testen Vi valgte at teste den del af hjemmesiden der henvender sig til de besøgende på messen da det er den del af hjemmesiden vi har lagt mest vægt på. Det er formegentlig også den del af hjemmesiden der vil være den mest brugte (hermed ikke sagt at det er den vigtigste). For at teste brugervenligheden har vi bedt vores testpersoner om at finde frem til følgende vha. hjemmesiden (papirsprototypen): - Hvor og hvornår finder messen sted? - Find billeder fra messen - Find en McDonald i nærheden af messen Vi valgte disse informationer da det er nogen af dem som en helt almindelig besøgende nemt skal kunne finde (især det første). Mens de finder frem til de ting vi har bedt dem om, vil vi notere hvad de gør og bagefter spørge hvorfor de gjorde som de gjorde hvis de ikke gør som vi regner med. Bagefter vil vi spørge dem om de synes der er noget der virker ulogisk eller forvirrende og om der er nogen menu-punkter som de synes mangler. Valg af testpersoner Vi valgte at teste vores papirsprototype på vores forældre fordi vi mener de ligger inden for målgruppe af besøgende som rent faktisk kunne finde på at besøge en sådan messe. Samtidig er de ikke helt fremme i skoene når det kommer til brug af internet og hjemmesider, så derfor vil de gerne have enkle/ brugervenlige hjemmesider. Vi er opmærksomme på at vores forældre ikke er de mest optimale testpersoner, da de muligvis vil være farvede og derfor mere milde i deres kritik. For at begrænse dette, gjorde vi dem opmærksomme på dette og bad dem derfor om ikke at være milde, men se på det som en hjemmeside for en messe de overvejede at besøge. Side 5 af 12
Testen Hvornår finder messen sted? Hvad gjorde de: 2 af 4 klikkede på punktet praktisk under generelt, som vi regnede med, men 1 klikkede kun på generelt fordi de andre lignede underpunkter på vores skitse som kan ses her. Den sidste testperson klikkede om messen i stedet for praktisk under generelt. Papirsprototype Screenshot Ændring: Grunden til at de havde svært ved at vælge rigtigt var at de havde for mange valgmuligheder som mindede om hinanden. Derfor har vi valgt at ændre vores menu så der er færre punkter og ikke nogen punkter der minder om hinanden, som f.eks. praktisk og om messen som vi i stedet har lavet til ét punkt, generelt. Find billeder fra messen Hvad gjorde de: Alle 4 testpersoner valgte rigtigt første gang og klikkede på billeder under menupunktet presse. Kiggede dog først hele menuen igennem fordi det lå under punktet presse. Papirsprototype Screenshot Side 6 af 12
Ændring: Efter testen genovervejede vi også menuen her, og kom frem til at det ikke var alle informationerne under presse der var relevante for besøgende, f.eks. pressemeddelelser. Derfor fjernede vi punktet presse da det forvirrede vores testpersoner at det hed dette, og lavede det i stedet om til ét menupunkt der hed billeder. Find en McDonald i nærheden af messen Hvad gjorde de: I denne del af testen var der ingen af testpersonerne der havde problemer med at finde frem til den ønskede information, og vi har derfor valgt ikke at lave de store ændringer, udover at tilpasse menuen så den hang sammen med de tidligere ændringer (færre menupunkter). Var der noget der forvirrede/irriterede dem? Top-menuen hvor man kunne vælge hvem man var, blev der sat spørgsmålstegn ved hvorfor man hele tiden havde muligheden for at vælge, Det ændre sig vel ikke lige pludselig? sagde en af testpersonerne under testen. Ændring: Da vi stadig mener at man skal have muligheden for at vælge om, har vi i stedet valgt at lave det som den første menu på forsiden, som man kan komme tilbage til ved at klikke på forside. Side 7 af 12
Endelige beslutninger i forhold til hjemmesiden - At i stedet for lyse blå og grønne farver, har vi valgt at lave hjemmesiden i mørk konge-blå for overblikkets skyld og for at give gøre hjemmesiden mere rolig at se på, da vi selv har oplevet at hjemmesider der er alt for lyse tit bliver kedelige at se på, eller måske meget svært at læse teksten (hvis der er valgt en for lys farve til skriften på en lys baggrund). Det giver også den lille afveksling i forhold til mange andre hjemmesider, at vi skriver hvid på mørk baggrund i stedet for sort på hvid. - Have færre menupunkterne for overblikket og servicens skyld f.eks. kun punktet generelt og ikke også underpunkterne praktisk og om messen. - Vi havde tænkt os at lave et nedtællings ur men vælger at sløjfe det, da det ikke har nogen relevans. Udover disse ændringer har vi tænkt os at benytte os af vores første ideer til hjemmesiden. Test af den færdige hjemmeside Vi har ikke lavet en test af vores hjemmeside andet end at vi har tjekket at alt virker som det skal, at alle links fører de rigtige steder hen osv. Men hvis vi skulle lave en test af hjemmesiden ville vi nok forme testen på samme måde som testen af vores papirprototype bortset fra at vi ville vælge knap så farvede testpersoner og tage tilfældige personer. Da hjemmesiden heller ikke er fuldt implementeret ville det også være unfair at udføre en test af brugervenligheden da den langt fra ville være så brugervenlig som det endelige resultat. Men fordi vi har rettet hjemmesiden til efter den kritik den fik som papirsprototype har vi på en måde allerede udført en test af den. Værktøjer brugt til hjemmesiden Notepad og html: Notepad er et skriveprogram, som findes på alle computere, kan ikke noget specielt. Skal dette bruges til at lave hjemmesider, skal man huske start og slut tags, og at filen skal gemmes som html. For at browseren forstår hvilket af html dokumenterne den skal læse først, skal man kalde sin forside for index.html. Hvis man så i starten af denne side skriver: <html> <head> </head> <body> </body> </html> Side 8 af 12
Dette vil så vise en hjemmeside, der er dog ikke noget skrift, dette skal skrives mellem <body> og </body> Dette findes der er god, og nem guide til på www.html.dk, denne er også blevet brugt til hjælp under opbygningen af vores side. CSS: Stylesheet til html, bliver brugt til at bestemmer farver, baggrunde, skrifttyper og lignende. Den er også brugt til at bestemme margen i alle siderne. CSS dokumenter, skal man linke til i hver af de html dokumenter som man ønsker skal benytte disse indstillinger. I dette tilfælde, er CSS også brugt til at centrere siden, dette er gjort ved at opbygge hele siden i en container og derefter bestemme bredden på den, og centreret den. Vi har valgt, ikke at lade den bestemme farverne på bogstaverne, men er blevet bestemt af en kode, i body af html dokumentet, som senere er blevet refereret til. Dette dokument bliver ligesom resten af hjemmesiden lavet i notepad, og skal have et navn efterfulgt af.css f.eks. style.css. Dreamweaver: Et betalingsprogram fra Adobe, kan downloades som en 30-dages prøve. Super godt program til fx at lave tabeller på sin side, da den er bygget op i 2 dele, en design del, og en kode del. Hvis programmet skal købes koster det ca. 4500 ved en dansk forhandler, og er derfor ikke særlig udbredt hos private mennesker, men er et program der ofte bliver brugt på steder hvor de lever af at programmere hjemmesider for andre folk, da det gør deres arbejde mht. design meget nemmere. At bruge det er ikke særlig svært, selvfølgelig kræver det tilvænning og tid, for at udnytte programmet fuldt ud, da det har mange smarte og også avancerede funktioner. Design delen fungere ved at der er nogle kommandoer/knapper i programmet, som erplaceret ude i siden. Dem sætter du ind på siden, og så laver den selv koderne for de forskellige ting. Fordelen ved design delen er som sagt de kommandoer der er, og man bare kan trække rundt i elementerne, hvor den derefter selv regulere koderne for højden samt bredden og placeringen. Kode delen, den fungere ligesom at skrive det hele i notepad, du laver selv alle koderne, en fordel i dette program er dog, at den kan vise det færdige resultat, neden under i stedet for man skal åbne sin hjemmeside i en browser for at se ændringerne man har lavet. Man kan også vælge at redigere hjemmesiden i det felt hvor programmet viser det færdige resultat og ikke koderne. Her skriver man så teksten på samme måde som i f.eks. Word hvor man vælger skrift-type, -størrelse og -farve. Derefter skriver programmet koderne for en, oppe i det andet felt hvor man kan følge med i hvad den gør. Vi valgte at prøve dette program da vi synes det lød smart og nemt at bruge, hvilket det også var. Den eneste ulempe som vi har fundet indtil videre er prisen. For studerende er det stort set altid en god ide at prøve og finde et alternativt open source program som er gratis. Mange gange kan de stort set det samme som de programmer de er inspireret af. Denne gang valgte vi i stedet for et open source program, at teste denne trial-version af et meget dyrt program for at se hvordan det var, som tidligere sagt rigtig godt, hvilket er heldigt når programmet koster så meget som det gør. Side 9 af 12
Opsamling Selvom vores hjemmeside er langt fra færdigudviklet mener vi at vi har fået lavet basis for en god hjemmeside, der rammer vores målgrupper. De mest færdige dele af hjemmesiden er forsiden og besøgende delen som er dem der giver det bedste indtryk af det færdige resultat, som vi mener tilfredsstillende trods små mangler og grafiske småfejl (f.eks. bannerets baggrundsfarve). Side 10 af 12
Bilag Papirsprototype - Forside Papirsprototype - Praktisk Side 11 af 12
Papirsprototype - Billeder Papirsprototype - Restauranter Side 12 af 12