Kompleks interaksjon i digitale læremidler

Publisert 24.06.26

Suzanne Sannes - Universell utforming AS

Innledning

Elever med ulike forutsetninger kan møte utfordringer i digitale læringsressurser. En viktig årsak er det vi omtaler som komplekse interaksjoner.

Kompleks interaksjon oppstår når en digital oppgave krever flere handlinger som må utføres i riktig rekkefølge og med en viss presisjon. Det kan for eksempel innebære å kombinere ulike måter å gi input på, navigere gjennom flere steg, eller justere variabler samtidig som man tolker tilbakemeldinger underveis.

Et typisk eksempel er oppgaver der elever skal plassere elementer ved å dra og slippe dem.

Slike oppgaver er ofte utformet for å etterligne konkrete situasjoner i den fysiske verden, og stiller derfor krav til presisjon, koordinasjon, rekkefølge og sammenhengsforståelse. En digital oppgave som etterligner det praktiske fungerer godt for mange elever, men er ikke alltid like forenlig med bruk av hjelpeteknologi.

Når selve interaksjonen blir krevende, flyttes oppmerksomheten lett bort fra det faglige innholdet og over på håndteringen av grensesnittet. Dette kan påvirke konsentrasjon, mestringsfølelse og læringsutbytte.

I denne artikkelen ser vi nærmere på hva som gjør digitale interaksjoner komplekse, hvorfor de kan oppleves som utfordrende, og hva som kan gjøres for å redusere kompleksiteten. Fremstillingen bygger på erfaringer fra prosjektet «Kreativ universell utforming», ledet av Universell Utforming AS, der vi testet og analyserte en læringsressurs i matematikk for grunnskolen.

Det er samtidig viktig å være oppmerksom på at en interaksjon som lar seg gjennomføre rent teknisk, ikke nødvendigvis er den mest hensiktsmessige. I noen tilfeller kan kravene til gjennomføring bli så store at de overskygger det faglige innholdet. Da bør alternative løsninger vurderes.

Oppgavetyper og kompleksitet

Mange utfordringer går igjen på tvers av oppgaver, men enkelte interaksjonstyper stiller særlig høye krav.

Dra-og-slipp

Dra-og-slipp er en vanlig interaksjonstype i digitale læringsressurser, men kan romme flere lag av kompleksitet. Selv om den ofte oppleves som enkel, består den av en serie handlinger som må utføres i riktig rekkefølge og med tilstrekkelig presisjon.

Typisk innebærer oppgaven å:

• velge et element
• holde det aktivt
• dra det i ønsket retning
• slippe det i riktig område

Hele sekvensen må gjennomføres som én sammenhengende bevegelse. Små avvik, som å slippe litt for tidlig eller utenfor målområdet, kan føre til at elementet spretter tilbake og at handlingen må gjentas.

Slike oppgaver finnes i mange fag, for eksempel når elever skal:

• sette sammen begreper
• plassere elementer i kategorier
• bygge opp strukturer eller uttrykk

Utfordringer ved dra-og-slipp

Motorisk kompleksitet

Dra-og-slipp stiller større krav til finmotorikk enn mange andre interaksjonstyper. Der en flervalgsoppgave kan løses med ett klikk, krever dra-og-slipp en kontrollert og sammenhengende bevegelse.

For å lykkes må eleven blant annet:

• styre retning og tempo samtidig
• koordinere bevegelser horisontalt og vertikalt
• holde markøren eller fingeren nede uten å slippe
• plassere elementet presist i slippsonen

Utfordringene kan forsterkes på små skjermer, der fingeren dekker deler av innholdet. Høy forstørrelse kan også gjøre målområdene trange og vanskeligere å treffe. Kompleksiteten øker ytterligere dersom elementet må flyttes langt, særlig hvis det krever scrolling.

For elever med nedsatt finmotorikk kan dette være spesielt krevende.

Kognitiv belastning

Dra-og-slipp stiller også krav til konsentrasjon og forståelse av oppgavens struktur. Underveis må eleven holde oversikt over flere ting samtidig.

