Enzo Dobre oko do internetu

Ten wpis kieruję do wszystkich osób, które mają jakikolwiek wpływ na wygląd i działanie serwisu www.

Dawno, dawno temu… Ktoś wymyślił domyślny zestaw i sposób funkcjonowania elementów w przeglądarce, np. przycisk, pole do wpisywania treści (textarea) czy listę rozwijaną (select).

I głównie o tym ostatnim elemencie będzie ten wpis.

Jak popsuć dobre

Dość poważny problem pojawia się wtedy, gdy ktoś chce zmodyfikować pod względem wizualnym element typu lista rozwijana.
Chcemy, żeby wszędzie (w każdej przeglądarce, systemie operacyjnym, urządzeniu – komputerze czy komórce) wyglądała ona identycznie. Lub po prostu zbrzydł nam domyślny wygląd. Nie ma w tym nic złego. Pod kilkoma warunkami.

Można w to kliknąć?

I tu zaczynają się schody: modyfikacja wizualna może zabrnąć tak daleko, że dany element nie przypomina w żaden sposób domyślnego i użytkownik nawet nie wie, że w to można kliknąć, a tym bardziej, że spowoduje to rozwinięcie jakiejś listy.
Imitowanie trójwymiarowości tego elementu nie zaszkodzi. Strzałka lub kształt ją przypominający też powinien dobrze wpłynąć na wstępne rozpoznanie.

120 pozycji za daleko

O ile sam wygląd będzie powodował tylko (aż!), że użytkownik będzie go źle interpretował i od czasu do czasu może się zdziwić, o tyle modyfikacja w sposobie zachowania tego elementu może prowadzić do frustracji. Kto lubi być sfrustrowany? Ja nie.

Oto przykładowe funkcjonalności, które powinna obsługiwać lista rozwijana:

• Po rozwinięciu bardzo długiej listy chcemy znaleźć pierwszą pozycję zaczynającą się na literę „S”. Klikamy w klawisz „S” na klawiaturze i naszym oczom powinna ukazać się zaznaczona pozycja (jeśli istnieje). Ale nie powinniśmy ograniczać tego tylko do pierwszej litery – całość powinna działać nawet po kolejnych uderzeniach w klawisze, np. „S”, „P”, „I”, „N”, „K” zaznaczy nam element „spinka”, nie „spinacz”.
• Po wybraniu za pomocą kursorów odpowiedniej pozycji (tak, powinniśmy zadbać o wsparcie dla klawiszy strzałek, END, HOME) przycisk ENTER powinien akceptować wybór i zamykać listę a nie przesyłać cały formularz, który właśnie wypełniamy.
• Przy długich listach potrzebna jest obsługa przewijania za pomocą scrolla; przynajmniej w przypadku gdy lista rozwijana jest ograniczona wysokością okna przeglądarki i posiada wewnętrzny suwak.

Kwestia dostępności

Jedno zdanie o dostępności dla osób, które nie korzystają ze zwykłych przeglądarek, ale np. z czytników ekranu. Upewnij się, że Twój nowy, ładnie wyglądający element jest też dostępny – np. dzięki progresywnemu ulepszaniu. Dzięki temu osoby niewidome powinny otrzymać domyślny element, z którym na pewno poradzi sobie ich program do „czytania” serwisów.

Wyobraźmy sobie, że z naszej listy korzysta osoba, która ma problemy z ruchami kończyn, przez co bardzo często jest jej trudno wcelować kursorem myszki w małe elementy. Dzięki temu, że lista będzie rozwijać się i zwijać dopiero po kliknięciu unikniemy sytuacji, w której osoba ta będzie sfrustrowana znikającym elementem – ponieważ zjechała kursorem myszki poza obszar listy.

Na przyszłość

Jeśli tworzymy element, który imituje pewien element domyślny, występujący w systemie operacyjnym, to zadbajmy o to, by identycznie się zachowywał. Możemy wtedy powielić jego funkcjonalności, ale także rozwinąć go o dodatkowe przydatne funkcje, które będą dobrze przyjęte przez użytkowników naszego serwisu.