Søppeldesign

Det var en gang en mann som het Anders, som skulle ta nattog til storbyen Oslo. I kafévognen oppdaget han denne bossdunken. Eller, er det en bossdunk? Kanskje en søppelkorg? Eller avfallsbeholder? Her kommer en liten fortelling om hva en bossdunk kan lære oss om design, semantisk kode og universell utforming.

Etter mange år i bransjen har jeg blitt ganske miljøskadet når det kommer til brukervennlighet og universell utforming. Det første som slo meg er at noen har måttet lage en lapp over dunken, for å forklare hva det er.

A user interface is like a joke. If you have to explain it, it’s not that good.

– Martin Leblanc

Jeg ser to grunner til denne lappen. For det første er tekstene «Avfall» og «Waste» vanskelige å lese på grunn av lav kontrast. For det andre ser det kanskje ikke umiddelbart ut som en bossdunk, den følger ikke konvensjonene for bossdunker. Ber du et barn tegne en bossdunk, ville resultatet ha blitt noe helt annet.

Designendringer

La meg foreslå noen forbedringer.

Kontrast

Når jeg lager ting for skjerm, bruker jeg et verktøy for å måle fargekontrast. Et slikt verktøy vil si at den sorte teksten på grå bakgrunn har en akseptabel kontrast. På fysiske flater er dette annerledes. Lys mot børstet stål gir gjenskinn, og det krever høyere kontrast. At skriften kun har konturer og ikke fyll, hjelper heller ikke. Ei heller at lokket er ripete.

Forbedringforslag 1: Større bokstaver med sort fyll.

Navngivning

Er «søppeldunk» det mest folkelige begrepet? Kan vi forenkle? Et fint verktøy til å finne ut hva folk flest bruker er Google Trends. Her kan vi sammenligne «søppeldunk» med «bossdunk» og «bosskorg». La oss heller forenkle. «Søppel» sier det samme som «Søppeldunk», ikke sant? Vi kunne ha sammenlignet «boss», «søppel» og «avfall» i Google Trends. Problemet er at «boss» har flere betydninger og da vinner det alternativet. Det kan være det engelske ordet for sjef, og det kan være det tyske motehuset Hugo Boss. Sammenligner vi kun «søppel» og «avfall» ser vi at sistnevnte er mest brukt. Da erstatter vi «Søppeldunk» med «Avfall», så har vi brukt et begrep som flere forstår og som er lettere å lese. Jippi.

Forbedringsforslag 2: Skriv «Avfall», ikke «Søppeldunk».

Konvensjoner

En overordnet utfordring med denne bossdunken er at den ikke ser ut som en bossdunk. Det er noe tvetydig med «affordancen» her. En øl til den som finner et godt norsk begrep for «affordance».

Affordances are the characteristics or properties of an object that suggest how it can be used.

– Interaction Design Foundation

De to hovedelementene er et horisontalt håndtak og et omriss i metallplaten. Omrisset er en rektangel med to avrundede hjørner i toppen. Dette kan indikere en luke. Skal jeg dytte inn luken, eller dra i håndtaket?

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

– Jakob Nielsen

Jakobs lov kan vel så gjerne brukes i det fysiske rom, som i det digitale. Det er vanligere med et hull.

Forbedringsforslag 3: Fjern luken. Et tydelig hull vil indikere at det skal kastes søppel i hullet. En ulempe med det, er at det kan lukte.

Forbedringsforslag 4: Lag luken rektangulær, gjerne med avrundede hjørner, og sett den dypere inn i veggen. Dette vil tydelig indikere at det er en luke.

Ikoner

Det er klistret ett ikon på hver side av luken. De er tydelige og følger konvensjonen for søppeldunk. På høyre side er klistermerket plassert i bunnen av luken. Noenlunde ryddig. Det venstre er plassert oppe til venstre for luken. Ganske rotete. Min antagelse er at det høyre merket ble limt på først, og det venstre ble plassert høyere for å ikke dekke til skruen.

Using photo diagrams ensures our assembly instructions are accessible to all and as easy as possible to understand.

IKEA: Why are there only photos in IKEA assembly instructions?

Forbedringsforslag 5: La oss gjøre som IKEA og kun bruke ikon uten tekst. Jeg antar at flere vil forstå et ikon enn «Avfall», «Søppeldunk» og «Waste». Integrer ikonet i lokket.

Der fikk den sveitsiske togprodusenten Stadler noen gratis designtips de kan bruke neste gang de skal lage nye tog til oss på Sørlandsbanen. Hvis noen fra Stadler leser dette, vennligst ignorer neste del av denne artikkelen.

