Page 1

Multimedieteknologi og interaktionsdesign Hold 1012—Odense Underviser—Per Rasmussen, 2012

Maja - Rikke - Mikael - Torben


Praktisk information Kontakt til gruppen:

Maja Boesen boesen6@hotmail.com Rikke Maria Nielsen rikkemaria.n@gmail.com Mikael Olsson mikael@220870.dk Torben Rasmussen torben_fruelund_rasmussen@yahoo.dk

Link til hjemmesiden: http://phpkursus.tietgen.dk/1012/maja/wordpress/

M u l t i m e d i e t e k n o l o g i

Side 2

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

Š

2 0 1 2


Indhold 4 4 4 6 7 7 7 8 9 9 10 11 11 12 13 14 14 14 15 15 15 16 16 17

18 18 18 19 20 21 22 22 23 23 23 23 24 26 27 28 29 29 29 30 31 32 33 34

Indledning Problemstillng Afgrænsning Arbejdsmetode Foranalyse Kundemøde Informationsindsamling Projektbeskrivelse Undersøgelse Ideudvikling Kommunikationsplan Afsender Budskab Modtager Projektplan Design Præsentation for kunden Revurdering af planer Informationsdesign Sprog Slogan Overskrifter Brødtekst Præsentationsdesign

M u l t i m e d i e t e k n o l o g i H o l d

o g

De 6 designparametre Form Typografi Illustration Farver Animation Lyd Komposition Attention Interest Desire Action Storyboard Interaktionsdesign Flowchart Interaktive elementer Realisering Finpudsning og færdiggørelse af produktionen Præsentation og godkendelse fra kunden Evaluering Teamwork Perspektivering Konklusion Bilag

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 3


Indledning

Afgrænsning

Projektopgaven er lavet på baggrund af et 6-ugers kursus i Multimedieteknologi og Interaktionsdesign. Opgaven består af to dele; en hjemmeside og en rapport.

Projektets omfang består i at producere en hjemmeside baseret på WordPress. Der er lagt vægt på, at kunden skal have en oplevelse af at se en fuldt funktionsdygtig hjemmeside. Siden skal således opfylde følgende punkter:

Formålet med projektopgaven er at udvikle en ny hjemmeside for en kunde. Kunden er Slægtshistorisk Forening Odense.

Forside med færdigt layout Udvalgte eksempelsider, f.eks. kalender, galleri, bestyrelse, kontaktformular

Problemstilling Hvordan skaber man en hjemmeside for Slægtshistorisk Forening Odense, som både kan fastholde de eksisterende brugere, samt tiltrække nye brugere?

Fuld menu navigation Fungerende links Teori og metode

M u l t i m e d i e t e k n o l o g i

Side 4

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Det første skridt i processen er at vælge, hvilken udviklingsmetode man vil bruge. Vi har brugt HOME-modellen, som er en åben og helhedsorienteret metode. Modellen består af fire trin, som indeholder forskellige aktiviteter i relation til både proces og produkt, så man let kan organisere arbejdet. Foranalysen har til formål at fastlægge rammerne om projektet, kundemøder, informationsindsamling og projektbeskrivelse.

Designtrinnet er koncentreret omkring opbygningen af produktet. Men på dette trin foretages der stadig en vurdering, evaluering og følgende regulering af projektplanen. På realiseringstrinnet foretager man en endelig vurdering af planerne og gør produktet færdigt. Til sidst evaluerer man hele projektet.

M u l t i m e d i e t e k n o l o g i H o l d

I undersøgelsestrinnet bliver arbejdsteamene etableret og de første idéer kommer på bordet. En kommunikationsplan, der beskriver afsender, budskab og målgruppe, bliver udarbejdet. Endvidere bliver der fastlagt en endelig projektplan og konkrete samarbejdsaftaler.

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 5


Arbejdsmetode I projektplanlægningsfasen var vores udgangspunkt at bruge vandfaldsmetoden. Vi startede med at definere vores udgangspunkt og lavede derefter en plan for, hvordan vi skulle realisere den. Vi havde planlagt en lineær og faseopdelt proces, hvor vi fulgte punkterne i vores tidsplan. Undervejs i arbejdet med at skabe hjemmesiden, fik vores udviklingsmetode dog mere præg af den udforskende udvikling, som lægger vægt på en afprøvende og brugerstyret udvikling. Dette skyldes den måde, som WordPress er opbygget på og mulighederne for individuelle justeringer, som findes i de forskellige temaer. Temaerne tilbyder forskellige funktioner og de plugins, der kan installeres, fungerer ikke for alle temaer. Derfor må man prøve sig frem og konsekvensen er, at slutresultatet kan variere fra udgangspunktet. En informationsindsamling, som er foregået i undersøgelsesfasen og et yderligere kundebesøg, mens arbejdet med hjemmesiden var i fuld gang, understøtter den udforskende udviklingsmetode.

