Optymalizacje UX dla użytkowników korzystających tylko z klawiatury i technologii wspomagających

(To jest artykuł sponsorowany). Jedną z fajnych rzeczy związanych z dostępnością jest to, że zmusza cię do zobaczenia i przemyślenia aplikacji poza typowym doświadczeniem użytkownika widzącego, korzystającego z myszy. Użytkownicy, którzy nawigują wyłącznie za pomocą klawiatury (KO) i/lub technologii wspomagającej (AT), są w dużym stopniu zależni nie tylko od przemyślanej architektury informacji aplikacji, ale także od możliwości, jakie zapewnia aplikacja, aby zapewnić jak najprostsze działanie dla wszystkich typów użytkowników.

W tym artykule omówimy kilka z tych afordancji, które mogą poprawić wrażenia użytkowników KO/AT, nie zmieniając ich tak naprawdę dla kogokolwiek innego.

Dodatki do UX Twojej aplikacji

Są to funkcje, które możesz dodać do swojej aplikacji, aby poprawić UX dla użytkowników KO/AT.

Pomiń linki

Pomiń link to funkcja nawigacji, która niewidocznie znajduje się na górze stron internetowych lub aplikacji. Gdy jest obecny, jest wywoływany i staje się widoczny na pierwszej karcie aplikacji.

Link do pomijania pozwala użytkownikowi „przeskoczyć” do różnych interesujących go sekcji w aplikacji bez konieczności przechodzenia do niej. Łącze pomijania może zawierać wiele łączy, jeśli aplikacja ma wiele obszarów zainteresowań, które Twoim zdaniem użytkownicy powinni mieć szybki dostęp do punktu wejścia do aplikacji.

Dla użytkowników KO/AT jest to przydatne narzędzie, które umożliwia im szybkie przechodzenie przez aplikację i może pomóc zorientować się w architekturze informacji aplikacji. Wszyscy inni użytkownicy prawdopodobnie nigdy nawet nie dowiedzą się, że ta funkcja istnieje.

Oto przykład, w jaki sposób obsługujemy linki pomijania. Po kliknięciu linku naciśnij Tab ⇥ i spójrz w lewy górny róg. Łącze pominięcia zawiera dwa łącza: treść główna i przykłady kodu . Możesz użyć Tab ⇥ do poruszania się między nimi, naciśnij Enter , aby przejść do linku.

Skróty/Menu skrótów

Jest to funkcja, którą chyba każdy zna: skróty i skróty klawiszowe. Prawdopodobnie używałeś ich od czasu do czasu, są one bardzo popularne wśród zaawansowanych użytkowników aplikacji i występują w różnych wcieleniach.

Dla użytkowników KO/AT skróty/skróty klawiszowe są nieocenione. Pozwalają im korzystać z aplikacji zgodnie z przeznaczeniem, bez konieczności wizualnego kierowania czegokolwiek lub przechodzenia przez aplikację w celu uzyskania dostępu do elementu lub treści. Chociaż częste działania i treści są zawsze doceniane, gdy są reprezentowane w menu skrótów / klawiszy skrótu, możesz również rozważyć nieco rzadsze działania, które mogą być ukryte w interfejsie użytkownika (nie bez powodu), ale nadal są czymś, czego użytkownik chciałby mieć dostęp.

Tworzenie skrótów do tych funkcji będzie niezwykle pomocne dla użytkowników KO/AT. Możesz sprawić, by polecenie było nieco bardziej zaangażowane, na przykład używając (3) naciśnięć klawiszy, aby je wywołać, aby zasugerować, że jest to rzadziej używana funkcja. Jeśli masz menu skrótów/skrótów klawiszowych, upewnij się, że znalazłeś sposób na promowanie go w swoich aplikacjach, aby Twoi użytkownicy, zwłaszcza użytkownicy KO/AT, mogli go znaleźć i efektywnie z niego korzystać.

Edukacja użytkownika

