Projekt 3 - Website.

Transkript

1 Projekt 3 - Website Lars Nordenbæk Lucas Perch-Nielsen Mark Skov Halding Lasse Mathias Bruun Overgaard Majbritt Østergaard Andersen Ian Wisler-Poulsen Merete Lindemann Morten Rold Ditlev Skanderby

2 Gruppen Lars Nordenbæk Lucas Perch-Nielsen Mark Skov Halding Lasse Mathias Bruun Overgaard Majbritt Østergaard Andersen 2

3 Indholdsfortegnelse Indledning 4 Argumentation for design 13 Projektbeskrivelse 4 Procesbeskrivelse 15 Formål 4 Evaluering 15 Gantt kort 5 Læring 16 Brugertest 6 Konklusion 16 Ekspertvurdering Kortsortering Litteraturliste 17 Design brief 8 URL Adresser 17 Kommunikationsanalyse 9 Link til redesign af soerenk.dk Links til portfolios Kommunikationsmodel Flowchart 10 HTML og CSS 12 Kodningseksempler 3

4 Indledning Formål Restaurant søren k åbnede sammen med Den Sorte Diamant i Det Kongelige Bibliotek ved havnen i København. Indehaverne dengang skabte en restaurant, som i gastronomiens verden lagde sig op af bygningens klare og pompøse stil. Restauranten har siden hen fungeret som den daglige gastronomiske aktivitet i Det Kongelige Bibliotek. Til denne restaurant har vi på multimediedesignuddannelsen fået stillet den opgave at give et bud på et bedre design til deres website, der på nuværende tidspunkt trodser nogle af de væsentlige designprincipper. Der ønskes en vurdering af sitets problemer og en løsning derpå. Formålet med projektet er at skabe et fuldt funktionelt website; denne skal være valid i følge W3C standarder. Der skal under arbejdet med sitet skabes en god forståelse for brugen af HTML samt CSS. Som en del af den første fase i projektet fokuseres der på brugertest som ekspertvurdering og kortsortering. Disse bruges, som fundament og inspiration for designet på det nye site. Hertil benyttes selvfølgelig også de 20 Designprincipper, som indgår i en god wayfinding. Ydermere stilles der et Gantt kort op, som overskueliggør projektprocessen. Om sitet laves der et Flowchart, som illustrerer opbygningen af henholdsvis forsiden samt dens undersider. Projektbeskrivelse Til vores redesign af websitet har vi først og fremmest udarbejdet en brugertest bestående af en ekspertvurdering og en kortsortering, som i undervisningen blev fremlagt. Disse brugertest bruges til en specificering af sitets problemstillinger; som bl.a. lyder at det er svært at finde rundt. Derudover er der lavet et Gantt kort, som skal hjælpe til at overholde diverse deadlines og bevare et overblik over projektet. Ved hjælp af vores kendskab til kodning i HTML og CSS udarbejdes et redesign, som stemmer godt overens med designet på det nuværende site, men som optimeres og bliver mere overskueligt; hertil en bedre wayfinding. 4

