DDB CMS User Experience Analyse



Relaterede dokumenter
Guidelines og værdier for DDB CMS

B14. Appendiks. Dokument DDB CMS User Experience Analyse Version 1.2 Dato 1. Juli Værnedamsvej 15, 1. sal 1819 Frederiksberg C Danmark. b14.

DDB Designguide. DDB Designguide V

I det kommende afsnit vil vi løbende komme ind på de enkelte resultater og samtidig komme med bud på, hvordan disse kunne løses i fremtiden.

Portfolioudvikling. Line la Fontaine. Multimediedesigner

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

Release notes Januar 2014

DDB CMS Designguide DDB CMS Designguide V

MANUAL. Siteloom CMS

Administration af subsites BRUGERVEJLEDNING FOR ADMINISTRATOREN

Manual til Wordpress. 1. Log ind på din Wordpress-side. Indhold:

Du kommer ind på Cicero Web ved at skrive eller vælge din skole i dropdown-feltet på login-siden.

Active Builder - Brugermanual

IsenTekst Indhold til Internettet. Manual til Wordpress.

Guide til PlaNet v1.12. Original skrevet af:

Bortset fra disse ting, så ser vi frem til at få jeres feedback, rapporter om fejl og ideer.

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

Indhold. 1. Adgang og afslutning

Vejledning til ereolens app til Android enheder

2. Gennemgå de offentligt tilgængelige sider. Hvad kan man finde hvor!

Projekt 1 Re-design af Odense Bunkermuseum

Silkeborg Review Mine sider

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

Manual til Dynamicweb Februar 2010

Spil og svar. Journal nr Et webbaseret værktøj udviklet af Programdatateket i Skive

Vejledning i anvendelse af

Vejledning til ereolens app version 2.0 til ipad

Ændringsønsker Artesis Alpha

Grundforløbsprøve Projektbeskrivelse

Indholdsfortegnelse Opret engelsk version af hjemmesiden... 2

Guide til PlaNet v1.11. Original skrevet af:

Brugermanual. - For intern entreprenør

Vejledning til ereolens app til Android enheder

Hardeknud gruppe. Brugermanual. Tilegnet redaktører af gruppeweb hjemmeside

PRODUKT BIBLIOTEKS APPS BIBLIOTEKS APPS. rediaa s

ActiveBuilder Brugermanual

Manual til WordPress CMS

Sådan bruger du ereolens app på ipad eller iphone

få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside

Redesign af Cinnober. Analyse af hjemmesiden Cinnober

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder:

Brugervejledning til Online-JitBesked. Version 1.2

Designmanual BUTLER FM

Trin for trin guide til Google Analytics

Hjemmeside redesign af Dansk Jagt- og Skovbrugsmuseum

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

Relevant skærmdump fra det evaluerede materiale indsættes her BRUGERTESTANALYSE M. 5 TESTBRUGERE

BRUGERGUIDE Nfoo Concept Digital Skiltning

Brugervejledning til FOKUSpartnere

Guide til PlaNet v1.0. Original skrevet af:

Sådan bruger du Schultz lovportaler

Skolens formidlingsside

Administrator manual

Nota App på telefonen

BRUGER GUIDE. Waoo leveres af dit lokale energiselskab. Er du. Waoo Web TV PÅ COMPUTER, TABLET OG TELEFON

BRUGER GUIDE. Waoo Web TV PÅ COMPUTER, TABLET OG TELEFON FIBERBREDBÅND TV TELEFONI

Du kan hente siden ved at trykke på det lille hus i øverste venstre hjørne af skærmen og derefter finde frem til siden via forsiden.

Hjemmesidens layout. Sitecore Foundry maj Version 1.2

ViKoSys. Virksomheds Kontakt System

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Quick Guide Ditmer edagsorden Oktober 2013

Quick guide Dynamicweb 9. Kom godt i gang med brugen af redigeringsværktøjet bag vores hjemmesideløsning CMS-systemet Dynamicweb

Vistemmernu. Et webbaseret værktøj udviklet af Programdatateket i Skive. programdatateket@viauc.dk Web:

Vejledning i redigering af apotekets hjemmeside

Generel information. Brugere. Hjemmesidens lay-out. HIF Hjemmeside How to do

VELKOMMEN 3. KOM GODT I GANG 4 Log ind 5 Kontrolpanel 6 Tilpas profil 7 Tilknyt hold 8 Tilknyt fag 9

Titel Overskrift. Hold den kort og præcis! Som Førtidspension & Skånejob. Andet relevant information skal stå i resumefeltet.

Lav din egen forside i webtrees

- A) Overskrift Hvis du ikke kan finde på en oplagt overskrift lige nu, så skriv bare et eller andet. Du kan redigere i det senere:

En blog med dansk brugerflade. Opret en Smartlog konto Gå til Opret en konto ved at skrive din adresse

My booking. Generelt. Forsiden. Version 9.0

Sådan bruger du ereolens app på en Android tablet eller smartphone

SIGIL Sådan opretter du en e- bog Step by Step

Vejledning i brug af Interbook (Frederiksberg) til brugere med adgangskode

Brugermanual. Revision 1

Kom godt i gang. Sitecore Foundry maj Version 1.1

VISUELLE GUIDELINES FOR LOG-IN OG SIGNERING MED NEMID. Guide til udseende, sprog og struktur for tjenester, der bruger NemID.

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

Drejebog til tractorpulling.dk

Teksten henvender sig til dem, der ikke tidligere har lånt en e-bog til brug på en PC og derfor skal starte helt fra bunden.

Silkeborg Review Mine sider

- 1) Overskrift Hvis du ikke kan finde på en oplagt overskrift lige nu, så skriv bare et eller andet. Du kan redigere i det senere:

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å

Velkommen til REX onlinehjælp

Quick Guide til bedre online markedsføring MERSALG. med b2b webshop. Start her med et par gode råd og få flere hos Idé Bureauet Reklame & Marketing

VEJLEDNING Udfyldelse af spørgeskemaet

Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se.

Brugermanual. Byggeweb Capture Entreprenør 7.38

BRUGER GUIDE. Waoo Web TV på computer via waoo.tv. Waoo leveres af dit lokale energiselskab

Google Plus for Virksomheder Hvordan laver man en Google plus side?

BONUSINFORMATIONER i forbindelse med emnet Billeder og grafik

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

Novotek Planning Systems A/S 2013 Version 1.0 Jan 2013 ROB-EX 4.2

4 ARBEJDE MED SEKTIONER

BRUGER GUIDE. Waoo Web TV PÅ COMPUTER, TABLET OG TELEFON FIBERBREDBÅND TV TELEFONI

ipad for let øvede, modul 8 Underholdning på ipad Læsning

