UU-podcasten:Universelt utformet

Introduksjon

Anders: Dette er to entusiaster som i løpet av 26 episoder skal diskutere 78 suksesskriterier på en forståelig måte. Dette er universelt utformet.

Erling: Da er vi på episode 22, Anders. Siden episode 17 føler jeg at vi har kommet sykt langt. Og nå har vi hvertfall kommet sykt langt. Ikke mange igjen.

Anders: Begynner å bli vemodig. Det går mot slutten.

Erling: Jeg gleder meg veldig til å få et komplett sett med episoder, som dekker hele WCAG. Tenk så deilig. Men i dag, da skal vi snakke om 3.3. Hva handler det om?

Anders: Som forrige episode, så handler det om, den første treen er at det vi lager skal være forståelig. Burde være selvsagt. Den andre treen handler om inndatahjelp. Vi snakker om skjema. Nettbaserte skjema.

Erling: Og hvilke suksesskriterer skal vi snakke om i dag?

Anders: Vi skal se på tre, egentlig to. To av dem er veldig, veldig like. Den ene er bare litt strengere enn den andre. Som har vi har sett før.

Erling: Den ene er dobbel A og den andre er trippel?

Anders: Ja, dette har vi sett før, på kontrast. I dag har vi den første som vi skal snakke om, den heter 3.3.2. Handler om ledetekst.

Erling: Labels.

Anders: Ja, labels. Og instruksjoner. Og nå er det nok mange som tenker, hæ, det har de snakket om før. Det har vi. Dette er litt forvirrende. Det er litt ulempen med å gå så systematisk gjennom WCAG som vi gjør, fordi en annen måte hadde jo vært å snakket om labels på tvers. Det vi snakker om i dag er visuelle ledetekster. Med det mener jeg hvordan de fremstår som tekst. Eller symbol. Her er jo òg W3C tvetydige, for de snakker om label og de snakker om label. De snakker om label om noe som står foran et skjemaelement, og de snakker om label som HTML-elementet. Dette er ofte det samme, men ikke nødvendigvis. Så i denne episoden, når vi snakker om label, så er ikke det nødvendigvis HTML-elementet label.

Erling: Men nå skal vi ikke forvirre, Anders.

Anders: I episode 3 så snakket vi om label.

Erling: Men du sa det jo, her er det snakk om den visuelle.

Anders: Hvordan det er kodet er ikke så viktig i denne episoden. Men det er viktig, jeg vil si at det er viktigere, nesten.

Erling: 3.3.4? Eller var du ferdig?

Anders: Jeg vil òg si at vi har snakket om tydelige ledetekster i episode 14. Altså hvor godt språket er. Det skal vi ikke snakke så mye om i dag. Og vi skal òg snakke om alternative måter å lage tilgjengelige navn på skjema, i episode 25. Det er nå fire episoder som egentlig handler om litt av det samme. Men jeg skal prøve å presisere, i dag handler det om hvordan ledetekster i et skjema fremstår visuelt.

Erling: At vi må passe på at vi har gode ledetekster som påser at det vi har skrevet i feltet er det korrekte. Enkelt å forstå hva som skal inn i feltet. Da, 3.3.4? Den milde varianten.

Anders: Den er ikke så mild, fordi det handler om å forhindre feil. I skjema som har store konsekvenser, enten juridiske eller økonomiske, så skal brukeren ha liten mulighet til å feil. Det vil si at du skal være veldig tydelig på hva kunden/brukeren sender inn, og du skal òg helst ha muligheten til kunden/brukeren angre. Og økonomisk forpliktelse er jo for eksempel bestilling av en flybillett, som du nevnte. Da sa du at?

Erling: Da er det en grace period. I løpet av tre eller fire timer, litt usikker, så kan du kansellere flybillett uten ekstra kostnad.

Anders: Det vil gjøre at du er i henhold til dette kriteriet.

Erling: Så selv om det ikke er en del av den digitale flaten, så er det en del av …

Anders: Så lenge du kommuniserer det i forkant, at her kan du angre deg, det er jo viktig.

Erling: Du visste det ikke, så det kommer kanskje ikke så godt frem?

Anders: Men du vet, jeg flyr ikke, Erling.

Erling: Du flyr aldri.

Anders: Det er meg og Greta.

Erling: Ja.

Anders: Og den strenge varianten er at den skal forhindre feil i alle typer skjemaer.

Erling: 3.3.4 handler kun om juridisk bindende og økonomisk, men 3.3.6 er alle skjema. Kontaktskjema. Hva det måtte være.

Anders: Det vil nok ofte oppleves som litt vel masete å for eksempel ha et eget bekreftende steg på slutten av et skjema, i et skjema som kun har ett steg, et vanlig kontaktskjema.

Erling: Eller meld deg på et nyhetsbrev-skjema. Hei, er du helt sikker på at du ønsker å melde deg på dette nyhetsbrevet. Du kan angre i løpet av tre til fire timer.

Anders: Her tenker jeg at det er bra at det er trippel A. Det er nok én av disse kriteriene som jeg synes det er greit å bryte.

Erling: Det gir mening at det er trippel A. Det gir mening at de mener. En fin trippel A. I dagens aside, hva skal vi snakke om da?

Anders: Litt del to av forrige episodes aside.

Erling: Hva var det vi snakket om forrige episode?

Anders: Vi snakket om veil of ignorance, som vi begge to lærte på et foredrag fra Mike Monteiro. Og han godeste Mike Monteiro som er en flink foredragsholder og en designer, han har laget noe han kalt code of ethics, som traff hjertene våre i relasjon til universell utforming.

Erling: Vi skal nevne litt om det. Og i dagens ris og ros, hvem skal vi rise og/eller rose.

Anders: Da tar vi disse billettbestillingsløsningene. De er det mange av. Personlig har jeg litt dårlig erfaring med dem. Det er så omfattende.

Erling: Skal ikke gå inn i dette akkurat nå, men Billettservice, altså Ticketmaster, de har mye ekle flyter.

Anders: Mye ekle flyter.

Erling: Men i dag har vi ikke forberedt ris og ros, som vi pleier. Vi skal ta det på sparket, som vi gjorde det sist, med den ene.

Anders: Ellers har jo vi et veldig strengt manuskript.

Erling: Vi pleier å gå gjennom for å se om ting feiler eller er bra.

Anders: Nå har vi ikke peiling om de gjør det bra eller dårlig, og hvem av dem som er best. Så det får vi se om funker.

Erling: Vi snakket om å spør folk om, for det er ikke så mange episoder igjen, og vi har jo lyst å fortsette. Vi har mange ideer til spinnoffs.

Anders: Jeg tror poddabstinensene kommer til å komme, tvinge seg på.

Erling: Og vi vil gjerne høre hva lytterene våre har lyst at vi skal gjøre, etter episode 26. Da pakker vi den inn, den ligger tilgjengelig. Hva skal vi gjøre da? Send oss en mail på hei@universeltutformet.no. Hva vil du høre mer om, hva vil du at vi skal gjøre? Hva som helst?

Anders: Er det noen begrensning? Må det være uu?

Erling: Nei, selvfølgelig ikke. Vi vil høre alle ideer. Ideer er kjempekjekt.

Anders: Jeg er litt uenig der, jeg vil holde det innenfor uu-rammene.

Erling: Jeg vil ikke begrense folk

Anders: Ok, hva vil du høre at jeg og Erling skal snakke om, etter episode 26.

Erling: Bare for å åpne det helt, det trenger ikke å være podkast heller. Det kan være kurs eller hva det måtte være.

Hvorfor?

Erling: Men disse suksesskriteriene, hvorfor har vi dem? Hva er intensjonen med dem?

Anders: Altså dette med å forklare hvilke type data som skal inn i felter, og hvilket format de skal på, det er for alle. Det er veldig viktig å ikke la noen helst bli usikre på, hvordan et skjema skal brukes. Dette vil være bra for alle. Men selvfølgelig, så vil det være spesielt for folk som har problemer med å lese og lære. Hvis du har kognitive, hvis du synes det generelt er vanskelig å bruke datamaskiner. Dette er ganske tett knyttet til god brukervennlighet.

Erling: Og dette med motoriske utfordringer. Gjør du feil da må du gjør ting på ny, du må navigere deg i grensesnittet på ny. Jo færre feil du gjør, jo bedre.

Anders: Tid er en viktig ressurs. Alle ønsker å komme seg fra A til Å på kortest mulig tid.

Erling: Det er ikke så mange som koser seg i et skjema, dette var et kjekt skjema å fylle ut.

Anders: Spare tid. Når det gjelder hvorfor vi har den unngå feil med konsekvenser. Små eller store konsekvenser. Grunnen til at vi har den er fordi brukeren skal være trygge på de valgene en tar. Når det er forpliktene juridisk og økonomiske valg, så ønsker du ikke, etter at du har trykket på send-knappen, å tenke om du gjorde alt riktig.

