Webdesign: Anvendeligt slår pænt

Skal vi vælge mellem et webdesign, der er “let at finde rundt i” eller “smukt”, så er valget let.

En undersøgelse fra CRM-tjenesten Hubspot viser, at 3 ud af 4 adspurgte foretrækker nem adgang til det, de kommer efter. Kun 10 procent prioriterer “et smukt udtryk” og lidt færre vil hellere have “en topmoderne, interaktiv oplevelse”.

Tre ud af fire forbrugere vil hellere have et webdesign, der er let at finde rundt i, end et lækkert og moderne webdesign. Kilde: Hubspot
“Websitet skal gøre det let for mig at finde det, jeg leder efter” siger tre ud af fire forbrugere. Kun hver 5. vil hellere have et smukt og moderne webdesign.

Heldigvis, er det sjældent at vi står over for det valg, og forhåbentlig bliver det aldrig nødvendigt med et ‘enten eller’: Attraktivt webdesign er nemlig en vigtig faktor, når det gælder om at bedømme websitets troværdighed, og ikke mindst så gør attraktivt webdesign også noget godt for den måde vi opfatter brugervenligheden på. Smukt er nogle gange bedre.

Men tallene giver dog fin mening. Funktionalitet har altid slået glimmer på nettet. Også dengang, et godt webdesign inkluderede mindst 1 roterende logo og lignende.

Vi går ikke på nettet for at “opleve” og se på lækkert design eller nye måder at lave navigation på.

Vi går på nettet for at få noget gjort: Få svar på et spørgsmål, løse et problem, holde 5 minutters pause eller lære noget nyt.

At finde ud af hvordan et website hænger sammen, er noget af det, vi har mindst lyst til at bruge vores tid på.

Vi vil bare løse det vi kommer for, og bagefter vil vi gerne videre med vores liv.

Du har for eksempel fået opfyldt dit informationsbehov nu. Om lidt finder du på noget andet at lave.

Hvis I forsvandt i morgen, hvem ville så savne jer?

Her er lidt at tænke over:

60 procent af alt indhold der produceres har ingen tydelig værdi for modtagerne.

Problemet har været kendt i årevis. Alle mine kursister og studerende er blevet tudet ørerne fulde med det her. Men her ser vi så resultatet dokumenteret, sort rødt på hvidt.

Ingen ville bekymre sig over det, hvis tre fjerdedele af virksomhederne verden over, forsvandt i morgen. Vi savner virksomheder og organisationer, der er vedkommende og enagerende og vi savner især relevant indhold med høj kvalitet. Kilde: Havas Group.

Det er en af mange årsager til, at vi ikke læser særlig meget på nettet: Vi starter med en forventning om, at det her møde nok ikke kommer til at gå særlig godt, allerede inden vi har taget det første skridt. Derfor vil vi også gerne have det overstået hurtigt, så vi kan komme videre.

Forbrugere leder efter engagement og vedkommende indhold. Virksomheder og brands, som kan gøre en positiv forskel i vores liv. Og hvad får vi? Marketing og hype.

Ikke underligt, at de færreste ville savne jer, hvis I forsvandt i morgen.

Her er tre spørgsmål, I kan stille jer selv:

  • Hvor godt kender I egentlig jeres kunder/læsere/modtagere?
  • Hvor meget arbejdstid bruger I på at skabe indhold uden værdi?
  • Hvis I fik al den tid til overs, hvad ville I så bruge den til i stedet?

Undersøgelsen er foretaget af Havas Group blandt 300.000 mennesker i 33 lande.

Dårlig streaming på mobilen stresser

Vi bruger mobil til stort set hvad som helst, nu om dage. Men især video er vi rigtig glade for at streame ned. Så når forbindelsen ind i mellem ryger en tur, så bliver vi stressede. Rigtig stressede.

En undersøgelse fra Ericsson ConsumerLab i 2015 viser, at det faktisk kan være mere beroligende at se en skrækfilm, end at opleve et stop i en Youtube-video.

Billedteksten læser: The level of stress caused by mobile delays was comparable to watching a horro movie
“Kognitiv belastning” er betegnelsen for mængden af information, vi kan håndtere i visse dele af hjernen. Når den kognitive belastning overstiger 0,7 anses det for meget højt og stressende. Kilde: Ericsson ConsumberLab, 2015

Blot 2 sekunders ventetid på en Youtube-video kan øge den kognitive belastning målbart, mens en ufrivillig pause når videoen er gået i gang, vil næsten fordoble stressniveauet, viser undersøgelsen.

Undersøgelsen blev i øvrigt foretaget i København, og omfattede smartphonebrugere mellem 18 -52 år.

Kilde: Ericsson Mobility Report “The Stress of Streaming Delays”, 2016 (Ikke tilgængelig på nettet)

Hvad er et handicap?

Resume: Begrebet ‘handicap’ dækker over en kombination af nedsat funktionsevne og samfundsskabte barrierer. Tilgængeligt design kan nedsætte barriererne og give alle lige mulighed for at være sig selv.

Definitionen af et handicap har ændret sig

I gamle dage talte man om at være “født med et handicap”. Blev man født døv var man så at sige dømt til at være handicappet hele livet. Man var “invalid” – som i øvrigt betyder “ugyldig”. Det var et stempel, som rask væk blev svinget over alle, der ikke var normale som flertallet.

I dag tager man udgangspunkt i mennesket og i konkrete situationer:

  • Når en blind skal krydse en vej vil hun nogle gange have brug for hjælp fra mennesker eller teknologi. I den konkrete situation er hun derfor “handicappet”.
  • Når hun senere sidder og taler med en veninde, så er de på lige vilkår, og derfor er der ikke noget handicap.

Den internationale definition af begrebet ‘handicap’ tager udgangspunkt i FNs konvention om rettigheder for personer med handicap, også kaldet Handicapkonventionen.

I Handicapkonvention er ‘personer med handicap’ defineret som:

… personer, der har en langvarig fysisk, psykisk, intellektuel eller sensorisk funktionsnedsættelse, som i samspil med forskellige barrierer kan hindre dem i fuldt og effektivt at deltage i samfundslivet på lige fod med andre.