Hjemmeside manual. Indholdsfortegnelse. Noter: - 1 -

BRUGER GUIDE. Waoo Web TV på computer via waoo.tv FIBERBREDBÅND TV TELEFONI

BRUGER GUIDE. Waoo TV Go PÅ COMPUTER, TABLET OG TELEFON FIBERBREDBÅND TV TELEFONI

SecureAware Opfølgning Manual

Transkript:

DDB CMS User Experience Analyse Version 1.2 Dato Analyse Bureau af B14 Aps Værnedamsvej 15, 1. sal 1819 Frederiksberg C Danmark b14.dk

1 Introduktion 3 1.1 Introduktion 4 2 Identitet og guidelines 5 2.1 Værdier 6 2.2 Grundlæggende brugsscenarier 7 2.3 Guidelines 8 9 3.1 Forløb 11 3.1.1 Områdebeskrivelse 11 3.1.2 Underområder 11 3.1.3 Udfordringer og issues 11 3.1.4 Forbedringer og inspirationer 13 3.2 Arkitektur og navigation 15 3.2.1 Områdebeskrivelse 15 3.2.2 Underområder 15 3.2.3 Udfordringer og issues 15 3.2.4 Forbedringer og inspirationer 17 3.3 UI 18 3.3.1 Områdebeskrivelse 18 3.3.2 Underområder 18 3.3.3 Udfordringer og issues 19 3.3.4 Forbedringer og inspirationer 24 3.4 Responsive 25 3.4.1 Områdebeskrivelse 25 3.4.2 Underområder 25 3.4.3 Udfordringer og issues 25 3.3.4 Forbedringer og inspirationer 27 4 Opsamling 28 Side 2

1 Introduktion

1 Introduktion 1.1 Introduktion DDB CMS bygger på tanken om at skabe en fælles og robust ramme for det digitale bibliotek. Designet og udviklingen af denne platform, har været en særdeles udfordrende opgave med konstant skiftende fundament og teknologiske rammer. DDB cms har nu været i brug i forskellige kontekster, hvilket har illustreret behovet for modning og udvikling af design og UX af platformen. Ærindet med indeværende rapport og appendiks er, at etablere en fælles platform for viden og erfaring i forbindelse med et fremtidigt arbejde med DDB CMS, etablere fælles fordslag i DDB på user experience (UX) og visuel identitet (ID) området, så der sker et kvalitetsløft i forbindelse med fremtidige udviklingstiltag på DDB CMS baseret på et fælles fundament. Rapporten understøtter desuden udvælgelsesprocessen af de konkrete tiltag der også foretages i projektet, for at forbedre brugerens oplevelse på DDB CMS. For at kvalificere processen omkring et fremtidigt arbejde med UX og UI på platformene, er tidligere undersøgelser og workshops opsamlet i kort form i rapportens appendiks, afsnit A. Udover tidligere undersøgelser, baseres rapporten på en brugerinvolveringsworkshop samt en workshop med formidlingsgruppen og udvalgte biblioteker. Disse peger alle på en række udfordringer ved det nuværende DDB CMS, både hvad angår brugeroplevelse, søgning, materialevisning, lån, etc. Rapporten tager udgangspunkt i en gennemgang af værdier, grundlæggende brugsscenarier og guidelines. Denne del af rapporten bygger på en workshop med projektets ressourcegruppe og giver et strategisk ståsted for den videre analyse og designproces. Rapportens primære omdrejningspunkt, er analysen af UX og UI for DDB CMS i dets nuværende form. Analysen dækker fire hovedområder: forløb, arkitektur & navigation, UI design og responsivt design. Håbet er, at denne analyse vil danne et sundt og fælles fundament for den videre proces for fremtidigt arbejde med design og UX på DDB CMS. Side 4

2 Identitet og guidelines

2 Identitet og guidelines 2.1 Værdier DDB CMS er bibliotekets digitale berøringsflade, og for visse brugere, den primære og måske eneste berøringsflade. Det er derfor afgørende, at DDB CMS har en stærk og sammenhængende identitet. En stærk identitet, skabes gennem sammenhæng mellem det man er, det man siger og det man gør. Omdrejningspunktet, er således at få en organisations kultur, kommunikation og adfærd til at hænge sammen. Bestemmelsen og udvælgelse af værdier, der er repræsentative for bibliotekets essens og ønskede brugeroplevelse, kan være en praktisk løftestang for arbejdet med at skabe en stærk identitet. Værdierne tjener yderligere som strategiske rettesnore for fremtidigt redesign og videreudvikling af DDB CMS. Det nuværende DDB CMS, er designet ud fra følgende værdier: Moderne Informativ Nyskabende Oplysende Overraskende Oplevelsen af værdierne for det nuværende DDB CMS, blev diskuteret og evalueret af en gruppe bestående af 25 brugere og eksperter i brugeroplevelse i UI, i en brugerinvolveringsworkshop. Vi har opsamlet pointerne fra denne diskussion i Appendiks, afsnit A. Med udgangspunkt i denne opsamling samt det forhold at værdierne blev defineret inden designprocessen for det nuværende DDB CMS blev igangsat, synes det fordelagtigt at udfordre og gentænke værdierne, inden processen omkring et redesign af DDB CMS igangsættes. Følgende værdier er et resultat af formidlingsgruppen og udvalgte bibliotekers arbejde: Brugbarhed (Tilgængelighed / Sømløs brugeroplevelse / Service) Relation (Nærværende / Bibliotekarers tilstedeværelse) Troværdighed (Tillidsvækkende / Faglighed) Lokal forankring (Identitet / Tilknytning) Inspiration (Bibliotekets rum / Redaktionelt) Side 6