Erling: Vi ønsker jo å unngå at folk forplikter seg til noe de ikke ønsket å forplikte seg til. Kjøpe noe de ikke ønsket å kjøpe.

Anders: Den handler òg om sletting. Og intensjonen med den er òg å unngå store datatap. Intensjonen er ikke å bekrefte alle slags slettevalg, mindre slettevalg, men større datatap. Det er kanskje lettere å feile dersom en har visse typer funksjonsnedsettelser. Her er det viktig for alle.

Erling: Det treffer de hardere.

Anders: Hvis du har litt skjelvende hånd, kommer borti en knapp og har bestilt en billett til mange tusen kroner som var på feil tidspunkt, så har du ikke mulighet til å angre på det.

Hvem?

Erling: Hvem må passe på dette, av produsenter?

Anders: En god blanding, en god miks. Det er ganske åpenbart at designere som designer skjemaflyt må tenke på dette, ikke gjøre det for minimalistisk, finne den gode balansegangen mellom minimalisme og maksimalisme.

Erling: Funksjonalisme.

Anders: Du skal ikke overforklare ting, for da blir det for mye informasjon å ta innover seg, da leser ikke folk det. Du skal forklare det såpass godt at folk forstår det, og er trygge på hva som skal inn.

Erling: Og da som designer, kan det være nyttig å involvere tekstforfattere, altså innholdsprodusenter, så disse blir truffet.

Anders: Vi kaller jo ledetekster for mikrotekst.

Erling: Hva med kodere?

Anders: Jeg fikk ikke kommet til poenget mitt.

Erling: Sorry!

Anders: Det skal lite til i en mikrotekst, å gjøre folk usikre, å vippe folk av pinnen. Små nyanser i ordvalg, begrepsbruk, kan skape usikkerhet. Det er noe jeg har sett i brukertest mange ganger.

Erling: Der sier du et nøkkelord. Brukertest. Ja. Kodere.

Anders: Vi så jo et eksempel på unødvendig bruk av hjelpetekst i dag. Det var et skjema der det stod navn, og så var det en spørsmålsboble med en tekst som poppet opp, skriv inn ditt fulle navn. Ok, det er smør på flesk.

Erling: Alle feltene hadde spørsmålstegnene. De følte de måtte ha det på alle.

Anders: Kodere, selvfølgelig, selv om denne episoden ikke handler om kode, så er det viktig at de er bevisst på det. Vi spiller jo på lag, vi skal jo ikke stikke under en stol, at både designere og kodere påvirker mikrotekstene. Kodere har et ansvar å kode det riktig, men òg å be om endringer fra designer dersom en ser at det mangler.

Erling: Vi har ikke snakket om det, men hva med innhold i feilmeldinger? Er det relatert til dette?

Anders: Nei, det er det ikke.

Erling: Det treffer ikke disse?

Anders: Men innhold i feilmeldinger snakket vi om sist, så der hadde vi to kriterier som går mer på feilmeldingene i seg selv. Siden det er litt jus inni her, så kan det være lurt å ha med juridisk avdeling på dette.

Erling: De kan jo påvirke når det er greit å angre, for eksempel.

Anders: De kan si hvilke aktive og passive valg må ha her. Et eksempel på det er hvis du har fyllt ut et skjema i flere steg, så kommer du til en bekreftelsesside, så er det noen som skriver over sendknappen, «ved å trykke på sendknappen nå, så bekrefter du at alle opplysningene i dette skjemaet er korrekte». En annen måte å gjøre det på er et passivt samtykke til at den informasjonen er korrekt. Et annet eksempel er at du har en avhukningsboks, der du sier «jeg bekrefter at opplysningene jeg nå gir, er korrekte». Det kan jo da en juridisk person være med på, å ta slike valg.

Erling: Kan en slik sjekkboks bli med å påse at informasjonen er korrekt, altså å minne folk på at, du, dette er juridisk bindende. Pass på at det du har skrevet er korrekt. Å få dem til å gå over det en gang til.

Anders: Jeg er usikker på hvilken effekt det har. Den type sjekkbokser blir jo mye brukt til å akseptere vilkår, som ikke har noe med dette å gjøre, men det virker litt i samme land. Dette handler ikke å akseptere vilkår, dette handler om å bekrefte at det du har skrevet i et skjema, er korrekt.

Erling: Så etter at en har trykket på send, vi har ikke snakket om dette, så kommer det opp en modal som sier «er du helt sikker på at informasjonen er korrekt?» Ja/nei. Kan det være behjelpelig?

Anders: Ja, det vil være i tråd med dette kriteriet.

Erling: Nettopp.

Anders: Det skal vi snakke om litt under teknikker, ikke spesifikt modaler, at du fint kan stille det spørsmålet.

Hvordan?

Erling: Det tar oss over i teknikker. Hvordan kan vi passe på at vi er i henhold til disse suksesskriteriene?

Anders: Da skal vi først snakke om ganske mange teknikker som går på ledetekster og instruksjoner.

Erling: Nå har vi en ganske lang liste foran oss.

Anders: Her er det bare å finne frem blyanten.

Erling: Her er det mange konkrete og gode tips.

Anders: Det kan jeg godt si, at vi har ikke snakket så mye om dette med informative og normative teknikker.

Erling: Hva er forskjellen?

Anders: Forskjellen er at informative teknikker er mer anbefalinger. Normative teknikker, det er teknikker du må gjøre for å være i henhold til et suksesskriterier. Vi blander disse to, vel vitende, fordi vi ønsker å lage gode løsninger, og de teknikkene vi tar opp er med på å skape de gode løsningene. Vi lærer ikke folk hvordan de skal gjøre en veldig strukturert WCAG-evaluering. For da åpner vi en litt større eske. I kapittel fem i WCAG snakker vi om conformance. På norsk?

Erling: Konformitet? Jeg vet ikke.

Anders: Konformitet. Nå sporte vi litt av. Poenget er at vi nevner mange teknikker, men du må ikke gjør alle for å være i tråd.

Erling: Ikke alle er normative. Skal vi dra gjennom listen, punkt for punkt?

Anders: Ja. Instruksjoner om hvilke data som forventes. Ganske åpenbart. Hvis du vil ha en e-postadresse, så spør du etter en e-postadresse.

Erling: Hvis du har et felt hvor det står navn, og du vil ha fullt navn, skriv gjerne fullt navn. For det er mer informativt.

Anders: Skriv gjerne hva format som forventes.

Erling: Fødselsdato for eksempel. Som er ganske vanlig.

Anders: Der kan du òg vise maskeringen. På et bankkort har du fire pluss fire pluss fire pluss fire. Hvis du skal be om et bankkortnummer, kan du godt vise maskeringen, at her ønsker du fire grupperinger med tall.

Erling: I samme felt. Det samme med fødselsdato. Du kan vise at her er det to skråstrek to skråstrek fire.

Anders: Og da er en god praksis å bruke underscore i stedet for eksempeldata. Det du oppnår med det, hvis du bruker det som placeholder, hvis bruker fiktive eksempeldata, et fiktivt banknummer for å vise formatet, så kan du oppleve at folk tror at det er ferdig utfyllt og hopper over. Hvis du bruker underscore, så skjønner folk.

Erling: Vise maskeringen. Neste?

Anders: Ja. Der gikk vi litt ut av kriteriet, og litt inn på feltet skjemadesign.

Erling: Fortsatt nyttig, det er med å gjøre ting bedre.

Anders: Hvilke regler er det for det feltet som du skal ha inn? Hvis regelen er at du må ha inn landskode i telefonnummeret, si nå i fra om det. Noe jeg lærte i dag er at det er ok å gi disse reglene kun ved fokus. Ble litt overrasket, kan være at jeg har feiltolket det. Jeg vil jo si at dersom skjemaet er så teit at det krever +47, vær nå tydelig på det.

Erling: Gjerne før fokus òg.

Anders: Ja, så jeg kunne unnlatt å nevne det. En veldig god teknikk, er at dersom du skal be om noe som folk ikke nødvendigvis har for hånd, skriv nå det før skjemaet.

Erling: Gå å hent passet ditt. Gå å hente bankkortet ditt.

Anders: Kundenummeret ditt.

Erling: Finn personnummeret til datteren din.

Anders: Skriv det først. En liste med ting.

Erling: Dette kommer du til å trenge for å fylle ut dette skjemaet.

Anders: Spesielt viktig på skjema med tidsbegrensninger. Og vi har snakket om tidsbegrensninger før. Hvis de ikke kan utsettes, og du plutselig må løpe på loftet for å finne en fødselsattest.

Erling: Det blir en perfect storm.

Anders: Og så har vi dette med obligatoriske felter. Det kommer inn her. Da er regelen at hvis du bruker et symbol. Det vanligste symbolet er jo stjerne, asterisk, så må du forklare det før du bruker det første gang. Det er en regel jeg er litt uenig i, for det er en så sterk konvensjon nå. Men jeg vil si at du kan fint skrive ordet «påkrevd» i stedet for å bruke stjerne.