Konventionen har blandt andet affødt EU-direktivet om tilgængelighed, som blev vedtaget i slutningen af 2016. Direktivet blev til dansk lov i efteråret 2018.

Handicapkonventionens definition kan omskrives til en simpel formel:

Handicap = funktionsnedsættelse + samfundsskabt barriere

Funktionsnedsættelser og samfundsskabte barrierer

En funktionsnedsættelse gør dig som udgangspunkt ikke ‘handicappet’ 24 timer i døgnet. Når en person er ligestillet med andre, så er hun ifølge definitionen ikke “handicappet”. To kørestolsbrugere er for eksempel udmærket i stand til at føre en normal samtale med hinanden, eller med en gående.

Handicappet opstår først, når kørestolsbrugeren skal overkomme en væsentlig forhindring, som for eksempel at nå en vare fra en hylde i supermarkedet, betjene en billetautomat eller anvende en svært tilgængelig computer på et offentligt bibliotek.

I et moderne samfund er barriererne altså ofte menneskeskabte forhold, der påvirker nogle menneskers muligheder for at kunne udfolde sig frit.

Det er forhold, vi har mulighed for at gøre noget ved. Sænker vi barriererne, så fjerner vi handicappet og giver alle lov til at deltage på lige fod med andre.

Fire grupper og tre grader af handicaps

Handicaps fordeler sig især i fire hovedgrupper:

  • Fysisk: Alle bevægelseshæmmede
  • Psykisk: Stress, depression, demens
  • Intellektuel: Hjerneskade, ordblindhed
  • Sensorisk: Syn, hørelse, følesans

Funktionsnedsættelser inddeles i 3 grader:

Grad Eksempel
Permanent Kronisk sygdom, Blindhed, amputation, lammelse, gigt
Midlertidig Øjenopereret, brækket arm, hjernerystelse
Situationel Blændet af solen, bære en tung kuffert i den ene hånd

Hvor mange handicappede er der i Danmark?

Før eller senere rammes stort set alle af funktionsnedsættelser i kroppen eller intellektet. Det er en uundgåelig del af livet at blive gammel og slidt.

I Danmark fører vi ikke centrale registre om handicappede, men tallene nedenfor stammer fra forskellige interesseorganisationer og giver godt indblik i, hvor mange mennesker, der er ramt af forskellige funktionsnedsættelser:

  • Hver 2. dansker bruger synshjælpemiddel,
  • 700.000 har gigt,
  • 400.000 har læsevanskeligheder,
  • 300.000+ er erkendte ordblinde,
  • 250.000 har et bevægelseshandicap,
  • 120.000 har hjerneskade,
  • 80.000+ har demens,
  • 58.000 har autisme,
  • 55.000 har epilepsi,
  • 50.000 er synshandicappede,
  • heraf 25.000 blinde,
  • 4.000 er døve.

Tilgængeligt design kan nedsætte barrieren

Når vi arbejder med tilgængelighed på nettet, arbejder vi altså på at give alle adgang til så meget indhold, som muligt.

Vi fokuserer på at jævne gnidningspunkterne ud, så blinde kan anvende tekstbaseret indhold, døve kan forstå hvad der siges i en video eller vi nedsætter antallet af klik for at gøre det mindre besværligt for bevægelseshæmmede. Vi forenkler svære budskaber, så de er lettere at forstå for personer med intellektuelle funktionsnedsættelser og bygger overskuelige strukturer, så de ikke overvælder personer med overbliksvanskeligheder.

Som en bonus gør vi det ikke bare lettere for personer i en ‘ekstrem’ ende af spektret at anvende vores indhold. Vi hjælper også personer i den lette ende: Personer med læsebesvær, personer som ikke kan tænde for lyden, fordi de sidder i stillekupe og vi gør det lynhurtigt for rutinerede brugere at gennemføre en opgave uden brug af mus.

 Kursus: Tilgængelighed på nettet – forstå WCAG 2.1. Tilmeld dig nu! 

Bonus: ‘Handicap’ er et skældsord i udlandet

Et slidt handicapsymbol med hvid kørestol på blå baggrund, malet på jorden
Det internationale handicapsymbol blev designet af danske Susanne Koefoed i 1968. Foto: Frank Farm, flickr.com (CC-BY)

Mens ‘handicap’ og ‘handicappet’ ses som neutrale begreber på dansk, så er ordene noget mere kontroversielle i udlandet.

Nogle mener, at ordet ‘handicap’ kommer af ‘cap in hand’, altså en person, som tigger. Den forklaring er der stillet spørgsmålstegn ved, og oprindelsen er nok nærmere et gammelt engelsk spil fra 1500-tallet.

I engelsktalende lande giver ordet desværre meget negative associationer for nogle, og det er bedst at undlade at bruge det på engelsk.

Brug i stedet: ‘disabled’ eller ‘disability’. Du kan også bruge ‘impaired’ eller ‘impairment’.

Kursus: Lær webtilgængelighed og giv alle lige adgang til nettet

Offentlige institutioner har siden 2008 været forpligtet til at sikre alle borgere lige adgang til informationer og muligheder. Alligevel er det langt fra alle, der har gjort noget ved det endnu.

Fra 23. september 2020 skal alle offentlige weborganer overholde tilgængelighedsloven og WCAG 2.1.

Inden længe vil “European Accessibility Act” også blive omsat til dansk lov. Den kommer til at omfatte elektroniske tjenester som webshops og lignende.

Netvenlig holder kursus i webtilgængelighed, både for private og offentlige websteder.

 Kursus: Tilgængelighed på nettet – Lær om WCAG 2.1. Tilmeld dig nu! 

Hvad er tilgængelighed på nettet: 4 principper, mange anbefalinger

Resume: Tilgængelighed handler om at give alle mulighed for at deltage i samfundet på lige vilkår. WCAG 2.0 er en international standard til at øge tilgængeligheden på nettet. [Opdateret]

Introduktion: Tilgængelighed og WCAG 2.0