2 Identitet og guidelines 2.2 Grundlæggende brugsscenarier Følgende grundlæggende brugsscenarier, er skabt og kvalificeret gennem workshop med formidlingsgruppen og udvalgte biblioteker: Karen. 24 år, universitetsstuderende Karen bruger udelukkende bibliotekets website, når hun skal søge materialer til opgaver eller betale bøder. Dette gør hun almindeligvis hjemmefra på sin ipad. Lis. 68 år, pensionist Lis besøger ofte det fysiske bibliotek, hvor hun låner og bestiller bøger. Hun bruger ikke så ofte det digitale bibliotek, men vil fra tid til anden gerne følge med i status på lån og reserveringer, samt genlåne materialer. Bo. 45 år, pædagog på SFO Bo læser tit højt for børnene i institutionen, og er derfor altid på udkig efter nye spændende titler til børn i alderen 8 12 år. Han bruger bibliotekets website til at finde inspiration til dette. Kirsten. 52 år, biolog Kirsten ved ikke noget bedre end at slappe af i lænestolen med en god krimi, og er derfor hele tiden på jagt efter en ny. Hun bruger bibliotekets website til at finde inspiration og til at reservere. Jesper. 17 år, gymnasieelev Jesper er meget musik- og filminteresseret og er derfor glad for bibliotekets store, gratis udvalg. Han synes dog, at det er besværligt at skulle hente materiale, og er ikke så god til at huske at aflevere det igen. Han bruger derfor kun bibliotekets digitale tilbud. Else. 33 år, sygeplejerske Else har to børn på hhv. 7 og 10 år. De kan godt lide, at der sker noget. Else bruger derfor bibliotekets website til at holde sig opdateret på relevante arrangementer for familien, samt til at tjekke om biblioteket er åbent, når hun overvejer en tur derhen med børnene. Agnes. 15 år, folkeskoleelev Agnes er meget optaget af vampyrer og søger netværk omkring dette. Agnes vil gerne være medskabende og er aktiv på de sociale medier. Agnes vil gerne skabe en læseklub på bibliotekets platform. Henrik. 55 år. biokemiker Henrik bruger sin fritid på slægtsforskning og bruger bibliotekets website til at finde ny faglitteratur omkring emnet. Henrik har ofte mere end 25 materialer hjemlånt og det samme i reservationer. Sne. 10 år. folkeskoleelev. Sne interesserer sig for Twilight og heste. Hun vil gerne selv gennemføre lån og reservationer på sin iphone, uden at få assistance. Disse grundlæggende brugsscenarier vil senere blive kvalificeret yderligere af prioriteringsgruppen. Side 7

2 Identitet og guidelines 2.3 Guidelines Tanken med guidelines, er at omsætte værdier og grundlæggende brugsscenarier til en overskuelig række af hovedprincipper for en designproces. Disse principper fungerer som en konceptuel ramme eller en serie af love som benyttes i forbindelse med al design og udvikling til DDB CMS, for at understøtte, at den bedst mulige brugeroplevelse opnåes. Følgende guidelines tænkes som udgangspunkt for design og UX på DDB CMS platforme. Designet skal: gøre biblioteket forståeligt og overskueligt være forretningsunderstøttende og blandt andet facilitere inspiration, brug af materialer og deltagelse i aktiviteter understøtte den personlige bibliotekariske formidling lette brugerens handlinger og omgang med biblioteket understøtte det lokale biblioteks identitet være responsivt og tage højde for såvel forskellige platforme som grundlæggende brugsscenarier overholde gestaltlovene indeholde faste tolerancer og afstande mellem modulerne løbende brugertestes og evalueres Side 8

3 Problemer

I de følgende afsnit præsenterer vi vores analyse af de UX-problemer, vi har konstateret på DDB CMS i sin nuværende form. Analysen er inddelt i fire hovedområder - forløb, arkitektur og navigation, UI og responsive. Hvert område beskrives og der gives eksempler på områdets respektive problemer og endeligt, gives der forbedringsforslag og inspirationer. I analysen anvendes begreberne UX, usability og UI, som derfor kort forklares i det følgende: UX UX er en forkortelse for user experience og er brugerens samlede oplevelse, af at anvende et system. UX beskæftiger sig ikke kun med, hvordan brugeren kommer fra A til B, men også med den følelse og holdning brugeren opnår gennem brugen af et system. Både usabilty og UI, er essentielle dele af UX. Usability Begrebet usability dækker over et systems brugervenlighed. Usability beskæftiger sig med, hvor let det er for brugeren at forstå og anvende et system. UI UI er en forkortelse for User Interface og er den brugerflade, hvormed brugeren kan interagere med et system. Side 10

3.1 Forløb 3.1.1 Områdebeskrivelse Forløbet gennem et website, beskriver hvordan brugeren møder forskellige typer indhold, bliver inspireret, distraheret, finder frem til sit ønskede mål og orienterer sig. For et ideelt udformet website, bør brugeren opleve sin færden på sitet som et sammenhængende flow, hvor der ikke bruges energi på forhindringer eller på at overveje hvordan han/hun kommer videre. En måde at teste sit website for u/hensigtsmæssige forløb, er ved at skabe en række grundlæggende brugsscenarier og gennemprøve disse fiktive personers primære brugssituationer på sitet. Derudover kan man definere såkaldte red routes for sit website. Red routes er de veje, flest brugere oftest benytter. Det kan f.eks. være at tjekke udlånsstatus, foretage en søgning eller tjekke bibliotekets åbningstider. Ved at belyse de forhindringer, en bruger møder på sin rute gennem et website, kan man synliggøre overordnede problemer, fejl eller mangler. Det kan også give indsigt i, om et website mangler indgange til indhold, og om hvorvidt de eksisterende indgange fungerer efter hensigten. 3.1.2 Underområder Grundlæggende brugsscenarier Aktivitetscentreret Red routes Flow 3.1.3 Udfordringer og issues 3.1.3.1 3.1.3.1 Grundlæggende brugsscenarier, aktiviteter, red routes og indgange Analysens afsnit 2.3 introducerede seks grundlæggende brugsscenarier, ligesom starten af afsnit 3.1.1 gav et par eksempler på red routes. Ved både at gennemprøve red routes og afprøve analysens grundlæggende brugsscenariers hensigter, bliver det tydeligt at man som besøgende støder på udfordringer flere centrale steder. Herudover er der problemer med mulighederne for at lade sig inspirere. DDB CMS præsenterer ganske enkelt ikke særligt mange materialer, og tillader ikke Side 11

