Kliknij na planie — ale gdzie właściwie wejść?

Na rysunku sala jest obok recepcji. W rzeczywistości wejście znajduje się od drugiego korytarza. Na telefonie nazwa sali znika pod panelem szczegółów. Uczestniczka widzi za to bardzo wyraźnie, że organizator zainwestował w interaktywny plan. Wciąż nie wie, gdzie skręcić.

To hipotetyczny dzień otwarty w pracowni rzemiosła. Strona pomaga znaleźć stanowisko warsztatowe i przeczytać jego opis. Nie prowadzi ewakuacji ani nie wyznacza trasy wymagającej pomiarów budowlanych. Jej zadanie jest prostsze: połączyć nazwę miejsca, obszar na rysunku i praktyczną informację o wejściu. Ten związek powinien przetrwać wszystkie gesty użytkownika.

Sala nie jest pozycją kursora

Najpierw powstaje lista miejsc. Każde ma stałe oznaczenie, nazwę używaną na drzwiach i opis potrzebny gościowi. „Pracownia sitodruku, sala S2” jest rozpoznawalna także poza rysunkiem. „Obszar 14” może być wygodną nazwą roboczą w programie graficznym, ale nie powinien zostać jedyną etykietą w publikacji.

Jedno miejsce może mieć kilka reprezentacji: wiersz na liście, obrys sali i panel szczegółów. Powinny korzystać z tego samego powiązania danych. Zmiana nazwy w jednym widoku nie może pozostawić starej nazwy w pozostałych. W projekcie zaznacz, które informacje należą do miejsca, a które opisują tylko sposób jego pokazania.

Sala i odbywający się w niej warsztat są osobnymi informacjami. Rano w S2 może działać sitodruk, po południu introligatorstwo. Wybór programu na konkretną godzinę powinien zmienić opis zajęć, zachowując identyfikację pomieszczenia. Jeśli zajęcia przeniesiono do S4, potrzebna jest jawna informacja o nowym miejscu. Zmiana koloru obrysu S2 nie wyjaśni osobie wracającej do strony, co stało się z wybranym warsztatem. W tej sytuacji przydaje się także nazwa wydarzenia w panelu, żeby użytkownik rozpoznał, którą część wyboru zachował.

Słowo „dostępne” także wymaga dopowiedzenia. Może oznaczać wolne miejsca na zajęciach, możliwość wejścia do sali w danej godzinie albo warunki korzystania z przestrzeni. Zamiast wspólnej zielonej kropki pokaż właściwą informację: „6 miejsc na warsztat o 14:00” lub „sala otwarta od 13:45”. Fizycznych cech wejścia nie oznaczaj tym samym statusem co liczby zapisanych uczestników. To różne dane, aktualizowane z różnych powodów.

Odrębność miejsca od jego obrazu widać przy powiększeniu. Wybrana sala nadal jest salą S2, choć jej obrys zajmuje teraz połowę ekranu. Nie należy ustalać wyboru na podstawie tego, jaki element akurat leży pod nieruchomym kursorem po przesunięciu planu. Przybliżenie zmienia widok, nie intencję odwiedzającego.

MDN opisuje viewBox jako położenie i rozmiar obszaru we współrzędnych SVG, mapowanego na widoczny obszar elementu. To mechanizm prezentacji grafiki. Sam nie utrzymuje związku między nazwą sali, jej zaznaczeniem i opisem. Takie zachowanie trzeba określić w projekcie i poprawnie wdrożyć.

Na planszy z kilkoma kondygnacjami pełna nazwa powinna zawierać poziom. Sala S2 na parterze i S2 na piętrze nie mogą mieć nierozróżnialnych wyników wyszukiwania. Po zmianie kondygnacji pokaż, czy poprzedni wybór pozostał aktywny poza bieżącym planem, czy został usunięty. Cichy przeskok do innego S2 jest szczególnie zły, bo wygląda jak poprawne działanie.

Odróżnij także obszar sali od wejścia do niej. Obrys pokazuje zajmowaną przestrzeń, lecz może nie wskazywać właściwych drzwi. W naszym przykładzie opis „wejście od korytarza z recepcją” jest bardziej przydatny niż pinezka pośrodku stołu warsztatowego. Jeśli publikacja zawiera informacje o dostępności wejścia, muszą pochodzić z potwierdzonych danych organizatora. Rysunek nie pozwala ich samodzielnie wywnioskować.

Mapa punktów obsługi pomaga wybrać odpowiedni adres. Plan wewnętrzny zaczyna się tam, gdzie adres już nie wystarcza. Dlatego nie kopiuj bez zmian karty oddziału. Gość potrzebuje odróżnić budynek, poziom i konkretne miejsce, nawet jeśli w całym obiekcie jest tylko jeden numer ulicy.

