dav rapport

23
Projektrapport Dansk Angolansk Venskab Multimedieteknologi & Interaktionsdesign Udarbejdet af: Lisa Secher McAllister Louise Ellerbæk Anne Kristine Märcher Knudsen Websitets adresse: http://multimedieteam.dk/0512/lisa/wp/ Kontaktperson i gruppen: Lisa McAllister E‐mail: [email protected]

Upload: anne-kristine-knudsen

Post on 14-Mar-2016

226 views

Category:

Documents


0 download

DESCRIPTION

DAV rapport af Lisa, Louise og Kristine

TRANSCRIPT

Page 1: DAV rapport

ProjektrapportDanskAngolanskVenskab

Multimedieteknologi&Interaktionsdesign

Udarbejdetaf:

LisaSecherMcAllister

LouiseEllerbæk

AnneKristineMärcherKnudsen

Websitetsadresse:

http://multimedieteam.dk/0512/lisa/wp/

Kontaktpersonigruppen:

LisaMcAllister

E‐mail:[email protected]

Page 2: DAV rapport

Lisa Secher McAllister Multimedieteknologi & Interaktionsdesign Dato for aflevering: 12-03-12 Louise Ellerbæk Projektrapport Anne Kristine Märcher Knudsen Dansk Angolansk Venskab

Side 2 af 23

Indholdsfortegnelse

Indholdsfortegnelse .......................................................................................................................................... 2

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

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

UdviklingsmetodenHOME................................................................................................................................ 3

Foranalyse..................................................................................................................................................... 4

Undersøgelsestrinnet ................................................................................................................................... 4

Designtrinnet ................................................................................................................................................ 4

Realiseringstrinnet........................................................................................................................................ 5

Afgrænsning.................................................................................................................................................. 5

Tidsplan......................................................................................................................................................... 5

Undersøgelse .................................................................................................................................................... 6

Informationsindsamling................................................................................................................................ 6

Brainstorm .................................................................................................................................................... 6

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

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

Interaktionsdesign ........................................................................................................................................ 7

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

Designparametre .......................................................................................................................................... 8

Form ......................................................................................................................................................... 8Typografi .................................................................................................................................................. 9Farver ..................................................................................................................................................... 10Illustration .............................................................................................................................................. 10

Komposition................................................................................................................................................ 11

AIDAmodellen........................................................................................................................................ 11Poyntereye‐tracking .............................................................................................................................. 12

Realisering....................................................................................................................................................... 13

Videreudvikling ........................................................................................................................................... 13

Konklusion....................................................................................................................................................... 13

Evaluering ................................................................................................................................................... 13

Page 3: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 3 af 23

IndledningDetteprojekterafrundingenpåkursetMultimedieteknologiogInteraktionsdesign,oger

udarbejdetforkundenDanskAngolanskVenskab.DanskAngolanskVenskab,ogsåkaldetDAVi

opgaven,ønskeretredesignafderesnuværendewebsitehttp://www.dav.nu.DAVeren

foreningenstiftetafengruppedanskeogangolanskevenner,somønskeratstøtteAngolas

befolkningmedhjælptilselvhjælp.Foreningensformåler,atfremmekontakt,forståelseog

venskabmellemDanmarksogAngolasbefolkningergennemudbredelseafinformationomAngola

iDanmark,atetablereogstøttehumanitære,socialeogkulturelleprojekter,somhjælperden

hårdestramtedelafAngolasborgerkrigshærgedebefolkning,samtatsamarbejdemedandreikke‐

politiskeorganisationeromovennævntemål.

Kravettilprojekteter,atwebsitetskalværepå3‐4sider,mensrapportenskalhaveetomfangpå

ca.10sider.

Metode

Projektetbeståraftoelementer,etwebsiteimplementeretiWordPressogentilhørende

projektrapport,dererudarbejdetpåbaggrundafHOMEudviklingsmetoden.

WordPress,somwebsiteterudvikleti,eretopensourceblogsystemskrevetiPHP.Dererbåde

mulighedforatinstallereplugins,skiftetemaogtilføjetagstilsineposter.

HOMEmetoden,erenhelhedsorienteretogåbenmetodetiludviklingafalleslagsdigitalemedier,

