Wygląd i wygoda użytkowników

Pomyśl o swojej ulubionej stronie lub aplikacji. Co sprawia, że jest ona Twoją ulubioną? Pomyśl teraz o witrynie lub aplikacji, która Ci się nie podoba. Co Ci się nie podoba? Interakcje użytkowników z Twoim projektem i ich wrażenia z korzystania z witryny i aplikacji mogą się różnić.

Dostęp do tych usług może się zmieniać w zależności od pory dnia, typu urządzenia, tego, czy użytkownik wyspał się poprzedniej nocy, czy jest chory, czy korzysta z technologii wspomagającej itp. W przypadku prawie 8 miliardów ludzi na całym świecie możliwości korzystania z Twoich projektów są nieograniczone.

Projektowanie włączające

Jak możemy zaspokoić wszystkie potrzeby potencjalnych użytkowników jednocześnie? projektowanie włączające; Projektowanie z uwzględnieniem potrzeb wszystkich użytkowników polega na łączeniu w jednym podejściu integracji społecznej, użyteczności i ułatwień dostępu.

Diagram Venna, w którym ułatwienia dostępu, integracja społeczna i łatwość obsługi spotykają się w środku jako projektowanie z myślą o integracji społecznej.

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 z uwzględnieniem wszystkich koncentrują się na projektowaniu pod kątem konkretnej osoby lub konkretnego przypadku użycia, a następnie na rozszerzaniu tego projektu na potrzeby innych osób.

Istnieje 7 zasad projektowania z myślą o 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. Zastanów się nad tym, co się dzieje: dopilnuj, aby interfejs był atrakcyjniejszy dla użytkowników bez względu na ich sytuację.
  3. Bądź konsekwentny: stosuj znane konwencje w logiczny sposób.
  4. Daj kontrolę: zapewnij użytkownikom dostęp do treści i interakcję z nimi w sposób, który najbardziej im odpowiada.
  5. Zaoferuj wybór: rozważ udostępnienie różnych sposobów wykonywania zadań, zwłaszcza tych złożonych lub niestandardowych.
  6. Ustal kolejność wyświetlania treści: pomóż użytkownikom skupić się na najważniejszych zadaniach, funkcjach i informacjach, układając te elementy w preferowanej kolejności w treści i układzie.
  7. Wartość dodana: weź pod uwagę cel i znaczenie funkcji oraz to, jak poprawiają one wrażenia różnych użytkowników.

Profile klientów

Podczas opracowywania nowego projektu lub funkcji wiele zespołów korzysta z persony, aby ułatwić sobie ten proces. Persona to fikcyjna postać, która korzysta z Twoich produktów cyfrowych. Często jest ona oparta na ilościowych i jakościowych badaniach użytkowników.

Dzięki profilom użytkowników możesz też szybko i niedrogo testować funkcje oraz ustalać ich priorytety w trakcie procesu projektowania i tworzenia. Pomagają ukierunkować decyzje dotyczące komponentów witryny przez dodanie do rozmowy warstwy praktycznych uwag, które pomagają dostosować strategię i wyznaczać cele z myślą o konkretnych grupach użytkowników.

Uwzględnienie niepełnosprawności

Niepełnosprawność może być trwała, tymczasowa lub zależna od sytuacji. Zaburzenia te mogą wpływać na dotyk, widzenie, słyszenie i mówienie.
Spektrum person z zestawu narzędzi Microsoft Inclusive 101.

„Ludzie są różni. Mogę mówić tylko na podstawie własnego doświadczenia. Gdy spotykasz osobę niesłyszącą, spotykasz jedną osobę niesłyszącą, a nie wszystkich.

Meryl Evans z ID24 opowiada o Deaf Tech: Travel Through Time from Past to Future (Podróż w czasie z przeszłości do przyszłości).

Profile klientów mogą być używane jako narzędzie do projektowania promujące integrację społeczną, gdy uwzględniasz osoby z niepełnosprawnościami w profilach osób z niepełnosprawnościami. Możesz to zrobić na wiele różnych sposobów. Możesz tworzyć persony z niepełnosprawnością, dodawać niepełnosprawności do istniejących person użytkowników lub nawet tworzyć spektrum person, aby odzwierciedlić dynamiczną rzeczywistość osób z niepełnosprawnością o charakterze doraźnym, przejściowym i trwałym.

Niezależnie od tego, jak uwzględnisz w portretach użytkowników osoby z niepełnosprawnością, nie powinny one być oparte na prawdziwych osobach ani stereotypach. Nie zastępują one jednak testów z udziałem użytkowników.

Osoba: Jane Bennet
Zobacz przykład persony, która obsługuje konkretne przypadki użycia.
Jane Smith jest wysoka, ma długie ciemne włosy i ma na sobie długą szarą koszulę oraz 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 młodzieńczą postacią choroby Parkinsona (YOPD)
  • Cele: używaj zamiany mowy na tekst, aby ułatwić sobie dodawanie sugestii dotyczących kodu. Znajduj online sprzęt rowerowy, nie naciskając klawiszy.
  • Frustracje: strony, które nie obsługują samej klawiatury, oraz aplikacje do projektowania z małymi obszarami umożliwiającymi interakcję dotykiem.

