Gruppe: Natalia Burmistrova Jørgensen Yulia Karstensen Helle Svinth Nielsen Günes Dolu

Link til website:

http://www.multimedieteam.dk/1812/gruppe2/wp1/wp/

FDF Århus 14 kreds

1

Indholdsfortegnelse

INDLEDNING 2

VALG AF METODE 2

Foranalyse 3 Informationsindsamling – kundens behov og ønsker 3

Projektbeskrivelse 3

Undersøgelse 5 Ideudvikling og brainstorm 5

Konceptbeskrivelse 6

Design 7 Informationsdesign 7

Interaktionsdesign 7

Præsentationsdesign 8

Designparametre 9

Form 9

Typografi 9

Illustration 9

Farve 10

Animation/Lyd 11

Komposition 11

Eyetracking 11

AIDA-modellen 12

Realisering 14

Evaluering 14

BILAG 15

Kontaktperson: Yulia Karstensen

Email: julle.k@mail.dk

2

Indledning

Efter 6-ugers Multimediedesign og Interaktions kursus på Erhvervsakademiet i Aarhus

har vi fået til opgave at lave en hjemmeside for foreningen FDF Århus 14. kreds.

Foreningen, FDF Århus 14. kreds, har et domæne, men har ikke fået deres hjemmeside

op at køre endnu.

Valg af metode1

I denne rapport vil processen fra start til slut blive beskrevet detaljeret. Til dette vil

HOME (Holistic Open Multimedia development mEthod) modellen benyttes, som er en

helhedsorienteret og åben multimedieudviklingsmetode. HOME modellen benyttes som

struktur og arbejdsredskab i denne rapport, med formål at systematiserer arbejdet i

projektforløbet, samt sætte fokus på de valg der bliver truffet undervejs i forløbet.

HOME modellen består af fire trin:

Foranalyse

Undersøgelse

Design

Realisering

Disse fire trin benyttes i det omfang der er nødvendig for projektet og vil derfor blive

afgrænset i tilstrækkelig omfang.

1 Fischer & Oosterbaan: ”Digital Media Management”, 3. udgave

3

Foranalyse

Informationsindsamling – kundens behov og ønsker

På baggrund af det første kundebesøg og udleverede projektoplæg, er vi kommet frem til

følgende elementer som vi finder væsentlig for projektet.

Hjemmesiden skal være nem og enkel at bruge, dog signalere at det er en seriøs

forening der også går ind for leg, hygge, glæde og fællesskab. Derudover skal

hjemmesiden være indbydende for kommende medlemmer og andre besøgende.

Hjemmesiden skal være nem og enkel at bruge både for brugernes skyld, men

også for lederens skyld. Da det er lederne der skal opdatere hjemmesiden, skal det

helst være overskueligt for dem at opdatere og bygge videre på hjemmesiden.

En funktion der kan oplyse både nuværende og kommende medlemmer om

kommende begivenheder. Da der er tale om få begivenheder om året, er de ikke

interesseret i at få en kalender på siden, da den vil være tom.

Google-map eller et adresse felt, så kommende medlemmer får mulighed for at se

hvor FDF Århus 14. kreds befinder sig.

Samt linke hjemmesiden til både FDF hjemmesiden samt Christianskirken.

Projektbeskrivelse

FDF Århus 14. kreds ønsker at få lavet en hjemmeside, der skal være enkel og nem at

bruge. Foreløbig har foreningen ikke nogen hjemmeside, og vil gerne have en

hjemmeside der kan benyttes af tre forskellige brugere;

Deres nuværende medlemmer og deres forældre

Lederne, som skal opdatere siden

Kommende medlemmer

4

Ydermere er målsætningen for projektet, at både børnene og deres forældre kan bruge

hjemmesiden som et ”opslag”, så de kan finde de relevante oplysninger, samt at

hjemmesiden kan gøre et godt indtryk på besøgende så hjemmesiden kan være med til at

hverve nye medlemmer.

Forløbet for projektet tager udgangspunkt i udviklingsmetoden vandfaldsmetode, da det

er en lineære og faseopdelt proces. Dermed var det vigtigt at løbende godkende, og

