Brugervenlighed 101: Drop nu de billedkarruseller

DjøfBilled-karruseller fødes med nogle velkendte og åbenlyse problemer i forhold til brugervenlighed.

Det gælder helt generelt, men naturligvis i særlig grad, hvis karrusellerne ikke er designet fornuftigt.

Derfor er billedkarruseller ikke længere populære, og de bliver sjældent implementeret på moderne websites…

Hov – vent.

Mange spritnye sites lanceres stadig med billedkarruseller som et bærende element på forsiden.
Ud af de seneste 30 sites registreret på lancering.dk, har ikke færre end 11 en stor billedkarrusel øverst på forsiden, (et enkelt site har karrusellen næstøverst).

Dermed er (dårligt implementerede) billedkarruseller én af de hyppigst forekommende brugervenligheds-fejl – og jeg vil her give en række eksempler.

OBS. I virkeligheden burde jeg kalde det “indholdskarruseller” – for karruseller kan bruges til andre ting end billeder. Men da “billedkarrusel” er ordet folk bruger og forstår, har jeg valgt at bruge det ord i stedet. I et senere indlæg vil jeg forsøge at se nærmere på ord og begreber i forhold til webdesign og usability.

Umiddelbart kan det være svært at forstå, hvorfor billedkarruseller er så sejlivede, når nu mange eksperter og mange test gennem de seneste 10-15 år har vist, at de – groft sagt – ikke dur. Men karruseller tjener ofte et internt formål.
Alle vil gerne have indhold højt op på forsiden – og alle kan ikke ligge øverst. Med mindre det altså sker i en karrusel.

Billedkarruseller er derfor ofte et symptom på “indefra og ud”-tænkning.

Samtidig er karruseller – i manges øjne – smukke. Store, lækre billeder som crossfader eller swiper til andre store lækre billeder…

Jeg skal ikke gå dybt ind i en generel diskussion om usability her – men henviser til linksamlingen nederst.
Jeg vil dog lige helt kort ridse de grundlæggende problemer op.

  • Indhold i karruseller vises ikke hele tiden. Det vil sige, at mange besøgende slet ikke bliver eksponeret for indholdet.
  • Karruseller opfattes – som alt der bevæger sig – som bannere. Og brugerne ved, at bannere ikke vil dem noget godt. Derfor klikker de sjældent på indhold i karruseller – selv om karrusellen i sig selv kan tiltrække opmærksomhed.
  • Karruseller fylder meget og indtager meget ofte en prominent placering som kunne udnyttes bedre.
  • Mange webredaktører har problemer med at finde gode, specifikke og konkrete billeder, som understøtter et budskab. Derfor er billedkarruseller ofte fyldt med ligegyldige stock-fotografier af pengesedler og landskaber.
  • Karruseller er ofte ekstra problematiske på mobiler.

Der er dog forskel på graden af dårligdom. På sites hvis rolle er at underholde og inspirere, og hvor det ikke er kritisk vigtigt at give overblik eller at sikre, at alle brugere ser indholdet i en karrusel, kan de give mening.

Det gælder for eksempel mediesites eller andre sites i kategorien “Aktualitet og oplevelse”, hvor karruseller kan bruges til at vise billedgallerier.

Samtidig kan nogle af de indbyggede problemer afhjælpes, hvis man følger nogle simple regler:

  • Brug ikke en karrusel som et bærende element med vigtigt indhold.
  • Vis hvor mange slides, karrusellen indeholder.
  • Vis overskrifterne fra de skjulte slides, så brugerne let kan få overblik.
  • Lad brugerne selv styre bladringen – undgå automatisk bladring.
  • Bladremuligheden skal være tydeligt designet – ikke små punkter under karrusellen.
  • Hvis karrusellen skifter automatisk: Stop autobladring så snart brugeren har interageret med karrusellen.
  • Hvis du viser overskrifterne på skjulte slides: Lad overskrifterne linke til indholdet i stedet for kun at virke som bladre-knapper i karrusellen.

Hvis du vælger at overtræde disse regler, gør du livet sværere for dine brugere.
Hvor stor betydning det har, kan man naturligvis kun afsløre gennem egentlige test – men spørgsmålet er, om karrusellen er så vigtig for dig, at det kan betale sig at teste, før du skrotter den?

Hvis du som kunde ikke udtrykkeligt frabeder dig karruseller, er der desværre en ret stor risiko for, at du ender med at få én. Karruseller er nemlig stadig populære hos designhuse og de findes i mange standarddesigns/themes til en lang række Content Management Systemer.
Bladrer man for eksempel igennem Drupal eller WordPress-hyldevare-themes, vil man se, at en pæn del af dem er opbygget med en stor billedkarrusel øverst på forsiden.

De billedkarruseller jeg beskriver herunder – som sagt de senest registrerede på lancering.dk – er designet af en lang række designere på flere forskellige tekniske platforme, så der er ingen grund til at hænge enkelte designere ud.
Men det kan være en generel undren, at brugervenlighed tilsyneladende stadig spiller en ret lille rolle i designprocessen i mange projekter.

