Uu-podcasten: Ubrukelig

Introduksjon

Anders: God morgen Erling.

Erling: God morgen Anders.

Anders: I dag vekket jeg deg.

Erling: Ikke med bustete hår. Med bustete skjegg og forvirrede øyne.

Anders: Du kom snikende ut av soverommet i bokseren og så litt overrasket ut.

Erling: Jeg kan være fristet til å si at jeg forsov meg, men det gjorde jeg ikke. Jeg glemte det rett og slett av, selv om det var i kalenderen og hele pakken. Det er første gang på 34 ganger vi har spilt inn, at jeg har glemt det.

Anders: Tenk å glemme noe som er så kjekt.

Erling: Helt sykt. Jeg hadde det veldig kjekt i helgen. Ikke sånn alkoholkjekt, men jeg pusset opp. Pluss jeg løp lang tur i går. Det var mye som opptok min kognitive energi som førte til at jeg ikke var bevisst på at vi skulle spille inn i morges, klokken 6.

Anders: Nå er vi på en ny episode. I dag skal vi snakke om Prisguiden. Før vi gjør det vil jeg bare nevne at Prisguiden var veldig positive til at vi skulle gjøre dette.

Erling: Det synes vi er veldig kjekt.

Anders: Og det har jo stort sett folk vært, så de etterstrebe å følge uu- og UX-prinsipper, men de vet at de ikke har ting på stell. Det er jo en viktig erkjennelse. For en liten tid tilbake var vi et hovedoppslag på Kode24, vi to.

Erling: Det var kjekt.

Anders: De har plukket opp tråden eller podden og laget en liten artikkel. Et av budskapene var jo dette med Bulder Bank sine 120 image-tagger, som ble trukket frem som et slags høydepunkt. Bulder Bank har vært veldig på ballen underveis her. Da kom de igjen på ballen og sa hvorfor de gjorde det.

Erling: Det har jeg ikke fått med meg.

Anders: Jeg har ikke fortalt det til deg.

Erling: Ikke så rart at jeg ikke har fått det med meg.

Anders: Jeg tror at jeg sa i den episoden av dette er veldig rart, at jeg ikke har sett det før, men det kan godt være at det er en god grunn. Og det var det jo. Dette var bra. De sa at de gjør det på grunn av ytelse. Det går lynkjapt å lage en video med image-tagger. Så selv om jeg ikke hadde sett det før, betyr ikke det at det var dårlig. Og vi trakk det ikke frem som noe dårlig heller.

Erling: Fordi de hadde løst det bra.

Anders: Dette er visstnok en lynrask måte å vise animasjoner på.

Erling: Kult. Veldig kjekt at de er på, og engasjert.

Anders: Ja, kjempekjekt. Vi har jo skrytt av de tidligere. Nå skal vi til Prisguiden. Det er et tips vi fikk fra …

Erling: Var det han Roy?

Anders: Ja, det var det.

Erling: Jeg må jukse litt. Jeg må bare si at søket i Gmail er skikkelig dårlig. Det er jo litt snodig, siden det er Google som lager det. For jeg søkte på prisguide, og regnet med at den dukket opp pent og pyntelig. Men jeg måtte skrive prisguiden for at den skulle komme. Det er da Roy Halvor Frimanslund.

Anders: Tusen takk for godt tips. Prisguiden er noe jeg ikke har noe som helst forhold til. Jeg vet det finnes slike prissammenligningstjenester. Det er noe som heter Prisjakt. Det er noe som heter Prisguiden. Jeg vet ikke hva som er størst og best.

Erling: Jeg har vært en flittig bruker av Prisjakt.

Anders: Er det helt identiske tjenester? Eller tilsvarende.

Erling: Så og si. Jeg tror Prisguiden ble laget av Din Side. Det var noe med Din Side. Nei, jeg kjenner ikke historien. Jeg har sakte men sikkert beveget meg vekk fra Prisjakt og mer mot Prisguiden. For de løser noen småting bedre.

Anders: Det er din foretrukne prissammenligningstjeneste?

Erling: Ja.

Anders: Vi ber jo òg om kjerneoppgave. Det fikk vi ikke her, så jeg har laget en i disse grilltider. Oppgaven er å finne best pris på grillen Weber Q3200.

Erling: Har du den?

Anders: Nei, og jeg er ingen griller. Jeg synes det er enklere å bare hive det på stekepannen.

Erling: Er vi like på det òg? Jeg synes òg grilling er noe hassle. Jeg synes det er koselig med rammene rundt. Det å sitte ute i solen og spise noe som en har laget selv på en dings som har flammer, det er koselig. Men jeg synes maten blir bedre på pannen.

Anders: Det har jeg ingen forhold til.

Erling: For du er vegetarianer.

Anders: Det betyr ingenting. Ikke prøv deg. Vi skulle finne best pris på denne grillen og gå til den butikken som har denne på lager, med fri frakt. Det er suksessen, dersom vi klarer å komme oss inn til butikken.

Erling: Skal gi kinne på?

Anders: Det synes jeg.

Visuelt

Erling: Vi skal ikke begynne med tastaturnavigasjon, vi skal begynne med visuelt.

Anders: Jeg går inn på prisguiden.no. Begynn du Erling. Hva ser vi?

Erling: Det vi ser er at vi har en header med logo og søkefelt. En lenke som heter tilbud. Og en hamburgermeny. Under der så er det et slags grid, med noen produkter og et navn under – det fremstår som kategorier.

Anders: Med en liten pil ved siden av navnet, som indikerer at det er en lenke.

