Multimedieteknologi og interaktionsdesign

Rapport om udvikling af website til Kunstforeningen Tangen.

Udarbejdet i december 2010 af

Lars Lykke Jensen og

Jacob Stenz

Indhold

1.0 Indledning ..................................................................................................................... 3

2.0 Metode og struktur ....................................................................................................... 3

3.0 Foranalyse ..................................................................................................................... 4

4.0 Undersøgelse ................................................................................................................ 5

4.2 Kundens ønsker ......................................................................................................... 5

4.3 Analyse af kundens ønsker ....................................................................................... 5

4.5 Budskab ..................................................................................................................... 6

5.0 Design ............................................................................................................................ 6

5.2 Interaktionsdesign .................................................................................................... 7

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

5.5 Grafiske designparametre ......................................................................................... 8

5.6 AIDA-modellen .......................................................................................................... 9

6.0 Realisering ................................................................................................................... 10

6.1 Anvendt teknologi ................................................................................................... 10

6.2 Kvalitetsvurdering ................................................................................................... 10

1.0 Indledning En gruppe medarbejdere i sikkerhedsfirmaet G4S i Århus stiftede den 13. oktober 2010

Kunstforeningen Tangen, hvis formål er at afholde udstillinger på arbejdspladsen samt

arrangere film, foredrag, besøg hos kunstnere og kunstudstillinger. For at skabe en

informations- og kontaktkanal til medlemmer, potentielle medlemmer og kunstnere

ønsker foreningen et website.

Vores kontaktperson fra foreningen, Erik Aabling, har på et møde forklaret foreningens

behov og ønsker til et kommende website. Opgaven er at udvikle et website, der

tilgodeser foreningens behov for at kommunikere med og til brugerne. Derfor har vi iført

os konsulentrollen, og vil i rapporten fokusere på, hvordan vi kombinerer foreningens

ønsker og behov med den viden om websites, som vi i løbet af kurset

multimedieteknologi og interaktionsdesign har opnået.

Det udviklede website til Kunstforeningen Tangen kan findes på:

http://multimediekursus.ats.dk/mult1/jacob/wp/

Udover forsiden, som ovenstående link referer til, har vi valgt at færdiggøre tre

undersider:

”Nyheder”:

http://multimediekursus.ats.dk/mult1/jacob/wp/?page_id=192

”Vedtægter” under ”Om foreningen”:

http://multimediekursus.ats.dk/mult1/jacob/wp/?page_id=92

”Meld dig ind”:

http://multimediekursus.ats.dk/mult1/jacob/wp/?page_id=87

De resterende undersider er demo-udgaver, som skal færdigudvikles før sitet er klar til

offentliggørelse.

2.0 Metode og struktur

Vi har valgt at strukturere vores opgave efter de fire trin i udviklingsmetoden HOME

(Holistic, Open Multimedia development, mEthod), som er foranalyse, undersøgelse,

design og realisering. Med udgangspunkt i disse fire trin beskriver, forklarer og

analyserer vi, hvordan vi mener, at et kommende website skal se ud og ikke mindst

fungere(Se tidsplan i bilag 8).

HOME-modellen(Harder Fischer og Oosterbaan, s. 42)

3.0 Foranalyse

Dette kapitel behandler det første trin i HOME-modellen. Foranalysen skal fremskaffe

et tilstrækkeligt informationsgrundlag som fundament for resten af projektet.

Mødet med kontaktperson i Kunstforeningen Tangen, Erik Aabling, 1. december 2010

var en vigtig researchfase for projektet, da det var vores første mulighed for at blive

klogere på kunstforeningens ønsker og behov. Det stod klart, at kunstforeningen

ønskede et website, der kunne informere medlemmer, kommende medlemmer og

kunstnere om foreningens virke. Udover kundens specifikke ønsker (se afsnittet

Afsender) indeholdt mødet også en præsentation af selve virksomheden. I

sikkerhedsfirmaet G4S i Århus er der fire afdelinger (administration, salg, service og

kontrol) med i alt 110 medarbejdere, hvoraf de 50 allerede er medlem af

kunstforeningen. Foreningens første officielle udstilling åbner til januar, hvor

medlemmerne opfordres til at medbringe og udstille et værk fra deres eget hjem. Fra

februar satser foreningen på at have den første professionelle kunstudstilling på plads.

Derefter er det kunstforeningens ønske, at der hvert år er mellem 6 og 12 udstillinger.

4.0 Undersøgelse

Igennem oplæg fra Kunstforeningen Tangens kontaktperson har vi foretaget en