Erling: Men hva med å snu på det, å skrive hvilke felt som er valgfrie, hvilke tanker har du om det?

Anders: Det synes jeg er fint, det er i tråd med både Google Material og Luke Wroblewski sin anbefaling. Hvis majoriteten av feltene er påkrevde, så skriver du bare valgfri på de som er det. Men hvis en skal tolke dette kriteriet veldig bokstavlig, så skal du skrive påkrevd, så sant ikke alle er det. Da kan du skrive innledningsvis at alle er det, uten å ha en stjerne på hvert felt. Men dette gjør jo gjerne folk. Det var obligatoriske. En litt vag teknikk, for mye informasjon kan være like skadelig som for lite. Finn den perfekte balansegangen.

Erling: Jeg synes den er viktig, det er fort gjort å gå i fellen at en overbeskriver ting. En skriver for mye i stedet for nok. Gjerne spesielt hvis en skal begynne å forklare noe, så har vi en tendens til å skrive for mye. Hold det kort, konsist og treffende.

Anders: Hvis en må be om noe, som ikke er helt opplagt at en må, så kan en skrive hvorfor. For eksempel fullt personnummer. Da kan brukeren tenke hvorfor skal jeg gi fullt personnummer til disse, hvis jeg skal reise med en ferje. Så kan det være at dette er et lovpålagt myndighetskrav, da kan du skrive det. Greit, sånn er det. Ingen vei utenom.

Erling: Liten avsporing, da jeg skulle melde meg opp på HBO Nordic, så spurte de etter adressen min. De skulle hatt et felt som forklarte hvorfor de skulle ha adressen min.

Anders: Og dette hadde de ikke hatt en god forklaring på. Sannsynligvis.

Erling: Nettopp. Videre.

Anders: Vi snakker visuelt. Plasser denne ledeteksten nært innholdet. Nærhetsprisnippet innenfor design. Denne er litt på siden, men veldig vanlig å feile på. Det er dette å bruke fieldset og legend for gruppering av spesielt radio- og sjekkbokser. Det var teknikker for ledetekst og instruksjoner.

Erling: Teknikker for labels og mikrotekst.

Erling: Så, 3.3.4 og 3.3.6. Hvilke teknikker har vi der?

Anders: Der har vi òg mange, men overordnet sett, så sier kriteriet at du skal ha mulig til å angre eller endre. Nå går vi gjennom ganske mange teknikker som går på å angre og noen som går på å endre. Men overordnet skal du tenke at enten angre det du har gjort eller endre det du har gjort, etter at du har gjort det.

Erling: Første?

Anders: Oppfordring til å gjennomgå data før innsending. Det er den klassise bekreftelsessiden. Dette er det produktet du er i ferd med å bestille. Dette er flybilletten du er i ferd med å bestille. Du har valgt avgang da eller da. Hjemreise da eller da. Se over dette. Er alt greit? Bekreft. I denne bør en ha en mulighet å gå tilbake, ikke nødvendigvis å gjøre endringene rett på bekreftelsessiden. Men hvis du har en stepper i toppen. Men shit, jeg har feil avreisedato.

Erling: Etternavnet på kona mi er skrevet feil.

Anders: Vi er jo gifte nå, så hun har tatt mitt etternavn. At du får mulighet til å gå bak og endre. Det er en teknikk.

Erling: De som feiler er de som sletter alt som har skjedd etter det du endrer. Det er utrolig irriterende for alle.

Anders: En bør bekrefte at vi har riktige opplysninger. Den bekreftelsen bør være separat fra innsendingsknappen.

Erling: Hva betyr det?

Anders: Det betyr at hvis du har en oppsummeringsside, der du skal ta et valg om sende det inn, så skal det da være valg som sier, dette er som regel en sjekkboks, som sier «jeg bekrefter disse opplysningene som står her, er korrekte».

Erling: Det høres ut som aksept av vilkår.

Anders: Ja, men det er det ikke. Vi må ikke blande det. Dette er bekreftelse på at de dataene som du som bruker har skrevet inn, er korrekte. Du skal kjøpe bilforsikring, og du bekrefter at kilometerstanden din er riktig. Du må tenke deg om en ekstra gang, du må ta et aktivt valg. Det er ikke godt nok å skrive en tekst før innsendingsknappen om at «ved å trykke på denne knappen, så bekrefter du at de overstående opplysningene er korrekte». Jeg tror at det er akseptert rent juridisk sett, men ikke WCAG-sett.

Erling: Og dette er jo 3.3.4, dobbel A, så du bryter loven hvis du ikke gjør dette, så juridisk sett, så er det ikke lov likevel? Hehe. Jeg tror ikke boten kommer av dette.

Anders: Jeg tror ikke det er mange jurister som kjenner til WCAG 3.3.6 heller. Men!

Erling: Hvis en har sendt inn? Kan vi endre etterpå?

Anders: Da er det fint å ha en mekanisme for det. Eller en forklaring på hvordan du gjør det. Det trenger ikke å være en knapp, det kan være at du må ringe eller sende e-post for å angre bestillingen eller handlingen din. Men det er jo selvfølgelig at det skjer i en digital sfære. Så handler dette òg om sletting. Så vi ønsker òg å kunne slette data, og bekrefte det, og da snakker vi om større slettinger, ikke om å slette en bilde på Facebook …

Erling: Vil du slette ditt kundeforhold i banken din?

Anders: Vil du slette dette kontonummeret? Og mulighet for å angre den slettingen, det er noe mange ikke har. Og jeg anser det som et bedre prinsipp å ha mulighet til å angre en sletting, kontroll z, eller å måtte bekrefte alt en gjør.

Erling: Generelt så er jeg selvfølgelig helt enig. Men det er situasjoner hvor en må en gjennomføre en faktisk sletting. Og her kommer personvern og GDPR inn. At når du ber om å bli slettet så blir du faktisk slettet. Å understreke at det som skjer nå, er ikke reverserbart. Det er noen flyter som ivareta det. For eksempel når du trykker slettknappen, og får opp et spørsmål om du er helt sikker, og må skrive slett med store bokstaver i feltet under, og trykk bekreft. Da har du understreket at den handlingen du gjør, ikke er reverserbar.

Anders: Og den typen mekanismer lager du for å forhindre feil, altså for å være i tråd med WCAG 3.3.4. Og så har vi den som sier at du skal tilby en tid det er mulighet til å angre. Alle forstår at du ikke kan få uendelig med tid, hvis du skal kjøpe en flybillett, det må være en grense.

Erling: Det kan ikke være syv måneder.

Anders: Kriteriet sier ikke noe om hvor lang tid det skal være, men at en skal tilby en gitt tid.

Erling: Det var teknikkene. Det var en god liste. Og heldigvis kommer det i transkriptet til episoden, så du kan gå inn der. Har du hentet noen av disse fra Difi?

Anders: Det kan jeg godt nevne. For noen av disse er fra WCAG. Og noen av de er fra Difi, men fra deres testprosedyrer. For hvis du går inn og leser om 3.3.4 så får du ikke opp disse her. Men deres testprosedyrer, altså hvordan de gjør evalueringer. Det er ganske skjult å finne de på nettsidene. Men de er veldig fine, for det er så konkret. Når du vet hvordan de tester det, så er det et godt samsvar med hvilke teknikker en bør bruke. Grunnen til at de skjuler dem, er fordi deres testprosedyrer ikke nødvendigvis er … de har jo valgt noen testprosedyrer for et kriterie, de er ikke nødvendigvis dekkende, det er kanskje derfor de er litt forsiktige med dem.

Erling: Men det trenger ikke vi å være.

Andre situasjoner?

Erling: Hvilke andre situasjoner? Vi har jo snakket mye om det hele tiden, egentlig. Det er jo generell brukervennlighet.

Anders: God skjemadesign. Som vi snakket om forrige episode, mye av dette er gode praksiser for hvordan du skal utforme digitale skjemaer. Innenfor design da, det er på skjema det er først sprik, folk er kreative på den gode og dårlige måten. Det er konvensjoner. Det er mye praksiser. Som vi så sist, så hoppet placeholderen ned under skjemafeltet.

Erling: Når du sier det. Det er som om designere har en trang til å være kreative når det kommer til skjema. Skjema brukes når bruker skal løse en veldig spesifikk oppgave. Du skal ikke skape stor ståhei. Du skal lede de gjennom det skjemaet på en effektiv måte, som ikke leder til feil.

Anders: Det vil jeg gjenta Jakobs lov, som folk glemmer. Folk bruker mesteparten av tiden sin på andre skjemaer enn ditt skjema. Så følg konvensjonene.

Erling: Andre ting?

Anders: Konverteringsrateoptimalisering. Det tunge, tunge ordet.

Erling: Det er ganske fint og langt. Jeg tok feil i dag. Jeg leste ordet veldig fort, så snakket vi om det, jeg hadde lest det som søkemotoroptimalisering, som òg er et veldig langt og kjedelig ord.

