Uu-podcasten: Ubrukelig

Introduksjon

Erling: Da er vi tilbake med Ubrukelig, Anders. Går det bra med deg?

Anders: Det går godt. Sitter her i gyngestolen min og hun som sitter på stuebordet om å være stille som ei mus. Nå er det er koronainnspilling, vi har ikke studio.

Erling: Ja, men jeg har hentet litt bedre utstyr, så jeg har en litt bedre mikrofon.

Anders: Du vinner nok på lydkvalitet.

Erling: Jeg vinner lydkonkurransen. Men dette er ingen konkurransen. Hva skal vi evaluere i dag?

Anders: Vi skal se på Bulder Bank.

Erling: Og hva skal vi gjøre? Hva er kjerneoppgaven?

Anders: Få tilbud på boliglån. Det tenker jeg kan være aktuelt.

Erling: Definitivt, det er alltid aktuelt for noen det.

Anders: Så jeg har tenkt å sende inn en reell forespørsel til dem. Skal du gjøre det samme?

Erling: Jeg har prøvd, men jeg faller utenfor kriteriene deres.

Anders: Åja, jeg visste ikke at de hadde kriterier.

Erling: Hvis det er litt mer avansert enn at du har et boliglån på en bolig, og er godt innenfor kriteriene deres, så faller du utenfor. Hvis du har en hytte, eller noe sånn, eller du har en bolig som er vanskelig å automatisk finne en pris på, så må du ha en takst, og litt sånn, da blir det mer jobb. Hvis du har alt, og alt klaffer, så virker det smooth.

Anders: Det er ikke sikkert at jeg har alt som klaffer, men det får vi finne ut av.

Erling: Vi kan minne folk om hva vi skal gjøre nå. Vi skal kjøre en direkte uu-evaluering av Bulder Bank. Skal vi gå gjennom de forskjellige stegene vi skal ta, eller skal vi bare sette i gang?

Anders: Kan vi ikke bare kjøre i gang?

Visuell vurdering

Erling: Det vi begynner med er en visuell vurdering.

Anders: Visuell vurdering og subjektiv vurdering.

Erling: Men det er jo forankret i uu og gjerne suksesskriteriene til WCAG og sånn.

Anders: Vi har de i bakhodet, men vi skal ikke fokusere på dem.

Erling: Det har vi gjort nok av. Hva ser du nå, Anders?

Anders: Jeg har gått inn på bulderbank.no. Jeg ser en veldig tradisjonell med topp med logo til venstre og en navigasjonsmeny til høyre. En stor tydelig knapp i høyresiden som heter last ned. Så kommer det en liten informasjonsbeskjed om Korona. Det første som slår meg er at dette ser veldig moderne ut. Det begrunner jeg nok med at de bruker mørk bakgrunn og lyse tekstfarger. Det er litt i vinden. Jeg har alle mine programmer i mørk modus. Det gikk veldig fort, når jeg begynte å bruke mørk modus, så ble det fort en vane. Alt som var hvitt ble umoderne, i min verden.

Erling: Det jeg gjorde var å skru på mørk modus med en gang det var tilgjengelig. Etter en stund skrudd jeg på lys modus, og det var så deilig. Det var så lyst og deilig. Det jeg har nå er automatisk bygge. Mørkt når det er mørkt ute, og motsatt. Det funker fint.

Anders: Avansert.

Erling: Tilbake til Bulder Bank.

Anders: De bruker en farge som jeg synes har ganske sterk identitet. Det er en farge som ikke er mye brukt. En rød-rosa.

Erling: Men det er god kontrast. Et tydelig visuelt hierarki. Ingen krumspring på oppsett og navigasjon. De har ikke brutt noen konvensjoner, slik jeg klarer å se. De har en animasjon, hva tenker vi om den?

Anders: For det første blir jeg fascinert av den. Det er en ball som ruller over noen trekantede stolper, uendelig, de går i sirkel fordi stolpene beveger seg opp. Når ballen har vært på dem, så faller de ned, og så kommer de opp igjen. Jeg aner ikke hva de prøver å fortelle meg med den animasjonen, men jeg blir likevel sittende å se på den.

Erling: Den tar mye fokus. En kan argumentere for at de med kognitive utfordringer kan bli forvirret av den. Den tar mye fokus. Jeg blir òg sittende å se på den. Det betyr jo at den tar fokus fra alt det andre, men det har kanskje ikke med tilgjengelighet å gjøre.

Anders: Nei. Det er ikke mulig å pause den. Den faller nok ikke under de anfall-kriteriene.

Erling: Nei, den er såpass behagelig. Det er så lite lysendringer og sånn.

Anders: Jeg lar den gå.

Erling: Enig. Så visuelt sett er det lite å ta dem på, sånn umiddelbart.

Anders: De har noen tekstkontraster som er litt lave. Jeg har ikke testet dem. De har en liten seksjon der de snakker om appene sine. Der er det liten kontrast på brødteksten, det kan godt være at den er akkurat innenfor kravene. Det er mange bilder av telefoner.

Erling: Det er stort sett det det er bilde av. Og en klokke på bunn. Hva med språket?

Anders: Hvis vi ser på overskriftene blir jeg positivt overrasket over språket. De har for eksempel en overskrift som heter boliglån redefinert. Den pirrer oppmerksomheten min. Hva er det de har redefinert med boliglån?

Erling: Og teksten under: En helt ny type boliglån. Et lån som skrur seg selv ned i pris. Det har aldri vært enklere å flytte boliglånet. Ingen papirer. Ingen stress. Veldig fin tekst synes jeg.

Anders: Jeg blir nysgjerrig. De er konkrete til at jeg blir litt pirret.