segmentering af målgruppen og en specificering af kundens budskab. I det følgende

kapitel ser vi på afsender, mågruppe og sidens ønskede budskab.

4.1 Afsender

Kunstforeningen Tangen.

4.2 Kundens ønsker

Kunstforeningen Tangen ønsker et website, der henvender sig til tre målgrupper. For det

første skal siden være informationskanal til nuværende medlemmer. Det kan være

informationer om møder, arrangementer som udflugter, foredrag eller filmfremvisning,

udlodning af værker og lignende. For det andet skal siden henvende sig til potentielle

medlemmer, som er nysgerrige i forhold til foreningens arbejde eller som ønsker at

melde sig ind. For det tredje skal siden henvende sig til kunstnere, som ønsker at udstille

værker i foreningens lokaler, som udover billedkunst ifølge foreningens kontaktperson

Erik Aabling også er velegnede til eksempelvis gobeliner eller skulpturer. Ifølge Erik

Aabling ønsker foreningen ikke at bruge G4S’ logo på siden, men man er interesseret i at

virksomhedens signaturfarver rød, hvid og sort går igen. Foreningen ønsker også et bud

på et logo og en indmeldelsesformular, så kommende medlemmer nemt kan melde sig

ind i foreningen.

4.3 Analyse af kundens ønsker

Efter at have diskuteret kunstforeningens ønsker og behov benyttede vi os af

mindmaping for at finde ud af, hvad vi kunne bidrage med. (se bilag 1 og 2). Vi nåede

frem til, at Kunstforeningen Tangen har behov for en side med en enkel opbygning og

som er nem at vedligeholde for en webredaktør uden særlige tekniske forudsætninger.

Desuden er det vores vurdering, at der vil være forholdsvis få opdateringer på siden i

den forstand, at der ikke vil være et dagligt nyhedsflow, men fortrinsvis komme

opdateringer ugentligt eller månedligt.

4.4 Målgruppe

Som nævnt ønsker kunstforeningen en side, der opererer med tre målgrupper: Primært

medarbejderne på G4S – dels medlemmer, dels ikke-medlemmer - og sekundært

kunstnere med interesse i at udstille deres værker i foreningens lokaler.

Den høje andel af medlemmer, som ligger på cirka 50 procent af virksomhedens ansatte,

betyder, at det på et tidspunkt vil blive svært at skaffe nye medlemmer, og samtidig er

det vores vurdering, at potentielle medlemmer i høj grad vil blive informeret om

foreningens eksistens gennem deres kolleger end gennem siden. Derfor vil et besøg på

siden for et ikke-medlem formentlig handle om at orientere sig på siden og i forhold til

foreningen, for derefter eventuelt at søge oplysninger om medlemskab (Se AIDA-model

senere). Derfor vurderer vi, at siden i sit udgangspunkt skal henvende sig til eksisterende

medlemmer.

Det er desuden vores vurdering, at når 50 % af en virksomheds medarbejdere i løbet af

to måneder melder sig ind i en kunstforening, så er det ikke alle, der har en lige stor

interesse for kunst. Vi definerer derfor, at målgruppen både indeholder kunstkendere og

medlemmer hvis forhold til kunst begrænser sig til kunstforeningens aktiviteter.

4.5 Budskab

Efter at have fastlagt kundens ønsker og behov stillede vi os selv den opgave at definere

foreningens budskab (se bilag 3). Præmissen blev ”At få kunst ned på jorden”. Vi mener,

at Kunstforeningen Tangen udover at samle kunstinteresserede, også er en

personaleforening med aktiviteter, der i lige så høj grad fokuserer på det sociale. For at

være så inkluderende som muligt i forhold til både kommende og eksisterende

medlemmer, mener vi, at det er afgørende, at en interesse for kunst ikke præsenteres

som noget højpandet, svært og elitært. Vi mener, at foreningen i stedet bør lægge vægt

på en tilgang til kunst, der er simpel at forholde sig til. Det skal være pædagogisk og

nemt at være medlem af kunstforeningen, og det skal siden afspejle ved at være

overskuelig og lettilgængelig. Ønsket om at gøre kunsten inkluderende understøttes af

foreningens første udstillingsinitiativ, hvor medlemmerne i januar 2011 skal medbringe

og udstille et værk fra deres eget hjem.

5.0 Design

Med udgangspunkt i skitser og flowchart har vi designet og layoutet sidens

brugerflader. I det følgende kapitel gennemgås faserne i informations-, interaktions-

og præsentationsdesign, de grafiske designparametre samt et bud på en AIDA-model

for et potentielt nyt medlem af foreningen.