La oss kode bossdunken!

En litt tøysete idé jeg fikk da jeg vurderte utformingen til denne dunken, er hvordan den kan kodes med semantisk HTML. La oss bruke den opprinnelige dunken fra toget, uten å ta hensyn til forbedringsforslagene.

På toppen har vi teksten «Søppeldunk ↓». Dette kan være en overskrift eller en ledetekst. Ettersom teksten gjelder hele objektet, velger jeg å kode dette som en overskrift:

<h1>Søppeldunk ↓</h1>

Skal pilen være med her? Tja. Skader ikke. Skjermleseren VoiceOver leser denne overskriften som «Søppeldunk pil ned». Godkjent. Kunne slengt på en aria-hidden, men jeg prøver å holde aria til et minimum.

Det første klistremerket legger jeg inn som en bildetagg, med tom alternativ tekst. Det er ikke noe i ikonet som sier noe mer enn overskriften.

<img src="soppel.svg" alt="">

For enkelhets skyld ignorerer jeg hullet under klistremerket, jeg vet ikke hvilken funksjon det har.

Da kommer vi til selve hovedelementet, selve luken. Her skal det kastes noe inn. Det må vel være en input av et slag? Det er ikke en sjekkboks. Er det en fil? Eller en submit? Her står jeg på et ristende tog med et yoghurtbeger i hånden. Et objekt. Det må være en fil! Jeg vurderte forresten å foreslå at selve luken er en button, og at input-elementet ble synliggjort ved hjelp av knappen. Ettersom dette er restavfall, kan hva som helst slenges her, og jeg velger å ikke bruke accept- og capture-attributtene. Det er mulig å kaste flere søppelgjenstander samtidig, så jeg klemmer på en multiple:

<input type="file" multiple>

Teksten «Avfall Waste» er jo en slags placeholder, den forsvinner når vi dytter inn luken. Attributtet placeholder er ikke gyldig på type="file", så det kan jeg ikke bruke. Her tenker jeg vi må finne frem en label:

<label>Avfall Waste</label>
<input type="file" multiple>

En viktig regel i tilgjengelighet er at skjemaelementer programmatisk skal knyttes opp mot ledeteksten, dette ordner vi med en ID og et for-attributt. I tillegg må vi gi beskjed om at vi bruker et annet språk enn hovedspråket på ordet «Waste», for å få skjermlesere til å uttale det riktig:

<label for="boss">Avfall <span lang="en">Waste</span></label>
<input type="file" multiple id="boss">

Det neste klistremerket blir identiske med det forrige.

Hva gjør vi med håndtaket? Ved å dra i det, trekkes bossdunken ut for å kunne tømme den. Jeg vil si at en knapp er passende her, selv om det ikke er noe vi skal trykke på. Det er et element som endrer tilstanden til elementet uten å ta brukeren bort fra situasjonen. Ikke en lenke med andre ord. Ettersom denne knappen ikke skal brukes til å sende inn skjemaet, altså kaste bosset, må vi spesifisere at den er av typen button. Virker unødvendig og teit, men så lenge en button er en del av et skjema, får den automatisk type submit:

<button type="button"></button>

Seende kan forstå at dette håndtaket trekker ut hele bossdunken. Knappen trenger en forklaring til de som ikke kan se det. Min første tanke var at dette kan vi løse med aria-label som sier Åpne:

<button type="button" aria-label="Åpne"></button>

Det er ikke presist nok, for det kan forveksles med å åpne luken før du kaster noe i dunken. La oss presisere med «Åpne for tømming». Vi kan være litt ekstra behjelpelige med våre skjermleservenner, og krydre med et meningsfylt aria-attributt:

<button type=”button" aria-label="Åpne for tømming" aria-expanded="false"></button>

Til slutt må vi klemme hele sulamitten inn i en skjematagg, så sier vi oss fornøyde:

<h1>Søppeldunk ↓</h1>
<form action="" id="soppeldunk" method="post">
<img src="soppel.svg" alt="">
<label for="boss">Avfall <span lang="en">Waste</span></label>
<input type="file" multiple id="boss">
<img src="soppel.svg" alt="">
<button type=”button" aria-label="Åpne for tømming" aria-expanded="false"></button>
</form>

Der har vi laget en tilgjengelig søppeldunk.

Oppdatering: Denne artikkelen inspirerte vår kjære Joakim til å lage Anders sin tilgjengelige søppeldunk på Codepen, med Comic Sans og alt. Nydelig.