5 Gantt kort I projektforløbet er der udarbejdet to gantt kort; dette skyldes at vi i det første gantt kort havde regnet med at projektet ville forløbe sig en smule anderledes, og derfor udarbejdes der i slutningen af projektforløbet et nyt gantt kort, som viser projektforløbet mere realistisk. fremgangsmetode og var klar til at påbegynde rapportskrivningen. Her blev bl.a. kommunikationsanalysen og designbeslutningen skrevet tidligt i processen, da vi havde nogenlunde styr på, hvilken retning projektet forløb sig mod. Dette betyder samtidig at procesbeskrivelsen blev skrevet umiddelbart efter dette og dermed også var relativt hurtigt færdigt. I første omgang havde vi en forventning om at punktet forklaring af koder skulle skrives i forbindelse med html/css opbygningen, men besluttede os tidligt i forløbet for at vente til at denne var helt færdig. Vi mente at det ville være mere overskueligt på denne måde, da vi til sidst i forløbet havde en bredere forståelse for kodningen og derfor kunne få de mest væsentlige kodninger med. Konklusionen på de to forskellige gantt kort udkast må derfor være at HTML/ CSS delen trak ud, hvorimod selve klargøringen og rapportskrivningen var meget effektivt fra start. Dette kan bl.a. skyldes lidt uenighed omkring den endelig hjemmesides opbygning, som skulle helt på plads før kodningen kunne fuldføres. Det første gantt kort over projektet viser, hvordan vi havde forudset projektet forløbe sig. På første udkast af vores gantt kort var der en del arbejdsopgaver, som blev udført hurtigere end diagrammet viste. Dog måtte vi samtidig indse at en række deadlines på arbejdsopgaverne var lidt for ambitiøst tilrettelagt. I første udkast havde vi sat en meget kort periode af til selve HTML og CSS-delen, som vi forventede færdig allerede elleve dage inde i projektforløbet. Det viste sig dog at kodningen og stylingen var mere omfattende end forventet og vi rettede derfor deadlinen forholdsvis tidligt i projektforløbet. Selve rapportskrivningen gik i gang tidligt og en stor del af indholdet blev færdiggjort inden vores deadline på 1. udkast af gantt kortet. Efter en lang dialog om forbedringer til det eksisterende website kom vi frem til en ideel Her ses det endelige gantt kort, hvor der ses en bedre fordeling af opgaverne mellem dagene. 5

6 Brugertest Ekspertvurdering Som en del af vores ekspertvurdering af har vi arbejdet med Jakob Nielsens 10 heuristikker samt de 20 Designprincipper. Herunder er der udarbejdet et skematisk forslag til ændringer af websitet med fokus på de mest relevante principper og love. Heuristik/ Designprincip #3 Brugerkontrol og frihed #4 Konsistens og standarder Problem Svært at finde rundt på sitet. Billedlink virker ikke. Links er ikke ens. Katagori Løsning Klar menu med god struktur. Ens retningslinier på links. Ens retningslinier på links. Dette screenshot viser, hvordan hjemmesiden oprindeligt ser ud. Her ses, hvordan brødkrummestien kommer i fokus, da den ligger i en sort bjælke i det ellers så lyse design; dette virker forvirrende da den fremstår som en undermenu. Ydermere er der en dropdown menu, som dækker brødkrummestien, hvilket resulterer i at man ikke ved, hvor på sitet man befinder sig. Dette problem har vi løst ved at lægge menuen ned i den sorte bjælke og altså derfor sørge for at det er den, som er i fokus. Derudover er det aktive menupunkt markeret så det er mere synligt, hvor man er. #7 Fleksibilitet og effektivitet i brugeren Navngivning forvirrer. Søgefunktionen virker ikke optimalt. Der er rodet. Ingen tilbage til forsiden - knap Der skal være en logisk og tydelig navngivning. Hvis der er en søgefunktion skal den virke. Der må ikke være for meget design, der tager fokus fra det væsentlige. Tilbagefunktion på alle sider. Herover ses vores løsning til en bedre wayfinding i menuen. Et andet usability-problem vi oplever på soerenk.dk er forstyrrende elementer i forhold til Loven om Nærhed. På billedet herunder fornæmmer vi at Cafe Øieblikket er en del af menupunkterne, da det står med samme afstand, som de andre menupunkter. Dette punkt virker dog som et link til en ekstern side. Derudover ser vi tydeligt Loven om Lukkethed i Bestil bord punktet, hvilket fungerer fint, men som vi har arbejdet videre med. #8 Æstetik og minimalistisk design Lange linier - for meget tekst. 2 Gøre det mere web venligt for brugeern Det vigtige ses ikke først. 1 Klar og logisk struktur. 6

