Przejdź do treści
AENEIA SIGNAL
Design / Signal

Długi poradnik na stronie: spis treści, który pomaga wrócić do pytania

Jak zaprojektować spis treści długiego poradnika? Uporządkuj nagłówki, trwałe adresy sekcji, widok po przejściu i powrót do miejsca lektury.

Koncepcja świata Aeneia: projektantka testuje ruchome moduły ścian i ławki na otwartych tarasach z widokiem na wodę.
W tym artykule

„Jest w poradniku, w części o przygotowaniu” — pisze kolega. Poradnik ma kilkanaście ekranów, trzy nagłówki „Przygotowanie” i pasek menu, który po kliknięciu zasłania właśnie ten potrzebny tytuł. Informacja istnieje. Odnalezienie jej zaczyna przypominać sprawdzian znajomości autora.

Długi materiał na stronie może służyć różnym sposobom czytania. Jedna osoba przejdzie całość, druga sprawdzi warunek, trzecia wróci do miejsca przerwanego telefonem. Spis treści ma wspierać te drogi, a nie jedynie pokazywać, ile rozdziałów udało się napisać. Projekt obejmuje nazwy, odnośniki, widok po przejściu i zachowanie po powrocie.

Przyjmijmy fikcyjny poradnik przygotowania stoiska na targi. Organizator opisuje zgłoszenie, materiały, dostawę i montaż. Pod słowem „przygotowanie” kryje się więc kilka różnych zadań. Osoba odpowiedzialna za transport potrzebuje wyłącznie warunku odbioru wyposażenia. Musi jednak wiedzieć, czy dotyczy jej dnia i rodzaju dostawy. Sam skok do odpowiedniego akapitu nie wystarczy, jeśli po drodze zniknie kontekst.

Spis treści zaczyna się w redakcji

Najpierw zbierz pytania czytelników i zobacz, którym częściom odpowiadają. „Dostawa wyposażenia przed wydarzeniem” pozwala przewidzieć więcej niż „Etap drugi”. Jeśli rozdział łączy dostawę i montaż tylko dlatego, że oba opisuje ten sam pracownik, podział odtwarza strukturę firmy zamiast potrzeb odbiorcy.

Czytaj same nagłówki, bez tekstu pod nimi. Powinny dać rozpoznawalny obraz materiału. Zwróć uwagę na powtarzające się etykiety: „Informacje”, „Zasady”, „Pozostałe”. Takie słowa potrzebują dopowiedzenia. Trzy podobne odnośniki w spisie nie pomogą wybrać właściwego, nawet jeśli każdy prowadzi do technicznie poprawnego miejsca.

Poradnik WAI o nagłówkach wskazuje, że komunikują one organizację treści i mogą wspierać nawigację wewnątrz strony. Ich poziomy mają oddawać logiczną hierarchię. Pomijanie poziomów przy otwieraniu podsekcji może wprowadzać w błąd.

W projekcie rozróżnij więc rozdział i część rozdziału. Wielkość liter oraz kolor mogą pokazywać ten podział, ale powinien on wynikać również ze struktury dokumentu. Tytuł „Odbiór poza godzinami montażu” może należeć do rozdziału dostawy. W spisie pokaż ten związek, zamiast zestawiać wszystkie pozycje jako równorzędne.

Nie każdy śródtytuł musi trafić do głównego spisu. Przy wielu drobnych punktach lista może stać się kolejnym długim dokumentem poprzedzającym właściwy poradnik. Wybierz poziomy, które pomagają zdecydować, gdzie wejść. Przy dłuższym spisie sprawdź również zawijanie nazw. Dwa wiersze jednego odnośnika nie powinny wyglądać jak dwie osobne pozycje, a skrócona etykieta nie może ukrywać różnicy między odbiorem a dostawą. Jeśli potrzebna jest bardziej szczegółowa nawigacja, powinna zachować czytelną hierarchię i nie zasłaniać treści na małym ekranie.

Odnośniki mogą powtarzać nagłówki albo używać skrótu, który zachowuje ich znaczenie. Nie skracaj tytułu do słowa „Transport”, jeśli pod nim znajdują się warunki dostawy, odbioru i wywozu, a czytelnik musi rozpoznać różnicę. Skrót ma zmniejszać długość, nie zmieniać obietnicy.

Odróżnij tę nawigację od okruszków pokazujących miejsce w serwisie. Okruszki mogą wskazać, że poradnik należy do działu dla wystawców. Spis treści prowadzi do części tego jednego poradnika. Obie funkcje są przydatne, ale nie powinny otrzymywać identycznej etykiety ani udawać, że rozwiązują to samo zadanie.

Odnośnik ma doprowadzić do rozpoznawalnego miejsca

Kotwica to oznaczone miejsce w dokumencie, do którego prowadzi odnośnik z fragmentem adresu po znaku kratki. Z punktu widzenia czytelnika ważniejszy od nazwy mechanizmu jest rezultat: po wejściu ma zobaczyć odpowiedni tytuł i fragment treści. Zespół tworzący stronę powinien sprawdzić to w gotowym układzie.