Erling: Men jeg ser en liten bulder, nei blunder. Les mer-lenke. I les mer-lenken før det, så står det Les mer om vår siste renteendring, den er jo bedre. Men den neste er bare les mer.

Anders: Det er en dårlig lenketekst. Det er som er bra med den er at de har et title-attributt på den som sier Gå til vår side om boliglån. Noen har tenkt. Bra Bulder!

Erling: Hvorfor var ikke bare lenketeksten det?

Anders: Det kan du si. Det ville jeg hatt. Og hvertfall når de har den forrige lenken slik, så kunne de likt så godt gjort likt videre nedover.

Erling: Og det ser ikke ut som den forrige har title i det hele tatt.

Anders: Men det trenger den ikke.

Erling: Det er bare litt interessant at de er inkonsekvente.

Anders: Jeg synes dette visuelt er veldig appelerende til meg. Jeg ser ingen eksempler på stammespråk. Banken er tydelig i kommunikasjonen. De drar på med litt humor. Det får de pluss i boken av meg. De sier No KIDding, altså kid med store bokstaver. Du trenger ikke å skrive inn KID-nummer når du betaler hos oss. Du tar bare et bilde av fakturaen og klikker betal. Bra.

Erling: Her er det jo noen bilder som har tekst på seg. Strengt tatt. Er det fortsatt greit, siden det er såpass tydelig at det er i illustrasjonsøyemed?

Anders: Jaja.

Erling: Jeg er enig. Bra. Skal vi gå videre til tastaturnavigasjon?

Anders: Ja. Du spurte om dette med tekst på bilde, de har en sånn kommer, hva heter det for noe. Nå står det stilt. Hva kaller du et bånd som går på skrått ned.

Erling: Er det et eget navn på det?

Anders: Jajaja. Det har et eget navn. Kommer ikke på det.

Erling: Ribbon?

Anders: Ja! Jeg vet ikke hva det heter på norsk.

Erling: Bånd?

Anders: Ja, hehe. Det har de som tekst, ikke som bilde. Bra!

Erling: Jeg er litt usikker på kontrasten der, men den er kanskje fin.

Anders: Vi er ferdige med det visuelle. Siden kjerneoppgaven vår er få tilbud på boliglån, så kan vi trykke på gi meg et tilbud-knappen og si litt om det visuelle her?

Erling: Det kan vi gjøre!

Anders: Vi trenger å vite hvem du er. Det er det vi skal gå gjennom i dag, vi skal gå gjennom denne prosessen. Logg inn med Bank-ID for et uforpliktende lånetilbud. Kun 2–5 minutter å fullføre. Og en liten emoji av en romrakett. Kjempefint. Jeg synes dette er bra. Så har de et priseksempel som er veldig typisk bankmåte å skrive et priseksempel på. Og det er så mye forkortelser og greier at jeg mister litt motet når jeg skal lese.

Erling: Dette er jo et krav, det er lovpålagt å vise slike priseksempel.

Anders: Og det er bra.

Erling: Men det jeg føler er at de prøver å obfuskere det med å bruke eff punktum rente. O skråstrek 25 år.

Anders: O skråstrek 25 år. Det er sikkert over 25 år. Men du har ingenting å vinne på å ta vekk to tegn.

Erling: Og jeg blir usikker.

Anders: Er det alder eller varigheten på lånet? De kunne skrevet det mer folkelig.

Erling: Det hadde vært fint, og det hadde skilt dem ut fra de andre. Det er litt tekst: Tar bare et par minutter, med en pil opp. Den teksten tipper jeg er et bilde, men det er ikke essensiell tekst.

Anders: Jeg vet ikke hva det er, jeg får fatt i det. Det er en fin visuell effekt. Du har rett, det er en SVG. Uten tittel. Men nå gikk vi litt dypt. Vi skal ta et visuelt overblikk. Greit, det er vi ferdige med.

Erling: Det neste er tastaturnavigasjon.

Tastatur

Anders: Og der skal vi egentlig vurderer med skjermleser òg, men fordi vi ikke sitter i vårt innspillingsstudio, så skal vi ikke gjøre det. Vi kjører kun tastatur.

Erling: Så kan vi finne ut til neste gang, hvordan vi kan få det òg.

Anders: Vi skylder på korona. Vi kjører kun tastatur. Det gjør vi parallelt. Vi gjør det hver for oss. Vi går til forsiden og så bruker vi den hellige knappen tabulatortasten.

Erling: Tabbeknappen.

Anders: Trykker én gang på den og ser hva som skjer. Det skjedde noe veldig spesielt. Først kan jeg si hva jeg forventer. Så kan jeg òg si at dette har vi ikke gjort på forhånd. Vi gjør det på direkte.

Erling: Hehe, det var veldig snodig, det som skjedde.

Anders: De har jo en logo, oppe i venstre hjørne. Som jeg ser nå, ikke er en lenke. Du kan ikke klikke på den for å komme til forsiden, som er en vanlig konvensjon.

Erling: Men vi er jo på forsiden. Betyr det noe?

Anders: Det kan godt tenkes, det får vi se når vi kommer videre. Litt dypere. Og så har vi i det første elementet sett i hovedmenyen, eller de har bare én meny, i menyen har vi Hjem, og den har en tydelig strek under seg som indikerer at det er der vi er. Og den er ikke lenket. Og der vil jeg si til Bulder at det er veldig bra. Det er få som tar seg bryet til å ikke lenke den siden man er på. Og jeg mener det at det er en god brukervennlighetspraksis. Så neste element på hovednavigasjonen er Boliglån. Og det er der første tastaturfokuset er. Så da kan vi si to ting. Det er litt rart at det havner på tredje elementet, men det er likevel det første elementet som er interaktivt, fordi logoen ikke er interaktivt og Hjem i menyen er ikke interaktivt. Så da er det helt greit.

