Inspirasjon

Nettsidetilgjengelighet: Øk salget med inkluderende design

Jesper Dalgas Zachariassen
28 februar 2018

 

"Ikke sett kundens tålmodighet på prøve."

Jeg tipper alle som eier en nettbutikk er enige i dette.

I dag finnes det en overflod av nettbutikker, og en komplisert eller forvirrende nettside fører til at de besøkende forlater siden umiddelbart. Vi har tidligere skrevet en artikkel om fenomenet forlatte handlekurver – klikk her for å lese den.

Opplevelsen av nettsiden er alfa og omega for et salg - og om nettsiden er vanskelig å bruke, risikerer du å faktisk miste mange kunder.

Man snakker ofte om konverteringsrate, tilpassing til ulike enheter og lignende når man snakker om netthandel. Dette er ikke noe spesielt nytt, og jeg vil tro du allerede har brukt en del tid på å sjekke at nettsiden din fungerer i ulike nettlesere og på ulike enheter. 

Men det er én ting til som ikke like alltid får like mye fokus;

Fungerer den for ulike mennesker?

I denne artikkelen vil jeg gå nærmere inn på hva som menes med tilgjengelighet når man snakker om nettsider. Jeg vil også presentere deg for åtte grunnleggende tips til hvordan du kan få en inkluderende nettside.

Inkluderende design

Nettsidens tilgjengelighet (eller inkluderende design) er en viktig del av brukeropplevelsen på nett.

La oss bruke en analogi for å illustrere hvordan dette kan påvirke kunden din:

Tenk deg at du eier et varehus midt i London. Det er ingen parkeringsplasser, og inngangsdøren er tung å få opp og smal å komme seg gjennom, du har en dørterskel som halvparten av kundene snubler i, og ikke nok med det - skal kunden til noen andre etasjer, må de benytte seg av en bratt vindeltrapp som er gjemt bak en dør innerst i lokalet. Hyllene er rotete og varene tilfeldig plassert og dessuten vanskelige å få tak i uten en stige.

Et slikt oppsett ville jo gitt de aller fleste en ganske katastrofal kundeopplevelse.

Tenk deg så at butikken ved siden av har samme vareutvalg som din. Den har kundeparkering, store, automatiske skyvedører uten terskel, flere heiser like ved inngangen, ryddige avdelinger og man kan få tak i alle varer uten hjelp. I denne butikken koster imidlertid produktene litt mer enn hos deg.

Hvilken butikk tror du kundene ville velge?

Ikke bare er den andre butikken mer tilgjengelig - den gir alle en bedre brukeropplevelse.

På nett får brukeropplevelse og funksjonalitet på nett ofte langt mindre oppmerksomhet enn handleopplevelsen i en tradisjonell butikk. Og her er hvorfor dette er farlig:

Ifølge WHO har omkring 15 % av verdens befolkning funksjonsnedsettelser, inklusive de ca. 8 % av den samlede befolkningen som er synshemmet eller blinde.

Vil du utelukke 15 % av befolkningen fra nettbutikken din? Og kanskje enda flere, fordi du gir dem en dårlig opplevelse?

Hittil har vi ikke engang vært inne på mennesker med midlertidige eller situasjonsbetingede funksjonsnedsettelser. Du kan sikkert tenke deg hvor vanskelig det er å surfe på nettet med brukket arm (midlertidig), mens du holder en baby på armen eller sitter ute og solen blender skjermen på smarttelefonen og gjør det vanskelig å se nettsider med for dårlig kontrast (situasjonsbetinget)?

Utilgjengelige nettsider kan gjøre det vanskelig for en rekke ulike kunder. 

Et godt design er ingen garanti for god brukervennlighet. Men om man snur på det; Godt, men utilgjengelig design finnes ikke.

La oss nå se nærmere på hvordan du kan gjøre nettsiden tilgjengelig og bruke inkluderende design for å øke netthandelen.

1. Sørg for at siden er responsiv

Responsiv betyr at nettsiden automatisk skaleres til alle skjermstørrelser, og gir en optimal opplevelse uansett om kunden bruker smarttelefon, nettbrett eller PC.

For eksempel ser vi at mobilbetaling blir stadig mer vanlig (en studie viser at mobilkjøp utgjør en tredjedel av all netthandel i USA) og er noe du burde ha lagt til rette for allerede.

En fordel man ofte glemmer med en responsiv nettside, er at den skaleres riktig også når man zoomer. Dette er en stor hjelp for mennesker med dårlig syn.

Har du ikke allerede en responsiv side, kan du vise utviklerne denne praktiske guiden.

Ellers finnes det også massevis av nyttige ressurser på nettet.

2. Støtt flere typer enheter

Mange nettsider støtter bare navigering med mus. Dette skaper problemer for brukere med berøringsskjerm, brukere med begrensninger (f.eks. blinde), og brukere som foretrekker å bruke bare tastaturet.