Begrebet “Tilgængelighed” handler om at gøre indhold findbart og anvendeligt for alle, men især for handicappede, altså personer med nedsatte fysiske, kognitive, sproglige eller motoriske evner.

Erfaringen viser, at øget tilgængelighed kommer alle til gode, uanset alder og evner. Det er altid en god investering at arbejde for at gøre sit indhold bedre og lettere at forbruge.

Web Content Accesibility Guide, WCAG 2.0, er den tilgængelighedsstandard som danske organisationer og virksomheder arbejder ud fra. Det er også den standard, som Digitaliseringsstyrelsen anbefaler for offentlige websteder.

3 niveauer med forskellig sværhedsgrad

Standarden er inddelt i 3 niveauer (A, AA og AAA), hvor niveau A er det niveau, der er lettest at opfylde, mens AAA typisk vil kræve en del flere ressourcer.

Offentlige websteder skal opfylde niveau AA eller bedre.

Reglerne for at opfylde et niveau er simple: For at opfylde niveau AA skal man både opfylde niveau A og AA. For at opfylde AAA skal man opfylde AA og A.

Niveau AAA er det højeste niveau, og er en smule udfordrende. Overholder man nogle retningslinjer øger man godt nok tilgængeligheden for visse personer, men nedsætter den måske for andre.

 Kursus: Tilgængelighed på nettet – forstå WCAG 2.0 – Tilmeld dig nu! 

Ikke en udtømmende guide til WCAG 2.0

WCAG består af 4 hovedprincipper og 27 retningslinjer for tilgængelighed på nettet.

Denne artikel er en kort introduktion til tilgængelighedsprincipperne, med fokus på udvalgte retningslinjer og succeskriterier.

Der er links i artiklen til de forskellige, relevante afsnit i WCAG 2.0, jeg omtaler. Det er desværre ikke altid muligt at linke direkte til afsnittet, så du må nogle gange lede lidt.

Oversigt over Web Content Accessibility Guide 2.0
Der er 4 principper og 12 anbefalinger i WCAG 2.0. Til anbefalingerne er der retningslinjer for hvert niveau. Download oversigten i højopløsning

1. princip: Opfattelig (Perceiveable)

Fire symboler der signalerer tilgængelighed for personer med forskellige handicaps - motorisk, koginitive, høring og syn
Tilgængelighed handler om at gøre indhold brugbart for andre end personer med perfekt syn, hørelse, forståelse og bevægelighed.

1.1: Ikke-tekstbaseret indhold skal kunne forstås af alle (1.1)

Begrebet “Ikke-tekstbaseret indhold” dækker først og fremmest over indhold med informationsværdi, som:

  • Grafik, fotos og illustrationer,
  • Inputfelter,
  • Lyd,
  • Video.

For at gøre den type indhold tilgængeligt for alle er vi nødt til at beskrive det for de brugere, som ikke kan se, høre eller fornemme indholdet.

Reglen er, at ikke-tekstbaseret indhold som udgangspunkt skal beskrives med tekst i en form, der kan tolkes af læseren, uanset hvordan hun modtager indholdet. (1.1.1)

Altså: Beskriv, hvad handler videoen om, hvem er med, hvem siger hvad, hvem gør hvad og så videre.

En simpel metode er som oftest almindelig tekst, der både kan læses i en skærmlæser eller zoomes ind og ud efter behov. I andre tilfælde, er det nødvendigt at ty til andre midler.

Tabellen nedenfor giver mulige løsninger på, hvordan de forskelige typer indhold kan håndteres.

Indholdstype Mulig løsning
Video Transkription, synstolkning, tegnsprog
Infografik, kurver, grafer Billedtekst, Uddybende beskrivelser
Illustrationer Billedtekst, Alt-tekst, Title-tekst
Lyd Resume, afskrift
Dekoration Bør ikke beskrives, da det kan forvirre.
Placer det som baggrundsbillede

1.3: Bevar informationer og struktur selv om præsentationen ændres (1.3)

Der er vide rammer for, hvordan indholdet kan præsenteres, så længe at meningen bevares.

I HTML5, som er  den seneste standard for html, er der kommet mange muligheder for at indikere, hvordan siden er struktureret i navigation, indhold og sektioner.

Selv om det visuelle layout er forskelligt fra den måde indholdet er struktureret i HTML-koden, skal skærmlæsere stadig kunne finde logikken på siden, ved at tolke kodernes semantiske betydning. (1.3.1)

1.4: Gør det let at se og høre indhold (1.4)

Animation, der viser farvede bolde gennem forskellige filtre til at illustrere farveblindhed med
Animationen viser, hvordan forskellige typer farveblindhed ændrer opfattelsen af den originale farve. Foto: Yotan Vered, flickr.com. Collage: Netvenlig.dk

Hver 12. mand og hver 200. kvinde er ude af stand til at skelne visse farver fra hinanden. Det er ganske mange mennesker, og for mange til, at vi kan ignorere deres behov.

Undgå at bruge farve som det eneste middel til at signalere navigation eller vigtig information. Der vil være brugere, som ikke kan se det. (1.4.1)

Er I i tvivl, kan I prøve at lave Keith Instones Navigation Stress Test.

Lav kontrast mellem tekst og baggrund ser måske moderne ud, men det rammer endnu flere end blot farveblinde. Stort set alle over 40 vil finde det irriterende i større eller mindre grad at skulle sidde med sammenknebne øjne, for at læse en tekst. Don’t do it! (1.4.3 og 1.4.6)

Det anbefalede kontrastforhold er mindst 4,5:1 for almindelig brødtekst.  Store typer over 24px (normal) kan nøjes med 3:1. Den letteste måde at konstatere om I er på den rigtige side, er at bruge Lea Verous Contrast Ratio-tjeneste. Er I hardcore, downloader I Colour Contrast Analyser fra Paricello Group.

Til sammenligning har sort tekst på hvid baggrund et kontrastforhold på 21:1

Hold unødvendig lyd til et minimum

