TAAT – Typografia: nawigacja

Nawigacja

Jednym z najważniejszych elementów projektowania na potrzeby internetu jest potraktowanie elementów nawigacyjnych z należytą uwagą. Najważniejsza zasada której należy się trzymać: nawigacja musi być jednoznaczna.

Podkreślenia: tak, czy nie?

Za tradycyjny sposób oznaczania linków tekstowych przyjęto podkreślenie. Ten sposób jest stosowany od początków internetu i większość internautów widząc podkreślony tekst spodziewa się że jest to łącze.

Niestety, podkreślony tekst jest słabo czytelny. Do tego kreski podkreślenia są umieszczane tak blisko linii bazowej tekstu, że przecinają litery z wydłużeniami dolnymi. Na dodatek, tekst w linkach ma większe znaczenie przy optymalizacji stron pod wyszukiwarki internetowe. Tym samym wiele portali błędnie oznacza całe akapity jako linki.

Można przyjąć dwie skrajne strategie: konsekwentnie podkreślać wszystkie linki — lub nie podkreślać, pamiętając jednak o tym aby w inny sposób jednoznacznie odróżnić linki od reszty tekstu. Do dyspozycji mamy także inne sposoby wyróżnienia niż kolor, na przykład takie jak pogrubienie, ramka, tło, lub światło.

O tym, czego nie należy podkreślać

Moim zdaniem wszystkie linki tekstowe należy podkreślać.

Odstąpienie od podkreślenia linków jest możliwe, a nawet wskazane w takich miejsach, w którym użytkownik, niezależnie od wyglądu elementu spodziewa się właśnie linku. Na przykład w głównym menu nawigacyjnym, elementach wyglądających jak przyciski lub w przypadku stron na których tylko elementy nawigacyjne są kolorowe.

Zdecydowanie nie należy podkreślać tekstu wielowierszowego. Jeśli linki nie mieszczą się w jednej linii, można je odpowiednio skrócić, a w razie potrzeby dłuższy opis umieścić za pomocą atrybutu title.

Absolutnie nie należy podkreślać tekstu który chcemy wyróżnić, bo internauta w 99 przypadkach na 100 będzie w niego próbował kliknąć, myśląc, że ten tekst jest odnośnikiem.

Treść odnośników

Oprócz treści wyglądu łącza ważna jest także jego treść. Odnośniki powinny mieć charakter opisowy, np. zamiast pisać:

Jeśli chcesz pobrać przeglądarkę Firefox, kliknij tutaj

powinno być napisane:

Jeśli chcesz, pobierz przeglądarkę Firefox

Dodatkowo warto pamiętać o tym, że znacznik a ma także atrybut title.

Stan hiperłącza

Do oznaczania aktualnego stanu odnośnika służą pseudoklasy CSS:

a:link — stan normalny, odnośnik do strony jeszcze nieodwiedzonej
a:visited — odnośnik do strony już odwiedzonej
a:hover — kursor nad odnośnikiem
a:focus — odnośniki wyróżnione podczas nawiacji klawiaturą (TAB, Shift+TAB)
a:active — odnośnik aktualnie klikany

Wszystkie pięć stanów powinno zostać zawsze dokładnie ostylowane w pliku CSS. Należy pamiętać o pseudoklasie a:focus bo jest to jeden z podstawowych sposobów poprawiania dostępności strony.

Aby powyższe pseudoklasy były zawsze prawidłowo aplikowane, powinny być użyte właśnie w takiej kolejności..

Kolor hiperłącza

Domyślnym kolorem nieodwiedzonego jeszcze odnośnika jest niebieski. Każdy internauta o tym wie. Ten kolor jest najskuteczniejszy jeśli brać pod uwagę tylko kolor.