Erling: Hvis jeg skulle gjettet på forhånd, hvor fokuset skulle være ved første tabb, så hadde jeg aldri gjettet der.

Anders: Nei, jeg hadde gjettet logoen selvfølgelig. Og så har de ikke tastatursnarvei. Så der får de en liten smekk på fingen.

Erling: Tastatursnarvei?

Anders: Ja, skip-lenke.

Erling: Ja, hopp-lenke.

Anders: De har standard visuell markering på menyen sin. Det vil si at i Chrome, som jeg nå bruker, så har du en blå, ganske tydelig ramme, rundt Boliglån.

Erling: Den fargen funket ganske godt på bakgrunnen.

Anders: Selv om det er blå bakgrunn, en mørke mørkeblå bakgrunn, så stod den ganske godt ut. Og litt morsomt, fordi de bruker den lyse blåfargen, som er Chrome sin standardfarge, som en del av sin profilfarge, så i tillegg til at den er tydelig, så passer den veldig godt med designet. Det kan være flaks, og det kan være tiltenkt. Nå er det sånn at i denne hovedmenyen er det seks elementer. Det er Boliglån, Priser, Om oss, Support, og så en stor last ned-knapp. Når vi trykker tabb videre, så går vi til priser, vi går til Om oss, Support og Last ned. Alle får den samme markeringen. Og hvis jeg klikker videre så skjer det samme. Nå var vi egentlig ikke tro mot oppgaven. Fordi vi kom til Boliglån på første tabb.

Erling: Og det er jo det vi skal prøve å få.

Anders: Ja, så i stedet for å gå videre så trykker jeg nå enter, så kommer jeg inn på Boliglån. Flytte boliglån. Trykker tabb én gang til. Og se her! Vakkert. Nå er første tabbstopp logoen.

Erling: Sånn ja.

Anders: De har altså aktivt valgt å si at logoen på forsiden trenger ikke å være en lenke. Veldig uvanlig, men veldig bra.

Erling: Bare for å reflektere litt rundt det. Det er så vanlig at logoen er et av de første elementene, selv på forsiden. Vil ikke dette bryte med forventningene til de som bruker tastatur? Det første elementet sier, på en skjermleser, Boliglån.

Anders: Det er helt greit, for du har jo hørt i en skjermleser hvor du er, ved hjelp av title. Du har jo konteksten, du har ikke mistet konteksten. Jeg synes det er megabra.

Erling: Ok. Jeg kjøper den.

Anders: Jeg blir ekstra glad når noen har tatt et aktivt valg. Noen har tenkt. Det er unødvendig å lenke til seg selv på forsiden. Uansett. Jeg er på logoen. Nå er neste tabb selvfølgelig Hjem.

Erling: Nå hadde det vært veldig greit med en hopplenke som kunne tatt oss til innholdet.

Anders: Ja, jeg går videre. Den hopper forbi det valget vi er på. De har ikke lenket Boliglån i menyen, på den siden vi er på. Last ned. Og så hopper den ned til en stor knapp som heter Gi meg tilbud. Spar mye, bytt til et smartere boliglån. Et lån med lav rente. Jeg er solgt. Jeg trykker på enter. Kommer inn til en side og begynner å tabbe på ny. Det samme nå. Jeg tabber meg gjennom menyen. Og så er de tre punktene om hvor enkelt det er å gjøre dette. Så har de en knapp som heter Kom igang. Som får fin markering. Jeg trykker på enter. Så er det en veldig forseggjort animasjon.

Erling: En stor lasteanimasjon.

Anders: Der bruker de B-en i logoen sin. Så kjempefint ut. Nå er vi på en innloggingsside. Jeg må logge inn. Da har jeg to valg. Jeg har Bank-ID innlogging og jeg har Bank-ID på mobil. Jeg velger Bank-ID på mobil. Der har de gjort noe som er meget bra, de har fokusmarkering rundt både ikon, overskrift og tekst. Så det er en veldig stor fokusmarkering. Det er tydelig hvor jeg er. De har i tillegg lagt en understrek på overskriften. Nå er det kjempeenkelt for meg å se hvor jeg er. Jeg trykker enter. Bank-ID på mobil. Nå kom jeg inn til en innloggingside. Nå har de puttet fokuset mitt rett i første innskrivingsfelt. Nå er vi inne i et skjema, som er innlogging. Veldig utradisjonell utforming her, vil jeg si.

Erling: Jeg har nok et annet bilde enn deg, fordi jeg har vært her tidligere. Det er forsåvidt kudos, at de husker det jeg tidligere har plottet inn her. De husker meg, men det skulle bare mangle når jeg logger inn med Bank-ID.

Anders: Her får de litt kritikk. De har skrevet i ledeteksten til skjemafeltet som jeg nå er i, så har de skrevet mobiltelefonnummer. De har skrevet det med versaler, som er ødeleggende for lesbarheten, i tillegg til unødvendig tungt ord.

Erling: Husker du hva det heter når du skriver det samme dobbelt? Altså taxidrosje.

Anders: Det har vi snakket om.

Erling: Du hadde det på denne kvelden din.

Anders: Å ja! Nei, det husker jeg ikke. Du kan ikke si den kvelden din. Jeg trodde vi hadde snakket om det i podden vår.

Erling: Nei, på hjernefødemøte.

Anders: Nei, jeg husker ikke. Drit i det. Jeg ville bare skrevet mobilnummer eller mobiltelefon. Uansett, jeg skriver nummeret mitt. Jeg skriver fødselsdato. Tabber meg ned til neste. Det er veldig rent og fint her. Litt interessant at de har valgt å løse fødselsdato med kun ett felt. Vi pleier jo å ha en datovelger eller tre nedtrekksmenyer.