Du kender det: Du sniger dig til at læse lidt nyheder i arbejdstiden. Pludselig overfaldes du af lyd fra en selvstartende reklame eller video, og alle i lokalet er klar over, at du ikke passer det, du får løn for. Ikke rart, vel?

Skærmbillede af artikel fra politiken.dk. Artiklen har en video og en tekst. Billeder linker til artiklen, hvor videoen starter automatisk.
Politiken.dk starter som standard videoafspilleren så snart, siden er indlæst. For blinde vil det blive sværere at bruge en skærmlæser, hvis videolyden forstyrrer skærmlæserens oplæsningsstemme. For andre kan det skabe en pinlig stemning, i situationer, hvor smuglæsning ikke er velset. Klik på billedet og oplev på eget ansvar.

Blinde navigerer nettet ved hjælp af lyd og kan man ikke høre sin skærmlæser, kan det blive svært at finde den knap på siden, som kan slukke for lyden.

Varer en lyd over 3 sekunder skal der altid skal være en mulighed for at slå lyden fra. (1.4.2)

Endnu bedre er det at lade være med at autostarte lyd  og video i det hele taget. Det gør alle glade, også dine kolleger på kontoret.

2. princip: Anvendelig (Operable)

“Brugergrænsefladekomponenter og navigation skal kunne anvendes”

2.1: Websider bør kunne betjenes via et tastatur (2.1)

Denne retningslinje er et eksempel på, hvordan tilgængelighed kan gavne både handicappede og ikke-handicappede.

For mange bevægelseshæmmede er en mus udelukket til navigation. I stedet bruger nogle en simpel pind, de holder i munden, andre bruger kontakter, de kan aktivere med hovedet. I et system, der ofte kræver stor nøjagtighed at betjene, er ingen af delene særlig effektive.

Tabulator-tasten (den med de to pile og ordet: “TAB”) er ofte et alternativ til at bruge musen.

Tasten er især effektiv, når man skal arbejde sig gennem en længere formular. Når man trykker på den, bringer cursoren automatisk næste inputfelt i fokus.

For almindelige links vil du se en stiplet linje omkring elementet (2.4.7). Vælg det med mellemrumstasten.

Tabulator-navigation og genvejstaster gør det samtidig lynhurtigt for rutinerede, ikke-handicappede brugere at betjene en side. Her for alle noget for pengene!

2.2: Giv folk en chance for at følge med (2.2)

Mange bruger karruseller på forsiden til at vise forskelligt indhold fra websitet.

Desværre er karruseller ofte så dårligt udført og så fuld af tekstindhold, at det kræver særdeles gode læseevner at kunne følge med inden de skifter til næste billede.

For ordblinde og læsesvage er karruseller en ekstra pine, fordi de når at få læst endnu mindre end en normaltlæsende.

Anbefalingen er derfor at have en pauseknap, der kan standse rotationen i tide. (2.2.2)

Skærmbillede af NaturErhvervs forside. Der er en karrusel og mulighed for at pause rotationen.
NaturErhvervstyrelsen har en karrusel på forsiden. Rotationen stoppes ved at vælge pauseknappen nederst til højre i det blå område.

2.3 Undgå at give folk epilepsianfald (2.3)

Blink, glimt og hurtige farveskift på mere end 3 gange i sekundet kan forårsage epileptiske anfald hos nogle. For andre vil det bare være ubehageligt at se på.

Så lad være. Det er egentlig en no-brainer.

2.4 Hjælp folk med at navigere rundt på sitet (2.4)

Skriv tydelige overskrifter, der forklarer indholdets emne eller formål (2.4.2). Det har alle glæde af, både normaltlæsende, svage læsere og søgemaskiner.

Mange skærmlæsere kan springe indhold over, hvis det er korrekt mærket op. Her på Netvenlig.dk vil det første tabulatortryk på siden afsløre en skjult knap i øverste venstre hjørne, der siger: “Skip to content”. På den måde behøver man ikke vade gennem navigation og højrespalter, for at finde indholdet på siden (2.4.1).

3. princip: Forståelig (Understandable)

“Information og betjening af brugergrænsefladen skal være forståelig”

Retningslinjerne i dette princip er grundlæggende gode, sunde usabilityregler. Kan I overholde dem, kan I snildt overholde princippet om forståelighed.

3.1 Gør tekstindhold læseligt og forståeligt (3.1)

På det laveste niveau A, kræver princippet, at websiderne identificerer hvilket sprog de er skrevet på. Er de på dansk, bør der i htmlkoden være tilføjet et <lang=”da”> i headeren.

Der er ingen retningslinjer på niveau AA, men vil I være gode ved jeres læsere, er det her, I har mulighed for at tilføje ordbøger og encyklopædier til jeres indhold. (3.1.3 og 3.1.4).

Er teksternes sværhedsgrad over ca. 8. klasses niveau kan I overveje, om der skal skrives flere versioner af det samme indhold. (3.1.5)

Mindst 700.000 danskere er enten ordblinde eller svage læsere. I mange tilfælde er det en god investering.

 Kursus: Skriv til nettet og mobil. Afholdes flere steder i landet 

3.2 Gør websitet forudsigeligt (3.2)

Det skaber tryghed og tillid at kunne forudsige, hvad der sker, hvis man foretager en bestemt handling:

  • Links, der åbner på samme måde gennem hele webstedet
  • Ikoner, der ligner og opfører sig på samme måde, som vi kender fra resten af nettet
  • Overskrifter, der fortæller hvad vi kan forvente at finde, hvis vi klikker på dem

Al den viden vi har om nettet, har vi samlet op over tusindvis af besøg på andre websteder og tjenester. Når vi kan bruge den viden, kan vi løse vores opgaver og komme videre med livet.

Skal vi pludselig til at lære et websted at kende, så falder lysten til at bruge det tilsvarende med indlæringskurven.

3.3 Hjælp folk til at undgå at lave fejl (3.3)

Fejl sker, uanset hvor godt vi sikrer os mod det. Nogle gange er det brugeren, andre gange er det systemet, der fejler.

Begge dele er i vid udstrækning noget, vi kan forhindre.