Menyer som aktiveres med pekefølsom markering er et typisk eksempel på begrenset støtte. Denne funksjonen er ikke tilgjengelig dersom du bruker berøringsskjerm eller bare tastatur.

Dette gjelder ikke bare når man bruker mus; det blir også vanskelig for mennesker med fysiske eller motoriske begrensninger å navigere på siden.

Et annet eksempel på begrenset støtte er interaktive elementer, f.eks. lenker, inntastingsfelt og knapper uten synlig fokustilstand når man navigerer med tabulator.

Prøv å navigere gjennom hele nettstedet ditt - kun med tastatur, mus eller berøringsplate.

Dersom en av dem ikke fungerer overalt eller er vanskelig å bruke alene, bør du ta grep på siden din.

3. Gjør det enkelt

Hvis du spør en webutvikler om hva som er viktigst med webdesign, vil du mest sannsynlig få følgende svar:

Unngå at folk må tenke!

Ironisk nok er det imidlertid lettere å komplisere noe enn å forenkle det.

De aller fleste av oss har størst glede av en nettside som er enkel, konsis og intuitiv. I motsatt fall kan det være ekstremt distraherende og lett å klikke seg ut.

Det er mange veier til en enkel og intuitiv nettside. For eksempel kan du gjøre følgende:

       Støtt ikoner med tekst.

       Marker tydelig når en del av teksten er en lenke.

       Unngå skjemaer i størst mulig grad, og gjør dem så enkle som mulig hvis de er nødvendige.

       Bruk mellomrom på en smart måte for å skape kontekst.

       Unngå for mye tekst og bruk enkle setninger på lettforståelig norsk.

Sørg dessuten for å være konsekvent i alt du gjør.

4. Best mulige leseforhold

En uheldig trend som ofte forekommer i våre dager, er bruken av dårlig fargekontrast. Dette kan for eksempel skje ved at man demper fargene på deler av nettsiden for å fremheve andre deler av siden.

Uansett grunn – lav kontrast på deler av siden skaper problemer for mennesker med nedsatt syn. Alle har ikke perfekt syn eller bruker en IPS/AMOLED retinaskjerm innendørs.

Nettsiden din ser dermed kanskje bra ut i noen situasjoner, men du har ingen garanti for at innholdet alltid kommer frem for brukerens øyne.

Du bør også unngå å bruke kun farge for å formidle informasjon; eksempelvis ved at en bestemt farge viser om brukeren har gjort noe riktig eller ikke. Det er ikke uvanlig å være fargeblind, og det finnes ingen standard for hva farger betyr for ulike mennesker.

Det viktigste er å teste med ulike oppsett i ulike kontekster, eller i det minste gjøre det mulig å aktivere høy kontrast.

Hvis du kunne tenke deg litt hjelp på dette, kan jeg tipse om dette nyttige verktøyet fra Lea Verou for å beregne kontrastforholdet mellom fargene. Bruk den gjerne til å verifisere innholdet på nettsiden.

Her er en god tommelfingerregel:

Et godt design bør aldri gå på bekostning av god lesbarhet. Disse fungerer definitivt best side om side.

5. Alltid vis et tekstalternativ

Når du presenterer innhold uten tekst, f.eks. et bilde, en video eller et diagram, bør det alltid finnes et tekstalternativ. Dette er ikke bare til god hjelp for synshemmede, men også for alle andre når innholdet ikke vises på riktig måte.

I videoer bør du på tilsvarende måte alltid bruke undertekster. På den måten blir videoen også forståelig for døve eller hørselshemmede, for brukere som har et annet morsmål og kanskje har problemer med å forstå innholdet - eller bare de som ikke har skrudd på lyden.

6.  Test og optimaliser for skjermleser

Mange som er blinde eller har nedsatt syn bruker skjermlesere i tillegg til, eller som erstatning for en skjerm.

Test nettstedet ditt med avslått skjerm og et par skjermlesere. Alle skjermlesere oppfører seg nemlig forskjellig i ulike nettlesere, så det er viktig at du i det minste støtter de vanligste skjermleserne. Du kan teste ut NVDA og JAWS for Windows, ChromeVox for Chrome og Chrome OS, Talkback for Android og VoiceOver for macOS og iOS m.m.

WAI har utarbeidet retningslinjer for hvordan nettsider og applikasjoner kan utstyres med funksjoner som bedrer tilgjengeligheten. Dette initiativet kalles WAI-ARIA (Accessible Rich Internet Applications) eller bare ARIA.

Du finner en oversikt og flere tutorials for ARIA-funksjonene her, eller du kan besøke den offisielle referansesiden her.

7. Bruk semantisk markering

En skjermleser vil nemlig navigere annerledes på en nettside enn når man ser siden via en skjerm.

