Wygląd i wygoda użytkowników

Pomyśl o swojej ulubionej witrynie lub aplikacji. Co sprawia, że jest ona Twoją ulubioną? Teraz pomyśl o witrynie lub aplikacji, której nie lubisz. Co Ci się w niej nie podoba? Sposób, w jaki użytkownicy wchodzą w interakcję z Twoim projektem, oraz ich wrażenia z korzystania z Twojej witryny i aplikacji mogą się różnić.

Wrażenia te mogą się zmieniać w zależności od pory dnia, typu używanego urządzenia, tego, czy użytkownik się wyspał, czy źle się czuje, czy korzysta z technologii wspomagającej osoby z niepełnosprawnością i wielu innych czynników. Na świecie jest prawie 8 miliardów ludzi, więc możliwości korzystania z Twoich projektów i wrażeń z nimi związanych są nieograniczone.

Projektowanie włączające

Jak możemy jednocześnie zaspokoić wszystkie potencjalne potrzeby użytkowników? W tym celu stosujemy projektowanie włączające. Projektowanie włączające wykorzystuje podejście skoncentrowane na człowieku, które łączy w sobie inkluzywność, użyteczność i dostępność.

Diagram Venna, na którym ułatwienia dostępu, integracja społeczna i łatwość obsługi spotykają się w środku jako projektowanie włączające.

W przeciwieństwie do projektowania uniwersalnego, które koncentruje się na jednym projekcie, z którego może korzystać jak najwięcej osób, zasady projektowania włączającego skupiają się na projektowaniu dla konkretnej osoby lub przypadku użycia, a następnie na rozszerzaniu tego projektu na inne osoby.

Istnieje 7 zasad projektowania włączającego, które koncentrują się na dostępności:

  1. Zapewnij porównywalne wrażenia: upewnij się, że interfejs zapewnia wszystkim użytkownikom takie same wrażenia, aby mogli oni wykonywać zadania w sposób odpowiadający ich potrzebom, bez obniżania jakości treści.
  2. Weź pod uwagę sytuację: upewnij się, że interfejs zapewnia użytkownikom wartościowe wrażenia niezależnie od ich sytuacji.
  3. Zachowaj spójność: używaj znanych konwencji i stosuj je w logiczny sposób.
  4. Zapewnij kontrolę: upewnij się, że użytkownicy mogą uzyskiwać dostęp do treści i wchodzić z nimi w interakcję w preferowany przez siebie sposób.
  5. Zaoferuj wybór: rozważ udostępnienie użytkownikom różnych sposobów wykonywania zadań, zwłaszcza tych złożonych lub niestandardowych.
  6. Nadaj priorytet treści: pomóż użytkownikom skupić się na najważniejszych zadaniach, funkcjach i informacjach, umieszczając te elementy w preferowanej kolejności w treści i układzie.
  7. Dodaj wartość: zastanów się nad celem i znaczeniem funkcji oraz nad tym, jak poprawiają one wrażenia różnych użytkowników.

Persony

Podczas tworzenia nowego projektu lub funkcji wiele zespołów korzysta z person użytkowników, które pomagają im w tym procesie. Persony to fikcyjne postacie, które korzystają z Twoich produktów cyfrowych. Często są one tworzone na podstawie ilościowych i jakościowych badań użytkowników.

Persony to też szybki i niedrogi sposób na testowanie i ustalanie priorytetów tych funkcji na etapie projektowania i tworzenia. Pomagają one skupić się na decyzjach dotyczących komponentów witryny, dodając do rozmowy element rzeczywistości, co ułatwia dostosowanie strategii i tworzenie celów skoncentrowanych na konkretnych grupach użytkowników.

Uwzględnianie niepełnosprawności

„Ludzie są różni. Mogę mówić tylko z własnego doświadczenia. Gdy poznasz jedną osobę głuchą, poznasz tylko jedną osobę głuchą – nie nas wszystkich”.