Eleven må blant annet:

• finne riktig element blant flere alternativer
• holde fokus på målområdet gjennom hele bevegelsen
• forstå hva som skjer når elementet plasseres riktig eller feil

Dette innebærer at eleven hele tiden må veksle mellom det faglige innholdet og selve interaksjonen.

For elever med konsentrasjons- eller lærevansker kan dette være spesielt krevende. Forutsigbarhet er da avgjørende. Elementer med samme funksjon bør utformes likt, og det må være tydelig hva som kan flyttes, hvor det skal plasseres, og hva som er en del av oppgaven.

Uventede endringer – for eksempel automatisk innsending av svar – kan bryte med forventninger og skape usikkerhet. Når handlinger utløser endringer uten at eleven rekker å oppfatte hva som skjer, øker risikoen for misforståelser.

I henhold til WCAG bør ikke brukerhandlinger føre til uventede kontekstendringer uten forvarsel (3.2.2 Inndata). Samtidig må tilbakemeldinger formidles på en måte som gjør det mulig å oppfatte hva som har skjedd, også med hjelpemiddelteknologi (4.1.3 Statusbeskjeder).

Muligheten til å bekrefte eller angre en handling er derfor viktig.

Visuelle krav

Dra-og-slipp forutsetter tydelig visuell informasjon for å fungere godt.

Det må være lett å oppfatte:

• hvilke elementer som kan flyttes
• hvor de kan plasseres
• om en handling lykkes eller ikke

Hvis dette ikke er tydelig, øker risikoen for misforståelser og feil. Vanlige utfordringer er:

• lav kontrast
• små elementer
• visuell støy
• utydelige skiller

For elever med nedsatt syn eller konsentrasjonsutfordringer kan selv små uklarheter skape usikkerhet og gjøre oppgaven lite intuitiv.

Tilgjengelighetsutfordringer

Tastatur og alternative betjeningsmåter

Dra-og-slipp er tett knyttet til mus og berøring.

For elever som benytter tastatur, skjermleser, bryterstyring eller stemmestyring, kan muse- eller touchbevegelser være vanskelige eller umulige å gjennomføre. Dersom en oppgave kun kan løses med slike dra-bevegelser, og ikke lar seg gjennomføre med alternative input-bevegelser via hjelpemiddelteknologi, vil den i praksis være utilgjengelig for deler av brukergruppen.

WCAG stiller krav til tastaturnavigasjon (2.1.1 Tastatur og 2.1.2 Ingen tastaturfelle). All funksjonalitet i det digitale læremiddelet skal derfor kunne brukes med tastatur alene.

WCAG 2.2 stiller i tillegg krav om at det skal finnes alternativer til dra-bevegelser, med mindre selve dra-bevegelsen er essensiell for det faglige innholdet (2.5.7 Dragging Movements (AA)). Dette er ikke lovpålagte krav i dag, men sterke anbefalinger.

Navn, roller og egenskaper

Skjermlesere formidler bare det som er kodet. For at de skal kunne formidle det som skjer i en oppgave må alle interaktive elementer ha:

• tydelige navn
• korrekt rolle
• meningsfulle egenskaper

Dette bygger på WCAG-suksesskriteriet 4.1.2 Navn, rolle, verdi.

I dra-og-slipp-oppgaver er dette ekstra viktig, fordi visuelle ledetråder som farge, plassering, størrelse og gruppering ellers går tapt. Det er viktig at ledetrådene også er tilgjengelige for skjermleserbrukere, uten at de røper svaret eller forstyrrer det pedagogiske målet med oppgaven.

Hvis elementer ikke blir gitt tilgjengelige navn, vil skjermleseren for eksempel kun lese rollen til elementet, eksempelvis «knapp». For en skjermleserbruker blir det dermed umulig å vite hva knappen faktisk gjør. Tilsvarende må ikke-semantiske elementer få tildelt roller, slik at hjelpemiddelteknologi kan presentere elementets funksjon.

