Projekt 3: User friendly website Soerenk.dk re-design

Transkript

1 Projekt 3: User friendly website Soerenk.dk re-design Mul-A, Gruppe 3, URL: Annemette Bruhn cph41.webkn.dk Caroline Vikke Lundhild Madsen cph57.webkn.dk Julia Brøndum Emborg cph45.webkn.dk Jonna Gaardbo cph46.webkn.dk Lærere: Morten Rold, MORO Merete Lindemann, MLI Ian Wisker-Poulsen, IWP Ditlev Vestergaard Skanderby, DVS

2 Indholdsfortegnelse Indledning Projektbeskrivelser Gantt kort Design brief Argumentation for designbeslutning Kommunikationsanalyse Flowchart Eksempel af koder Process og evaluering Litteraturliste Bilag: - Gantt - Kommunikationsmodel - Flowchart side 3 side 3 side 3 side 3 side 4 side 5 side 8 side 8 side 9 side 10 side 11 side 13 side 14

3 Indledning: I henhold til projekt tre, har vi multimediedesignstuderende på CPH Business Academy Lyngby, fået stillet til opgave at redesinge hjemmesiden Formålet med denne opgave er at skabe et fuldt funktionelt W3 valideret site. Derudover skal sitet være opbygget således at det er let navigerbart for brugeren. I dette projekt er der desuden stor fokus på at tilegne sig individuel læring, gennem velfungerende gruppearbejde. Projektbeskrivelse: I dette projekt har vi fået til opgave at redesigne restauranten Søren K s hjemmeside, for at gøre den mere overskuelig for potentielle kunder. Vi vil bruge tekst og billeder fra den oprindelige hjemmeside, men selve HTML og CSS kodningen har vi selv lavet fra bunden. Vi har til opgave at overveje og diskutere hvilket design vi vil bruge til hjemmesiden. Desuden skal vi lave to forskellige brugertest på hjemmesiderne og udarbejde en rapport over vores projekt, og lave to Gantt diagrammer - et til første omgang og et endeligt færdigt diagram. Gantt: Da projektet startede udarbejdede vi et Gantt diagram for at skabe et overblik over hele projektet. Vi har sat opgaver og milepæle ind, så vi har haft god tid til hver del af projektet. Til slut laver vi et Gantt diagram med de endelige datoer og tider for arbejdsprocessen. *bilag Design Brief: Søren K Profil: Søren K er et nordisk brasserie, som åbnede for første gang i Dens beliggenhed er i Den sorte diamant, den nye tilbygning til det kongelige bibliotek. Omgivelserne og design er af dansk eller nærmere sagt, århusiansk arkitektur. (Schmidt, Hammer og Lassen). Søren K er navngivet efter Søren Kirkegaard. Søren K er en tidstypisk restaurant og startede ud med en agenda om Det Fondløse Køkken hvilket siden 2007 er skiftet til det Skruppelløse køkken. Formål: Formålet med re-designet er at skabe en renere struktur, som passer til Søren K s ry og ide. Hjemmesiden skal være mere målrettet til dens kunder. Sitet skal kunne reflektere den oplevelse kunden får når de besøger Søren K og være tiltalende for den aktuelle målgruppe og kunne motivere de potentielle kunder. Kunden skal kende Søren K s menu og vide hvilke kvaliteter menuerne er baseret på. I sidste ende skal sitet skal få flere kunder til at bestille bord, evt. via hjemmesiden. Målgruppen: Søren K har en bred målgruppe, idet at Søren K vil være et midtpunkt i Købehavns kulturliv. Talen er om kvinder og mænd, omkring de år. Målgruppens indkomst ligger fra middel til høj. Primært er det folk med eller som studerer på højere uddannelser, hvis man har i tanke om hvilke mennesker besøger biblioteket. Målgruppen kommer primært fra indre København og sekundært fra Københavns omegn og turister. side 3