M u l t i m e d i e t e k n o l o g i

Side 6

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Foranalyse Kundemøder Ved første kundemøde forklarede kunden sine ønsker og behov for en ny hjemmeside. Vi fik defineret afsender, modtager, budskab og mål, så en kommunikationsplan kunne opstilles i undersøgelsesfasen. Kunden udleverede materiale fra den gamle hjemmeside. Hensigten var, at vi kunne bruge materialet til den nye hjemmeside, men det viste sig at være i uoverskuelige og usorterede mængder. Endvidere viste det sig, at materialet ikke kunne uploades til skolens webserver for videredistribution til hele holdet. Derfor blev kunden bedt om at foretage en sortering og kun uploade udvalgte billeder.

Informationsindsamling Vi foretog informationsindsamling blandt foreningens medlemmer ved andet kundemøde, som foregik under et møde i foreningen. Her talte vi med nogle af foreningens medlemmer for at høre, hvad deres ønsker til en ny hjemmeside var og hvad de eventuelt mente var godt ved den gamle hjemmeside. Vi fik desuden feedback på vores første idéer. Ved at deltage i mødet kunne vi lave observationer på livet i foreningen og fik et bedre indtryk af medlemmernes kunnen samt brug af computer og digitale medier.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 7


Projektbeskrivelse Den nuværende hjemmeside for slægtsforskerne i Odense www.odenseslaegt.dk er lavet i slutningen af 1990’erne i FrontPage og er ikke tidssvarende. Der er ca. 300 medlemmer i foreningen, men kun 30 % bruger hjemmesiden. Kunden ønsker en moderne hjemmeside, der opfylder de nuværende medlemmers behov og gerne samtidig kan tiltrække nye medlemmer. De mest brugte sider er siden med møder og foredrag samt siden med links til eksterne hjemmesider.

M u l t i m e d i e t e k n o l o g i

Side 8

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Undersøgelse Idéudvikling Den nuværende hjemmeside mangler overskuelighed for brugeren. Der er mange lag og underafsnit, som ikke er blevet inddelt i logiske og sammenhængende grupper. Siden vil give meget information, men allerede fra forsiden bliver brugeren bombarderet med information og mange valg skal træffes. Den gamle hjemmeside giver et indtryk af, at emnet slægtsforskning er tørt og kedeligt. Derfor mente vi, allerede fra vores første brainstorming, at vi ville give den nye hjemmeside et moderne, let og indbydende udtryk med flotte billeder og letforståelige emner i hovedmenuen. Den skal være brugerrelevant, let at navigere rundt på og emnerne i hovedmenuen skal præcist beskrive, hvilke underemner de indeholder. Forsiden skal fange interessen og give brugerne et hurtigt overblik over de valgmuligheder, de stilles over for. Som sagt er ønsket, at hjemmesiden ikke kun skal bruges af slægtsforskningsforeningens nuværende medlemmer, men også kunne tiltrække nye og måske også yngre medlemmer.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 9


Kommunikationsplan Der er udarbejdet en kommunikationsplan, hvor der er set nærmere på hjemmesidens afsender, budskab og modtagere. Dette er gjort for at skabe et overblik over, hvilken kommunikationssituation vi skal håndtere og som vi således kan støtte os til i arbejdet med udviklingen af hjemmesiden.

M u l t i m e d i e t e k n o l o g i

Side 10

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Afsender

Budskab

Hjemmesidens afsender er Slægtshistorisk Forening Odense, som har eksisteret siden 1971. Foreningen er en lokal forening og har et nært samarbejde, med en anden lokal forening, DIS-Odense, som er en del af DIS-Danmark. Foreningerne afholder faste workshops i Odense Kommunes Uddannelsescenter. Disse møder er ofte fælles.

Budskabet for hjemmesiden er at præsentere foreningen visuelt gennem digitale medier. Forsiden er det første indtryk, der møder brugeren, når han klikker ind på hjemmesiden. Derfor er der lagt stor vægt på designet. Brugeren skal ved første øjekast på siden få et indtryk af, at afsenderen er en moderne, tidssvarende og dermed interesant kommunikationspartner, som der er værd at bruge sin tid på.

Formålet med foreningen er at give folk, der interesserer sig for slægtsforskning, et sted, hvor de kan få støtte i deres arbejde med slægtsforskning. Arbejdet med at søge kilder er meget omfattende og kræver, at man sætter sig grundigt ind i mange ting, som både involverer brug at digitale medier og manuelt opslag i gamle arkiver.

Sagt med andre ord, budskabet er at få besøgende til at gå videre på siden og læse om foreningen, aktiviteterne og bruge deres ressourcer.

Foreningen tilbyder også medlemmerne et vist fællesskab, hvor de kan være sammen om deres hobby. Foreningen laver også udflugter til andre lokaliteter, i forbindelse med slægtsforskning.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 11