dokumentere processen. Vi fandt hurtigt begrænsninger ved anvendelse af denne metode,

da der dukkede uforudsete udfordringer op under forløbet. Derfor endte vi op med at

have en vekselvirkning mellem denne metode og den agile metode. Dette har resulteret i,

at vi nogle gange var lineære og faseopdelte under processen, mens vi andre gange

afprøvede skitser, som vi løbende prøvede at forbedre os i, hvilket resulterede i, at vi

måtte omstille vores måde at arbejde på ved vanskelige situationer.

5

Undersøgelse

Undersøgelsestrinnet i HOME modellen består ofte af en række procesrettede aktiviteter,

som fx dannelse af projektgruppe, organisering og økonomi. På grund af dette projekts

korte forløb vil afsnittet her koncentrere sig om produktrettede aktiviteter, mens de

procesrettede aktiviteter er nedtonet.

Ideudvikling og brainstorm

I idéudviklingen arbejdede vi med brainstorm og mindmaps. Vi begyndte med at

undersøge relevante hjemmesider og noterede alt, som vi synes kunne være en god ide til

vores nye side. Derfra gik vi videre til at brainstorme på FDF. Vi samlede til sidst vores

idéudvikling i et mindmap, som havde tre hovedspor: Enkel, Overskuelig og Levende. I

processen lavede vi et antal skitser, hvorfra vi valgte en at arbejde videre med.

Figur 1 - Ideudvikling

6

Konceptbeskrivelse

FDF's nye site skal være let at bruge. De informationer som nuværende og kommende

medlemmer, som den primære målgruppe, oftest søger, skal ligge på forsiden. Alt indhold

skal være let og offentligt tilgængeligt, så det kan være med til at fremskaffe interesse

blandt nuværende og kommende medlemmer. Sitet skal også være en inspiration, der kan

vise at foreningen har det sjovt og hyggeligt. Samtidig kommer foreningens billeder til at

få en mere fremtrædende rolle, de skal vises frem og skal være et af de elementer, som

man lægger mest mærke til.

Figur 2 - Konceptbeskrivelse

7

Design

Informationsdesign

I indsamlingen og udvælgelsen af den information, siden skal formidle, har vi taget

udgangspunkt i de ønsker til sidens funktion, som kunden har udtrykt samt de

eksisterende skriftlige materialer som kunden har udleveret til os. Siden skal først og

fremmest være informativ og let at gå til og finde oplysninger på. Derfor er alle

informationer og undersider tilgængelige direkte via menuen. På forsiden har vi desuden

fremhævet de vigtigste informationer, som brugeren skal kunne finde hurtigt; den

nærmeste fremtids aktiviteter i kredsen, adressen til kredshuset, link til infosiden for dem

der er interesseret i at blive medlem samt links til FDF's hovedside og Christianskirken,

som kredsen er tilknyttet. Vi har lagt vægt på tilgængelig og kortfattet information og

derudover kan brugeren så vælge at læse mere og udforske de forskellige undersider

nærmere. Sproget og stilen på siden har vi ønsket skulle være uformelt og inkluderende,

ligesom den er det i de materialer (f.eks. 'Forældrefolderen'), som kunden har udleveret.

Tanken er selvfølgelig, at kunden selv vil kunne udfylde de forskellige undersider med

yderligere tekst og billeder.

Interaktionsdesign

Brugerens interaktion med siden, består primært i at kunne klikke sig rundt mellem de

forskellige sider og informationer. Navigationsstrukturen på siden er hierarkisk opbygget,

med en forside og en hovedmenu, der forgrener sig i undermenuer. Menuen er tilgængelig

på alle sider og undersider. Links og menupunkter ændrer farve, når brugeren fører

musepilen hen over dem og ved de sider der har undersider vil en undermenu dukke op.

Desuden er der flere steder links der forbinder sider på kryds af menupunkterne; f.eks. et

link på siden 'Bliv FDF'er', der fører brugeren videre til 'Kontakt'-siden og

kontaktformularen, hvorigennem brugeren f.eks. kan stille uddybende spørgsmål. Dette

for at gøre det nemt for kunden at finde de relevante informationer i en naturlig

forlængelse af hinanden.

8

Præsentationsdesign