Możesz przeprowadzić eksperyment. Zestaw obok siebie dwa takie same, podkreślone teksty. Jeden z nich niebieski, drugi czerwony. Poinformuj dowolnego internautę o tym, że tylko jeden z tych tekstów jest linkiem i poproś o to, aby wskazał ten właściwy. Który? Oczywiście, że niebieski. Nawet taki agresywny kolor jakim jest czerwony, przegra z czerwonym z w kategorii „poprawa klikalności”.

Linki wewnętrzne i zewnętrzne

Każdy z linków powinien jednoznacznie informować, że prowadzi do strony w innej domenie, aby użytkownik mógł w porę zadecydować, czy chce opuścić dany serwis.

Aby oznaczyć linki zewnętrzne używa się warunkowych selektorów CSS. Dodaje się je w nawiasach kwadratowych. Nie wszystkie przeglądarki je obsługują prawidłowo (oczywiście główny problem to IE). Doskonałym przykładem wykorzystania takiej techniki jest Wikipedia.

Oczywiście, można także to robić ręcznie i przypisywać dla każdego zewnętrznego linku klasę odpowiednio zmieniającą jego wygląd, ale po co to robić, skoro może to zrobić za nas nowoczesna przeglądarka.

Oznaczanie linków zewnętrznych za pomocą CSS

Poniższy przykład pokazuje jak dodać za każdym zewnętrznymi linkiem dodać obrazek informujący internautę o linku zewnętrznym oraz jego stanie.

Należy stworzyć obrazek ukazujący trzy stany (normalny, odwiedzony, pod myszą) Taki plik może wyglądać np. tak:

Obrazek ma wymiary 11×300px. Ramka została dodana celowo aby było widać rozmiary obrazka.

Odnośnikom których adresy nie zaczynają się od http:// ustawiamy odpowiednie parametry za pomocą warunków CSS:

a[href^="http://"] {
padding-right:13px;
background:url(ex.gif) right 3px repeat-y;
}

a[href^="http://"]:visited:hover { background-position:right 103px}
a[href^="http://"]:hover { background-position:right 203px }
a img { border:0 }

Wykorzystując absolutne ułożenie tła dla różnych stanów odnośnika (:hover, :visited) ustawiamy różne położenie obrazka podając wartości w pikselach. W zależności od stanu będzie widoczna tylko odpowiednia część obrazka.

Ale na tym jeszcze nie koniec…

Linki zewnęrzne w IE

To rozwiązanie działa nawet w IE 7. Ale Internet Explorer w wersji starszej niż 7 ma swoje fanaberie. Żeby go zmusić do poprawnej obsługi zewnętrzych odnośników można wykorzystać odpowiednie wyrażenie, expression które działa tylko w IE i nadać wszystkim linkom odpowiednie klasy (internal, external) w zależności od wartości atrybutu href a potem je odpowiednio ostylować.

Do powyższego kodu CSS należy więc dodać expression i powtórzyć wszystko dla klasy external:

/* uruchomienie expression dodającego do wszystkich linków
klasę internal lub external w zależności od atrybutu href */

* html a {
    -ie-exp:expression(this.done?0:this.done=this.className+=(this.href.substring(0,7)=='http://'?' ex':' in')+'ternal');
}

/* powtórzenie reguł dla klasy external */

a.external {
    padding-right:13px;
    background:url(/gfx/ex.gif) right 3px repeat-y;
}
a.external:visited:hover { background-position:right 103px;}
a.external:hover { background-position:right 203px; }

Przykład działania:

Rozwiązanie dla IE opracował: PablO
Link wewnętrzny: Narzędzia dla webmasterów

Szablon PSD do ikonek zewnętrznych

icons-navigation-external.psd

Aktualna podstrona

Użytkownik powinien wiedzieć w której części serwisu aktualnie się znajduje. Najczęściej stosuje się technikę wyróżniania menu. Rozpoznać czy użytkownik jest na aktualnej podstronie można na wiele sposobów (np. za pomocą skryptów po stronie serwera lub użytkownika). Ale jest też sprytny sposób aby dokonać tego bez pomocy skryptów, tylko przy pomocy HTML i CSS.