W naszym poradniku link do odbioru wyposażenia nie może zatrzymać się tak, by nagłówek ukrył się pod przyklejonym menu. Człowiek widzący od razu środek zdania może uznać, że trafił w złe miejsce. Sprawdź położenie docelowego tytułu, odstęp nad nim i to, co zajmuje górną część ekranu.

Dokumentacja MDN dla scrollIntoView pokazuje użycie scroll-margin-top i scroll-margin-bottom do ustawienia odstępu przy wyrównaniu przewijanego elementu. Wskazuje przydatność takiego rozwiązania przy nagłówku pozostającym na górze widoku. To środek techniczny; odbiór nadal dotyczy widocznego rezultatu.

Nie wpisuj jednej wysokości odstępu na podstawie szerokiego ekranu i nie uznawaj zadania za zamknięte. Pasek może mieć inny rozmiar po powiększeniu tekstu, zmianie języka lub zawinięciu pozycji menu. W próbie zobacz tytuł także w tych stanach. Jeśli nakładają się dwa paski, uwzględnij ich łączny skutek.

Gdy spis wyróżnia aktualnie czytaną część, uzgodnij, co oznacza ten sygnał. Po wybraniu rozdziału, a potem ręcznym przewinięciu dalej, dawne wyróżnienie nie powinno udawać obecnego miejsca. Odróżnij również stan bieżącej sekcji od oznaczenia wcześniej odwiedzonego linku. W krótkiej próbie poproś czytelnika, żeby po przewinięciu wskazał, gdzie jest i jak przejść do sąsiedniej części. Jeśli musi zgadywać znaczenie kolorów, popraw ich opis i zachowanie.

Zachowaj kontekst warunku. Rozdział może zaczynać się informacją „dotyczy dostaw w przeddzień wydarzenia”, a link prowadzić niżej do godziny odbioru. Czytelnik, który wszedł bezpośrednio z wiadomości kolegi, nie zobaczył początku. Przy konkretnym warunku pokaż wystarczające oznaczenie zakresu albo poprowadź do miejsca, które pozwala go rozpoznać przed użyciem informacji.

Podobnie postępuj z wyjątkami. Jeżeli tabela godzin ma osobną uwagę dla dużych ładunków, skok nie powinien sprawiać wrażenia, że zwykła godzina dotyczy wszystkich. Nie trzeba powtarzać całego rozdziału przy każdym wierszu. Wybierz widoczne powiązanie, które przetrwa wąski ekran i wejście do środka dokumentu.

Drewniany grzebień z metalowymi zębami i naprawą z porcelany na stole rzemieślniczym.
Fotografia koncepcyjna AeneiaNic nie jest odpadem

Oceń również sterowanie klawiaturą. Przewinięcie ekranu i miejsce, od którego użytkownik kontynuuje obsługę, to odrębne obserwacje. Po wybraniu części spisu sprawdź, czy dalsza droga ma sens, czy widoczny jest bieżący element i czy człowiek potrafi przejść do właściwej treści. Nie wnioskuj o tym wyłącznie na podstawie animacji.

Nie narzucaj długiego, płynnego przejazdu przez cały dokument jako jedynego sposobu dotarcia do końca. Celem jest odnalezienie miejsca. Ruch może pomóc zachować orientację, ale nie powinien opóźniać prostego skoku ani utrudniać pracy osobie, która potrzebuje ograniczenia animacji. Sprawdź zachowanie rozwiązania z ustawieniami przyjętymi w projekcie.

Jeśli sekcja znajduje się w zwijanym elemencie, wejście przez odnośnik powinno prowadzić do osiągalnej informacji. O tym, kiedy ukrywanie treści pomaga, piszemy przy akordeonie na stronie usługowej. Dla poradnika rozstrzygnij dodatkowo, co dzieje się po otwarciu adresu do zwiniętej części. Widok zamkniętego tytułu może nie spełnić obietnicy linku do konkretnego warunku.

Powrót i udostępnianie też są częścią lektury

Przy nagłówku można udostępnić sposób skopiowania odnośnika do tej sekcji. Opisz czynność jasno, zwłaszcza gdy przedstawia ją tylko mała ikona. Człowiek powinien wiedzieć, czy kopiuje adres rozdziału, czy otwiera inne miejsce. Po wykonaniu pokaż zrozumiałe potwierdzenie, zgodne z rzeczywistym wynikiem.

Sprawdź skopiowany adres w nowej karcie, bez wcześniejszego otwarcia poradnika. To ujawnia zależność od stanu, który autor próby miał już przygotowany: rozwiniętej sekcji, wybranego wariantu albo załadowanego fragmentu. Odbiorca odnośnika nie dziedziczy automatycznie tych samych warunków.

Przycisk „Wstecz” powinien zachowywać się w sposób zrozumiały dla czytającego. Kilka skoków między częściami może inaczej wpływać na historię w zależności od implementacji. Uzgodnij oczekiwaną drogę i sprawdź ją w gotowym rozwiązaniu. Po kilku skokach sprawdź także powrót do strony, z której otwarto poradnik. Czytelnik powinien rozpoznać, czy cofa się między sekcjami, czy opuszcza dokument.