Systemfejl kan forebygges ved hjælp af tests. Intet system bør slippes løs uden at være testet adskillige gange.

Brugerfejl kan undgås ved at reducere mængden af potentielle misforståelser og tvetydigheder i kommunikationen.

Hvis en dato i en webformular kun kan skrives ind på en bestemt måde, skal det være let at

  1. forstå, hvad det er vi forventer af brugeren,
  2. indtaste datoen efter de krav, vi har stillet,
  3. forstå, hvis vi alligevel har gjort det forkert (3.3.5)
  4. rette fejlen – uden at skulle begynde forfra på formularen.

(3.3.1 til 3.3.3)

Hvis de oplysninger vi afgiver kan have personlige konsekvenser, økonomisk eller juridisk, skal det for eksempel være muligt at

  • fortryde eller rette sine indtastninger,
  • få tjekket sine input, før de afsendes eller
  • bekræfte sine oplysninger, inden de indsendes,

hvor det er relevant. (3.3.4)

4. princip: Robust (robust)

“Indholdet skal være robust nok til at kunne anvendes på stabil vis af en bred vifte af brugeragenter, herunder kompenserende teknologier.”

I gamle dage var det ikke ualmindeligt at blive bremset af en stor disclaimer, som advarede mod at bruge et websted med den forkerte browser. Typisk lød det: “Denne sider er optimeret til Internet Explorer 6.0 i skærmstørrelsen 1024×768 pixel med 120 farver og kan muligvis ikke vises korrekt i andre browsere”.

Nogle gange skulle det forstås helt bogstaveligt – siden nægtede at afsløre sit indhold, hvis man så den i Firefox eller Opera (hvis nogen husker den).

4.1: Kompatabilitet er fremtidssikring (4.1)

I dag er det helt uacceptabelt kun at optimere til en bestemt browser, og fænomenet ses ikke særlig ofte længere.

Og så alligevel: hvornår har I sidst tjekket jeres indhold i andet end almindelige, visuelle webbrowsere? Ved I, hvordan en skærmlæser behandler jeres indhold? Kan man stadig få overblik, selv om man zoomer 200 procent ind på siden uden at miste informationer? Har døve mulighed for at forstå jeres instruktionsvideoer? Kan man navigere kun med tastaturet?

4.1.1: God kode giver robust indhold

God tilgængelighed stikker dybt. Helt ned i programkoden.

Tidligere var der ret rigide krav til korrekt opmærkning af indhold. XHTML-standarden var for eksempel meget striks. Det var måske lidt bøvlet for programmørerne, til gengæld var koden robust, fordi der ikke var tvivl om, hvordan de forskellige elementer på siden skulle vises.

HTML5 er derimod mere fleksibel. Visse “containerkoder” behøver nu ikke længere at blive lukket med lukkekode eller ” />”, som tidligere versioner krævede.

Løsere krav til koden, stiller større krav til programmørens disciplin og viden. (4.1.2)

Hjælpeteknologier vil ofte forsøge at reparere dårlig kode, men det kan risikere at blive på bekostning af læsbarhed og forståelse.

Bundlinjen er, at ligesom vi tester indhold og funktionalitet for fejl, så tester vi også vores HTML for fejl. (4.1.1)

Den bedste måde at gøre det, ud over selv at blive ekspert i HTML, er at undersøge koden med en HTML-validator.

Lær tilgængelighed og giv alle lige adgang

Jeg holder kursus i tilgængelighed på Teknologisk Institut.

Kurset giver et dybere kendskab til WCAG 2.0, og hvordan principper og retningslinjer kan implementeres i praksis.

I får også lejlighed til at stifte bekendtskab med forskellige måder og metoder til at undersøge og teste sit indhold.

Tilgængelighed på nettet – forstå WCAG 2.0 Tilmeld jer i dag!

Skriv gode overskrifter til nettet

Resume: Overskrifter på nettet fortæller om indholdets emne eller formål. Overskrifter skal kunne læses som selvstændige enheder, uden hjælp fra det øvrige indhold.

Overskrifter på nettet skal først og fremmest hjælpe os til at kunne løse en opgave af en art: Finde oplysninger, få svar på spørgsmål, foretage en handling.

I sin bog ‘Letting Go of The Words’ har Ginny Redish identificeret tre krav til en god overskrift:

  • Fortælle læserne, at her er noget relevant,
  • Fortælle andre, at det her er ikke relevant,
  • Gøre det let for søgemaskiner at forstå jeres indhold.

Præcise, letforståelige og selvforklarende overskrifter kan opfylde alle tre formål uden besvær.

Overskriften er artiklens varedeklaration

The most important headline rule is: respect the reader experience. In this era of clickbait, it’s more important than ever to write a headline that delivers on its promise.Hubspot + Outbrain: Data Driven Strategies For Writing Effective Headlines

Overskriften er det element, der kortest og mest effektivt skal fortælle kunden, hvad I har at tilbyde her.

En overskrift lover altså læseren, at her kan man finde indhold om et bestemt emne.

En forkert eller vildledende overskrift vil ofte få læserne til at forlade jer øjeblikkeligt.

 Tag på kursus i at skrive til nettet: Afholdes over hele landet. 

Skriv med dine læseres ord

Du er ikke som dine læsere. Det lyder banalt, men det er en pointe som mange overser.

Faktum er, at vi sjældent kan tage vores egne erfaringer med nettet eller viden om bestemte emner, og overføre dem direkte på de, der skal anvende vores indhold.

Bruger du dine læseres ord i overskrifter, sker der to ting:

  • Dine læsere kan finde det de leder efter
  • Søgemaskinerne kan indeksere indholdet bedre

At lære sine læsere godt at kende er altid en god investering i tid og penge.

Skriv langt: 5 ord er godt, 8 er bedre

Hvis din tekst var en krimi, skulle overskriften afsløre, hvem morderen er Borger.dk: Sådan skriver vi på Borger.dk 2.0 (PDF)

For at gøre vores overskrifter selvforklarende er vi nødt til at bruge ord.

En god længde er 5 ord, men undersøgelser peger på, at omkring 8 ord virker endnu bedre.