Sprytna nawigacja

Nadaj każdemu z elementów nawigacyjnych osobną klasę CSS:

<ul>
<li><a href="#" class="spis">Spis treści</a></li>
<li><a href="#" class="wstep">Wstęp</a></li>
<li><a href="#" class="kontakt">Kontakt</a></li>
</ul>

Dla każdej podstrony należy dodać odpowiedni atrybut id dla znacznika body.
Czyli <body id="spis">, <body id="wstep"> i <body id="kontakt">. Jak widać klas i atrybutów id musi być tyle samo co elementów nawigacyjnych. Warto przyjąć takie same nazwy dla klas i identyfikatorów aby się nie pogubić.

W pliku CSS ustaw reguły dla podświetlonego elementu w następujący sposób:

#spis .spis,
#wstep .wstep,
#kontakt .kontakt
{
    color:red;
    // lub dowolne inne ustawienia
}

I to wszystko.

Semantyczny charakter nawigacji

Nawigacja po serwisie powinna mieć charakter semantyczny. Każda podstrona może mieć określone położenie względem pozostałych. Tak jak w książce witryna internetowa może mieć stronę tytułową, spis treści, kolejne strony z treścią, wyróżnione zakładki itp. Jest to szczególnie ważne podczas tworzenia wszelkiego typu publikacji, które czyta się tak jak tradycyjne książki, czyli wszelkiego typu instrukcje, podręczniki, e-booki itp.

Do nadawania semantycznych atrybutów nawigacyjnych służą atrybuty rel oraz rev, które mogą być dodane do znacznika a lub link.

Znacznik link umieszcza się w sekcji head. Określa on wzajemne powiązania danego dokumentu HTML z pozostałymi. Bez atrybutów rel oraz rev jest bezużyteczny.

Atrybuty rel oraz rev mogą przyjmować dowolne wartości w zależności od potrzeb dokumentu, ale wspierane przez przeglądarki są przede wszystkim wartości:

alternate
stylesheet
start
next
prev
contents
index
glossary
copyright
hhapter
section
subsection
appendix
help
bookmark

Co raz częściej spotyka się także wartość license która określa prawa autorskie do danego dokumentu. rel="nofollow" jest znakiem dla robotów wyszukiwarek aby nie indeksowały danego dokumentu. Rośnie także popularność mikroformatów.

Spisy treści i mapy strony

Przy większej ilości podstron w serwisie i bardziej skomplikowanej strukturze semantycznej warto pokusić się o stworzenie osobnej strony z listą linków obrazujący strukturę serwisu.

Mapę strony warto również utworzyć z powodów optymalizacji serwisu pod wyszukiwarki internetowe, tak aby roboty wiedziały, które strony i jak często odwiedzać. Do tworzenia takich map stron istnieją odpowiednie narzędzia online. (np. Google sitemap generator lub XML Sitemaps)

Mapy strony tworzy się w postaci struktury drzewiastej odnośników, przy użyciu wieloktrotnych zagnieżdżeń elementów list (li lub ul) lub w postaci pliku XML.

Chmury tagów

Chmury tagów to często spotykany element od czasu pojawienia się trendu web 2.0. Jest to spis haseł (linków) w których waga hasła proporcjonalna jest do wielkości czcionki lub użytego koloru.

Sposób często spotykany, szczególnie na blogach, z reguły generowany automatycznie i bez kontroli użytkownika. Nie jest to rozwiązanie eleganckie, choć może służyć jako narzędzie marketingowe.

Oznaczanie obcojęzycznych fragmentów tekstu

Wszystkie elementy nawigacyjne powinny mieć także jasne oznaczenie jęzka jeśli są pisane w języku innym niż główny język dokumentu. Ale o tym już rozdziale: Wiele języków na jednej stronie.