idettetilfældeetwebsite.Metodenbeskæftigersigbådemedprojektledelseogmedudviklingaf

digitalemedier.Formåletmedmetodener,atsættearbejdetisystem–atgøredesignerensvalg

sammenhængende,velovervejedeogkonsekventeiforholdtilopgaven.

UdviklingsmetodenHOME HOMEeretakronymforHolistic,OpenMultimediadevelopmentmEthod.

MetodenerudvikletafLouiseHarderFischerogMarieOosterbaan.Depræsentererdensom

værendeenhelhedsorienteretogåbenmetodetiludviklingafalleslagsdigitalemedier,ogdener

derforrelevantiforholdtiludviklingenafvoresDAVwebsite.

Mankandogargumenterefor,atidetvoresprojekteryderstbegrænsetiforholdtiltid,

ressourcerogomfang,vildetikkeværenødvendigtellerhensigtsmæssigtatanvendemangeafde

delelementersomindgåriHOMEmetoden.Denertydeligvisudvikletmedstørreprojekterforøje,

Page 4: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 4 af 23

mendenharalligevelværetetnyttigtredskabforos,ogviharstruktureretvoresprojektarbejde

udfradefiretrinHOMEmetodenindeholder:

ForanalyseKundemødetvarforosstartskuddetforprojektet.Viindsamledesåmegetinformationsommuligt

frakundenomkringderesønskertildesignaf‐ogindholdpåsitet,formålmedsitetoghvilken

målgruppedeønskedeathenvendesigtilviasitet.

Derblevinterntigruppenudarbejdetenprojektbeskrivelsesomhjælptilatsætterammerfor

voresprojekt1.

UndersøgelsestrinnetMedudgangspunktideinformationervihavdeindsamletfrakunden,lavedevipådettetrinet

mindmapderskullehjælpeosvidereiprocessen2.Mindmappetsynliggjordehvilkenretningvi

ønskedeatudvikleprojektetioggavosetoverblik.

Viskitseredeentidsplanforprojektetmedudgangspunktidettidsforbrug,somvipådettidspunkt

iprocessenforventede,atdeenkeltedelemåttekræve.Dervarsåsamtidigtafsatpladstilat

noteredetreelletidsforbrugvedprojektetsafslutning,ogsomdetfremgåraftidsplanen3

harmonererdetforventedeogdetreelletidsforbrugikke.Detvardogforventetfravoresside,så

dervarafsatekstratidafivorespersonligetidsplaner.

DesigntrinnetViudarbejdedepådettestadieafprocessenetflowchart4ogetstoryboard5forsitetsåledes,atvi

fikvoresvisionerogidéerframindmappetkonkretiseret.Derblevbrugtmegentidpåatudvælge

etpassendetemaogpluginsforsitet,somkunnefungereindenforderammervihavde.Daderfra

kundenssideafvaretstærktønskeom,atbibeholdedetgrafiskeudtryksomlogoogbannergav

detennaturligudfordringogbegrænsning.

1 Se bilag A 2 Se bilag B 3 Se bilag C 4 Se bilag D 5 Se bilag E

Page 5: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 5 af 23

RealiseringstrinnetPådettestadieblevselvesitetskabt,ogværdienafdeforegåendetriniHOMEmetodenblev

synliggjort,dadetvargennemdemstrukturenforprojektetblevopbygget.Tidsplanen,

mindmappet,flowchartetogstoryboardetbetødvihavdeoverblikogmålrettethedpådette

vigtigestadieafprocessen.

AfgrænsningVihariudarbejdelsenafsitetforDAVforetagetvissefravalgiforholdtilkundensoprindelige

ønskerogidéer.

Medhensyntilønsketometnyhedsbrevmentevi,atenfacebooksidekunneudføresamme

funktion,ogderikkevarbehovforbeggedele,såvifravalgtenyhedsbrevet.Desudenvurderedevi

atmedlemmerneiDAV,somskaladministreresiden,ikkeerklartilformangenyekanaler,ogat

foreningenikkeharnyhederogbegivenhedernoktiletegentligtnyhedsbrev,samttidtilat