5.1 Informationsdesign

Informationsdesign henviser til sidens informationsindhold og dets placering. Vi lægger

vægt på, at sidens informationer er lette og overskuelige, og vi har således valgt at have

en forside med udelukkende én nyhed. Bag det ligger en forventning om, at siden vil

blive opdateret forholdsvis sjældent. På den måde vil det for faste brugere være let at

overskue, om der er ny information til dem, og for nye brugere vil det give et hurtigt

indblik i foreningens aktuelle aktiviteter. For at undgå at forsidens indhold fremstår

statisk, når den i perioder opdateres sjældent, har vi placeret en rss-feed fra kunst.dk i

højre side, hvor det er muligt at få et overblik over de seneste nyheder fra kunstens

verden.

5.2 Interaktionsdesign

Interaktionsdesign beskriver brugerens dialog med siden, og for at overskueliggøre

processen har vi udarbejdet et flowchart (se bilag 9), der beskriver sidens

navigationsmuligheder. Vi har for brugervenlighedens skyld på forhånd besluttet os for,

at ingen sider må være mere end to klik væk(og helst kun et). Således har vi indarbejdet

dropdown-funktioner i de menupunkter, hvor der er mere end ét underpunkt, hvorfra

man kan klikke sig videre. F.eks. kan man under punktet ”Om foreningen” klikke sig

videre til ”bestyrelse”, ”vedtægter” og ”kontakt”. Bagtanke er, at det tydelige hierarki

gør det nemt for brugeren at orientere sig i menuen.

Ældre indlæg bliver automatisk arkiveret under menupunktet ”Nyheder”, så faste

brugere let kan finde dem igen. Der er også installeret en søgefunktion i sidens footer.

5.3 Præsentationsdesign

I vores indledende skitser(se bilag 4 og 5) har vi arbejdet med præsentationsdesignet,

der er kommunikationen af sidens indhold og struktur. Sidens forside består af en

header, en vandret menubar med dropdownfunktion, en indholdsside, en sidebar med

en rss-feed og en footer med side- og kontaktoplysninger. Vi har for at opnå en let

navigation valgt at bevare alle disse elementer som konstante på alle sider på nær

forumsiden, som kræver mere plads.

Vi har valgt at inddele menupunkterne i kategorier. Udover forsiden og et indlægsarkiv,

har ”Udstillinger”, ”For medlemmer”, ”For kunstnere”, ”Kontakt” og ”Meld dig ind” egne

menupunkter. Det er en struktur og et hierarki, vi mener, tilgodeser sidens tre

forskellige målgrupper. Nuværende medlemmer kan udover nyheder samt aktuelle og

tidligere udstillinger, besøge deres eget punkt, hvor de kan se foreningens kalender og

diskutere forskellige forenings-, kunst- eller arbejdspladsrelaterede emner. Potentielle

medlemmer kan hurtigt orientere sig i forhold til indmeldelse, og kunstnere vil let kunne

finde ud af, hvordan de kan henvende sig med henblik på at udstille værker.

Det samlede resultat har vi skitseret i et storyboard(Se bilag 6).

5.4 Stil og stemning

Vi har søgt et klassisk, rent og simpelt design til Kunstforeningen Tangens website. Vi har

jævnfør vores målgruppeundersøgelse forsøgt at lave et design, der ikke er elitært, men

til gengæld inkluderende og favnende, så det på sin vis kan fungere som en regulær

personaleforeningsside uden på nogen måde at devaluere det primære: kunsten. Med

andre ord: ”Moderne kunst i sikre rammer”.

5.5 Grafiske designparametre

Format

Sitet er 940 pixels bred og har en højde, der følger sidens indhold. Vi bestræber os på, at

der kommer så lidt scroll som muligt på forsiden, og at det som minimum er muligt at se

rubrik og dele af billedet på forsiden ved indlæsning af siden. Det gør vi for, at tilgodese

foreningens kommunikation til brugerne. Med udelukkende en variabel nyhed på

forsiden, er foreningen sikker på, at den ikke er tvetydig i sin kommunikation, og

samtidig vil faste brugere af siden hurtigt kunne overskue, om der er nyt materiale på

siden(Se desuden skeletopbygning på bilag 10 for øvrige mål).

Typografi

Som gennemgående typografi på siden har vi valgt Verdana. Skrifttypen er designet

specielt til web, da det er en læsevenlig skrift uden føder. Til menuen i headeren er der

valgt en grå skrift på sort baggrund, og en hvid hover-funktion med grå baggrund angiver

brugerens færd på siden. Vi har valgt at bruge versaler i menupunktet for at adskille det