Anders: Det vi snakket om i dag har ingenting med søkemotorer å gjøre, men dersom du forhindrer feil og skaper trygghet hos brukeren, og brukeren forstår hva som skal inn, så får du mer salg.

Erling: Du øker sjansen til at folk fyller ut skjemaet og fullfører det.

Må du?

Erling: Bryter du loven? Hvor mange A-er har disse?

Anders: Den med ledetekst og instruksjoner er en enkel A. Den må du gjøre. Det er ikke tvil. Du må forklare hva som skal inn i et felt. Det er opplagt. Den med forhindring av feil er dobbel A. Den må du òg følge. Forhindring av feil i alle skjema er trippel A. Heldigvis.

Erling: Ikke lovpålagt. Det hadde vært sykt slitsomt.

Anders: Men det kan være mange skjema som har store konsekvenser som ikke nødvendigvis er økonomiske eller juridiske, som bør bruke disse teknikkene som vi har snakket om i dag.

Erling: Mye av det vi har snakket om i dag, som burde vært brukt i generell skjemadesign.

Anders: En skal strebe etter å bruke teknikkene her, men en kan ikke kreve bekreftelsesside på et enkelt kontaktskjema.

Aside

Erling: I dagens aside skal vi snakke om etikk. Designetikk. Høres tungt ut.

Anders: Han her Mike har fått meg til å bli mer glad i temaet etikk. Det slo meg i dette foredraget vi var på, han snakket jo ikke om universell utforming, han snakket mer om misbruk, om hvordan et dårlig design kan påvirke livet til folk.

Erling: Kan føre til selvmord, rasisme og hva det måtte være. Til og med krig. Nesten atomkrig.

Anders: Det slo meg at veldig mye av dette er overførbart og gir mening for vårt fagområde.

Erling: Det han har gjort, er å lage et forslag til code of ethics. Og vi har valgt tre av de. Det er totalt ti. Tre av ti. Den første er som følger, «A designer is responsible for the work they put into the world.». Først, før vi gå innpå den. Begrepet designer her. Det er et brukt veldig bredt. Det er egentlig den definisjonen som jeg foretrekker og preker titt og ofte. Design og en designer er noen som skaper noe, skaper noe med intensjon. Dette er ikke bare visuell design, uu-design, interaksjonsdesign, tjenestedesign og den gjengen der. Dette er utviklere, produkteier, innholdsprodusenter og så videre. Det er folk som lager noe som skal bli brukt av noen. Bare for å gjenta, «A designer is responsible for the work they put into the world.». Alle som lager noe er ansvarlig for det de produserer.

Anders: Mike sin definisjon er noen som løser et problem. Men å lage noe, du lager ikke noe bare for gleden.

Erling: Forhåpentligvis så løser det et problem det du lager, ellers så er det ingen som bruker det.

Anders: Men saken er den, når du lager noe, uansett om du koder eller tegner, eller hva du måtte gjøre, så er du ansvarlig for det du lager. Så hvis du lager noe som ekskluderer mennesker, så har du et ansvar.

Erling: Det er jo mye det universell utforming handler om. Vi snakker om inkludering. og tilgjengeliggjør. Men hvis du ikke inkluderer og ikke tilgjengeliggjør, så ekskluderer du, du gjør det utilgjengelig for ganske mange. Hvor kjekt er det? Det er ganske dust.

Anders: Jeg synes det er en fin regel. Ikke en regel. Et fint prinsipp.

Erling: Og den neste.

Anders: Disse har jo en offisiell norsk oversettelse, som ligger på Gitlab.

Erling: Github.

Anders: Github, ja.

Erling: «A designer strives to know their audience.» Og det treffer oss jo veldig. Det Mike snakker mye om, er du tre hvite menn som designer en tjenester, så ivaretar du behovene til de tre hvite mennene. Og hvis de er funksjonsfriske i tillegg, så ivaretar du behovene til tre funksjonsfriske, hvite menn. Det å forstå hvem som skal bruke produktet. I vårt tilfelle om de er funksjonsfriske eller ikke. Det går òg på mangfold. Rase, kultur, kjønn.

Anders: Der snakker vi om u-en i UX-faget. Uten å forstå brukeren, så driver du ikke med UX. Og jeg putter lett uu under UX-paraplyen.

Erling: Jaja, de har store overlapp.

Anders: Det å kjenne sitt publikum, det får du til både med å gjøre intervjuer, tester og observere, men du gjør det òg ved å invitere folk inn, ansette eller …

Erling: Og Mike Monteiro gjør et stort poeng med at det er begrenset hvor mye, han bruker ordet empati, en kan ha med de marginaliserte gruppene. Det å ansette folk som har andre bakgrunner, som ikke er hvite menn, i utgangspunktet, er essensielt, for å lage noe som treffer alle. Men det er klart, jeg kan jo ikke i en liten bedrift, ansette 40 mann med hver sin funksjonsnedsettelse, men det er ikke det det er snakk om heller. Noen med funksjonsnedsettelser forstår utfordringer som folk uten funksjonsnedsettelser har, mye bedre enn de som ikke har det. På generell basis.

Erling: Så den siste. Jeg sliter litt med hvordan den er skrevet. «A designer does not believe in edge cases. » Og måten jeg har brukt begrepet edge case på, opp gjennom årene, er at dette er noe brukerne kommer til å gjøre så sjelden, å betyr så lite, at vi trenger ikke å bruke mye tid på å ivareta den edge casen. Men for Mike her …

Anders: For du tenker slik at dersom du fyller ut dette skjemaet, og tilfeldigvis trykker A på tastaturet, akkurat i det du trykker sendknappen med musen, så knekker det.

Erling: Så sprenger maskinen.

Anders: Det er en edge case som er grei å ignorere.

Erling: Men det Mike mener er ikke edge case, men edge people. Altså edge users. Og da er hjertens enige.

Anders: Han snakker om who, han snakker om people.

Erling: Edge case. I vårt tilfelle kan de med funksjonsnedsettelser fort bli sett på som det Mike kaller edge case. Det er så få som har den funksjonsnedsettelsen, vi trenger ikke å bry oss om dem. Bare for å gjenta, «A designer does not believe in edge cases.».

Anders: Det diskuterte vi litt med ham òg. Vi snakket ikke om funksjonsnedsettelser. Vi snakket om hvilke telefoner du skal støtte. Der kom vi inn på det som Rannveig òg snakket om. Du ser at en eldre modell har en liten brukerandel, men så er det kanskje de fattigste som bruker den. Er det da riktig å ekskludere de, bare fordi det er lite bruk? Nei. Det går jo en grense, men det er ikke alltid du skal følge 80-20-regelen.

Erling: Det var de tre. Veldig fine. Anbefaler folk å sjekke i episodelenkene, for der ligger lenke til alle disse ti.

Anders: Men jeg vil si. Alle som hører på nå. Uansett om du er enig eller ei, så er du en designer. Du er ansvarlig for det du lager. Du må kjenne ditt publikum. Du tror ikke på å marginaliserere kundemassen din.

Erling: Finn oppsummering.

Ris og ros

Ticketmaster

Erling: Så til dagens ris og ros.

Anders: Du er litt tett i nasen, Erling. Går det bra med deg?

Erling: Jeg er litt tett i toppen. Nå er vi snart ferdige her, så skal jeg hjem å legge meg. Ris og ros. Billetter. Billettservice. Ticketmaster og gjengen. Nå skal vi ta det på sparket. Skal vi bare hoppe i det? Skal vi minne oss selv hva vi skal fokusere på? Har vi det klart for oss?

Anders: Det har vi klart for oss.

Erling: La oss gå til da.

Anders: Vi går til Ticketmaster først.

Erling: Det som før het Billettservice.

Anders: Det visste ikke jeg, men jeg tror på det.

Erling: Jeg tror Ticketmaster kjøpte Billettservice.

Anders: Jeg vil på Iron Maiden-konsert. Tons of Rock.

Erling: Med Disturbed. Og Dimmu Borgir og hele gjengen. Her begynner det noe, kanskje ikke relatert. Jeg fikk et skjema på toppen her, men det var ikke relatert. Som vi kunne ha diskutert. Hva gjør jeg nå? Salget starter om seks dager. Da går vi tilbake og finner noe som vi kan kjøpe. Skal vi gå på Snøfall heller.

Anders: Det er barneteater. Billetter til Snøfall uten mellomrom.

Erling: Da tar vi 14. november klokken seks i Oslo ny teater.

Anders: Alle som hører på nå, hører på dette mye senere enn 14. november. Men greit. Dette er jo et ganske avansert grensesnitt. Eller.

Erling: Jo, det er jo det. Det har mange forskjellige komponenter som man må ta stilling til. Kan vi definere dette som et skjema?

Anders: Nei. Når du sier «det», nå må du gjør dette radiovennlig.