Erling: Hvordan er fokusmarkeringen?

Anders: Bra Erling, for den var dårlig. De har valgt en tradisjonell måte å løse skjemafelter på. Det er bare en grå linje under skjemafeltet, som er en ganske svak indikator på at dette er noe du skal fylle inn. Og når feltet får fokus, blir den streken hvit. Så det er liten differanse mellom den lysegrå og den hvite fargen. Der har de ikke vært like tydelige som de har vært på lenkene og knappene sine. Jeg trykker på den store blå knappen som heter neste. Enter. Nå fikk jeg opp en referansekode. Da må jeg plukke opp telefonen min. Der var det riktig, så jeg trykker på godta. Skriver koden min inn. Så venter vi på at noe skal skje hos Bulder Bank. Nå skjedde det noe. Nå er det et nytt lasteikon. Mye mindre, men fortsatt veldig fint. Ganske rent skjermbilde. Logoen ble stående. Jeg har en logg ut-knapp oppe til høyre. Nå har hovednavigasjonen forsvunnet.

Erling: Da ligner det du ser på, på det jeg ser på.

Anders: Og så har du en veldig utradisjonell stegindikator. Den er bare et lite bilde til venstre. Veldig grønn, veldig høy kontrast. Mye blikkfang selv om den ikke er så stor. Den viser at jeg er på steg 1 av 5. Men det er en uvanlig måte å gjøre det på.

Erling: Det er kun noen små sirkler ved siden av hverandre. Det steget du er på er litt større og heldekkende. De andre er mindre og hule.

Anders: Jeg må si at jeg likte.

Erling: Jeg likte den ikke. Det skal ganske mye til for at noen umiddelbart automatisk skjønner at dette er stegindikatoren. At dette sier at du er på steg 1 av 5.

Anders: Og der har de bare bygget denne opp med et lass med div-er.

Erling: Dette kommer vi tilbake til.

Anders: Ok, det skal ikke jeg kommentere. Den er sannsynligvis ikke tilgjengelig. Boliger stilt som sikkerhet. Der står det en adresse med noen rare grunnummer og bruksnummer, som jeg ikke har et forhold til. Jeg har jo to boliger. Her må jeg tippe hvilken de har funnet. Det tipper jeg kun ut fra verdien. Jeg ble usikker. Her står boligverdien, med en knapp som kan endre den. Savner du en bolig i listen? Det gjør jeg jo. For min primærbolig står ikke her. Den har de ikke klart å finne. Nå er jeg ute og kjører. Vi er jo på en tastatursjekk, det må vi ikke glemme. Nå er tastaturfokuset på logg ut-knappen. Så trykker jeg på tabb én gang. Og da de for første gang avvikt fra den knappeindikatoren som de har kjørt frem til nå. Endre boligverdi er en knapp som er mye mer nøytral enn den sterke lyse blåfargen som de normalt bruker, og den fokuseffekten er bare at bakgrunnen forsvinner. Som gjør det vanskelig å vite hvor jeg er.

Erling: Det blir værre.

Anders: Så trykker jeg én gang til. Da vet jeg ikke hvor jeg er.

Erling: Nå er det ingen indikator på hvor jeg er.

Anders: Jeg håper jeg er på den informasjonsboblen som står ved siden av «savner du en bolig i listen». Men jeg vet ikke. Jeg gambler på det. Nå er jeg usikker. Jeg trykker på den. Det var jeg! Wow. Den funket. Der kom det opp en informasjonstekst som sier at «Foreløpig tar vi kun pant i eiendommer du eier alene, eller sammen med ektefelle/samboer.» Ja, men det hjalp meg ingenting. Fordi den eiendommen som jeg har har, har jeg jo sammen med samboer.

Erling: For jeg tror du havner litt utenfor når du har to boliger.

Anders: Det er jo litt rart at den primærboligen som har høyest verdi, at jeg ikke kan bruke den som sikkerhet.

Erling: Dette skyldes nok litt begrensninger i Bulder Bank som tjeneste. Mer enn i grensesnittet. Det er bare en teori.

Anders: Hvertfall. Greit. Jeg har ikke mulighet å legge til noe her, så jeg må ta til takke med det de tilbyr. Nå kommer jeg ned til et felt som har veldig annerledes utforming enn det forrige feltet, på innloggingsskjermen. Lån på boligen. Da skriver jeg inn. Her er det en sort bakgrunn, så det er litt mer tydelig at det er et innskrivningsfelt. Jeg husker ikke hvor mye jeg har. Jeg skriver nå inn det jeg har.

Erling: Bare skriv inn en sum.

Anders: Så tabber jeg. Så tabber jeg meg til et spørsmålsikon. Så får jeg valget mellom Boliglån og Rammelån.

Erling: Og her har de gjort noe annet med fokuset. Her har de tatt tilbake standardfokusen. Ikke fjernet den.

Anders: Nå er jeg litt mer i trygge omgivelser. Her må jeg blottlegge min manglende økonimiske kompetanse. Jeg vet ikke om jeg skal ha et boliglån eller rammelån. Boliglån, det er jo det jeg holder på med, så jeg lar den stå. Det er en radioknapp. Så da skal jeg teste om den funker som forventet. Det vil si at jeg trykker pil høyre, fordi det neste radiovalget er til høyre for meg. Det funket ikke. Det er nok ikke semantisk riktig.

Erling: Det som gjør at du sier det er en radio, er fordi det er en sirkel med en sirkel inni. Som en runding inni. Den neste er en sirkel uten runding inni.

Anders: Det er veldig tydelig visuelt sett at det er radiovalg.

