Duomenų vizualizacijos yra grafiniai vaizdai, kurie pasitelkia mūsų vizualinę sistemą ir įgimtus gebėjimus rinkti, kaupti ir apdoroti informaciją aplinkoje, kaip parodyta 1.0 pav. animacijoje.
Dėl to mes galime greitai pastebėti tendencijas, dėsningumus ir išimtis visuose matomuose vaizduose. Ar galite pastebėti vizualinius dėsningumus 1.1 paveiksle?
Šiame pavyzdyje yra dėsningumų, apibrėžtų pagal formų dydį, užpildų ir rėmelių naudojimą bei skirtingų tipų formų naudojimą. Šios charakteristikos, arba vizualiniai kodavimai, yra vizualizacijų statybiniai blokai. Geros vizualizacijos suteikia greitai perprantamą didelio duomenų rinkinio vaizdą, kurio kitaip negalėtume suvokti.
Prieinamumo iššūkiai duomenų vizualizacijose
Vizualizacijos paprastai naudojamos įvairiausiais atvejais ir gali būti gana sudėtingos. Daug dėmesio skiriama tinkamų kodavimų pasirinkimui kiekvienam rodikliui pavaizduoti. Dizaineriai ir inžinieriai naudoja spalvas, kad atkreiptų dėmesį į svarbesnius rodiklius ar informaciją ir pabrėžtų išimtis. Dažnai, priimant šiuos dizaino sprendimus, pamirštama apie žmones su regėjimo negalia.
Regėjimo negalia paveikia šimtus milijonų žmonių visame pasaulyje. Pavyzdžiui, apie 300 milijonų žmonių turi spalvų suvokimo sutrikimų, ir ši būklė paveikia 1 iš 12 vyrų.¹
¹ „Colour Blind Awareness“ (2023)
Dauguma žmonių su šiomis būklėmis nenaudoja pagalbinių technologijų žiūrėdami duomenis. Dėl to vizualinis diagramos dizainas turi būti pritaikytas jiems.
1.2 pav. pateiktas žiedinės diagramos pavyzdys. Iš pirmo žvilgsnio gali atrodyti, kad kategorinė spalvų paletė atitinka skaitmeninės gerovės temą. Ji rami, šalta ir netgi gali sukelti gerovės jausmą.
1.3 pav. parodo, kaip ta pati diagrama atrodys asmeniui, turinčiam protanopiją. Pastebėsite, kad ji šiek tiek sunkiau įskaitoma, nes „Kita“ ir „YouTube“ kategorijos, esančios žiedo viršuje, yra neatskiriamos viena nuo kitos.
Asmeniui, turinčiam achromatopsiją, diagrama atrodys taip, kaip pavaizduota 1.4 paveiksle.
Šiuo atveju galėtume teigti, kad diagrama mums nieko nesako. Ją beveik neįmanoma perskaityti, ir pakeisti ją duomenų lentele būtų neabejotinai naudingiau. Šiuo metu galbūt svarstote, kaip tai ištaisyti. Nuo ko pradėti?
Pradėkite nuo interneto standartų
Interneto standartai gali padėti mums pagerinti dizainą. Šiuo atveju Interneto turinio prieinamumo gairės (WCAG) suteiks išsamiausią reikalavimų rinkinį, nuo kurio galima pradėti. Gairėse reikalaujama atsižvelgti į du dalykus. Pirma, visos spalvos turi pasiekti tinkamą kontrasto santykį su gretimais elementais. Antra, vizualizacijose reikia naudoti ne tik spalvas informacijai perteikti. Tai galima pasiekti įtraukiant antrą kodavimą arba pridedant tekstą, paveikslėlius, piktogramas ar raštus. Nors šis straipsnis skirtas WCAG 2.1 standartų pasiekimui, tie patys principai gali būti naudojami ir WCAG 2.2 standartams pasiekti.
Interneto standartų iššūkiai
Atitikti interneto standartus yra sudėtingiau, nei gali pasirodyti iš pirmo žvilgsnio. Panagrinėkime kelis pavyzdžius, rodančius, kaip sunku užtikrinti, kad duomenys būtų suprantami iš pirmo žvilgsnio, tuo pačiu atitinkant standartus.
1 iššūkis: Spalvų kontrastas
Pagal WCAG 2.1 (AA lygio) standartus, grafiniai elementai, tokie kaip diagramų elementai (linijos, stulpeliai, sritys, mazgai, kraštai, nuorodos ir t. t.), turi pasiekti minimalų 3:1 kontrasto santykį su gretimais elementais. Gretimi elementai gali būti kiti diagramos elementai, sąveikos būsenos ir diagramos fonas. Beje, jei nesate tikri, ar jūsų spalvos pasiekia teisingą minimalų santykį, savo paletę galite patikrinti čia. Be to, visi tekstiniai elementai turi pasiekti minimalų 4.5:1 kontrasto santykį su savo fonu. 1.5 pav. pavaizduota pavyzdinė kategorinė spalvų paletė, atitinkanti rekomenduojamus standartus.
Tai gana ryški paletė. Pritaikant reikalavimus atitinkančią paletę diagramai, ji gali atrodyti kaip 1.6 pav. pavyzdyje.
Nors šis pavyzdys atitinka spalvų kontrasto reikalavimus, yra kompromisas. Diagramos pagrindinis akcentas dabar prarastas. Raudoni segmentai kiekvieno sudėtinio stulpelio apačioje atspindi svarbiausius šioje diagramoje pavaizduotus rodiklius. Jie atspindi klaidas arba elementų, reikalaujančių jūsų dėmesio, skaičių. Kadangi diagramoje naudojamos ryškios spalvos, kurios visos vienodai konkuruoja dėl mūsų dėmesio, dabar sunkiau pamatyti svarbiausius elementus.
2 iššūkis: Dvejopas kodavimas, arba informacijos perteikimas be spalvų
Siekiant sumažinti priklausomybę nuo spalvų informacijai perteikti, WCAG 2.1 (A lygio) standartai taip pat reikalauja naudoti ne tik spalvas informacijai perteikti. Tai gali būti raštas, tekstūra, piktograma, tekstas viršuje arba visiškai kitoks vizualinis kodavimas.
Lengva uždėti raštą ant kategorinės užpildo spalvos ir manyti, kad darbas atliktas, kaip parodyta 1.7 paveiksle. Bet ar diagrama vis dar įskaitoma? Ar ji greitai perprantama? Šiuo atveju segmentai atrodo susiliejantys. Savo knygoje „Kiekybinės informacijos vizualinis pateikimas“ Edwardas Tufte aprašo, kaip svarbu sumažinti diagramų šiukšles (angl. chartjunk) – nereikalingus vizualinio dizaino elementus, kurie riboja galimybę skaityti diagramą. Tai kelia klausimą, ar WCAG standartai skatina mus pridėti nereikalingų diagramų šiukšlių į vizualizaciją?
Pažodinis standartų laikymasis gali nuvesti mus keliu, kuriuo sukursime labai „triukšmingą“ vizualizaciją.
Tegul standartai įkvepia, o ne varžo dizainą
Per pastaruosius kelerius metus mūsų darbo grupė „Google“ suprato, kad lengviau atitikti WCAG vizualinio dizaino reikalavimus, kai į juos atsižvelgiama projektavimo proceso pradžioje, užuot bandžius atnaujinti esamas diagramas, kad jos atitiktų standartą. Pastarasis metodas lemia diagramas su nereikalingomis diagramų šiukšlėmis, kaip parodyta 1.7 pav., ir sumažėjusį patogumą naudoti. Atsižvelgiant į prieinamumą pirmiausia, galėsite sukurti vizualizaciją, kuri bus ne tik prieinama, bet ir naudinga. Mes tai vadiname „prieinamumas pirmiausia“ požiūriu į diagramų dizainą. Dabar pažiūrėkime į keletą pavyzdžių.
Spalvų kontrasto sprendimas
Grįžkime prie spalvų kontrasto reikalavimo per 1.8 pav. pavyzdį. Šiuo atveju svarbiausias rodiklis yra pavaizduotas raudonais segmentais kiekvieno stulpelio apačioje. Raudona spalva atspindi elementų, esančių gedimo būsenoje, skaičių. Kadangi abi spalvos šioje paletėje konkuruoja dėl mūsų dėmesio, sunku susitelkti į svarbiausią rodiklį. Diagrama nebėra greitai perprantama.
Susitelkite tik į esminius elementus
Šiek tiek „ištempdami“ standartus, galime daug geriau suderinti prieinamumą ir greitą perprantamumą. Tik vizualiniai elementai, būtini vizualizacijai interpretuoti, turi atitikti spalvų kontrasto reikalavimą. 1.8 pav. atveju galime naudoti rėmelius, kurie atitinka reikalaujamą kontrasto santykį, o užpildams naudoti šviesesnes spalvas, kad nukreiptume dėmesį. 1.9 paveiksle pastebėsite, kad jūsų dėmesys dabar nukrypsta į svarbiausius rodiklius.
Tamsiosios temos – laimėjimas
Dauguma mums žinomų dizainerių mėgsta geras tamsiąsias temas, kaip parodyta 2.0 paveiksle. Tai atrodo gražiai, o tamsiosios temos dažnai sukuria vizualiai stulbinančias diagramas.
Svarbiausia, tamsioji tema suteikia prieinamumo pranašumą. Kuriant ant tamsaus fono, galime naudoti platesnį spalvų atspalvių spektrą, kurie vis tiek atitiks minimalų reikalaujamą kontrasto santykį.
Pagal „Google“ Duomenų prieinamumo darbo grupės atliktą auditą, 61 atspalvis iš 2018 m. „Google Material“ paletės atitiko minimalų 3:1 kontrasto santykį, kai buvo naudojamas ant tamsaus fono. Tai pavaizduota 2.1 paveiksle. Tik 40 „Google Material“ spalvų atspalvių atitiko tą patį kontrasto santykį, kai buvo naudojami ant balto fono. 50 % padidėjimas prieinamų atspalvių, pereinant nuo šviesaus fono prie tamsaus, daro didelį skirtumą. Turint prieigą prie daugiau atspalvių, galime atkreipti dėmesį į svarbiausius elementus.
Atsižvelgdami į tai, grįžkime prie ankstesnio žiedinės diagramos pavyzdžio 2.2 paveiksle. Kol kas palikime baltą foną, nes tai yra pagrindinė „Google“ prekės ženklo dalis.
Nors tai puikus pirmas žingsnis, dar reikia nuveikti daugiau. Pažvelkime atidžiau.
Dvejopo kodavimo sprendimas ir diagramų šiukšlių mažinimas
Kaip parodyta 2.3 paveiksle, spalva yra vienintelis būdas susieti žiedo segmentus su atitinkamomis kategorijomis legendoje. Nepaisant mūsų pastangų laikytis spalvų kontrasto standartų, diagrama vis dar gali būti sunkiai skaitoma žmonėms su tam tikromis regėjimo negaliomis. Mums reikia dvejopo kodavimo, arba ne tik spalvų, informacijai perteikti.
Kaip tai padaryti nepridedant triukšmo ir nesumažinant diagramos įskaitomumo ar greito perprantamumo? Pradėkime nuo teksto.
Teksto ir piktogramų integravimas
Teksto pridėjimas prie vizualizacijos yra puikus būdas išspręsti dvejopo kodavimo problemą. Naudokime mūsų žiedinę diagramą kaip pavyzdį. Jei perkelsime legendos etiketes į diagramą, kaip parodyta 2.4 paveiksle, galėsime vizualiai susieti jas su atitinkamais segmentais. Dėl to legenda nebereikalinga, o etiketės tampa antruoju kodavimu.
Pažvelkime į keletą kitų būdų, kaip suteikti dvejopą kodavimą, maksimaliai padidinant įskaitomumą. Tai neleis mums eiti keliu, kuriuo pridedamos nereikalingos diagramų šiukšlės, kaip anksčiau pabrėžta 1.7 paveiksle.
Priklausomai nuo situacijos, duomenų formos ar turimos ekrano erdvės, galbūt neturėsime prabangos dėti tekstą ant vizualizacijos. Tokiais atvejais, kaip 2.5 paveiksle, vis tiek galima naudoti piktogramas. Pavyzdžiui, jei turime labai ribotą kategorijų skaičių, pridėtos piktogramos vis tiek gali veikti kaip dvejopas kodavimas.
Kai kurios diagramos gali turėti šimtus kategorijų, todėl sunku pridėti piktogramas ar tekstą. Tokiais atvejais turime grįžti prie diagramos tikslo ir nuspręsti, ar reikia atskirti kategorijas. Galbūt spalva kartu su dvejopu kodavimu gali būti naudojama pabrėžti kitus duomenų aspektus. 2.6 pav. pavyzdys rodo linijinę diagramą su šimtais kategorijų.Čia informacijai perteikti spalvą panaudojome keliais būdais:
- Ryškios spalvos naudojamos pavaizduoti išimtis duomenų rinkinyje.
- Neutrali pilka spalva taikoma visoms nominalioms kategorijoms.
Šiuo atveju vėl galime naudoti labai ribotą formų rinkinį specifinėms kategorijoms atskirti.
Mažųjų kartotinių ir kibirkštinių diagramų privalumai
Vis dar pasitaiko atvejų, kai svarbu atskirti visas vizualizacijoje pavaizduotas kategorijas. Pavyzdžiui, susipainiojusi diagrama pavaizduota 2.7 paveiksle.
Šiuo atveju prieinamesnis sprendimas būtų padalinti diagramas į atskiras mažas diagramas arba kibirkštines diagramas, kaip pavaizduota 2.8 paveiksle. Šis sprendimas yra neabejotinai geresnis visiems, nes leidžia lengviau matyti individualią kiekvienos kategorijos tendenciją. Jis yra prieinamesnis, nes visiškai pašalinome priklausomybę nuo spalvų ir pridėjome tekstą prie kiekvienos mažos diagramos, o tai geriau ekrano skaitytuvo patirčiai.
Rezervuokite užpildus elementams, reikalaujantiems jūsų dėmesio
Anksčiau nagrinėjome užpildų ir kontūrų derinį, siekdami atitikti spalvų kontrasto reikalavimus. Raudona ir žalia spalvos dažnai naudojamos būsenai perteikti. Asmeniui, turinčiam raudonos/žalios spalvų suvokimo sutrikimą, tai gali būti labai problematiška. Kaip alternatyva, 2.9 pav. būsenos piktogramose užpildai rezervuoti elementams, reikalaujantiems jūsų dėmesio. Šį sprendimą sukūrėme kartu su klientais, turinčiais daltonizmą. Jis yra neabejotinai lengviau nuskenuojamas ir žmonėms, turintiems pilną regėjimą.
Atitinkamų metaforų naudojimas
2022 m. pristatėme pertvarkytą „Fitbit“ mobiliąją programėlę masėms. Viena iš mūsų mėgstamiausių vizualizacijų iš šio paleidimo yra diagrama, rodanti jūsų širdies ritmą per dieną. Kaip pavaizduota 3.0 paveiksle, ši diagrama rodo, kada jūsų širdies ritmas kerta skirtingas zonas. Punktyrinės linijos buvo naudojamos pavaizduoti kiekvienos šios zonos slenksčius. Tarpą tarp taškų naudojome kaip dvejopą kodavimą, kuris sukelia „vizualinio“ širdies plakimo jausmą. Slenksčio linijos su arti vienas kito esančiais taškais reiškia didesnį širdies ritmą.
Tęsdami smagių, atitinkamų metaforų temą, slenksčių tarpus netgi pagrindėme Fibonačio seka. Tai leido mums pavaizduoti kiekvieną slenkstį pastebimai skirtingu vizualiniu būdu. Šiam pavyzdžiui žinojome, kad einame teisingu keliu, nes šie prieinamumo sprendimai buvo gerai įvertinti žmonių, turinčių spalvų suvokimo sutrikimų, testuose.
Prieinamos sąveikos būsenos
Spalvų kontrastas ir kodavimai taip pat turi būti atsižvelgiami rodant sąveikas, tokias kaip pelės užvedimas, pasirinkimas ir klaviatūros fokusas, kaip parodyta 3.1 pav. pavyzdžiuose. Čia galioja tos pačios taisyklės. Šiame pavyzdyje kiekvieno stulpelio užvedimo, fokusavimo ir paspaudimo būsena yra apibrėžta elementais, kurie atsiranda virš ir po stulpeliu. Dėl to šie elementai turi atitikti 3:1 kontrasto santykį tik su baltu fonu, o ne su pačiais stulpeliais. Šis modelis ne tik buvo gerai įvertintas keliuose patogumo naudoti tyrimuose, bet ir buvo sukurtas taip, kad būsenos galėtų sutapti. Pavyzdžiui, užvedimo būsena ir pasirinkta būsena gali pasirodyti vienu metu ir vis tiek atitikti prieinamumo reikalavimus.
Įkvėpimo paieškos
Kai kuriems sudėtingesniems projektams įkvėpimo sėmėmės iš netikėtų sričių.
Pavyzdžiui, žiūrėjome į gamtą (3.2 pav.), kad apsvarstytume metodus, kaip vizualizuoti debesų drėgmės poveikį LTE tinklui, kaip eskizuota 3.3 paveiksle.
Įkvėpimo sėmėmės iš pustonių spaudos procesų (3.4 pav.), kad pagalvotume, kaip galėtume iš naujo įsivaizduoti šiluminę diagramą su dvejopu kodavimu, kaip pavaizduota 3.5 paveiksle.
Taip pat įkvėpimo sėmėmės iš architektūros ir to, kaip žmonės juda pastatuose (3.6 pav.), kad apsvarstytume metodus, kaip parodyti duomenų apimtį ir srautą į žiedinę diagramą, kaip pavaizduota 3.7 paveiksle.
Šiuo atveju animuotas vidinis žiedas pabrėžia žiedinės diagramos apimtį, kai ji yra tuščia, ir nurodo, kad ji užsipildys iki 100 %. Animacija yra puikus metodas, tačiau ji kelia kitų prieinamumo iššūkių ir turėtų arba pasibaigti, arba turėti sustabdymo valdiklį.
Kai kuriais atvejais buvome net įkvėpti tyrinėti naujas esamų vizualizacijų tipų versijas, kaip parodyta 3.8 paveiksle. Ši atvejo analizė pabrėžia žingsnis po žingsnio vadovą, kaip priėjome prie šio pavyzdžio.
Kaip įtikinti žmones dėl prieinamumo?
Viena iš pagrindinių pamokų yra tai, kad svarbu kuo greičiau įtraukti kolegas į prieinamumo klausimus. Jūsų reikalavimus atitinkantys dizainai gali neatrodyti tokie gražūs kaip neatitinkantys ir gali sulaukti kritikos.
Taigi, kaip įtikinti kolegas? Pradžiai, švietimas yra labai svarbus. Pateikite pavyzdžių, kaip šie, kurie gali padėti kolegoms ugdyti empatiją žmonėms su regėjimo negalia. Raskite akimirkų pasidalinti darbu su savo įmonės vadovų komanda, skleisdami sąmoningumą. Komandos susitikimai, dizaino kritikos sesijos, „Klausk manęs bet ko“ (AMA) sesijos, organizacijos forumai ir bendri susirinkimai yra geras pradinis taškas. Dažnai kolegos gali nevisiškai suprasti, kaip prieinamumo reikalavimai taikomi diagramoms arba kaip jų vizualizacijas naudoja žmonės su negalia.
Nors dalijimasis yra puikus pradinis taškas, komunikacija yra vienpusė. Pastebėjome, kad lengviau sukurti pagreitį, kai kviečiate kitus dalyvauti projektavimo procese. Pakvieskite juos į idėjų generavimo susitikimus, dizaino peržiūras, bendro projektavimo sesijas ir problemų erdvę, kad padėtumėte jiems įvertinti, kokie sudėtingi yra šie iššūkiai. Paprašykite ir jų pagalbos.
Bendraudami su kolegomis, sugebėjome nustatyti savo čempionus grupėje – žmones, kurie buvo tokie aistringi šiai temai, kad buvo pasirengę skirti papildomo laiko demonstracinių versijų, prototipų, dizaino specifikacijų ir tyrimų saugyklų kūrimui. Pavyzdžiui, „Google“ sugebėjome paskelbti savo Pagrindinius patarimus dėl duomenų prieinamumo „Material Design“ tinklaraštyje.
Be gero pilietiškumo ir iniciatyvos iš apačios, yra būdų įtikinti ir verslą. Nurodymas į tokius reglamentus kaip 508 skirsnis Amerikoje ir Europos prieinamumo aktas yra kiti geri būdai paskatinti jūsų verslą gilintis į jūsų produkto prieinamumą. Tai taip pat veiksmingas mechanizmas gauti finansavimą ir užtikrinti, kad prieinamumas būtų jūsų produkto plane. Kai jau pateikėte verslo argumentus ir nustatėte prieinamumo čempionus savo komandoje, laikas pradėti projektuoti.
Išvada
Prieinamumas yra daugiau nei atitiktis. Prieinamumo sprendimai gali būti ir bus naudingi visiems, todėl svarbu jų nenustumti į specialų meniu ar režimą arba nepamiršti iki pat projektavimo proceso pabaigos. Kai atsižvelgiate į prieinamumą nuo pat pradžių, WCAG standartai staiga atrodo daug mažiau varžantys, nei bandant pritaikyti esamas diagramas prieinamumui.
Čia pateikti pavyzdžiai buvo sukurti per 3 metus ir yra pagrįsti vertingomis pamokomis, išmoktomis kelyje. Tikimės, kad galėsite pasinaudoti šiame straipsnyje pateiktais išbandytais dizainais, kad gautumėte pranašumą. O taikydami „prieinamumas pirmiausia“ požiūrį, galiausiai sukursite geresnes duomenų vizualizacijas – tokias, kurios visapusiškai atsižvelgia į tai, kaip visi žmonės renka, kaupia ir apdoroja informaciją.
Ištekliai
Norėdami pradėti galvoti apie duomenų prieinamumą, peržiūrėkite kai kuriuos iš šių išteklių:
- Pradžiamokslis
- Spalva ir kontrastas
- ACM
- Kontrasto tikrinimo įrankis
- WCAG reikalavimai
- „Material Design“ geriausios praktikos ir specifikacijos