Inden vi begyndte arbejdet med at sætte hjemmesiden op, planlagde vi ved hjælp af

skitser, hvordan vi ville have den endelige side til at se ud. Udgangspunktet var, at siden

skulle være let tilgængelig, overskuelig og ikke kræve for meget af brugeren. For at

tilpasse den målgruppens erfaringer og forventninger, har vi placeret sidens forskellige

elementer, der hvor vi mener at brugeren har en forventning om at finde dem.

Vi valgte, at siden skulle opdeles i tre hovedområder; header, en højre sidebar og et

område til sidernes individuelle indhold. Headeren med menubar skulle gå igen på alle

sider, mens sidebaren skifter indhold eller helt forsvinder på andre sider, alt efter hvad der

er relevant for den enkelte sides indhold og layout. Sidens tekst-elementer skulle være

kortfattede med tydelige overskrifter og suppleres af billeder.

Ud fra kundens ønsker og en vurdering af målgruppen, ønskede vi at stilen og

stemningen på hjemmesiden skulle være simpel og minimalistisk men også legende og

imødekommende. Vi ville have en side med et lyst og 'rent' æstetisk udtryk, som virker

indbydende på sidens brugere.

Forside

Nyheder Hvem er vi? Galleri Kontakt

FDF

Christianskirken

Om FDF Klasser Bliv

FDF’er Ledelse

FDF

festival

Sommer

lejr 2005 Kano turen

Figur 3 - Flowchart

9

Designparametre

I det følgende gør vi mere detaljeret rede for vores overvejelser og valg omkring design

og layout ud fra de seks designparametre.

Form

I udformningen af hjemmesiden har vi, som skrevet lagt vægt på, at kunden ønsker en

simpel og overskuelig hjemmeside, som det er nemt at navigere rundt på. Vi har derfor

søgt at finde en balance, hvor der ikke indgår for mange elementer på den enkelte side,

men hvor alle de nødvendige funktioner og informationer samtidig er let tilgængelige via

menuen. Ud fra de samme tanker har vi valgt, at der ikke skulle indgå længere

tekststykker på forsiden, men at brugerne til gengæld kan finde videre til det de søger

med et enkelt klik.

At skabelonen med header, menu, et område til sideindhold og en footer går igen på alle

siderne, skal være med til at skabe et ensartet udtryk. I headeren indgår FDF's logo og

navnet på kredsen i venstre side samt et foto i højre side. Herunder ligger en vandret

menu med links til alle undersiderne og på udvalgte sider den højre sidebar, hvis indhold

er opdelt i bokse med tydelige overskrifter.

Typografi

Den generelle skrifttype på siden er Segoe UI, Arial, Sans-serif. Skrifttypen, som er uden

fødder, er valgt med tanke på, at siden skal have et simpelt og læsevenligt layout. Af

samme årsag har vi valgt ikke at bruge flere forskellige skrifttyper. Samtidig er der tale

om en font der egner sig godt til web – en såkaldt websikker skrifttype.

Illustration

Den første illustration man møder på siden er logoet, som skal skabe genkendelighed og

tydeligt vise brugeren om de er endt på den rigtige side.

Vi har derudover i høj grad ønsket at bruge illustrationerne på siden som blikfang og til at

10

signalere nogle af de værdier FDF Århus 14. kreds står for, og som de gerne vil formidle

til specielt de brugere der ikke allerede er tilknyttet kredsen. Billederne – både det i

headeren og dem der indgår på de forskellige sider - er valgt, for at illustrere at fokus

ligger på fællesskab, glæde, leg og gode oplevelser. Med andre ord; de skal vise, at det er

sjovt at være medlem af kredsen.

På siden 'Ledere' er kredsens ledere præsenteret med billeder (da vi kun kender til de to

ledere, vi har mødt, har vi sat deres billeder ind som en illustration af ideen med siden).

Dette for at skabe en afveksling fra ren tekst, men også for at skabe åbenhed og en

tryghedsfornemmelse hos de forældre, der tænker på at melde deres børn ind i kredsen.

Omvendt har vi udvalgt nogle lidt 'sjove' billeder, så det ikke fremstår så formelt.

Farve