Jako inżynier UX Jane projektuje i tworzy strony, które są niezbędne do utrzymania aktualności witryny firmy. W ciągu dnia pomaga wielu członkom zespołu. Jest mistrzynią w gaszeniu pożarów technicznych i osobą, do której wszyscy z zespołu zwracają się, gdy coś nagle przestaje działać.

Wraz z drżeniem traciła umiejętności motorowe, co utrudniało jej używanie myszy. Coraz częściej używa klawiatury do przeglądania internetu. Jane zawsze dbała o swoją kondycję fizyczną. Uwielbia wyścigi szosowe i BMX. Dlatego tym bardziej ciosem był dla niej ubiegłoroczny diagnoza choroby Parkinsona z początkiem w młodym wieku.

Symulatory niepełnosprawności

Zachowaj szczególną ostrożność, używając symulatorów niepełnosprawności do naśladowania lub uzupełniania person.

Symulatory niepełnosprawności to miecz dwukierunkowy, który może wzmacniać współczucie i empatię. Może zależeć od danej osoby, kontekstu użycia symulatora i wielu innych czynników, których nie można kontrolować. Wielu zwolenników ułatwień dostępu sprzeciwia się używaniu narzędzi symulujących niepełnosprawność i zaleca szukanie filmów, demonstracji, samouczków i innych treści stworzonych przez osoby z niepełnosprawnością oraz poznawanie ich doświadczeń z pierwszej ręki.

„Trzeba być całkowicie szczerym i powiedzieć, że żadne działania symulacyjne nie wpływają na niektóre z najważniejszych informacji, które chcemy przekazać widzącym. Ślepota nie jest cechą, która nas definiuje – nieporozumienia i niskie oczekiwania dotyczące ślepoty są naszą największą przeszkodą.

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

Mark Riccobono, Prezes National Federation of the Blind.

Heurystyka ułatwień dostępu

Rozważ dodanie heurystyki do przepływu pracy podczas tworzenia profili klientów i projektów. Heurystyka to zasady projektowania interakcji, które w 1990 r. przedstawili Jakob Nielsen i Rolf Molich. Te 10 zasad zostało opracowanych na podstawie wieloletniego doświadczenia w zakresie inżynierii użyteczności. Od tego czasu są one wykorzystywane w programach projektowania i interakcji człowiek–komputer.

W 2019 r. zespół projektowy firmy Deque opracował i udostępnił nowy zestaw heurystyk dotyczących dostępności cyfrowej. Badania pokazują, że na etapie projektowania stron lub aplikacji można uniknąć nawet 67% wszystkich błędów związanych z ułatwieniami dostępu w witrynie lub aplikacji. To ogromny wpływ, jaki można osiągnąć, zanim napisze się choćby jeden wiersz kodu.

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

  1. Metody i metody interakcji: użytkownicy mogą wydajnie korzystać z systemu za pomocą wybranej przez siebie metody wprowadzania (np. myszy, klawiatury, dotyku itp.).
  2. Nawigacja i wyszukiwanie: użytkownicy mogą w dowolnym momencie poruszać się po systemie, znajdować treści i określać, gdzie się znajdują.
  3. Struktura i separatyzm: użytkownicy mogą zrozumieć strukturę treści na każdej stronie i wiedzieć, jak działać w systemie.
  4. Ochrona przed błędami i stany: interaktywne ustawienia zawierają trwałe, przejrzyste instrukcje, które pomagają zapobiegać błędom i przekazują użytkownikom jasne stany błędów, które wskazują na problemy i sposoby ich rozwiązywania w przypadku zwrócenia błędów.
  5. Kontrast i czytelność: użytkownicy mogą łatwo odróżniać i czytać tekst oraz inne istotne informacje.
  6. Język i czytelność: użytkownicy mogą łatwo czytać i rozumieć treści.
  7. Przewidywalność i spójność: użytkownicy mogą przewidywać przeznaczenie każdego elementu. Jest jasne, jak poszczególne elementy są powiązane z całym systemem.
  8. Czas i zachowywanie: użytkownicy mają wystarczająco dużo czasu na wykonanie zadań i nie tracą informacji, jeśli kończy im się czas (np. sesja).
  9. Ruch i mruganie: użytkownicy mogą zatrzymać elementy na stronie, które się poruszają, mrugają lub są animowane. Te elementy nie mogą rozpraszać użytkowników ani im szkodzić.
  10. Alternatywy wizualne i dźwiękowe: użytkownicy mogą uzyskać dostęp do alternatyw tekstowych dla wszelkich treści wizualnych lub dźwiękowych, które przekazują informacje.

