Indholdsfortegnelse Indledning... s. 1 Projektplan... s. 1 Gantt chart... s. 1 Kommunikations-analyse... s. 2 Kommunikationsmodel... s. 3 Usability... s. 3 Ekspertvurdering... s. 3 Kortsortering... s. 4 Flowchart... s. 4 Design brief... s. 5 Profil... s. 5 Design valg... s. 5 Kode... s. 5 HTML & CSS... s. 5 Eksempel 1... s. 5 Eksempel 2... s. 6 Arbejdsprocessen... s. 6 Konklusion... s. 6 Faktaark... s. 7
Indledning Vi er blevet kontaktet af en restaurant, for at lave et re-design af deres eksisterende website. Navnet på restauranten er Søren K, og deres eksisterende website er www.soerenk.dk. Flere af restaurantens gæster har givet udtryk for, at de har svært ved at finde de informationer de leder efter på det eksisterende website. Restauranten ønsker derfor vores hjælp, til at løse dette problem. Først og fremmest vil restauranten have, at vi finder ud af, hvad der er skyld i problemet på deres eksisterende website. Dernæst vil de have udarbejdet et design forslag, på et nyt website der imødekommer gæsternes problem med at finde rundt på websitet. Projektplan Gantt chart Generelt har vi fuldt vores Gantt Chart rimelig godt og det hele har gået op i en højere enhed. Vi fandt dog ud af at vi blev nødt til at skære nogle af opgaverne væk, såsom interessent analyse, risikoanalyse og SWOT analyse da vi ikke følte at tiden var der og da vi så de tre ting, som de mindst relevante. Et andet sted hvor vores tidsplan ikke holdte var ved projektplanlægningen og vi kunne meget hurtigt konkludere at vi var fem forskellige mennesker med mange forskellige forslag. Men dog blev vi hurtigt enige om et resultat hvor alle blev hørt og fik tilfredsstillet deres krav. 1
Kommunikation Man kan dele kommunikation op i to forskellige paradigmer, to forskellige måder at forstå verden og kommunikation på. Det samfundsvidenskabelige paradigme og det humanistiske paradigme. Vi har taget udgangspunkt i det humanistiske paradigme som har individet i centrum. Inden for kommunikationsteori, ligger fokus overvejende på modtageren. Målgruppe Vi har valgt det blå segment som, Søren Ks primære målgruppe, da det er mennesker der går meget op i at der skal være prestige over tingene og har en højindkomst, udover dette er det også mennesker der har et højt forbrug og er knyttet til det private erhvervsliv. Da restauranten særdeles ikke er billig at spise på, er det derfor et must at have penge. Søren K er også anset for at være en forholdsvis luksuriøs restaurant, og derfor er der også en hvis prestige over at spise der. Da restauranten, som sagt er forholdsvis dyr at spise på vil den også tiltrække personer med et højt forbrug som ikke har noget imod at betale det ekstra for at få det bedste af det bedste. Udover alt dette, er folk i det blå segment også knyttet til det private erhvervsliv (muligvis direktører og højt stillede personer), som kunne finde på at afholde firmafest eller lignende arbejdsrelaterede begivenheder. Sekundær målgruppe Vi har valgt det violette segment som, Søren Ks sekundære målgruppe, da det er mennesker, som også går op i at der skal være en hvis prestige i tingene. Hvilket der helt klart er over Søren Ks restaurant. Det violette segment har også penge til at spise på Søren K da de har en høj indkomst. Udover det går mennesker i det violette segment også op i materialisme og kan godt lide at vise pengene frem. Lisbeth Thorlacius kommunikationsmodel Vi har taget udgangspunkt i Lisbeth Thorlacius s model for visuel kommunikation. Den er en videreudvikling af Roman Jacobsens kommunikationsmodel. Primær målgruppe Afsender Den faktiske afsender er ledelsen bag restaurant Søren K, som har til hensigt at få deres website til at fremstå yderst professionelt og kvalitetsbevidst. Det er ledelsen som har kontaktet os for, at få løst deres problemer med brugervenlighed 2
på deres nuværende website. Den implicitte afsender er selve restaurant Søren Ks website. Der ved hjælp af billeder, farver og tekst afsender et budskab, der skal vække nogle følelser hos modtageren. Modtager Den implicitte modtager kunne være madanmeldere eller vinkendere - disse personer skal drages ind i Søren Ks univers af gastronomi i højsædet, med vin der samler helheden op til en komplet oplevelse. Den faktiske modtager er brugere der kommer ind på websitet. De kan komme fra søgemaskiner, netværk eller anden form for annonce. Der skal websitet fungere som en repræsentant for restaurant Søren K, og sælge budskabet om en god og professionel restaurant. Kontekst Da Søren Ks målgruppe ligger i det segment som er velhavende, forventes der en eksklusiv oplevelse, professionel betjening, samt et lækkert måltid i skønne omgivelser. Derfor forventes der også af websitet, at det både er indbydende og let at navigere rundt på. Det er derfor vigtigt, at Søren Ks hjemmeside lever op til de forventninger, så deres kunder kan se en sammenhæng mellem website og virkelighed. Den referentielle funktion træder i kraft rent visuelt, da billederne refererer til restaurantens hygge og varme, som vi som bruger kan genkende og derfor blive tiltrukket visuelt til at ville besøge restauranten. Den intertekstuelle funktion i Søren Ks hjemmeside har en generel rød tråd. Der bliver ikke refereret meget til andre tekster på hjemmesiden og er tro mod sig selv i forhold til de ting de fortæller brugeren. Produkt Produktet er websitet www.soerenk.dk. Den formale funktion på søren ks hjemmeside følger de banale idealer omkring design og god smag. Den sublime æstetiske funktion vises fx ved at der bliver brugt eksotiske farver på retterne i forhold til restens af websitets farvekombination. Medie Mediet udgør forbindelsen mellem afsender og modtager, og det kan f.eks. være alt fra bannerreklamer, annoncer mm.. Der er her gjort brug af internettet som medie. Den faktiske funktion træder i kraft via logoet, da det er synliggjort på hele websitet. Den navigative funktion er ligeledes vigtig, da den er med til at styre læseren gennem websitet. Ved at fastholde den samme struktur, bliver det nemt for brugeren at surfe rundt på sitet. Kode Den metakommunikative funktion, kan være sproglig eller visuel. Den metakommunikative funktion, træder fx i kraft på www.soerenk.dk når de går ind og snakker om deres holdning til økologi og frilandsprodukter. Den intersemiotiske funktion kan rent visuelt være når man har en dame på denne ene dør og en mand på den anden for at pege folk ind på det rigtige toilet. Når man taler om denne funktion hentyder man også til brug af metaforer på websitet. Steder hvor den intersemiotiske funktion træder i kraft er fx nede i deres billede menu på forsiden da de illustrere indholdet via. billederne. Usability Vi har lavet 2 typer af brugertests, ekspertvurdering (Heuristic inspection) og kortsortering. Disse to tests har givet os informationer og viden, om brugerens muligheder på websitet. Ekspertvurdering En ekspertvurdering også kaldet Heuristisk evaluering har til formål, at forudse fejl og mangler, som kan skabe problemer for brugerne af websitet. Testen bygges op omkring 2 typer af eksperter. Den ene ekspert er os selv, og den anden kunne være en fra restaurationsbranchen, som har indgående kendskab: - den information og de servicer, som websitet vil tilbyde - den kontekst, som websitet vil blive benyttet i - de brugere, som vil benytte websitet En ekspertvurdering er billigere og mindre ressourcekrævende, end en egentlig brugertest. Testen egner sig derfor godt til, at give et overblik over mulige problemer i den indledende udviklingsfase. Det er vigtigt, at en ekspertvurdering bliver helhedsorienteret og systematisk. Vi har derfor delt den op i to dele, informationsarkitektur og interaktionsdesign. 3
Informationsarkitektur: Her har vi undersøgt websitets struktur, navigation, navngivning og søgning. Interaktionsdesign: Her har vi undersøgt websitets tekniske byggeklodser, som brugergrænsefladen er bygget op af. Funktionalitet, farver, knapper, menuer og grafiske elementer der giver brugeren mulighed for at foretage valg. Udførelsen af testen er delt op i 3 faser. Første fase bruges til briefing/planlægning af ekspertpanel, angående hvordan testen skal foretages. Anden fase er individuelt at gennemgå testen, hvor siden løbes igennem 2 gange. Tredje fase er ekspertpanel, her drøftes resultaterne fra deres tests. Testen varer ca. 1-2 timer. Vi har også lavet en kortsorterings brugertest, som vi brugte til at teste vores re-designede hjemmesides menu. Man bruger kortsorteringstesten til at teste websites struktur (betydning af menuer, knapper og sidetitler). Nogle fordele ved kortsorterings testen er, at den ikke kræver så mange ressourcer og at den er hurtig og enkel at lave. Testen foregår på den måde at man tegner websitets struktur og derefter laver man nogle kort hvor man skriver alle sidernes titler. Når man har gjort det, skal testpersonen prøve at danne menuen, som den rent logisk ville se ud i deres hoved (med kortene). Da vi lavede kortsorteringstesten, fandt vi hurtigt nogle svagheder og styrker ved vores struktur i menuen. Vi kom blandt andet frem til, at i stedet for at kalde den ene overmenu for restaurant (den hvor menukortene ligger under) burde vi kalde den for menukort, da det virker mere naturligt for brugeren at den hedder det. En anden problemstilling der hurtigt kom til udtryk var placeringen af bestillingsvilkårene. Der har vi dog valgt at holde os til vores egen løsning da vi finder den mest logisk. Man kan også argumentere for det, da vi kun har haft to testpersoner er kortsorteringstesten ikke fyldestgørende nok, til at man ene og alene kan tag udgangspunkt i den, og derfor har vi valgt at se kritiks på de resultater vi har fået ud af den og beholde vores egen løsning. Flowchart Her kan man se vores flow chart som man kan bruge til at skabe overblik over vores hjemmeside. Vi har selv udført ekspertvurderingen, som gav følgende resultater. Vi fandt bl.a. meget hurtigt nogle fejl i punktet systemstatus såsom billeder der ikke linkede, som de skulle. Vi kunne også meget hurtigt konkludere, at siden var meget uoverskuelig og rodet, da navigationsstien var meget dårlig. Hvilket ledte til stor forvirring hos os, som brugere. Et andet problem var de mange undersider med flere forskellige menukort. I to af menuerne kunne man også vælge den samme mulighed, som virker meget uprofessionelt. Alt i alt kan vi ud fra ekspertvurderingen konkludere, at siden er meget uprofessionel og nemt skaber forvirring for brugeren. Hertil har vi valgt at samle et vinkort og menukort, så vi slipper for de mange undersider. Vi har også valgt at korrigere på navigationsstien, så for eksempel den samme underside ikke går igen på to menupunkter. Kortsortering 4
Design brief Restaurantens Profil Søren k opkaldt efter den kendte danske filosof Søren Kierkegaard, er et skandinavisk brasseri. Vores madstil tager udgangspunkt i skandinaviske råvarer og opskrifter. Tilberedningsformerne har dog også et tilsnit af det franske klassiske køkken, og vores retter fremstår derfor på en gang som klassiske, og samtidigt med et tvist af det nye danske køkken. Vi arbejder med årstidens råvarer, og det tilstræbes at bruge mange skandinaviske, danske og gerne lokale råvarer. Med friske råvarer opnås det bedste og mest smagfulde resultat. Vi er tilhængere af den økologiske tanke, men vigtigst for os er den gode smag i de råvarer, vi arbejder med. Designstilen hos os er skandinavisk med lyst læder, lyst ahorntræ, silkebeton og design møbler, opdækningen med hvide duge giver et minimalistisk, enkelt og elegant udtryk. Restauranten ligger langs Københavns havn, og vores store vinduer fra gulv til loft, giver én af byens bedste udsigter. www.soerenk.dk er vores umiddelbare produkt, som vi har fået til opgave at lave et re-design af. Kunden, som i dette tilfælde er indehaveren af restaurant søren k, har en række specifikke ønsker og krav mht. fejl og mangler på hans nuværende hjemmeside. Flere af restaurantens gæster har givet udtryk for, at de har svært ved at navigere sig rundt på hjemmesiden og finde de nødvendige og vigtigste oplysninger på det eksisterende website. Han ønsker sig derfor en mere overskuelig hjemmeside, som rummer et samlet menupunkt, samt en lettere navigation, så mulige gæster har nemmere ved at navigere sig rundt på sitet. Kunden har især givet udtryk for, at de mange undersider indenunder menupunkterne skal gøres mere håndterbare og der skal være færre af dem. Grunden til alle disse forandringer på sitet er ifølge kunden for, at vægte gæstens oplevelse af sitet og gøre den så fleksibel som muligt overfor kommende og nuværende gæster. Restauranten ønsker derfor vores hjælp til, at løse disse problemer. Målet for projektet er først og fremmest at lokalisere årsagen til problemerne på det aktuelle website. Ydermere skal der udarbejdes et design forslag til et nyt re-design af websitet, som hermed imødekommer restaurantens gæsters problem med at navigere sig rundt på websitet. Design valg Vores hjemmeside følger nogle nøje udvalgte designprincipper og gestaltlove, som er med til at gøre vores website så funktionelt og brugbart, som muligt. For at følge restaurant Søren Ks indvendinger og krav til det nye website, argumenterer vi her for vores design valg af de nødvendige forandringer. Vi har gjort særligt brug af genkendelighed, enkelthed og æstetik og brugbarhed. Genkendeligheden sætter sit præg på alle sider af vores re-design for www.soerenk.dk - ved at gøre logoet synligt på alle sider, sørger man for at brugeren af websitet konstant er klar over sin position, og brugeren kan hermed altid genkende det ensartede symbol for restauranten. Ydermere er der gjort brug af designprincippet omkring enkelthed. Vi har valgt at gøre websitet så stilrent og enkelt som muligt på den måde skabes der ikke unødvendig støj, samtidigt er der ikke gjort brug af irrelevante og flydende elementer, som kan forvirre øjet og lade relevante informationer gå tabt. Eftersom restaurant Søren K er en eksklusiv og smagfuld restaurant har vi valgt at satse på brugbarheden og æstetikken på det nye website. Dette har vi primært valgt, fordi det æstetiske design hænger stærkt sammen med den kvalitet som restauranten udstråler. Slutteligt har vi valgt at satse på brugbarheden, for at gøre designet så let som muligt at betjene dermed kan brugerne af Søren Ks nye hjemmeside lettere navigere sig rundt. Kode HTML <div id= bread > <div id= spacing ></div> <div id= bread-text >DU ER HER: FORSIDEN</ <div> tags bruges til at ramme dele af HTML ind i bokse så det bliver lettere at arbejde med. <id> tags bruges til at identificere ting og vise vej ( linke ). Forskellen på class og id taget er at id er til en ting og class til flere. 5
CSS heading2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #600; text-decoration: none; } Vi kan hermed ud fra projektet konkludere, at vi har nået vores mål og færdiggjort et produkt, som overholder de krav og ønsker, som Søren K lagde for dagen i design briefet af hans ønsker og krav mht. re-design vi har altså udarbejdet et færdigt re-design af den nuværende restaurant Søren Ks website. For at udføre hele det her re-design af Søren Ks hjemmeside, har vi fundet ud af årsagen til problemerne på den nuværende hjemmeside og løst dem. Vi har samtidigt fået en forståelse for at udarbejde udvalgte brugertest heriblandt ekspertvurdering og kortsorteringstest som gav os en fornemmelse for websitets kommende struktur samt navigation. Ydermere er vi nået frem til en forståelse af at udarbejde en kommunikationsanalyse med henblik på Lisbeth Thorlacius model for visuel kommunikation. Analysemodellen gav klare resultater mht. hvilken afsender, modtager, målgruppe og budskab som produktet skal symbolisere. Her kan man se tags som bliver brugt til at style heading2 altså overskrift 2. Font-family-taget fortæller hvilke nogle skrifttyper overskriften skal være. Hvis den pågældende bruger så ikke har skrifttypen arial vælger den så den næste i rækken altså helvetica. Det næste er font-size-tag, som man bruger til at vælge skrift størrelse, her arbejder man i pixels (px). Color vælger farve og text-decoration: none; fortæller den at vi ikke ønsker nogen form for tekst dekorationer. Arbejdsprocessen Arbejdsgangen for projektet er dokumenteret via vores udarbejdede Gantt-chart diagram ifølge diagrammet har vi til dels holdt os til vores planlagte arbejdsproces. Udover Gantt diagrammet er vores samarbejde imellem gruppemedlemmerne gået som planlagt der har altså ikke været nogle problemer med at dukke op til aftaler osv. Alle gruppemedlemmer har arbejdet ligeligt med projektet og taget del i det samlede produkt samt rapport. Konklusion på projektet 6
Faktaark Titel: URL: Webside projekt http://www.cph86.webkn.dk/html/soerenk/index.html Underskrift: Gruppe 1. Sabine Langbein (sabi2860@hotmail.com) www.cph84.webkn.dk Martin Gersholm Jensen (martin.gersholm@hotmail.com) www.cph14.webkn.dk Morten Korshavn Nielsen (korshavn@me.com) www.cph86.webkn.dk Simon Bertram Petersen (sbp-1991@hotmail.com) www.cph105.webkn.dk Mikael Lund Kristensen (mikaellk.mail@gmail.com) www.cph83.webkn.dk Hold: Clmul-b12e 1. semester efterår 2012 Lærere: Ditlev Skanderby Morten Rold Frederik Tang Ian Wisler-Poulsen Sabine Langbein Martin Gersholm Jensen Morten Korshavn Nielsen Simon Bertram Petersen Mikael Lund Kristensen 7