Projekt 1 Re-design af Odense Bunkermuseum

Relaterede dokumenter
Portfolio. Udvikling af min portfolio Link til portfolio: Michell Aagaard Dranig

Redesign af Cinnober. Analyse af hjemmesiden Cinnober

Responsive design Der er ingen breaking points på hjemmesiden. Det er et astatic website, da det ikke er responsivt.

Redsign af SF-Film. Link til orginale side: sf-film.dk. Link til vores redesign:

Portfolio Redesign Kamilla Klein 1. Semester eksamen

Headeren er for stor når man kommer ind på siden. Det virker irriterende at man skal scrolle for at få indholdet vist.

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl.

Opgaven. Brugervenlighed. Designparametre. Følgende krav var : Research. Målgruppe. Konklusion. sitet ikke bliver for mørkt.

1. Semester afsluttende Projekt Charlotte Bruhn MUL A December Januar 2015

Portfolioudvikling. Line la Fontaine. Multimediedesigner

Gruppe 15. Redesign af bageriet FeelGood Bakery s website. Gruppen Består af: Nanna Søderquist Christian Thorsø Rolf Josephsen Søren Henrik Wilhardt

GRAFISK DESIGN. Webdesign til fodboldportal

Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2

Michella+Serritzlew+Jacobsen+

MÅLGRUPPE Alle typer af boligselskaber, ejer- og andelsforeninger samt div. institutioner (store som små) på Sjælland. Ikke private kunder.

Indhold. 1. Adgang og afslutning

Grafisk design. Ide. Designprocess. Målgruppe

Gruppe 9 Visuel Interface Design, 27/09/2011

grafisk design Se webappen på din mobil

Grafisk. Workflow. Side 1

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

Analyse af website: cinnobershop.dk

COPENHAGEN. Opgaven. Kunden. Målgruppe. Layout 1. GRAFISK DESIGN // METTE-MARIE RANDSKOV

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN.

EKSAMENS PROJEKT DECEMBER 2013 JANUAR Lærere: Thomas Hartmann. Jesper Hinchely. Ian Wisler-Poulsen. Morten Rold. Merete Geldermann Lu tzen

Redesign af website. Gruppe 27: Fanøfærgen. Website: Feelgood Bakery. Link til redesign:

Grafisk produktion & workflow

Produkt. Index side GRAFISK DESIGN

kollegiekokkenet.tmpdesign.dk Side 1

Active Builder - Brugermanual

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold: Sådan opdaterer du din hjemmeside i Wordpress.

Mathias Hansen Mikkel Luja Rasmussen Ôzgür Salman Mariam El Ouaamari Htx 2B Esn-Helsingør Rapport om app. Design B & Komm/it A

Gruppe 16 / redesign af website: Cinnober / Redesign af website. Gruppe 16: Anja Line Kira Emma Ditte Karoline

Giv tid Alle former for volontør arbejde penge indsamling, rejser mm. Søg Søg felt.

GRAFISK DESIGN. webdesign af pl.dk

Projekt redesign af Kyoto.dk Hold A - gruppe 20

Dokumentation. Udbyder : sms1919.dk Service : sms-grupper Applikationer Facebook. : Facebook Integration med sms-grupper.

Analyse af Cinnobershop.dk

Case:

Analyse af Amos, Marcus og Mikkel

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S.

Guide til din computer

GRAFISK DESIGN. Kenneth Friis Petersen

April Hjemmesider overblik over funktionalitet

Grafisk design. Filmblad til tablet

Medvind en vejrapp for cyklister

Ugeopgave uge 40 Hold A

Miniguide for redaktører. Miniguide for redaktører. Leveret af DFF-EDB.dk

WorkFlow. Svendeprøve Emil Momsen. BeskrivelseN ****** BeskrivelseN ******

Redaktørvejledning for Skriv en artikel

Infographic Klasse arbejdsmiljø

Niks Frost & Line Søs Hold 32B

WBS. Inledning. Afsluttende projekt 1. sem

Afsluttende opgave Webdesign Den 24. maj 2007 Klasse 1.2

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen.

GRAFISK DESIGN 1. HOVEDFORLØB

Grundforløbsprøve Projektbeskrivelse

Portfolio redesign. Kia Dahlen! 1. semester eksamen! MUL-A 2013! !!!

AMANDA ABIGAIL PEDERSEN MARIA THOMSEN SOFIE MAI SØRINE SKOV KRUSE

spild af og få 1000 kroner i lommepenge Aviaja, Martin, Peter og Sofie

Multimediedesigner, Cph Business Lyngby 2. Semester - 2. Projekt - Ferbruar/Marts 2015 E-zine