Modtagere Folk der slægtsforsker er ofte pensionister med en gennemsnitsalder på 60 år for kvinder og 65 år for mænd. Flere kan ikke engelsk, hvilket gør det nødvendigt, at alt tekst på hjemmesiden er på dansk. Det er vigtigt at siden er let overskuelig og brugervenligheden er i højsædet, da gennemsnitsalderen er forholdsvis høj. Der er stadig en stor del mennesker i denne aldersgruppe, der mangler erfaring i brug af computer og internettet. Problemer med hjemmesiden må ikke være en hindring for slægtsforskerne. Vi har opdelt modtagerne i tre grupper: De primære modtagere er først og fremmest de af foreningernes medlemmer, som ikke gør brug af hjemmesiden, på grund af manglerne brugervenlighed. Hjemmesiden skal fange opmærksomheden fra de besøgende, få dem ind og læse om slægtsforskning, blive interesseret i emnet og forhåbentlig blive medlem af foreningen. De sekundære modtagere er de foreningsmedlemmer, som bruger siden i forvejen. De skal have oplevelsen af en hjemmeside, der ikke kun har fået et nyt design, men også er blevet betydeligt mere brugerrelevant. De tertiære modtagere er andre slægtsforskningsforeninger, som kan henvise deres medlemmer til siden.

M u l t i m e d i e t e k n o l o g i

Side 12

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Projektplan Vores projektplan har været dynamisk og åben for ændringer gennem hele projektet. Første dag lavede vi en optimistisk ugeplan, hvor der blev indlagt to ’buffer’-dage i tilfælde af, at projektet trak ud (se bilag 1a).

Whiteboardet blev også anvendt til at overskueliggøre opgaver, der viste sig at kræve længere tid end forventet. Hver dag blev startet med fastlæggelse af, hvad der skulle laves og dagene blev afsluttet med en opsummering af, hvad vi havde nået.

For at kunne styre arbejdsprocessen, blev alle arbejdsopgaver skrevet op på whiteboard. Det gav et stort overblik over arbejdsforløbet og skabte motivation i gruppen, når vi kunne sætte hak ud for udførte opgaver.

Det blev indført i en dagbog (se bilag 1b). Hver dag var det nødvendigt, at der også blev foretaget problemløsninger hver for sig hjemmefra, da nogle af de planlagte aktiviteter tog længere tid end forventet. Under arbejdet hjemmefra holdt vi kontakt via mail og telefon.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 13


Design Præsentation for kunden Det tredje kundemøde foregik i vores arbejdslokaler, hvor kunderepræsentanten så vores første udkast til hjemmesiden samt skitser, idéer og valg af WordPress-tema. Vi havde en god dialog med kunden om vores idéer og hans forestillinger til videreudvikling af hjemmesiden. Herfra kunne vi gå i gang med arbejdet med at realisere hjemmesiden.

Revurdering af planer I vores planer for hjemmesiden indgik, at vi ville fjerne breadcrumbsstien, da vi mente den var unødvendig og blev til et forstyrrende element på siden. Men under vores tredje møde med kunden viste det sig, at disse planer måtte revurderes, da kunden mente det var en vigtig del og derfor indgav ønske om, at den skulle beholdes.

M u l t i m e d i e t e k n o l o g i

Side 14

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Informationsdesign I hjemmesidens informationsdesign har vi lagt vægt på flere forskellige aspekter:

Sprog Da en stor del af foreningens medlemmer ikke kan engelsk, var det en vigtig del af hjemmesidens design, at alle tekster inkl. søgefelt, kontaktformular, kalender osv. blev oversat fra engelsk til dansk. Selvom vi havde valgt at installere en dansk version af WordPress, er de fleste tilgængelige plugins på engelsk. Denne ændring har vi foretaget i core-koderne ved hjælp af Notepad++.

Slogan Da forsiden skal fange de besøgendes opmærksomhed, har vi valgt at indsætte et slogan - ”Er du i familie med kongen af Bali?” - der med humor skal vække brugerens interesse. Sloganet er indsat som ’quote’, der viser, at foreningen taler direkte til brugeren. Dette er en del af den oprindelige blog-funktion, der er indbygget i WordPress. Vi synes den fungerer godt til sloganet og har derfor valgt at beholde den. For at se forslag til andre slogans se bilag 2.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 15


Overskrifter For at give kunden et indtryk af hjemmesidens fulde opfang har vi givet alle sider en sigende overskrift, som samler sidens indhold på en nem og overskuelig måde.

Det er gjort for at give en umiddelbar forståelse for hjemmesidens opbygning og navigation. Et af kundens ønsker var netop, at siden skal være simpel.