7 Brugertest Kortsortering Til vores kortsortering har vi arbejdet med bogen Usability, hvor vi har kigget nærmere på den åbne og den lukkede test i kortsorteringen. Vi har testet på vores redesign af soerenk.dk for derefter at kunne rette vores redesign til det mest optimale. Vi brugte tre testpersoner og herunder forklares en af testene. I den åbne test bemærkede vi en lille frustration fra vores testdeltagere; der var en del af undersiderne, som kunne sættes sammen i forskellige grupperinger. Den første fik resultatet, som følger: Lukket test Menukort Frokostmenu Aftenmenu Forside Arrangementer Selskaber Receptioner Om Os Job Kontakt Åben test Forside Vinkort Presse Priser Bestillingsvilkår Historie Job Frokostmenu Gæstebog Selskaber Kontakt Aftenmenu Historie Receptioner Presse Bestillingsvilkår Vinkort Priser Gæstebog Med kortsorteringen fik vi konkluderet at nogle undersider skulle revurderes: Her bl.a. undersiden med priserne, hvor vi først ville have en underside med alle priserne, men på grund af denne test har vi valgt at skrive priserne ind på de respektive sider. Med dette sørger vi for at brugeren hurtigt kan finde de ønskede priser. Her ses f.eks, hvordan historie, selvskaber og receptioner er grupperet, hvor vi i vores redesign har valgt historie under menupunktet om os og lade alle former for selskaber m.m. være under et menupunkt arrangementer. Dette gjorde testpersonen dog også da vi nåede til den lukkede test, hvor menupunkterne var givet på forhånd. I testen her ses, hvordan testpersonen har haft lettere ved at placere de forskellige punkter så de giver god mening i forhold til hinanden. De er placeret som vi i vores redesign selv havde tænkt det. 7

8 Design brief Projekt opsumering Vi har fået stillet til opgave at finde ud af, hvad der skaber problemer på restauranten søren k s hjemmeside, med henblik på at finde en designløsning, som kan få restauranten til at fremstå bedre. Vi skal få hjemmesiden til at fremstå fuldt funktionelt og stadig bevare det flotte udseende og gode følelse. Hjemmesiden skabes i HTML og CSS og vi må bruge de eksisterende billeder og tekst fra den originale hjemmeside. Modtagerprofil Hjemmesiden henvender sig til mellem- og overklassen. Restaurantens fysiske beliggenhed er i hjertet af København i den pompøse bygning - Den Sorte Diamant. Bygningen er i sig selv et symbol for den danske velfærd, storhed og arkitektoniske egenskaber. Vores beliggenhed midt i København taler for sig selv. Vi er placeret i en af Danmarks mest roste og spektakulærer bygninger Den Sorte Diamant, som i sig selv er et besøg værd. - Restaurant søren k Vi arbejder med en højt respekteret restaurant, hvor service, prestige og sundhed har høj prioritering for restauranten og dets besøgende. Vi vil forsøge at målrette vores redesign og den nye navigation efter søren k s respektive målgruppe af kunder, som forventer at få en unik smags- og underholdningsoplevelse. Kommunikations strategi Hjemmesiden kommunikerer i en behagelig neutral tone og det ses tydeligt, at der stræbes efter, at være det dansk/franske køkken med rødder i de etiske og sunde skandinaviske råvarer. Søren k har belæg for deres stilrene hjemmeside eftersom virksomheden er godt understøttet af gode anmeldelser fra gæster og pressen om høj standard og service. Der hvor søren k falder udenfor deres egne standarder er på navigationen og funktionaliteten på hjemmesiden. Læseren bliver ganske enkelt præsenteret for alt for mange muligheder og siden bliver hurtigt uoverskuelig på grund af dårlig wayfinding, inaktive billedlinks, for meget fleksibillitet, generelt varieret ensartethed og en søgefunktion, som ikke virker optimalt. Konkurrencedygtig positionering Vores udfordring ligger i at simplificere søren k s hjemmeside. Dette gøres ved hjælp af en bedre navigation, som kan give større succesrate for restaurantens kunder, som starter med at besøge restauranten via hjemmesiden. I sidste ende skal vores redesign udtrykke de samme følelser som den originale, men have et meget mere enkelt udseende, som ikke forvirrer brugeren. Det skal være nemmere at få den nødvendige information om restauranten: Så vi vil koge hjemmesiden ned til det mest basale; derved gøre den mere overskuelig for brugeren og nemmere at udvælge de funktioner og informationer, som brugeren ønsker. Indtryk af websitet Ved første øjekast ser hjemmesiden tjekket ud. Farvevalget bliver holdt i neutrale farver som sort, hvid og grå. Sproget er nyanceret og neutralt så alle kan forstå det. Man kan se at der er gjort noget ud af billeder fra restauranten, hvilket giver et godt indtryk. Alt i alt passer søren k s hjemmeside godt ind i den samlede oplevelse af høj service og skandinavisk velbehag, som restauranten yder i Den Sorte Diamant. 8