fra ordinært indhold. Ligeledes er foreningens logo designet med skrifttypen Segoe Ul

for at adskille headerteksten visuelt fra indholdsteksten, mens sloganet med Myriad pro

og småt begyndelsesbogstav signalerer friskhed og modernitet. (For tekniske

specifikationer se designmanual i bilag 7).

Illustration

Sidens header består af et sort-hvidt udsnit af et af foreningens første udstillede værker.

Det er valgt for symbolsk at understrege foreningens identitet i denne opstartsfase. I

billede er indsat et logo(som vi har designet), der linker til forsiden, og endelig er der

tilføjet et slogan præsenteret i foreningen og virksomhedens røde signaturfarve.

Farver

I det simple sidelayout, vi har arbejdet med, har farverne været afgørende. Dels ønsker

kunden, at siden benytter G4S’ røde, sorte og hvide signaturfarver. Dels vil vi gerne

undgå, at for mange farver tager fokus fra eller karambolerer med eventuelle farverige

værker, der vises på siden.

Animation og lyd

Animation og lyd indgår ikke på siden i øjeblikket, men skulle det blive aktuelt for

foreningen, har WordPress brugervenlige redaktørfunktioner.

5.6 AIDA-modellen

Da AIDA-modellen lægger op til, at brugeren i sidste ende skal foretage en handling, har

vi i denne gennemgang valgt at se på, hvordan et potentielt nyt medlem af

Kunstforeningen Tangen ideelt vil bruge siden.

- AIDA-modellen (ud fra et potentielt nyt medlems færden på siden).

Attention1

Interest2

Desire3

Action4

Attention: Det røde K i Kunstforeningen, som også går igen som ikon i faneblade og

browserens adressefelt. (jvf. diverse eye-track-undersøgelser, der understøtter, at

læserens synsfelt først rammer øverste venstre hjørne.)

Interest: Nyheden på forsiden vil give den besøgende et kendskab til, hvad der aktuelt

foregår i foreningen. Falder stemning og indhold i den besøgendes smag, taler

sandsynligheden for, at vedkommende vil fortsætte med at orientere sig i forhold til

siden og foreningen.

Desire: Det vil typisk være kontingentets størrelse, altså prisen, der afgør, hvorvidt et

potentielt medlem vil få lyst til at melde sig ind i foreningen. I dette tilfælde taler vi om

et forholdsvist lavt kontingent, 20 kroner om måneden, og det kan endda trækkes over

lønnen. Det, vurderer vi, er et forholdsvist attraktivt tilbud, men vi har dog valgt ikke at

skilte med kontingentets størrelse på forsiden, da vi vurderer, at de primære brugere er

eksisterende medlemmer, og at en prisparameter kan virke forstyrrende eller

påtrængende.

Action: Menupunktet ”Meld dig ind”, hvor der er en indmeldelsesformular.

6.0 Realisering

Det afsluttende trin i HOME-modellen fokuserer på projektets afslutning og

overdragelse til kunden. Vi fokuserer i dette afsnit på den teknologi, vi har anvendt og

vurderer kvaliteten af processen og det endelige produkt.

6.1 Anvendt teknologi

Siden, der er udarbejdet til Kunstforeningen Tangen, er opbygget i open-source CMS-

systemet WordPress. Systemets indhold og det valgte tema – ”Twist of Ten” – gør det

nemt for en kommende administrator at vedligeholde sidens indhold i forhold til et

andet HTML-baseret system.

Temaet er redigeret ved hjælp af HTML og CSS i editorfunktionen. Headeren, logoet og

andre grafiske elementer er lavet i programmerne Adobe Illustrator, Adobe InDesign og

Adobe Photoshop, mens det lille navicon er lavet i Paint.

6.2 Kvalitetsvurdering

Formålet med projektet har været at inddrage pensum fra undervisningen i

Multimedieteknologi og Interaktionsdesign på Erhvervsakademi Aarhus. I sin enkelhed

har processen handlet om at udvikle vores forståelse for processen omkring

brugerfladedesign – fra idé til praksis. Vi har i idéudvikling og udføreæse prioriteret

undersøgelses- og designtrinnet, da det har været vores målsætning, for at sikre

sammenhæng mellem input og produkt og i sidste ende for at kunne levere et optimeret

produkt til Kunstforeningen Tangen. Udover ønskerne fra Kunstforeningen har vi selv

bidraget med input, så websitet også er blevet et produkt af den viden, som vi har

opnået i løbet af undervisningsforløbet.