brugeren at gå på opdagelse eller bevidst fare vild. Eksempler Red route: Min side. Står man på forsiden og logger ind, forbliver man på forsiden og søgefeltet åbnes påny. For at tilgå sin brugerside, skal man opdage at teksten ved log ind ikonet er ændret fra Log ind til Min konto. (APPEN- DIKS, AFSNIT B, SCREENSHOT 3.1.1 OG 3.1.2) Mange brugere vil forvente, at blive ført til sin personlige side efter log ind, eller i det mindste få en tydelig indikation af, at være logget ind. Logger en bruger ind fra forsiden, er det højst sandsynligt for at tjekke reserveringer, lån eller andet der relaterer sig til ens brugerside. Red route: Opdater reservation. Brugeren tilgår sin personlige side og vælger Reservationer. Herefter præsenteres en liste af reservationer. (APPENDIKS, AFSNIT B, SCREENSHOT 3.1.3) Der er dog ikke mulighed for at ændre i en reservation. Denne vigtige handling er svært tilgængelig: Her skal man, ud for et materiale, tjekke en boks af, hvorefter to knapper kommer til syne. (APPENDIKS, AFSNIT B, SCREENSHOT 3.1.4) Det er ikke tydeligt, hvad knappen Opdatér valgte reservationer dækker over. Først når man klikker, forstår man, at her er mulighed for at ændre afhentningssted og interesseperiode. (APPENDIKS, AFSNIT B, SCREENSHOT 3.1.5) Red route: Opret bruger/bliv låner: Indgangen til at oprette sig som bruger, ligger godt gemt væk i websitets footer. I dette eksempel (APPENDIKS, AFSNIT B, SCREENSHOT 3.1.6) hedder linket Lånerkort og indmeldelse. Servicedesign. Det er ikke muligt for en bruger at færdiggøre sin indmeldelse som låner, uden at skulle være fysisk til stede på biblioteket. Grundlæggende brugsscenarier. Bo ønsker at finde inspirerende materialer inden for sit interesseområde: Gode bøger til børnene på SFO en. Desværre er ruten ikke entydig og kan føre adskillige steder hen. Bo oplever gang på gang at gå forgæves, og har lyst til at opgive sit ærinde. Han forsøger at finde inspiration gennem temaindgange, men ender ofte på temalister, som han ikke synes virker inspirerende eller prioriterede. Temaer. Det virker tilfældigt, hvilke temaer der eksisterer (på Fredericia Bibliotek er der f.eks. et tema der hedder film, men ikke et, der hedder bøger.) (APPENDIKS, AFSNIT B, SCREENSHOT 3.1.7) Inspiration. Fredericia Bibliotek har en side ved navn Bøger. Søger man inspiration gennem denne, bliver man stillet overfor flere oplagte muligheder: Skønlitteratur, Læsetips og anbefalinger og Toplisten. Skønlitteratur fører skuffende til en side med to nyheder, ingen materialevisninger. Læsetips og anbefalinger fører ligeledes til en side med nyheder, denne gang en lang liste, som alle er tagget ens. Det er dog ikke muligt at filtrere i listen og man skal kigge alle nyhederne igennem for at se om der skulle være en nyhed, der beskriver det område, man har interesse i. (APPENDIKS, AFSNIT B, SCREENSHOT 3.1.9) Toplisten fører til en liste med kun de 11 mest efterspurgte materialer. Side 12

3.1.3.2 Flow Prædefinerede søgninger. (APPENDIKS, AFSNIT B, SCREENSHOT 3.1.10) Disse links går direkte til prædefinerede søgninger. Dette skaber forvirring, idet det på søgningen er svært at afkode, hvad der præcist er søgt på. Nyeste krimier. (APPENDIKS, AFSNIT B, SCREENSHOT 3.1.11) Er man opmærksom, kan man se, at søgningen faktisk ikke viser de nyeste krimier, men krimier modtaget i januar og februar, selvom vi i skrivende stund er sidst i maj. Ruten til indhold er forskellig. På Fredericia Bibliotek findes inspiration til børnebøger f.eks. gennem temaet Børnemateriale under Temaer, men det er ikke muligt at finde inspiration til bøger for voksne her. For at finde inspiration til dette skal man gennem indgangen Bøger nederst på forsiden. Udover at mindske de forhindringer og bump brugeren møder på sine ruter på sitet, kan man styrke fornemmelsen af flow, ved at give brugeren mulighed for at klikke sig videre til andet relateret indhold indenfor et givent. På DDB CMS bibliotekerne føres brugeren sjældent videre. Man præsenteres enten for ingenting eller man præsenteres for links, der ikke har nogen tilknytning til det indhold man befinder sig på, og man skal for det meste gå tilbage, hvor man kom fra eller starte forfra for at tilgå nyt indhold. Eksempler Det ville være naturligt at præsentere teasere for andre relevante nyheder, der er tagget med nogle af de samme tags som den nyhed man befinder sig på. Teaserne ville lægge sig i bunden af nyheden, så man møder dem når man har læst nyheden færdig og er klar til at gå videre. (APPENDIKS, AFSNIT B, SCREENSHOT 3.1.12) 3.1.4 Forbedringer og inspirationer Det ville være en god ide at føre brugeren til brugersiden efter log ind, med mindre brugeren er ved at udføre en aktivitet, som at låne et materiale. Temaer kunne defineres gennem genrer i stedet for materialer. Randers Bibliotek har udformet en løsning på dette til inspiration: https://randersbib.dk Temasider kunne fungere som landings med relateret materiale på tværs af indholdstyper. Her et eksempel fra kadk.dk, hvor siden Arkitektskolen viser forskellige indholdstyper, der relaterer sig til Arkitektskolen (APPENDIKS, AFSNIT C, SCREENSHOT 3.1.13 OG 3.1.14) Bibliotekarens funktion på det fysiske bibliotek, kunne aktiveres gennem step-guides eller interessetragter. Et eksempel på en step-guide, kunne være at lade brugeren vælge en materialetype, et emneområde og tre materialer, som brugeren finder interessant inden for dette område, Side 13

hvorefter guiden svarer tilbage med en liste over lignende materialer. Ved at præsentere brugeren for relateret indhold øger man brugerens flow og sørger for at brugeren inspireres. Dette kan gøres ved f.eks. at vise nyheder, der deler tag med den nyhed brugeren befinder sig på. (APPENDIKS, AFSNIT C, SCREENSHOT 3.1.15) Eller ved at vise indhold andre brugere, der har lånt et givent materiale, også har lånt - her et eksempel med hvad andre brugere har købt (APPENDIKS, AFSNIT C, SCREENSHOT 3.1.16) Personaliseringsmodulet, løfter visse af disse områder og burde muligvis være en del af DDB basis. Aarhus Kommunes Biblioteker har implementeret en løsning på muligheden for at oprette sig som bruger online. Hvis denne virker efter hensigten kunne den overføres til DDB CMS. Side 14

3.2 Arkitektur og navigation 3.2.1 Områdebeskrivelse En logisk informationsarkitektur og navigation, er grundlaget for et intuitivt site, hvor brugeren nemt kan afkode, hvor denne befinder sig samt, hvad sitet indeholder og hvorledes der navigeres. Brugeren danner sig hurtigt et indtryk af sitets arkitektur og navigationsprincipper og forventer herfra, at resten af sitet stemmer overens med dette indtryk. Mødes denne forventning ikke, skal brugeren bruge ressourcer på at genoverveje sin forståelse af arkitekturen og navigationsprincipperne. En sådan inkonsistens i arkitektur og navigation, forvirrer brugeren og skader sitets troværdighed. Brugeren efterlades med en følelse af manglende overblik og utryghed ved at gennemføre handlinger på sitet. Udover at et site skal følge sine egne definerede regler, bør det i langt de fleste tilfælde følge de gængse webkonventioner for struktur og navigation. Dette gælder i særdeleshed, når der er tale om en bred målgruppe. En gennemsnitlig bruger, er bekendt med en række konventioner fra sin generelle færd på nettet. Det handler om at benytte sig af denne viden og disse konventioner, for at skabe en velkendt og intuitiv navigation 3.2.2 Underområder Informationsarkitektur og markører Menu Konsekvent navigation Gruppering, hierarki, tags og kategorier 3.2.3 Udfordringer og issues 3.2.3.1 Informationsarkitektur og markører DDB-cms har en meget flad informationsarkitektur. Dette betyder, at man som bruger bevæger sig meget på tværs af sitet, frem for i dybden. Brugeren føres således ofte væk fra det menupunkt denne befinder sig under, hvilket gør besværliggør brugerens afkodning af strukturen. Der mangler ligeledes ofte markører for, hvor brugeren befinder sig. Side 15