Bruger vi mange ord, er det lettere for os at kommunikere indholdets budskab. Vi har plads til at skrive hele sætninger og gøre overskrifterne selvforklarende og indlysende, to gode egenskaber for alt indhold på nettet.

Skærmbillede, der viser et Google-kort, som peger på Metalskolen Jørlunde. Siden har overskriften Transport
Overskriften her er en ringe hjælp til at finde vej til Metalskolen Jørlunde. Hvis titlen i stedet havde været: “Find vej til Metalskolen Jørlunde” ville læserens usikkerhed kunne reduceres væsentligt.

Er du i tvivl om, hvad du skal bruge alle de ord til, så brug denne metode:

1: Start med at besvare spørgsmålet: Hvad vil jeg have folk til at gøre med denne side? Måske er formålet, at kunderne skal kunne finde vej til din virksomhed. Så er svaret: “Jeg vil gerne have, at folk skal kunne finde vej til Virksomhed X”

2: Sætningens første udsagnsord er “finde”, et handlingsorienteret og informationsbærende ord.

3: Slet ordene frem til udsagnsordet og du står tilbage med “…finde vej til Virksomhed X”.

4: Skriv om til en helsætning: “Find vej til Virksomhed X”.

Nu har vi en overskrift, som opfylder de nødvendige krav: Den fortæller folk med det samme, hvad siden handler om og søgemaskinerne har nøgleord, der kan indekseres.

Frontloading: Skriv med nøgleord

Når vi ser en overskrift er det ikke sikkert, vi læser mere end de første 2-3 ord i sætningen. Resten skanner vi med vores perifære syn.

Betydningen af de første ord i sætningen kan derfor være afgørende for, om kunden forstår, hvad indholdet handler om.

Metoden kaldes frontloading og kan bruges på alle elementer på siden: Afsnit, mellemrubrikker, lister – og naturligvis overskrifter.

Eksempel på to overskrifter, hvor den ene er frontloadet
Frontloading: Hvilken af de to overskrifter har mest information i starten af teksten?

At blive god til frontloading kræver øvelse, men alle kan lære det i løbet af nogle forsøg.

No one said writing headlines would be easy. But the hard work is worth it because guests rely so heavily on the headings when trying to understand your overall structure, predict content, and make efficient choices.Jonathan & Lisa Price: Hot text (New Riders, 2002)
Kursus: Skriv til nettet
Lær mere om frontloading, overskrifter og at skrive til nettet. Netvenlig holder landets måske bedst evaluerede kursus i digital formidling. Afholdes flere steder i landet. Ring eller skriv: tlf. 40 93 21 98, lmsoren@netvenlig.dk

Brugertest: Test selv for bedre usability

Resume: Her er 5 måder til at lære at undersøge brugervenligheden på dit website. Du kan tage dem i den rækkefølge, jeg har foreslået, eller du kan plukke det ud, du synes er interessant.

En mand og en kvinde udfører en tænke-højt-test på computer
Tænke-højt-test Foto: Thomas Link (CC-BY-SA)

Jeg har undervist i usability i adskillige år og altid insisteret på, at det ikke behøver være den store videnskab at finde ud af, om ens navigation er holdbar, eller om folk kan finde vigtigt indhold på sitet.

Her er 5 muligheder for selv at gå i gang. Er du helt ny, så start fra toppen og arbejd dig igennem listen.

Er du rutineret, så snup bare det, der virker interessant.

 

1: Steve Krug: Rocket Surgery Made Easy
Bogen er en forlængelse af kapitel 9 i Krugs efterhånden legendariske bog: “Don’t Make Me Think”.

Du får den grundlæggende viden om brugertest, og især omkring den populære tænke højt-testmetode.

2: Hoa Loranger: Checklist for Planning Usability Studies
Checklisten er omfattende og udførlig, som alt andet fra NNGroup. Velskrevet og med mange links til mere viden.

Artiklen er som en kondenseret version af “Rocket Surgery…”, skrevet med andre ord, men understøtter Krugs budskab meget fint.

3: The Complete Guide to Usability Testing
Gratis e-bog fra Usertesting.com. Ikke fantastisk dybdegående, men den giver et godt overblik og er et fint supplement til de to andre ressourcer.

E-bogen er især god at stikke i hånden på en chef eller lignende.

4: David Travis: Usability Testing Boot Camp
Et onlinekursus med meget høj værdi. David Travis har mange års erfaring med User Experience og Usability, og hans kursus er nok et af de mest populære af slagsen.

Prisen svinger lidt, men du kan være heldig at få hele kurset til næsten ingen penge, når Udemy.com holder udsalg.

5: Rolf Molich: Regler for standardtest af brugervenlighed (PDF)
Ekspertniveau. Til når du er blevet rigtig hardcore og gerne vil gøre det efter en standardiseret metode.

Dokumentet har flere gode pointer, som du med garanti kan få glæde af, før, under og efter din første test. Hvor mange der anvender hele standarden, kan jeg ærlig talt ikke svare på.

Forfattet af usabilitypioner Rolf Molich, der blandt har udviklet usabilty-heuristikkerne sammen med Jakob Nielsen.

Tag på kursus i usability

Vil du gerne introduceres til usability og testmetoder, så har du flere muligheder:

Er du i tvivl, så skriv til mig eller ring på 40 93 21 98

Modvilje mod CPR-krav kostede diabetesprojekt deltagere

Resume: En dansk mobilapp, der skulle hjælpe forskningen krævede, at deltagerne oplyste deres CPR-nummer. Og det frastødte mange potentielle deltagere så meget, at de skrev negative anmeldelser om app’en på nettet. [opdateret]

InterWalk var både en dansk mobilapp og et forskningsprojekt, der skulle hjælpe forskere med at blive klogere på diabetes 2.

Diabetes 2 er en (folke)sygdom der årligt rammer flere end 26.000 danskere, og som hvert år koster samfundet mere end 31 milliarder kroner.

Forskningsprojektet undersøgte effektiviteten af let motion, kaldet “intervalgang”, som en måde at øge insulinproduktionen på naturlig vis.

