E M P I R E B I O 2 E2011

Transkript

1 EMPIRE BIO Forberedt til: Brian Everitt, Webdesign og webkommunikation, hold 2 E2011 Udarbejdet af: Anders Schaumann, Jens Sigsgaard, Stefan K. Mathiesen, Thomas Gjedde- Nielsen Dato: 8/

2 Introduktion: Empire Bio er en biograf beliggende på Nørrebro. Biografen skiller sig ud fra mange af hovedstadens andre biografer ved at slå sig op på en mere lækker og gennemført biografoplevelse. Her er det ikke store læs af popcorn, larmende teenagedrenge og tumult der møder én når man går gennem dørene, men i stedet en rolig, no-nonsense atmosfære, med en på mange måder gennemført stil og visuel identitet. I skærende kontrast til dette står hjemmesiden empirebio.dk. Websiden er kendetegnet af skrifttunge sider, rodede menusystemer og en på mange måder ikke særligt visuelt tiltrækkende side. Selv efter nu talrige besøg, har denne gruppe svært ved helt at finde hoved og hale i hjemmesiden og den muligheder og funktioner. Projektbeskrivelse: Vi vil derfor til dette projekt tage fat i et redesign af Empire Bios hjemmeside. Målet med redesignet vil både omfatte sidens informationsarkitektur samt visuelle fremtoning. For at vi kan løse denne opgave tilfredsstillende mener vi, at det er nødvendigt at undersøge og besvare følgende forskningsspørgsmål: Hvad er Empire Bios (offline) visuelle identitet? Hvad er målgruppen for hjemmesiden? Hvilke informationer/muligheder søger besøgende på siden? Hvordan kan vi omforme det nuværende indhold af hjemmesiden, så det på fornuftig måde går i spænd med teori om gestaltlove, typografi, afsnit-længder, pursuasive design med mere? Emperi og metode: Designvalgene i forbindelse med redesignet af Empires hjemmeside vil i sagens natur blive bundet op på teoretiske overvejelser såvel som empiriske observationer. Vores designs stilistiske udgangspunkt vil blive den fysiske biograf, da vi som

3 tidligere nævnt mener at denne har en helt særlig (elegant) identitet og stil, som det ville være oplagt at bygge videre på i vores digitale design. For at få et mere omfattende indblik i dette, vil vi som del af vores empiri-indsamling besøge biografens forhal, café m.m. for at undersøge og dokumentere hvilke æstetiske valg der er foretaget her, lige fra konkrete valg af farver og typografi, til mere diffuse beskrivelser af stemning og atmosfære. Observationerne ville danne baggrund for opgavens moodboard. Som vi beskrev i introduktionen, mener vi, at den nuværende hjemmeside for Empire Bio, i forhold til informationsarkitektur og mere generel komposition, har en række problemer. Ud fra teori på området og oplevelser, er dette ikke et særligt kontroversielt udsagn. Vi mener dog alligevel at det allerede tidligt i processen kunne være udbytterigt at inddrage brugere til en usability-test af den nuværende side, for herigennem at kunne få pin-pointet nogle af de konkrete områder hvor brugervenligheden for alvor halter. Senere i processen, når vi har fået sketchet vores egen hjemmeside og informationsarkitektur op, håber vi igen på at inddrage brugere. Dette skulle ske for at sikre os, at vores designvalg virker logiske og fornuftige for andre end os selv. Optimalt set ville vi her kunne lade brugerne indgå i den iterative designproces, hvor deres designforslag og -kommentarer bliver indarbejdet gennem tilbagevendende kontakt med en brugergruppe. Projektorganisering Som det fremgår af nedenstående tidsplan, så har vi for hver uge sat nogle delmål som skal nås. Vi får et bedre overblik over perioden ved at opdele den i faser og kan derved nemmere følge med i om arbejdet skrider frem som forventet. Vi har desuden talt om hver gruppemedlems kompetencer og interesseområder, så vi kan gøre brug af dette i arbejdsprocessen og mere specifikt i forbindelse med uddelegering af opgaver.

4 Tidsplan Uge 45: Indledende feltstudier, med quick and dirty interviews af besøgende i biografen og deres oplevelse af stemning, identitet mv. i forhold til biografen. Udarbejdelse af moodboard på baggrund af observationer og input fra interview. Uge 46: Indledende brugerinddragelse i form af usability-test af den eksisterende hjemmeside for nærmere at kunne klarlægge de konkrete problemer med sitet. Undersøgelse af brugernes behov; hvad er det for nogle funktioner/informationer de søger når de besøger empirebio.dk? Uge 47: Arbejde i hånd og Photoshop med mockup af siderne på baggrund af vores brugerinput. Arbejde med informationsarkitektur ud fra input fra brugerne, og eventuelt i form af decideret co-design, hvor brugerne er med til at udforme overskifter i menusystemerne, hvad der skal grupperes sammen og hvordan det videre skal organiseres. Uge 48: Indledende kodning af hjemmeside Uge 49: Kodning af hjemmeside. I afslutningen af ugen præsenteres vores umiddelbare produkt for brugere. Da der, som beskrevet i ovenstående har været løbende og tilbagevendende brugerinddragelse, er kritikpunkter og andet respons forhåbentlig af en sådan karakter, at det er muligt at ændre i løbet af en uges arbejde. Uge 50: Udbedringer af brugeres kritikpunkter, finpudsning. Uge 51: Mandag - aflevering Indledende refleksioner i forhold til målgruppen: Da Empire Bio ligger på Nørrebro i København, er der en naturlig geografisk afgrænsning i hjemmesidens målgruppen. Det lokale tilhørsforhold