Eksempler Står man på siden Inspiration (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.1) på Albertslund Bibliotek og vælger Emnelister for voksne, føres man væk fra inspiration og til en side uden markører for, hvor man befinder sig (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.2) De manglende markører er et generelt problem. (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.3) 3.2.3.2 Menu Menuen bør give et visuelt overblik over sitets indhold samt markere for brugeren, hvor denne befinder sig. Dette er ikke tilfældet på DDB bibliotekerne. Derudover sammenblandes menuens 2. niveau med kategori-filtreringen, ved at dele placering og udseende. Eksempler 3.2.3.3 Konsekvent navigation Menuen mangler en visuel markering af det aktive menupunkt. (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.4) På siden Lånerkort fungerer venstremenuen som undermenu (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.4), mens denne er et kategori-filter på siden Nyheder. (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.5) Til gengæld fungerer select-listen på siden Nyheder som en menu, der fører en til en ny side med ny højremenu i stedet for et filter som forventet. Den inkonsekvente navigation, går igen flere steder - både i venstremenuerne og i forbindelse med tags på indhold. Eksempler Ifølge gængse webkonventioner, betyder navigation i en undermenu at man føres videre til en side, der befinder sig under samme overpunkt. Dette er ikke tilfældet i venstremenuen her. (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.1) Navigation i venstremenuen, har her tre forskellige regler og kan føre en til: en side inden for samme overpunkt ved valg af Nyt på hylderne (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.6), en side et andet sted på sitet ved valg af Emnelister for voksne (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.2), en ekstern side ved valg af Filmtwitting (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.7) Tags på indhold har forskellige funktioner. Der er intet visuelt, der indikerer at de tre tags har forskellige funktioner (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.8) Tagget Emnelister fører brugeren til en liste over nyheder tagget med Emnelister. (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.9). Tagget Albertslund Hovedbibliotek fører brugeren til en biblioteksside. (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.10). Side 16

Tagget Emnelister for voksne fører brugeren til en liste over indhold tagget med Emnelister for voksne. (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.11) 3.2.3.4 Gruppering, hierarki, tags og kategorier Grupperingen af indhold i temaer og kategorier fremstår rodet. Mulighederne er mange ved frit at kunne kombinere menu-struktur, temaer og kategorier. Resultatet bliver desværre uigennemsigtigt. Dette skyldes, at der ofte og nemt opstår et mismatch mellem menustrukturen og strukturen for tags og temaer. Eksempler Klikker man sig på Fredericia Bibliotek fra siden Bøger til siden Læsetips og anbefalinger, hvilket kan gøres fra venstremenuen, ryger man væk fra området Bøger. Brugeren har oplevelsen af, at have tilgået området Bøger men er ved et enkelt klik i undermenuen ikke længere under området og præsenteres nu for indhold, der ikke er relateret til Bøger (f.eks. linket Film, musik og teater i venstre-menuen) - brugeren forvirres derved omkring sin placering i sitets struktur. (APPENDIKS, AFSNIT B, SCREENSHOT 3.2.12 OG 3.2.13) 3.2.4 Forbedringer og inspirationer Markeringer eller active states i hovedmenu og undermenu. Strukturen kunne ligeledes understøttes med brødkrummer. (APPENDIKS, AFSNIT C, SCREENSHOT 3.2.14) En menu, der giver overblik over hvad der findes under hvert punkt. (APPENDIKS, AFSNIT C, SCREENSHOT 3.2.15) Omstrukturering af sitemap, så brugeren ikke så ofte føres væk fra det område denne har navigeret til. Konsekvente regler for navigation Side 17

3.3 UI 3.3.1 Områdebeskrivelse UI er forkortelsen for begrebet User Interface. Termen beskriver mødet mellem bruger og, i dette tilfælde, website. I visuel kommunikation arbejder man primært med skrift, farve, foto og illustrationer i samlende kompositioner. Det samme gør sig gældende for et UI, men her er følgende komponenter også potentielt i spil: Interaktive elementer (knapper, links, dropdowns, indtastningsfelter, scrollbarer, faneblade, checkboxe, notifikationer) lyd og bevægelse. Det er bredt accepteret, at et veldesignet UI for et kommunikationswebsite, bør give slutbrugeren oplevelsen af, at websitets funktioner og visuelle kommunikation giver sig selv, arbejder med og for brugeren og er effektivt i sin visuelle udformning og respons. Kort sagt, kan man sige, at UI et skal facilitere, at brugeren skal yde mindst muligt for at opnå sit ønskede mål. UI et skal gøre sitets formål og indhold forståeligt. I den overordnede visuelle formgivning og præsentation af et websites UI, er det meget vigtigt, at der er en pædagogisk overensstemmelse på tværs af indholdssider. Hvis dette ikke er tilfældet, kan det skade brugerens forståelse af platformen. 3.3.2 Underområder Gestaltlovene Visuel konsistens Typografi Clutter Usability Side 18