Ahmad Celik, Garwun Jeffrey Lai og Besir Redzepi : 3. Semester. Multimediedesigner Projektstart: 28/ Aflevering: 09/10-209

Udover denne simple tidsplan har jeg også lavet et GANTT-kort for at vise den reelle tid jeg har brugt på hver opgave.

Trin for trin guide til Google Analytics

Grafisk Design. fra idé til visuelt udtryk Benett

Kickstart Siteimprove. Sådan kommer du i gang med at bruge Siteimprove. Januar 2016 SKIVE.DK. Skive det er RENT LIV

Læringsprogram. Christian Hjortshøj, Bjarke Sørensen og Asger Hansen Vejleder: Karl G Bjarnason Fag: Programmering Klasse 3.4

GRAFISK DESIGN Emballagedesign. Færdige produkt

Frederik, Morten, Rolf og Subangi Kom/IT - Webanalyse 2.F Dias 1. Autocom. Webanalyse. Side 1 af 13

Sådan opdaterer og vedligeholder du din hjemmeside i Wordpress.

Poster design. Meningen med en poster

CPH Business Academy. Lærere: JHI & TUJE

Delaflevering Re-design af Kirsten Kjærs Museums hjemmeside (kkmuseum.dk)

Introducering af Flip MinoHD:

Konceptbeskrivelse. Link.

GRUPPE 5 Line - Nanna - Thea - Sarah

Analyse af websiden FeelgoodBakery.dk

MANUAL. Siteloom CMS

Undervisningsmateriale - Rapport

Dokumentation. Karen-Louise Fejerskov

Hassansalem.dk/delpin User: admin Pass: admin INTERFACE DESIGN

Vejledning for LOF s afdelingshjemmeside - redigeret i Umbraco

REDESIGN AF PORTFOLIO 16. jan. 2015

KALAS FESTIVAL. Link til hjemmesiden: Laura Lundby Gravesen

Bilag 2. Noter. Alternativ: Skriv pakkelabel i søgefeltet Klik på linket ved teksten øverst: pakke labels

MUL B SofieKen, SimoneIbsen, SørenLind, SilleNoël. Unique Landscapes. URL:

Brugervejledning til FOKUSpartnere

Carlas cupcakes. Projekt.

WORKFLOW & PRODUKTION

Kriseprojekt, Design og visualisering

ENGRAMs ibook. Denne guide giver dig et fuldt indblik i, hvordan du studerer engelsk grammatik med ENGRAMs ibook til ipads.

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, Der refereres fra nu af blot

Disse har alle sammen hjulpet til at skabe min hjemmeside. Ved at give inspiration og få ideerne ned på papir, før de blev vist til omverdenen.

Grafisk Design 70% Skitser

Manual til WordPress CMS

BRUGERVEJLEDNING. Til klinikker og brugere i voresklinik.info

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

Creativity Design Undersøgelse Case 1: Auction Travels INDEX... 1 DESIGNOVERVEJELSER... 2 LOGOFREMSTILLING... 7 FLOWCHART... 8 STORYBOARDS...

Transkript:

Erhversakademiet Lillebælt OEAMM18FDA 1.semester d. 08.03.2018 Projekt 1 Re-design af Odense Bunkermuseum prototype: video i ZIP-fil Gruppe 5 medlemmer: Simon Tagge, Sofie Florczak, Mathias Bøgedal, Anne Marie Rokkjær Anslag: 9688

Indholdsfortegnelse: Projektmål... s. 3 Heuristisk analyse... s.3 Prioriteret liste... s.3 CRAP... s.4 Blikfang... s. 6 Navigation... s.7 Nyheder... s.8 Målgruppe... s. 9 Metoder... s. 10 Ændringer... s. 11 Konklusion... s. 12 side 2

ProjektmÅl: Heuristisk Analyse: Målet med projektet er at lave en heuristisk analyse af Odense Bunkermuseums hjemmeside, med henblik på at finde problemstillinger ift. brugeroplevelsen på websitet, og komme med forslag til løsninger på disse, for at forbedre UX. Vi har analyseret siden og udarbejdet løsninger, baseret på behov og krav fra vores personaer, som vi har lavet ud fra den målgruppe vi mener besøger Odense Bunkermuseums hjemmeside og selve museumet. Vi startede ud med individuelt at gennemgå Odense Bunkermuseums hjemmeside, efter NUG (Nobanets Usability Guidelines). Derefter sammenlignede vi resultaterne i fællesskab, og kom frem til de vigtigste problemstillinger, som vi vil komme nærmere ind på, og komme med bud på løsninger. Prioriteret liste: 1) CRAP principper 2) Blikfang 3) Navigation 4) Nyheder side 3