9 Kommunikationsanalyse Denne analyse er baseret på Jan Krag Jacobsens bog 29 spørgsmål - En moderne retorik til planlægning af kommunikation. I vores kommunikationsmodel har vi taget udgangspunkt i kommunikationsforskeren Harald Dwight Lasswell s model: Hvem siger hvad til hvem i hvilket medie med hvilken effekt? Hvordan kan modtageren bruge informationen? På websitet kan modtageren bestille bord samt finde information om restauranten, mad, priser, beliggenhed osv. Hvilke nye muligheder giver informationen modtageren? Informationen på soerenk.dk giver brugeren en bedre og bredere brugervenlighed på sitet. Hertil skal det dog siges at denne brugervenlighed kan optimeres endnu mere i forhold til det respektive site. Hvem henvender websitet sig til? Restauranten henvender sig primært til mellem og overklassen, da den med sin beliggenhed i Den Sorte Diamant også ligger stor vægt på, hvordan det gastronomiske aspekt stemmer overens med resten af bygningen. Hvad er budskabet? Søren k ønsker at formidle budskabet, der lyder at deres restaurant er værd at besøge. Ydermere er det vigtigt for dem, at de besøgende er klar over og sætter pris på den gastronomiske oplevelse, som mærkes på restauranten. De besøgende oplever dertil en kvalitet, som stemmer overens med Den Sorte Diamants prestige. Den ønskede effekt med dette budskab er også derfor at få flere besøgende gæster samt bibeholde de nuværende. Støj I enhver kommunikativ problemstilling kan der forekomme det vi kalder støj, som er vores modstandere i kommunikationen. Det kan bl.a. andet her være dårlige anmeldelser og derved dårlig omtale, tekniske problemer på websitet, som gør det svært for brugeren at navigere rundt, og forkert kommunikation i det hele taget; det er vigtigt at man kommunikerer på rette vis til den målgruppe man vil fokusere på. Formålet med denne effekt er at tjene penge og skabe popularitet. Som en del af den kommunikative formidling ud til befolkningen bruger Restaurant søren k selvfølgelig deres website, men også pressen hjælper restauranten godt på vej med deres mange gode omtalelser. 9

10 Flowchart For at kunne lave et redesign, som fungerer bedre end det nuværende design har vi stillet et flowchart op på det eksisterende site og derefter udarbejdet et nyt flowchart over vores redesign. Dette gør det lettere at få et overblik over websitets forside med undersider og det ses tydeligt at det nuværende site er en smule uoverskueligt: der er for mange undersider, som reelt er irrelevante. På flowchartet herunder ses der, hvordan man har valgt at lave to om os sider; de linker til det samme og er altså derfor overflødige. På forsiden har soerenk.dk valgt at linke til Cafe Øieblikket, hvilket også er unødvendig, da det blot forvirrer brugeren at referere til en anden cafe, som minder så meget om den aktuelle restaurant. Eksisterende website Forside Cafe Øieblikket Ekstern side Restauranten Arrangementer Om os Intro Intro Om os Ledige stillinger Frokostmenukort Aftenmenukort Vinkort Fest- & selvskabsmenu Konferenceforplejning Receptionsanretninger Fest- & selvskabsmenu Bestillingsvilkår Mere om os Medarbejdere Nyheder & nyhedsbreve Presse Pressen om søren k Gæsterne om søren k Kontakt Bestillingsvilkår Historie Samarbejdspartnere Her ses opstillingen af som det ser ud i dag. Dette er ikke en overskuelig opstilling af undersider på Deres site. 10