Erling: Jeg kan røpe at i koden så er det en knapp.

Anders: Det fungerer ihvertfall ikke som en radioknapp skal funke på tastaturet. Jeg trykker på rammelån med enter, det går jo ann å navigere med tastaturet. Rammelån har de ikke, så greit, jeg går tilbake til boliglån. De skriver 2,17 % rente. Pedanten i meg legger merke til at de ikke bruker mellomrom mellom tallet og prosenttegnet, noe de har gjort tidligere i løsningen sin.

Erling: Hardt mellomrom, bør de ha. Men da er vi hvertfall inne i pedantland.

Anders: Vi må fokusere her, Erling. Vi snakker om tastaturnavigasjon.

Erling: Jeg er veldig spent på hva som skjer lengre ned her, så vi må få gang.

Anders: Så er jeg nede på nesteknappen. Snart i mål. Steg 5. Deres lån på bolig. Jobb. Nå har de en oppsummering. For hver seksjon har de en endreknapp. Ja, jeg trykker på din del av søknaden, jeg. Jeg har ikke noe å tape på det. Det er jo bare en søknad. Det må vel gå en SMS til Linn, som hun kan se bort fra, så sant vi ikke får et knallgodt tilbud. Sender din del av søknaden, sender SMS til Linn. Der fikk jeg med én gang en SMS fra Bulder Bank. Vi har mottatt din del. Takk Anders Ekkje. Vi har mottatt din del av søknaden. Her må jeg si at visuelt sett – takk Bulder! Det mange feiler på er å ha en litt utydelig suksessmelding. Du er ikke sikker på om du er i mål eller ei. Her er det en stor grønn ramme rundt den takkebeskjeden. Det er en animasjon med en sjekkboks som viser bæng, du er i mål. Hva skjer videre? Jeg vil motta en SMS straks Linn har fullført sin del. Hvis lånet er OK er det du som må logge inn og flytte lånet. Bla bla. Jeg kom i mål. Jeg har ikke brukt mus. Jeg har kun brukt tastatur. Denne tok litt tid. Utenom manglende fokusmarkering og inkonsekvent bruk, så var det ingen problemer. Ingen tastaturfeller. Vi går videre, Erling, til neste seksjon. Det er kodekvalitet som du har vurdert. Nå skal jeg få litt pause i snakkingen. Ordet er ditt kjære Erling.

Kodekvalitet

Erling: Jeg må si, det er litt juks siden det ikke er kjerneoppgaven, jeg testet å navigere med tastatur på en annen side, og havnet i en tastaturfelle, som jeg ikke kom meg ut av.

Anders: Du må jo si hvilken side det var.

Erling: Hvis du trykker på Boliglån i hovedmenyen. Og så tabber du deg nedover til kalkulatoren. På den slideren, så kan du slide deg frem og tilbake, men du kommer deg ikke ut av den. Da er du låst på den slideren.

Anders: Det var et veldig godt eksempel på en tastaturfelle, for den er så tydelig. Du er sjanseløse.

Erling: Du må laste siden på ny. Det er ikke sikkert at du kommer forbi den i det hele. Nei, den stopper der. La oss snakke om kode. Og her er det mye snacks gitt! Dette er en veldig typisk javascriptapp. Den første indikatoren på det var at det første jeg gjør når jeg skal sjekke koden er å trykke option command u på macen min. Da får jeg opp kildekoden. Det jeg da ser er at jeg ikke får noe av DOM-en. Det tyder på at den blir generert etter at siden blir lastet, og blir satt inn av javascript. Det er forsåvidt greit. Det går ikke ut over tilgjengeligheten, så lenge javascriptet laster. Da må jeg bruke inspektoren i Chrome, for å se det direkte. Når alt er kollapset her, så indikerer det at alt er greit. De har lang no. De har noen landemerker – header, main, footer. Men jeg tror når jeg ser på notatene mine at det er kanskje det eneste som er bra her. Eller, det er litt annet som er korrekt. Hvis jeg går inn i header, det første jeg treffer på, finner jeg en div.

Anders: Og når du sier at du går inn i header?

Erling: I landemerket header. HTML-elementet header. Der ligger logo og hovedmeny. Inne der er en div og det første elementet der inne er en SVG. Det er logoen. Det er forsåvidt greit, fordi den SVG-en har en title, som er «logo bulder bank».

Anders: Jeg kan òg si at den titelen er det første barnet, som er beste praksis.

Erling: Men så kommer det en haug med div-er. Her er det så divete og så spanete. Det en helst skulle hatt her var en nav rundt hovedmenyen, en liste, en ul li med menyelementene. Her er det bare div og span. Det de dog har, er role menu. Når jeg går ned gjennom disse div-ene så vet jeg ikke hvor de hører til. Her er det ganske stor mangel på semantikk, tørr jeg påstå. Det er massevis av role erlik none. Det var menyen. Hvis vi går ned i main, så fortsetter det masse div-er. Div er jo ikke farlig sånn sett. Men når en da bruker div som avsnitt, i stedet for p, som de gjør, så begynner det å bli litt dumt. I denne notifikasjonen om korona og avdragsfrihet, så er den første teksten en h1. Det kan være greit selv om den visuelt er veldig liten. Men teksten under der igjen ligger i en div. Når vi da går videre til det første hovedelementet så er det igjen massevis av div og div. Der har vi h1 igjen. Den ligger ikke i et eget landemerke, for eksempel article, som den godt kunne ha gjort, men som vi har diskutert før, det er ikke en synd i seg selv å ha mange h1-er. Men når jeg ser videre nedover her, så er det elementet en h1, det elementet som ligner nedenfor er en h1. Overskriften etter der er en h2. Og alle de nedover som ligner på den er òg h2. Det jeg tolker ut fra det er at de har brukt h1 og h2, altså overskriftelementene som stylingelement, for å se de til å se ut som de skal.