I valget af farver til siden, har vi ønsket at lade den blå farve gå igen, fordi den af mange

forbindes med FDF's blå uniformer og således skaber en genkendelighed og et

tilhørsforhold. Vi har dog valgt at bruge en lysere blå farve end den 'officielle' til

11

baggrund, da det gør siden mindre tung at se på, og dermed skaber et mere stilrent og

imødekommende indtryk. Samtidig gør den forholdsvist neutrale baggrund, at der ikke

tages opmærksom fra sidens indhold. Den mørkere blå FDF-farve indgår som baggrund

for logoet - for at bevare genkendeligheden og fremhæve sidens afsender - og som

baggrundsfarve for sidebarens overskrifter og forsidens tekstbokse.

På sider med læsetekst er baggrunden hvid med sort skrift for enkelthedens og

læsevenlighedens skyld. Over for dette bruges billederne til at skabe farver og variation

på siden.

Animation/Lyd

Vi har valgt ikke at anvende lyd og animation på siden, da der ellers kommer til at 'ske'

for meget, hvilket ville gå ud over den ønskede minimalisme og overblikket. Vi har

desuden ikke fundet nogen praktisk anvendelse for disse parametre, som gør det

nødvendigt at inddrage dem i designet af siden.

Komposition

Eyetracking

Eyetracking-analyse kan anvendes til at se, hvad der tiltrækker brugerne på en webside.

12

Der er lavet flere undersøgelser ved hjælp af eye-tracking hvor brugerens læsemønster på

hjemmesider dokumenteres. På en typisk hjemmeside ser øjet først hjemmesidens øverste

venstre hjørne. Efter et kort stykke tid løber øjet fra venstre mod højre og først herefter

falder blikket længere ned ad hjemmesiden. Derfor har centrale elementer, som

navigation og logo, fundet sin plads i dette område. Vi har lavet en stor overskift under

det eksisterende FDF-logo, så det er meget tydeligt at det er en FDF-forening og at det

drejer sig om en afdeling i Århus.

Grafiske elementer kan herfra bruges som trædesten, der hjælper øjet videre. Billeder er

gode til at fange opmærksomhed, og siger som bekendt mere end tusinde ord. Vi har valgt

billeder af unge FDF-spejdere i uniform, for at vise nogle af kredsens aktiviteter og

glæden ved at være FDF'er.

En anden ting der stjæler vores opmærksomhed er overskrifter, dog ikke mere end at der i

gennemsnit kun bruges omkring et sekund på en overskrift. Lange overskrifter læses kun

i halvdelen af tilfældene, og læseren hæfter sig ofte kun ved de første par ord før der

bliver skimmet videre. Overskrifterne har vi derfor lavet meget korte og præcise.

Over forsidebilledet er indsat et af FDF's 'slogans' og under en meget kort og præcis tekst

med link til informationer om kredsen for nye medlemmer

AIDA-modellen

AIDA beskriver de 4 trin i en salgsproces: Attention, Interest, Desire og Action. Modellen

Figur 4 - Eye tracking

13

blev første gang introduceret i 1930’erne af E. K. Strong og beskriver den proces som

kunder går igennem, når de skal beslutte sig for et køb, men modellen kan også bruges i

andre sammenhænge, f.eks. til at analysere – eller opbygge - en hjemmesides

komposition.

Attention

Det er her brugerens opmærksomhed først fanges, hvilket jf. eyetracking-analysen oftest

vil være i sidens øverste venstre hjørne, hvor vi har placeret foreningens logo. Det viser

brugeren hvem afsenderen er, og man kan herfra hurtigt vurdere om det er den side man

søgte, eller en side der har ens interesse.

Interest

Dernæst vil brugerens interesse rette sig mod billederne der er indsat i headeren og

centralt på forsiden. De skal få siden til at virke levende, imødekommende og skabe

interesse for sidens øvrige indhold.

Desire

Herefter kan brugerens opmærksomhed rettes mod de forskellige overskrifter og

informations-bokse, der skaber et overblik over de forskellige muligheder og

informationer siden indeholder.

Action

Når ovenstående elementer har skabt et ønske hos brugeren om at udforske siden