11 Herunder ses vores bud på et redesign og dets opstilling i et flowchart. Denne opstilling er væsentlig mere overskuelig og lige til i forhold til den nuværende. Her mindskes antallet af overflødige sider og der kan koncentreres om de aktuelle og vigtige sider på sitet. Med en sådan opstilling i flowchartet bliver det nemmere for brugeren at finde lige præcis det, som søges. Redesign af website Forside Menukort Vinkort Arrangementer Om os Kontakt os Frokost Rødvin Selskaber Presse Aften Hvidvin Receptioner Gæstebog Dessert Andet spiritus Historie Bestillingsvilkår Job Her ses opstillingen af siderne på vores redesign af Denne opstilling opleves mere overskuelig og lige til med en klar struktur. 11

12 HTML & CSS HTML, som står for Hypertext Markup Language er et programmeringssprog, som læses af en browser. HTML har som formål at strukturere et website og linke til tekst og billeder. Til vores website har vi stylet HTML i et eksternt CSS stylesheet, som visualisere kodningen. Når man bruger et eksterns dokument med CSS er det muligt at style på alle siderne på et website. Til programmeringen af sitet har vi brugt Adobe Dreamweaver. Som slutprocessen i en website programmering valideres siden på I denne validering øger vi chancen for korrekt kodningsoversættelse i de forskellige browsere. Kodningseksempel i HTML Det kodningseksempel vi bruger her er fra et html dokument og er kodningen over vores menu. I kodningseksemplet her ses, hvordan menustrukturen er opbygget i det vi kalder unordered lists <ul></ul>; inde i disse lister ses alle links; dvs, menuens hovedpunkter: Disse står i <a href> tags. Inde i vores menu har vi så valgt at lave en dropdown, som også står i en unordered list. Her ses f.eks. hvordan presse, historie, bestillingsvilkår ligger i menupunktet om os. Her ses, hvordan html koden ser ud i en browser når vi ikke styler det. Dette er ren html kodning. Kodningseksempel i CSS I html dokumentet bestemmes der, hvad der er på hjemmesiden; i stylesheetet bestemmes det, hvordan det visualiseres og sættes sammen. I koden herunder ses, hvordan menukodningen styles med baggrundsfarver, borders osv. <div id= menu > <ul> <li><a href= index.html class= selected >forside</a></li> <li><a href= menukort.html >menukort</a></li> <li><a href= vinkort.html >vinkort</a></li> <li><a href= # >arrangementer</a> <ul> <li><a href= selskaber.html >selskaber</a></li> <li><a href= receptioner.html >receptioner</a></li> </ul> </li> <li><a href= # >om os</a> <ul> <li><a href= presse.html >presse</a></li> <li><a href= historie.html >historie</a></li> <li><a href= bestillingsvilkaar.html >bestillings vilkår</a></li> <li><a href= job.html >job</a></li> </ul> <li><a href= kontakt.html >kontakt</a> </ul> </div> #menu{ float: left; width:960px; height:42px; background:#fafafa; -moz-border-radius: 5px; border-radius: 0 0 5px 5px; } #menu a.selected{ font-weight:bold; color:#000; } På billedet herunder ses, hvordan vores menu ser ud med en simpel styling. 12