Og så til de enkelte sites. Husk linksamlingen allernederst.

VejenKommune

VEJEN KOMMUNE 
Vi starter hos Vejen Kommune, som netop har søsat vejen.dk med en billedkarrusel som et bærende element på forsiden – dog ikke så stort, som vi skal se det på andre sites.
I skrivende stund roterer tre billeder forestillende to pas, en motorvej og Jels Søbad.
Motorvejen er uvist hvorfor en illustration til menupunktet “Erhvervsgrunde,” mens de to andre illustrationer mere giver sig selv.

Det gode

  • Billedkarrusellen dominerer ikke forsiden totalt.
  • Man kan se overskrifter på de skjulte slides hele tiden under karrusellen – det giver overblik.

Det dårlige

  • Billederne er ligegyldige.
  • Billederne udskiftes hurtigt – det giver et flimrende udtryk.
  • Det er svært for brugerne at gennemskue, hvor de skal klikke for at komme videre. Hvis de klikker på overskriften under karrusellen bladrer de i karrusellen – de bliver ikke ført til den pågældende side.
  • Inde i karrusellen virker den blå boks ikke som link – det gør kun billedet og linket i den blå boks.

Først og fremmest er placeringen af billedkarrusellen med til at forværre sitets grundlæggende problem: De vigtigste brugerærinder er gemt væk og kræver flere klik og større hovedbrud end nødvendigt.

coidk

CENTER FOR OFFENTLIG INNOVATION
På coi.dk dominerer billekarrusellen den øverste del af forsiden med blåtonede, generiske billeder, som flyver forbi i et ret højt tempo.

Det gode

  • Hvis ellers ikke man får det dårligt af at se på personernes hudfarve, er billederne med til at skabe en visuel identitet.
  • Det er muligt at se, hvor mange slides karrusellen indeholder (de tre små prikker nederst i midten af billedet).

Det dårlige

  • Man kan ikke se overskrifter fra skjulte slides.
  • Muligheden for at bladre er så subtil, at de færreste vil opdage den, ligesom de næppe vil opdage, at prikkerne indikerer antallet af slides.
  • Billederne skifter for hurtigt.
  • Toningen af billederne gør – muligvis – karrusellen endnu mere “banner-agtig”.

COIs karrusel er meget dårligt implementeret, og det kunne være interessant at foretage en A/B-test op mod en forside uden karrusel. Jeg er ikke i tvivl om, at de tre vigtige historier, som nu er gemt i karrusellen, ville få flere læsere, hvis de blev præsenteret på en anden måde.

Djøf

DJØF
Karrusellen på djoef.dk minder på mange måder om den vi lige har set på hos COI med samme indlysende svagheder.

Det gode

  • Det er muligt at se, hvor mange slides karrusellen indeholder.
  • Muligheden for at bladre er tydeligere indikeret end hos COI.

Det dårlige

  • Man kan ikke se overskrifter fra skjulte slides.
  • Karrusellen fortsætter med automatisk bladring – også når brugeren har forsøgt at overtage bladrekontrollen.
  • Billederne skifter for hurtigt.
  • Billederne er intetsigende.

djoef.dk ville med sikkerhed vinde på at eksponere indholdet i karrusellen på en anden måde.

BrøndbyKommune

BRØNDBY KOMMUNE
Brøndby Kommune har naturligvis også en billedkarrusel på sit nye site. Men en lidt drilsk én af slagsen. Umiddelbart forventer man at hele det store billed-felt øverst er en karrusel, men det er kun den lille boks inde i billedet, der snurrer.

Det gode

  • Man kan se overskrifter på skjulte slides under karrusellen.

Det dårlige

  • Billedfeltet i karrusellen er lille og kombineret med placeringen inde i et baggrundsbillede giver det et gnidret og rodet indtryk.
  • Brugerne skal ramme en lille blå pil inde i billedet eller et lille “Læs mere”-link under teksten for at komme videre til målet (indholdet) – selve billedet er ikke et link.

Brøndby Kommune bruger – som mange af sine kolleger – meget vigtig screen real estate på absolut ingenting. Der er ingen tvivl om, at den øverste del af forsiden kunne bruges mere hensigtsmæssigt.

DanskJernbaneForbund

DANSK JERNBANEFORBUND
Her skal man som bruger vente nogle sekunder før det går op for én, at den øverste del af forsiden faktisk er en karrusel.

Det gode

  • Som far til tre drenge har jeg en svaghed for billeder af tog.

Det dårlige

  • Ingen indikation af hvor mange slides karrusellen indeholder.
  • Et meget bredt og i praksis helt uhåndterligt billedformat.

Denne type af karruseller er den allerværste, fordi brugerne ikke har nogen ide om, at der er tale om en karrusel. Samtidig tilfører karrusellen sitet en kompleksitet, som står dårligt til den i øvrigt overskuelige og simple stil.

 

