26.november2010. Etstortslag for. Morten Rold. Forfattere:

Transkript

1 26.november2010 Børsen. dk: Etstortslag for i ndustri en Proj ekt3 Forfattere: O brayen McGregor Chri sti an Haslund Patri ckj akobsen LasseVi lmar J P. dk: Geni streg! Vej ledere: TueBecherJ ensen Morten Rold

2 0 Industriel Symbiose 1. INDLEDNING 1 2. VÆRDISÆT 1 3. INTERESSENTANALYSE PROJEKTGRUPPEN ISI 2 4. RISIKOANALYSE COP16 BLIVER IKKE TIL NOGET ELLER AFLYST: FATALE UENIGHEDER I GRUPPEN: FOR HØJE FORVENTNINGER: 2 5. DESIGN / FARVE VALG FONT GESTALT LOVENE BEGRUNDELSE FOR NYT LOGO / SLOGAN 4 6. INFORMATIONSSTRUKTUR KODNING GANGSTERTEST 6 7. PROCESEVALUERING/KONKLUSION 7 8. KILDER BILLEDERNE LITTERATUR 9 9. BILAG 10 BILAG 1 - GANTKORT 10 BILAG 2 - INTERESSENT ANALYSE 10 BILAG 4 UDREGNING AF DEN KRITISKE VEJ 11 BILAG 5 HUMAN INTERFACE RESEARCH 12 BILAG 6 VALIDERING AF CSS OG XHTML 13 BILAG 7 LOGOSKITSER 14 0

3 Industriel Symbiose 1 1. Indledning I forbindelse med det forestående klimatopmøde COP16, der afholdes i Mexico i perioden 29. Nov. 10. Dec., ønsker man fra Industrial Symbiosis Institute, Kalundborg et nyt og mere tidssvarende website. 1 Flere og flere virksomheder ønsker at få en grønnere profil. De gør det både for brandingen, men også for øget indtjening. Vi kigger på hvem der vil benytte sig af siden, og det udbytte de kan få af besøget. I denne opgave dokumenteres vores arbejde med forskellige analyser, projektplan 2, værdisæt, Adobe pakken samt læring i forbindelse med det tredje projekt på Multimediedesigneruddannelsen på Erhvervsakadamiet København Nord. 2. Værdisæt Vi blev enige i gruppen om ikke at udnævne en projektleder, da det kan medføre konflikter. I stedet valgte vi at benytte os af et fælles værdisæt, så alle var enige om spillereglerne og arbejdsopgaverne i gruppen. Komme til aftalt tid. Aflevere aftalt materiale også under sygdom. Der skal være plads til sjov, men til en vis grænse. Alle beslutninger træffes demokratisk. Samarbejde. Alle bestræber sig på at være forberedt. 3. Interessentanalyse Vi har valgt at beskrive de vigtigste interessenter, projektgruppen og ISI, for at vise hvilke tanker vi har gjort os omkring analysen Projektgruppen Da vi er eksperterne indenfor webdesign, vil vi levere den fornødne viden. Vi står for selve opgaven, og derfor har vi naturligvis en magt i forhold til tilblivelsen af siden. Vi er i stand til at argumentere for vores valg af design, farver etc. I det tilfælde at kunden stiller specifikke krav til siden, som ud fra vores overbevisning ikke egner sig eller rammer ved siden af budskabet, vil vi kunne argumentere for, hvorfor dette ikke skal med på siden, eller i hvert fald rådgive omkring ulempen ved at følge deres anvisning. Vores udbytte af opgaven for ISI vil udover øget indtjening give os mulighed for at profilere vores firma. Vores produkt vil blive set af en større kreds af andre potentielle kunder, da profileringen gennem de mange tilknyttede firmaer vil være stor. Opgavetypen vil derudover give mulighed for yderligere samarbejdsopgaver med ISI samt de eventuelle opgaver for relaterede firmaer. 1 Opgaveformulering af projekt 3 2 Bilag 1 3 Bilag 2 1