Anders: De har tenkt visuelt, ikke struktur.

Erling: Jeg må sjekke notatene.

Anders: Konsekvensene av dette er at dersom du har en h2 som heter «Se fremover når andre ser bakover», og det er i strukturen en h2 som ligger etter en h1 som heter «Boliglån redefinert», så vil du for eksempel i Apple sin rotor få opp at det er en underseksjon av boliglån. Men dersom du leser innholdet så har akkurat denne seksjonen her, ingenting med boliglån, som skaper forvirring.

Erling: Det er rotete kode. Dårlig semantikk.

Anders: Jeg skal ikke unnskylde dem. Jeg er enig i at det er feil, men det er veldig vanlig. Jeg synes du startet litt hardt her, Erling. Dette er en vanlig feil å gjøre. Både dette med divorama, og dette med feil nivå på overskrifter. Hvis en skal prøve å være litt positiv, så er det i det minste overskrifter, bare feil nivå.

Erling: Ja, hvis vi skal prøve å finne de tingene som er bra, så kan vi godt si det. Men de mangler semantikk i hovedmenyen. Hvis vi går ned i footeren, så er det litt samme greia. Her er det bare en haug med a-er etter hverandre.

Anders: Men de bruker footer?

Erling: Ja. Landemerkene har de fått på plass. De har laget noen områder som de får stappet koden sin inn i. Men så har du nyhetsbrevgreiene, der har du et input-felt, som er bra. Meld på nyhetsbrev, det er ikke en label, det er en div. Det er en input, det er button som knapp, men det er ingen form-element rundt.

Anders: Og de har heller ikke tastaturfokus på den.

Erling: Og så har vi SVG-er som mangler title. Kanskje de ikke burde ha, fordi det er ikoner. Ja, det var det jeg hadde. For meg, da jeg gikk gjennom og så tenkte jeg at her er det mangel på forståelse av viktigheten av semantisk kode. Det kjentes ikke godt ut å gå gjennom denne koden.

Anders: Jeg kan òg poengtere noe som er litt uvanlig. De bruker konsekvent title på bildene sine, ikke alt-tekst. Som et alternativ til alt-tekst.

Erling: Nå skal det sies at det første bildet jeg testet har alt-tekst. «Mobil viser Bulder Bank på skjermen.»

Anders: Ja. Greit, da har de forskjellig praksis der.

Erling: Åhh! Inspiser animasjonen. Hehe!

Anders: Det var den kulen som vi snakket om.

Erling: 120 image HTML-element og alle har alt-tekst. «Bilde nummer 120 i stillbilde video».

Anders: Å herlighet. Det har jeg aldri sett før. Det er ikke en video.

Erling: Det er animert med CSS og Javascript. Hvordan vil det oppleves med en skjermleser?

Anders: Glad du spør. For en skjermleser vil overse dette, for de har puttet aria-hidden erlik true på foreldrediven.

Erling: Nå trodde jeg vi hadde funnet den blunderen, men de reddet seg inn der.

Anders: Uansett burde de hatt tomme alt-tekster på alle de bildene.

Erling: Så har de òg tabindex erlik 0.

Anders: På hva da?

Erling: På knappen Gi meg et tilbud.

Anders: Og det er en button?

Erling: Det er en button, ja.

Anders: Da forstår jeg ikke hvorfor de har gjort det. Du får mye gratis når du bruker semantisk riktig elementer. Nå sa jeg egentlig litt feil. Fordi Gi meg et tilbud er ikke en button, det bør jo være en a, fordi den navigerer deg til en annen side.

Erling: Den gjør ikke en handling.

Anders: Men tabindex 0 på den gir i mitt hode ingen mening, men det kan jo være grunner som jeg ikke vet.

Erling: Alle knapper på den siden har tabindex 0.

Anders: OK.

Erling: Og så har de brukt litt aria. Nå er jeg ikke veldig flink med aria, men det virker litt vilkårlig. De har en aria-label på last ned-knappen i toppen som sier «Last ned Bulder Bank appen». Den er egentlig ganske fin.

Anders: Ja, den er bra.

Erling: Fordi på knappen står det bare last ned.

Anders: Den kjøper jeg.

Erling: Og de har aria-label på den neste, hvor knappen sier «Gi meg tilbud» og aria-label sier «Se detaljer om boliglån til Bulder Bank».

Anders: Det var jo litt misvisende.

Erling: Det var det egentlig det. Hva er det neste på programmet?

Anders: Det er resultatet min automatiske testing.

Erling: Nå er jeg spent.

Automatisk testing

Anders: Det skal du være, fordi det kan være at jeg har gjort en dårlig jobb her.

Erling: Du?

Anders: Ja. Det er fordi jeg ble slått i bakken. Den automatiske testen min, der vi bruker Accessibility Innsights fra Microsoft, fant null feil.

Erling: Null!

Anders: Null feil på forsiden og null feil på startside boliglån. Husk at dette er det eneste jeg har gjort. Jeg har en teori om hvorfor, det er derfor jeg sier at jeg kanskje har gjort en dårlig jobb. Hvis den tester den ikke-rendrede DOM-en.

Erling: Sannsynligvis.

Anders: Hvis det er det som har skjedd, er det en megastor svakhet i verktøyet.

Erling: Det burde den nesten ha tatt hensyn til.