nærmere, kan denne vælge at klikke sig videre via overskrifter, menu eller

informationsbokse, hvis den ønskede information ikke findes allerede på forsiden, f.eks. i

form af adresse eller næste aktivitet i foreningen.

14

Realisering

Websitet er opbygget i Wordpress, Efter at have fastlagt et koncept og et ønsket layout for

siden, udvalgte vi et tema, Mantra, som kunne opbygges efter den skabelon vi havde

skitseret for siden. Det er et tema hvor layoutet fremstår enkelt, men med mange

muligheder for at tilpasse siden efter vores idé. Undervejs i processen har vi undersøgt og

afprøvet en lang række temaer for at finde det bedst egnede. Vi har også stået i den

situation, at vi har påbegyndt arbejdet med at opsætte hjemmesiden i et tema, som så ved

nærmere bekendtskab viste sig at have mangler i forhold til det vi gerne ville med det. I

de situationer har vi måttet gå et skridt tilbage i processen og finde et bedre egnet tema at

bygge siden op i. Denne proces har været tidskrævende, men betyder omvendt, at vi har

kunnet føle os meget sikre på vores endelige valg.

Vi har undervejs i forløbet uddelegeret forskellige arbejdsområder og opgaver imellem

os, for at kunne arbejde mest effektivt. Den indledende brainstorm, mindmaps og skitser

gav os et godt fælles udgangspunkt for det videre arbejde, men vi har også løbende

diskuteret og taget alle de vigtige beslutninger i fællesskab. Alle de dage det var muligt,

har vi mødtes og arbejdet på projektet i fællesskab, og generelt har vi sørget for, at alle

medlemmer i gruppen har været involveret i samtlige processer i forløbet.

Forskellige dele af projektet er, som man kunne forvente, skredet internt i forhold til den

oprindelige tidsplan, men overordnet føler vi alligevel, at vi har haft et overblik og i

sidste ende en god tidsstyring.

Evaluering

Målet var at lave et enkelt, informativt og let tilgængeligt website til FDF Århus 14.

kreds, som samtidig skulle virke tiltalende for både nuværende og kommende

medlemmer. Det synes vi at vi, med det færdige resultat, har opnået.

Det har været en forholdsvis kort proces, hvor vi hurtigt skulle have et samarbejde op at

køre mellem fire mennesker med forskellige baggrunde og uden det store kendskab til

hinandens arbejdsmetoder og egenskaber. Det giver både nogle muligheder og nogle

udfordringer, men alt i alt har vi haft et godt samarbejde og en god arbejdsdeling.

15

Bilag

Tidsplan

Som første trin i processen blev der udarbejdet en tidsplan i gruppen for at kunne

overskue tidshorisonten i projektet nogenlunde.

Planlagt tid Forbrugt tid

Forundersøgelse

Kundebesøg

Ideudvikling

Tidsplan

2

1

1

3

2

2

Undersøgelse

Mind map/ Brainstorming

Materialer

3

4

5

5

Design

Designparametre

Flowchart

Storyboard

Designmanual

3

2

2

1

4

1

1,5

1

Realisering

Installation

Tema opsætning

Plugins

Kodning

Rapportskrivning

Evaluering

1

2

2

1

10

1

2

6

4

1

12

1

Samlet tid 36 50,5

Designmanual

Typografi

Segoe UI

abcdefghijklmnopqrstuvxyzæøå

ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ

Segoe UI Bold

16

abcdefghijklmnopqrstuvxyzæøå

ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ

Farver

Wordpress

Tema: Mantra (1.8.9)

Plugins:

All in one Favicon

FS Contact Form

NextGEN Gallery

TS Custom Widgets

Ultimate TinyMCE

17

Storyboards

Forside

Menubar og header er ens for alle sider Billede, navn

headingindex_#. jpg

Medieelementer

Tekst Navigation Grafik Interaktioner

introtekst Menubar Billedet af glade

FDFer

Kontrastfarver

Adressen

søgefelt søgefunktion

Logo

Footer er ens

for alle sidder

search

Aktiviteter

Adresse

Links

18

Galleri

search

Klassemøder

Adresse

Links

img

Klasser

19

1050 px 200 px

800 px 250px

1050 px

Skelet