馃寛 馃 Oparty na opiniach selektor kolor贸w

(20 marca 2020)

W ca艂ej sieci projektanci i in偶ynierowie coraz lepiej radz膮 sobie z budowaniem z my艣l膮 o dost臋pno艣ci. W Wistia ostatnia aktualizacja naszego odtwarzacza wideo by艂a du偶ym krokiem naprz贸d, wprowadzaj膮c ulepszenia, dzi臋ki kt贸rym jest przyjazny dla czytnika ekranu, umo偶liwia nawigacj臋 za pomoc膮 klawiatury i obs艂uguje audiodeskrypcje.

Pr贸bnik kolor贸w z zaznaczonym polem wyboru o tre艣ci 鈥濷granicz widmo do kolor贸w t艂a o wysokim kontra艣cie鈥

Ale tak fantastyczne i utalentowane jak nasz zesp贸艂, s膮 pewne aspekty dost臋pno艣ci wideo, kt贸rych po prostu nie mo偶emy naprawi膰 za kulisami. Nadal to tw贸rcy wideo mog膮 zam贸wi膰 napisy, doda膰 opisowy tekst alternatywny do swoich miniatur i wybra膰 kolor odtwarzacza, kt贸ry b臋dzie pasowa艂 do ich marki. Ten wyb贸r ma du偶y wp艂yw na dost臋pno艣膰, poniewa偶 jasny kolor t艂a mo偶e sprawi膰, 偶e tekst i ikony b臋d膮 ma艂o kontrastowe, a偶 do nieczytelno艣ci.

Kontrola nad wygl膮dem i stylem gracza jest jedn膮 z najwa偶niejszych funkcje, kt贸re nasi klienci wymieniaj膮 najcz臋艣ciej jako pow贸d wyboru Wistii, ale jest to r贸wnie偶 wyb贸r, kt贸ry mo偶e powa偶nie wp艂yn膮膰 na dost臋p bez zdawania sobie sprawy, o co toczy si臋 gra.

Aby rozwi膮za膰 ten problem, postanowili艣my zaprojektowa膰 pr贸bnik kolor贸w, kt贸ry u艂atwia wyb贸r dost臋pno艣ci.

Umieszczenie na nim liczby oznacza dokonanie 艣wiadomego wyboru za pomoc膮 jak najmniejszej liczby klikni臋膰. Szukaj膮c prostego interfejsu u偶ytkownika o niskim wsp贸艂czynniku tarcia do wybierania kolor贸w, zebrali艣my milion (?) R贸偶nych sposob贸w wyboru koloru. Dlaczego te wszystkie s膮 r贸偶ne? Dlaczego nie ma standardu pr贸bnika kolor贸w? Jaka jest r贸偶nica mi臋dzy 鈥濲asno艣ci膮鈥 a 鈥濲asno艣ci膮鈥?

Wiele r贸偶nych selektor贸w kolor贸w, pokazuj膮cych r贸偶ne uk艂ady i struktury przestrzeni kolor贸w

Odpowied藕 tkwi w tr贸jwymiarowej przestrzeni kolor贸w. Oznacza to, 偶e aby dok艂adnie przedstawi膰 wszystkie mo偶liwe kolory, potrzebujesz tr贸jwymiarowego kszta艂tu. Model, kt贸ry najbardziej odpowiada naszym instynktom dotycz膮cym koloru, to HSV: Hue (plama na t臋czy), Saturation (czysto艣膰 tego odcienia w por贸wnaniu z jego zamgleniem zmieniaj膮cym si臋 w szary), Value (jasno艣膰 tego odcienia w por贸wnaniu z jego wtopieniem w biel lub czarny). Ka偶da z tych trzech zmiennych jest wymiarem niezb臋dnym do zdefiniowania koloru wy艣wietlanego na ekranie.

Tr贸jwymiarowe kszta艂ty reprezentuj膮ce przestrze艅 kolor贸w: a kolumna, sto偶ek, sze艣cian i kula
Ciekawostka: warto艣ci szesnastkowe kolor贸w nie s膮 odwzorowywane na HSV, ale (mniej intuicyjny) RGB. Ka偶da z trzech par znak贸w reprezentuje kana艂 koloru czerwonego, niebieskiego lub zielonego w systemie szesnastkowym (podstawa-16), wi臋c #FF FF FF jest bia艂y, poniewa偶 wszystkie trzy s膮 maksymalne jak 馃憜 艣rodek obrazu tego sze艣cianu, podczas gdy #FF 00 00 jest czerwony, poniewa偶 tylko kana艂 R jest maksymalny. Tak wi臋c lewa powierzchnia tego sze艣cianu to wszystkie kolory, kt贸re mo偶na uzyska膰, gdyby zmieni膰 tylko kana艂 R, a ostatnie cztery znaki kodu szesnastkowego pozosta艂y FF FF.