Wybór na liście ma prowadzić do tego samego miejsca

Lista nie powinna być skromnym dodatkiem pod atrakcyjną grafiką. Osoba znająca nazwę warsztatu może od niej zacząć. Wiersz powinien umożliwiać rozpoznanie sali i otwarcie tych samych szczegółów co obszar na planie. Przy dłuższym spisie pomogą grupy według poziomów albo wyszukiwanie nazw, ale nie trzeba budować rozbudowanego katalogu dla czterech pomieszczeń.

Poradnik WAI o mapach obrazkowych wymaga tekstowego kontekstu całej mapy oraz opisów celu lub działania poszczególnych obszarów. Wskazuje też tekstowe linki jako zabezpieczenie przy problemach skalowania takich map na urządzeniach mobilnych. Te zalecenia dotyczą opisanej techniki map obrazkowych; nie zastępują odbioru każdego autorskiego interaktywnego planu.

Wybór „S2 — sitodruk” na liście powinien zaznaczyć S2 na rysunku. Jeśli sala jest poza kadrem, można zaproponować „Pokaż na planie” albo czytelnie przestawić widok. Samoczynne powiększenie nie powinno zasłonić nazwy, którą użytkownik właśnie wybrał. Powiązanie ma być widoczne, a nie tylko zapisane w wewnętrznym stanie aplikacji.

W drugą stronę działa ta sama zasada. Kliknięcie obszaru może otworzyć panel z nazwą oraz krótkim opisem. Przy przejściu do listy odpowiadający wiersz powinien nadal być rozpoznawalny jako wybrany. Nie mieszaj tego z najechaniem kursorem ani z fokusem, czyli miejscem bieżącej obsługi klawiaturą. Użytkownik może przesunąć fokus do przycisku zamknięcia, nadal oglądając szczegóły S2.

Po zamknięciu panelu oddaj obsługę w przewidywalne miejsce. Przy otwarciu z listy zwykle będzie to wybrany wiersz, przy otwarciu z planu — odpowiadający mu obszar. Jeśli w międzyczasie zmieniono poziom lub filtr i pierwotnego elementu już nie ma, potrzebny jest inny rozpoznawalny punkt powrotu. Nie przenoś użytkownika bez wyjaśnienia na początek długiej strony. Rozpisz również przypadek, gdy szczegóły dopiero się wczytują: ich nagłówek powinien wskazywać wybraną salę, a poprzedni opis nie może wyglądać jak treść nowego wyboru.

Podobny związek między punktem, serią i opisem występuje w interaktywnym wykresie. Na planie dodatkowo dochodzi znaczenie przestrzeni. Zaznaczenie jednej sali nie powinno przypominać podświetlenia całego skrzydła. Jeśli klikany obszar celowo jest większy od małego symbolu, odbierz zachowanie przy sąsiednich obszarach, żeby wygoda trafienia nie zmieniła wyboru.

W projekcie interfejsu Aeneia Design można rozpisać te przejścia przed wykonaniem docelowej grafiki. Materiałem do rozmowy jest kilka realnych miejsc i ich nazwy, a nie wyłącznie dekoracyjny rzut. Na tym etapie łatwiej zobaczyć, że dwie sale wymagają rozróżnienia, niż po dopracowaniu animacji ich obrysów.

Powiększenie, obrót i mały ekran

Widoczne przyciski przybliżania i oddalania pozwalają zmienić kadr bez odgadywania gestu. Wyjaśnienie WCAG 2.5.1 podaje właśnie przyciski plus i minus jako alternatywę dla gestu rozsuwania palców na mapie. Zaznacza, że sama obsługa klawiaturą nie wystarcza do spełnienia tego kryterium. Opis dotyczy alternatywy dla gestów, a nie deklaracji pełnej dostępności planu.

Jeśli plan można obracać, potrzebny jest także rozpoznawalny powrót do jego podstawowej orientacji. W obiekcie nie zawsze ma sens północ jako główny punkt odniesienia. Przy wejściu goście mogą posługiwać się recepcją i głównym korytarzem. Wybierz odniesienie odpowiadające rysunkowi oraz oznaczeniom na miejscu; nie dodawaj kompasu wyłącznie dla wyglądu.

Reset widoku powinien mieć znany zakres. „Pokaż cały plan” może zachować wybraną salę i odsunąć kadr. „Wyczyść wybór” usuwa zaznaczenie. Połączenie obu skutków w jeden nieopisany symbol utrudnia spokojne oglądanie. Podobne rozdzielenie kadru od wyboru pomaga podczas obsługi modelu 3D, choć plan pomieszczeń nie wymaga tej samej liczby ruchów.

