Wyłącz komputer i usiądź wygodnie w fotelu. Zanotuj na kartce jaki jest cel Twojej witryny, jakie informacje chcesz przedstawić odwiedzającym, jakie podstawowe działy chcesz na niej zamieścić oraz jakie planujesz dodać w przyszłości. Spisz jakie materiały masz gotowe do publikacji w każdym z działów i jakie są w trakcie przygotowania. Czy jest ich wystarczająco dużo, by zacząć dalsze prace?
Narysuj schemat serwisu.

Hierarchiczna (drzewiasta – patrz rysunek) struktura witryny jest jedną z najbardziej czytelnych i najprostszych w odbiorze dla użytkowników, a jednocześnie najłatwiejszą do realizacji i aktualizacji.

Ideą takiej struktury jest organizacja informacji w kolejności od najbardziej ogólnych i najważniejszych (menu na stronie głównej), poprzez usystematyzowane tematycznie podmenu (drugi poziom), aż do szczegółowych materiałów, które znajdują się na najniższym poziomie struktury.

Rys. 1 Struktura hierarchiczna

W przypadku niektórych rodzajów witryn, na przykład przy prezentacji prac graficznych czy też dłuższej treści składającej się z kilku rozdziałów, możesz zastosować strukturę liniową polegającą na sekwencyjnym połączeniu stron. Pamiętaj jednak, by oprócz nawigacji do przodu i do tyłu oraz odnośnika do strony głównej, zamieścić również spis treści wszystkich stron, tak by można było oglądnąć bezpośrednio dowolny fragment oraz by od razu wiedzieć jak wiele jest elementów.

Oczywiście przy większych serwisach mogą wstępować oba rodzaje struktur.

Rys. 2 Struktura mieszana

Kiedy weźmiesz do ręki czasopismo doskonale wiesz jak go używać. Medium internetowe jest trudniejsze w obsłudze i jeżeli nie zapewnisz użytkownikom przyjaznej nawigacji, mogą mieć trudności z przeglądnięciem zawartości Twojego serwisu. Konsekwentna nawigacja, jednolita na wszystkich stronach, zarówno pod względem umiejscowienia jak i wyglądu bardzo ułatwi orientację. Pamiętaj, że bardzo ważny jest szybki dostęp do informacji – użytkownik nie powinien klikać więcej niż trzy razy, by do nich dotrzeć. Możesz ułatwić odwiedzającemu zorientowanie się w zawartości witryny zamieszczając osobną stronę z mapą całości.

Nawigacja strony internetowej musi być prosta i czytelna, tak aby odwiedzający nie miał żadnych wątpliwości gdzie ma klikać, by dostać się do żądanych informacji, powinien zawsze wiedzieć w którym miejscu serwisu się znajduje, które strony już widział i jak może wrócić na stronę główną.

Jeżeli długość strony znacznie przekracza jeden ekran należy również dodać nawigację na dole strony, uwzględniając w niej także powrót na górę strony

Zamieść na każdej stronie menu z odnośnikami do podstawowych działów serwisu oraz strony głównej i nie zapomnij także o adresie e-mail. Zawsze pozostaw nieaktywny link do aktualnej strony. Menu nawigacyjne powinno być widoczne i łatwe do znalezienia, nie może jednakże stanowić głównego elementu strony (oczywiście ta ostatnia uwaga nie dotyczy strony głównej).

Nie powtarzaj na jednej stronie tych samych odnośników, niezależnie czy nadajesz im różne czy takie same nazwy - może to wprowadzić w błąd użytkownika, który pomyśli, że oferujesz różne materiały.

Jeżeli dany odnośnik prowadzi na inny serwer lub otwiera nowe okno zawsze to wyraźnie opisuj.

Jeżeli umieszczasz menu graficzne, w formie skryptu lub appletu (mam nadzieję, że starasz się unikać takich rozwiązań), to zamieść również menu tekstowe. Nigdy nie twórz menu w postaci mapy graficznej (image map). W przypadku graficznego menu nigdy nie zapominaj o zamieszczeniu alternatywnego tekstu dla grafiki: <img src="obrazek.jpg" alt="Nazwa obrazka" width="25" height="90">.

Jeżeli używasz ikonek do nawigacji - stosuj czytelną i jednoznaczną symbolikę i nie każ użytkownikowi zgadywać co dany obrazek symbolizuje. Niezależnie od tego, dobrze jest pod ikonkami zamieścić również tekstowe odnośniki, które też powinny być aktywnymi linkami .

Unikaj określeń: “natępny dział”, “poprzedni obrazek”, “powrót do menu”. Napisz gdzie konkretnie użytkownik się znajdzie po kliknięciu na danym odnośniku.

W przypadku gdy informacje na danej stronie są podzielone na kategorie tematyczne możesz użyć dodatkowego menu odnoszącego się do poszczególnych kategorii.

Na górze strony zamieściłam “szybkie” podręczne menu, dzięki któremu można się od razu przenieść do konkretnej kategorii.

Realizuje się to przy pomocy zakładek (bookmark).

Fragment kodu z menu:

<a href="#Humor">Humor</a>
<a href="#Graphics">Graphics</a>

Kod z treści strony:
<a name="Humor">
(...)
<a name="Graphics ">
(...)

Jeżeli masz wątpliwości czy nawigacja Twojego serwisu jest czytelna i łatwa do interpretacji dla użytkownika, posadź przy komputerze znajomego, który słabo się orientuje w internecie. W ten sosób najszybciej wyłapiesz wszelkie mankamenty.

Postaraj się przypomnieć sobie wszystkie strony, po których było Ci się łatwo poruszać i przyglądnij się jak została na nich rozwiązana nawigacja.

Przykłady czytelnej nawigacji:

Nie umieszczaj, ani na dysku ani na serwerze, wszystkich elementów serwisu (pliki tekstowe, graficzne, dźwiękowowe) w jednym katalogu. Przygotuj osobne podkatalogi dla każdej z pozycji głównego menu. Stwórz również podkatalog na pliki graficzne, ponieważ najrzadziej je zmieniasz. Ułatwi Ci to i przyspieszy aktualizowanie strony oraz pomoże uniknąć pomyłek przy kopiowaniu plików na serwer.

Przy projektowaniu struktury katalogów weź pod uwagę w jaki sposób strona będzie się rozwijać – jeżeli na przykład przewidujesz, że ilość plików bardzo się rozrośnie możesz stworzyć od razu dodatkowe podkategorie.

Agnieszka Richter