3.3.3 Udfordringer og issues 3.3.3.1 Gestaltlovene Hovedpointen i gestaltlovene, er perception. Den menneskelige hjerne tænker i systemer, regler og sammenhænge. En af de store udfordringer for DDB cms har vist sig at være netop inkonsekvent omgang med følgende gestaltlove: 1. Loven om lighed. Denne lov beskriver, hvordan symboler, der ligner hinanden, vil opfattes som hørende sammen, og ligeledes vil symboler der adskiller sig fra hinanden, opfattes som værende forskellige 2. Loven om nærhed. Denne lov beskriver, hvordan symboler i hinandens umiddelbare nærhed, vil opfattes som hørende sammen 3. Loven om lukkethed. Denne lov beskriver, hvordan symboler der er indkapslet i en ramme, eller et kontrastfyldt område, vil opfattes som værende separate fra det omkringliggende indhold 4. Loven om figur og baggrund. Denne lov beskriver, hvordan den mindste, afgrænsede figurantegning vil blive opfattet som forgrund. Dvs. at kontrastforholdet angiver vigtighed. Eksempler Lovene om nærhed og lighed: Forsiden. Her præsenteres en strøm af nyheder og arrangementer, som alle står i hinandens umiddelbare nærhed, men som ved nærmere inspektion rent indholdsmæssigt er forskellige. Rent visuelt er der ikke nogle nævneværdige parametre der adskiller elementerne. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.1) Loven om nærhed: Forsiden. For at gå til en nyhedsartikel skal man klikke Læs mere som er placeret i en nyhedskasses yderste højre side, visuelt tættere på kalenderens højrespalte end dets eget indhold (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.1) Lovene om lukkethed og figur og baggrund: Forsiden. For at adskille kalenderspalten visuelt, har man designet en metaforisk kalenderlap: En farvet top på en hvid flade. Denne lap er placeret på en mørkere grå baggrund, som danner et ekstra lag: Farvet kalendertop på hvid flade på mørk grå baggrundsfarve på lys baggrundsfarve. Det giver oplevelsen af, at kalenderlappen faktisk ikke hører til arrangementet, men er sit eget element. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.1) Herudover er dag og dato typografisk større end arrangementets titel. Loven om nærhed: Generelt. Klapper man punkterne i sitets footer sammen, vil pilene være tættere på det næstkommende punkt, og ikke det punkt pilen rent faktisk tilhører (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.2) Loven om nærhed: Søgeresultat for materialesamling. Mærkaten med ordet Tilgængelig: er tættere på første tag ( Bog ) end næste tag ( Lydbog ), hvilket ansporer at der er et forhold mellem Tilgængelig og Bog som ikke gælder for Bog og Lydbog. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.3) Side 19

3.3.3.2 Visuel konsistens Loven om lighed: Arrangementsvisning. Der er to tags i bunden af arrangementets beskrivelse, men de har ikke samme størrelse. Forskellen ansporer, at Musik er mindre vigtig end Eksternt arrangement (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.4)Samtidig angives tags som værende sidens absolut vigtigste kommunikative element ved at være tydeligt afgrænset i et rektangel, samt være farvet rødt. Loven om lighed: Arrangementsvisning. Der er indsat ikoner for arrangementet: A) Ikonet for datoen er en kalender, der tydeligt viser forskellige datoer i et lille net. I arrangementslisten var dette ikon en kalenderlap med farvet top. B) Ikonet for publikumstype (Alle) er det samme som bruger login / lånernummer. (SCREENSCHOT 3.3.4) Loven om lighed: Pilenavigation. På arrangementer > Kategori er pilene en anden størrelse end pilene i footeren. Dette ansporer at de har to forskellige funktioner, hvilket ikke er tilfældet (SCREENSCHOT 3.3.5) Lovene om lukkethed og lighed: Generelt. Toppen af et DDB cms website består af en tredelt top: Øverste del indeholder bibliotekets navn samt to faneblade, der lader brugeren skifte mellem søgemodus og brugermodus. Midterste del indeholder enten søgemuligheder eller brugerinformationer vist kontekstuelt ift øverste del. Nederste del indeholder hovednavigationen for sitet. Denne navigation står på en flade der ikke visuelt adskiller sig fra det midterste felt. Man forventer, at hvis man klikker den inaktive fane i øverste del, vil hovednavigationen forsvinde. Dette er dog ikke tilfældet. Ligeledes kan man klappe den aktive fane sammen via øverste del, hvilket resulterer i, at midterste del forsvinder, uden dog at skjule nederste del, til trods for at det visuelt synes logisk (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.6) Visuel konsistens handler om at skabe tiltalende, let forståelige visuelle systemer. Følger man disse visuelle systemer, sikrer man, at brugere hurtigt intuitivt accepterer og følger UI ens særegne konventioner. Visuel konsistens breder sig til dels både ind på områderne gestaltlovene og usability men fokuserer udelukkende på, at ensrette og tydeliggøre det visuelle udtryk. DDB CMS tilbyder en frihed eller fleksibilitet ift designet af UI et og der gives tre niveauer af denne. Dette er selvsagt en udfordring for tanken omkring visuel konsistens, men konsistensen bør findes på et højere niveau end fleksibiliteten og bør således indtænkes generelt. Eksempler Generelt: Et DDB cms website leveres med en del pile, som alle har samme overordnede funktion. Visuelt er disse pile ikke i overensstemmelse med hinanden, hverken i størrelse eller udførelse (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.7) Generelt: Bruger man søgeren i toppen af sitet, står den på en farvet baggrundsflade. Efter man får præsenteret søgeresultater, står søgeren under toppen på hvid baggrund (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.8 OG 3.3.9) Side 20

Generelt: Linjer til at separare indhold både horisontalt og vertikalt har ikke et ensartet kontrastforhold eller ens tykkelse (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.10) Materialevisning: Farve, farveforløb, størrelse og typografering er en anelse forskelligartet fra emneord til handlingsknapper. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.11) 3.3.3.3 Typografi Typografi er et specialeområde inden for grafisk design, som omhandler behandling af tekst. Graden af tydelighed i den visuelle kommunikation for et website afhænger i høj grad af det typografiske arbejde. Det er her, man synliggør en teksts hierarki, skaber overblik over indhold og viser hvad der siger hvad om hvad. For et kommunikationswebsite vil der ofte være en proces, hvor alle rubrik- og brødtekstniveauer identificeres, for bedst at planlægge de visuelle balancer i en given tekst. Eksempler 3.3.3.4 Clutter Temaliste: Niveau 1, 2 og 3 er typografisk næsten identiske, hvilket efterlader brugeren til sig selv (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.12) Nyheder: Linjelængden overskrider langt de 60-70 karakter pr. linje, som man anbefaler ved læsning på web (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.13) Generelt: Skrifttypen Source Sans Pro er tegnet i 6 snit med ægte kursivsæt for maksimal potentiel flavor. I DDB cms er kun Regular og Semibold snittene brugt, to snit som ikke har en tydelig visuel kontrast til hinanden. Det skaber større lighed mellem de tekstuelle elementer på en side, som rent kommunikativt burde adskille sig fra hinanden (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.14) Clutter er en term der dækker over unødvendigheder som forstyrrer eller forringer en brugeroplevelse, enten i interaktionen med et website eller i den blotte visuelle betragtning. Eksempler Nyheder: I teaservisningen af nyheder, er der tilføjet en Læs mere knap, som ikke tjener et egentligt formål, idet du både kan navigere til den fulde nyhedsvisning via klik på billede eller overskrift. Konventielt ser man ikke Læs mere knapper på nyhedssites eller blogs længere (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.1) Arrangementer: I teaservisningen af arrangementer, er der tilføjet en pil, der angiver at man kan navigere til dette arrangement. Den forstyrres dog af teksternes længde, som kan støde sammen med pilen (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.1) Arrangementer: I teaservisningen arrangementets lokation visuelt tydeligere end arrangementets titel. Det er derudover muligt at klikke på lokationen, hvilket ikke nødvendigt fra teaseren. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.16) Side 21