Tak fajnie, jak by艂oby, gdyby u偶ytkownicy wybierali kolor, przechodz膮c w tr贸jwymiarowym 艣wiecie do wsp贸艂rz臋dnej (x, y, z) , kt贸ra najlepiej pasuje do ich marki, nie spowodowa艂oby kilku klikni臋膰 i szybkich, dobrych wybor贸w. Powodem, dla kt贸rego istnieje tak wiele selektor贸w kolor贸w jest to, 偶e potrzeba pewnego stopnia abstrakcji, aby wzi膮膰 t臋 tr贸jwymiarow膮 przestrze艅 kolor贸w i zredukowa膰 j膮 do dwuwymiarowego interfejsu u偶ytkownika . Dlatego wszystkie selektory kolor贸w maj膮 co najmniej dwie (czasem trzy) osie do wyboru – u偶ytkownik musi wybra膰 ich x, y i z; ich odcie艅, nasycenie i warto艣膰. Dla naszego zespo艂u projektowego te wybory oznaczaj膮 dodatkowe klikni臋cia. Aby zminimalizowa膰 te klikni臋cia, zadali艣my sobie pytanie, kt贸re z nich s膮 najwa偶niejsze i najmniej wa偶ne.

Wyb贸r odcienia jest najwa偶niejszym klikni臋ciem; wybranie nasycenia jest najmniej wa偶nym klikni臋ciem.

Odcie艅 to pierwsza rzecz, o kt贸rej my艣limy, kiedy my艣limy o wyborze koloru. W kontek艣cie dopasowania odtwarzacza wideo do koloru marki nasycenie jest ostatni膮 rzecz膮, o kt贸rej my艣limy. Dzieje si臋 tak, poniewa偶 wi臋kszo艣膰 kolor贸w marki jest w pe艂ni nasycona, a nawet je艣li tak nie jest, prawdopodobnie nadal my艣lisz o nich w ten spos贸b. Oznacza to, 偶e wielu u偶ytkownik贸w nigdy nie b臋dzie chcia艂, aby nasycenie wynios艂o cokolwiek innego ni偶 100, a je艣li jest to w艂asne klikni臋cie, to klikni臋cie, kt贸rego mo偶emy potencjalnie unikn膮膰. To pozostawia tylko odcie艅 i warto艣膰 do wyboru, kt贸re mog膮 by膰 osiami dwuwymiarowego pola i mo偶na je wybra膰 jednym klikni臋ciem.

Pr贸bnik kolor贸w pokazuj膮cy dwie sekcje, pierwsz膮 z matryc膮 Barwy i Jasno艣ci, a drug膮 z widmem oznaczonym Nasyceniem
Jednym klikni臋ciem u偶ytkownik wybiera odcie艅 i jasno艣膰. Drugie klikni臋cie, aby zmniejszy膰 nasycenie, cz臋sto nie jest potrzebne.

Oto! A wyb贸r koloru jednym klikni臋ciem. A co z dost臋pno艣ci膮? Mo偶emy doda膰 tekst pomocniczy, kt贸ry wyja艣nia, dlaczego kontrast jest wa偶ny (robimy to) i pokaza膰 obliczony wsp贸艂czynnik kontrastu i czy spe艂nia on standard (my te偶 to robimy), ale praca do wykonania jest nadal wyborem . Nasi u偶ytkownicy musz膮 zrozumie膰, z czego maj膮 do wyboru, nie trac膮c kontekstu pe艂nego spektrum opcji. W ko艅cu selektory kolor贸w s膮 wystarczaj膮co skomplikowane, a obejrzenie tego, co si臋 dzieje, jest 艂atwiejsze dzi臋ki animacji pokazuj膮cej, co jest zabierane.

Animowany gif selektora kolor贸w przechodz膮cy z pe艂nego spektrum do ograniczonego spektrum tylko kolor贸w o wysokim kontra艣cie

Nasze rozwi膮zanie dodaje klikni臋cie, ale tylko jeden. Po klikni臋ciu pola wyboru selektor maskuje wszystkie warto艣ci, kt贸re nie tworz膮 wystarczaj膮co du偶ego kontrastu w stosunku do bia艂ych element贸w steruj膮cych odtwarzacza, aby mo偶na je by艂o uzna膰 za dost臋pne. Je艣li Twoje poprzednie ustawienie nie mie艣ci si臋 w dopuszczalnym zakresie, odcie艅 pozostaje taki sam, a Jasno艣膰 spada do najwy偶szego dopuszczalnego poziomu.

Obliczenia s膮 oparte na matematyce dostarczonej przez organizacj臋 Web Content Accessibility Guild , na kt贸rej standardzie AA opieramy nasze prace nad dost臋pno艣ci膮. Stamt膮d w艂膮czamy dodatkowy wsp贸艂czynnik lekko艣ci, aby uwzgl臋dni膰 80\% krycie odtwarzacza Wistia. Oznacza to, 偶e scenariusz z najni偶szym kontrastem, gdy odtwarzacz jest na艂o偶ony na czyst膮 biel, nadal daje wystarczaj膮cy kontrast.

Ten pr贸bnik kolor贸w to tylko niewielka cz臋艣膰 naszego narz臋dzia u艂atwie艅 dost臋pu, kt贸re zawiera list臋 kontroln膮 dla ka偶dego wideo i pomocne podpowiedzi w trakcie procesu dostosowywania, wyja艣niaj膮ce, jak r贸偶ne wybory wp艂ywaj膮 na dost臋pno艣膰. Du偶a cz臋艣膰 tej pracy jest wykonywana za kulisami przez firm臋 Wistia, ale pomagamy u偶ytkownikom w zapoznawaniu si臋 z ustawieniami, kt贸re musz膮 dostosowa膰, to spos贸b, w jaki staramy si臋, aby dost臋pno艣膰 by艂a 艂atwym wyborem.

Dodaj komentarz

Tw贸j adres email nie zostanie opublikowany. Pola, kt贸rych wype艂nienie jest wymagane, s膮 oznaczone symbolem *