Po przejściu do zewnętrznego materiału i powrocie człowiek chce znaleźć miejsce lektury. Sprawdź to na rzeczywistym poradniku, zwłaszcza jeśli obrazy lub inne elementy doładowują się później i przesuwają tekst. Pozycja mierzona samą liczbą pikseli może przestać oznaczać ten sam akapit po zmianie układu.

Na telefonie spis może stać się rozwijaną listą albo krótkim blokiem u góry. Nie powinien zajmować całego ekranu przez całą lekturę. Jeśli jest stale dostępny, pozwól rozpoznać jego stan i wrócić do treści. Duża nakładka z nawigacją nie powinna zmuszać do ponownego szukania czytanego zdania po każdym wyborze.

Ustal osobno powrót w tej samej przeglądarce i kontynuację na innym urządzeniu. Jeżeli projekt przewiduje zapis miejsca dla kolejnej wizyty, pokaż czytelnikowi, jak go odzyskać. Gdy dostępny jest tylko adres sekcji, wyjaśnij sposób jego skopiowania i późniejszego otwarcia. Sam pasek pokazujący procent przewinięcia nie zapisuje miejsca na kolejną wizytę.

Zmiana tekstu nie powinna zrywać jego adresów

Nadaj częściom stabilne oznaczenia. Zmiana tytułu dla poprawy polszczyzny nie musi oznaczać zmiany miejsca, do którego prowadzą dawne linki. Uzgodnij tę regułę w sposobie publikowania. Jeśli system tworzy identyfikator za każdym razem z aktualnego nagłówka, sprawdź skutki redakcji przed udostępnieniem nowej wersji.

Po połączeniu dwóch sekcji albo podziale jednej na kilka ustal, dokąd prowadzą ich stare adresy. Nie wystarczy, że otworzy się początek całego poradnika. Dla osoby szukającej godziny odbioru będzie to utrata obiecanego miejsca. Gdy dawna informacja przestała obowiązywać, wyjaśnij zmianę i pokaż właściwy zakres zamiast kierować do podobnie brzmiącego tytułu.

Przy kilku wersjach językowych sprawdź przełączanie z wnętrza dokumentu. Jeżeli w wybranym języku istnieje ten sam rozdział, zachowaj rozpoznawalny temat. Jeżeli nie istnieje, nazwij ograniczenie. Sprawdź też adres po zmianie języka, a nie tylko widok. Jeśli człowiek skopiuje go dalej, następna osoba powinna otrzymać rozpoznawalną wersję i część poradnika. Oczekiwany rezultat zapisz dla konkretnego systemu publikacji; sama podobna nazwa rozdziału nie potwierdza powiązania adresów. Powrót do początku strony bez wyjaśnienia bywa mylący, gdy człowiek oczekiwał jedynie zmiany języka tego samego warunku.

Dostępność tej drogi oceń także z ludźmi korzystającymi z odpowiednich narzędzi. Badanie z osobami używającymi technologii asystujących pomaga zaplanować próbę rzeczywistej orientacji. Uczestnik ma znaleźć i zrozumieć warunek, a nie odtwarzać podpowiedzianą przez autora kolejność kliknięć.

Automatyczny audyt dostępności wspierany AI może dostarczyć części obserwacji, lecz nie zastąpi sprawdzenia sensu całej drogi. Poprawna obecność nagłówka nie rozstrzyga, czy jego nazwa pomaga wybrać sekcję ani czy po przejściu widać właściwy kontekst. Zapisz, co oceniono automatycznie, a co w próbie użytkowej.

Jeżeli materiał pozostaje również w pliku, rozstrzygnij rolę obu wersji. Poradnik PDF czy HTML na stronie firmowej pomaga dobrać format do zadania. Odnośnik do sekcji strony nie powinien być przedstawiany jako adres tej samej strony PDF, jeśli dokumenty mają inne podziały i numerację.

Przed odbiorem wybierz trzy rzeczywiste pytania i daj czytelnikowi bezpośrednie adresy do miejsc z odpowiedziami. Poproś o podanie zakresu warunku, przejście do sąsiedniego rozdziału i powrót. Potem zmień jeden nagłówek w kontrolowanej kopii i sprawdź dawne odnośniki. To proponowana próba projektu, nie opis badania wykonanego w tym tekście.

W ofercie Aeneia Design taki poradnik można potraktować jako projekt treści i nawigacji jednocześnie. Dobra mapa nie skróci każdego rozdziału, ale pozwoli człowiekowi wejść do właściwego, zrozumieć jego zakres i wrócić bez wiadomości do kolegi: „A gdzie dokładnie było to przygotowanie?”.

Aeneia / Redakcja Aeneia

Tekst redakcyjny. Linki do źródeł znajdziesz w treści.

Źródła sprawdzone: .

O Aeneia
Aeneia / Initium

Od wiedzy do decyzji

Opowiedz nam, co chcesz uporządkować. Ustalimy, od czego zacząć.

Przejdź do kontaktu