Meryl Evans z prezentacji ID24 Deaf Tech: Travel Through Time from Past to Future.
Niepełnosprawność może być trwała, tymczasowa lub sytuacyjna. Niepełnosprawność może wpływać na dotyk, wzrok, słuch i mowę.
Część spektrum person z zestawu narzędzi Microsoft Inclusive 101.

Persony mogą być używane jako narzędzie projektowania włączającego, jeśli uwzględnisz w nich osoby z niepełnosprawnościami. Można to zrobić na wiele sposobów. Możesz utworzyć persony specyficzne dla osób z niepełnosprawnościami, dodać niepełnosprawności do istniejących person użytkowników, a nawet utworzyć spektrum person, aby odzwierciedlić dynamiczną rzeczywistość niepełnosprawności sytuacyjnych, tymczasowych i trwałych.

Niezależnie od tego, jak uwzględnisz osoby z niepełnosprawnościami w swoich personach, nie powinny one być oparte na prawdziwych osobach ani stereotypach. Persony nigdy nie zastąpią testów z udziałem użytkowników.

Persona: Jane Bennet
Zobacz przykład persony, która obsługuje konkretne przypadki użycia.
Jane Smith jest wysoka, ma długie ciemne włosy, szarą bluzkę z długim rękawem i dżinsy.
  • Imię i nazwisko: Jane Bennet
  • Wiek: 57 lat
  • Lokalizacja: Essex, Wielka Brytania
  • Zawód: inżynier UX
  • Niepełnosprawność: drżenie rąk spowodowane chorobą Parkinsona o wczesnym początku
  • Cele: używanie funkcji zamiany mowy na tekst, aby ułatwić dodawanie sugestii kodu; znajdowanie sprzętu rowerowego online przy minimalnej liczbie naciśnięć klawiszy.
  • Frustracje: witryny, które nie obsługują tylko klawiatury; aplikacje do projektowania z małymi obszarami interakcji dotykowej.

Jako inżynier UX Jane projektuje i tworzy strony, które mają kluczowe znaczenie dla utrzymania aktualności witryny jej firmy. W ciągu dnia pomaga wielu członkom zespołu. Jest mistrzynią w rozwiązywaniu problemów technicznych i każdy w dziale zwraca się do niej, gdy coś niespodziewanie się zepsuje.

Utrata umiejętności motorycznych spowodowana drżeniem rąk utrudnia jej korzystanie z myszy. Coraz częściej używa klawiatury do poruszania się po internecie. Jane zawsze dbała o swoją kondycję fizyczną. Uwielbia wyścigi szosowe i BMX. Dlatego diagnoza choroby Parkinsona o wczesnym początku, którą usłyszała w zeszłym roku, była dla niej ogromnym ciosem.

Symulatory niepełnosprawności

Podczas korzystania z symulatorów niepełnosprawności w celu emulowania lub uzupełniania person zachowaj szczególną ostrożność.

Symulatory niepełnosprawności są mieczem obosiecznym, ponieważ mogą budować sympatię lub empatię – zależy to od osoby, kontekstu, w jakim używany jest symulator, i wielu innych czynników, na które nie mamy wpływu. Wielu zwolenników dostępności jest przeciwnych używaniu symulatorów niepełnosprawności i zaleca oglądanie filmów, wersji demonstracyjnych, samouczków i innych treści tworzonych przez osoby z niepełnosprawnościami oraz poznawanie ich doświadczeń z pierwszej ręki.

„Uważam, że musimy być całkowicie szczerzy i przyznać, że żadna symulacja nie wpływa na niektóre z najważniejszych kwestii, które chcemy, aby osoby widzące zrozumiały w sercu i umyśle. Ślepota nie jest cechą, która nas definiuje. Największą przeszkodą są nieporozumienia i niskie oczekiwania dotyczące ślepoty .

Te nieporozumienia tworzą sztuczne bariery, które uniemożliwiają nam pełne uczestnictwo, a te fałszywe ograniczenia budują coś, co nas powstrzymuje."

Mark Riccobono, prezes National Federation of the Blind.

Heurystyki dostępności