Erling: At det er noe du kan trykke på. Videre er det mer slikt, i forskjellige former. Det er ingen forklaring. Generelt så ser det greit ut. Spesielt for de som bruker det ofte. Det å komme rett inn på en kategori, søkefeltet tror jeg er det mest brukte her. De bruker en placeholder i søkefeltet. Men søkefeltet på en standard plass, så det er ganske tydelig at det er et søkefelt.

Anders: En veldig rar ø i søkefeltet. Søk i over 900 kategorier.

Erling: Nesten vannrett strek. Hva tenker du Anders?

Anders: Det er ryddig. Du nevnte ikke fargene her. De bruker lilla som primærfarge. Og så har de en slags, er det rosa?

Erling: Lakserosa p.

Anders: Jeg synes at det starter ryddig, og så blir det mer rot lengre ned. I kategoriene er det ganske mye luft. Det er kun et lite miniatyrbilde og tekst. Når du kommer ned til konkrete produkter, så er det mer innhold og de står tettere. Det er ikke noe visuelle skiller mellom de ulike produktene. De glir litt inn i hverandre. De står litt tett. I kategoriene er det godt pusterom.

Erling: Men samtidig, når du får så mange bilde på et så lite område, så er det litt vanskelig å visuelt navigere seg i det. Jeg er òg litt spent på hvor godt det er å bruke ett bilde for en hel kategori på den måten. Altså, under bygg og verktøy så er det en drill. Det legger sterke føringer. Aktuelt nå har et par med briller.

Anders: Hvis du er på jakt etter briller så klikker du jo på aktuelt nå. Jeg ville ikke klikket meg inn på Aktuelt nå dersom jeg var på jakt etter noe annet.

Erling: Hvis du er på jakt etter en stekepanne her, så er det ikke bilde av en stekepanne. Det er bilde av en rosa kjøkkenmaskin.

Anders: Jeg er ikke like kritisk som deg til det, men jeg skjønner hva du mener.

Erling: Hvis du ikke er på jakt etter én av de tingene som det er bilde av …

Anders: Du vil ha mer abstrakte ikoner? Eller litt mer generelle? Er det uu?

Erling: Du kan argumentere for at det handler om å kognitivt snu hodet rundt. Hvor skal en klikke for å komme til rett plass? Kanskje ingen bilder er svaret her? Kun tekst.

Anders: Uenig. Det er bra med noe visuelt. I de produktlistene så er det så få visuelle designgrep. All teksten er sort. Det er lite typografiske tiltak som er gjort for å … det ene produktet har en rosa pil ned. Med minus 62 %, som tydeligvis betyr at varen er satt ned med 62 %.

Erling: Hvis du blar deg enda litt lengre nedover, så får du noen karuseller. Visuelt er kanskje den kategorien vi skal ta dem på det, hvis vi skal ta dem. Det er to karuseller. Hva synes vi om karuseller, Anders? Jeg kan forklare hva en karusell er.

Anders: Det vet alle som hører på.

Erling: Ikke sikker.

Anders: Det er et banner eller bilde med noe tekst, som enten går av seg selv videre til neste, eller som du kan klikke deg videre med en pil til neste. Det er dedikert nettsted som heter shouldiuseacarousel.com som dere kan gå inn på.

Erling: Vi trenger ikke å røpe det.

Anders: Det som er litt rart er at han fra Prisguiden sa at de var i gang med å pusse opp, at det var litt ulikt uttrykk på forskjellige deler av tjenesten. Det opplever vi på forsiden. Jo lengre ned på forsiden vi kommer, jo mer visuelle grep har de tatt.

Erling: Det er det ene, men hver eneste ting er stylet forskjellig. For eksempel kategoriene, der er det bilde med tekst under. Hvert bilde er sentrert. Teksten under lilla. På produktene er det bilde med tekst under hvor navnet på produktet er venstrestilt og prisen er høyrestilt.

Anders: Det er ikke nødvendigvis feil i seg selv, at kategorier og produkter blir fremstilt forskjellig.

Erling: Nei, men det er ikke noe som knytter dem sammen. Som du sa med særpreg eller det visuelle på produktlistene. Og så kommer du ned til en annen produktliste som er populære tilbud, som har en helt annen utforming. Her er det tatt mer visuelle grep. Det ser finere ut. Og så videre.

Anders: Jeg tror den lillafargen som er brukt har ganske god kontrast. Kontrastmessig ser alt veldig bra. Jeg ser ingenting med lav kontrast. Jeg ser heller ingen eksempler der de bruker farge som eneste indikator til å kommunisere noe. De har ikke tekst på bilder, som er bra.

Erling: Hva tenker vi om hamburgermenyen på desktop?

Anders: Jeg vet ikke. Den vil jeg ikke uttale meg om, fordi den kunnskap jeg besitter er kanskje utdatert.

Erling: Et argument har jo vært at folk ikke forstår at det er en meny, men det tror jeg vi er forbi.

Anders: Jeg tror òg det.

Erling: Jeg tror folk forstår at det er en meny. Inni den hamburgermenyen er det to hovedområder, det er ett som heter kategorier og én som heter nyttige lenker. Det jeg tenker er hvorfor de ikke heller skriver de rett ut og gjør dem tilgjengelige der oppe. Hvorfor skal de gjemme dem bak en hamburger.

Anders: Ja, at de i seg selv kunne vært to menyelementer. Men nyttige lenker ville jo vært et dårlig menypunkt, men det fungerer bra i en slik megameny som dette.

Erling: Det er forsåvidt et poeng. Et av hovedargumentene mot en hamburgermeny er at du reduserer findability, findbarheten til de elementene som er inni der. Det er ikke sikkert at det er så viktig her på Prisguiden, siden søkefeltet er sannsynligvis det aller viktigste, det er dét folk bruker.