4 Målgruppen kan endvidere defineres som den bevidste, moderne, kultiverede type, der sætter krav og foretrækker kvalitet frem for kvantitet. Stikord som skal indgå i det endelige design Design eksempler Sprog: - Dansk. Farver: - sort - hvid - grå Tekst: - simple - kortfattet - oplysende - relevant indehold - Sans Serif Atmosfære: - billeder, video fra restau ranten - rene linjer - enkel - dynamisk - moderne - Cool modern stil Designargumentation: Baggrunden for vores redesign, bygger på en minimalistisk designæstetik. Derudover har vi i vores design også lagt vægt på at det for brugeren skal være nemt at navigere rundt på sitet. Brugeren skal konstant kunne lokalisere sin placering, samt ved hjælp af stier at kunne gå tilbage til forrige eller, hvis ønsket, udgangspunktet. For at understøtte vores designargumentation, har vi valgt at benytte os af nogle relevante designprincipper. Designprincipper kan for brugeren være altafgørende, idet de danner grundlaget for hvorledes brugeren intuitivt anvender og afkoder designet. Genkendelighed: Med udgangspunkt i det oprindelige site, har vi i gruppen valgt at bibeholde en del genkendelige elementer i udarbejdelsen af designet. Dette omfatter blandt andet placering af logo, søgefelt, menupunkter mm. Derudover har vi også valgt at understøtte sitets brand security, ved at fastholde sitets æstetik. På denne måde har brusgeren stadig en forsikring om opretholdelsen af serviceniveau. Ved at anvende princippet om genkendelighed, sikrer vi de identificerbare elementer i designet. Vores interne genkendelighed optræder ved at bibeholde farver, samt billeder og eventuel tekst. Dertilsvarende optræder vores eksterne genkendelighed i vores placering af søgefelt, logo, menupunkter mm. På denne måde kan vi sikre at brugeren får maksimalt udbytte i afkodningen af designet. Enkelthed: Udover genkendelighed, har vi i vores design også lagt fokus på enkelthed. Førhen var sitet proppet med mange forstyrrende og svært håndterbare funktioner, der gjorde det svært for brugeren at navigere rundt på sitet. Især menupunkterne med tilhørende underpunkter, indeholdte et væld af tekst, der for brugeren var uden betydning. Ved at fokusere på enkelthed, skærer man således alt irrelevant indhold fra og erstatter side 4

5 det med mere overskuelige og informative oplysninger. Farver: Brugen af enkelthed kommer desuden også til udtryk i designets minimalistiske fremstilling. Ved at benytte kontraster såsom hvid, sort samt grå, tillægges sitet et neutralt udtryk. De neutrale kontraster har vi desuden også anvendt i vores grupperede bokse, for at forstærke den visuelle identitet hos restauranten Søren K. Ved at bruge neutrale farver har brugeren også lettere ved at overskue sitet. Havde vi valgt stærke primære eller sekundære farver, kunne dette for brugeren have virket synsforstyrrende. Derudover ville det desuden heller ikke harmonere med sitets originale æstetik. Ensartethed: Brugen af farver, går også igen i vores princip om ensartethed. For os er det vigtigt at brugeren kan se en sammenhæng mellem forside, samt alle andre aspekter af websitet. Der skal være en rød tråd i designet, da det for brugeren skaber sammenhørighed. Vi har anvendt samme typografi, tydeliggjort forskellen mellem overskrifter og brødtekst, samt begrænset mængden af variation i forhold til brugen af farver. Lukkethed: I henhold til brugen af farver, kan man også nævne brugen af lukkethed. Ved at afgrænse tekstområder med brugen af farver, skaber man mere lukkethed på sitet. Denne lukkethed hjælper til at danne grupperinger og klargøre for brugeren hvad der er sammenhørigt. Luft: Når vi tilføjer elementer til et design, så fjerner vi luft. Hvis et element skal have meget opmærksomhed skal der være meget luft, hvis ikke skal der knapt være så meget luft. Elementerne må ikke komme for tæt på kanten, da de derved virker klemt og mindre harmoniske. På vores redesign har vi gjort brug af princippet om luft, ved at lave mellemrum mellem tekstbokse, menubokse mm. som tidligere nævnt, giver dette mere luft og overskuelighed på sitet. Den visuelle oplevelse af sitet bliver for brugeren mere harmonisk. Loven om linjer: Ved at anvende loven om linjer, sikrer vi sitets professionelle udtryk. Ved at opstille eksempelvis det tekstmæssige med rette linjer, skabes der mindre støj på sitet. Hvis vi havde opstillet vores tekst mere rodet, ville brugeren skulle bruge megen energi på at skabe sig et æstetisk overblik. Kommunikations analyse Formål: Formålet med hjemmesiden er at formidle buskabet om at Søren K findes og hvad de beskæftiger sig med. Du kan se deres menuer, historie samt bestille bord og se hvilket stil og atmosfære du kan opleve hvis du vælger at besøge dem inde på den Sorte Diamant. Struktur på sitet: På sitet kan du vælge imellem to sprogvarianter. Der er videre kontakt oplysninger, nyhedsbrev, personalelog-ind, rapport og søgefelt. Et hak længere nede ser du Søren K logo, sitets menu struktur, bestående af deres menuer, side 5