Erling: Ja, men i et avansert grensesnitt, så er det mange måter å interagere. Det er snakk om inputdata her.

Anders: Dette er ikke skjema. Det vi ser på nå er hvor i salen du ønsker å sitte. Du har en illustrasjon av hvordan salen er. Dette faller ikke inn under de kriteriene vi har snakket om i dag.

Erling: Jeg kunne godt ha utfordret det mer, men jeg kan akseptere det for nå. Dette kunne vært radioknapper nedover.

Anders: Jeg er åpen for diskusjon. Dette med å forhindre feil, som er økonomisk forpliktende.

Erling: Hvis du hadde hatt en liste med radioknapper med balkong, sidebalkong …

Anders: Jeg gir meg.

Erling: Da er det lett å gjøre feil når du har den oversikten som de har her.

Anders: Nå skal vi ikke gå i den fellen vi gikk sist, der vi gikk bananas på alle slags kriterier. Men. Det er alltid et men. Her ser vi at de har kun brukt farge for å signalisere om noe er tilgjengelig eller ikke. Det er en lys, eller relativt lys, blåfarge for det som er tilgjengelig, og en gråfarge på det som ikke er tilgjengelig. Det hadde brutt den som heter bruk av farge. Der tror jeg ikke vi fant så mange gode eksempler.

Erling: Så her har vi et.

Anders: Men jeg skal slutte å ha på alle uu-brillene mine.

Erling: Nå fokuserer vi på ledetekst og sånn. Nå klikket jeg på det bildet, og fikk opp at jeg skulle velge noen seter. Her da, vil du kalle dette et skjema? Nå fikk jeg en overlay med forskjellige type billetter med barn, honnør og så videre.

Anders: Nei, dette er ikke et skjema. Her skal du velge en billettype.

Erling: Da velger jeg ordinær. Jeg tror det skjedde noe. Ikke tydelig.

Anders: Veldig utydelig. Det skjedde noe i bunn. En slags handlekurv i bunn. Greit.

Erling: Nå må vi ikke ta på oss de brillene.

Anders: Nå nærmer vi oss et skjema.

Erling: Nå går vi gjennom et steg. Igjen, dette treffer andre suksesskriterier. Tid som er tilgjengelig for å fullføre ordren er ni minutt. Trykker fortsett. Tipper at det kommer et skjema snart. Logg inn.

Anders: Ja, vi er inne i et skjema.

Erling: Det står at jeg må registrere meg. Oi. Skulle du si noe på logg inn?

Anders: Nei. Der var det to skjemafelter og en knapp. Og alle de har gode nok ledetekster. Vi har e-post og passord og logg inn, og alle de er beskrivende. Litt morsomt at de bruker stjerne på e-post og passord, for det er overflødig.

Erling: Det kunne de ha kuttet.

Anders: Men ingen krise.

Erling: La oss gå på registrer deg-skjemaet, for der kan det være noe. Det første jeg ser er noe som fremstår som, det står bare «obligatorisk», uten noen indikator på noen ting. Og det de har prøvd å si der, er …

Anders: Alle feltene er obligatoriske. To hunder i bakgrunnen her som skal ha slosskamp, beklager det.

Erling: De koser seg de.

Anders: Ja, de lekesloss. Jeg tror de skal signalisere at stjerne betyr obligatorisk, men så har de av en eller annen grunn fjernet stjernen i obligatorisk-valget. Ledetekstene ser greie ut. Det som jeg vil si her, er at ledetekstene er visuelt sett veldig langt fra skjemafeltene.

Erling: Og de ligger til venstre.

Anders: Ja, og det var egentlig normen før. Men etter mobil tok over, så kjører vi stort sett ledetekst over, på både stor liten og skjerm.

Erling: Det har noe med retningen, at du går nedover. Ikke frem og tilbake, frem og tilbake.

Anders: Et z-mønster. Men her, med for eksempel en forstørring, så vil det være knotete å finne ut hvilke felt som hører til hvilken etikett.

Erling: Med å zoome seg inn kan det bli vanskelig. Men her har de brukt fieldset og legend.

Anders: Nå handler jo ikke dette om kode, men her har de brukt det veldig riktig. Det vil si at de har laget logiske grupperinger av skjemafelter for å bryte det opp. Veldig bra Ticketmaster.

Erling: Bare for å dra gjennom de første feltene. Det er da e-post, så er det bekreft e-post.

Anders: Det snakket vi om forrige gang. Helt unødvendig. Skal ikke ta den nå.

Erling: Så er det passord og bekreft passord. Helt unødvendig. Så kommer vi til neste fieldset, neste sett med felt. Der har vi personalia, som er fornavn og etternavn. Bra, det er tydelig. Så kommer vi til neste, som er faktureringsinformasjon. Så kommer adresse. Neste er postnummer. Her kan vi kommentere at postnummerfeltet er like bredt som adressefeltet.

Anders: Dårlig skjemadesign.

Erling: Det snakket vi om i teknikkene, det å hjelpe med formatet, med å maskere. Størrelsen på inputfeltet kan bidra med å forståelsen for hvilket format dette skal være i. Så hvis du har et postnummerfelt der det ser ut som det er plass til fire siffer, så øker du sjansen for at det blir forstått.

Anders: Veldig rart. De har land, og vennligst velg. De har ingen indikator på at det er en select, men jeg regner med at det er det.

Erling: Det er det. Nå kommer det en. Stat.

Anders: Ja! Bra.

Erling: Nå vet ikke jeg hva jeg skal skrive inn. Det vet jeg faktisk ikke. Jeg pleier å skrive inn NA. Not available.

Anders: Står NA for not available? Jeg tror det står for not applicable, men jeg er ikke sikker.

Erling: Selvfølgelig gir det mer mening.

Anders: Hehe, jeg skulle bare pirke litt i deg.

Erling: Helt konge. Nå lærte jeg noe i dag. Jeg har lært mye i dag. Her er det en ledetekst som heter stat, og et inputfelt. Her kunne de ha hjulpet. Her blir det usikkerhet for mange, sannsynligvis.

Anders: Her kan det skje at feltet forsvinner hvis vi velger Norge, du kan jo prøve. Kudos til Ticketmaster for at listen er alfabetisk, og Norge står først.

Erling: Det er ikke ofte vi ser.

Anders: Kunne ha vært forhåndsvalgt siden vi er på ticketmaster.no.

Erling: Men statfeltet består.

Anders: Men det er deaktivt, selv om det visuelt ikke er det. Det er ingen visuell indikator på at det ikke går an å skrive inn, men det går ikke an.

Erling: Nå ser jeg at tiden på skjemaet går ut om tre og et halvt minutt, så vi kommer nok til å time ut.

Anders: Og det går ikke an å utvide. Og det er jo et krav. Ganske morsomt at de har begynt på en fin inndeling med bolker med fieldset, så har de kommet til en som ikke passer inn i de ulike bolkene. Den har de kalt «varierende».

Erling: Veldig beskrivende.

Anders: Det sier ingenting det. Ingenting.

Erling: Diverse. Annet.

Anders: Egentlig er dette helt greit. Helt tradisjonelle ledetekster, de er riktignok litt langt ifra. For eksempel den som heter stat, der er det nok 2–300 piksler fra ordet stat til skjemafeltet begynner.

Erling: Og jeg tror ikke den er sentrert på feltet heller. Ikke en rett linje mot det.

Anders: Så vi har egentlig testet at det er helt greit. Vi får ikke testet den forpliktende …

Erling: Jeg har ikke lyst å kjøpe billetter til Snøfall, for den er i Oslo.

Anders: Så vi tar dessverre ikke en god evaluering på 3.3.4, så vi kjører 3.3.2 nå. Så jeg vil si at det var greit. Terningkast fire.

Ticketco

Erling: Nå går vi på Ticketco. Jeg lar denne stå for å se hva som skjer når tiden går ut. Vi går på Ticketco. Her må vi velge land som det første.

Anders: De har lagt forventningene våre. Event payments made easy. Skal du «Song i fjordande og Konstanse Herland syng blues med blå resept»? Det er i dag det.

Erling: Det er i dag. Da går jeg inn på den og trykker bestill. Skjedde det noe? Hva skjedde? Jeg ser hva som skjedde.

Anders: Jeg ser ikke hva som skjedde. Du har trykket på … du har ikke valgt noen billetter.

Erling: For bestill billetten var over.

Anders: Vet du hva, dette har jeg aldri sett før. Feilmeldingen er over hele headeren. Altså, feilmeldingen er over logoen og hovedmenyen. Så teksten «Du har ikke valgt noen billetter» er vanvittig langt fra bestill.

Erling: Helt ute av kontekst. Dette var veldig snodig.

Anders: Ok.

Erling: Dette gjelder ikke disse suksesskriteriene, men.

Anders: Her! Kabaam! Klakk, bom.

Erling: Hva gjorde jeg nå?