Anders: Et litt uvanlig grep her, er at de har tatt payoffen sin, inn i megamenyen, altså …

Erling: Den enkleste starten på et godt kjøp. Jeg savner en slik «vi smaler produkter fra mange nettbutikker slik at du kan finne den rimeligste», et eller annet slik.

Anders: I bunnteksten har du en annen, «vi viser vei til gode kjøp». Har vi noe mer?

Erling: Nei, jeg tror vi kan hoppe videre til tastaturnavigasjon.

Anders: La oss gjøre det.

Erling: Med skjermleser

Tastatur og skjermleser

Anders: Da skal vi ikke glemme hovedoppgaven her. Nå vet vi at det er et stort søkefelt som preger forsiden, og her er det naturlig å teste det. Jeg skrur på Nora. Det skjedde ingenting. Er det fordi jeg gjorde feil? Eller er Nora treg?

Voiceover: Voiceover på Safari. Forlater Prisguiden prissamenligning den enkleste starten på et godt kjøp.

Anders: Den enkleste starten på et godt kjøp, så de sier de i tittelen.

Voiceover: Brukte lenke gå til forsiden. Prisguiden.no forsiden.

Anders: Det første elementet er logoen. Ikke uvanlig, men da har de ikke noe hopplenke.

Erling: Men de har noe som ofte blir glemt, de hadde intensjonen med lenken – Gå til forsiden.

Anders: Det var bra! Når min skjermleser er på, blir fokusmarkeringen annerledes. Det vil si at du må kommentere den.

Erling: I dette tilfellet, mangelen på. Det er ingenting. Jeg har trykket mange ganger og lurt hvorfor ikke tastaturet fungerer. Her har de fjernet fokusmarkeringen. Fy.

Anders: Det er et stort fy. Da tabber jeg videre.

Voiceover: Søk i Prisguiden. Redigerbar tekst. Søk i over 900 kategorier.

Anders: Det som skjedde her, vi fikk først «Søk i Prisguiden». Nå har jeg ikke sjekket koden, men dette er bra fordi det står ikke i det visuelle grensesnittet. Her har de lagt en skjult label?

Erling: Jeg har svaret her. Det er en aria-label. Veldig bra! Da fikk vi testet hvordan det fungerer.

Anders: Det tror jeg vi har testet før. Det fungerte bra. Vi får opp at det er redigerbar tekst. Så får vi opp placeholderen i tillegg. Her synes jeg at det var greit at det ble kjøtt på flesk, det gjorde ingenting at både aria-label og placeholder ble lest opp. Hadde de vært identiske, hadde det blitt for mye.

Erling: Søk i Prisguiden, Søk i Prisguiden.

Anders: Da begynner jeg å søke.

Voiceover: E 9

Erling: Det er bra at du traff noe relevant med én gang.

Voiceover: R Weber mellomrom QQ3200. Q3200.

Anders: Nå har vi en autoforslag som vises visuelt, som ikke skjermleseren forteller meg om finnes. Så jeg trykker enter. Ingenting skjedde. Vi hørte ingenting. Det vil si at de har lagt på aria-label.

Erling: Noe skjedde. Men hvis du kun hadde hørt, så hadde du ikke visst det.

Anders: De har lagt på aria-label på søkefeltet, et attributt som er utelukkende brukt av skjermlesere, og så har de tydeligvis ikke testet søket sitt med skjermleser, for det funker ikke.

Erling: Hva skulle de ha gjort her? For dette indikerer jo at det er en slags javascriptapplikasjon? Fordi det var ikke en sidelasting.

Anders: Det vet jeg ikke.

Erling: Hadde du ikke fått en sånn pling da, hvis det var en sidelasting?

Anders: Jo, vi fikk kanskje ikke en pling, jeg hørte ikke etter.

(Voiceover høres svakt i bagrunnen)

Erling: Hva skjer nå?

Anders: Jeg begynte å trykke fordi jeg skulle finne ut noe, men det burde jeg ikke ha gjort. Det de kunne ha gjort er å flytte fokuset til enten overskriften eller hovedinnholdet. Det vi ser nå er at vi har to kolonner. Vi har en filterkolonne til venstre, i tillegg til butikkens kampanjer. Så har vi en hovedkolonne til høyre, den største, der viser det fire treff. Det beste hadde kanskje vært å flytte der. I den hovedkolonnen så er det to valg, hvordan du vil ha presentert produktene dine. Både fra et generelt brukervennlighetsperspektiv, men òg fra et uu-perspektiv, så mener jeg at de to valgene er helt bortkastet. Folk velger standardvalg og de er ikke selvforklarende. Om du vil ha en liste eller om du vil ha grid. Min antagelse er at folk ikke har sterke preferanser til hvordan produktene blir presentert.

Erling: Jeg er helt enig. Det hadde vært interessant å sett tall på hvor mange som klikker på det elementet.

Anders: Vi har fire treff, men det vet ikke skjermleseren. Jeg må prøve å komme meg ned til treffene.

Voiceover: Lenke tilbud. Butikkenes tilbud samlet på ett sted.

Anders: Der hørte vi tilbud, og der fikk vi mer metainformasjon. «Butikkenes tilbud samlet på ett sted» tipper jeg lå i et title-attributt.

Erling: Det er korrekt.

Voiceover: Lenke klær og sko.

Anders: Ja! Neste tab etter den store tilbudsknappen i toppen sendte meg til klær og sko, noe jeg ikke ser visuelt. Jeg mistenker at jeg hoppet inn i megamenyen uten å være i den, uten å ha åpnet.