4 2 Industriel Symbiose 3.2 ISI ISI vil bidrage med den fornødne information og baggrundsviden til siden. ISI forventer med websiden at nå ud til et bredere publikum. De forventer, at deres nye design og image vil eksponere dem på globalt plan og om muligt give adgang til kontakt til regeringer og lignende højt rangerende forbindelser. De potentielle fremtidige samarbejdspartnere er samtidig potentielle fjender, da de henvender sig til produktionsvirksomheder med et spil/overskudsprodukt. Det afhænger i øj grad af om det pågældende firma arbejder på at markere sig som et miljøvenligt firma eller udelukkende et servicerende og profitskabende firma. Et samarbejde med ISI skal derfor afspejle begge dele. Større omsætning, mindre spil og mere indtjening ISI har den fornødne viden til at forvandle samarbejdspartnerens spild til større omsætning. Budskabet videregives blandt andet gennem medieomtale og branding. Økonomien spiller også en afgørende rolle. Prisen på at indfører et nyt element i produktions linjen i virksomhederne afhænger af de etablerede systemer i den pågældende virksomhed samt den planlægning og strategi den enkelte virksomhed vælger, og den aktuelle pris kan variere. Det hænger også sammen med det er blevet moderne at tænke grønt, specielt i den vestlige del af Europa. Selvom virksomheden indgår et samarbejdet med ISI, for bedre branding, kan det forsvinde i mængden fra andre grønne virksomheder. Konkurrencen er stor. 4. Risikoanalyse Da vi ønskede flest mulige indgangsvinkler til opgaven, valgte vi at sætte os ned i en minutters tid for at brainstorme, da vi følte denne fremgangsmåde dækkede flest mulige scenarier. Som udgangspunkt blev alle ideer nedfældet og medtaget uden at stilling til eller sortering af ideerne. Da tiden var gået havde vi ca ideer. Herefter valgte vi de 10 mest relevante oplæg COP16 bliver ikke til noget eller aflyst: Vi mente ikke det var sandsynligt, at en begivenhed af denne størrelsesorden ville blive aflyst. Dels var der brugt enorme ressourcer for at stable et sådant arrangement på benene, dels var det det 16 ende i rækken. Skulle det ske, ville det naturligvis betyde en del for vores arbejde. Bliver det helt aflyst, vil kunden ikke skulle bruge vores arbejde. Vi vil derfor indgå en kontrakt med kunden, der fx kunne omhandle nogle etaper. Kunden betaler for hver milepæl der er nået, eller for hvor mange timer der er brugt per defineret arbejdsopgave Fatale uenigheder i gruppen: Gruppen har et godt og indgående kendskab til hinanden gennem tidligere mindre samarbejdsprojekter. Vi har derfor en god baggrund for både at kunne gennemskue faldgruber samt forebygge uenigheder af fatal og destruktiv karakter. Gennem beslutningen om demokratisk arbejdsgang og en god løbende dialog vil gruppen holde både arbejdsmoralen høj og resultat og produkt som direkte mål For høje forventninger: Vi ønskede alle at få lavet et produkt vi kunne være stolte af, vi kunne også hurtigt blive enige om hvad vi synes der var den rigtige standard og niveau. Men 2

5 Industriel Symbiose 3 vi kendte dog også vores individuelle begrænsninger på de værktøjer vi har til rådighed. Derfor vurderede vi dette ikke ville blive et problem. Vi mente at kende begrænsningerne og skabte opgaven derefter. Konsekvensen af dette ville heller ikke være fatalt. Vi mente hurtigt at kunne kende tegn på, om vi havde sigtet alt for højt. 5. Design / Farve valg Vi valgte at benytte os af en blå monokromatisk harmoni i vores design, da det understøtter ISIs værdier og afspejler sig i disse. Farven blå symboliserer bl.a. stabilitet, seriøsitet, afklaret hed og miljøet - så som havet og himlen. Billederne er blevet efterbehandlet med diverse værktøjer, hvor de bl.a. har fået et blålig toning af #30395c. Således fremstår elementerne som en helhed og giver hermed et gennemført design. 5.1 Font Vi har under dette projekt benyttet to forskellige fonts. Trajan pro 4 blev udgivet i 2001 og er en udspringer af Trajan(typeface) der blev lavet til Adobe af Carol Tormbly har vi valgt til teksten i vores header(navn/slogan), fonten er ofte brugt på film plakater samt forsider til computer spil. Da den derfor typisk er benytte til korte sætninger eller et enkelt ord eller to(film titel), valgte vi derfor denne font. Trajan pro/ TRAJAN PRO abcdefghijklmnopqrstuvwxyzæøå ABCDEFGHIJKLMNOPQRSTUVWXYZÆØ aa