Anders: Det er to tilgjengelige varer. De har kalt det varer. Det er jo òg en ledetekst. Du har altså to typer billetter. Én som er student, og én som er fullpris. De to billettypene har hver sin nedtrekksmeny. Begge står på null. Men det står ikke hva den nedtrekksmenyen gjør.

Erling: Nei.

Anders: Der mangler det ledetekst, og det er helt opplagt at det burde stått «antall».

Erling: Absolutt.

Anders: Der bommet de, Ticketco.

Erling: Men! Bare for å ta perspektivet på det. For det vi snakker om i lys av disse suksesskriteriene, så er det snakk om at det visuelt er opplagt hva det feltet gjør. Nå står den rett ved prisen, og en kan argumentere med at det er en konvensjon at et nedtrekksfelt med antall i rett ved siden av prisen, så er det opplagt at det er antall av det som den prisen er for.

Anders: Vel, ikke enig.

Erling: Tror du at det er noen som ikke hadde forstått at det er antall billetter?

Anders: Ja. Det tror jeg.

Erling: Da er det dumt.

Anders: Og i informasjonsboblen som er først, så får vi bare se at det ikke er noe avgift her. Det er en infoboble først.

Erling: Har ingenting med inputfeltet å gjøre. Da tar jeg å velger én student.

Anders: Jeg skjønner hvorfor du stiller det spørsmålet til meg, og ja, de fleste vil kanskje se det, det er kanskje usaklig å si at noen vil misforstå, men det er her en brukertest …

Erling: Det er et brudd på suksesskriteriene.

Anders: Det er hvertfall brudd på 1.3.1, for uten et visuelt grensesnitt så vil det være mye vanskeligere. Det vil ikke forkludre grensesnittet å skrive antall der. Vil jeg påstå.

Erling: Det kunne de lett ha fått inn. Her har vi femten minutter. Jeg må gå tilbake å se. Oi, jeg gikk tilbake til Ticketmaster. «Tiden har gått fra deg. Du har brukt for lang tid.» Bla bla bla. «Slapp av, vi har lagret dine billettpreferanser slik at du kan gjenopprette billettene nå. Alternativt kan du starte et nytt billettsøk.» Det var egentlig en forlengelse av tiden da.

Anders: Det var bra.

Erling: Tilbake til Ticketco.

Anders: Men bare, Ticketco, de fremsto som moderne i starten, og nå har vi plutselig blitt kastet ti år tilbake i tid.

Erling: Dette var jo voldsomt. Sjekk de knappene!

Anders: Nå var det ikke det vil skulle … Ok.

Erling: Spennende.

Anders: Vi må holde oss til saken. Vi ser nå fire felter. De har òg ledetekstene til venstre for feltene, men de har høyrestilt teksten, som er mye bedre. Da følger de proximity-prinsippet. De bruker òg stjerne. De gjør det som en skal gjøre, altså forklare hva stjernen, det som jeg sa ikke var strengt tatt nødvendig.

Erling: De skriver «Alle felt som er markert med stjerne må fylles ut av deg».

Anders: Men de gjør jo det etter skjemaet, og det er jo veldig dumt for de som bruker dette sekvensielt og dersom noen ikke hadde forstått stjerne.

Erling: Én ting som jeg tror jeg likte litt her, at over de fire feltene, altså fornavn, etternavn, mobiltelefon og e-post, så står det «Hvem er du som kjøper billettene?». Da er du mer spesifikk. For her kan det oppstå usikkerhet. Hvis jeg skal kjøpe billett til deg, for jeg vil gi det i bursdagspresang. Du har nettopp hatt bursdag.

Anders: Ja.

Erling: Gratulerer på etterskudd.

Anders: Takk takk.

Erling: Så her er «Hvem er du som kjøper billettene?» mer beskrivende.

Anders: Helt enig. For hadde det ikke stått, så hadde du vært usikker hvis dette var en gave. Må jeg skrive navn og etternavn til personen som skal motta, eller er det mitt? Veldig fint.

Erling: Ellers, skjemaet i seg selv. Fornavn i et felt, etternavn i et felt, e-post i et felt og mobil i et felt. Og her har de brukt maskering.

Anders: Ja, men på den litt dumme måten, fordi at de har brukt tallene 0000 i stedet for, og de har òg brukt bindestrek, så her sier de til meg at jeg skal skrive to bindestrek inne i telefonnummeret mitt, og det gjør jeg forvirret. Og det er dette vi skal unngå, vi ønsker ikke forvirrig i skjemaet.

Erling: Og det er altså, det første jeg tenkte her var, hvorfor står det sånn amerikansk greier, for der bruker de bindestrek. Jeg blir helt forvirret her, selv om det egentlig skulle hjelpe.

Anders: Dette er nok, som du sier, fordi det er en utenlandske løsning.

Erling: Og jeg tror i Norge, på telefonnummer, så er det ikke behjelpelig å si tre pluss to pluss tre. Folk skriver inn åtte siffer, og de kjenner igjen formatet med åtte siffer. Her var det en bjørnetjeneste.

Anders: Og her har de to felter i ett, der det ene mangler ledetekst, for de har kombinert innskrivningsfelt og nedtrekksmeny for landskode, og det er et ganske uvanlig designmønster. Det er jo kodemessig et mareritt.

Erling: Ja, det er ikke mulig å fange opp fokuset.

Anders: Du klarer ikke å bruke det med tastatur. Her har de vært litt vel kreative.

Erling: Hadde det vært et vanlig felt ved siden av, her har de gjort det verre ved å tilpasse det. Nå må jeg fylle inn feltene for å komme videre. Da er det asdf som er mitt navn. Og så blir jeg litt forvirret, for her er det en knapp som heter betal, men jeg har ikke lagt inn betalingsinformasjon. Jeg har heller ikke sagt hvem som skal gå. Jeg trykker på betal, jeg regner jo med det er der jeg skal trykke. Nå ble jeg usikker.

Anders: Før du trykker nå. Her er det jo plutselig en sjekkboks som plutselig nå ble animert, den poppet litt ut. Jeg aksepterer herved juridiske vilkår, men med en veldig rar plassering.

Erling: Ikke bare det. Mellom det siste inputfeltet og den knappen som du sender inn skjemaet med, så er det to, kanskje tre, andre knapper. Det er en som heter benytt gavekort. Som en kan forstå, rett under der kommer cookievarsel. Så nede til høyre er hjelp som er chat, som ligger over betalknappen. Begge er gule. Helt til venstre i skjermbildet, helt til venstre i viewporten, ligger den du nevnte sjekkboksen for å akseptere juridiske vilkår. Jeg trykker på den og trykker på betalknappen som faktisk tar opp 50 % av bredden.

Anders: Veldig utradisjonell skjemautforming. Neineinei, knappeutforming.

Erling: Det er for de som skjønner litt CSS, den har da position fixed i bunn. Det er en handlekurvknapp eller noe til venstre, jeg vet ikke om det er knapp, som tar opp 50 % av bredden, og den er grønn. De resterende 50 prosentene er gul med en tekst midt på, som er betal. Det er den vi regner med er knapp. Det at det står betal nå gjør jo at jeg blir usikker.

Anders: Dette er veldig forvirrende.

Erling: Dette er veldig dårlig skjemadesign

Anders: For det er en handlekurv som jeg ikke forstår hva betyr, enig med deg. Den er grønn. Alle andre er gule. Den får både oppmerksomheten min fordi den er grønn, grønn signaliserer et korrekt valg, du ønsker å gå videre, du ønsker å gjøre noe riktig. Og den skiller seg ut fra alle de andre, for alle andre er gule. Uten å lese handlekurv, så har denne mye større affordance enn betalknappen.

Erling: Skal vi prøve å trykke på den, for å se hva som skjer?

Anders: Ja.

Erling: Da laster den noe. Oi. Nå må vi holde oss litt, Anders, for her skjedde det mye.

Anders: Vi trykket på en gigastor knapp i bunn, som heter handlekurv, og nå er jeg inne i Scandic Sunnfjord Hotell og Spa.

Erling: Larris scene. Kontakt arrangøren. Et bittelite bilde på toppen, og en liste over mange andre arrangementer.

Anders: … som samme arrangør har.

Erling: Nå skjønner jeg ingenting. I toppen er det en teller, og så er det en handlekurv. Hva skjer hvis vi trykker på den handlekurven? Nå må vi ikke ta helt av her.

Anders: Bruk tilbakeknappen, jeg er forvirret.

Erling: Jeg trykker tilbake. Jeg trykker tilbake én gang til. Da er jeg tilbake.

Anders: Nå har den slettet alle dataene vår. Vi må skrive på ny.

Erling: Sukk og stønn! Fy søren. Jeg får sykt dårlig inntrykk av Ticketco.

Anders: Jeg hadde håpet … du skrev inn telefonnummeret ditt uten bindestreken, som placeholderen viste at du skulle ha. Jeg håpte litt på en feilmelding nå, at du har glemt bindestrek i telefonnummeret ditt.