Erling: Det kan jeg òg bekrefte. Det er det første interaktive elementet i megamenyen.

Anders: Det er en kjempeblemme. Fordi nå forventer ikke jeg at jeg skal måtte tabbe meg gjennom en hel meny, fordi jeg skal gå til disse treffene mine.

Voiceover: Lenke lenke lenke, hjem og husholdning. Lenke lenke lenke lenke. Foreldre og barn. Lenke lenke lenke lenke. Min side. Logg inn knapp. Lenke. Green friday.

Anders: Det er viktigere for dem å fortelle meg om green friday enn å vise meg søkeresultatene.

Voiceover: Lenke bruk Prisguiden smartere. Innhold markert, redigerbar tekst. Artikkel.

Anders: Første interaktive element etter megamenyen, nå har jeg kommet meg ut derfra.

Erling: Har du en fokusmarkering nå?

Anders: Ja.

Erling: Der ja.

Anders: Jeg er inne i filtermenyen. Jeg er i pris fra. Det er innskrivningsfelt uten label. Det er redigerbar tekst. Det er en artikkel. Her er det bare feil på feil på feil.

Voiceover: 6000 innhold markert. Redigerbar tekst.

Anders: Der hoppet den over noen kategori-sjekkbokser. De kom jeg ikke til. Nå er jeg i to felter som jeg ikke forstå hva betyr, fordi de ikke har label. De har heller ikke et fieldset. Her burde legend vært pris. Label burde vært fra og til. De burde hatt én legend og to label.

Voiceover: Null skyveknapp.

Anders: Skyveknapp, der har de brukt noe semantisk riktig. De har en slider under prisen, der du i tillegg til å skrive inn prisen.

Voiceover: 6000 skyveknapp.

Anders: Jeg klarer ikke å bevege på den.

Voiceover: Power kampanje.

Anders: Så er det mange kampanjefelter. Power logo, se ukens kampanje, power kampanje.

Voiceover: Lenke lenke lenke.

Anders: Her er det masse greier som jeg hopper forbi.

Voiceover: Kortvisning, listevisning.

Anders: Her hørte vi de to knappene som vi diskuterte. Klikk for å bytte mellom kortvisning og listevisning. Her er jo metadataen veldig bra. Så sant du forstår hva kortvisning og listevisning er. Men jeg synes egentlig at det var gode begreper. Uu-messig var det bra.

Erling: Det er en knapp med en aria-label.

Anders: Men vi skal òg huske på at alt vi har hørt frem til nå, som er veldig mye informasjon, er informasjon som vi får høre før vi har kommet oss til søketreffene. Vi har gjort et søk, vi har hørt masse dritt, vi har ikke fått beskjed om at det har blitt utført et søk. Vi vet ikke hvor mange treff det er.

Erling: Vi vet ikke om det er treff i det hele tatt.

Anders: Men det er fire treff.

Voiceover: Mest populært.

Anders: Det er en knapp for sortering, mest populært. Den tenker jeg er mer verdifulle enn den kortvisningen.

Voiceover: Lenke Weber Q3200 5990 fire priser

Anders: Veldig interessant. Nå kom jeg inn på rett produkt.

Erling: Jeg må bare spørre. Når du skrev inn Weber Q3200 i søkefeltet, så leste hun det opp etter at hun hadde skrevet det. Da leste hun tre tusen to hundre. Nå når hun leste prisen, så leste hun femtini nitti. Prøv igjen.

Voiceover: Weber Q trettito null null femtini nitti. Fire priser.

Anders: Femtini nitti. Jeg klarer ikke å forstå hvorfor hun sier det.

Erling: Det står jo 5990, men det er jo et tusenskille der.

Anders: Hva skjuler koden?

Erling: Ingenting i koden.

Anders: Jeg vet ikke hvorfor hun sier det.

Erling: Nå sa hun òg tre to null null.

Anders: Så sa hun Q-en veldit tett oppi der.

Erling: Det handler nok mer om teknisk, om skjermleseren i seg selv.

Anders: Men så sa hun bare relevant informasjon – navnet på produktet, prisen. Vi ser at vi er på det første søketreffet. Søket har jo her fungert veldig bra.

Erling: Her har de òg fokusmarkeringering, kan jeg røpe. Her er det en lilla, fin ramme rundt.

Anders: Nydelig. Så sa hun òg «fire priser e», vet ikke om du hørte det?

Erling: Nei.

Anders: Vi kan ta det én gang til.

Voiceover: Lenke Weber Q3200 5990 fire priser e.

Anders: Det er fordi det er en liten pil etter fire priser, som indikerer at det er klikkbart, og den uttaler hun med e. Sikkert fordi det er et fontikon, hvor selve tegnet blir oversatt til en e.

Erling: Det er korrekt. De har brukt en after, hvor content er e. Det er en ikonfont. Interessant. Det har jeg ikke tenkt før, at skjermleseren leser opp before og after.

Anders: Joda.

Erling: Det gir mening, selvfølgelig.

Anders: Hvordan kan vi ha løst dette? Vi kunne ha løst det med aria-hidden på selve e-en.

Erling: Hvordan kan du ha aria-hidden på et pseudoelement?

Anders: Nei, det kan du ikke. Min feil, bra. En kunne ha hatt en SVG, i stedet for en after.

Erling: På generell basis er ikonfont ikke en bra måte å løse ikoner på.

Anders: Vi vil gå inn på dette produktet, og trykker enter. Vi vet at det koster 5990, at det er fire priser.