6 arrangementer, om os info, link til Café Øieblikket samt et bestil bord link. Derefter kommer en brødkrummestig. Dernæst er den et slideshow med billeder fra restauranten, som linker til diverse felter på sitet. På sitets centrum er der en bjælke hvor du kan tilmelde dig deres nyhedsbrev. Igen kommer der billeder som linker til diverse felter på sitet, samt en film. Nederst er der generelle oplysninger, som adresse, åbningstider, salgskontor og bankoplysninger. Her kan vi bliver enige om at der er meget information, som ikke er de primære oplysninger som kunden søger ved at klikke sig ind på sitet. Man kan forestille sig at dette kan nedsætte brugervenligheden, idet at der er mange felter som man skal gennemgå inden man kan være sikker på hvilket objekt man skal klikke sig videre på. Specielt hvis man har en mindre erfaren bruge i tankerne, kunne sitet hurtigt blive uoverskueligt da der er for mange muligheder hvilet også kan gøre det sværere at kunne huske hvorhenne man fandt de ønskede oplysninger. Opbygning: Sitet er opbygget af rene linjer. Der er klar afgrænsning med lukkethed, med at felterne er lukket inde i bokse. Der er også klar afstand imellem felterne, som giver klar besked om hvilke punkter hører sammen. Sitet er opbygget med parallelle linjer i den vandrette retning. Disse effekter tiltaler i en vis grad øjet og giver en fornemmelse af klarhed og rolighed. Man kunne måske forestille sig at det ville give en endnu bedre fornemmelse hvis sitet også var opbygget af lige linjer i den lodrette retning. Sitet er opbygget med få farver, sort, hvid og grå er de dominerende farver, hvilket i norden afspejler klasse, god stil og den enkle minimaliske stil. Hvid: renhed Grå: elegance Sort: sofistikeret De har valgt at bruge blå som kontrastfarve. Vi ser den blå farve på bestil bord og i videoens volumen. Hvilket ikke helt fungerer så iøjnefaldende som nogle andre farver ville have gjørt. Men deres intuition er nok mere farvens betydning, som afspejler fordybelse, stabilitet og ro. Farvers-betydning.php Billederne holdt i farver som giver sitet lidt friskhed samt at du kan få en bedre oplevelse af hvad billederne viser. Der spiller den enkle baggrund også ind hvor man tit får et bedre indtryk af billedet hvis der er sort i baggrunden. Modtager: Modtageren er mænd og kvinder, omkring år. Middel til høj indkomst, under uddannelse eller uddannede mennesker. Kvalitetsbevidste og stiller krav. Selvstændige og kultiverede mennesker. Sitet rammer delvist godt sin målgruppe, med det at farver og struktur er rimelig godt gennemtænkt. Sitets basestruktur er enkel nok når man tænker på farver, og opdelingen af de forskellig felter. Men, når man så har i tankerne, at målgruppen er krævende og kritisk at tingene skal være enkle, fungere og der er ikke plads til unødvendigheder; så halter den lidt med al informationen som er proppet ind på forsiden. side 6