Brødtekst Kundens ønske var at se et forslag på design og struktur til en ny hjemmeside til foreningen, hvor han selv kunne indsætte tekst. Men da vi mener, at det er en vigtig del af vores design, at hjemmesiden fremstår som en færdig side, har vi valgt at brødteksten er fyldt med Lorem ipsum, for at give kunden en fornemmelse af indhold.

M u l t i m e d i e t e k n o l o g i

Side 16

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Præsentationsdesign I vores overvejelser omkring forholdet mellem æstetik, funktion og teknik/økonomi, valgte vi at kigge på nogle temaer i Elegantthemes, som er en udbyder af premium temaer.

Vi vægtede de æstetiske og funktionelle parametre højt. Derfor valgte vi at investere i Elegantthemes, som dermed blev en overvejelse i det økonomiske parameter.

Disse temaer har nogle ekstra funktioner, som man ikke får med i de gratis temaer. Vi fandt et tema, der levede op til de æstetiske krav, vi havde opsat i foranalysen om en moderne, let og luftig hjemmeside.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 17


De 6 designparametre I gennem hele forløbet med udviklingen af hjemmesiden, har punkterne i ’de 6 designparametre’ fungeret som basis, for de valg vi har truffet undervejs i vores arbejdsproces. De 6 designparametre er: Form - Typografi - llustration - Farver - Animation - Lyd Form Der er blevet lagt stor vægt på, at vores hjemmeside har et let og luftigt udtryk og samtidig er let at navigere rundt på for brugeren. Den generelle opbygning af siderne er, at øverst findes en header, hvor logoet er placeret til venstre, her under en menulinje med otte emner inkl. link til forsiden (Hjem) og sitemap, nederst findes footer med kontaktinformationer og link til Facebook-gruppe. Hjemmesiden har en fast form med en baggrund, der tilpasser sig skærmens størrelse. Typografi Ved valg af skrifttype gennemgik vi alle fonts, der er indlagt i vores WordPress-tema. Ved hver font lavede vi en afstemning udfra, hvor læsbar hvert gruppemedlem mente teksten blev og om den passede til det udtryk, vi ønsker, vores hjemmeside skal have (bilag 3). Vi valgte, at både head og body skal være i skrifttypen Ubuntu. Vi lagde vægt på, at skrifttypen er let læselig, uden fødder men med runde kanter, der bløder den op og giver den mere personlighed i forhold til fx fonten Droid Sans. Da det er en skrifttype, der følger med temaet er vi sikret, at den er websikker.

M u l t i m e d i e t e k n o l o g i

Side 18

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Illustration Ifølge eye-tracking-modellen er det første en bruger ser på en hjemmeside øverste venstre hjørne, hvilket er årsag til, at vi har placeret vores logo netop her. Logoet har vi valgt at forny. Foreningens gamle logo var meget detaljeret og utydeligt, vi ønskede derfor at udvikle et nyt og moderne logo, der var tidsvarende og passede til udtrykket på vores hjemmeside. I logoet indgår foreningens navn og en lup. Valget af luppen faldt på baggrund af, at det skulle symbolisere det foreningen står for, men samtidig skille sig ud fra det typiske stamtræ, som andre foreninger bruger og derved skabe et unikt udtryk. Endvidere har det været muligt at integrere luppen i navnet på foreningen idet det danner O’et i Odense (se udviklingen af opbyggelse af logo i bilag 4a og 4b). Luppen står for den undersøgende adfærd. Ved vores besøg hos foreningen fik vi indblik i det nærmest detektivagtige arbejde, slægsforskerne udfører for at finde deres aner. Vi har valgt, at forsiden er domineret af et stort billede (billedserie) i panoramaformat, der skal skabe blikfang og fastholde brugerens interesse. Der er tre billeder i billedserien, der repræsenterer og fungerer som link til særligt interessante undersider på hjemmesiden.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 19


Farver Body- og footer-tekst var som udgangspunkt i temaets indstillinger lys grå og kunne være svære at læse. Derfor valgte vi at gøre teksten mørkere grå. Den er ikke fuldt sort, for at det ikke er for hård for øjnene at læse. Farven i header samt i head-teksten er uforandrede i forhold til temaets indstillinger. For at synliggøre hvad der er links og bulletpoints, men undgå den klassiske blå farve til links, valgte vi en mørk rød nuance, der matchede vores overordnede farvetema.

Til background texture overlay er blev der valgt ’stone’. Den har struktur uden at være dominerende og valg af farve giver et roligt og behageligt udtryk.

M u l t i m e d i e t e k n o l o g i

Side 20

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Animation Den eneste animation, vi har valgt at bruge på vores hjemmeside, er billedserien på tre billeder, der skifter i slides på forsiden under menulinjen.

WordPress-temaet har tre valgmuligheder for fremvisning af billeder i headeren, statisk billede, billedrotation med visning af tre billeder, og slideshow. Vi har valgt at bruge et slideshow, da den giver liv og bevægelse, men stadig med det rolige og harmoniske udtryk understøttet af valg af billeder.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 21