Po opanowaniu podstawowej 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 jest bardziej pouczające, gdy uwzględnisz różne punkty widzenia.

Przykład weryfikacji heurystyki ułatwień dostępu w przypadku punktu kontrolnego nawigacji i kierowania może wyglądać tak:

Punkty kontrolne służące do nawigacji i znajdowania drogi Excels (+2 pkt) Pomyślny wynik (+1 punkt) Niepowodzenia (-1 punkt) Nie dotyczy (0 pkt)
Czy wszystkie aktywne elementy mają wyraźny, widoczny wskaźnik, gdy są zaznaczone?
Czy strona ma znaczący tytuł, który zawiera informacje o niej?
Czy element tytułu strony i tag H1 są takie same lub podobne?
Czy w przypadku każdej głównej sekcji znajdują się odpowiednie nagłówki?
Czy cel linków jest określony na podstawie samego tekstu linku czy jego bezpośredniego kontekstu?
Czy link pomijania jest widoczny na samej górze strony i czy wyświetla się w widocznym miejscu?
Czy organizacja elementów nawigacyjnych ułatwia znajdowanie drogi?

Gdy wszyscy członkowie zespołu przejrzą stronę lub komponent i przeprowadzą weryfikację heurystyczną pod kątem dostępności, podsumują wyniki dla każdego punktu kontrolnego. Na tym etapie możesz zdecydować, jak rozwiązać znalezione problemy lub poprawić wszelkie pominięcia, które są kluczowe dla zapewnienia dostępności cyfrowej.

adnotacje ułatwień dostępu,

Zanim przekażesz swój projekt zespołowi programistów, rozważ dodanie adnotacji o ułatwieniach dostępu.

Adnotacje służą zwykle do wyjaśniania twórczych wyborów i opisywania różnych aspektów projektu. Adnotacje dotyczące ułatwień dostępu koncentrują się na obszarach, w których deweloperzy mogą dokonywać bardziej przyjaznych dla użytkownika wyborów programistycznych pod kierunkiem zespołu projektowego lub specjalisty ds. ułatwień dostępu.

Adnotacje o ułatwieniach dostępu można stosować na każdym etapie projektowania – od schematów po precyzyjne makiety. Mogą to być przepływy użytkowników, stany warunkowe i funkcje. Często używają symboli i etykietek, aby usprawnić proces i utrzymać na pierwszym planie projekt.

Poniższe przykłady ilustracji pochodzą z komputera Indeed.com z zestawem adnotacji ułatwień dostępu dla Figmy.

Ilustracja przedstawiająca modyfikacje wizualne używane 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 lub wyłączony.
Ilustracja przedstawiająca 3 różne ikony używane na karcie oferty pracy.
Tekst alternatywny jest zaznaczony 3 ikon. 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 „Zgłoś się z CV z Indeed” jest czysto dekoracyjna i nie wymaga tekstu alternatywnego.
Ilustracja pokazująca relację między etykietami formularza a powiązanymi z nimi danymi wejściowymi w przypadku miesiąca i roku
Z każdym typem danych można powiązać wiele etykiet wejściowych, aby ułatwić użytkownikom zrozumienie kontekstu.

W zależności od programu projektowania masz do wyboru kilka starter kitów dodawania adnotacji dla osób z ograniczonymi możliwościami. Możesz też utworzyć własny zestaw. W obu przypadkach należy zdecydować, jakie informacje należy przekazać zespołowi przejmującemu odpowiedzialność, i w jakim formacie.

Oto niektóre kwestie, o których warto pamiętać przy adnotacjach ułatwień dostępu:

  • Kolor: zawiera współczynniki kontrastu wszystkich różnych kombinacji kolorów w palecie.
  • Przyciski i linki: określ stany domyślny, najechania kursorem, aktywny, fokus i wyłączony.
  • Linki do pomijania: wyróżniają ukryte i widoczne elementy projektu oraz miejsca, do których prowadzą linki na stronie.
  • Obrazy i ikony: dodaj rekomendacje dotyczące tekstu alternatywnego dla najważniejszych obrazów i ikon.
  • Dźwięk i obraz: wyróżnij obszary i linki do napisów, transkrypcji i audiodeskrypcji.
  • Nagłówki: dodawaj poziomy programowe i uwzględniaj wszystko, co wygląda jak nagłówek.
  • Punkty orientacyjne: wyróżnij różne sekcje projektu za pomocą kodu HTML lub ARIA.
  • Elementy interaktywne: identyfikuje elementy klikalne, efekty najechania kursorem i obszar fokusa.
  • Klawiatura: określ, gdzie powinno się rozpocząć zaznaczenie (znak alfa) i jaki powinien być kolejność klawiszy.
  • Formularze: dodawaj etykiety pól, tekst pomocniczy, komunikaty o błędach i komunikaty o pomyślnym wykonaniu.
  • Dostępne nazwy: określ, jak technologia wspomagająca ma rozpoznawać element.