6 4 Industriel Symbiose Verdana er en humanistisk sans-serif skrifttype designet af Matthew Carter til Microsoft. Skriften er udgivet i 1996 og er specielt udviklet til at kunne læses selv på små skærme. De manglende seriffer, den store højde, de brede bogstaver, den brede afstand mellem bogstaverne og den måde bogstaverne er udformet på er valgt for at øge læsbarheden. 5 Verdana Regular / VERDANA REGULAR abcdefghijklmnopqrstuvwxyzæøå ABCDEFGHIJKLMNOPQRSTUVWXYZÆØ aa Gestalt lovene Loven om nærhed/lighed er blevet benyttet i vores menu, hvor tekst og ikoner hører sammen da de står tæt på hinanden. Det samme er gældende i footeren for tekst/ikoner, ved flagene øverst oppe, samt ved samarbejdspartnerne. Loven om forbundethed er ligeledes gældende i de nævnte punkter. Vi har samtidig benyttet cirkler rundt om vores navigations ikoner, mens der også indgår som element i vores logo. Loven om lukkethed ses tydeligt ved at siden er opdelt 5 kasser, i den første kasse er der placeret to en header, et logo, slogan og søgefunktion. I den anden har vi global menuen. I den tredje boks finder vi teksten og billede. Den fjerde indeholder samarbejdspartnere og den femte footeren. 5.3 Begrundelse for nyt logo / slogan Vores tanker omkring Industriel Symbioses eksisterende logo var, at det på ingen måde var tydeligt, hverken i størrelsen eller i symbolikken. Kigger man på deres side, er det stort set umuligt at se hvad logoet forstiller, endsige hvad de vil fortælle med det. Vi var lidt rundt omkring i vores forsøg på at skabe et nyt logo. Vi var inde over, at bruge genbrugspilene, jordkloden mm. Det nye logo illustrerer sammenhæng mellem firmaerne, hvor ISI er det midterste led ud af de tre. Vi benyttede de samme nuancer til logoet, som vi har brugte til resten af siden. Se bilag 7 for skitserne

7 Industriel Symbiose 5 Vi valgte at ændre deres slogan, til et der lægger fokus over på den økonomiske del, frem for den grønne tankegang, for at fange virksomhedernes opmærksomhed. Spild er penge. 6. Informationsstruktur Vi gik fra starten efter et enkelt og stilrent design. Stilen vi valgte var inspireret af Danske Banks side. Vi mente, at hvis vi gik efter et grønt budskab gennem hele designet, ville udtrykket i højere grad indikere en miljøorganisation. Enkeltheden afspejler sig igen i vores navigations struktur. Siden har en enkelt hovedside, hvor samtlige af undersiderne udspringer fra. Dette fremgår tydeligt af vores sitemap. Ifølge webstyeguide.com 6 har Human Interface Researchs undersøgelsen vist, hvor brugere forventer at finde ting på en hjemmeside. Vi har på baggrund af denne undersøgelse bygget vores side op så den understøtter dette. 6 Bilag 5 5

8 6 Industriel Symbiose 6.1 Kodning Nedstående kode i XHTML sørger for at header billedet ingen ramme har og den får et id kaldet header og topbillede. Samtidig mapper vi noget af headeren(logoet) så det fungerer som et link til forsiden. <div id="header "> <img src="images/header.png" alt="header" border="0" usemap="#topbilledemap" id="topbillede" /> <map name="topbilledemap" id="topbilledemap"> <area shape="rect" coords="10,8,208,95" href="index.html" target="_self" /> </map> </div> Koden i CSS sørger for at billedet ikke blive bredere end 903 pixels. /* header */ #topbillede { width:903px; } Alle sider i CSS og XHTML er valideret via w3.org validatoren Gangstertest Vi har afprøvet en prototype af vores hjemmeside på 3 personer, der gav henholdsvis scoren, 16,17, 17 point. De 2 største (og eneste problemer der blev nævnt var): Det var meget vanskeligt at se hvor på siden man var, eller hvordan man var kommet derhen. Flere af testpersonerne savnede en dedikeret forside knap. 7 Bilag 6 6