Arrangementer: I listen af teasere indeholde dato-adskilleren samme information to gange, både i form af dato-lap og tekst (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.16) 3.3.3.5 Usability Materialesamling: Der vises en teaser for hver materialetype, hvilket betyder at man får de samme informationer flere gange. Titel, forfatter, årstal, billede, beskrivelse og tags er ens for teaserne. Disse kunne samles i en fælles top (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.17) Anmeldelser: Anmeldelser fylder visuelt meget, men har men indeholder ikke meget information. Man forventer at man kan klikke sig hen til en anmeldelse, men man bliver blot informeret om, at der findes en anmeldelse og får i nogle tilfælde en rating fra anmeldelsen. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.18) Usability beskæftiger sig med, hvor brugervenligt et website er - er det let for brugeren at forstå, hvordan sitet anvendes. Et brugervenligt site skabes blandt andet ved at skabe klarhed i user interfacet, så det er nemt og hurtigt at afkode, hvordan diverse funktioner anvendes. Er det f.eks er tydeligt for brugeren, hvilke elementer der kan klikkes på, hvordan man filtrerer i en søgning eller hvordan man logger ind? Man bør derudover have fokus på om der kan gøres noget for, at brugeren lettere kan udføre de handlinger han/hun ønsker. Ved man f.eks. at mange brugere ofte ønsker at bruge en bestemt funktion, kan man hjælpe dem på vej ved at placere denne funktion centralt og tydeligt i sit layout. Der er i DDB-cms en del eksempler på elementer, hvor brugervenligheden kan optimeres. De tidligere behandlede områder om gestaltlovene, visuel konsistens, typografi og clutter er alle med til at skabe klarhed i user interfacet. Men der er en række elementer på ethvert site, der falder en smule uden for disse kategorier og det er dem vi samler op på her. Eksempler Slideshow: Der er ingen visuel indikation i tekst-listen til venstre af, hvilket slide der er aktivt. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.18) Slideshow: Tekstboksen på hvert enkelt slide er ikke et link, og der kan kun klikkes på titel og billede. Det føles intuitivt at kunne klikke på hele slidet. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.18) Linielængde: Linielængden på brødteksten er meget bred, hvilket gør den svær at læse. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.19) Pager på søgning: For hvert sideskift på en søgning kommer der en ekstra side i pageren. Brugeren er vant til at kunne skabe sig et overblik over antallet af sider her. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.20 OG 3.3.21) Side 22

Filtrering på søgning: Ved nogle filtermuligheder er det muligt at vælge flere (f.eks. Emne) - ved andre er det kun muligt at vælge en (f.eks. Årstal). Visuelt er de ens, og man viser altså ikke brugeren at der er en forskel. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.22) Søgestreng: Ved klik på emne-tag på et materiale lander man på en søgning med en tekststren i søgefeltet som denne: dkcclterm.em= fantasy. Det er meget indforstået, hvad dette betyder. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.23) Rediger brugerprofil: Det er en god ide at informere brugeren om, hvorvidt felterne er valgfrie at udfylde og hvad information man indtaster benyttes til. Det er f.eks. uklart hvordan biblioteket bruger telefon nummer og e-mail adresse. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.24) Reservationsliste: Man savner materiale-billeder, som gør det hurtigere at afkode hvert materiale. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.25) Reservationsliste: Nummer i kø info siger intet om, hvornår man kan forvente at bogen er klar til afhentning, da man ikke får info om antal eksemplarer. En dato for hvornår materialet forventes klar til afhentning vil være mere brugbar. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.25) Huskeliste: Det er muligt at slette materiale fra sin huskeliste, men muligheden bliver først synlig, hvis man tjekker et af materialerne af. Der er stor chance for at brugere ikke opdager funktionen. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.26 OG 3.3.27) Reservér knap: Reservérknappen er stadig synligt på indhold der allerede er reserveret. Det ville være fint at vise brugeren at materialet er reserveret ved f.eks. at ændre teksten på knappen og gøre den inaktiv. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.27) Farvekoder på materiale: Der kan sættes spørgsmålstegn ved om farvekoderne på materialer er tydelige nok indikatorer på det de dækker over. Her betyder den gule farve på reservér knappen f.eks. at der er kø på materialet. Det ville være skabe klarhed også at skrive med ord, at der er kø på materialet. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.28) Søgefelt: Søgefeltet forsvinder, hvis man vælger resultater fra hjemmesiden på en søgning og der ikke er nogle resultater. Man skal navigere tilbage for at foretage en ny søgning. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.29) Hover feedback: Der gives generelt ikke meget feedback til brugeren på hover. Tags skifter baggrundsfarve og nogle links får en streg under sig. Men f.eks. billeder og titler i teasere og slideshows, samt mange knapper, som f.eks. reservér knappen har ingen feedback på hover. Hover-feedback er en nem måde at vise brugeren at denne er ved at interagere med et element. Header: Headeren er ikke fixed og man skal ofte scrolle langt op for at tilgå menuen og søgeren. Farver: Farvevalget giver på nogle biblioteket nogle lidt uheldige resultater, som går ud over læsbarheden og overblikket. Her er kontrasten mellem Side 23

tekstfarver, link-farven og diverse baggrundsfarver ikke god og meget af teksten er svær at læse. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.30) Her mangler der farveforskel mellem teaser-bokse og sidens baggrund. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.31) Hvor befinder materialet sig: Den bedste måde, at guide brugeren på vej kan ofte være at bruge de rigtige ord. Når man befinder sig på et materiale kan man, ved at klikke på Se alle eksemplarer, få vist hvilke biblioteker, der har materialet hjemme og hvor det er opstillet. Ud fra teksten er det dog ikke særlig tydeligt, at det er denne information der gemmer sig i boksen. En tekst som Se hvilke biblioteker der har materialet hjemme eller Se hvor materialet befinder sig ville være selvforklarende, og lede brugeren på rette vej. (APPENDIKS, AFSNIT B, SCREENSHOT 3.3.17) 3.3.4 Forbedringer og inspirationer Et redesign der overholder gestaltlovene og skaber et klart typografisk hierarki. Her ses et eksempel på, hvordan f.eks teaservisninger kan indeholde meget information, men stadig fremstå overskuelige igennem at følge gestaltlovene og have klare typografiske niveauer. (APPENDIKS, AFSNIT C, SCREENSHOT 3.3.32) Bedre visuel opdeling mellem forskellige indholdstyper. Fjernelse af overflødige knapper og funktioner. En fixed header vil betyde at brugeren hele tiden har kort vej til at navigere videre og søge. For at spare plads kunne det være en ide med en header der bliver lavere når der scrolles ned. (APPENDIKS, AFSNIT C, SCREENSHOT 3.3.33 OG 3.3.34) En mere fængende, visuelt orienteret formidling af indhold og i særdeleshed af arrangementer (jvf. Pointer fra Brugercentrisk Dagen i Appendiks). Side 24