13 Argumentation for Design På det nuværende design af soerenk.dk, ser man ved første øjekast en stilfuld og professionel opbygning, som giver et godt førstehåndsindtryk. En række af professionelle og relevante billeder er noget af det første, der falder en i øjnene når man klikker sig ind på hjemmesiden. Umiddelbart skulle man ikke tro at der er mange designforbedringer til hjemmesiden, men graver man dybere ind i hjemmesidens opbygning finder man hurtigt mange. Fra forsiden bliver brugeren udsat for alt for meget information på en gang; dette skaber en masse støj og resulterer i at navigationen og opbygningen bliver uoverskuelig. For at komme dette til livs, har vi valgt at tage udgangspunkt i sloganet indenfor minimalismen - "less is more"; mindre er mere - dette betyder f.eks. jo mere enkel opsætningen er på hjemmesiden, jo bedre er det for brugeren at navigere rundt. På redesignet af "søren k" ses det tydeligt at hjemmesiden ved første øjekast er langt mere overskuelig - brugeren koncentrerer sig udelukkende om den information som er vigtig - der er ingen forstyrrende elementer. Farvekontrasterne er forbedret, således at den hvide tekst på den sorte baggrund, ses bedre end den lysegrå farve på mørkegrå baggrund. Navigation Ser man på den nuværende hjemmeside (soerenk.dk), vil man opdage at menubjælken i toppen ikke opfylder kravene om "lukkethed". Menuen er på ingen måde indrammet og kan på den måde misfortolkes hos brugeren således at den ikke opfattes som en hovedmenu. Kigger man derefter på "brødkrummestien" under hovedmenuen, vil man opdage at den er indrammet i en sort kasse. Dette virker mere som en menu, da den skaber meget fokus med den dominerende farve. For at man ikke skal bytte om på den egentlige menu og brødkrummestien, har vi valgt at sætte menuen i en af de kasser, som siden er bygget op omkring, og derefter valgt at lade brødkrummestien være i det frie rum i mellem kasserne. Dette skaber et mere roligt indtryk på hjemmesiden og man ser med det samme, hvad der er en menu. Bordbestilling På soerenk.dk ses en stor boks i midten af det hele, hvor man kan tilmelde sig deres nyhedsbrev, dette tager enormt meget fokus væk fra vigtigere ting på siden. Formålet med hjemmesiden (nemlig at bestille mad) er ikke særlig synlig fra forsiden. Når man har fået øje på menuen i toppen leder man efter et sted man kan bestille bord, men overser nemt den blå knap "bestil bord", som kan ses i øverste højre hjørne. Dette er endnu et eksempel på loven om lukkethed - fokus er på den hvide hovedmenu, imens den blå knap "bestil bord" er indrammet i en afrundet kasse for sig selv. Selvom den er placeret i samme niveau, som hovedmenuen vil brugeren højst sandsynligt ikke lægge mærke til den, netop fordi den er lukket inde og dermed står "for sig selv". Hertil har vi i vores redesign valgt at gøre bestillingen til hovedtemaet fra forsiden - den er gjort tydelig og kan umuligt overses. Der er brugt samme princip, som i deres tilmeldingsmetode til nyhedsbrevet, men i stedet erstattet det med en bordbestillingsside. Det betyder at man via et online bestillingsskema 13