7 Det går lidt imod deres designprincip om enkelthed som skal signalere elegance og rolighed med at lave sitet rodet med al den sekundære information. Dette er også en målgruppe som, er tager hurtige beslutninger, så de kan hurtigt vælge at forlade sitet igen om de ikke finder de oplysninger de har brug for med det samme. Fordelen er dog at dette tit er erfarede websurfere, og flere ville hurtigt kunne finde den blå knap og muligvis menuen, uden at skulle kæmpe sig igennem al den overflødige information. Men for at opnå den optimale virkning, ville basal info som menu, adresse, åbningstider og bestil bord være nok til at fylde forsiden. Så ville modtageren selv kunne vælge om de var interessere i at vide mere om de andre felter på sitet, hvilket generelt ville tiltale målgruppens præferencer angående frihed til at vælge til og fra. Budskabet: Budskabet som hjemmesiden prøver at formidle er lidt det samme som formålet, men med en dybere forklaring. Hjemmesiden vil fortælle os, udover dens menu, åbningstider osv. at dette er en restaurant som er tildelt diverse priser og anerkendelser for dens mad. At restauranten har en interessant historie og nogle konkrete værdier. At Søren K kan tilfredsstille visse prioriteter som tiltaler en bestemt målgruppe. Sitet har valgt at bruge informative metoder, gennem ethos, som tiltaler brugerens tillid. Der ligger der megen information om priser og anerkendelser som skal overbevise/informere brugeren om at det er hold i deres statement. Sitet bruger også pathos som tiltaler brugens sanser og følelser. Dette ser vi med at de har mange billeder, som er taget i reelle situationer, af f.eks. mad der bliver serveret, stemning og omgivelser. Dette gør de ved at henvise til forskellige artikler og anmeldelser. De gør også brug af video fra køknet og masser af billeder. Effekten: Effekten alt i alt af hjemmesiden er at man kan godt forstå hvilken kundegruppe og hvilken status Søren K prøver at ramme. Men det er ikke nok, idet at sitet ikke bliver helt så troværdigt som man ville ønske. De fremstår lidt som en wannabe stilet restaurant. Hjemmesiden er baseret lidt for meget på selvros. Selvfølgelig skal brugeren vide at dette er en anerkendt restaurant men det ville være mere elegant at pakke denne information lidt mere ind og lægge den lidt mere i baggrunden, hvilket burde passe bedre til Søren K s ry. Det klæder ingen at fremstå som selvfed og det tiltaler ikke målgruppen. Der er i første omgang tale om envejs kommunikation Men med muligheder så som at bestille bord, og telefonnummer er der mulighed for at udvikle tovejs kommunikation, idet at modtageren vælger vende tilbage til afsender med eventuel tilbagemelding. Vi har opsat en kommunikations model - som viser den kommunikative opbygning. Der er tale om en afsender (Søren K), der vil sende et budskab og vil formidle det via et medie (hjemmesiden). Der er dog støj, imellem medie og modtager, som kan påvirke modtager side 7