I tillegg vil svaralternativer og slippsoner kunne presenteres likt, dersom det ikke gjøres konkrete skiller mellom dem.

Det kan da bli uklart om hva som er:

• oppgaven
• svaralternativer
• flyttbare elementer
• målområder

Tilbakemeldinger og tilstandsendringer

I en dra-og-slipp-oppgave skjer det flere endringer underveis. For seende elever formidles dette visuelt gjennom bevegelse, markering og endringer i utseende. For elever som bruker skjermleser, må denne informasjonen formidles eksplisitt.

Uten tydelige tilbakemeldinger kan det bli uklart:

• om et element er valgt
• hvor det befinner seg
• om handlingen er gjennomført

Når slike statusendringer ikke formidles tydelig, må eleven i større grad gjette seg frem. Dette kan øke den kognitive belastningen og gjøre oppgaven unødvendig vanskelig.

Strukturelle utfordringer

Uklare slippsoner

Slippsoner er områdene der elementer skal plasseres for å løse oppgaven.

Hvis slippsoner ikke er tydelig definert, kan det bli vanskelig å forstå oppgavens struktur. Dette gjelder både visuelt og for skjermlesere.

Lineær vs. romlig navigasjon

Mange dra-og-slipp-oppgaver er organisert romlig, der elementer visuelt er plassert spredt rundt på skjermen. Skjermlesere presenterer derimot innhold lineært, i den rekkefølgen det ligger i koden, og ett element om gangen.

For seende elever gir den romlige organiseringen et umiddelbart overblikk. For elever som bruker skjermleser eller forstørrelse, må strukturen i stedet forstås steg for steg, uten tilgang til en visuell helhet.

Dette gjør det krevende å:

• forstå hvordan elementer er plassert i forhold til hverandre
• forstå hvordan elementer henger sammen
• identifisere hva som inngår i selve oppgaven
• skille mellom svaralternativer, uttrykk og målområder
• navigere effektivt mellom ulike deler av oppgaven

Når informasjonen er organisert romlig, men presenteres lineært, blir det dermed vanskelig å danne seg et helhetlig bilde av oppgaven. Elevene må ofte gå gjennom innholdet flere ganger for å forstå strukturen.

Automatiske endringer

I noen læringsressurser justeres oppgavens vanskelighetsgrad automatisk. Når slike endringer skjer uten tydelig varsling, kan det skape usikkerhet om endringen skyldes at innholdet er blitt mer krevende, eller om det skyldes selve interaksjonen. Elever kan dermed oppleve svekket kontroll og mestringsfølelse.

Kombinerte interaksjoner

Noen oppgaver krever at elementer kombineres for å danne nye. I en multiplikasjonsoppgave kan det for eksempel innebære å slå sammen to tall for å danne et nytt som brukes videre i oppgaven. For å løse oppgaven må eleven både forstå hvilket innhold som mangler, og hvilke elementer som må kombineres for å komme frem til riktig resultat.

Dette tilfører et ekstra lag av kompleksitet fordi:

• innholdet på skjermen endres underveis
• eleven må forstå hvordan det nye elementet henger sammen med de opprinnelige

For elever som bruker skjermleser, er denne informasjonen ikke tilgjengelig om den ikke formidles eksplisitt.

I noen tilfeller kan også elementer som ikke lenger er synlige på skjermen, fortsatt bli lest opp dersom de ikke er fjernet eller skjult programmatisk for hjelpemiddelteknologi. Skjermleseren kan da formidle informasjon som ikke samsvarer med det visuelle grensesnittet, noe som gir en ulogisk og forvirrende opplevelse av oppgaven.

Når sammenhengen mellom elementene ikke er tydelig, må eleven i større grad gjette seg frem.

Anbefalinger for utforming av dra-og-slipp-oppgaver

For å redusere kompleksitet og gjøre oppgaver mer tilgjengelige, bør man arbeide systematisk med interaksjon, struktur og formidling.