Heuristisk Evaluering CRAP problemstillinger: Løsning: - Der bruges for mange forskellige nuancer af samme farver, og der er ingen gennemgående sammenhæng i farvevalg. - Der bruges samme typografi til overskrifter og brødtekst, og skiftende størrelser. - Manglende kontrast på visse af siderne, som kan gøre det svært at læse. Desuden bruges der også billeder som header, med overskrifter som går i et med billedet. - Vi har valgt et farvetema med 4 forskellige farver, som bruges ens på alle sider. - Vi har valgt 3 forskellige typografier. - Det er med til at skabe repetition, og dermed også et mere harmonisk udtryk på siden. - Billeder med overskrifter fjernes. side 4

Problem: Løsning: - Teksten skifter mellem at være midter- og højrecentreret, som giver et rodet udtryk. - Billeder og bokse sidder på nogle sider skævt i forhold til hinanden. - Alignment virker forskelligt på forskellige computere og browsere. - Intet logo, giver manglende genkendelighed. - Vi har gjort al teksten højrecentreret, for at gøre det let læseligt og mere harmonisk. - Billeder sættes ind i en karrusel på forsiden, så de billeder der var i bunden, bliver set uden at man behøver scrolle helt ned. - Som et slags logo, har vi valgt at skrive Odense Bunkermuseum i venstre hjørne, som gentager sig på alle sider, med menuen. side 5

Problem: Blikfang - Når man lander på hjemmesiden, bliver man mødt af en væg af tekst, og billedet på forsiden vækker ikke ens interesse, da det ikke siger noget om museet. - Billederne er generelt skåret på en måde som skaber forvirring. Løsning: - En karrusel på forsiden, hvor man selv kan kigge billederne igennem. Det er det første man bliver mødt af, som gerne skulle vække interesse. - Nye, højere kvalitets billeder vil også være med til at skabe blikfang. side 6

Problem: Navigation Løsning: - Der er for mange menupunkter og drop downs. - Man bliver kastet lidt rundt når man trykker på knapperne og bliver vist hen til den samme side, som kan virke forvirrende. - Der er for mange gentagelser af information. - Vi har skåret menupunkterne ned til 5 og samlet nogle af siderne i drop downs, og fjernet de sider, som havde gentagende information. - Der er ikke nogen knapper udover i menuen, så det er nemmere at finde rundt og komme til den mest vigtige information. side 7

Problem: Nyheder Løsning: -Siden har et menupunkt der hedder Nyheder, og dertil et underpunkt som hedder Historisk Bunkerdag. - Siden opdateres meget sjældent, og der henvises til deres Facebook side. - Uaktuelle nyheder får det til at virke som om siden er inaktiv. - Vi har fjernet menupunktet, så den ikke har en side for sig selv, da det virker unødvendigt, eftersom den ikke jævnligt opdateres, og der også henvises til Facebook. - Vi har lavet en bjælke på forsiden, som hedder Aktuelt hvor de vigtigste nye informationer kan skrives ind. side 8

MÅlgruppe Preben Ulla Jeg har så meget fritid og jeg keder mig, derfor bruger jeg meget tid på at forske i koldskrigshistorie Mand sidst i 60 erne, på efterløn. Keder sig og vil gerne have tiden til at gå med noget. Besøger museet et par gange om året. Bruger hjemmesiden til at se hvilke nyheder der er (dog sker der ikke så meget her). Teknologi evner = semi. Behov: overskuelig og nemt hjemmeside at navigere rundt i Bruger hjemmesiden til at finde ekstraordinære åbningstider ift. ferier og sådan. Slæber tit sine børnebørn med på museet, de skal også lære om den kolde krig. Bliver hurtig sur, og har ingen tålmodighed. Mit medlemskab af Odense Bunkermuseum betyder at jeg kan være sammen med andre historie interesserede, og det er alletiders fordi vi kan gå i dybden med og snakke om de gamle ting vi har på stedet Historie gymnasielærer Behov: Hendes interesse for den danske historie får hun dækket ved at besøge museer for at få mere indsigt, men også for hyggens skyld, da hun gerne tager sin mand og sine to yngre børn på med på museet, som holder af at komme med på museet. Mål: at få sine gymnasieelever ud på museumstur ved Odense bunkermuseum, men også at hun sammen med sine frivillige kollegaer får gjort stedet mere spændende og retter sig mod målgruppen, så elever ikke kommer til at kede sig. side 9