5 understreges også i taglinen En biograf i hjertet af Nørrebro. Den primære målgruppe i forhold til geografi, er derfor umiddelbart nørrebroboere og sekundært andre københavnere. Hvis man ser på hvilke filmtitler som bliver vist i biografen, vil man også kunne se, at der ikke udelukkende er tale om de seneste Hollywood-blockbusters, men også mere smalle filmtitler. Biografen lader i udpræget grad til at positionere sig midt mellem de smalle niche-biografer som eks. Grand Teatret og Vester Vov Vov og på den anden side biografer som Palads og Cinemaxx, der udelukkende fokuserer på de seneste, størst anlagte og mest populære mainstream-film. Empire Bio er således en biograf, hvor man både kan se relativt smalle film, men den er samtidig tilpas uhøjtidelig til, at de mere bredt appelerende Hollywood-film også er på programmet. I forhold til brugerinddragelse, vil de brugere vi rent praktisk har mulighed for at inddrage i designprocessen, formentlig være bekendte eller venners venner. Der er derfor en vis risiko for at vi ender med at designe for en lidt smallere målgruppe, der ud over ovenstående geografiske afgrænsning og smag i film vil have en aldersmæssig og uddannelsesmæssig slagside. Indledende refleksioner i forhold til informationsarkitektur: Som vi har beskrevet i delafleveringens første afsnit, mener vi at en af de centrale elementer i et redesign af Empire Bios hjemmeside, er en ny informationsarkitektur. Vi mener at den nuværende informationsarkitektur med blandt andet en masse menupunkter og uoverskuelige linksystemer, er noget der er oplagt at gøre noget ved. Den nuværende informationsstruktur har eksempelvis flere overlappende menupunkter. Den vertikale menu overlapper ofte den horisontale menu, så menupunkterne vises to gange. Dette giver et rodet og ustruktureret overblik for brugerne. Derudover kunne Hicks Law bruges, eftersom Empire for øjeblikket har 13 horisontale menupunkter, hvilket er væsentligt flere end der normalt anbefales.

6 Selvom vi mener, at vi har teoretisk grundlag for disse observationer, vil vi alligevel gerne underbygge dem gennem usability tests og anden brugerinddragelse, før vi kommer ind på mere konkrete måder at omorganisere sidens informationsarkitektur. Det kunne eventuelt gøres ved hjælp af programmet Silverback til Mac OS X, der kan registrere brugeren af en hjemmesides museklik osv. Blandt andet kunne man stille forskellige opgaver til forskellige brugere, og registrere hvor let folk har ved at finde frem til den relevante information på sitet. Motiverende eller Persuasive designstrategi? Eftersom vi skal sælge et produkt på linje med en bog, koncert eller en anden form for oplevelse, så kunne det være hensigtsmæssigt at benytte sig af persuasive design. Vi kunne eksempelvis lave en funktion i stil med Amazon s, hvor de anbefaler bøger som andre har købt. Det kunne overføres til hvilke film, som ligesindede har set og synes om. Vores job som webdesignere er basalt set at overbevise de besøgende til at købe et produkt, i dette tilfælde en biografbillet. Dette kunne gøres med udgangspunkt i Jens Hofman Hansens model:

7 1 Konceptdiagram Konceptdiagrammet vil blive udfærdiget, når vi har lagt os mere fast på det nye koncept. Dette kræver imidlertid brugerinddragelse og yderligere brainstorming internt i gruppen. Foreløbigt må der henvises til vores moodboard og wireframe for inspiration. Oplæg til vejledning Ud fra ovenstående overvejelser vil vi gerne have vejledning om afgrænsning af projektet. Ud fra tidligere erfaringer mener du så, at omfanget ser fornuftigt ud, eller skulle vi måske hellere begrænse os til nogle konkrete funktioner? Forsiden - Et eksempel på sidens rodede struktur er forsiden. Vi vil nu kort gå igennem nogle af dens problemer. 1