App’en indhentede data i realtid på samme måde som for eksempel Endomondo og andre motionsapps. Bare uden det sociale element, for informationerne var private og indsamles udelukkende til forskningsformål.

To skærmbilleder af Interwalk-app. Det ene viser startsiden på app'en, det andet viser en træningsplan.
InterWalk indsamler data og giver deltagerne et program, de skal følge. Skærmbilleder fra Google Play Store

CPR-krav frastødte mange mulige deltagere

Ville man være med i projektet downloadede man app’en og tilmeldte sig. Og her stødte projektet øjeblikkelig på hård grund.

InterWalk-projektet krævede, at man gav sit cpr-nummer og det faldt rigtig mange potentielle brugere for brystet.

I Google App Store blev app’en rated til sølle 1,7 og det var ikke på grund af funktionaliteten men udelukkende, fordi folk stejler over at skulle aflevere en personlig oplysning i Cyberspace.

Meget kritiske brugeranmeldelser af InterWalk. På en graf ses det ar app'en er bedømt til 1,7 ud af 5 point.
Ingen af disse personer vender nogensinde tilbage til InterWalk.

Brændte internetbørn skyer ilden

Som internetbrugere er vi efterhånden meget ømme når det kommer til udlevering af personlige oplysninger. Bare det at få en emailadresse ud af folk kan være lidt af et arbejde nu om dage. Så et CPR-nummer er en meget stor ting at bede om for alle andre end offentlige institutioner som Skat, e-boks og NemID.

Sporene skræmmer nemlig. Selv om de fleste voksne danskere har fået eksponeret deres CPR-nummer en eller flere gange på grund af dårlig datasikkerhed i det offentlige, så er de sidste fire cifre i personnummeret stadig en af de mest private og personlige oplysninger, vi har om os selv.

Slatten forklaring uden rigtig tyngde

InterWalk stod med et dilemma, for det er tilsyneladende et krav i forhold til forsøgets videnskabelige værdi, at man kan dokumentere, der rent faktisk har været rigtige, levende mennesker involveret.

Til venstre, registreringsformularen til InterWalk og til højre projektets egen forklaring på, hvorfor de vil have cpr-nummer af brugeren.
InterWalk vil have dit cpr-nummer. Forklaringen er lang, men svarer aldrig rigtig på spørgsmålet: Hvorfor?

For at bøde på slaget havde InterWalk ganske fornuftigt placeret en stor, prominent knap med teksten: “Hvad bruger vi dit CPR-nummer til?”, lige under selve CPR-nummerfeltet.

På linket kom så en kort forklarende tekst, men det tætteste vi kommer et rigtigt svar er sætningen: “Når du bruger appen, så hjælper du forskerne med at udvikle en ny viden, og derfor skal dit CPR-nummer indtastes”.

Man kan næsten høre brugerne spørge: “Virkelig? Derfor? Og hvorfor kan man ikke bare nøjes med anonymt indsamlede data, som man kan i så mange andre undersøgelser?”

At udfylde en webformular er et spørgsmål om tillid

Webformularer er stadig er et af de vigtigste kontaktpunkter mellem organisationer og omverden.

Alligevel undervurderes webformularer gang på gang, som noget der bare skal overstås, så vi kan gå i gang med at udnytte hvad det nu er, vi samler ind.

Træn med Forsvaret er et godt eksempel på den tankegang.

Virkeligheden, set fra kundens side er bare en anden: For dem er en webformular en tillidsøvelse.

Et klik på “Indsend” er en stemme på afsenderens troværdighed.

Tre faktorer afgør om vi vil lege med

Der er rundt regnet tre faktorer, som især gør sig gældende, hvis det skal ske:

  • Vores eget gode navn og rygte,
  • Kundernes tillid til, at vi opbevarer deres oplysninger sikkert.
  • At kunderne kan se formålet med at give os oplysningerne.

Hvis ikke alle tre forhold er til stede, skal vi ikke forvente, at ret mange har lyst til at lege med.

Løsningen: Sådan kunne InterWalk gøre i stedet

Spørgsmålet er så, hvad kunne InterWalk gøre for at rette op på problemet her?

Jeg har fire umiddelbare bud i nogenlunde uprioriteret rækkefølge:

  1. Fortæl hvorfor, projektet skal have cpr-nummeret. Skriv forklaringen om med kunden som udgangspunkt,
  2. Vent med at bede om cpr-nummeret (og med at indsamle data), til brugeren er godt i gang med at anvende app’en og måske er bedre motiveret til at aflevere en så personlig oplysning som et cpr-nummer,
  3. Indiker i app’en med tekst og ikon, at forbindelsen er krypteret og dermed sikker,
  4. Lav et login via en pålidelig tredjepart, for eksempel NemID.

Kom på kursus i brugervenlige webformularer

Jeg holder Danmarks eneste kursus i at producere gode, troværdige og brugervenlige webformularer.

Tilmeld dig kurset, der afholdes på Teknologisk Institut.

Har du spørgsmål? Ring på telefon 40 93 21 98 eller skriv til mig.

Træn med Forsvaret: Fodfejl og sjuskefejl i tilmeldingen

Resume: Forsvarets træningsprogram glemmer at fortælle hvad de bruger personlige oplysninger til, når man tilmelder sig Træn med Forsvarets programmer.

Tilmeldingsformularen fra Træn med Forsvaret.
Klik og se formularen i fuld størrelse

Træn med Forsvaret er en yderst nyttig tjeneste, der henvender sig både til nybegyndere og øvede motionister.

Alle der har lyst kan trække på forsvarets enorme viden om fysisk træning og effektive øvelser, og Træn med Forsvaret findes både på web og i mobilapps.

På nettet overser forsvaret dog en klassisk tommelfingerregel, som risikerer at trække ned i brugeroplevelsen: De glemmer at fortælle, hvad de skal bruge vores oplysninger til.

Mobilnummer og fødselsdag er personlige informationer
De første felter i tilmeldingsformularen er helt uskyldige: Navn og email virker logisk nok.