Lyd Vi har valgt ikke at bruge lyd som en del af vores hjemmeside. Det eneste mulighed for lyd er ’alt-funktionen’, når man hover over billederne, som synshæmmede kan gøre brug af.

Komposition

Opmærksomhed

Vi har valgt at opbygge vores hjemmeside efter AIDA-modellen, som er det kommunikationsredskab der er mest anvendt i reklamebranchen, når man skal fange modtagerens opmærksomhed, så virksomheden kan få afleveret sit budskab.

Interesse Lyst og ønske Handling

M u l t i m e d i e t e k n o l o g i

Side 22

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Attention Vi har valgt at placere vores logo øverst i venstre hjørne. Ifølge eyetracking-modellen er det der, at øjet først falder, når man går ind på en hjemmeside. Det moderne, men sigende logo med det integrerede forstørrelsesglas, appellerer til den brede målgruppe. Interest Det næste sted blikket falder, er på det store billede nedenunder. Billederne der er valgt har alle en symbolik til emnet slægtsforskning. De er visuelt flotte og tiltalende og skal fastholde de besøgendes interesse. Det humoristiske slogan i kommantarboksen under billedet er også med til at vække interesse. Desire Billederne i headeren har en infoboks, der giver en forsmag på, hvad man kan læse om på siden. Infoboksen fungerer desuden som et link til bestemte undersider, som afsenderen mener, at der kan være særlig interessant. Endvidere er der billeder og tekst i de tre kolonner under billedet, som fungerer på samme måde. Action Det sidste skridt er den aktive handling, hvor den besøgende for lysten til at se mere, trykker på de aktive links og læser mere om slægtsforskning.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 23


Storyboard Forside

I vores oprindelige planer omkring hjemmesidens opbygning havde vi bestemt os for, at headeren skulle indeholde et logo øverst i venstre hjørne, et søgefelt i højre hjørne og et stort billede nedenunder, der kunne tiltrække opmærksomhed (se oprindelig idé til storyboard i bilag 5).

Logo

Header

Contens

Der var overvejelser om at finde et nyt tema, der understøttede en left -sidebar. Der blev dog fundet en løsning med en widget til en submenu i right-sidebar. Efter mange overvejelser blev det besluttet at beholde temaet, da vi vægtede æstetikken i temaets design meget højt.

Side 24

Contens

Øvrige

I takt med vi fik opbygget siden og indsat de ønskede elementer, var vi enige om, at vi havde truffet den rigtige beslutning. Det æstetiske udryk med placeringen af submenuen i højre side fungerer godt og virker mere moderne. Endvidere mener vi at placeringen i right-sidebar øger brugervenligheden. Vores færdige storyboard ser derfor således ud:

H o l d

f Søgefelt

Slideshow

Nogle udvalgte sider skulle have tre kolonner. Der var planer om en left-sidebar, hvor der skulle være en submenu på linkssiden og widgets på andre sider. Det viste sig, at temaet ikke understøttede en leftsidebar, men kun en right-sidebar. Endvidere understøttede vores tema kun én menu.

M u l t i m e d i e t e k n o l o g i

Menuer

Om os

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Contens


Link

Kalender

Link Aktiviteter

Eksterne link

Eksterne link

Kalender

Galleri

Kontakt

Galleri

Kontakt os

Bille

Tekst

Bille

Tekst

Bille

Tekst

Bille

Tekst

Subme nu For link siden

Kontakt formular

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

Š

2 0 1 2

Side 25


Interaktionsdesign Den nye hjemmeside skal være overskuelig og let at navigere rundt på. Derfor var det meget vigtigt, at vi lavede en menubar, hvor man kan nå alle sider uanset, hvor på siden man befinder sig. Desuden har linksiden en submenu, som er statisk når man bladrer rundt i links-undersiderne. Samme submenu-funktion findes på kontaktsiden. Dette er illustreret i vores flowchart (for at se første flowchart-udkast se bilag 6).

M u l t i m e d i e t e k n o l o g i

Side 26

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Flowchart

Om os

Hjem

Aktiviteter

Links

Kilder

Galleri

Kontakt

Arrangementer

Kontakt os

Gravsten

Bliv medlem

Sitemap

Arkiver

Formål

Kirkebøger

Bøger Efterlysninger

Historie

Folketælling Foreninger Fynske sider

Bestyrelsen

Bygninger

Kort

Medlemmer

Portrætter

Lande — Tyskland Lande — Øvrige

Statistik

Video Ordbøger m.v.

Portaler

Vedtægter

Efterlysninger

Foreninger

Fynske sider

Kort

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 27