Erling: Det jeg gjorde nå, var å legge inn med bindestrek, for å se om skjemaet feiler.

Anders: Vi trykker på betal.

Erling: Det aksepterte telefonnummeret med bindestrek. Så er vi inne i betalingsvinduet. Et ganske ordinert kredittkortbetalingsvindu. Jeg har fortsatt ikke fått mulighet til å skrive inn navn til den som skal få dette.

Anders: Og det er litt bekymringsverdig.

Erling: For jeg ble usikker på om det var et godt råd, om det var hjelpelig, eller om det var forvirrende.

Anders: Nå forventer jeg jo at vi er i siste steg, og etter dette skjermbildet her, så kommer vi til gratulerer, du er i mål.

Erling: Men du, skal vi prøve noe her? Skal vi kjøpe denne billetten her. 149 kroner. Så ser vi om vi kan angre etterpå.

Anders: Ja, la oss gjør det.

Erling: Jeg må springe og hente kortet mitt.

Anders: Jeg har mitt i lommen, jeg har fått lønn i dag. Du har det jo der inne, i nettleseren. Veldig bra. Det som skjedde her. Dette blir en avsporing. Du fyllte ut kortnummeret ditt, og da dukket det automatisk opp Visalogoen, for de fire første sifrene i kortnummeret sier hvilken type kort det er. Og det skaper en trygghet på at du har gjort det riktig. Det er god skjemadesign. Men nå er vi inne i en tredjepartsløsning her.

Erling: For dette er et helt annet type skjema. Nå vet jeg ikke om utløpsdato …

Anders: Nå må vi ikke glemme, Erling, vi skal snakke om ledetekster her. Vi ser tre felter med tre ulike ledetekster: kortnummer, utløpsdato og CVC/CVV. Her vil jeg si at kanskje er CVC og CVV en god kombinasjon, men jeg hardnakket påstå at å ha en liten informasjonsboble der, som forklarer, ikke nødvendigvis hva de tre bokstavene står for, men at det er en liten kort ID som du finner på baksiden på kortet ditt, som brukes i forbindelse med digitale kjøp.

Erling: Og det er et ganske vanlig mønster i kortskjema.

Anders: Der vil jeg si at ledeteksten er dårlig, men de har en visuell ledetekst. Nå har de en stor gul knapp.

Erling: Nå vet jeg ikke om informasjonen er korrekt, men jeg prøver.

Anders: CVC declined. Vi får en feilmelding på engelsk.

Erling: En stor feilmelding, tar opp hele skjermen.

Anders: Det er alt som står, så her bryter vi jo forrige episode, at det er ingen forslag til hva du skal gjøre.

Erling: Det står ikke i kontekst av der feilen oppstod.

Anders: Skjemaet er forsvunnet.

Erling: Hva gjør jeg nå?

Anders: Det er en lukk som er halvveis skjult. Du må trykke lukk der.

Erling: Men den er dekket av cookievarselet. Fy søren. Ticketco, hvis dere hører på dette, det er mye å ta tak i. Skal jeg trykke på lukk?

Anders: Ja.

Erling: Og da ble vi tatt vekk fra skjemaet. Så det betyr at hvis du har motoriske utfordringer, og skrev inn feil på CVC-en, du bommet på det ene nummeret, og trykket send inn, så må du begynne på ny med kortdetaljene.

Anders: Dette er veldig dårlig feilhåndtering. Vi går videre, Erling. Knappen betal virker ikke lengre. Det er ikke en knapp. Jo. Det som har skjedd nå, er en for stor blemme til å ikke nevne det. Det som har skjedd, det er en antagelse, betal ser helt lik ut som den gjorde tidligere, den er like stor og like gul, ligger i bunn, han er ikke klikkbar, han er ikke utgrået, men har den vanlige muspekeren, ikke hånden. Min teori er at vi ikke har akseptert vilkårene.

Erling: Jeg har en annen teori.

Anders: Oi, spennende.

Erling: Se på telefonnummeret. Det har blitt slettet. Da prøver jeg kun å ta aksepter vilkårene. Der kom hånden.

Anders: Min teori stemmet. Hånden kom. Du slapp å skrive telefonnummer, selv om det var påkrevd.

Erling: Hva skjedde nå da?

Anders: Jeg får høyt blodtrykk, Erling.

Erling: Dette er så dårlig.

Anders: De har ikke sagt noe om dette med å angre. Det er veldig lite tydelig hvor en er i kjøpsprosessen. Alt er et sammensurium. Vi har sett ulike handlekurver.

Erling: Men så du hva som skjedde nå? Forrige gang vi trykket på betalknappen, så kom vi til betalingsvinduet. Nå aksepterte vi vilkårene, men telefonnummeret var slettet, de hadde tømt det feltet. Vi fikk trykket betalt. Vi kom inn et nytt sted, ikke der vi legger inn kortdetaljene, jeg kom inn en plass med ordrelinjer. Og det som skjedde nå var et jeg fikk opp et surt smilefjes. Handlekurven din er tom. Velg det du skal kjøpe først i kjøp.

Anders: Med kjøp i store bokstaver.

Erling: Og det er ingenting i dette skjermbildet som heter kjøp. De refererer til noe som ikke finnes. De slettet alt. Ingenting om at det var tiden som gikk ut. De ga oss ikke muligheten til å utvide tiden. Jeg må sannsynligvis starte denne prosessen helt på ny. Jeg må finne den samme eventen. Dette er så dårlig. Totalt bilkrasj.

Anders: Så det ble ikke noe blå resept på oss.

Erling: De mistet oss som kunde. Vi hadde jo intensjon om å betale de 150 kroner.

Anders: Du flekket jo frem betalingskortet ditt.

Erling: Det gikk ikke. Fikk det ikke til. Helt bak mål. Åkei.

Tix

Erling: Den siste, Tix.

Anders: Her ble jeg nysgjerrig. Meget moderne førsteinntrykk. Hva er alt dette?

Erling: Grunnen til at du sier moderne er at det er bilder over alt. Store bilder. Tekst over bildene. Veldig moderne og lite tilgjengelig. Noe av teksten har solid bakgrunn, eller nokså solid bakgrunn. Men det er ikke det vi skal snakke om nå. Hvem vil du se, Anders?

Anders: Jeg synes den gjengen, Ras Harald og Lois, shine utopians, de så spinngalne ut.

Erling: Det vil vi gå og se. Ok, da er vi inne her hvor vi kan kjøpe billetter.

Anders: Nå havner vi i diskusjonen om dette er et skjema. For her er det veldig designet, hvis det er lov å si.

Erling: Det ser ikke ut som et skjema.

Anders: Men hvis du legger godviljen til, som du gjorde i sted, så er det kanskje et skjema.

Erling: Ja, det er jo det samme som Ticketco løst. Her har de ordinær og student. Og under har du mulighet til å velge én eller flere. Det er ikke kodet som et skjema, så da kan vi kanskje legge den død. Teknisk sett er det ikke et skjema.

Anders: Dette er bare interaktive komponenter.

Erling: Det at de har valgt én ordinær som default, er ikke det bra?

Anders: Superbra. De tenker, det som flest skal ha, det setter vi opp.

Erling: Som å sette Norge på toppen.

Anders: Skal ikke jeg få bli med, skal du gå alene?

Erling: Du skal få være med.

Anders: Fin fokusmarkering, eller nettleserstandard.

Erling: Trykker enter. Vi fant billetter til deg. Greit. Det er ett skjemafelt der.

Anders: Jeg ser det ikke. Ja!

Erling: Print selv. Det som er litt morsomt her, det er en radioknapp. I radioknappens natur kan du kun velge én av flere. Her er det da én, og den er valgt. Nå er nysgjerrig hva som skjer hvis jeg trykker på den, går den vekk?

Anders: Nei.

Erling: Nei.

Anders: Her skjønner jeg jo hvorfor det er slik. Det finnes sikkert andre billettyper som har andre leveringsmetoder. Fortsett.

Erling: Trykker fortsett. Der kom skjemaet, ja.

Anders: Nå er det blitt 440 kroner, så nå lurer jeg på om du kommer til å kjøpe dette, Erling. Her har vi et ganske fint brudd. Potensielt. De har først et skjema som sier logg inn med eksisterende profil, der de har brukt placeholder som ledetekst. Så sant den ikke hopper opp eller ned, så er dette et brudd, fordi den skal være synlig ved fokus. Og det gjorde den ikke.

Erling: Så det er et brudd.

Anders: Og her er det veldig rart, fordi i resten av skjemaelementene på samme side, så har de label til venstre.

Erling: De er ikke konsekvente. La oss gå ned til de andre feltene.

Anders: Det hadde vært litt morsomt dersom vi hadde kjøpt billett og faktisk gått på dette nå, for dette så morsomt ut.

Erling: Når var det, hvor var det? Fjortende i ellevte. Når er det?

Anders: Det er ikke lenge til, det er neste uke.