Anders: Jeg har funnet svaret. Nå brukte jeg Siteimprove sitt verktøy. Det fant mange bilder uten alt-attributt. Og vi vet at det er bilder ut alt-attributt, for det fant jeg manuelt. Det vil si at da Accessibility Insights fant null feil, det var fordi den ikke sjekket den ferdig rendrede koden. Ergo kan vi ikke bruke det resultatet til noe. Det må vi overse. Jeg trodde vi kunne gi dem et kjempekompliment. Det kan vi ikke, for verktøyet fungerte ikke på denne SPA-en. Single Page Application. Så det tar jeg selvkritikk på. Jeg er ganske fersk med Accessibility Insights. Jeg har blitt glad i det på kort tid. Nå har jeg brukt det flere ganger i profesjonell sammenheng, der jeg har gjort en full evaluering med automatisk, assistert og manuell gjennomgang. Nå vet jeg at jeg må passe meg når jeg bruker det på SPA-er.

Erling: Vi kan ikke bruke Siteimprove da?

Anders: Nei, vi vet fra forrige gang at den finner mer feil. Den er litt hardere enn de andre. Det blir urettferdig.

Poenggiving

Anders: Da skal vi ta den generelle vurderingen. Det vi da gjør er å vise hverandre en lapp der vi har et tall med -1, 0 eller +1. Hvis det er helt greit gir vi 0, hvis det er bra gir vi +1 og hvis det er dårlig gir vi -1. Da sier vi klar, ferdig, gå!

Erling: Begge har 0.

Anders: Du skal alltid skrive så lite. Begge har null. Det skriver vi ikke ned. Vi går videre, vi hopper over skjermleser, vi går rett til tastatur. Det var den testen vi tok ganske grundig. Jeg er klar. Klar, ferdig, gå!

Erling: Jeg ombestemte meg. Til null. Begge null.

Anders: Den plotter jeg inn. Det er utelukkende på grunn av manglende og inkonsekvent fokusmarkering.

Erling: Enig. Det føltes som om det var utviklet og designet av flere folk og avdelinger. Altså forsiden, markedsdelen av Bulder Bank, kjentes annerledes enn når du var inne der.

Anders: De store trekkene, fargebruken, jeg følte aldri jeg hoppet mellom mange løsninger.

Erling: Jeg er kanskje litt mer sensitiv for det. Logoen var mindre. Veldig mye i detaljene var forskjellig.

Anders: Da skal vi over på det som heter farge og det visuelle. Nå har vi ikke gjort noen sjekker av kontrast. Vi begge to sitter på fint utstyr, gode skjermer. Vi sparer ikke på kruttet når vi kjøper datautstyr, vi to. Vi har ikke gjort noen kontrastvurderinger annet enn vår egne øyne, som kanskje er litt … Jeg er klar. Klar, ferdig, gå.

Erling: Begge gir 1. Vi kan minne om score. Vi scorer fra -1 til +1, med 0 mellom. Kun tre nivåer.

Anders: Det er tekster som har litt lav kontrast, kanskje for lav.

Erling: I så fall på grensen. Ikke noe som er opplagt feil.

Anders: Det er den totale visuelle opplevelsen.

Erling: Ikke en soleklar +1.

Anders: Automatisert test hopper vi over.

Erling: Så er det språk. Er du klar? Klar, ferdig, gå. 1 på begge.

Anders: Hva er det du har tegnet ved siden av 1-tallet?

Erling: Jeg tegnet 1-tallet andre veien, så skriblet jeg over det.

Anders: Nå har vi heller ikke denne gangen prøvd søk. De hadde ikke søk.

Erling: De hadde ikke alternative navigasjonsmetoder.

Anders: Er du klar? Klar, ferdig, gå!

Erling: Jeg ga 0. Du ga 1. Jeg skulle gi 1, men så ble jeg usikker. Jeg er ikke vanskelig på denne. Jeg gir 1. Vi møtte ikke på noe trøbbel. Alt var logisk.

Anders: Det er ikke flere veier til mål. De kunne hatt søk eller sidekart. Vi skal huske på at dette er et lite nettsted, med begrenset innhold. Sett i lys av det, så er dette greit. Kodekvalitet, Erling? Der kjørte du showet. Klar, ferdig, gå.

Erling: -1 på meg, 0 på deg.

Anders: Jeg gir meg, du var litt streng. Jeg gir -1 fordi da er vi skuls, og det var din test. Du har gått mer i dybden enn meg.

Erling: Det er tydelig at de som har kodet dette ikke fokusert på god HTML.

Anders: Men de har jo landemerker, de har jo …

Erling: De har gjort en innsats én gang. Og så sluttet de.

Anders: Det er litt symtomatisk når du ikke bruker p-taggen. Det er ABC innenfor HTML.

Erling: Det er ett av bestefarelementene. Ett av de gode, gamle vi alltid har brukt. Og hvorfor har de brukt en SPA på det jeg kaller en markedsside? Hvorfor har de ikke brukt vanlig gammeldags HTML, men det er en annen diskusjon.

Anders: Når du lager en SPA, så må du ta mye mer hensyn, det er mye mer du må tenke på med tanke på universell utforming, enn hvis du kjøre tradisjonelle sidelastinger.

Erling: Jeg kan òg røpe at dette er en React-app. Så til neste, som handler om bilde og video.

Anders: Der er jo egentlig spørsmålet hva denne animasjonen skal gjøre med scoren.

Erling: Jeg er klar. Klar, ferdig, gå. Jeg ga 1.

Anders: Vi ga 1. Hadde det ikke stått aria-hidden på den, så måtte de ha fått trekk. Kanskje.

Erling: Den er så forsiktig. Den er så grei.

Anders: Det er gode illustrasjoner. Jeg vet jo ikke hva de skal si med den animasjonen, men la gå.

Erling: Det er ikke så viktig.