Podczas tworzenia person i projektów rozważ dodanie heurystyk do procesu. Heurystyki to zasady projektowania interakcji, które w 1990 r. wprowadzili Jakob Nielsen i Rolf Molich. Te 10 zasad zostało opracowanych na podstawie wieloletniego doświadczenia w dziedzinie inżynierii użyteczności i od tego czasu są stosowane w programach projektowania i interakcji człowiek-komputer.

W 2019 r. zespół projektowy w Deque stworzył i udostępnił nowy zestaw heurystyk skupiających się na dostępności cyfrowej. Z ich badań wynika, że jeśli dostępność jest częścią procesu projektowania, można uniknąć nawet 67% wszystkich błędów związanych z dostępnością w witrynie lub aplikacji. To ogromny wpływ, który można osiągnąć jeszcze przed napisaniem choćby jednej linii kodu.

Podobnie jak w przypadku pierwotnego zestawu heurystyk, podczas planowania projektu należy wziąć pod uwagę 10 heurystyk dostępności.

  1. _Metody i sposoby interakcji_: użytkownicy mogą efektywnie wchodzić w interakcję z systemem za pomocą wybranej przez siebie metody wprowadzania danych (np. myszy, klawiatury, dotyku itp.).
  2. Nawigacja i orientacja: użytkownicy mogą w każdej chwili poruszać się po systemie, znajdować 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 korzystać z systemu.
  4. Zapobieganie błędom i stany: elementy sterujące interaktywne mają trwałe, zrozumiałe instrukcje, które pomagają zapobiegać błędom, oraz zapewniają użytkownikom jasne stany błędów wskazujące, jakie są problemy i jak je rozwiązać.
  5. Kontrast i czytelność: użytkownicy mogą łatwo odróżnić i przeczytać tekst oraz inne ważne informacje.
  6. Język i czytelność: użytkownicy mogą łatwo przeczytać i zrozumieć treść.
  7. Przewidywalność i spójność: użytkownicy mogą przewidzieć przeznaczenie każdego elementu. Jasno widać, jak każdy element odnosi się do systemu jako całości.
  8. Czas i zachowanie: użytkownicy mają wystarczająco dużo czasu na wykonanie zadań i nie tracą informacji, jeśli skończy się czas (np. sesja).
  9. Ruch i miganie: użytkownicy mogą zatrzymać elementy na stronie, które się poruszają, migają lub są animowane. Te elementy nie powinny rozpraszać użytkowników ani im szkodzić.
  10. Alternatywy wizualne i dźwiękowe: użytkownicy mogą uzyskać dostęp do alternatywnych wersji tekstowych wszystkich treści wizualnych lub dźwiękowych, które przekazują informacje.

Gdy zrozumiesz podstawowe heurystyki dostępności, możesz zastosować je do persony lub projektu, korzystając z arkusza heurystyk dostępności i postępując zgodnie z podanymi instrukcjami. To ćwiczenie jest bardziej pouczające, gdy zbierzesz wiele opinii.

Przykładowa ocena heurystyki dostępności w przypadku punktu kontrolnego nawigacji i orientacji może wyglądać tak:

Punkty kontrolne nawigacji i orientacji Doskonale (+2 pkt) Zadowalająco (+1 pkt) Niezadowalająco (-1 pkt) Nie dotyczy (0 pkt)
Czy na wszystkich aktywnych elementach, gdy są zaznaczone, jest ustawiony wyraźny, widoczny wskaźnik?
Czy strona ma zrozumiały tekst tytułu, a na początku znajdują się informacje specyficzne dla strony?
Czy element tytułu strony i tag H1 są takie same lub podobne?
Czy każda główna sekcja ma zrozumiałe nagłówki?
Czy cel linków jest określony na podstawie samego tekstu linku lub jego bezpośredniego kontekstu?
Czy na samej górze strony znajduje się link do pominięcia i czy jest on widoczny po zaznaczeniu?
Czy organizacja elementów nawigacyjnych ułatwia orientację?