(Voiceover lager en lydeffekt)

Erling: Nå var det sidelasting, ja. Jeg hørte en pling.

Anders: Nå er fokuset mitt i søkefelt.

Voiceover: Utfør søk.

Anders: Nå må jeg selvfølgelig tabbe meg gjennom hele megamenyen.

Voiceover: Lenke lenke lenke lenke … Hage og utemiljø hoved.

Anders: Der kom jeg inn i en navigasjonssti som mangler informasjon om at det er en navigasjonssti.

Erling: Det har fokusmarkering.

Anders: Her vil jeg si at denne er på sin plass her. Den har mye fokus, det vil si at den har høyere kontrast enn den lyse lillafargen.

Voiceover: Lenke terrasse og grill. Lenke l grill.

Anders: Her har de òg det samme at vi hører l grill, det er fordi at de har en liten pil mellom elementene som nok er et fontikon.

Erling: Skal vi vedde om hva tegnet i fontfilen her? L.

Anders: Nå er jeg på siste elementet i navigasjonsstien.

Voiceover: Weber logo.

Anders: Greit nok.

Voiceover: Lenke se detaljer f.

Anders: Jeg vil ikke se detaljer. Jeg vil se hvilken butikk som har den laveste prisen.

Voiceover: Lagre favoritt.

Erling: Den har ikke fokusmarkering.

Voiceover: Lenke g g g 2.

Erling: Hehe.

Anders: Fontikon, en stjerne som er en g. Det som skjedde her er at det er noen ikoner på høyre side – favoritt, hent i butikk. Det var kun favoritt som var interaktivt. Så de andre er nok kodet på en dum måte.

Voiceover: Lenke Weber Q3000. Lenke bilde netonnet logo.

Anders: Der kom vi til en butikk. Her synes jeg det er et godt eksempel på at det ikke er vits å skrive logo i alternativ tekst. Det kunne stått netonnet.

Voiceover: Lenke 5990 liter.

Erling: Liter?

Anders: Ja, det er fordi det er en logikk som er bygget inn i Voiceover, der det er en regel som sier at dersom du har et tall som ender med en l, så er det sannsynligvis forkortelsen for liter. Tipper jeg.

Erling: L-en kommer jo fra ikonfonten.

Anders: Grunnen til at hun ikke sa liter forrige gang vi hørte ikonfonten, i navigasjonsstien, der var l-en før, så da vil ikke regelen inntreffe.

Erling: Ta den én gang til.

Voiceover: Lenke 5990 liter.

Erling: Nå leste hun òg fem tusen ni hundre og nitti.

Anders: Ikke femtini nitti.

Erling: Morsomt. Alt de må finne seg i. Dette er uante konsekvenser som vi får ved å løse ting på en suboptimal måte. Dette er ikke et argument jeg hadde brukt imot ikonfont. At dersom du har det etter en pris så blir det tolket som liter.

Anders: Det er jo bare en hypotese.

Erling: Jeg sluker den rått, jeg. Hvorfor skulle hun ellers si liter? Det er ingenting annet her som indikerer liter annet enn den l-en.

Anders: I den visuelle delen av skjermleseren står det jo l, ikke liter. Disse var jo ikke programmatisk knyttet opp til hverandre, men vi hørte netonnet og så prisen. Da antar jeg at produktet koster 59,90 hos netonnet. Men jeg vet ikke om Netonnet har den på lager, og om det var fri frakt, noe vi har bestemt oss for i oppgaven vår.

Erling: Men er det noe vi kan forvente å få vite av de interaktive elementene?

Anders: Nei, ikke nødvendigvis. Det vi kan gjøre nå er å lese dataene sekvensielt. Nå prøver jo jeg å oppføre meg som en som ikke ser. Det er langt fra sikkert at én som ikke ser ville tenkt likt som meg nå. Det er en litt uvanlig testsituasjon.

Voiceover: Lenke bilde netonnet logo.

Anders: Jeg trykker på control option a, som er hurtigtasten for å lese sekvensielt.

Voiceover: Lenke bilde netonnet logo. 5990 liter. En variant. F. Til butikk 1N På lager. N. Fri frakt. Lenke Maxbo logo.

Erling: Det var kult.

Anders: Her skjedde det veldig mye. Ikke nødvendigvis mye informasjon. Jeg tror nesten jeg skal forklare hvordan det ser ut visuelt først. Vi har en Netonnet logo. Til høyre for den har vi en nedtrekksmeny som heter én variant. Den forstår jeg ikke. Verken visuelt eller på skjermleseren.

Erling: Jeg forstår den, men det er ikke så lett å forstå. Det er fordi jeg er så dreven.

Anders: Du er en ekspert prisguiden-bruker. Så har de en knapp som heter hent i butikk én. Det klarer jeg heller ikke å forstå. Jeg forstå at jeg kan hente produktet i en butikk, i stedet for å få det tilsendt, og jeg antar at det ettallet betyr at det er én på lager, men i hvilken butikk?

Erling: Det er nesten rett. 1-tallet betyr at det er én butikk du kan hente den i.

Anders: Åja. Av alle butikkene i hele Norge?

Erling: Ja. På alle netonnet-butikkene i Norge. Og det er tilfeldigvis Sandnes.

Anders: Åkei. Så sa hun n på lager. N fri frakt. Visuelt sett så står det en grønne hake på lager og en grønn hake fri frakt. Og her er det åpenbart, her må du bruke et innholdselement som har alternativ tekst, her kan du ikke bruke after.

Erling: Aria-label hadde fungert her?

