Skip to main content

Brukerinnsikt om image hotspots

Elever er ofte positive til H5P-typen image hotspots. De forstår designet og klikker seg inn på punktene. De vil ikke at det skal være for mye innhold bak klikkpunktene. Velg en god kontrastfarge til klikkpunktene, slik at de skiller seg fra fargene i bakgrunnsbildet.

Image hotspots og universell utforming

  • Fokusrekkefølgen på klikkpunktene må bli riktig. Legg inn klikkpunktene i riktig rekkefølge og test ut med tastatur.
  • Tekst skal være kodet som tekst.
  • Gi hvert "item" (klikkpunkt) et logisk navn, slik at de som bruker skjermleser får lest opp riktig tittel. 
  • Eventuelle bilder skal ha alt-tekst.
  • For å gjøre siden lettere å bruke for de som bruker skjermleser bør du introdusere image hotspots med en tittel (H2/H3) på siden den ligger.
  • Hvis det er et mer komplekst bilde/modeller eller lignende kan du lage tekstalternativ under. Tekstalternativet kan ligge i en ekspanderbar boks eller du kan skrive/utdype i teksten på siden.

Les mer:Uu: H5P (generelt)

Innsikt fra brukertester

  • Elevene liker godt image hotspots: –Fint å kunne klikke på det jeg lurer på, heller klikking enn at det bare hadde vært et bilde på sida med streker ut til ei liste med forklaringer. 

  • Image hotspots underveis på en fagside kan gi elevene en lesepause, aktivisere dem, og gjøre at de tåler å lese mer etterpå.
  • Elever ønsker ikke at det skal være så mye tekst bak klikkpunktene.

  • Elever setter pris på bilder, video og H5P i fagartikler.

  • Modeller med tekst kan noen ganger bli enklere å forstå dersom ulike elementer er klikkbare og kort forklart. Her anbefaler vi at hovedtrekk om modellen også blir skrevet med tekst på fagsiden.

Brukertestrapporter

Eksempler med innholdstypen

NDLA: Grønn vekst
Denne siden ble testet, og hadde opprinnelig en modell og en oversikt over de ulike stegene i den grønne trappa under modellen. Elevene måtte skrolle en del mellom illustrasjonen, forklaringen av stegene og ned til oppgavene. Etter testen ble det laget en image hotspots der de ulike stegene ble forklart på selve bildet med klikkpunkter. Modellene fikk en kort forklaring i teksten og de ulike stegene ble også lagt inn i en ekspanderende boks for å gjøre det lettere for brukere med skjermleser å få punktene samlet, og unngå så mange klikk.

NDLA: Merking av lam
På siden finner du et bilde med fire klikkpunkter. Her får man en forklaring av de ulike kodene på et øremerke. Hvert "item" har en egen tittel slik at brukeren får opp tittelen før de klikker. Det er ellers korte og informative tekster som forklarer informasjonen på bildet.

Relatert innhold

Skrevet av Stina Grolid

Back to top