Gdy wszyscy członkowie zespołu obejrzą stronę lub komponent i przeprowadzą ocenę heurystyki dostępności, sumują się wyniki dla każdego punktu kontrolnego. W tym momencie możesz zdecydować, jak rozwiązać znalezione problemy lub poprawić pominięcia, które mają kluczowe znaczenie dla obsługi dostępności cyfrowej.

Adnotacje dotyczące dostępności

Zanim przekażesz projekt zespołowi programistów, rozważ dodanie adnotacji dotyczących dostępności.

Adnotacje służą do wyjaśniania wyborów kreatywnych i opisywania różnych aspektów projektu. Adnotacje dotyczące dostępności koncentrują się na obszarach, w których programiści mogą podejmować bardziej dostępne decyzje programowe, korzystając z wskazówek zespołu projektowego lub specjalisty ds. dostępności.

Adnotacje dotyczące dostępności można stosować na dowolnym etapie procesu projektowania, od szkieletów po makiety o wysokiej wierności. Mogą one obejmować ścieżki użytkownika, stany warunkowe i funkcje. Często używają symboli i etykiet, aby usprawnić proces i skupić się na projekcie.

Poniższe przykłady ilustracji projektowych pochodzą z zestawu adnotacji dotyczących dostępności w Figma na stronie Indeed.com.

Ilustracja przedstawiająca zmiany wizualne stosowane w różnych możliwych stanach przycisku.
Projekt przycisku polecenia różni się w zależności od stanu: domyślny, zaznaczony, po najechaniu kursorem, aktywny, i wyłączony.
Ilustracja przedstawiająca 3 różne ikony używane na karcie z ofertą pracy.
Tekst alternatywny 3 ikon jest wyróżniony. Ikony „Zapisz ofertę pracy” i „Nie interesuje mnie” działają jak przyciski, dlatego tekst alternatywny ma kluczowe znaczenie dla zrozumienia działania. Ikona obok tekstu "Zastosuj z CV w Indeed" ma charakter wyłącznie dekoracyjny, dlatego nie wymaga tekstu alternatywnego.
Ilustracja przedstawiająca relację między etykietami formularza a powiązanymi z nimi polami wejściowymi miesiąca i roku.
Z każdym polem wejściowym można powiązać wiele etykiet, aby ułatwić użytkownikom zrozumienie kontekstu.

W zależności od programu do projektowania możesz mieć do wyboru kilka zestawów początkowych adnotacji dotyczących dostępności. Jeśli wolisz, możesz też utworzyć własny zestaw. W obu przypadkach musisz zdecydować, jakie informacje należy przekazać zespołowi, któremu przekazujesz projekt, i jaki format będzie najlepszy.

Oto niektóre obszary, które warto uwzględnić w adnotacjach dotyczących dostępności:

  • Kolor: uwzględnij współczynniki kontrastu wszystkich różnych kombinacji kolorów w palecie.
  • Przyciski i linki: określ stany domyślny, po najechaniu kursorem, aktywny, zaznaczony i wyłączony.
  • Linki do pominięcia: wyróżnij ukryte i widoczne aspekty projektu oraz miejsca, do których prowadzą linki na stronie.
  • Obrazy i ikony: dodaj zalecenia dotyczące tekstu alternatywnego do najważniejszych obrazów i ikon.
  • Audio i wideo: wyróżnij obszary i linki do napisów, transkrypcji i audiodeskrypcji.
  • Nagłówki: dodaj poziomy programowe i uwzględnij wszystko, co wygląda jak nagłówek.
  • Punkty orientacyjne: wyróżnij różne sekcje projektu za pomocą kodu HTML lub ARIA.
  • Komponenty interaktywne: określ elementy, które można kliknąć, efekty po najechaniu kursorem i obszar zaznaczenia.
  • Klawiatura: określ, gdzie powinien się zaczynać fokus (alfa stop) i kolejność tabulatora.
  • Formularze: dodaj etykiety pól, tekst pomocniczy, komunikaty o błędach i komunikaty o powodzeniu wiadomości.
  • Nazwy dostępne: określ, jak technologia wspomagająca osoby z niepełnosprawnością powinna rozpoznawać element.