Wygląd i wygoda użytkowników

Pomyśl o swojej ulubionej witrynie lub aplikacji. Co najbardziej podoba Ci się w jej? A teraz zastanów się, co nie podoba Ci się w witrynie lub aplikacji. Sposób, w jaki użytkownicy wchodzą w interakcję z Twoim interfejsem, może się różnić.

Może to zależeć od pory dnia, rodzaju używanego urządzenia, tego, czy spał wystarczająco długo w nocy, czy jest źle, korzysta z technologii wspomagającej osoby z niepełnosprawnością i wielu innych czynników. Na całym świecie jest ponad 8 miliardów ludzi, więc możliwości korzystania z Twoich projektów i korzystania z nich są nieograniczone.

Projektowanie promujące integrację społeczną

Jak możemy zaspokoić wszystkie potencjalne potrzeby użytkowników jednocześnie? Użyj interfejsu inkluzywnego. Projektowanie promujące integrację społeczną wykorzystuje podejście ukierunkowane na ludzi, które łączy integrację społeczną, użyteczność i ułatwienia dostępu w jedną całość.

Schemat Venna, w którym ułatwienia dostępu, inkluzywność i łatwość przeplatają się ze sobą jako projekt promujący integrację społeczną.

W przeciwieństwie do uniwersalnego projektowania, który koncentruje się na jednym projekcie, z którego może korzystać jak najwięcej osób, zasady projektowania promujące integrację społeczną skupiają się na projektowaniu pod kątem konkretnej osoby lub przypadku użycia, a potem rozszerzaniu go na inne osoby.

Wyróżniamy 7 zasad projektowania promujących integrację społeczną zorientowanych na ułatwienia dostępu:

  1. Zapewnianie porównywalnych wrażeń: zadbaj o to, aby interfejs zapewniał jednakowe wrażenia wszystkim użytkownikom, aby użytkownicy mogli wykonywać zadania w sposób odpowiadający ich potrzebom bez negatywnego wpływu na jakość treści.
  2. Zastanów się nad sytuacją: upewnij się, że Twój interfejs zapewnia użytkownikom wartościowe doświadczenia, niezależnie od ich sytuacji.
  3. Dbaj o spójność: stosuj znane konwencje i stosuj je w logiczny sposób.
  4. Przekazywanie kontroli: umożliwianie użytkownikom dostępu do treści i interakcji z nimi w wybrany przez nich sposób.
  5. Oferuj wybór: rozważ zapewnienie użytkownikom różnych sposobów wykonywania zadań, zwłaszcza tych złożonych lub niestandardowych.
  6. Nadaj priorytet treściom: pomóż użytkownikom skupić się na głównych zadaniach, funkcjach i informacjach, ustawiając te elementy w preferowanej kolejności zgodnie z treścią i układem.
  7. Dodaj wartość: weź pod uwagę cel i znaczenie funkcji oraz sposób, w jaki wpływają one na wygodę różnych użytkowników.

Profile klientów

Podczas opracowywania nowego projektu lub funkcji wiele zespołów polega na profilach klientów użytkowników. Profile klientów to fikcyjne postacie, które korzystają z Twoich produktów cyfrowych, często na podstawie ilościowych i jakościowych badań opinii użytkowników.

Profile klientów umożliwiają też szybkie i niedrogie testowanie tych funkcji i nadawanie im priorytetów w całym procesie projektowania i programowania. Pomagają w podejmowaniu decyzji dotyczących komponentów witryny przez uwzględnianie w rozmowie realnej sytuacji, co pomaga dopasować strategię i określić cele ukierunkowane na konkretne grupy użytkowników.

Uwzględnienie niepełnosprawności

Niepełnosprawność może być trwała, chwilowa lub sytuacyjna. Niepełnosprawność może wpływać na dotyk, wzrok, słuch i mówienie.
The Persona Spectrum (Rozmaite profile klientów) z pakietu narzędzi Microsoft Inclusive 101 Toolkit.

„Ludzie są różni. Mogę to mówić tylko ze swojego doświadczenia. Spotkanie z jedną osobą niesłyszącą oznacza nawiązanie do jednej niesłyszącej osoby, a nie wszystkich”.