Edukacja użytkownika odnosi się do części funkcjonalności, która kieruje użytkownikami na temat tego, co robić, dokąd się udać lub czego się spodziewać. Podpowiedzi, wskazówki, dymki informacyjne itp. to przykłady edukacji użytkowników.

Jedną z rzeczy, które powinieneś zadać sobie podczas projektowania, umieszczania i/lub pisania kopii na potrzeby edukacji użytkowników, jest:

„Gdybym tego nie widział, czy nadal warto byłoby zrozumieć ______?”

Wiele razy po prostu zmiana orientacji edukacji użytkowników przez ten obiektyw może prowadzić do znacznie lepszych doświadczeń dla wszystkich. Na przykład zamiast mówić „Dalej, kliknij przycisk poniżej”, możesz napisać „Aby rozpocząć, kliknij przycisk START”. Druga metoda usuwa orientację wizualną i zamiast tego koncentruje się na wspólnych informacjach, które zarówno widzący, jak i użytkownik KO/AT mieliby do swojej dyspozycji.

Uwaga : Powinienem wspomnieć, że korzystanie z funkcji edukacyjnych użytkownika, takich jak wskażniki, w celu wizualnego wskazywania rzeczy w aplikacji, jest całkowicie w porządku, po prostu upewnij się, że tekst towarzyszący pozwala użytkownikom KO/AT zrozumieć te same rzeczy, do których odnosi się wizualnie.

Rozszerzenia UX Twojej aplikacji

Istnieją zmiany lub poprawki, które możesz wprowadzić do wspólnych komponentów/funkcji, aby poprawić UX dla użytkowników KO/AT.

Ogniskowanie modalne

Teraz wkraczamy w sedno sprawy. Jedną z największych zalet dostępności jest to, jak otwiera drzwi do nowatorskich sposobów rozwiązywania problemów, których być może wcześniej nie brałeś pod uwagę. Możesz zrobić coś w pełni dostępnego w WCAG 2.0 AA i rozwiązać problem za pomocą bardzo różnych podejść. W przypadku modów, w Deque wymyśliliśmy interesujące podejście, które byłoby całkowicie niewidoczne dla większości widzących, ale zostałoby zauważone przez użytkowników KO/AT niemal natychmiast.

Aby modalny był dostępny, musi ogłosić się po wywołaniu. Dwa typowe sposoby na zrobienie tego to: skoncentrowanie ciała modalu po otwarciu modalu lub skoncentrowanie nagłówka modalu (jeśli go ma) po otwarciu modalu. Robisz to, aby AT użytkownika mógł odczytać intencję modala, taką jak „Edytuj profil” lub „Utwórz nową subskrypcję”.

Po zaznaczeniu treści lub nagłówka, naciśnięcie Tab ⇥ przeniesie fokus do następnego elementu modalnego, który można aktywować — zwykle pola lub, jeśli znajduje się w nagłówku, czasami jest to przycisk zamykania (X). Kontynuacja na karcie spowoduje przejście przez wszystkie elementy, na które można ustawić fokus, zazwyczaj kończąc na przyciskach terminala, takich jak ZAPISZ i/lub ANULUJ.