Naturstyrelsen

NATURSTYRELSEN
Vi begynder at kunne genkende mønstret og problemerne.

Det gode

  • Smukke dyrebilleder.
  • Man kan se hvor mange slides karrusellen indeholder og bladre i dem.

Det dårlige

  • Søsygeprovokerende.
  • Ingen overskrifter på de skjulte emner.
  • Alt for subtil bladrefunktion.
  • Brugerne skal klikke på teksten for at komme videre – hvorfor er billedet ikke et link?

Naturstyrelsen kan i modsætning til de fleste andre vise smukke billeder, som samtidig (nogle gange) er meningsfulde i konteksten.
Men selv når vi ser bort fra brugervenligheden, er det nu rarest at se på et stillestående motiv. (På dette tidspunkt i min analyse må jeg tilstå, at jeg er blevet en smule groggy af at se på de flimrende billeder).

BillundKommune

BILLUND KOMMUNE
Hvad er et kommunalt site uden et roterende billede af to pas?

Det gode

  • I skrivende stund er to af de roterende billeder konkrete illustrationer med “rigtige mennesker”.
  • Man kan se, hvor mange slides karrusellen indeholder og bladre i dem.

Det dårlige

  • Karrusellen er meget dominerende og optager den vigtigste plads på sitet. Plads som kunne have været brugt til at løse mange brugeres problemer.
  • Placeringen af tekstfeltet og bladreikonerne i en boks midt på billederne betyder, at den vigtigste del af billedet er skjult.
  • Overskrifter på skjulte slides vises ikke.

Ergoterapeutforeningen

ERGOTERAPEUTFORENINGEN
Egentlig ikke meget nyt at sige her – de samme problemstillinger, som vi har har set på de andre sites.

DanskPsykologForening

DANSK PYSKOLOG FORENING
Dansk Psykolog Forening har et animeret felt på toppen af forsiden, som fungerer på samme måde som en billedkarrusel og medfører de samme problemer. Animationen giver måske endda denne “karrusel” et endnu mere udpræget banner-præg end de øvrige, vi har set på.

I skrivende stund kæmper to historier om pladsen i karrusellen – det vil naturligvis være værre hvis flere historier bliver indsat, så den enkelte bliver eksponeret i kortere tid.

 

DestinationBornholm

DESTINATION BORNHOLM
Hvis jeg skal tilgive billedgalleriet på ét af de 11 sites, jeg har set nærmere på, må det være på lejrskole.bornholm.nu.

Når karruseller som her ikke bruges til vigtigt eller måske endda kritisk indhold, men til at give inspiration kan de (måske) give mening.
Men karrusellen har naturligvis en række af de samme problemer, som jeg har omtalt en hel del gange efterhånden. Derfor skal beslutningen tages med åbne øjne – og gerne efter at man har testet karrusel op mod andre løsninger.

RoskildeKommune

ROSKILDE KOMMUNE
Roskilde er rosinen i denne gennemgang. Og som de eneste har Roskilde Kommune valgt at placere karrusellen under det vigtigste indhold.

Det gode

  • Karrusellen dominerer ikke toppen af forsiden – så den kommer ikke i vejen for de fleste brugeres ærinder på sitet.
  • Man får et fint overblik over alle slides i karrusellen med thumbnails og overskrifter.

Det dårlige

  • Med ikke bare ét, men to bokse henover billederne må det være svært for redaktørerne at finde egnede billeder.
  • Billederne er ikke links.
  • Når man klikker på en overskrift i oversigten, bladrer man bare i karrusellen hen til en slide, som fortæller præcis det samme, som man kan se på oversigten. Et klik burde naturligvis føre én til indholdet på undersiden i stedet.

Links – viden om karruseller

http://shouldiuseacarousel.com/
I virkeligheden behøver du ikke de andre link. Tjek dette lille site fra usability-ekspert Jared Smith – så vil du forstå, hvorfor karruseller sjældent er løsningen.

Brugere har svært ved at få øje på indholdet i selv gigantiske karruseller: http://www.nngroup.com/articles/auto-forwarding/

http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad – fin, illustrativ gennemgang af problemerne.

http://bradfrostweb.com/blog/post/carousels/ – endnu en fin gennemgang med fokus på konkrete implementeringsproblemer.

http://www.widerfunnel.com/conversion-rate-optimization/rotating-offers-the-scourge-of-home-page-design – også et besøg værd.

Faktisk er der masser af indlæg rundt om på nettet, som udstiller problemerne med karruseller: https://www.google.dk/search?q=carousels+usability  – men du behøver ikke læse dem, for konklusionen er ret entydig:

Drop nu de billedkarruseller!

This entry was posted in Brugervenlighed. Bookmark the permalink.

One Response to "Brugervenlighed 101: Drop nu de billedkarruseller"