Anders: De har ett bilde som jeg liker veldig godt. Det er en sånn B med mange stjerner bak seg. Sånn Star Wars-effekt. Stjernereise. Jump to lightspeed. Dette skal gå fort. Dette er bygget med ny teknologi.

Erling: Den mangler alt-attributtet.

Anders: Men generelt. Lasteikoner. De har gjort en god innsats.

Erling: Så har vi én som heter skjemakvalitet.

Anders: Der må jeg tenke litt på.

Erling: Skal vi gi en score først, ikke tenke litt?

Anders: Vi har ikke landet helt hvor harde vi skal være på følgefeil. Det med at skjemaelementene hadde forskjellig visuell fokusmarkering, kan det slå negativt ned på skjemakvalitetskriteriet. Jeg mener nei.

Erling: Jeg kan akseptere det, at de allerede har blitt straffet for det.

Anders: Så skjemakvalitet.

Erling: Jeg er klar. Er du?

Anders: Ja, jeg er det. Klar ferdig gå.

Erling: Du ga 1, jeg ga 0.

Anders: Fortell hvorfor.

Erling: Det var når du kom inn i lånesøknaden, så var det de knappene som så ut som radioknapper, det hang ikke på greip, selv om det funket. Det var litt inkonsekvent. Elementene føltes ikke ut som skjema, det var designet på en slik måte at det ikke føltes ut som en flyt, nødvendigvis. Gir det mening?

Anders: Kjøper den ikke helt.

Erling: Du gikk jo lengre. Jeg fikk ikke sett siste delen av skjemaet. For meg er det en generell følelse. Dropdownmenyen hadde jo custom styling.

Anders: Ja, jeg gir meg Erling. Hovedgrunnen er at det ikke er så tydelig hva som er innskrivningsfelter og ikke.

Erling: Det er designet som noe annet enn et skjema, selv om det er ganske tydelig et skjema.

Anders: De har gått litt i den kreative grøften. 0 på den. Nå skal vi på en generell vurdering. Og nå teller den. Jeg er ganske usikker. Det som er dumt er at jeg ser på hvilke karakterer vi har gitt på de ulike. Jeg er enig i hva jeg kom frem til i hode mitt. Klar ferdig gå.

Erling: Begge ga 0. Ja, jeg er nokså trygg på den. Selv når du drøyde det. Kan jeg gi dem +1? Er jeg villig til å gå mot det hvis Anders gjør det?

Anders: Jeg kunne ikke ha gitt det, det hadde blitt feil.

Erling: Da gleder jeg meg.

Anders: Skru på trommevirvelen. Vi har gått fra 45 til 89 poeng, av 100, på de foregående episodene. I denne episoden her, så har vi hoppet over to av kategoriene, men formelen vår håndterer det bra. Du får ikke trekk for det du ikke har svart på, det er snittet. Fyr på trommevirvel. Bulder Bank får 69 poeng.

Erling: All right! Interessant. Det kjentes rett ut.

Anders: Det gjorde det. Dette er tredje episode. Vi kan ta topp eller bunn tre. Det er Sandnes kommune som har dårligst score, og som dermed leder ubrukelighetsprisen. De ligger på topp i ubrukelighetsprisen. Bulder Bank på andre plass. Og Dagbladet med sine fantastiske 89 poeng, ligger på bunn.

Oppsummering

Erling: Da skal vi oppsummere. Hva er høydepunktet i dag? Eller det mest minneverdige.

Anders: Det har ikke så mye å si, og det er litt feil å trekke det frem, men jeg likte det med navigasjonen hoppet rett til boliglån. Du var litt usikker på om du tuller med folks forventninger.

Erling: Jeg er ikke like entusiastisk som det du tydeligvis er. Det mest minnerike for meg var koden. Da jeg begynte å inspisere det tenkte jeg oioio, dette er … men så ser jeg jo at jeg var farget av den første opplevelsen. Så fant jeg landemerkene, de hadde title i den SVG-en hvor det var viktig. Det var ikke så ille som jeg først fikk inntrykk av. Det var ille nok til at jeg kan ha en forsiktig oh shit. De manglet såpass mye at den initielle reaksjonen står.

Anders: Vi er i oppsummeringen, men jeg fant plutselig noe her. De har en tabell, prislistetabell, med tre kolonner – prisliste, nominell rente og effektiv rente. Alt er bare div-er.

Erling: Hadde vi gjort en generell vurdering av alle sidene mistenker jeg at vi hadde fått mer på beinet. Jeg fant jo en tastaturfell. Det hadde nok dratt scoren med. Det tar vi ikke med i beregningen. Det er hovedoppgaven i fokus. Vi vil som vanlig ha tips og tilbakemeldinger og sånn. Det kan dere sende til hei@ubrukelig.fm. Kun norske løsninger. Gi oss gjerne en oppgave – kjerneoppgaven på siden. Slik at vi ikke trenger å lete etter den, hvis det er en litt obskur tjeneste. Det var det for i dag. Mitt navn er Erling, jeg jobber i Okse.

Anders: Mitt navn er Anders, jeg jobber i Webstep. Kan jeg få en avsluttende kommentar?

Erling: Det kan du.

Anders: Siden vi i dag har testet en bank. Vi fikk en utrolig fin henvendelse fra ei i TietoEvry, som lager mange av de norske nettbankløsningene. Hun hørte på oss, og sa at de hadde brukt den første Universelt Utformet-podden, til å gjøre forbedringer i sin løsning. Så vi har forhåpentligvis bidratt til at Ola Nordmann har fått bedre og mer tilgjengelige banktjenester.

Erling: Det er derfor vi gjør dette.

Anders: Det varmet uu-hjertet mitt mye. Gi oss tilbakemelding og gled deg til episode 4. Snakkes!