Det er viktig å understreke at målet ikke er å unngå bestemte interaksjonstyper, men å bruke dem på en måte som støtter læring. I noen tilfeller kan det også være hensiktsmessig å tilby alternative måter å løse oppgaven på.

Motorisk og visuell tilrettelegging

• Gjør slippsoner store nok
  Det bør være rom for «feiltreff», altså at slippsonen er større enn målområdet, slik at eleven ikke må treffe helt nøyaktig for å lykkes. Alternativt kan selve målområdet også gjøres større. Dette gjør oppgaven mindre sårbar for unøyaktighet. Dette er beskrevet i WCAG 2.2, 2.5.8
• La elementer «snappe» på plass
  Elementer bør falle på plass dersom de slippes i nærheten av riktig område. Små avvik i bevegelsen fører da ikke til at handlingen må gjentas, og den motoriske terskelen senkes uten at det faglige innholdet endres.
• Sørg for tydelig kontrast
  Det må være lett å skille mellom hva som kan flyttes og hvor det kan plasseres. God kontrast gjør det enklere å orientere seg og reduserer risikoen for feil.
• Gjør det tydelig hva som kan flyttes
  Flyttbare elementer bør markeres konsekvent, for eksempel med ikon, skygge, ramme eller en markør som endrer form ved hover eller berøring. Dette gjør det lettere å forstå oppgaven uten at eleven må prøve seg frem.

I tillegg kan det være hensiktsmessig å tilby alternative måter å utføre handlingen på, for eksempel ved å velge og plassere med klikk i stedet for dra-bevegelser – særlig i oppgaver som krever høy presisjon.

Struktur og forutsigbarhet

• Bruk konsistente løsninger
  Like funksjoner bør se og oppføre seg likt gjennom hele oppgaven.
• Varsle endringer tydelig
  Hvis noe skjer automatisk, bør det forklares på forhånd eller synliggjøres når det skjer, slik at eleven forstår sammenhengen mellom handling og resultat.
• Unngå uventede overganger
  For eksempel at oppgaven plutselig går videre uten at eleven selv bekrefter det. Slike overganger kan skape usikkerhet og gjøre oppgaven vanskeligere å forstå.
• Gi eleven kontroll over handlinger
  Handlinger som å sende inn svar bør skje først når eleven selv bekrefter det, for eksempel gjennom en «Avgi svar»-knapp.
• Tilby angre-funksjon
  Det bør være mulig å rette opp feil uten å måtte starte på nytt. Når det er trygt å prøve og feile, senkes terskelen for å utforske oppgaven.

Tilgjengelighet

• Sørg for tastaturnavigasjon
  Oppgaven bør kunne gjennomføres uten mus eller berøring. Navigasjon og aktivering må fungere med tastatur alene.
• Tilby alternativer til dra-bevegelser
  For eksempel gjennom knapper, valgmenyer eller «velg og plasser»-løsninger. Dette gjør det mulig å løse oppgaven uten krav til presis motorikk.
• Gi alle elementer tydelige navn og roller
  Interaktive elementer må ha navn som beskriver hva de er og hvordan de brukes. For eksempel «tallkort 3 – flyttbart» eller «slippsone – svarfelt for første faktor».

Dette gjør det mulig for skjermlesere å formidle hva som kan flyttes og hvor det kan plasseres, på en presis og forståelig måte, og sikrer lik deltakelse.

Tilbakemelding

Oppgaven må gi tydelig respons på det eleven gjør, både underveis og når handlinger fullføres.

• Gi tydelig respons på handlinger
  Når et element velges eller flyttes, bør det være tydelig at noe har skjedd. For seende elever kan dette vises visuelt, som markering, animasjon eller farge, mens for skjermleserbrukere må dette formidles eksplisitt.
• Formidle viktige endringer på en hensiktsmessig måte
  Det må være klart hva som har skjedd når et element flyttes og plasseres. For skjermleserbrukere bør sentrale endringer formidles tydelig, gjerne med informasjon om plassering. Samtidig bør unødvendig detaljering unngås. Tilbakemeldingene bør være korte, relevante og målrettede.