Så vil de pludselig have vores mobilnummer. Og bagefter vil de sørme vide, hvornår vi har fødselsdag – med dag, måned og år.

 

Registreringsformular fra Træn med Forsvaret spørger efter fødselsdato og år
Træn med Forsvaret vil kende vores fødselsdag. Mon de sender blomster på dagen?

Hvorfor? Hvad er formålet? Hvad bruger Træn med Forsvaret oplysningerne til?

Jeg tror ikke, der ligger nogen ond hensigt bag. Det gør der som regel ikke.

Facebook-login med adgang til mine venner
I en tid med spam og kapitalisering af selv de mindste detaljer vi afgiver til det offentlige rum, betyder det noget, hvilke oplysninger vi har lyst til at give videre.

Facebook-login er blevet en almindelig måde at hjælpe kunderne hurtigt igennem tilmeldingsprocesser og lignende, fordi mange af de oplysninger, som ligger i Facebook er de samme, som for eksempel forsvaret skal bruge for at oprette os som bruger.

Træn med Forsvaret kan hente oplysninger fra Facebbok
Vi kan jo passende bruge noget af den sparede tid på at beslutte, om vi vil tillade Træn med Forsvaret adgang til vores venneliste på Facebook.

Hjælpeteksten siger “Spar tid – hent oplysninger fra Facebook”, og det er jo godt nok. For så har vi tid til at overveje, hvorfor mon Træn med Forsvaret vil kende vores Facebookvenner, når vi bare vil oprette et træningsprogram.

Tilslutning til Facebook kræver, at Træn med Forsvaret får adgang til kundens venneliste.
Skal, skal ikke give forsvaret adgang til at se min venneliste?

Meningen er rigtig nok – det skal være let at komme i gang med at bruge tjenesten. Men hvad får kunden ud af det?

I det her konkrete tilfælde vil jeg mene, at fordelen ved at bruge Facebook til login er meget begrænset:

  1. Alle oplysningerne, som Træn med Forsvaret efterspørger er paratviden. Der er ikke noget, vi ikke umiddelbart ville kunne svare på, hvis Træn med Forsvaret ringede til os klokken 3 om natten på det mobilnummer vi har givet dem. Formularen er altså i sig selv meget hurtigt udfyldt.
  2. Vi skal alligevel ind og skrive en adgangskode, så vi slipper ikke for at interagere med formularen, uanset hvad. Derfor er den opsparede tid ikke særlig stor, når det kommer til stykket.

Sjuskefejl som kunne være undgået
Den sidste overraskelse, som Træn med Forsvaret har i ærmet til os er, at alle felterne er obligatoriske. Der er ingen vej uden om.

Det kunne de nu godt have fortalt.

Fejlmeddelelser i Træn med Forsvarets loginformular
Lidt overraskende viser det sig, at alle felter i Træn med Forsvarets formular er obligatoriske.

Tag et kursus i brugervenlige webformularer

Jeg holder Danmarks eneste kursus i at producere gode, troværdige og brugervenlige webformularer.

Tilmeld dig kurset, der afholdes på Teknologisk Institut.

Har du spørgsmål? Ring på telefon 40 93 21 98 eller skriv til mig.

Små ændringer af Indberet.dk kan give store forbedringer

Erhvervsstyrelsen står bag indberetningsportalen Virk.dk. I august blev den lidt anstrengende side erstattet med et noget nemmere tilgængeligt redesign.

Indberetningsblanketten bruges primært af virksomheder, som kun i begrænset omfang skal sende elektroniske fakturaer til det offentlige.

Målgruppen er altså ikke nødvendigvis særlig bekendt med Virk.dk eller elektronisk fakturering i det hele taget.

Virk.dk er blevet renoveret for nylig og Virk har fået virkelig mange ting rigtigt.

En tillidssag at udfylde en webformular

Faktisk er det kun nogle simple ændringer der skal til.

Webformularer er i den grad en tillidssag mellem kunden og afsenderen. Jo større omkostninger der er ved at lave fejl, jo vigtigere er det, at kunden føler sig i trygge, kompetente hænder fra start til slut.

Jeg har fem punkter på dagsorden:

indberet

1) Vær konkret

Tanken er rigtig. Det er en relativt kompliceret webform vi skal i gang med og derfor giver det mening at forberede sig, før man begynder.

Men jeg vil hellere vide HVILKE oplysninger, vi skal have parat:

  • Organisationens navn og adresse,
  • kontaktperson i organisationen,
  • EAN-nummeret, som kan tage lidt tid at finde frem.

2) Korte tekster

Denne tekst er lige lang nok. Den kunne gøres meget kortere og være lige så informationsbærende:

“Send elektronisk faktura eller kreditnota til offentlige institutioner og myndigheder fra denne side.”

Eller måske bare: “Send elektronisk faktura til det offentlige fra denne side”.

3) Undgå tvetydigheder

“Vejledning” kan give et sammenfald med “Sådan gør du”. Hvad er forskellen? Og det viser sig da også, at “Vejledning” nærmere dækker over en “FAQ”, og kunne med fordel navngives som sådan noget. Måske “Spørgsmål”, hvis FAQ er for kryptisk.

4) Gør det let at kontakte nogen

Rigtig godt, at man har et sted at ringe eller skrive hvis man har problemer eller spørgsmål. Det giver tryghed og tillid til organisationen.

5) Fortæl, hvad der skal ske

Trin for trin-guiden er en rigtig god ide. Sammen med de øvrige områder har vi mulighed for at forberede os optimalt. Vi ved, hvad der skal ske og i hvilken rækkefølge tingene sker. Igen – tryghed og tillid.

Kursus: Brugervenlige webformularer

Lær at producere webformularer, som folk har lyst til at bruge – Danmarks eneste kursus i emnet, der handler om alt andet end teknik!

Tilmeld dig Brugervenlige Webformularer på Teknologisk Institut

Kursus: Skriv til nettet

Skriv til nettet, så det bliver læst! Lær at formulere dig effektivt og vedkommende til læsere med begrænset tålmodighed.

Tilmeld dig Skriv til nettet på Teknologisk Institut