Upravo zbo toga što smo posljednje decenije navikli da obavljamo većinu svakodnevnih poslova putem weba ili mobilnih aplikacija. Za mnoge je ovo najprikladniji način, uz minimalnu gnjavažu.
Međutim, zamislite situaciju u kojoj su digitalna rješenja svuda oko vas, a vi ne možete da ih koristite. Ne možete da kupujete na mreži, provjerite stanje na vašem računu u aplikaciji za bankarstvo, razumijete podatke grafikona jer sve boje izgledaju slično, a dešava se i da pošaljete obrazac, a da toga niste svjesni, jer je komanda s oznakom “Dalje” zapravo bila komanda “Pošalji”.
Pristupačan dizajn je dobar dizajn
Pristupačnost, ponekad skraćeno poznata kao A11y, nastoji da riješi probleme s korišćenjem digitalnih proizvoda i omogući pristup uslugama ili proizvodima svim korisnicima, bez obzira na način na koji s njima stupaju u interakciju. Nažalost, za mnoge korisnike problemi pristupačnosti su prepreka u korišćenju digitalnih proizvoda i usluga, tako da im mnogi digitalni proizvodi na kraju postanu nedostupni.
Kako bi to izbjegli, dizajneri moraju da promijene način razmišljanja, jer je pristupačnost od koristi svim korisnicima. U stvari, neke funkcije koje su prvenstveno bile namijenjene pristupačnosti, kao što je funkcija “Zoom In/Zoom Out”, zapravo su postale ključne za korisničko iskustvo u cjelini i sada su uobičajena praksa.
Pružajući rješenja za jednu grupu, često zapravo pružimo usluge mnogo širem krugu korisnika.
Četiri principa pristupačnosti
Najprije morate da razumijete četiri glavna vodeća principa. Ovi principi su razvijeni kao dio WCAG standarda, koji se smatraju primarnim međunarodnim standardima pristupačnosti za web.
Na osnovu WCAG-a, tim za pristupačnost u Infinumu je osmislio univerzalni pristup koji pokriva i mobilne platforme i mobilni web i uključuje pristupačnost u životnom ciklusu digitalnih proizvoda. Ako ste zainteresovani, više podataka o inicijativi pristupačnosti u Infinumu pronaći ćete u ovom članku.[1]
Kako da dizajnirate proizvod koji svi mogu da koriste?
Očigledno, pristupačan dizajn je dobar dizajn. Ali kako da učinite svoj dizajn pristupačnim?
Da bismo vam pomogli da to shvatite, saželi smo smjernice u praktičnu listu da pomognemo dizajnerima da riješe mnoge probleme pristupačnosti kroz svoj rad. Primijenite ove dobre prakse kako biste osigurali da vaš proizvod prati četiri glavna principa pristupačnosti.
1. Definišite skalu kontrasta boja
Da li ste pokušali da koristite telefon na jakom suncu? Po svoj prilici, to nije baš prijatno iskustvo, jer morate da žmirite ili priljubite lice za ekran. Razlog za to je vjerovatno nizak kontrast boja.
Ako ste slabovidni ili daltonisti, svakodnevno možete da sa suočavate s problemima usljed niskog kontrasta boja. Kontrast boja utiče na čitljivost vašeg sadržaja i važan je element principa uočljivosti. Postoji posebno pravilo za odnos kontrasta koje je prihvaćeno kao standard, jer osigurava zadovoljavajući nivo čitljivosti.
Kako biste izbjegli probleme s kontrastom, obratite pažnju na kontrast boja u svom dizajnu od samog početka. Uložite vrijeme da definišete skalu boja i način na koji ćete ih koristiti prilikom kreiranja vodiča za stil vašeg proizvoda.
Lista zadataka tokom dizajniranja:
- Testirajte boje kada definišete paletu boja vašeg proizvoda. Provjerite koje boje se slažu, a koje ne, i zabilježite to u „vodiču za stil“
- Slijedite pravila o odnosu veličine: 3:1 za velike veličine teksta i 4,5:1 za normalne veličine teksta
- Slijedite pravilo srazmjere 3:1 za ikone i aktivnu grafiku. Dodatna napomena: dekorativni elementi i elementi brenda ne zahtijevaju minimalne srazmjere kontrasta
- Ako koristite tekst na slikama, osigurajte da je tekst čitljiv – provjerite ima li dovoljno kontrasta između pozadine i teksta (možete dodati sloj preklapanja između) i izvezite tekst kao zasebnu jedinicu, a ne kao dio slike
- Izbjegavate korišćenje čiste crne na čisto bijeloj i obrnuto, jer takva kontrastna vrijednost svjetlosti boje stvara intenzivne nivoe svjetlosti koje previše stimulišu oči i dovode do zamora
- Izbjegavajte korišćenje previše svijetlih i zasićenih boja, jer one takođe previše stimulišu oči i dovode do zamora
2. Uključite vizuelne znakove i oznake
Oslanjajući se na prenošenje informacija samo jednim od naših čula, korisnici mogu da propuste ključne informacije.
Na primjer, korisnici koji su slabovidni za boje možda neće primijetiti crveni obris polja za unos. Korisnici koji koriste čitače ekrana možda neće moći da razumiju šta znači “ic_24” u kontekstu ekrana s kojim komuniciraju. Ili zamislite da popunjavate dugačak obrazac sa brojevima i na kraju otkrijete da ste neke podatke unijeli pogrešno, a polja vam nisu označena, pa morate da zapamtite koja polja sadrže koje podatke.
Sve ovo može dovesti do toga da korisnici naprave nenamjerne greške koje predstavljaju prepreku prilikom korišćenja usluga ili proizvoda. Dodavanjem jednostavnih znakova i oznaka možete da pomognete korisnicima i uštedite im vrijeme i energiju.
Lista zadataka tokom dizajniranja:
- Dodajte oznake u polja za unos i obrasce
- Koristite kombinaciju ikona + boja + opisni test za status povratnih informacija
- Napravite razliku između aktivnih i neaktivnih polja za unos dodavanjem drugog vizuelnog indikatora, kao što su različite opcije popunjavanja, debljina okvira, različiti grafički elementi, kao što su linije ili tačke
- Podcrtajte linkove
- Koristite boju + uzorke ili ikone za grafikone i dodatne kvantitativne podatke
- Koristite traku napretka za duže korisničke tokove koji uključuju više koraka
3. Kreirajte jasnu hijerarhiju informacija
Ovo zvuči kao logična praksa svih dizajnera na planeti. Ali morate biti svjesni planiranog redosljeda u kojem se doživljavaja vaš proizvod. Ponekad vas vaše kreativne strasti mogu odvesti eksperimentalnim putem, a moguća nuspojava može da bude nejasna ili neprecizno implementirana struktura sadržaja koja ne prenosi informacije na način kako je zamišljena.
To može predstavljati problem za korisnike koji koriste pomoćne tehnologije. Pobrinite se da organizujete informacije u logičnu strukturu koju je lako pratiti, jer ona pomaže korisnicima da razumiju, daju prioritet i da se kreću kroz sadržaj.
Lista zadataka tokom dizajniranja:
- Dodajte naslov stranice
- Kreirajte posebne grupe predmeta
- Kreirajte podnaslove za svaku grupu
- Koristite linearni i logičan raspored
- Koristite dosljedna poravnanja i rasporede teksta
- Uskladite s programerima predviđeni redosljed čitanja elemenata
4. Koristite opisne i nedvosmislene pozive na akciju
Dalje u tekstu su date dvije opcije aktivnih stavki. Koji je tekst razumljiviji?
Opcija A: “Više”
Opcija B: “Pogledajte više detalja o našoj politici dostave”
Pretpostavljam da ste odabrali opciju B.
Možda postoje druge opcije koje bolje funkcionišu i optimizovane su na temelju upotrebljenih znakova, ali imajte na umu da treba da izbjegavate dvosmislene linkove ili dugmad koja nisu jasno označena. Umjesto toga, dajte bolji opis kako bi se svrha dugmeta ili linka mogla razumjeti samo iz teksta.
Lista zadataka tokom dizajniranja:
- Implementirajte test upotrebljivosti da provjerite svoju hipotezu pristupačnosti
- Uskladite se s reklamopiscima, piscima sadržaja, UX piscima i onima koji oblikuju tekst unutar proizvoda
5. Uvjerite se da su područja ciljanih dodira dovoljno velika
Da li poštujete minimalna područja dodira? Ciljana područja dodira su oblasti ekrana koje reaguju na unos korisnika, odnosno sve aktivne stavke. Ako je to područje premalo ili preblizu drugoj radnji, može izazvati neželjene interakcije ili isfrustrirati korisnike. Stoga je korisnicima potrebno najmanje 1 cm2 prostora na ekranu da bi odabrali željenu stavku. Imajte na umu da različite platforme imaju različite zahtjeve: iPhone = 44×44 px, Android = 48×48 px, Web = 44×44 px.
Lista zadataka tokom dizajniranja:
- Osigurajte minimalno područje dodira na osnovu platforme za koju dizajnirate
- Uvjerite se da vaše male aktivne stavke imaju dovoljno prostora oko sebe u skladu s minimalnom veličinom
- Omogućite najmanje 8px razmaka između aktivnih elemenata
6. Dajte korisnicima kontrolu
Korisnici treba uvijek da budu svjesni koji je sljedeći korak unutar proizvoda kojim upravljaju. Nemojte automatski osvježavati ili ažurirati stranice osim ako je to zaista neophodno. Neočekivana ponašanja proizvoda mogu uzrokovati probleme, kao što su nenamjerno slanje podataka ili kupovina, nemogućnost čitanja stranice zbog automatskih ažuriranja ili automatske reprodukcije zvuka.
Ove stvari mogu dovesti do toga da korisnici nemaju dovoljno vremena da završe radnju. Dajući korisnicima kontrolu nad situacijom, oni su u mogućnosti da se lakše kreću i upralvjaju digitalnim proizvodima.
Lista zadataka tokom dizajniranja:
- Izbjegavajte vremenski ograničene funkcije
- Ako su vam potrebne (npr. sigurnosni tokeni), pobrinite se da korisnici vide i da su svjesni preostalog vremena
- Omogućite korisnicima da produže vrijeme
- Ne mijenjajte kontekst ekrana bez potvrde korisnika
- Nemojte automatski ažurirati sadržaj
- Dajte korisnicima mogućnost da pauziraju ili zaustave bilo koji automatski proces
- Nemojte automatski reprodukovati zvuk i omogućite korisnicima mogućnost kontrole jačine zvuka
- Ne zarobljavajte korisnike u toku postupka i pružite im jasnu akciju zatvaranja
7. Izbjegavajte korišćenje trepćućih ili pretjerano dinamičnih animacija
Važno je izbjegavati korišćenje trepćućih i pretjerano dinamičnih animacija iz razloga pristupačnosti, jer one mogu uzrokovati napade, migrene i druge zdravstvene probleme kod osoba sa fotosenzitivnom epilepsijom ili poremećajima senzorne obrade. Pored toga, ovi elementi mogu da ometaju i dezorijentišu sve korisnike, remeteći njihovu sposobnost da se fokusiraju na sadržaj i efikasno obavljaju zadatke.
Lista zadataka tokom dizajniranja:
- Odlučite se za statičan sadržaj umjesto da se on kreće, treperi ili bljeska
- Ako koristite elemente koji trepere, provjerite da li je brzina treperenja 3 puta u sekundi ili manje
- Uvjerite se da trepćući objekti pokrivaju manje od 5% ekrana
- Unaprijed upozorite korisnike ako je sadržaj fotosenzitivan
- Konsultujte se s dizajnerima pokreta o ovoj temi
8. Konsultujte se s ostatkom projektnog tima kako biste riješili problem pristupačnosti
Posljednja praksa pristupačnosti ne tiče se toliko procesa dizajniranja koliko timske komunikacije. Za dizajnere je važna praksa da se konsultuju s drugim članovima projektnog tima jer su i dizajn i razvoj ključni za uspješno kreiranje pristupačnog digitalnog proizvoda.
Koordinisani rad dizajnera, stručnjaka za sadržaj, testera softvera i programera osigurava da se vizija dizajna implementira precizno, da se uzmu u obzir tehnički aspekti i da se proizvod testira u različitim okruženjima i korišćenjem različitih pomoćnih tehnologija kako bi se ispunili zahtjevi pristupačnosti i pružilo najbolje korisničko iskustvo za sve korisnike.
Lista zadataka tokom dizajniranja, zajednički s timom za proizvod:
- Definišite stanja fokusa za aktivne elemente za tastaturu
- Uvjerite se da istaknuti okvir fokusa ima dovoljan kontrast unutar vašeg korisničkog interfejsa
- Definišite pravi redosled fokusa elemenata u saradnji sa programerima
- Podrška prilagodljivom korisničkom interfejsu, na primjer, korisnicima se omogućava da povećavaju veličinu fonta
- Konsultujte se s timom za sadržaj kako biste pružili tekstualne alternative slikama koje prenose informacije (ukrasne slike ne zahtijevaju tekstualnu alternativu)
- Konsultujte se s timom za sadržaj kako biste pružili natpise i transkripte i uključili ulazne tačke u svoje dizajne
Zapamtite, dizajn je samo jedan dio velike slagalice pristupačnosti, ali igra bitnu ulogu. Uključujući ovih osam praksi u svoj radni tok dizajna i radeći redovne A11y recenzije, pomažete svim djelovima slagalice da se slože na pravo mjesto.
