Hjemmeside redesign af Dansk Jagt- og Skovbrugsmuseum Usability dokumentation Lavet af Sarina, Maria og René MulB-13 22.11.2013
I forbindelse med ekspertvurderingstests udarbejdes som hovedregel altid en skriftlig dokumentation. Som tillæg til vedlagte ekspertvurderingsskema, følger derfor her en kortere uddybning og beskrivelse af de vigtigste usability-problemer som til sidst samles i én overordnet konklusion. Derudover følger også en kort redegørelse for ekspertvurderingstestens omfang, metode og de eksperter der har deltaget. Ekspertvurderingen af www.jagtskov.dk er udført af de 3 gruppemedlemmer som alle er multimediedesignerstuderende. Alle har brugt ca. halvanden time til individuel gennemgang af websitet og efterfølgende har eksperterne i fælles forum sammenlignet, gennemgået og diskuteret de forskellige problemer der opleves på websitet. Som det ofte er tilfældet i forbindelse med ekspertvurderinger var der en del overlapninger i fund af usablility problemer, men der dukkede også ting op som ikke alle havde bemærket i den individuelle gennemgang. Alle usability problemer blev herefter tildelt en alvorsgrad på en skala fra 1-4, med 1 som det mindst alvorlige problem og 4 som et problem der skal rettes omgående for at websitet kan fungere og er funktionelt. Til slut udarbejdede eksperterne i fællesskab løsningsforslag til de forskellige usability-problemer og fik lagt en plan for hvorledes disse bedst muligt bearbejdes og undgås i et redesign. Da der som nævnt fremkom relativt mange usability problemer, har eksperterne her udvalgt et udsnit som eksempel: Der er for mange hovedmenupunkter og undermenuerne herunder fremstår rodede og uoverskuelige. #8: Æstestisk og minimalistisk design, alvorsgrad 1. Der er for mange irrelevante informationer som overdøver hinanden hvilket gør det svært for brugeren at afkode budskabet. Designet forstyrres af for mange input, billeder og informationer og der er for meget tekst på forsiden. #8: Æstestisk og minimalistisk design, alvorsgrad 1. Websitet fremstår rodet og uorganiseret og den store brug af tekst gør det kedeligt og livløst. Logoet er for lille og bliver derfor svært for brugeren at se. #8: Æstestisk og minimalistisk design, alvorsgrad 1. Logoet er museets genkendelsestegn, men grundet den lille størrelse og dårlige kvalitet kan det være svært for brugeren at se ordentligt. Funktionen forstør fungerer ikke optimalt da det ødelægger designet når funktionen aktiveres. #:5: Forhindring af fejl, alvorsgrad 3. Som udgangspunkt bør websitet naturligvis forhindre at der opstår fejl/rod I designet I forbindelse med aktivering af en funktion. I dette tilfælde forvirrer funktionen brugeren mere end den gavner og er derfor irrelevant.
Funktionen oversæt til engelsk fungerer ikke og er derfor overflødig. #:5: Forhindring af fejl samt #9: Hjælp brugeren med at opdage og komme tilbage efter fejl. alvorsgrad 4. Dette problem kan tildels henføres til begge heuristikker, da funktionen kun henviser til en enkelt side der er oversat til engelsk. Denne side kan dog ikke direkte erstatte nogen af de oprindelige danske sider og gentages blot når brugeren klikker videre på websitet. Dette efterlader forvirring omkring hvor brugeren befinder sig I navigationen. Generelt er der utroligt mange gentagelser af både links, informationer og menuer. #8: Æstestisk og minimalistisk og design, alvorsgrad 1. De mange gentagelser skaber igen for mange irrelevante input som brugeren skal forholde sig til og fordi de samme ting nævnes flere gange kommer de til at virke usynlige og benyttes ikke. Email funktionen i footeren er defekt i 50% af de testede computere. #:5: Forhindring af fejl, alvorsgrad 3. Det skaber forvirring og irritation hos brugeren at funktionen er til stede men ikke fungerer, særligt da der ikke engang fremkommer nogen form for fejlmeddelelse I forbindelse med defekt I funktionen. Der tilbydes heller ikke nogen alternativ kontaktmulighed, hvilket kunne skabe frustration hos brugeren. Aktivitetskalenderen er kedelig og livløs. #2: Sammenhæng mellem website og den virkelige verden, alvorsgrad 2. Ordet aktivitetskalender forventes at tilbyde noget interessant, aktivt og livligt, ikke blot en lang uoverskuelig tekstrække som iøvrigt ikke adskiller sig synligt fra al anden tekst på websitet. Da featuren ikke taler brugerens vante sprog vil den sandsynligvis ikke tiltrække sig den ønskede opmærksomhed. Dårligt sidelayout med alt for smalt tekstfelt som gør det svært at læse teksten på undersiderne. #8: Æstetisk og minimalistisk design, alvorsgrad 2. Grundet det meget smalle side layout bliver det vanskelligt og uoverskueligt for brugeren at læse teksten. Derudover kommer siderne til at fremstå lidt uor ganiseret og er ikke læsevenlige. Søgefeltet er for lille og passer dårligt ind i designet. #8: Æstetisk og minimalistisk design, alvorsgrad 1. Søgefeltet falder ikke ordentlig ind i designet og gør siden endnu mere rodet at se på. Pdf er åbner op i samme vindue. #8: Æstetisk og minimalistisk design, alvorsgrad 1. På trods af at det ikke som sådan opleves som en graverende fejl, kan det være forvirrende og generende at miste kontakten til websitet. Uerfarne brugere er måske ikke opmærksomme på at klikke tilbage til websitet når de er færdig med pdf en og forsvinder derfor væk. Det bør være nemt for brugeren at holde kontakten til sitet. Derudover forstyrres det visuelle helhedsindtryk af designet når sitet pludselig forsvinder til fordel for en pdf som ikke er umiddelbart genkendelig I forhold til websitets udseende.
Ovenstående er som beskrevet blot et udkast af de samlede usability-problemer, og de der blev vurderet som nogle af de vigtigste at fokusere på at forbedre. Vi valgte så vidt muligt at forblive tro mod websitets oprindelige design i forhold til tekstmateriale, farver og til dels billedmaterialet. Det er tydeligt at musseet har en ide med designet og farvevalg passer umiddelbart godt ind i naturmuseums stilen. Dog bærer det i høj grad præg af at der sandsynligvis har været en del forskellige mennesker involveret i processen og der er alt for mange og for rodede elementer på siden. Efterfølgende har vi erfaret at websitet er udviklet af webbureauet Link Factory som sandsynligvis efterfølgende har overladt vedligeholdelsen til musseets ansatte. For at skabe et mere overskueligt og æstetisk design har vi samlmenlagt de menupunkter der dækkede over samme slags info. Derudover har vi fjernet den overflødige højremenu på forsiden samt venstremenuen på alle undersider og i stedet tilføjet dropdown funktioner til alle hovedmenu punkter. Vi har desuden tilføjet en slider til at fremhæve vigtige menupunkter på en dynamisk måde. Der er ligeledes tilføjet et menupunkt med titlen Forside da dette manglede og giver mere sammenhæng i forbindelse med funktionen brødkrummesti. Samlet set giver disse ændringer et mere enkelt design hvor brugeren ikke skal tage stilling til for mange ting. Vi har tilført mere luft omkring de enkelte elementer for at skabe fokus på disse og dermed øge brugbarheden og funktionaliteten. Logoet er blevet forstørret og placeret med mere luft omkring så det ses tydeligere og bemærkes af brugeren. Derudover er nogle af de eksisterende billeder erstattet med mere livlige og nutidige billeder der komplementerer designet bedre. For at skabe et visuelt blødere indtryk af websitet som helhed er der som baggrund anvendt en grøn-hvid gradient. Teksten på forsiden er blevet reduceret så kun de mest relevante info er fremhævet på denne side og billederne dermed kommer i fokus. Brugeren får hermed et mere overskueligt og organiseret website. Funktionerne forstør website og oversæt side til engelsk er fjernet da ingen af de nævnte fungerede optimalt og bidrog med mere forvirring end gavn for brugeren. De mange gentagelser af links og informationer er fjernet så de tilbageværende bliver mere synlige, ikke overdøver hinanden og er tydeligt tilgængelige ved blot at fremgå et enkelt sted. Emailfunktionen i footeren er rettet til så den fungerer. Kalenderen er blevet mere tiltalende og læselig som følge af et generelt ændret side layout på alle undersider med bredere tekstfelt, tydeligere skrifttype og kontinuerligt skrift farve. Yderligere brugertests Gangstertest: For at få et hurtigt, indledende indblik i websitets usability problemer, har vi udover ekspertvurderingen udført en hurtigt, nedskaleret gangstertest. Ud fra denne konkluderede vi at websitet i det store hele fungerer okay rent navigationsmæssigt, dog skal der tilføjes et forside menupunkt for at brødkrummestien fungerer optimalt. Det kan desuden være svært for brugeren at konstatere at man er på forsiden da topmenuen ikke indikerer hvor på siden man befinder sig. Søgefeltet er ikke æstetisk men er tydeligt og kan altid ses. Kortsorteringstest Denne simple test metode som foregår uden brug af selve websitet eller computer iøvrigt, tester om brugeren kan forstå hvad der står på knapper og menupunkter og om den måde menupunkterne er delt op på giver mening I forhold til navigationen. Da netop websitets navigation er helt afgørende for brugervenligheden på websitet, er det vigtigt at vide om brugeren kan forstå sammenhængen I de enkelte elementer. På baggrund af ovenstående valgte vi efter at have re-designet det oprindelige websites menustruktur at udføre en kortsorteringstest for at få en fornemmelse af hvorvidt den er brugervenlig og giver mening for brugeren.
Kortsorteringstesten var mulig at benytte pga. den enkle testmetode som er mindre ressourcekrævende end f.eks. en brugervenlighedstest der ville kræve at vi havde en bredere tidsramme til rådighed end projektperioden tillader. Vi valgte at udføre en lukket test hvor testpersonen skal gå ud fra de allerede fastlagte hovedmenupunkter og derudfra placere alle undermenupunkter hvor de giver bedst mening og hvor testpersonen ville forvente at finde dem. Testen er godt i gang Næsten færdig (Se evt. foto dokumentation) Testpersonen var forholdsvis hurtig til at danne sig et overblik over menu og undermenupunkter og placerede uden de helt store udfordringer undermenupunkterne. (Se foto Testen er godt igang ) Testpersonen, som var god til at tænke højt, gav udtryk for at være lidt I tvivl om hvor undermenupunktet kontakt skulle placers da det både var relevant under hovedmenupunktet Om Museet og under Praktisk Info. (se foto: Næsten færdig ) Hun nævnte desuden at hun under alle omstændigheder også ville kigge nederst på websitet efter kontaktoplysninger. Dette bekræftede vores valg ift. at bibeholde gentagelsen af kontakt I footeren. Ligeledes var testpersonen I tvivl om undermenu punktet Forskning skulle placers under Udstillinger eller Om museet da hun mente at ordet kunne forstås på flere forskellige måder. Resultatet af kortsorteringstesten viste at testpersonen ikke ville have problemer med at navigere I den nye menustruktur; dog afveg et enkelt punkt fra redesignets menustruktur da hun ville forvente at finde Café Sneppen under hovedmenupunktet Praktisk info. (Se foto Det endelige resultat ) Det endelige resultat Vi kan derfor konkludere at testpersonen umiddelbart opfatter og inddeler redesignets navigationsstruktur som det er tiltænkt, med en enkelt undtagelse. Vi har dog valgt at bibeholde placeringen af Café Sneppen under Om museet da gruppens 3 personer finder det mest logisk at placere den her. Grundet den meget korte tidsramme var der desværre kun mulighed for at at gennemføre én enkelt kortsorteringstest. Set I lyset af den dermed meget begrænsede mængde data skal testens resultat ses som vejledende.
Konklusion Samlet set har vi tilstræbt at designe et visuelt afbalanceret og brugervenligt website, bl.a. ved at skabe en enklere og mere overskuelig menu struktur, fjerne gentagelser, optimere billeder samt reducere forside teksten. Derudover er de defekte funktioner fjernet og/eller lavet fuldt funktionelle. På grund af den begrænsede tidsramme har det ikke været muligt at rette alle de fundne problematikker, så vi har fokuseret på de vigtigste. I forbindelse med ovenstående arbejde har vi designet med øje for princippet om luft som vi har brugt for at skabe mere rum og opmærksomhed på de ting vi fandt vigtige at fremhæve. For at skabe helhed og sammenhæng i designet har vi arbejdet ud fra princippet om linjer og opnået et mere struktureret design og læsevenligt website. Vi har også fjernet alle unødvendige elementer og informationer (primært i form af gentagelserne og ensartede sider på sitet) hvilket refererer til princippet om enkelthed. Baggrunden for dette valg var at undgå unødvendig støj som forvirrer og forstyrrer brugeren på websitet. Alt i alt ønskede vi at designe et website med stort fokus på brugbarhed, men med et æstetisk design som brugeren ligeledes opfatter som værdifuldt og visuelt tiltrækkende.
Heuristik - Navn/nr. Hvor - URL Problem - Beskrivelse Kat. 1-4 Løsning - Forbedring #8: Minimalistisk og Æstestisk design http://www.jagtskov.dk/ Topmenu: For mange menupunkter og for ensartede menupunkter. #:5: Forhindring af fejl http://www.jagtskov.dk/english/ Den engelske udgave fungerer ikke 4 Fjern funktionen #8: Æstetisk og minimalistisk design http://www.jagtskov.dk/ Forstør funktionen forstyrrer og ødelægger designet når den aktiveres #8: Æstetisk og minimalistisk design http://www.jagtskov.dk/ Højremenuen forstyrrer designet og funktionen overses nemt af brugeren. #8: Æstetisk og minimalistisk design http://www.jagtskov.dk/ Logoet er for lille 1 Logoet forstørres #8: Æstetisk og minimalistisk design Hele sitet Farveforvirring, den pink skriftfarve fungerer ikke. #1: Systemstatus Hele sitet Der er ikke optimal sammenhæng mellem brødkrummestien og navigationen da der ikke er et menupunkt med titlen forside #2: Sammenhæng mellem website og den virkelige verden http://www.jagtskov.dk/aktiviteter/ #4: Konsistens og standarder http://www.jagtskov.dk/ om-museet/ #2: Sammenhæng mellem website og den virkelige verden http://www.jagtskov.dk/findvej/ Aktivitetskalenderen er død og livløs. Vigtige kontakt info er ikke synlige nok på forsiden Langt, grimt link. GPS koordinaterne virker ikke aktuelt på dette site. 1 Sammenlagt menupunkter og lagt enkelte i dropdown menuen. 3 Funktionen er fjernet og brugeren kan benytte zoom funktionen på sin computer. 1 Funktionen er fjernet i højre side men lavet i en dynamisk slider i headeren. 1 Der anvendes en anden skriftfarve 3 Der laves et menupunkt med titlen forside. 2 Sidelayoutet og design på kalenderen ændres 2 Kontaktinfo placeres som menupunkt praktisk info og gentages i et lille punkt i øverste højre hjørne. 1 Link og GPS koordinater fjernes. Istedet henvises der til kort.
Heuristik - Navn/nr. Hvor - URL Problem - Beskrivelse Kat. 1-4 Løsning - Forbedring #8: Æstetisk og minimalistisk design http://www.jagtskov.dk/ Social icons virker malplacerede på forsiden #4: Konsistens og standarder Hele sitet Generelt mange gentagelser i links, info gentages på mange forskellige undersider. #:5: Forhindring af fejl http://www.jagtskov.dk/ Email funktionen i footer virker kun på 50% af de test computerne. #8: Æstetisk og minimalistisk design http://www.jagtskov.dk/fileadmin/user_upload/dokumenter/ Aktiviteter/Programmer/Program-efteraar-2013-jagtskov. pdf Pdf åbner op i samme vindue. Gælder flere steder #8: Æstetisk og minimalistisk design Alle undersider Dårligt sidelayout med alt for smalt tekstfelt som gør det svært at læse teksten på undersiderne. #8: Æstetisk og minimalistisk design http://www.jagtskov.dk Designet forstyrres af for mange input, billeder og informationer og der er for meget tekst på forsiden. #8: Æstetisk og minimalistisk design Hele sitet Søgefeltet passer ikke ind i designet og det er for lille. 1 Ikonerne flyttes til bunden af siden. 1 Gentagelser fjernes. 3 Funktioen rettes til så den virker 100% 1 Pdf åbnes op i nyt vindue 2 Side layoutet på undersiderne ændres 1 Design og side layout på forsiden ændres så billederne kommer mere i fokus. 1 Der laves et visuelt pænere og større søgefelt
Litteraturliste Gregersen, Ole og Wisler- Poulsen, Ian: Usability. Testmetolder til mere brugervenlige websites på Internettet. Forlaget grafisk litteratur, 2011, 1.udgave 2.oplag. Wisler-Poulsen, Ian: 20 designprincipper. Forlaget Hrafisk Litteratur 2012, 1. udagve 2.oplag.