3.4 Responsive 3.4.1 Områdebeskrivelse Responsivitet beskæftiger sig med, hvordan et website tilpasser sig forskellige skærmstørrelser. Antallet af forskellige skærmstørrelser er enormt og det er utopisk at tro, at man kan have fuld kontrol over, hvordan ens site fremstår på alle skærmstørrelser. Men det er vigtigt, at sitets funktionalitet og forståelse ikke går tabt, og at principperne for navigation og UI beskrevet i de to tidligere afsnit stadig overholdes når skærmstørrelsen ændres. De fleste udfordringer opstår når pladsen på skærmen bliver trang. Det handler her om at foretage en skarp prioritering af hvad der skal have plads. Størrelser og afstande skal tilpasses så pladsen udnyttes optimalt. 3.4.2 Underområder Tilpasning, prioritering og udnyttelse af plads Opretholdelse af funktionalitet og god navigation Konsistens i UI 3.4.3 Udfordringer og issues 3.4.3.1 Tilpasning, prioritering og udnyttelse af plads DDB CMS har en udfordring når skærmen bliver mindre. Billeder er meget små, linjelængder meget korte og visse elementer fylder uforholdsmæssigt meget. Nogle steder står indhold oven i hinanden eller bryder ud af de kasser de var tiltænkt at holde sig inden for. Det betyder at overblikket ryger, at indholdet er sværere at tilgå og afkode, og at sitets troværdighed svækkes, da det ikke fremstår designet. Eksempler For stor højre margin på søgefelt giver horisontalt scroll. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.1) Der bruges meget plads på dato headeren. Billeder er så små at det er svært at se hvad der er på dem. Teasertekst står ofte oveni pil. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.2) Der bruges generelt meget plads på padding, da designet er bygget op af bokse i bokse. Her er der f.eks. 4 gange padding fra venstre før titel og billede. 1 gang padding ville være nok. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.3) Side 25

Skriftstørrelsen på titlen er unødigt stort. Billedet er småt men optager hele venstre side og linielængden bliver derfor meget lille og hele elementet bliver meget højt. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.3) Det er muligt at oprette tabeller tekstfelter, hvilket ikke kan styres på små skærme. Tekst på billeder bør også frarådet, da teksten næsten altid bliver for lille til at læse på små skærme. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.4) Højden på de forskellige slides i slideshowet på forsiden varierer i højden. Det har den effekt at alt indhold under slideshowet rykker op eller ned hver gang slideshowet skifter. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.5 OG 3.4.6) 3.4.3.2 Opretholdelse af funktionalitet og god navigation Når pladsen bliver trang, er det ofte nødvendigt at flytte elementer, ændre deres udseende eller skjule dem. Der er på DDB cms bibliotekerne flere eksempler på at funktionaliteten og navigationen, er blevet mindre hensigtmæssig i denne proces. Der er derfor gode muligheder for forbedringer i denne henseende. Eksempler Undermenu er usynlig. Klikker man sig ind under f.eks. inspiration Albertslund bibliotek er der intet, der indikerer, at siden har undermenupunkter. Man skal åbne menuen for at se/opdage dette. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.7 OG 3.4.8) Undermenuen vises her som en select-liste for at spare plads. Dette er inkonsistent i forhold til, at undermenuen andre steder vises som underpunkter i hovedmenuen. Derudover er det et brud på de gængse webkonventioner, hvor menuer aldrig vises som select-lister. En select-liste signalerer at man filtrerer i indholdet. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.9) I slideshowet på forsiden kan man skifte indhold i slideshowet ved hjælp af en select-liste. En select-liste er en dårlig visuel visning af, at man kan skifte mellem forskellige slideshows. Overblikket og funktionaliteten fra desktop er gået tabt. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.10) Teksten er fjernet fra ikonerne i topmenuen, hvilket gør det ekstra vigtigt at ikonerne er nemme at afkode. Log-ud ikonet er umiddelbart svært at tyde (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.11) Og når man har logget ind skifter Log ind ikonet funktion til at være et link til ens personlige side, hvilket man må gætte sig til. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.12) Åbner man menuen og derefter søgefeltet, åbner søgefeltet op uden har menuen lukkes. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.13) For at lukke menuen skal man nu klikke to gange på menu-ikonet og hvis man klikker søgeren væk, står menuen stadig åben, selvom menu-ikonet ikke er aktivt (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.14) Side 26

3.4.3.3 Konsistens i UI Når skærmen bliver mindre kan der nemt opstå små uoverenstemmelser i user interfacet. Det kan være afstande der ikke længere er ens, ting der ikke aligner og lign. Sitet kommer derved til at fremstå sjusket og det skader dets troværdighed. Eksempler Logoet bliver for højt og skubber elementet under sig ned, og der opstår luft mellem ikoner det element de burde hænge sammen med. (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.15) Sektionen med nyheder er smallere end teksten over den (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.16) Den invendige luft fra boksens kant til tekst er større på nyhedsteasere end på eventteasere (APPENDIKS, AFSNIT B, SCREENSHOT 3.4.17) 3.3.4 Forbedringer og inspirationer En omstrukturering af menuen, så underpunkter foldes ud når man klikker på et menupunk. Giver overblik. (APPENDIKS, AFSNIT C, SCREENSHOT 3.4.18) Bedre udnyttelse af plads kan opnås ved ikke at have bokse i bokse, så der spares padding samt at lade indholdet fylde hele bredden ud og placere sig oven på hinanden. (APPENDIKS, AFSNIT C, SCREENSHOT 3.4.19) Side 27

4 Opsamling

4 Opsamling Indeværende analyse, er ikke tænkt som et statisk dokument, men som et nyt ståsted for videreudviklingen af DDB CMS. Det er således tanken at rapportens indhold lever videre og konkretiseres. Kongstanken bag arbejdet med værdier, grundlæggende brugsscenarier og guidelines i afsnit 2, er at disse føres videre og bruges aktivt i fremtidlige projekter under DDB. De konkrete tiltag og forbedringer, som beskrives i afsnit 3, er blevet kvalificeret og rangeret af formidlingsgruppen og andre nøglepersoner. Dette lever videre i et dynamisk dokument, som varetages af DDB. Disse tiltag og forbedringer, opdeles i pakker og udvalgte pakker, gennemføres i efteråret 2015. Side 29