Interaktive elementer For at imødekomme kundens ønske om, at hjemmesiden også skal kunne tiltrække nye medlemmer i alle aldre til foreningen, har vi oprettet en Facebook-gruppe, hvor folk kan blive medlem. Ligeledes har vi oprettet en Youtube-kanal til upload af video optaget ved møder, foredrag, udflugter osv. Det var ikke et specifikt ønske fra kunden, at der skulle oprettes og tilføjes en Facebook-gruppe eller Youtube-kanal til hjemmesiden, men det er vores vurdering, at det vil være med til at tiltrække nye medlemmer især de yngre.

M u l t i m e d i e t e k n o l o g i

Side 28

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Realisering Finpudsning og færdiggørelse af produktion I den sidste fase af projektet blev der lavet en status over, hvor langt produktionen var kommet og hvilke elementer, der stadig manglede at blive integrerede. De blev implementeret, hvorefter vi lavede hjemmesiden færdig, så den var fuldt funktionsdygtig. Herfra lod vi udenforstående personer teste hjemmesiden for at få deres uafhængige feedback. Her viste der sig nogle enkelte ting, der skulle justeres.

Præsentation og godkendelse fra kunden Den sidste del af projektet består i overdragelsen af hjemmesiden til kunden. Projektet er blevet afsendt til kunden og vi venter godkendelse samt accept.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 29


Evaluering Vi har valgt at lave vores hjemmeside i WordPress frem for at kode html og css i Notepad++. Dette har haft givet os både muligheder og begrænsninger i arbejdet med hjemmesiden. WordPress er et cms-system, som kommer i en færdig udgave med bestemte indbyggede funktioner, der er forskellige fra tema til tema. Dette giver mange muligheder i forhold til de interaktive elementer på en hjemmeside. Der findes et stort udvalg af forskellige plugins, der giver ekstra funktioner, som fx interaktiv kalender og brugerdefinerede menuer (se bilag 7 for fuld liste af installerede plugins).

Hvis man vil ændre i de indstillinger, som ikke kan tilpasses med plugins, skal man ændre i core-coderne. Dette kræver et stort arbejde og forsigtighed, da man kan risikere at ubrugeliggøre hele WordPress-installationen. Hvis man ændrer i core-coderne er det meget vigtigt, at man laver en backup. Desuden er det en god idé at kopiere php-filerne over i Notepad++ og teste ændringerne inden implementering i WordPress. Derfor er det vigtigt at gøre sig nogle grundige overvejelser om, hvilke funktioner man ønsker at gøre brug af, inden man vælger tema.

Derudover har vores valg af et premium tema fra Elegantthemes stor betydning for kundens mulighed for vedligeholdelse af hjemmesiden efter overdragelse, idet det indeholder et epanel. WordPress har dog nogle begrænsninger. Det er bygget op til brug i blogsites, hvilket mange af funktionerne bærer præg af. De forskellige temaer har desuden nogle begrænsninger i forhold til mulighederne for at lave om i de præfabrikerede indstillinger.

M u l t i m e d i e t e k n o l o g i

Side 30

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Teamwork Fra start var gruppens medlemmer enige om, at vi alle skulle have ’en finger med’ i alle dele af projektets processer. Dog viste det sig også hurtigt, at vi med hver vores meget forskellige baggrunde, uddannelses-, erfarings- personlighedsmæssigt, indgik i gruppen med forskellige spidskompetencer, hvor vi havde vores stærke og svage sider og kunne lære af hinanden. Vores forskelligheder har i stor udstrækning været en styrke, men vores forskellige personligheder har til tider ført til mindre frustrationer, fordi vi arbejder meget forskelligt. Men gruppens åbenhed og ligefremhed har gjort, at opståede problemer er blevet konfronteret med det samme og er blevet løst. Alle gruppemedlemmer føler, det har været en sund og lærerig proces, at der er blevet stillet spørgsmålstegn ved vores roller i gruppen og forskellige måder at arbejde på. Derfor kan vi afslutte vores arbejde med en følelse af, ikke blot at være tilfredse med resultatet af vores hjemmeside, men også selve projektets forløb.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 31


Perspektivering Vi har lavet en færdig hjemmeside, der er klar til at kunden kan bruge. Udgangspunktet har været, at opfylde kundens ønske om en ny og moderne hjemmeside, der var let at navigere rundt på. Hjemmesiden er opbygget så kunden kan tilføje nye funktioner og sider og udvide brugermulighederne i forhold til foreningens måde at arbejde på. Vi forestiller os fx, at hjemmesiden kan udbygges med en funktion, hvor eksempelvis foredragsholdere kan uploade materiale fra afholdte foredrag, så foreningenes medlemmer efterfølgende kan hente. Der kunne ligeledes oprettes et forum, hvor medlemmerne kan skabe en åben dialog omkring problemer og erfaringer med slægtsforskning. Da vi har set, hvor meget slægtsforskerne benytter sig af andre slægtsforskningssider, her iblandt mange udenlandske, vil vi anbefale, at hjemmesiden laves i en engelsk udgave, så udenlandske slægtsforskere kan bruge siden og ikke mindst deres links.