9 Industriel Symbiose 7 Vi benyttede os af 3 testpersoner, den første var, Lisabeth, 56år, førtidspensionist der gav vores side 17 point i testen. Den næste person var Dorthe, 27år, account manager gav 16 point. Sidste person var Ulla på 51 som er selvstændig erhvervsdrivende der også gav 17 point. De var alle enige ovenstående problematikker. Ud fra testens resultat har vi valgt at ændre på vores navigations ikoner, således at det nu er tydeligere hvor man er på siden, ved at ikonet er markeret tydeligt med en cylinderform. Vi har valgt ikke at lave en brødkrummesti, da kun har 2 niveauer og vi mener det at gøre ikonerne mere tydelige er nok for at brugerne for at navigere rundt på siden. Vi har valgt ud fra Human Interface Researchs analysen, at benytte logoet som vores home knap, da langt de fleste forventer at finde home knappen her, og det på de fleste sider er en standard. Vi kunne have gennemført testen langt tidlige i projekt forløbet, evt. da vi havde lavet vores skitse til siden, for nemmere at kunne implementerer nye tiltag, samt have taget højde for det i vores projekt plan. 7. Procesevaluering/konklusion Uden megen tøven dannede Christian, Lasse, Patrick og Brian gruppen. Vores forventning omkring gruppens seriøsitet blev allerede indfriet ved vores første gruppemøde. Alle har haft en sund modenhed omkring hvornår det er passende, at lave sjov, og hvornår man skal være alvorlig, hvilket har udmundet i en fantastisk stemning i gruppen. Vi startede med interessentanalysen, som til at begynde med skabte en del forvirring i gruppen. Vi valgte derfor at sætte os ned og diskutere emnet fra ende til anden, og få klarlagt hvordan vi skulle udarbejde interessentanalysen. Under udarbejdelse af risikovurderingen blev idéen født, at vi i gruppen skulle fastlægge et værdisæt at arbejde ud fra. Dette skulle forhindre, at der senere kunne opstå situationer, der ville kunne medføre større diskussioner og lignende. Alle blev enige om hvad der skulle være inkluderet i gruppens værdisæt. Da vi havde udarbejdet analyserne, begyndte vi i fællesskab på vores projektplan i værktøjet Merlin til Mac. Det skabte lidt problemer, da vi ikke helt mente at programmet fungerede så hensigtsmæssigt som forventet. Efter en dags intenst arbejde, var opsætningen/indsætning af data i projektstyringsprogrammet, og WBS s slækudregningen 8 klaret. Det endte med et resultat, som vi alle var stolte af, og synergien synes også tydeligt at fremgå af resultatet. Da vi var færdige med opgaverne, satte vi os ned og samlede det hele endnu en gang, så alle i gruppen vidste hvad var blevet gjort. Efter vi var nået til enighed om skitseringen af layout og navigation, gik vi i gang med wireframen. Denne skulle hurtigt vise sig mere brugbar end først antaget. Human Interface Research undersøgelsen gav os den nødvendige viden og input, for at kunne skabe en nem og brugbar navigation på siden, som vi og eventuelle brugere ville finde tilfredsstillende. Ud fra vores viden om farvelære, indså vi at farven blå skabte det nødvendige udtryk på siden, som vi ønskede, for at ramme den tiltænkte målgruppe. Fra basal forståelse af HTML og CSS, har hele gruppen flyttet deres individuelle kompetencer til at kunne bygge og style en side fra bunden. 8 Bilag 4 7