Anders: Ja. Hvis dette hadde vært en X med rød tekst, så hadde X-en fått en annen bokstav. Da hadde det blitt M på lager. Da hadde du trodd at den var på lager. Rekkefølgen var rar. Skjermleseren leste først prisen, som egentlig er bra vil jeg si, så hoppet hun tilbake til én variant, og så hent i butikk, så på lager, så fri frakt. Nå tror jeg at jeg har en Weber grill som jeg kan kjøpe på Netonnet. Men jeg kan ikke gå på den knappen som heter Hent i butikk, med tastaturet. Jeg kan heller ikke gå til nedtrekken 1 variant. Jeg er på en 5990 L. Den lenken i seg selv er ikke selvforklarende. Hva skjer når jeg trykker på 5990? Der kunne de ha lagt til mer informasjon, for eksempel «Kjøp på Netonnet til 5990». Nå antar jeg at de har sortert denne listen fra billigst til dyrest. Det har de jo. Da trykker jeg enter.

Voiceover: Weber 3200 90 % lastet inn produktvideo lastet inn.

Anders: Da kom jeg til den. Nå skal vi ikke vurdere Netonnet. Vi er i mål med tastatur. Det ble en humpete vei, men vi kom oss i mål. Vi skrur av Nora. Ha det bra.

Voiceover: Voiceover av.

Anders: Jeg vil si det mens jeg husker det. Jeg tror det er csstricks.com som har en veldig fin artikkel om fontikon versus SVG-er. De lister opp ganske grundig, fordeler og ulemper.

Erling: Det har du rett i.

Anders: Der mener jeg at SVG-ikoner kommer best ut på alle punkter. Vi bruker som vanlig ganske lang tid på tastatur.

Erling: Det er mesteparten av en episode det.

Anders: Jeg vil si at det får opp ganske mange tilgjengelighetsbrudd. Mange svakheter.

Erling: Jeg tenkte å ta det opp i dag. Det folk kanskje tenker, når vi går gjennom med tastatur og skjermleser, er at dette er kun er relevant for de som er helt blinde. Det er ikke derfor vi gjør det, vi tester kvaliteten på mange andre prinsipper.

Anders: Du får med deg ganske mye. Hvis noe virker med en skjermleser, så har du òg tilfredsstilt ganske mange andre brukergrupper. Da har du en teknisk høy kvalitet på løsningen din.

Erling: Du har rekkefølgen, du har riktige navn, labels. Når du tar med tastatur i samme omgang får du testet mye. Det er en fin test.

Anders: Det er noe alle kan gjøre.

Erling: Og det er enkelt. Nå har vi i løpet av en halv time snakket oss gjennom, vi har funnet mye.

Kodekvalitet

Anders: Vi går videre til kodekvalitet, Erling, som du har kikket litt på forhånd.

Erling: Jeg kan begynne med at de har lang, de har language. Det er bra.

Anders: Rett verdi òg?

Erling: NO. Du ble overrasket?

Anders: Neida, jeg bare prøver å få opp humøret her. Det er tidlig på morningen, vi må sette inn et ekstra gir.

Erling: De har landemerker, men det er brukt på en rar måte. De er bevisst på landemerker, men ikke brukt de på en god måte. De har mange section. De har header og main. Ikke footer. Men header har de ikke på hovedmenyen på toppen. I hovedmenyen på toppen, som forøvrig er en section, så har de class="siteheader". Det er rart, de har brukt et landemerke, men valgt å ikke bruke header.

Anders: Det klarer jeg ikke å forstå.

Erling: Ikke jeg heller, og i hovedmenyen bruker de en nav. Nei, de bruker ikke nav i hovedmenyen. Dette mangler. Det de har er en h6 i hovedmenyen. Det går på heading.

Anders: En h6? Ikke ofte vi ser den i bruk.

Erling: Nei. De har en h1. H1-en er «tryller frem produkter».

Anders: Hæ?

Erling: Ja, og så har den klassen loading, så jeg mistenker at det er teksten som vises mens man søker. Det neste nivået er h4. Det er den som er i footeren. Her har de brukt h kun for å style. De har h1, h4 og h6. Veldig snodig.

Anders: Dette slår meg som rart. Den type sider som dette bør jo tenke på synlighet i søkemotorer. Du vil jo få treff på produktene dine. Denne strukturen på overskriftene jobber mot dem. De bør gi en hjelpende hånd til Google.

Erling: Det er mye her som burde hatt en header. Overskriften Klær og sko for eksempel. Det er kun en span. Produktnavnene er en p. De mangler footer. De bruker ul, altså unordered list, noen steder, andre steder ikke. Inkonsekvent bruk. De burde kanskje ha brukt det på kategorilisten. Det er ikke nødvendigvis så farlig. De har mange imagetagger uten alt. Litt interessant er at det er mange imagetagger som har figuretagg rundt seg, med kun imagetaggen inni. Som vi snakket om forrige episode, så kan du legge figure rundt både image og caption, da blir det definert som ett element. De har ikke brukt caption, kun image.

Anders: Her skal jeg passe meg litt, fordi dette kan jo ha en fordel, å bruke figure.

Erling: Som du oppdaget i tastaturdelen, så har de interaktive element som ikke er kodet interaktive. Den som heter «Vis flere» på forsiden er en div som ikke kan nås med tastatur.

Anders: Det skal være en button.

Erling: De har aria-label på logo. Det er bra.

Anders: Aria-label på logo?

Erling: Ja. Den sier «Gå til forsiden», så den beskriver intensjonen.

Anders: Jeg synes ikke det er bra.

Erling: Nei, det var neste punktet. Logoen er en SVG, som ikke har title. Men hvorfor synes ikke du det er bra?