Projektværktøjerne har udover håndtegninger været HTML-, CSS- og til dels php-kodning

samt Photoshop, Illustrator og CMS-systemet WordPress. Opgaven har med

inddragelsen af HOME-modellen desuden været et studie i at imødekomme en kundes

behov samtidig med at styre en relativt kort proces med tidskrævende tekniske

udfordringer.

Bilag 7

Designmanual

Header:

Baggrundsfarve logo:

Boks: #FFF (hvid)

Skriftstørrelse logo:

Tangen-tekst: pkt. 22,65.

K-tekst: pkt. 74,54.

Unstforeningen-tekst: pkt. 34,39.

Skriftype logo:

Tangen-tekst: Segoe UI.

K-tekst: Segoe UI.

Unstforeningen-tekst: Segoe UI.

Font-weight logo:

Tangen-tekst: Bold Italic.

K-tekst: Bold Italic.

Unstforeningen-tekst: Bold Italic.

Farve logo:

Tangen-tekst: #000 (sort).

K-tekst: #FC1921 (den røde farve, som G4S bruger i sit logo).

Unstforeningen-tekst: #000 (sort).

Slogan

Baggrundfarve slogan:

Udsnit af værk fra Kunstforeningen Tangen, som er beskåret til målene i headeren. Desuden er

billedet gjort sort/hvid med en transparent feature som sidste lag.

Skriftstørrelse slogan:

Tekst: Pkt. 19.

Skriftype slogan:

Tekst: Myriad pro.

Font-weight slogan:

Tekst: Bold

Farve slogan:

Tekst: #FC1921 (den røde farve, som G4S bruger i sit logo).

Menu bar i header:

Baggrundsfarve: #000 (sort).

Skrifttype: Verdana, Georgia, Sans serif.

Skriftstørrelse: pkt. 11.

Text-transform: Uppercase (store bogstaver).

Tekstfarve: #AAA (grå).

Tekstfarve, når man står i et bestemt punkt (hover): #FFF (hvid).

Boks, når man står i et bestemt punkt (hover): #AAA (grå).

RSS-feed widget:

Skriftype rubrik: Verdana, Georgia, Sans serif.

Skriftstørrelse: 14 og fed (bold).

Tekstfarve, når man står i et bestemt punkt (hover): #FF4B33 (rød) og understregning.

Skrifttype tekst: Verdana, Georgia, Sans serif.

Skriftstørrelse tekst: pkt. 12

Tekstfarve, når man står i et bestemt punkt (hover): #FF4B33 (rød) og understregning.

Samtlige sider undtaget punktet ”NYHEDER”:

Skrifttype rubrik:

Tekst: Verdana, Helvetica, Sans serif.

Skriftstørrelse: 23.

Font-weight: Bold (fed).

Tekstfarve: #000 (sort).

Tekstfarve, når man står i et bestemt punkt (hover): #FF4B33 (rød).

Skrifttype brødtekst

Tekst: Verdana, Georgia, Sans serif.

Skriftstørrelse: pkt. 14.

Font-weight: none.

Tekstfarve: #AAA (grå).

REALISERING

DESIGN

UNDERSØGELSE

FORANALYSE

- BESØG AF KUNDE

- BRAINSTORM

- MINDMAP

- SKITSER

- FLOWCHART

- STORYBOARD

- MÅLGRUPPE

- AFSENDER

- BUDSKAB

- RAPPORTSKRIVNING

- STIL

- STEMNING

- ÆSTETIK

- INDHOLD

- LAYOUT

- WORDPRESS

- RAPPORT

- BILAG

- KORREKTUR

- PRINT

ONSDAG1.12.10

T0RSDAG9.12.10

FREDAG10.12.10

SØNDAG5.12.10

TIRSDAG7.12.10

ONSDAG8.12.10

MANDAG6.12.10

LØRDAG4.12.10

FREDAG3.12.10

TORSDAG2.12.10

TIDSPLAN - BILAG 8

FORSIDE

HJEM NYHEDSARKIV FOR KUNSTNERE KONTAKT MELD DIG INDUDSTILLINGER

TIDLIGERE UDST ILLINGER

AKTUEL UDSTILLING

OM FORENINGEN

KONTAKT

VEDTÆGTER

BESTYRELSE

FOR MEDLEMMER

AKTIVITETSKALENDER

DEBAT

FLOWCHART - BILAG 9

940 x 50 pixels

720 x auto pixels 220 x auto pixels

940 x 38 pixels

450 x 100 pixels

940 x 198 pixels

Wrapper 945 x auto pixels

SKELETOPBYGNING - BILAG 10

2,5 px