8 opfattelse af budskabet. Støj kan definerest som alt fra modtagers fysiske omgivelser til dens færten på nettet. Derfor er det vigtigt at kunne dæmpe så meget af den støj som vi nu har mulighed for - for at buskabet skal trænge igennem. Der opstår siden en effekt, fra modtager, som videreførest til medie, idet om modtager vælger at tage kontakt til afsender, eller om modtager forbliver passiv, hvilket resulterer i om afsender modtager feedback. Firkanterne symboliserer de blokkeringer der kan forekomme, i formidlingen af budskabet. * Bilag Flowchart Vi har tegnet er flowchart, over vores informationsarkitektur og stuktur af vores re-designede side. Vi har lavet en kortsorteringstest, som beviste at vores menu punkter og opsætning er relevant og opsat på en brugbar og fornuftig måde. *Bilag Eksempel af HTML kode: Siden er bygget op i asp.net, så der er brugt en master page til at holde på alt det som ikke skal være dynamisk og flere.aspx sider, som er de dynamiske sider. Dette gør det en del nemmere at arbejde med mange sider, da man ikke behøver ændre en lille ting på alle siderne, men kun på master page, hvis en ændring skulle forekomme. <div class= menuwrapper > <div class= menubox > <ul> <li><a href= bestil.aspx >Bestil Bord</a></li> <li><a href= resturanten.aspx- >Restauranten</a></li> <li><a href= arrangementer.aspx- >Arrangementer</a></li> <li><a href= nyheder.aspx >Nyheder</a></li> </ul> <div class= cafebox > <p>besøg vores egen<br /> <a href= dk/ >Cafe Øjeblikket</a></p> <div class= infobox > <div class= openbox > <h3>åbningstider</h3> <p>mandag-lørdag<br /> & <br /> Lukket søndage<br /> Lukket alle helligdage</p> <div class= adrbox > <h3>søren K</h3> <p>søren Kierkegaards Plads 1<br /> 1221 København K<br /> soerenk@kb.dk<br /> Telefon </p> Herover kan man se vores menu i HTML koder. Vi har valgt at bygge med en wrapper rundt om, altså en stor boks som holder på de mindre bokse. Denne metode er brugt på hele siden. Klasse navnene er sigende navne, så det er nemmere at huske på og skrive det rigtigt. Hele siden er sat ind i mindre bokse, som allerede ligger inde i større bokse, hvilket også understøtter loven om lukkethed. Man får en side 8

9 klar følelse af hvad der hører sammen. <form class= bestilform method= get action= godkendtbord.aspx > <div class= inputwrapper >Fornavn: <input class= inputbox type= text name= Fornavn /> <div class= inputwrapper >Efternavn: <input class= inputbox type= text name= Efternavn /> <div class= inputwrapper >Telefon: <input class= inputbox type= text name= Tlf /> </ div> <div class= inputwrapper > <input class= inputbox type= text name= /> <div class= inputwrapper >Dato: <input class= inputbox type= date name= dato /> <div class= inputwrapper >Klokken: <input class= inputbox type= time name= tid /> </ div> <button class= formbutton >Videre</button> </form> Herover kan vores bestillings form ses, som er lavet som en dummy, altså at den er der og man kan bruge den, men den sender ingen data til eller fra en server. Der en masse inputfelter som har forskellige navne udfra hvad det er som brugeren skal skrive ind i dem. Til sidst er der en knap som sender en videre til en bekræftelsesside, som fortæller brugeren at bestillingen er gået igennem. Beskrivelse af processen og evaluering: I dette projekt har vi primært arbejdet med kodning af Søren K s hjemmeside, herunder har vi lavet et Flowchart, til at få bedre overblik over menuerne og siderne på hjemmesiden. Til sidst har vi taget nogle eksempler på koder fra vores hjemmeside, og skrevet en beskrivelse til, for at give en forståelse af vores valg på hjemmesiden. Desuden har vi diskuteret hvordan designet skulle være på hjemme-siden. Vi har snakket om hvordan udtrykket skulle være på vores side, og har udarbejdet en kommunikations analyse hvor vi har brugt KOMMUNIKATIONS MODEL Vi har brugt forskellige værktøjer til at undersøge hvordan den originale hjemmeside fungere og hvordan vores hjemmeside fungere i forhold til brugbarhed og logik, herunder har vi kigget på den oprindelige side og lavet en ekspertvurdering for at finde fejl og mangler på den eksisterende hjemmeside, og brugt dette så vi ikke selv begår samme fejl. Desuden har brugt kortsorterings testen med en testperson, for at finde ud af om arkitekturen på vores hjemmeside fungere optimalt. Derved har vi fundet ud af om der var nogle problemer med vores menupunkter. Efter første dag blev der udarbejdet et Gantt diagram (Se bilag), så vi hurtigt kunne få overblik over hele projektets forløb. Dette har fungeret godt, dog har vi ikke altid overholdt alle milepæle, og har derfor udarbejside 9