forvaltedetteistørreomfang.KundenudtrykteogsåetønskeomenTwitterprofiliforbindelse

medsitet,menvifølte,atDAVhellerikkevarklartilatvaretageensåkrævendefunktion.Twitter

kræverkonstantopdatering,ogtiltaleretheltandetsegment,vifølerikkeDAVvilfådetfulde

potentialeudafenTwitterprofiliforholdtilenFacebookprofil,ogderforvalgteviatbegrænseos

tiludelukkendeFacebook.

Vihariforbindelsemedprojektetudelukkendebeskæftigetosprimærtmedudviklingenafdet

danskesiteogikkeselvlavetetengelskellerportugisisksite.Dettevalgergjortudfraden

tankegang,atdetførstogfremmesteretdansksitekundenharbehovforsamt,ogatdettesåkan

fungeresomskabelonforoversattesites.Vihardogtilføjetetoversættelsespluginsåledes,at

mankanvælgeatsesitetpåengelskellerportugisisk.

Tidsplan

Vorestidsplanoverprojektetsforløb,erbaseretpåvoresegenvurderingaf,hvorlangtidde

enkelteelementeriprocessenviltage,samthvorlangtiddeivirkelighedenhartaget.Tidsplanen

erkortsagtenoversigtoverelementerneiprocessen,planlagttidogbrugttid.

Page 6: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 6 af 23

Undersøgelse

Informationsindsamling

Voresprimæreinformationsindsamlingforegikprimærtunderkundemødet,hvorkunden

klarlagdedennesønskertilogformålmedwebsitet.

Kundenhavdeenrækkeønskertil,hvordanwebsitetkunneopbyggesoghvaddetkunne

indeholde,ogdetvarsåvoresopgaveatvurdere,hvadvisynesderfungeredebedst,samthvad

dervarrealistiskforosatlaveindenforderammervihavdeatarbejdemed.Kundenlagde

ligeledesvægtpå,atdevaråbneoverfornyeideerogforslag,menatdedoghavdenogleting,

såsomlogo,navnogbilleder,derhavdeenstorbetydningfordem.

Kundenfortalteligeledesomforeningenogdennesarbejdepåkundemødet,hvilketgavoset

dybereindblikihvemkundenvar.

Brainstorm

Efterkundemødetlavedevienbrainstormiformafetmindmap6.Voresbrainstormbarprægaf,at

vifølteosmegetbundetafkundensønsker,menvikomhurtigtvideremedmerekonkreteideer.

VivalgteatbrainstormeomkringDAVWEBSITEistedetforDAV,dadetvillegiveosnoglemere

præciseogbrugbareideertilsitet.

Design

InformationsdesignInformationsdesigngårialtsinenkelthedudpå,atviprioritererinformationenpåsitet.På

baggrundafkundemødetvedvi,atsitetsformåleratinformerealleiDanmarkomAngolaogom

DAV,mensmålgrupperneerdedanskemyndigheder,samarbejdspartnere,privateogdonorer,

samtnuværendeogkommendemedlemmer.

Viharderforvalgtatgøresitetenkeltiformafenkortogenkelmenulinje,forikkeatgøre

menulinjenuoverskueligmedformangepunkter.Deresterendepunktererderefterdeltindi

undersider,sommankommertiliformafdrop‐downmenuer.Sidenskalaltsåværeletat

overskue,nematsøgeinformationpåogdetskalværenemtatkommeikontaktmedDAV.

6 Se bilag B

Page 7: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 7 af 23

Dakundenønskedetekstpåsitetbegrænsettiletminimum,ogistedetgernevillehavebilleder

derkommunikeredederesbudskabud,valgteviatfokusereprimærtpågalleriermedbillederfra

kunden,fremforformegettekst.

Interaktionsdesign

Interaktionsdesignetbeskriver,hvordanmannavigererrundtpåsitet7.Viharlagtstorvægtpå,at

devigtigsteelementerpåsitetgårigenpådeflestesider,såledesatbrugerenaltidkannavigere

hurtigtognemtrundtmellemdevigtigsteelementerpåsiden.Etafdeelementerdergårigenpå

allesiderne,erderformenulinjen,derindeholderOmDAV,Information,AktiviteterogGørnoget,