14 kan booke et bord direkte fra forsiden. Dette vil højst sandsynligt skabe flere kunder, da de ellers skal bruge lang tid på at finde ud af, hvordan de bestiller bord. Nyhedsbrevet spiller efter vores mening ikke en væsentlig rolle på hjemmesiden og derfor er det besluttet udelukkende at have det til at fremgå et andet sted på siden. Navngivning Selve navigationen på soerenk.dk er meget uoverskuelig, flere gange bliver de samme informationer gentaget og vigtige informationer er svære at tilgå fra hjemmesiden. Derudover er enkelte menupunkter uforklarende, forstået på den måde, at man ikke har en chance for at vide, hvad menuen betyder før man ser underemnerne i dropdown-menuen. Et eksempel herpå er hovedmenuen "Restaurant" - det er de færreste der forstår hvad "Restaurant" betyder - hvilke informationer finder man under dette punkt? - I dette tilfælde er det hovedsageligt en oversigt over restaurantens menuer og derfor har vi i redesignet besluttet at kalde menupunktet for "menuer" i stedet. Dette forstår alle mennesker, hvad betyder og man skal ikke lede længe for at finde den menu man søger. For at få en nemmere forståelse for de ændringer vi har foretaget, se Flowchart-oversigten. Fra forsiden på soerenk.dk ses et meget dominerende slideshow under menuoversigten, dette har vi valgt at gøre lidt mindre og samtidig placere over menuen. Vi mener at det tager fokus og at der er alt for meget spildplads på siden - der er næsten ikke plads til noget information, da billedet fylder størstedelen af siden. Udover at ændre størrelse og placering er selve overgangen i billedeskift også ændret, så den hurtige lidt forvirrende overgang nu er blevet mere afslappet. Personale-login er helt fjernet i redesignet, da det nemt forvirrer brugeren - personalet kunne evt. have deres egen hjemmeside, hvor de har adgang. Cafe Øieblikket Som en del af redesignet har vi valgt helt at fjerne linket til cafe øieblikket, da det virker som et forvirrende element på websitet. Cafeen minder så meget om restaurantens hjemmeside og derfor kan det være svært for brugeren at finde informationer, hvis brugeren har klikket ind på det eksterne site ved en fejl: Derfor har vi valgt at fjerne linket med den overbevisning at, hvis nogen vil på cafeen eller søger information om denne, går direkte ind på deres eget website. Cafe Øieblikkets hjemmeside ligner søren k s hjemmeside både med billeder, design og farvevalg. 14

15 Procesbeskrivelse I processen op til projektet, inden vi fik opgavebeskrivelsen og mens vi arbejdede med opgaven, fik vi undervisning så vi kunne bruge det til projektet. Vi lavede brugertests med Ian med henblik på, at vi skulle kritisere og analysere soerenk.dk og forholde os kritisk til vores eget redesign så vi ikke laver samme fejl, og ender ud med et bedre og mere simpelt design. Da vi havde fået opgavebeskrivelsen, dannede vi os et overblik over arbejdsopgaverne og konkluderede, at der var rigeligt at tage fat på. Vi gik hurtigt igang med planen om at være hurtige og effektive så vi ikke ville få stress i slutningen af projektetforløbet. Først aftalte vi tider og lavede et udkast til et gantt kort så vi kunne admistrere gruppens opgaver. Her erfarede vi at gruppens medlemmer havde forskellige eksterne ting, som vi hver dag skulle nå; så som arbejde, træning og andre arrangementer, så vi lavede en midlertidig arbejdsfordeling med henblik på at alle skulle have indflydelse mere eller mindre over det hele - så ingen bliver afskåret fra læringen. Derefter delte vi gruppens arbejde mellem vores medlemmer efter hver vores individuelle ønske om, hvad vi godt ville starte med og lavede skabelon til rapporten for at danne os et bedre overblik over arbejdsopgaverne. Ud fra testen med Ian og undervisningen fra tidligere på semestret analyserede vi det originale website og forholdte os kritisk til designet og navigationen. Da vi havde dannet os et overblik over fejl og mangler på siden gik vi igang med en idéudvikling med henblik på at forbedre navigationen og simplificere designet. Vi fik langsomt, men struktureret samlet vores rapport og opbygget vores redesign i HTML og CSS med hjælp fra Flash. Vi prøvede at holde os til vores fastlagte tidsplan - men som altid så bøvler det med HTML og CSS. Vi kom bagud med hjemmesiden, muligvis havde vi ikke uddeligeret opgaverne bedst efter folks formåen, så vi stressede lidt til sidst for at få det hele op at køre ordenligt. Med et relativt færdigt produkt og en til dels færdig rapport gik vi igang med at redigere, justere og tilpasse vores website og læse korrektur på rapporten. Til sidst fik vi lagt sidste hånd på projektet og skrev om vores læringsproces i vores portfolier. Evaluering Vi er kommet med et bud på et bedre og mere overskueligt design til Søren K s hjemmeside, med henblik på en mere logisk wayfinding. I gruppen har vi arbejdet godt sammen, og alle har været tilfredse med hinandens indsats på tværs af gruppen. Vi har udnyttet vores tid og prøvet at være på forkant med eventuelle problemer - blandt andet tekniske problemer i forbindelse med at lave en hjemmeside, men også eksterne problemer som f.eks. arbejde, træning og andre tidstagende ting. Endelig blev vi klar til den egentlige arbejdsproces. Vi havde fordelt arbejdsopgaverne så vi kunne samarbejde på tværs af gruppen. Vi var kommet godt fra start og vi arbejdede kollaborativt med de forskellige opgaver i projektet 2 og 2 eller 3 og 3, da vi erfarede at man ikke kan sidde 5 mennesker og lave HTML og CSS samtidig, og ligeledes med rapporten så erfarede vi at det fungerede bedst hvis enkelte fra gruppen kun arbejde med det, mens de ansvarlige personer tog imod inputs fra gruppens øvrige medlemmer. I sidste ende er vi en tilfreds gruppe, vi er stolte over vores redesign og ser frem til at blive evalueret og få vores bedømmelse. 15