10 det et endeligt Gantt diagram (se bilag). Til slut har dette været en meget lærerig process, både i forhold til at tage design beslutniger, kodning, men også i forhold til at arbejde i en ny gruppe hvor ideerne og indstillingen til projektet er anderledes. Alt i alt synes vi at vores produkt er blevet rigtig godt og anderledes fra udgangspunktet. Litteraturliste: Gregersen, Ole & Wisler-Poulsen, Ian: Usability, Grafisk litteratur (Danish class only) Lynch & Horton: Web Style Guide, 3rd edition, ch. 1: evaluation.html gallery.asp/ multi column liquid layouts side 10

11 Gantt Diagram 1 Projekt3 0 t iagram Ganttdiagram Navn Navn Start dato Introduktion og hjemmeside skitser Ekspertvurdering og hjemmeside skitser se af hjemmeside og påbegyndelse Deadline for på skitse kodning af hjemmeside af hjemmesi og påbegyndelse på kodning af hjemmesi og noter til kommunikations Gantt analyse diagram 1 og noter til kommunikations analyse Gruppemøde munikations analyse og design Deadline brief for kommunikations analyse og design brief Skrive rapport dning Eksempler på kodning cessen og evaluering Beskrivelse af processen og evaluering meside og rapport Deadline for hjemmeside og rapport justeringer i rapport Korrektur og div. justeringer i rapport r på hjemmeside Endelige rettelser på hjemmeside Afleve Start dato Uge 45 Uge 45 Uge 46 Uge 46 Uge 47 Uge 47 Navn Start dato Slut dato Introduktion Ekspertvurdering og hjemmeside skitser Deadline for skitse af hjemmeside og påbegyndelse på kodning af hjemmeside Gantt diagram 1 og noter til kommunikations analyse Gruppemøde Deadline for kommunikations analyse og design brief Skrive rapport Eksempler på kodning Beskrivelse af processen og evaluering Deadline for hjemmeside og rapport Korrektur og div. justeringer i rapport Endelige rettelser på hjemmeside Aflevering Projekt Tasks 2 3 side 11

12 Gantt Diagram 2 Projekt3 22- ramganttdiagram Navn Start dato Navn Start dato Slut dato af hjemmeside og Deadline påbegyndelse for skitse på kodning af hjemmeside af side og påbegyndelse på kodning af side noter til kommunikations Gantt diagram analyse 1 og noter til kommunikations analyse Gruppemøde Skrive rapport ing Eksempler på kodning essen og evaluering Beskrivelse af processen og evaluering ring User test Kortsortering alyse og design brief Kommunikations færdig analyse og design brief færdig Gruppemøde 2 Korrektur Projekt3 steringer i rapport og div. justeringer i rapport å hjemmeside Endelige rettelser på hjemmeside port færdig Hjemmeside og rapport færdig Aflevering Tasks Uge 44 Uge 44 Uge 45 Uge 46 Uge 47 Slut Uge dato 45 Uge 46 Uge 47 Uge Navn Start dato Slut dato Introduktion Ekspertvurdering og hjemmeside skitser Deadline for skitse af hjemmeside og påbegyndelse på kodning af side Gantt diagram 1 og noter til kommunikations analyse Gruppemøde Skrive rapport Eksempler på kodning Beskrivelse af processen og evaluering User test Kortsortering Kommunikations analyse og design brief færdig Gruppemøde 2 Korrektur og div. justeringer i rapport Endelige rettelser på hjemmeside Hjemmeside og rapport færdig Aflevering side 12

13 Flowchart re-design side 13

14 Kommunikations model side 14