dereftervoresmening,indeholderalledecentraleelementerpåsitet.Derudovergår

kontaktoplysningerneigenpåallesiderne,dadetskalværenemtatkommeikontaktmed

foreningen.

Præsentationsdesign

Præsentationsdesigneterenudvidelse,hvorindholdogstrukturblivertilkommunikationog

oplevelse,idettetilfældewebsitet.Viharvedhjælpafstoryboardet8,designetwebsitetsform.Vi

har,somtidligerenævnt,valgtatvivilholdefokuspåbilledersomsitetsprimære

medieelementer,isærpådeøverstesider.Billederernemligletteathuskeoglæseforalle

nationaliteter.Desudengørdebrugerfladenmereindbydendeforlæserenoggengiver

virkeligheden,samtunderstøtterafsenderensbudskab.

Dogerder,primærtpåundersiderne,brugformeretekst,dakonkretinformationkanværesvær

atformidlegennembilleder.Tekst,isærlængeretekststykker,kræveratbrugerenharrettetsin

fuldeopmærksomhedmodskærmen.Ogderforharviogsåvalgtatdelængeretekststykker

hovedsagligtskalværepåundersiderne,dabrugerenkunkommerherned,hvisdenneønskerat

søgemereinformation,ogdermedermereindstilletpåatlæse.Voresønske,såfremtviskulle

lavesitetheltfærdigt,villedogværeatbrugetidpåatkortedenuværendetekststykkerendnu

merened,dadeterkedeligtatlæselængeretekststykker,ogikkemindstanstrengendeatlæsepå

encomputerskærm.

7 Se Bilag D 8 Se Bilag E

Page 8: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 8 af 23

Designparametre

Designparametreneerenrækkevalg,visomgrafiskedesignereskaltagestillingtil,indendet

praktiskearbejdemedsitetbegynder.Dettegøresforatfindeopbygningenogudseendetafdet

pågældendesite.Derertaleom6designparametreialt;form,typografi,farver,illustration,lydog

animation.

Viharikkeinddragetdesignparametrenelydoganimation,dadetikkeerrelevantatbrugepå

dettesite.Grundentilatdetikkeerrelevant,eratkundenikkeharbehovforetsitemedfor

mangefeaturessomf.eks.lydoganimation,menderimodetsite,derersimpelt,informativtog

brugervenligt.

Derimodharvianvendtde4designparametreform,typografi,farverogillustration,somogsåer

demestanvendte.Devalgderertruffetiforholdtildesignparametrene,ersketpåbaggrundaf

trefaktorer,nemligfunktion,æstetikogteknik9.Dissetrefaktorerhængersammenogpåvirker

hinanden,ogdeterderforvigtigtatfådissetilatgåopienhøjereenhed.

Form

Formerdenfysiskeform,derdannesafvalgafformat,placeringafdeforskelligeelementerpå

sitet,mv.

Formateterpåetsiteeribreddenbegrænsetafskærmensstørrelse,hvorimoddybdenkanvære

ubegrænsetvha.scrollfunktionen.Viharvalgtatforsidenogundersidermedetminimumaf

scroll.

Derudoverharvivalgt,atformenskalværeklassiskopbyggetmedenheaderitoppenmednavni

fokusoglogotilvenstre,enfooteribundenmedkontaktoplysninger,enkortmenuitoppenmed

drop‐downundermenuerforatgøredetmereoverskueligt.ViharvalgtWordpresstemaet

’Weaver’dadetopfylderdissekriterier,samtgivermulighedforselvattilpasseflerefunktioner.

Funktion

Valgetafminimumscrollerbådekundensønske,menogsåvoreseget,dadetgørinformationen

påsidenmegetmereoverskueligoglettilgængelig.Dettegørkortsagt,attekstogbillederkan

forståshurtigtogpræcistafmodtageren.

9 Teknik: Under emnet teknik har vi udeladt økonomi, da vi økonomi ikke har været en faktor, der har haft indflydelse på vores projekt og valg truffet i denne forbindelse.

Page 9: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 9 af 23

Denklassiskeopbygningskalværemedtilatøgebrugervenlighedenoggøresidennemat

navigererundtpå.

Æstetik