Erling: Hvilket kulturhus er det? Hvilken by?

Anders: Det står jo …

Erling: La oss ta skjemaet nå.

Anders: Her er det gode etiketter. Fornavn, etternavn, adresse. Postnummer. Her har de gjort det som …

Erling: Her er det litt blanding. Ser du det? Her har de blandet. Fornavn, etternavn, adresse, land, det er da label til venstre for inputfeltet. Egentlig et bra mønster, men fordi de har plassert postnummer til venstre for by, og postnummerfeltet er mindre, slik at det er en visuell indikator på at her skal det inn et satt antall tegn, og det er ganske få. Fire, som det jo er. Men by som står ved siden av, der har de brukt placeholder som label. Når jeg går inn der og skriver, ok, nå var det egentlig behjelpelig. For når jeg skrev inn postnummer, så fant den poststed automatisk. Det jeg lurer på nå, for jeg fikk fokus på det feltet. Kan jeg overskrive det?

Anders: Jeg synes ikke du bør kunne det.

Erling: Nei, men jeg kunne det. Fikk lov til det.

Anders: Dette feltet har ikke ledetekst, så det er en mangel.

Erling: Nå er jeg spent, for det er to kolonner her. Feltene til venstre er jeg kommet til bunn i. Land, Norge er valgt. Veldig bra. Rett under der, så står det en sjekkboks, til høyre er det to nye felt. Der var det en synlig fokus.

Anders: Du forsvant.

Erling: Der havnet jeg nede med den ja. Du, det er Sandnes Kulturhus.

Anders: Ja.

Erling: Tilsynelatende. Sjekkboksen hadde fokus, det var usynlig. Det er et brudd. Og så er det info her som var totalt ubrukelig. Så tar jeg neste, e-post.

Anders: Ikke si den var ubrukelig bare fordi du ikke gadd å lese den.

Erling: Ja takk til nyhetsbrev for Sandnes kulturhus og Kinokino, trykket jeg på i-en. Få med deg eksklusive forslag og tilbud/informasjon om hva som er på programmet i Sandnes kulturhus og Kinokino. Nyhetsbrevet sendes ut bla bla bla. Det synes jeg var ubrukelig. Dette er i Sandnes kulturhus. Skal vi gå å se disse? Ras. Shine utopians.

Anders: Jeg vet ikke om det er teater eller musikk eller … folk som har på seg rare badedrakter og sprang med noen morsomme hatter. Men ledeteksten er stort sett bra. Her har de brukt òg grupperinger av skjemafelter. Selv om det ikke er direkte knyttet til suksesskriteriet, så tviler jeg på at de har brukt semantisk kode. Altså jeg tror ikke de har brukt legend.

Erling: Da sjekker vi.

Anders: Det sjekker Erling nå. Det hadde de ikke, de hadde divet seg gjennom hele greia. Divorama.

Erling: Det var hvertfall label der.

Anders: Men veldig rart å bruke dl på …

Erling: Dette er superrart.

Anders: Men nå sporte vi av. Ledetekstene er gavekort, selv om det er kodet feil, det er nummer, det er pin-kode, innløs. De har gode ledetekster, stort sett.

Erling: Det kunne stått gavekortnummer. Nummer er litt tvetydig. Betalingsinformasjon ja. Dette er bra. «Når du trykker fortsett sendes du til betalingssiden hvor du kan fullføre betalingen.» Det skaper den riktige forventningen om hva som skal skje. En sjekkboks hvor du godtar alt.

Anders: Men meget rar plassering på den sjekkboksen.

Erling: Det er jeg enig i. Og så kommer vi til Dibs. Som på en måte er en helt annen tjeneste. Nå skal vi ikke kjøpe, Anders.

Anders: Jeg forstår ikke hvorfor en har innvalg hvilken type kort du har. Men det er det kanskje en grunn til som jeg ikke forstår. Det har ikke relevans for dagens kriterier.

Erling: Her skjedde det noe fint.

Anders: Nå er vi inne i Dibs sitt skjema.

Erling: Helt annen URL, helt annen plass.

Anders: Det jo i disse fishingtider veldig rart at logoen heter Dibs by Nets, litt forvirrende, men jeg kjenner til begge, men vi er på et domene som heter architrade.com. Den hunden vi har her heter Archie. Oi. architrade.com som jeg aldri har hørt om. Her hadde jeg blitt skeptisk. Nå sporer vi av igjen.

Erling: Det jeg ville si var fint, var at de hadde tatt med seg … for her står det navn på kontoinnehaver, og der kan vi kommentere ledeteksten først, navn på kontoinnehaver, hvorfor kontoinnehaver? Navn på kortet ville jeg tenkt var en bedre beskrivelse.

Anders: Kontoinnehaver er jo et stammespråk, så her er det brudd på den.

Erling: Men det de hadde gjort, bare for å komme frem til den, de hadde tatt med seg navnet fra det forrige skjemaet. Det er kudos, de gjør det enklere å fylle ut dette skjemaet. Men så feiler Dibs videre. Nå ble dette en evaluering av Dibs. Neste felt som er kortnummer, så har de brukt placeholder-mønsteret. Altså kortnummer står i feltet, med kolon til og med. Da jeg velger det, begynner å skrive inn, så forsvinner det. Så det er et brudd.

Anders: Og jeg vil si at det er et brudd på … nå er vi jo i gang med å økonomisk forplikte oss til dette. Vi har ikke fått en indikasjon på at det er mulig å endre. Men her har vi ikke informasjon som trygge oss i valget som vi gjør. Dette er brudd på, nå må du hjelpe meg Erling, hva heter 3.3.4?

Erling: 3.3.4 er … jeg husker ikke.

Anders: Forhindre feil.

Erling: Forhindring av feil. Juridisk, økonomisk forpliktende.

Anders: Nå er vi i ferd med å bruke 440 kroner. Her sier vi ingenting om hvilken dato det er, hvilken forestilling det er. Vi sier summen, heldigvis. Vi sier at det er i Sandnes kunst- og kulturhus. Og vi får butikkens ordrenummer som gir ganske lite mening i denne situasjonen.

Erling: Ingen, tørr jeg påstå.

Anders: Så her er vi i gang, her er vi veldig nær å gjør en økonomisk forpliktende handling.

Erling: Nå vet jeg ikke om den regelen var informativ eller normativ, men det er jo ikke noe oppsummering her, som du bekrefter. Det er dårlig. Men da stopper vi der. Skal vi oppsummere ris og ros? Det var mye bra når det kommer til disse suksesskriteriene. Ticketco var et takras av dimensjoner, sett bort fra dagens suksesskriterier. Generelt ganske bra.

Anders: Men Tix var vel de som kom best ut? Her får de litt pepper fordi de sender oss til en tredjepartsløsning som de ikke har kontroll over. De har ikke kontroll på hele kundereisen.

Erling: Som de kanskje burde vurdere å få kontroll over.

Anders: Disse lever av å selge billetter. Det er kjernetjenesten deres.

Erling: Og som vi sa, konverteringsoptimalisering …

Anders: Hadde de studert litt skjemadesign her, så kunne mye blitt bedre. Færre feil og lette forståelse. Det var en kjekk ris og ros.

Erling: Det var kjekt å gå gjennom det på sparket.

Anders: Gi oss gjerne tilbakemeldinger om det blir for rotete.

Erling: Gir det verdi når vi snakker gjennom det på denne måten. For vi ser det jo.

Anders: Det er potensielt et for stort gap der.

Erling: Potensielt, men jeg tenkte på det når vi gikk gjennom. Selv om det er et stort gap, så er det vi sier, vi drar jo frem suksesskriteriene og setter dem i en kontekst, at kanskje det er nyttig. Så send gjerne kommentarer til hei@universeltutformet.no.

Avslutning

Erling: Det var dagens episode. Episode 22. Og hvis det er tre ting lytteren skal huske fra i dag, hva er det?

Anders: Vær beskrivende i ledetekstene dine. Den teksten som står før eller i forbindelse med skjemaelementer. Gjør det mulig å angre. Gjør det lett å gjøre rett valg. Vær tydelig på hva brukeren er i ferd med å gjøre.

Erling: Så beskrivende ledetekster, mulig å angre, og gjør det lett å gjøre rett. Bra. Neste episode, hva skal vi snakke om da?

Anders: Hjelp. Kontekstuell hjelp.

Erling: Bare ett tema. Er det nok til en hel episode? Det er det jo, men det er ikke sikkert at det blir en lang episode.

Anders: Vi har jo brent oss på det før.

Erling: Vi gjør som regel det. Det er bra. I dag har vi nevnt at vi vil ha tilbakemeldinger mange ganger, men kan godt gjøre det igjen. Send kommentarer til hei@universeltutformet.no. Ranger oss og gi oss gjerne stjerner på iTunes. Det var det vi hadde for i dag. Jeg er Erling fra Okse.

Anders: Jeg er Anders fra Webstep. Tusen takk for at du hørte på. Nana!