Meryl Evans z przemówienia ID24 na temat Deaf Tech: Travel By Time from Past to Future.

Profile klientów mogą służyć jako narzędzie do projektowania promujące integrację społeczną, gdy chcesz włączyć do profili osoby z niepełnosprawnościami osoby z niepełnosprawnościami. Można to zrobić na wiele sposobów. Możesz tworzyć profile osób niepełnosprawnych, dodawać niepełnosprawność do dotychczasowych profili użytkowników, a nawet tworzyć spektrum profili, aby odzwierciedlać dynamiczną rzeczywistość niepełnosprawnych sytuacyjnych, tymczasowych i trwałych.

Niezależnie od tego, w jaki sposób osoby z niepełnosprawnościami zostaną uwzględnione w swoich profilach, nie powinny one opierać się na prawdziwych osobach ani na stereotypach. Profile klientów nigdy nie zastępują testowania aplikacji przez użytkowników.

Profil klienta: Jane Bennet
Zapoznaj się z przykładem profilu klienta, który pasuje do określonych przypadków użycia.
Anna Kowalska jest wysoka, ma długie, ciemne włosy, szarą koszulę z długim rękawem i dżinsy
  • Imię i nazwisko: Anna Bennet
  • Wiek: 57 lat
  • Lokalizacja: Essex, Wielka Brytania
  • Zawód: inżynier ds. wrażeń użytkownika
  • Niepełnosprawność: drżenie ręki z choroby Younga Onset Parkinsona (YOPD).
  • Cele: korzystaj z zamiany mowy na tekst, aby ułatwić dodawanie sugestii kodu. Znajduj w internecie sprzęt rowerowy, naciskając minimalną liczbę klawiszy.
  • Frustracje: strony internetowe, które nie obsługują samej klawiatury; aplikacje przeznaczone do projektowania z niewielkimi obszarami umożliwiającymi interakcję dotykową.

Jako inżynierka ds. wygody użytkowników Jane projektuje i tworzy strony, które mają kluczowe znaczenie dla zapewnienia aktualności witryny jej firmy. Pomaga wielu członkom zespołu przez cały dzień. Jest królową strażaków pożarów i sprawia, że w działalności dzieje się coś nieoczekiwanego.

Utrata zdolności motorycznych z powodu drżenia sprawia, że używanie myszy jest coraz trudniejsze. Coraz częściej podczas poruszania się w internecie korzysta z klawiatury. Anna od zawsze dba o swoją sprawność fizyczną. Uwielbia wyścigi szosowe i BMX. Tym razem był to ogromny cios, gdy w zeszłym roku zdiagnozowano u niej chorobę Younga Onseta Parkinsona.

Symulatory niepełnosprawności

Zachowaj szczególną ostrożność, jeśli korzystasz z symulatorów niepełnosprawności do emulacji lub uzupełniania profili klientów.

Symulatory niepełnosprawności to miecz dwustronny, który może wzbudzać współczucie i empatię – może zależeć od konkretnej osoby, kontekstu, w jakim jest używany symulator, i wielu innych niekontrolowanych czynników. Wielu zwolenników ułatwień dostępu przeciwko korzysta z symulatorów niepełnosprawności i zaleca wyszukiwanie filmów, demonstracji, samouczków i innych treści tworzonych przez osoby z niepełnosprawnościami oraz poznawania ich doświadczeń na własną rękę.

„Myślę, że musimy być całkowicie szczerzy, że żadne działania symulacyjne nie wpływają na niektóre z najważniejszych informacji, które chcemy, aby osoba w sercu rozumieła te kwestie. Ślepota nie jest cechą, która nas definiuje, że największą przeszkodą są niezrozumienia i niskie oczekiwania dotyczące niewidoczności.

Takie nieporozumienia tworzą sztuczne bariery, które uniemożliwiają nam pełne uczestnictwo w programie, a te fałszywe ograniczenia stają się czymś, co powstrzymuje nas”.

Mark Riccobono, prezes Narodowej Federacji Niewidomych

Heurystyka ułatwień dostępu