8 Først er der overskriften som er lidt lille i det, den kunne godt fremstå tydeligere. Navigationsmenuen er meget lang, det ville nok fremme overskueligheden hvis man fjernede et par af dens punkter. Selve forsidens hovedfunktion er at oplyse om Empires program og give mulighed for at bestille eller købe billetter. Hver af de film som vises i Empire præsenteres i en afgrænset boks, når man klikker på de enkelte film kommer man videre til en ny side hvor filmen beskrives mere udførligt og hvor der er mulighed for at se en trailer. I udgangspunktet mener vi det er en god ide at fokusere på program og billetter da man let kan forestille sig at det er folks hovedgrund for at besøge siden. Problemet er efter vores mening at det er for besværligt og uoverskueligt. For det første kan det være nødvendigt at scrolle for at finde frem til den film man gerne vil se. Dette er måske ikke noget stort problem, men det havde ikke desto mindre været rart hvis kunne få et overblik over hele biografens program uden at skulle helt ned i bunden af siden. Det virker faktisk som at Empire har forsøgt at løse dette, over de førnævnte filmbokse er der nemlig en kort instruktion i hvordan man bestiller billetter plus et par dropdown menuer som også giver mulighed for programoversigt og bookning. I udgangspunktet er det smart nok, hvis man med det samme ved hvilken film man vil se behøver man ikke ikke at finde pågældende film i dens boks, men kan bestille billetter til den med det samme. Desværre er dropdown menuerne for diskrete til at blive lagt rigtigt mærke til. De klemt imellem sidens overskrift, som er på en mørk grå baggrund, og filmboksene, som er farverige, hvilket gør at de forsvinder lidt. Derudover er informationsboksen og de to dropdownmenuer i forskellige længder hvilket giver et uharmonisk indtryk, specielt fordi de befinder sig på så lidt plads. I det hele taget er plads et problem på forsiden. Program- og bestillingsmenuen er således presset af en newsfeed menu på venstre side og Klub Empire/facebook menu på højre.

9 Newsfeeden er oplysninger om fremtidige arrangementer og fungerer samtidigt som en slags kalender. Dette er dog ikke helt let gennemskue overskue, først og fremmest fordi den ikke har nogen overskrift til at forklare dens funktion. Endvidere er newsfeeden holdt indenfor en meget smal spalte. Dette gør at informationen rent visuelt ser klemt ud da de korte tekstbidder inde i spalten indeholder både fede skrifttyper og understregede links. På højre side er der en spalte der gør opmærksom på fordelene ved at blive medlem i Empire. Denne spalte har en overskrift i et andet layout end hvad der findes på resten af siden, og overskriften er desuden større end selve sidens overskrift. Dette skaber forvirring omkring sidens hierarkiske opbygning. At siden har newsfeed, program og medlemskabsinformation samlet på et sted gør at det hele bliver rodet, der opstår konflikt om hvilke elementer der skal have mest opmærksomhed. De tre menuer er godt nok adskilt af en tynd streg, men denne er så tynd at den er let at overse. Endvidere er der hele tre scrollbars på siden, en til biografprogrammet og en til facebook menuen og en til siden som helhed. Foreløbig disposition Indledning & problemformulering Præsentation af Empire Bio o Publikum i Empire - målgruppe o Empires position i forhold til andre københavnske biografer Analyse af empirebio.dk i dens nuværende form o Gestaltlove osv. Empiri: interviews, usability-tests Redesign o Overvejelser om: Visuel stil Informationsarkitektur

10 Konklusion Usability Øvrig inspiration og ressourcer: Vi vil søge inspiration fra lignende biografer, da disse henvender sig til nogenlunde samme målgruppe. Dette gælder blandt andet: Dagmar Teatret: Grand Teatret: Cinemaxx biograferne: Det Danske Filminstitut: Vester Vov Vov: Palads Bio: Kino: Derudover vil vi onsdag den 9. november vil vi udføre interview med biografgængere før filmvisningerne. Her vil vi blandt andet spørge ind til Empires særpræg og stemning, hvilket vi håber at kunne overføre til det nye site. Interviewene vil være opbygget som afslappet dialog og i quick-anddirty -formatet. Vi håber desuden på, at kunne interviewe repræsentanter fra Empire omkring deres kommunikations- og webstrategi. Litteratur: Buxton, B. (2007): Sketching user experiences: getting the design right and the right design. Garret, J.J (2003): Meet the Elements i The elements of user experience: User centered design for the web Gregersen, Ole & Wisler-Poulsen, Ian (2009): Hvad er usability?, I Usability, Forlaget Grafisk Litteratur. Rasmussen & Fischer (2008): Kategorisering i Målgruppeanalyse lær din målgruppe at kende

11 Lloyd, Ian (2011): Build your own website the right way using HTML & CSS Nielsen, Jakob & Loranger, Hoa (2006): Prioritizing web usability McNeil, Patrick (2010): The web designers idea book, volume 2 Lynch, Patrick J. & Horton, Sarah (2009): Web Style Guide: Basic design principles for creating web sites. BBC rapport (2002): The Glass Wall Hansen, Jens H. (2005): Motiverende design Fogg, B. J. (2003): Persuasive Technology Using computers to change what we think and do Moodboard: Wireframe:

12