• Vis resultatet av handlingen tydelig
  Det bør komme raskt og tydelig tilbakemelding om en handling er riktig eller ikke – både visuelt og for skjermleser.

Jo tydeligere oppgaven «svarer» på det eleven gjør, desto lettere blir det å forstå sammenhengen mellom handling og resultat.

Struktur og navigasjon

Oppgavens oppbygning må være forståelig, også uten et visuelt overblikk.

• Gi slippsoner beskrivende navn
  Navnene bør forklare hva som forventes plassert der, ikke bare hva elementet er.

• Sørg for logisk og forutsigbar navigasjon
  Rekkefølgen mellom elementer bør gi mening ved tastatur- og skjermlesernavigasjon. Tab-rekkefølgen bør følge en naturlig progresjon. Elementer som hører sammen bør grupperes i koden, for eksempel med overskrifter, seksjoner eller landmarks. Ved behov kan aria-labels gi ekstra kontekst.

• Gi en kort introduksjon til oppgaven ved behov
  I mer komplekse oppgaver kan en kort forklaring hjelpe eleven å danne seg et mentalt bilde før oppstart. Dette kan for eksempel være en kort tekst, en utvidbar seksjon, eller en knapp som åpner en forklaring i et eget vindu.

• Vurder alternative måter å gi oversikt og løse oppgaven på
  Dersom oppgaven stiller høye krav til oversikt eller presisjon, bør man vurdere mer tilgjengelige alternativer. Målet er at flest mulig elever får vist sin faglige forståelse.

Håndtering av kompleksitet

Oppgaver som endrer seg underveis, stiller ekstra krav til tydelighet.

• Forklar nye elementer og kombinasjoner tydelig
  Når elementer kombineres, må det være klart hva som har skjedd og hvorfor. Nye elementer bør få tilgjengelighetsnavn som beskriver både resultat og opprinnelse, for eksempel «6 (kombinasjon av 2 og 3)».
• Fjern irrelevante elementer korrekt
  Elementer som ikke lenger er i bruk, må skjules programmatisk – ikke bare visuelt. Ellers kan skjermlesere formidle informasjon som ikke samsvarer med det som vises, noe som skaper forvirring.
• Gi mulighet til å angre eller løse opp handlinger
  Det bør være enkelt å angre eller løse opp kombinasjoner. Funksjonen må være tilgjengelig uten krav til presis musebruk eller små klikkområder.

Oppsummering

Komplekse interaksjoner i digitale læremidler kan gjøre oppgaver mer krevende enn nødvendig – særlig for elever med ulike forutsetninger. Når oppgaver krever flere handlinger i riktig rekkefølge og med høy presisjon, kan oppmerksomheten flyttes fra det faglige innholdet til selve grensesnittet.

Dra-og-slipp er et tydelig eksempel, der kompleksiteten ofte oppstår i samspillet mellom motoriske, kognitive og visuelle krav. Samtidig gjelder dette på tvers av fag og oppgavetyper: Selv enkle oppgaver kan bli utfordrende når flere krav virker sammen.

Manglende tilrettelegging for tastatur, skjermleser og andre hjelpemidler kan dessuten gjøre oppgaver utilgjengelige for noen elever. Samtidig viser artikkelen at mye av kompleksiteten kan reduseres med relativt enkle grep, som tydeligere struktur, bedre tilbakemeldinger og alternative måter å løse oppgaver på.

Det sentrale er å sikre at interaksjonen ikke blir en unødvendig hindring for læring. At en oppgave lar seg gjennomføre teknisk er ikke nok – den må også være forståelig, hensiktsmessig og tilgjengelig.

Universell utforming handler nettopp om dette: å utvikle løsninger som tar høyde for variasjon og fungerer for flest mulig. I praksis kan dette oppsummeres i ett spørsmål:

Er det oppgaven – eller interaksjonen – som er vanskelig?