Vedatholdesidernekorteilængden,passerformatetgodttiletsite,dadetdermedpassertilen

computerskærm.Dettegørsidenæstetiskoverskueligogenkel,hvilketdetklassiskeformatogså

ermedtilatunderstrege.

Teknik

Teknikkenvedopbygningenafetsitesætter,somsagt,sinenaturligegrænserforformatetiform

afcomputerskærmensstørrelse.

Typografi

Typografiendækkeroverdeord,somskaliklædesenbestemtform,somdannesafvalgaf

skrifttyper,skriftstørrelseroglinjelængder.

Valgetafskrifttype,ellerfontsomdetkaldesiweb‐sprog,erfaldetpåVerdanaifarvensort,

skriftstørrelsenerhovedsagligtholdtiskriftstørrelse14ibrødtekstenoglinierneslængdeergjort

såkortsommuligt.

Funktion

Detoverordnedeformålmedvalgaftypografieratgøresitetsåletlæseligtsommuligt,såledesat

målgruppenhurtigtognemtkanskaffesigdenønskedeinformation,udenatbliveforstyrretaf

”fancy”typografiskevirkemidler.Vivilkortsagtundgåatbrugerenafsitetdruknerifarver,flotte

skrifttyper,tætpakkettekstellerlangelinjerogtekststykker.

Æstetik

ValgetafnetopVerdana,sort,kortelinjerogskriftstørrelse14gørtypografienenkelogstilren,

hvilketpasseræstetiskgodttildetgennemgåendetemaforsitetogdetserpæntud.

Teknik

Verdanaerenfontdererdesignettilskærmbrug,ogdermederdenlæseligpåallecomputere,

hvilketerenvæsentligtekniskfaktorderspilledeindivoresbeslutning.Skriftstørrelse14eren

anelsestørreenddennormaleskriftstørrelsepåtekst,nemligstørrelse12,menvisynesdetgør

tekstennemmereatlæseudenatdenbliverforvoldsomistørrelse14.

Page 10: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 10 af 23

Farver

Valgetaffarverpåsitetskalunderstøttebudskabetogbrugesidenvisuellekomposition.

Voresvalgaffarvereritypografiener,somnævnt,faldetpåsort,mensvipåselvesitet(baggrund,

elementer,mv.)hartagetudgangspunktifarvernefrakundenslogo(sort/hvid)ogdetudvalgte

billede(header)frakundenmedrødlige,brunligeogorangefarversomdegennemgåendefarver.

Funktion

Dissefarverervalgt,dadeifølgekundenpassergodtpåAngola,menogsåfordivisynesdisse

farverskaberensammenhængmellemlandedesflag(DanmarkogAngola),mensamtidigharde

ogsåensymbolskfunktion:Sort/hvid,dersymbolisererhudfarvernepådeforskelligemennesker

dermødes,mensdenrødligefarvesymbolisererkærlighedogvarme,dererforbundetmedden

næstekærlighed,foreningenbyggerpå.

Æstetik

Detæstetiskeaspektiforholdtilfarvevalgterstort,dafarvernepådetellersmegetsimplesite,er

iøjnefaldende.Viharvalgtfarverne,dadegårgodtispændmedforeningenslogoogbilleder,og

dettegøratfarverne”passersammen”oggiversitetensammenhæng.

Teknik

ViharbrugtredskabetMioToolBoxtilatplukkeenfarveviføler,gårgodtispændmedderødlige,

orangeogbrunligefarverderfindespåheaderbilledet.

Illustration

Begrebetillustrationdækkerovervalgetogbrugenafbillederogtegningertilatillustrere

budskabet.

Viharbrugtet,afkunden,udvalgtbillede,maletafFranciscasmand(enafstifterneafforeningen),

samtprivatefotosfradiverseprojekter,mv.

Desudenharvivalgtatplacereetgalleriafsponsorlogoeridetøverstewidgetområdeisidebaren.

Detteharvivalgt,daDAVgernevilhavefleresponsorer,ogforatkunnetiltrækkedisse,erdet

vigtigtathavenogetatkunnetilbydetilgengæld.Herkanforeningensåtilbydeeksponeringaf