Podczas tworzenia profili odbiorców i projektów rozważ wprowadzenie do przepływu pracy heuristics. Heurystyka to proste zasady projektowania interakcji, wprowadzone w 1990 r. przez Jakoba Nielsena i Rolfa Molicha. Opracowaliśmy te 10 zasad na podstawie wieloletniego doświadczenia w dziedzinie inżynierii użyteczności, a od tego czasu są wykorzystywane w projektach i programach służących do interakcji człowiek-komputer.

W tym roku zespół projektowy w Deque opracował i udostępnił nowy zestaw heurystyki skoncentrowanych na dostępności cyfrowej. Z ich badań wynika, że nawet podczas projektowania witryny lub aplikacji można uniknąć nawet 67% wszystkich błędów związanych z ułatwieniami dostępu. To ogromny efekt, który można zrobić, zanim jeszcze zostanie napisany 1 wiersz kodu.

Podobnie jak w przypadku oryginalnego zestawu heurystyki, przy planowaniu projektu należy wziąć pod uwagę 10 heurystyki ułatwień dostępu.

  1. Metody i metody interakcji: użytkownicy mogą efektywnie korzystać z systemu przy użyciu wybranej przez siebie metody wprowadzania (np. myszy, klawiatury, dotyku itp.).
  2. Nawigacja i odnajdywanie drogi: użytkownicy mogą łatwo poruszać się po systemie, wyszukiwać treści i określać, gdzie się znajdują.
  3. Struktura i semantyka: użytkownicy mogą zrozumieć strukturę treści na każdej stronie i dowiedzieć się, jak działać w ramach systemu.
  4. Zapobieganie i stany błędów: interaktywne elementy sterujące udostępniają trwałe i trafne instrukcje, które pomagają zapobiegać pomyłkom, a użytkownicy podają jasne stany błędów, które wskazują, na czym polega problem i jak je naprawić po każdym zwróceniu błędu.
  5. Skontrast i czytelność: użytkownicy mogą łatwo rozróżniać i odczytywać tekst oraz inne istotne informacje.
  6. Język i czytelność: użytkownicy mogą w prosty sposób czytać i interpretować treści.
  7. Przewidywalność i spójność: użytkownicy mogą przewidywać przeznaczenie każdego elementu. Wyraźnie widać, w jaki sposób każdy element jest związany z całym systemem.
  8. Czas i zachowanie czasu: użytkownicy mają wystarczająco dużo czasu na wykonanie zadań i nie tracą informacji, jeśli skończy się im czas (np. sesja).
  9. Ruch i miganie: użytkownicy mogą zatrzymywać na stronie elementy, które przesuwają się, migają lub są animowane. Te elementy nie powinny rozpraszać użytkownika ani wyrządzać krzywdy w inny sposób.
  10. Rozwiązania wizualne i słuchowe: użytkownicy mają dostęp do tekstowych alternatyw dla dowolnych treści wizualnych lub dźwiękowych, które przekazują informacje.

Gdy już poznasz podstawy heurystyki ułatwień dostępu, możesz zastosować ją do profilu lub projektu, korzystając z arkusza heurystyki ułatwień dostępu i postępując zgodnie z podanymi instrukcjami. To ćwiczenie daje więcej informacji, gdy zbierasz różne punkty widzenia.

Przykładowa weryfikacja heurystyczna ułatwień dostępu w przypadku punktu kontrolnego nawigacji i znajdowania drogi może wyglądać tak:

Punkty kontrolne do nawigacji i odnajdywania drogi Excel (+2 pkt) Pomyślny wynik (+1 pkt) Niepowodzenia (-1 pkt) Nie dotyczy (0 pkt)
Czy na wszystkich aktywnych elementach w miarę nacisku jest ustawiany jasny, widoczny wskaźnik?
Czy tytuł strony zawiera zrozumiały tytuł, a na początku znajdują się na niej informacje?
Czy element tytułu strony i element H1 są takie same czy podobne?
Czy każda z głównych sekcji ma jakiekolwiek nagłówki?
Czy przeznaczenie linków jest określone na podstawie samego tekstu linku, czy też jego bezpośredniego kontekstu?
Czy na samej górze strony znajduje się link pominięcia i czy jest on zaznaczony?
Czy układ elementów nawigacyjnych ułatwia wybór drogi?