10 8 Industriel Symbiose Gangstertesten kunne med rette have været udført langt tidligere i forløbet for at spare unødvendig ekstra arbejdstid. I kraft af det velfungerende gruppearbejde, har alle udviklet deres kompetencer på det område at arbejde sammen som en gruppe og et team. Det skal forstås på en sådan måde at man viser hensyn, lytter, går på kompromis med egne holdninger etc. Det har også været en god øvelse i at fordele arbejdsopgaver og skabe en helhed. Igennem forløbet har vi formået på bedste vis at udnytte hinandens forcer. Medhensyn til brugen af gantkortet, kunne det med nemhed have været brugt oftere, men grundet vores manglende erfaring inden for projektstyring, såvel som konstruktion af siden, var gantkortet kun et kvalificeret skud i tågen. Rapportskrivningen tog, som først frygtet, længere tid end planlagt, på trods af at vi havde prøvet på bedste vis at implementere det i vores gantkort. Vi kan som gruppe konkludere at synergien vi formåede at skabe, i kraft af det gode samarbejde, har resulteret i et bedre samlet produkt. Vi har erfaret at vi fremover ved andre projekter tidligere vil inddrage vores viden omkring farvelære, allerede ved eventuel skitsering af siden, samtidig med at gangstertesten skal finde sted på dette tidspunkt. Vi har samtidig erfaret at det for os ville være en bedre fremgangsmåde, at starte med de større og mere tidskrævende aktiviteter, så de eventuelt kan fungere som milepæle. Derved skabes der bedre overblik og fleksibilitet til at tilpasse projektets arbejdsopgaver. 8

11 Industriel Symbiose 9 8. Kilder 8.1 Billederne Header: Hovedbillede: Searchbar: Aske: Forside billede: er-container 8.2 Litteratur Ole Gregersen & Ian Wisler-Poulsen: Usability: Testmetoder til mere brugervenlig websites på internettet. Grafisk Litteratur

12 10 Industriel Symbiose 9. Bilag Bilag 1 - Gantkort WK 44, november 2010 WK 45, november 2010 WK 46, november 2010 WK 47, november 2010 WK 48, december LPCB ANALYSE Gruppeværdisætning W. 4h? C.; L.; P.; Problemanalyse 4h? C.; L.; P.; W. Krav specfikationer 4h? C.; L.; P.; W. Intressent analyse 4h? C.; L.; P.; W. Risko analyse 4h? C.; L.; P.; W. Firma analyse 4h C.; L.; P.; W. Kvalitetssikring af analysen C.; L.; P.; W. Website PBS->WBS 1 day? C.; L.; P.; W. Rapport day? 1 C.; L.; P.; W. Præsentationsforberedelse 4h C.; L.; P.; W. Præstentation 4h C.; L.; P.; W. Moodboard 2h C.; L.; P.; W. Navigation 4h C.; L.; P.; W. Skitse/Photoshop/billedbehandling 1,25 days C.; L.; P.; W. Prototype/Photoshop 1,5 days C.; L.; P.; W. CSS/Dreamweaver 2,5 days C.; L.; P.; W. hours C.; Validering af css/xhtml 6 L.; P.; W. Ekspert/gangster test 1,25 days C.; L.; P.; W. Web optimering / finpudsning 1,5 days C.; L.; P.; W. Afsluttende 6 hours validering C.; L.; P.; W. Rapport 1,5 days C.; L.; P.; W. Afslutning af rapport 4h C.; L.; P.; W. Dead line/aflevering C.; L.; P.; W. Præsentation 1 day C.; L.; P.; W. Vejledning Vejledning 1 1,5h C.; L.; P.; W. Vejledning 2 1,5h C.; L.; P.; W. Vejledning 3 1,5h C.; L.; P.; W. Vejledning 4 1,5h C.; L.; P.; W. Bilag 2 - interessent analyse 10

13 Industriel Symbiose 11 Bilag 3 Risikoanalyse Bilag 4 Udregning af den kritiske vej 11

14 12 Industriel Symbiose Bilag 5 Human interface research 12

15 Industriel Symbiose 13 Bilag 6 Validering af CSS og XHTML 13

16 14 Industriel Symbiose Bilag 7 Logoskitser 14