Anders: Fordi det er så unødvendig. Aria-label er siste utvei.

Erling: Jeg lurer på hvorfor. De kunne ha gjort dette uten aria-label. De har jo fikset en feil ved å legge til aria-label.

Anders: Det er en gyldig teknikk.

Erling: Men en rar måte å løse det på. Det var alt jeg hadde på listen min.

Anders: Noe jeg kom til å tenke på er at de bruker konsekvent komma bindestrek etter prisene, men det brydde ikke skjermleseren seg om. Er den en regel i Voiceover som ignorerer det?

Erling: Det var jo en regel på l. Det høres plausibert ut, at de ikke leser opp ,-. Neste er resultat av automatisk testing.

Automatisk testing

Anders: Vi bruker tillegget til Chrome, som heter Accessibility Insights, som er laget av Microsoft. Den finner 39 feil. Det er det meste vi har sett så langt. Vi har hatt en del nullere, som vi ikke har trodd på, men som har vært korrekt. 21 av disse 39 er dupliserte ID-er. Det kan være alvorlig, men dette er noe jeg har sett mye av. Grunnen er at de bruker samme ID på desktop og mobilvisning. De vil aldri vær synlig samtidig. Hvis du har en id som heter meny på menyelementet ditt, så får du feil i en automatistert test, fordi du bruker samme id på desktop og mobil. Jeg vet ikke hvor ille det er, hvilke konsekvenser det har, eller om det er best å skjule elementer fra DOM-en når du i en annen visning.

Erling: Ideelt sett burde det vært det samme elementet. En ID skal ikke være duplisert.

Anders: Derav navnet. Det er ikke en ID hvis du har to.

Erling: Hvis du ikke klarer å identifisere et element med en ID, så er det ikke en ID. Da har du dårlig kode. Dette med uante konsekvenser. Hvis du skriver god HTML, så har du et godt utgangspunkt. Det å skrive unike ID-er er en del av det.

Anders: Jeg har ikke eksempler på hvilke konsekvenser det kan få.

Erling: Jeg mistenker at konsekvensene er programmatiske, altså at du skal peke på et element. De hadde plukket opp de mest opplagte konsekvensene selv. Men det er ikke god praksis.

Anders: De har en frame med reklame som mangler title-attributt. Den putter jeg på bagatellisten. De har 15 manglende alt-tekster. Det er ikke på bagatellisten. Det er på ABC-listen.

Erling: Hva skjer da?

Anders: Nå så vi ingen eksempler på det nå, fordi jeg navigerte meg ikke ned til bildene. Det som kan skje er at skjermleseren bruker filnavnet i mangel av alt-attributt. Det blir som regel veldig stygt.

Erling: Fordi det er langt og uforståelig.

Anders: Så har vi òg et banner som mangler lenketekst. Så alt i alt er det 39 feil, men alt er lett å fikse.

Erling: Jeg kan røpe at 14 av de 15 bildene er i kategorioversikten.

Anders: Og de skal bare ha tom alt-tekst. For du trenger ikke å vite at det er bilde av solbriller i kategorien aktuelt.

Erling: Nettopp. De aller fleste av denne typen feil, er ikke alle enkle å fikse?

Anders: Nei, det som kan være vanskelig å fikse, det er jo hvis du har laget en ganske avanserte interaktive komponent, som du har bygget opp med div-er. Nei, dårlig eksempel.

Erling: Isolert sett, så innenfor universell utforming, så er det få ting som er vanskelig å fikse. Noe tar tid, for eksempel transkribering. Det er klart at hvis du har gravd deg ned i et hull og laget en tjeneste med kun div-er, så vil det jo bli mye arbeid å skrive semantisk HTML. Ja, et lite tankekors.

Anders: Det var den automatiserte testingen. Da går vi videre til rangering.

Rangering

Erling: Ganske spent, i dag.

Anders: Vi begynner med den generell vurderingen, den som ikke teller. For nye lyttere gir vi -1, 0 og 1. -1 hvis det er dårlig, 0 hvis det er greit og 1 hvis det er bra. Vi tar en generell vurderingen, bare for å ta pulsen. Vi sitter i samme rom, og gir hverandre et tegn. Klar ferdig gå. Begge ga minus, så det er dårlig utgangspunkt. Det trenger ikke å bety så mye.

Erling: Vi har 10 punkter. Ikke alle er nødvendigvis relevant.

Anders: Vi tar skjermleser først.

Erling: Jeg må tenke litt. Skjermleser versus tastatur. Klar ferdig gå. Begge ga 0. Så tastatur. Klar ferdig gå. Det ble minus.

Anders: Det var dårlig fokusmarkering og du måtte gjennom hele megamenyen.

Erling: De gikk i alle fellene.

Anders: Nei, de gikk ikke i tastaturfellen.

Erling: Nei, det var ikke tastaturfeller.

Anders: Vi klarte å utføre oppgaven vår, men det var slitsomt.

Erling: Farge og visuelt. Klar ferdig gå. Du ga 0, jeg ga 1. Jeg slet med å finne ting å ta dem på.

Anders: Det var rotete på forsiden.

Erling: Var det rotete? Det er litt inkonsekvent.

Anders: Jeg gir meg. Trekker opp til 1.

Erling: Det er god kontrast, ikke mye unødvendige ting, ikke mye støy. Kun én annonse.

Anders: Vi kan ikke trekke dem for karusellen, for den var vi ikke innom. Åkei, automatisert test.

Erling: Klar, ferdig, gå.