Ved å bruke de riktige HTML-kodene, f.eks. <nav> for navigasjonselementer, <header> for headerinnhold og passende overskrifter, er det enklere for brukere av skjermlesere å hoppe videre i innholdet, slik at de ikke må lytte til alt innhold på en side før de kommer til det de er interessert i.

Et godt tips er å rydde opp i HTML-kodene mens du legger til rette for søkeordoptimalisering. Du finner en nyttig innføring her.

8. Sørg for at teamet ditt forstår betydningen av tilgjengelighet

Å optimalisere tilgjengelighete på nettsiden din kan virke som en dyr affære, men som utvikler kan jeg forsikre deg om at det ikke er her du bør spare inn.

Utfordringen ligger ofte i å få de andre på arbeidsplassen din til å forstå at dette er noe som faktisk bør prioriteres, hvordan det spiller inn på salg og konvertering og generelt å fremme en mer empatisk og inkluderende holdning i bedriften.

Statistikken over hvor mange mennesker som har funksjonsnedsettelser burde tale for seg selv, men som jeg nevnte tidligere er brukervennlig design noe alle vil ha glede av.

Det britiske innenriksdepartementet har faktisk startet et spennende initiativ med å utarbeide plakater som forteller hvordan man lager en tilgjengelig nettside. Du finner alle plakatene her.

En av plakatene fra initiativet.

Jeg bestemte meg for å teste ut dette selv, og hang plakatene opp på kontoret slik at alle kunne se dem. Dette hadde faktisk veldig god effekt, og det fikk folk til å innse viktigheten av inkluderende design samtidig som kollegaene mine ble mer interesserte i hva dette innebar.

Prøv selv! 

Det koster deg bare litt blekk og papir - og de finnes på flere språk.

En sterk kjede har ingen svake ledd

La oss si at nettbutikken din er i høyeste grad tilgjengelig og at inkluderende design gjennomsyrer alt du gjør. Du har sannsynligvis installert et par plugins, eller integrert andre tjenester.

Dersom nå noen av disse eksterne leddene skulle svikte, kan det ødelegge for hele kjeden du har satt opp. For at alt ikke skal være forgjeves, er du dermed nødt til å forsikre deg om at alle ledd lever opp til dine standarder for tilgjengelighet.

Dette er dessverre et ganske vanlig problem, ettersom brukervennlighet og tilgjengelighet ikke alltid får så mye oppmerksomhet innen kommersiell teknologi.

Men - du trodde vel ikke vi skulle fortelle deg alt dette uten å komme med den perfekte løsningen, gjorde du?

Vi har selvsagt sørget for at vår løsning for nettbetaling, Bambora Checkout, er både brukervennlig og tilgjengelig for alle.

Helt enkelt fordi den*:

  • Fungerer sammen med skjermlesere

  • Oppfyller kravene i AA-standarden for kontrastfargeforhold

  • Har en enkel, lineær layout

  • Bruker direkte validering for bedre feedback og brukervennlighet

  • Bruker farger, tekst og ikoner som er enkle å se, også for fargeblinde

  • Tilpasser seg sømløst til alle skjermstørrelser siden den er 100 % skalerbar

  • Støtter alle inntastingstyper separat

Og hva betyr dette for deg?

Det betyr at alle kan betale i nettbutikken uten problemer.

Alle kan betale ved bruk av bare tastatur, bare mus eller bare berøring.

Alle kan betale i dårlig lys eller om du har nedsatt syn (eller er fargeblind).

Alle kan betale via en skjermleser.

Alle kan betale med alle skjermer og enheter.

Høres det bra ut?

Det er det også.

Hvis du vil se hvordan det fungerer, kan du opprette en gratis testkonto her og prøve Bambora CheckoutDet er helt uforpliktende og kan gjøres uten kredittkort.

Det var alt fra meg. Jeg håper du er blitt litt klokere når det gjelder inkluderende design og brukervennlighet, og at du kan få nytte av dette på den digitale veien videre.

--

* Vi har testet Checkout på følgende plattformer og verktøy:

  • Windows: ChromeVox (Chrome), NVDA (Chrome, Firefox, Internet Explorer, Edge), JAWS (Chrome, Firefox, Internet Explorer, Edge)

  • MacOS: VoiceOver (Safari, Chrome)

  • iOS: VoiceOver (Safari)

  • Android: TalkBack (Chrome)

  • Axe Accessibility

  • Siteimprove Accessibility Checker

  • Accessibility Developer Tools for Chrome

  • WAVE

  • Fargeblind-modus for Chrome

Ønsker du flere ressurser?

Prøv Web Accessibility Initiative, Web Content Accessibility Guidelines eller denne enkle sjekklisten fra Vox Media.

Spørsmål?

Skriv til oss her, så tar vi kontakt.

Jesper Dalgas Zachariassen

Programvareingeniør med hovedfokus på brukervennlighet og kundekonvertering.

We are open for business!

Welcome to the world of payment solutions. Choose your country and start accepting payments from customers all over the world.