sponsorlogoer,ogeventueltnogettekst.Derkanefterbehovindsættesflerelogoerigalleriet,

ellerlavesflereområdertileksponering.

Page 11: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 11 af 23

Funktion

BilledetmaletafFranciscasmand,beskriverlandetpåenrigtiggodmåde,samtidigmedatdet

fortællerenhistorie,hvileterenafgrundenetil,atvivalgteatfastholdekundensønskeombrug

afnetopdettebillede.Dettebilledegørsitetmerepersonligt,endhvisvihavdeanvendttilfældige

billeder,ogerogsåmedtilatfortællenogetomfolkenebagorganisationen.

Demangefotosviharbrugtfraforskelligeprojekter,erbrugtforatviseogillustrereforeningens

arbejde,fremforatskriveomdet.Billederogfotosermegetnemmereoghurtigeformodtageren

ataflæse,samtidigmedatdeermegetmereiøjnefaldendeogbeskrivendeendenmassetekst.

Billedertalerligeledesetuniverseltogemotioneltsprog,dervilnåudtilallebrugereuanset

nationalitet.Kortsagt,harformåletmedbrugenafmangefotosværet,atgøresitetmere

”spiseligt”,samtfungeresomblikfangforbrugeren.

Æstetik

Billedetiheaderenogfotografierneskalisamspilmedderesterendefarverpåsitet,væremedtil

atgøresitetiøjnefaldendeogæstetisk.

Teknik

Densmuleteknik,derharværetforbundetmedillustrationernepåvoreswebsite,haromfattet

implementeringafvirksomhedensnavnoglogoibillede.Detteharvigjortvedatbeskære

baggrundsbilledetoglogoettilderetteproportioner,ogderefterlæggelogoetovenpåbilledet.

Hermedharvifåetetbilledesompassertilsitetsheader‐område.Disseændringererlaveti

Photoshop.

Komposition

Kompositionen,derbeskrivermådenhvorpåwebsidensindholdbliverpræsenteretforlæseren,er

ogsåetvigtigtparameterathaveforøjenårwebsitetbyggesop.Kompositionenskalfange

målgruppensinteresseoggivelysttilatblivepåsitetoglæsemere.Dettekangørepåflere

forskelligemåder,ogviharvalgtatgøredettevedatbrugeAIDAmodellen10.

AIDAmodellen

AIDAmodellentagerudgangspunktifireelementer;Attention,Interest,DesireogAction.

10 Se Bilag F

Page 12: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 12 af 23

Attention

Læserenvilautomatiskstartemedataflæseetmedieveddetoptiskemidtpunktpåenside,der

hvorøjetfalderindpåsidenibrøkdelafsekunder.Detoptiskemidtpunktligger5%overmidtenog

lidttilvenstrepåsiden,dvs.omkringsitetsheader.Deterherviskalskabeattention,herskal

læserensopmærksomhedvækkes.Detteharviforsøgtatgørevedatsætteforeningenslogo,navn

ogmenulinjeidetoptiskemidtpunkt,såledesatbrugerenmeddetsammeerbliverklarover

hvemafsenderenafsiteter.

Interest

Derefterkiggermannedmoddethøjrehjørne,ogdeterherlæserensinteresseforalvorskal

vækkes.Herharviplaceretnoglebilleder,derbeskriverforeningensarbejdeogfungerersomlink

tilundersiderne.Dissebillederskalvækkelæserensinteresse.

Desire

Hvisdetlykkesosatvækkelæserensinteresse,vildennekiggeindmodmidtenafsitet,foratfinde

udafmereomforeningen.Hererdetigenbilledernedererfokus,ogdeterhermulighedenforat

læserenvilklikkesigindpåbillederne,foratfindeudafmere,opstår.

Action

Sidstestadieerhvislæserentager”action”ogreagererpåsiden,idettetilfældeomlæseren

kontakterforeningen,meldersigindiforeningen,ellerpåandenmådetager”action”foratstøtte

foreningen.Viharforsøgtatgøredettesimpeltforlæseren,vedatplacerekontaktoplysningerne

påallesiderneifooter,havekontaktformularenpåfleresider,samtvedatladeboksen”gør

noget”fremgåtydeligtpåallesideriformafsinplaceringimenuen.