Anders: -1. Neste kategori har vi ikke snakket om, språk. Det er et godt tegn. Vi leste heller ikke så mye på produktsiden.

Erling: La oss gi en score. Klar ferdig gå. Begge ga 1. Språket er bra hvis du ikke stusser.

Anders: Det eneste er den mikroteksten en variant.

Erling: Og hent i butikk som var uklar.

Anders: Eller bare jeg som var dum.

Erling: Gjerne mangel på beskrivelse på hva dette er. Vi gir dem 1.

Anders: Navigasjon.

Erling: Da må jeg tenke litt.

Anders: Vi brukte kun søkefeltet, vi var bare innom megamenyen.

Erling: Vi har allerede straffet dem for tastatur og skjermleser. Klar, ferdig, gå. Begge ga 1. De har søk som ga relevante søk. De har kategoriene rett i fleisen på forsiden, det er jo òg navigasjon.

Anders: Nå gir vi dem pluss for søket, men vi var veldig spesifikke i søket vårt. Vi søkte på merke og modell.

Erling: Nå søkte jeg på grill, og det var fortsatt bra. Fikk opp et todelt resultat. Det er høyst relevant. Med lenke til en guide, og til produktene.

Anders: 9993 treff, de har en stor produktbase. Det er bra. Jeg stoler litt på dem.

Erling: Neste er kodekvalitet. Klar ferdig, gå. Minus på begge.

Anders: Dette var for dårlig.

Erling: De har gjort noe som andre har feilet på, som aria-label, men det er ikke nok.

Anders: Så til bilde og video. Vi har ikke sett på noe video. Vi må tenke på bildebruken. De er jo produktbildefokuserte.

Erling: Jeg er usikker her. Er du klar? Klar ferdig gå. Null på begge.

Anders: De har jo ikke alternativ tekst på bildene.

Erling: Det er litt utydelig bruk, det med bildene på kategoriene. Vi gir dem 0.

Anders: Skjemakvalitet hopper vi over i dag. Vi har brukt et skjema, som er søkefeltet, men det er ikke nok.

Erling: Nei? Forrige gang var det nok. Men da havnet vi inn på et nytt skjema i søkeresultatet. Vi gir dem pass her. Så til generell vurdering, den siste som gjelder. Du ser betenkelig ut.

Anders: Jeg blir farget av å se tallene vi har gitt, det skal jeg ikke.

Erling: Nå skal du gi en generell vurdering av hvordan disse har løst universell utforming. Klar ferdig gå. Begge ga minus. Husker du hva vi ga på den første? Ga vi minus der òg?

Anders: Ja.

Erling: Da har vi en score.

Anders: Nå skal jeg faktisk sortere listen vår, fordi nå … det er kanskje dumt det? Nei, jeg gjør ikke det. Dette er episode 8 av 15, vi er over halvveis. Jej. Prisguiden får, av 100 mulige, 44.

Erling: Hva ligger rundt der?

Anders: Dette er delt med Brønnøysundregistrene. Dette er i toppsjiktet, som i blandt de verste. Dette er andreplass.

Erling: Hvem er det som leder Ubrukeliglisten?

Anders: Det var forrige episode, Whereby.

Erling: Stemmer. Med 42?

Anders: Ja. Da skal vi ta opp de mest minneverdige øyeblikkene i dag.

Erling: Skal jeg begynne? Jeg sliter litt med dette segmentet.

Anders: Jeg begynner, så kan du tenke. Det mest minneverdige er jo litergreiene. Du skal være bevisst med ikoner og ikke minst fontikoner. Hvis du ikke bruker before og after, så kan legge på kode. Det er mulig å lage fontikoner tilgjengelige. Men slik det er implementert her, er det feil. Når i tillegg Voiceover prøver å være smart, så blir det ekstra feil. Det var mitt mest minneverdige øyeblikk i dag.

Erling: Kan jeg stjele den?

Anders: Så klart.

Erling: Jeg vil også nevne de interaktive elementene som ikke var kodet som interaktive, kun som div-er.

Anders: Og der vil jeg gjenta meg selv, helt til jeg går i graven, Erling. HTML har 150 elementer. To av de har ingen tilgjengelige funksjoner eller egenskaper. De to er div og span, og vi bruker de alt for mye, når vi kan bruke andre mer semantisk elementer.

Erling: Som vanlig vil vi ha tilbakemeldinger og tips. Vi trenger norske løsninger og en kjerneoppgave. Og hvis det er bak innlogging, så trenger vi innloggingsdetaljer.

Anders: Neste episode skal vi òg ta et tips fra Roy. Jeg likte det tipset så godt. Widerøe.

Erling: Flyselskapet Widerøe. Hvorfor likte du det så godt?

Anders: Fordi de har ny løsning og fordi SAS og Norwegian har vært trukket frem i uu-diskusjoner så mange ganger. Widerøe har ikke vært på radaren.

Erling: Vi får trekke dem ut på scenen, så får de vise oss hva de kan.

Anders: Og jeg gjorde en brukertest ganske nylig, der vi ikke snakket om fly i det hele tatt, men hvor SAS ble trukket frem som et dårlig eksempel.

Erling: Og SAS er de som har vært nærmest å få bot. Og Askøy kommune?

Anders: Ja. Har du flydd med Widerøe?

Erling: Det har jeg nok.

Anders: Jeg bodde en liten periode i Sogndal, og der er det Widerøe som lander.

Erling: Det var det for i dag. Nå må vi starte arbeidsdagen. Klokken er kvart på ni. Kjekt at du hørte på. Jeg er Erling fra Okse.

Anders: Jeg er Anders fra Webstep. Hadebra.