M u l t i m e d i e t e k n o l o g i

Side 32

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Konklusion Vores udgangspunkt var at lave en ny hjemmeside for Slægtshistorisk Forening Odense, som ønskede en ny og moderne hjemmeside, der kunne tiltrække opmærksomhed og som var brugerrelevant. Forsiden er opbygget i henhold til AIDA-modellen og opfylder ønsket om at tiltrække potentielt nye brugere. Siden er nem at navigere rundt på og brugeren bliver kun mødt af relevant information. Derfor mener vi også, at hjemmesiden lever op til kravet om brugerrelevans. Hjemmesiden er lavet i WordPress, hvilket betyder at kunden nemt kan ændre i forskellige funktioner, uden at skulle kode selv. Valget af et premium tema gør,at kunden kan få adgang til ekstra services, som ikke følger med de gratis temaer. Konklusionen er hermed, at vi har lavet en hjemmeside, der opfylder kundens umiddelbare ønsker og samtidig giver mulighed for at udvide brugerfunktionerne i fremtiden, som nemt kan klares af kunden selv.

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 33


Bilag Indhold 35 36 39 40 41 42 43 44 45

Bilag 1a: Bilag 1b: Bilag 2: Bilag 3: Bilag 4a: Bilag 4b: Bilag 5: Bilag 6: Bilag 7:

Oprindelig tidsplan Dagbog Slogans Afstemning om fonttype Logo, 1. fase Logo, 2. fase Storyboard Første udkast af flowchart Plugins

M u l t i m e d i e t e k n o l o g i

Side 34

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Bilag 1a

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 35


Bilag 1b Tir sdag d . 1 0. a pri l 20 12

Man dag d. 9. ap ril 2012

Besøg hos foreningens, til slægtsforsknings café Rundspørge blandt medlemmerne vedrørende deres syn på ondenseslaegt.dk, samt deres evt. ønsker til funktioner og design på det nye site. Download, upload og installation af WordPress Download og installation af valgte tema Opdatering af plugins Opbygning af sidestruktur Tilføjelse af ønskede sider Tilføjelse af menu Tilføjelse og inddeling af undersider Installation af widget til en submenu i leftsidebar Dette punkt skabte problemer. Først en konstatering af at denne widget ikke virkede med valgte tema. Problemløsning. Forsøg på at lave submenu ved hjælp af ’tabbed content’. Efter nogle overvejelser omkring omfanget af arbejdet med at tilføje en tab til alle undersider, tog vi en beslutning om at droppe tabben. For omfangsrigt, samt ikke funktionelt, da den ikke fungere som link mellem siderne. Herefter en overvejelser om at finde en anden widget til submenu. Vi kiggede nærmere på temaet og konstaterede at det ikke understøtter en left sidebar og sandsynligvis heller ikke en submenu. Beslutning taget om at finde et nyt tema, som understøtter leftsidebar og submenu. Tid brugt i dag: 1 time på besøg 30 min på download og installation af WP og tema 45 min på tilføjelse af sider og oprettelse af menu 45 min på undersider 1 time og 30 min på problemet med submenu i left sidebar Planlægning for onsdag afløst af en beslutning om at søge efter et nyt tema foretages hjemme fra, så der kan vælges nyt tema hurtigst muligt. Derefter må gøres status for hvad der skal laves resten af dagen.

Afgjort sitets struktur/skelet. Diskussion af indhold og placering af menu-bar med undersites Lavet tidsplan for ugen med planlægning af tidsforbrug dag for dag Tid brugt i dag: 2 timer på site-struktur 30 minutter af widgets 1,5 time på tema 30 minutter skrivning af dagbog Planlægning af hvad vi skal nå tirsdag foruden kundebesøg og eksamensgennemgang Installation af WordPress Installation af tema Site struktur Evt. farver og banner Arbejdet fra kl. 10.00-16.00

Arbejdet fra kl. 9.00-15.30

M u l t i m e d i e t e k n o l o g i

Side 36

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Bilag 1b - fortsat Torsdag d. 12. apr il 2012

On sdag d . 11 . ap ril 201 2

Arbejde med bestyrelsessiden. For at finde en fremvisningsmåde af bestyrelsesmedlemmerne. Vi kiggede på forskellige plugins til at håndtere fremvisningen, men det viste sig ikke egnede, da de mest henvendte sig til blogs. Vi endte at bruge biobox Fyldte tomme sider med 1-2 billeder samt Lorem Ipsum-tekst Satte links på alle links sider, så der er noget på alle sider man navigerer rundt til Kontaktformularen blev ændret til dansk. Vi måtte ændre i core-koderne for at ændre fra engelsk til dansk. Captcha blev også ændret til dansk Oprettede gruppe på Facebook (Slægtsforskningsvennerne), som slægtsforskerne kan blive medlem af og som vi kan linke til på vores hjemmeside Lavet sitemap Formede forsiden (Hjem) som vi gerne vil have den til at se ud mht. indhold. I de tre kolonner findes nu links til ’Om os’, ’Formål’ og ’Historie’