Przy aktywnym wyszukiwaniu ustal znaczenie „Pokaż cały plan”. Czy wraca tylko pełny kadr, czy także wszystkie wcześniej ukryte miejsca? Rozsądnie rozdzielić te działania, gdy służą różnym zadaniom. Osoba szukająca sitodruku może chcieć zobaczyć jego położenie względem całego budynku, nadal wyróżniając wybrany warsztat. Usunięcie zapytania razem ze zmianą kadru zmusi ją do ponownego wpisania nazwy. Zapisz ten przypadek w zachowaniu kontrolki, zamiast pozostawiać go przypadkowi podczas wdrożenia.

Na telefonie panel szczegółów może zająć dużą część ekranu. Przed jego otwarciem ustal, gdzie pozostanie nazwa miejsca i jak wrócić do rysunku. Jeśli po zamknięciu panelu plan przeskakuje do początku, użytkownik ponownie musi odszukać salę. Zachowanie położenia po powrocie do listy ma tu odpowiednik w zachowaniu kadru, poziomu i wyboru.

Nie blokuj przewijania całej strony tylko dlatego, że palec trafił na plan. Potrzebna jest czytelna granica między oglądaniem grafiki a przechodzeniem do dalszej treści. Szczególnie kłopotliwy jest duży plan zajmujący niemal cały ekran, z którego trudno wyjść prostym ruchem. Rozwiązanie wybiera się przy odbiorze konkretnej interakcji na urządzeniu, nie na podstawie nieruchomego zrzutu.

Tekst na planie musi zachować związek z obszarem również po powiększeniu. Przy gęstych nazwach można pokazać skróty i czytelną listę, ale skrót powinien występować także na karcie miejsca. Sama legenda „zielone to warsztaty” nie identyfikuje S2. Kolor opisuje grupę, nazwa rozstrzyga konkretny cel.

Próba z nazwą, której projektant nie podpowiada

Do odbioru przygotuj kilka zadań o różnych punktach startowych. Jedna osoba zna nazwę warsztatu. Druga rozpoznaje salę na rysunku, lecz chce przeczytać jej opis. Trzecia wraca po sprawdzeniu szczegółów i szuka sąsiedniego stanowiska. Zapisz rzeczywisty przebieg tych prób, zamiast uznać działający pierwszy klik za odbiór całego planu.

W naszym fikcyjnym obiekcie warto uwzględnić dwa pomieszczenia o podobnych nazwach, salę poza początkowym kadrem oraz miejsce czasowo wyłączone z programu. Wyłączenie nie powinno wyglądać jak błąd ładowania. Jeśli warsztat przeniesiono, poprzedni obszar i lista powinny wskazywać tę samą zmianę. Osoba aktualizująca treść potrzebuje wiedzieć, gdzie dokonać poprawki.

Przejdź też pełną drogę klawiaturą i przy powiększonej stronie, korzystając z zasad funkcjonalnego odbioru dostępności. Sam fakt istnienia listy nie potwierdza, że można z niej otworzyć szczegóły i wrócić do wybranego wiersza. Trzeba sprawdzić to w działającym rozwiązaniu.

Jeżeli rysunek się nie wczyta, nazwy oraz opisy miejsc powinny nadal pozwalać wykonać uzgodnione zadanie. Jeżeli nie uda się pobrać aktualnego programu, pokaż odrębny stan. Pusta lista nie powinna sugerować, że obiekt nie ma żadnych sal. Właściciel treści musi również rozpoznać, którą wersję rysunku opublikowano.

Po wymianie rysunku sprawdź przynajmniej znane miejsca przy krawędziach i w środku planu. Nowe marginesy pliku mogą sprawić, że dawne obszary wyboru przestaną odpowiadać salom, choć grafika wygląda poprawnie. Odbiór aktualizacji powinien obejmować nazwy, zaznaczenia oraz szczegóły tych samych miejsc. Osobie odpowiedzialnej za program przyda się krótka instrukcja takiej kontroli. Przy publikacji nowego rysunku powinna od razu otrzymać przypomnienie o sprawdzeniu powiązanych obszarów. Sama poprawność pliku graficznego nie zamyka tej aktualizacji.

Końcowe kryterium może być bardzo konkretne: odwiedzająca wybiera S2 z listy, widzi odpowiadający obszar, odczytuje właściwe wejście i po zamknięciu szczegółów zachowuje orientację. Jeśli potrafi to zrobić bez dodatkowego objaśnienia projektanta, plan pomaga w wizycie. Obracająca się grafika może wtedy pozostać miłym dodatkiem.