Teraz dochodzimy do interesującej części. Po tym, jak skupisz się na ostatnim elemencie modalnym, ponowne naciśnięcie Tab ⇥ „przeskoczy” z powrotem do pierwszego tabulatora, który w przypadku modu będzie albo treścią, albo nagłówkiem, ponieważ od tego zaczęliśmy. Jednak w naszych modach „pomijamy” ten początkowy tabulator i przenosimy cię do drugiego przystanku (który w naszych modalnych jest zamknięciem (X) w górnym rogu. Robimy to, ponieważ modalny nie musi się ciągle ogłaszać w kółko w każdym cyklu. Musi to zrobić tylko przy początkowej ewokacji, a nie podczas kolejnych podróży, więc mamy specjalny programowy przystanek, który pomija się po pierwszym razie.

Jest to niewielka (ale doceniana) poprawa użyteczności, którą wymyśliliśmy wyłącznie dla użytkowników KO/AT, która byłaby zupełnie nieznana dla wszystkich innych.

Menu nawigacyjne Przechodzenie i ustawianie ostrości/Wybrane zarządzanie

Menu nawigacyjne są trudne. Mogą być ustrukturyzowane na wiele sposobów, warstwowe, zagnieżdżone i mają niezliczone mechanizmy ewokacji, ujawniania i przechodzenia. Dlatego ważne jest, aby zastanowić się, w jaki sposób wchodzą w interakcje i są reprezentowani przez użytkowników KO/AT w fazie projektowania. Dobre menu powinno być „wchodzące” i „wychodzące”, co oznacza, że ​​przechodzisz do menu, aby z niego skorzystać, i wychodzisz z niego, aby z niego wyjść (jeśli go nie używasz).

Ten pomysł najlepiej ilustruje dosłowny przykład, więc spójrzmy na naszą dwupoziomową, pionową nawigację z Cauldron.

1. Przejdź do https://pattern-library.dequelabs.com/;
2. Naciśnij klawisz Tab ⇥ trzy razy. Pierwsza zakładka to link do pominięcia (który omówiliśmy wcześniej), druga to logo, które działa jako link „powrót do domu”, a trzecia zakładka wchodzi do menu;
3. Teraz, gdy jesteś w menu, użyj klawiszy strzałek ( → i ↓ ), aby poruszać się i otwierać sekcje menu;
4. Naciśnięcie Tab ⇥ w dowolnym momencie spowoduje wyjście z menu i przejście do zawartości strony.

Menu nawigacyjne mogą również działać w połączeniu z niektórymi z poprzednich tematów, takimi jak menu skrótów/klawiszy dostępu, aby korzystanie z menu było jeszcze bardziej wydajne.

Logiczne zachowanie fokusu (IE usuwanie wiersza, powrót do strony)

Utrzymanie skupienia jest bardzo ważne. Większość ludzi jest zaznajomiona, przynajmniej z koncepcją, z skupianiem elementów w ich logicznej zamierzonej kolejności na stronie; jednak może stać się niejasne, gdy element lub zawartość zmieni się/pojawi się/zniknie.

• Na co przechodzi fokus, gdy pole, na którym się znajdujesz, zostanie usunięte?
• Co się stanie, gdy zostaniesz wysłany do innej zakładki, w której aplikacja ma nowy kontekst?
• A co po zamknięciu modu z powodu akcji końcowej, takiej jak ZAPISZ?

Dla widzącego użytkownika istnieją wizualne wskazówki, które mogą poinformować go o tym, co się stało.

Oto przykład: Masz tryb Edytuj przepis , który pozwala użytkownikowi dodawać i usuwać dowolne składniki. Jest jedno pole składnika, a pod nim przycisk „Dodaj kolejny składnik”. (Tak, jest stylizowany na link, ale to temat na inny dzień). Skupiasz się na przycisku. Klikasz przycisk, a między przyciskiem a pierwszym polem pojawia się nowe pole. Na co należy zwrócić uwagę? Najprawdopodobniej użytkownik dodał kolejny składnik, aby się z nim zaangażować, więc uwaga powinna przesunąć się z przycisku na nowo dodane pole.

Dużym wnioskiem z tego wszystkiego są nie tyle konkretne przykłady, co mentalność, która je wspiera — rozważ UX dla swojej aplikacji przez pryzmat użytkownika KO/AT, jak również widzącego użytkownika korzystającego tylko z myszy. Niektóre z najlepszych i najmądrzejszych pomysłów pochodzą z najciekawszych i najważniejszych wyzwań.

Jeśli potrzebujesz pomocy w zapewnieniu, że Twoje funkcje są dostępne, wszystkie powyższe przykłady oraz niezliczone inne można przetestować za pomocą bezpłatnej aplikacji do testowania dostępności sieci Deque: ax pro. To nic nie kosztuje i możesz zarejestrować się tutaj.