16 Læring Konklusion I dette projektforløb har vi mærket, hvor meget vi har lært på multemediedesignuddannelsen. Vi er blevet tilpas udfordret og vi har erfaret, at vi har rykket os siden vi startede på uddannelsen. Specielt for dette projekt har vi fået en bredere forståelse for vigtigheden af gantt kortet og projektstyringen i det hele taget. Der er arbejdet med rapportskrivning i Adobe InDesign, som ellers var et helt nyt program for vores årgang. Som en del af første face i processen har vi arbejdet med forskellige brugertest og deres relevans både i forhold til designprincipper, men også i forhold til projekttypen. Hertil følger også analysen og kritikken af websites, som ligger til grund for redesignet. Brugertests og analyse i forhold til designprincipper hjælper også til den visuelle simplificering og enkelthed, som giver bedre funtionalitet og overskuelighed. Dvs. alt sammen nogle parametre, som ligger til grund for at vi i gruppen overhovedet har kunne lave et redesign. Ydermere har vi lært lidt om design brief og hvorfor det er en god ide at have denne med i sit projekt. Med projektet her er der på baggrund af temaet redesign af soerenk.dk blevet udarbejdet nogle løsninger, som vi bestemt konkluderer er nogle relevante løsninger for netop dette website og ikke mindst for vores personlige læring i projektet. Som en konklusion herpå kan der siges at vi i dette projekt har lært at arbejde i et team på både godt og ondt, som tidligere nævnt i evalueringen. Og vigtigst af alt er vi kommet frem til et helstøbt produkt, som bygger på et seriøst og velfungerende samarbejde. Alle i gruppen har bestemt lært noget nyt inden for alle de relevante parametre og vi er nu bedre stillet til lignende fremtidige opgaver. Bag designet af hjemmesiden er der selvfølgelig også vokset bedre forståelse for brugen af html og css og der er arbejdet en smule i Adobe Flash. Alt i alt har vi lært, hvordan man tester og giver et bedre bud på et webdesign i en gruppe udfra ovenstående erfaringer. Projekt 3 om websites har været en lærerig proces fyldt med opgaver og små problemer, som har rykket os længere i retning af et fremtidigt job, hvor vi kan agere som en del af et team i en respektiv virksomhed. 16

17 Litteraturliste URL Adresser Bøger: 20 Designprincipper af Ian Wisler-Poulsen Usability af Ole Gregersen & Ian Wisler-Poulsen 29 Spørgsmål af Jan Krag Jacobsen Website: Restaurant søren k Redesign af soerenk.dk Link til gruppens porteføljer Lars Nordenbæk Lucas Perch-Nielsen Mark Skov Halding Lasse Mathias Bruun Overgaard Majbritt Østergaard Andersen 17