Poyntereye‐tracking

ModellenPoyntereye‐tracking11,viserosigenatdetførstelæserenvilsepåsitet,erlogoognavni

øverstevenstrehjørne.Herefterfølgesetbestemtmønsterrundtpåsiden,igenovermidtenog

sidstoverihøjresideafsitet.Herharviplaceretnoglecentraleelementersåsom

aktivitetskalenderogfacebook‐linkellertilmeldingsformularen,såledesatlæsereninteresse

fastholdes,ihåbomatdenne”synesgodtom”siden,harinteresseinogleafaktiviteterneeller

benyttersigaftilmeldingsformularen.Viharogsåplaceretsponsorlogoerihøjresideafsitet,

primærtforatkunnetilbydeeventuellesponsorerenattraktivplaceringpåsitet. 11 Se Bilag G

Page 13: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 13 af 23

Argumentetforathøjrekolonneskifteraltefterhvilketafsiderneduerpå,eratiforlængelseaf,

atvivedatlæserenvilslutteherhvergang,vilviforsøgeatlavenogetdynamikisitet,forat

fastholdeinteressen.

Realisering

Videreudvikling

Viharbyggetvoreswebsiteop,medhenblikpåatdetskulleværenemtogoverskueligtfor

foreningenaffortsættemedatfylderestenafdennødvendigetekst,billederoginformationind.

Detfaktum,atsiteteropbyggetietCMSsystemsomWordPress,erligeledesmedtilatgøredet

forholdsvistukompliceretforforeningenatarbejdevideremedsitet.

Konklusion

Viforestillerosikke,atvoreswebsiteerdenheltrigtigeløsningforDAVaffleregrunde.Førstog

fremmestblevvihurtigtklarover,atvihavdebrugforatholdevoresfokuspålæringsprocessen

fremforresultaterundervejs,davifølteatvoresegneevnerholdtopmoddentiddervartil

rådighed,gjordedetnødvendigtatindgånoglekompromisserogdermedpåvirkederesultatet.Vi

mentederfor,atdetvarvigtigstforos,førstogfremmestatfåbyggetwebsitetsheltbasaledele

op,ogdernæstbyggedeekstratingpå,vimentevarvigtigstforDAViprioriteretrækkefølge.

Evaluering

Selveprojektperiodenogmådenhvorpådenerbyggetopmedkundebesøg,startskudfralærerens

sidepåklassen,mv.,harisigselvfungeretfint.Dogskaldetnævnes,atvifølteatprojektoplægget

frakundenvarmegetomfattendeiforholdtilhvadvihavdeaftidogressourcer.Vivillefrastarten

helstopfyldeallekundensønsker,allemenupunkter,alledeideerdehavde,treforskelligesider,

mv.,mendetblevhurtigtklartforos,atvivarnødttilatfokusereheltkonkretpåenmeget

mindreomfattendewebside,enddenkundenlagdeoptil.

Gruppearbejdetharaltialtfungeretgodt.Vivarfrastartenklarover,atdetoptimaleforvores

gruppearbejde,villeværeatfåfordeltansvarsområderne,davialletrebormegetlangtfra

hinanden.Vilagdederforfrastartenplan,dergikudpåeffektivtgruppearbejde,dvs.alle

beslutningerogrammerblevlagtifællesskab,hvoreftervihjemmefralavededetgrovearbejdeog

Page 14: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 14 af 23

kommunikeredepåmail,ogsåvifinpudsedealtifællesskab.Dogendtedetmedathovedparten

afarbejdetalligevelkomtilatforegåifællesskab,davisammenbrugtemegettidpåatløse

problemer,f.eks.iforbindelsemedplug‐inspåwebsitet.Menaltialt,ervimegetenigeom,atvi

detlykkedesosgennemeffektivplanlægning,atfordelearbejdetligeligtmellemossamtidigmed

atallefik”rørtigryden”,ogisærforarbejdetogproblemløsningenifællesskabet,gjorde

samarbejdetrigtiggodt.

Page 15: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 15 af 23