metoder - Vi har lavet Personaer + scenarie for bedre at forstå hvem sitets målgruppe er. Vi har haft dem med i baghovedet, når vi har lavet re-designet, dog er hele sitet ikke baseret kun på dem. De to personaer, mener vi passer godt på nogle af de problemstillinger vi har ønsket at løse på hjemmesiden. Bl.a. den måde man finder ekstraordinære åbningstider, booker rundvisning og kontakter museet. Disse problemstillinger har vores personaer været med til at løse. F.eks. er åbningstider og særlige åbningstider blevet flyttet ind under den menu, der hedder besøg os. Booking og rundvisning er blevet lavet mere simpelt. Kontaktformularen er fjernet og erstattet med en mail-knap, som åbner direkte i ens mail. - Vi har brugt wireframes til at skabe et simpelt overblik over elementerne på sitet, før vi begyndte på det visuelle. Dette har hjulpet os med at bestemme navigation, funktion og placering på vores redesign af Odense Bunkermuseum. Vi har lavet en lo-fi wireframe, så det har været nemt for os løbende at flytte rundt på elementerne og placere dem de rigtige steder på sitet. - NUG Vi har gjort brug af metoden NUG hvor vi hver især har udfyldt et skema om hjemmesiden lever op til visse kriterier, hvorefter vi har samlet vores resultater i en fælles besvarelse, som er det dokument vi som udgangspunkt har bygget vores opgave op omkring, da vi har arbejdet på at opstille de problemer vi fandt og finde løsninger på dem. - Vi har arbejdet med CRAP principperne på vores redesign. De står for contrast, repetition, alignment og proximity. Vi har brugt det til at skabe en visuel god oplevelse for sitet, samt skabt balance og struktur på vores re-design. Vi har gjort menubjælken genkendelig, og fået den til at skabe en rød tråd igennem de forskellige menupunkter, farverne og layout skaber et mønster der går igen. Vi har valgt farver der skaber stor kontrast, hvilken tydeliggør hvor de forskellige elementer er placeret og hvordan man skal navigere rundt. Vi håber at dette gør det nemmere at læse og rarere at se på. - Vi har gjort brug af research om grafiske trends for 2018 for at modernisere det oprindelige design, bl.a. via vores farvevalg har vi udskiftet en del af de oprindelige farver der var lidt for nedtonede, til mere skarpe farver som taler til tidens trends, hvor farverne gerne må stå mere ud. side 10

Ændringer - Vi har ændret i menuen for at gøre den mere simpel og overskuelig. Ved at samle relevante underkategorier, bliver det nemmere at navigere rundt på siden. Når du besøger siden skal du kun forholde dig til fem kategorier, hvilket skaber et hurtigere overblik. En af ulemperne ved dette, kan være at det kan være svære at finde undermenuerne via drop down menuen, hvis man ikke er familiær med basic navigation. Ved at have færre valgmuligheder og at samle flere punkter, er der mindre at skulle forholde sig til på sitet. - Med farver og typografi har vi forenklet brugen af farverne ved at nedjustere de otte oprindelige farver Bunkermuseet brugte, til fire farver på hjemmesiden, som gør det mindre forvirrende at kigge på. - Logoet som Odense Bunkermuseum har, bliver ikke brugt på deres site, hvilket ellers er et godt værktøj til at skabe genkendelighed. Vi arbejdede lidt med at lave et nyt logo, men valgte i stedet at bruge navnet som en slags logo i øverste venstre hjørne, som en del af menuen, som går igen på alle siderne, og er med til at skabe repetition og opmærksomhed på navnet. - Vi har valgt at fjerne kontaktformularen og i stedet kan man trykke på mailadressen, hvilken automatisk åbner din mailklient og du kan via den skrive direkte til Odense Bunkermuseum. Ligeledes har vi simplificeret teksten til dette afsnit på hjemmesiden, for kun at have den mest relevante information på siden. side 11

konklusion - Vi kan konkludere at de mest relevante problemstillinger vi har fundet, efter den heuristiske analyse, bunder ud i fire ting, som alle var med til at forringe brugeroplevelsen. Manglende kontraster, for mange farver og typografier, og generelt en manglende rød tråd, gør hjemmesiden lettere forvirrende for målgruppen og det er ikke en man husker. - Vi har forenklet hjemmesiden, så den er mere brugervenlig for et ældre publikum, så det er let at finde det vigtigste, hvilket efter vores mening, er priser, åbningstider og booking/kontakt. - Udover dette har vi også givet hjemmesiden et lidt mere rent udseende, der skiller sig mere ud, og en forside som fanger ens interesse. - Vi har simplificeret brugen af farver, for at gøre det mere genkendeligt og lettere at læse. - Hjemmesidens største problem er at den ikke skiller sig ud eller indbyder til mere viden omkring museet, eller lyst til at besøge det. Dertil også at den er forvirrende at navigere rundt i. Vores re-design har gjort den genkendelig og forhåbentlig vækker den de besøgendes interesse og lyst til at besøge museet. side 12