Gdy wszyscy członkowie zespołu obejrzą stronę lub komponent i przeprowadzą weryfikację heurystyczną ułatwień dostępu, podsumowane zostaną wyniki dla każdego punktu kontrolnego. Na tym etapie możesz zdecydować, jak naprawić znalezione problemy lub skorygować pominięcia, które są kluczowe dla zapewnienia obsługi ułatwień dostępu.

Adnotacje dotyczące ułatwień dostępu

Zanim przekażesz projekt zespołowi programistów, zastanów się nad dodaniem adnotacji o ułatwieniach dostępu. Adnotacje służą ogólnie do objaśniania wyborów twórczych i opisywania różnych aspektów projektu. Adnotacje ułatwień dostępu skupiają się na obszarach, w których deweloperzy mogą dokonywać bardziej przystępnych wyborów w zakresie automatyzacji, kierując się wskazówkami zespołu projektowego lub specjalisty ds. ułatwień dostępu.

Adnotacje o ułatwieniach dostępu można stosować na każdym etapie procesu projektowania, od szkieletów po wysokiej jakości makiety. Mogą one obejmować procesy użytkownika, stany warunkowe i funkcje. Często wykorzystują symbole i etykiety, aby usprawnić proces i skoncentrować się na projekcie.

Poniższe ilustracje wizualne pochodzą z zestawu adnotacji o ułatwieniach dostępu na Indeed.com dla aplikacji Figma.

Ilustracja przedstawiająca modyfikacje wizualne użyte w przypadku różnych możliwych stanów przycisku.
Przycisk polecenia różni się w zależności od stanu: domyślny, aktywny, najechany, aktywny i wyłączony.
Ilustracja projektowa przedstawiająca 3 różne ikony na karcie z ofertą pracy.
3 ikony mają zaznaczony tekst alternatywny. Ikony „zapisz ofertę pracy” i „nie interesuje mnie to” działają jak przyciski, dlatego tekst alternatywny ma kluczowe znaczenie dla zrozumienia działania. Ikona obok opcji „Zastosuj do swojego CV” ma charakter czysto ozdobny i dlatego nie wymaga tekstu alternatywnego.
Ilustracja pokazująca zależności, jakie powinny mieć etykiety formularzy z odpowiednimi danymi wejściowymi dla miesiąca i roku.
Do każdego z nich można przypisać wiele etykiet wejściowych, aby ułatwić użytkownikom zrozumienie kontekstu.

W zależności od programu musisz mieć do wyboru wiele podstawowych zestawów adnotacji o ułatwieniach dostępu. Możesz też utworzyć własny zestaw. W obu przypadkach musisz zdecydować, które informacje należy przekazać zespołowi przekazującemu i jaki format będzie najlepszy.

Oto kilka kwestii, które warto rozważyć w przypadku adnotacji o ułatwieniach dostępu:

  • Kolor: uwzględnia współczynniki kontrastu wszystkich kombinacji kolorów w palecie.
  • Przyciski i linki: wskazują stan domyślny, po najechaniu kursorem, aktywny, aktywny i wyłączony.
  • Pomiń linki: wyróżnij ukryte/widoczne elementy projektu oraz miejsce, do którego prowadzą na stronie linki.
  • Obrazy i ikony: dodaj rekomendacje dotyczące tekstu alternatywnego do najważniejszych obrazów lub ikon.
  • Dźwięk i film: wyróżnij obszary/linki do napisów, transkrypcji i audiodeskrypcji.
  • Nagłówki: dodaj poziomy automatyzacji i umieść w nich wszystko, co wygląda jak nagłówek.
  • Punkty orientacyjne: wyróżnij poszczególne sekcje projektu za pomocą kodu HTML lub ARIA.
  • Komponenty interaktywne: rozpoznawanie klikalnych elementów, efekty najechania kursorem, obszar ostrości.
  • Klawiatura: określ, gdzie powinien się zaczynać ostrość (stopień alfa), i określ kolejność kart.
  • Formularze: dodaj etykiety pól, tekst pomocniczy, komunikaty o błędach i komunikaty o powodzeniu.
  • Nazwy ułatwień dostępu: określają, jak technologia wspomagająca ma rozpoznawać dany element.