Projektbeskrivelse‐BilagAProjektetsformålogresultaterViskallaveprojektetomDAVsitetsåledes,atallegruppemedlemmerfårimplementeretdenteorietiskeviden,somvihartilegnetosgennemkursetipraksis.Viopnårdettevedatallegruppemedlemmertageraktivtdeliarbejdet.ProjektetsmålogafgrænsningVedsluttidspunktetforprojektetskalderforeliggeetwebsiteforDAVsamtenrapportomkringforløbet.Viskalikkehaveetfuldstændigfærdigbyggetsite,mennærmereetskabelonderviserhvordanetsiteeventueltkunneseud,ogderviserviharforståetkursetsindhold.ProjektkonceptogudviklingsmetodeViudarbejdersitetogprojektrapportenstruktureretpåHOMEudviklingsmetoden.TidsplanogdeadlineProjektetograpportenskaluploadesmandagd.12‐03‐2012klokken12.marts2012Endetaljerettidsplanoverdeenkeltedelelementererblevetudarbejdetigruppen.ProjektorganiseringAlletremedlemmerafgruppenharfællesansvarforsitetograpporten,detlavesifællesskabisåvidudstrækningdetermuligtogellersharhvertmedlemskiftestilatarbejdepårapportensamtsitethjemme.ØkonomiogressourcerDerharikkeværetnogetøkonomiskaspektidetteprojektdadetindgårsomdelafeksamenforkursetogikkeerbetaltarbejde.Viharbaseretsitetudelukkendepågratispluginsogtemasåledes,atdetergratisatvedligeholde.

Page 16: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 16 af 23

Mindmap‐BilagB

Page 17: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 17 af 23

Tidsplan‐BilagC

Tidsplan Dag Fase Opgaver Est.Tid Aktueltid Onsdag 29.2 Opstart Kundemøde 2 2 Tidsplan 0,5 1Torsdag 1.3 Research 9 9Fredag 2.3 Research 9 9 Mandag 5.3 Idegenering Brainstorm/Mindmap 2 3 Planlægning Storyboard,Flowchart 3 4 Design 2 4 Tirsdag 6.3 Produktion Wordpresstemaresearch 4 8 Rapportskitse 3 4 Onsdag 7.3 Produktion Pluginns 4 6 Widgets 3 5 Billeder 4 7 Sider 2 2 Tekstbehandling 8 10Torsdag 8.3 Tilretning Præsentation 1 1 Diskussionafsiteograpport 2 4 Fredag 9.3 Produktion Tilretning 4 6 Færdiggørelse 4 6 Mandag 12.3 Aflevering Korrektur 3 3 Upload 0,5 0,5 Diverse 10 70 104,5

Page 18: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 18 af 23

Flowchart‐BilagD

Page 19: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 19 af 23

Storyboard‐BilagE

Page 20: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 20 af 23

Storyboard‐BilagE,fortsat

Page 21: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 21 af 23

AIDAmodellen‐BilagF

• Attention:Tiltrækmodtagerensumiddelbareopmærksomhed.

• Interest:Vækmodtagerensinteressefordet,derinformeresom.

• Desire:Overbevismodtagerenom,ellerbekræftmodtagereni,athan/hunharbehovfor(ønsker)atvidemereellerdeltageaktivt.

• Action:Gørønsketsåstærkt,atmodtagerenefterfølgendehandlerforatfådetindfriet.

Page 22: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 22 af 23

Poyntereye‐tracking‐BilagG

Page 23: DAV rapport

LisaSecherMcAllister Multimedieteknologi&Interaktionsdesign Datoforaflevering:12‐03‐12 LouiseEllerbæk ProjektrapportAnneKristineMärcherKnudsen DanskAngolanskVenskab

Side 23 af 23

Designmanual‐BilagH

Designmanual Fontfamily: VerdanaFontsize: 14Fontcolor: #000MenuFontColor: #FDFDFDOverskrift: Fed HeaderImage: baggrund3.jpg Farver: Links UnderstregLinksHover #DB1541Indholdbaggrund #FEF3DDWidgetsbaggrund #F5DEB3Wrapperbaggrund #CB1E18Menubaggrund #COB59E Plugins: All‐In‐OneEventCalendar ContactForm7 NextGenGallery SimpleFacebookConnect TransposhTranslationFilter