Kundemøde. Kunde umiddelbart tilfreds med vores forslag Problem fra i går løst (submenu i sidebar, egnet widget fundet) Lavet oversigt over delmål vi skal nå før projektet er færdig Installeret sidebar-menu widget for at skabe overskuelig navigation i ”Links”-hovedmenu Lavet kontaktformular (skal dog ændres til dansk) Dannet galleri Lavet eksemplarer på linksundersider Afprøvet forskellige plugins og widgets Generel god problemløsning i dag Skabt en Youtube-kanal til upload af videoer Installeret plugin til Youtube (Artiss Youtube Embed) Installeret breadcrumb-plugin til at lette navigation efter ønske fra kunde. Pluginet giver mulighed for at Home kan hedde Hjem (Breadcrumb NavXT)

Løse ender:

Skal laves de kommende dage:

Ændres til dansk i galleri: Show as slideshow Show picture list Ændres til dansk i kontaktformular: Submit og reset

Eksempel på bestyrelsesside(r) Aml. Tekst + billede Kalender Forside Løse ender:

Arbejdet fra kl. 9.00-16.30

Home-sti (skal væk) Ændr til dansk Home (hvis den ikke bliver fjernet) Kontaktformular (I kontaktformular) Captcha Arbejdet fra kl. 9.00-15.30

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 37


Bilag 1b - fortsat Lørdag d. 14. apr il 2 012

Fredag d. 13. apr il 2012

Linksfarve ændret i css stylesheet Opsætning af layout til rapport Rapportskrivning Endeligt flowchart Redigering og finpudsning Evaluering

Indsat favicon Lavet footer med adresseoplysninger Facebooklink til gruppe indsat i footer Farve på body tekst er ændret i css stylesheet (9c9c9c) Valgt farve og struktur til background texture (stone og c6bea6) Valgt skrifttype til både head og body (Ubuntu). Farve til body er 4a4a4a. Vi har valgt en let læselig skrifttype, der dog ikke er for kold og kedelig Skabt logo vi er helt vilde med - alle sammen! Ændret billeder på de tre sider, der vises på forsiden

Arbejdet fra kl. 10.00-23.30

Sø ndag d . 15 . ap ril 201 2 Færdiggørelse af rapport

Arbejdet fra kl. 9.00-16.30

Arbejdet fra kl. 10.00-21.00

Generelt: Hver dag, efter gruppens mødetidspunkt, har vi foretaget problemløsninger hver for sig, når vi er kommet hjem.

M u l t i m e d i e t e k n o l o g i

Side 38

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Bilag 2

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 39


Bilag 3

M u l t i m e d i e t e k n o l o g i

Side 40

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Bilag 4a

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 41


Bilag 4b

M u l t i m e d i e t e k n o l o g i

Side 42

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Bilag 5

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 43


Bilag 6

M u l t i m e d i e t e k n o l o g i

Side 44

H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2


Bilag 7 WordPress Database Backup gør det lettere at lave in back-up af sin WP-installation. Kan sættes til at lave automatisk back-up, dagligt, ugeligt etc. Display Widgets giver mulighed for at lave flere forskellige submenuer, selv når det valgte tema kun understøtter én menu. Kan også styre på hvilke sider menuen skal vises. Derfor muligt at forskellige sider har en individuel menu i samme sidebar. NextGEN All-inOne Gallery blev installeret da det er mere brugervenligt end det indbyggede WP-Gallery. Fremvisningen af billedeserierne kan arrangeres i forskellige fotoalbums. Med Breadcrumb Nav-XT kan man ændre teksten i breadcrumb til dansk uden at ændre i core-koderne. Artiss YouTube Embed gør at brugerne nemt kan linke til en video på YouTube WordPress Facebook Like Plugin er installeret på siden, så budskabet og aktiver om siden kan blive spredt på Facebook. Fix Facebook Like er der for at undgå fejlmeldinger når man trykker på ’like’ knappen Med WP Realtime Sitemap kan man lave en mere overskuelig plan over siden, så brugerne bedre kan danne sig et overblik

M u l t i m e d i e t e k n o l o g i H o l d

o g

i n t e r a k t i o n s d e s i g n

1 0 1 2 — O d e n s e ,

©

2 0 1 2

Side 45


Projektrapport  
Projektrapport  

Projektrapport - Multimediatechnology – Interaction design

Advertisement