Już na samym początku można wyróżnić dwa rodzaje linków: wewnętrzne i zewnętrzne. Wewnętrzne to najczęściej nagłówek, menu, stopka, czyli elementy najczęściej identyczne na wszystkich podstronach, do których użytkownik może w każdej chwili się odwołać. Linki zewnętrzne to z kolei te, prowadzące użytkownika poza stronę, na której się znajduje. Najczęściej występują one w zasadniczej treści strony.

Wygląd linków

Ważne jest, aby linki różniły się od otaczającego je tekstu. Użytkownik powinien wiedzieć, że w tym miejscu znajduje się link i może w niego kliknąć. Powszechnie przyjętą metodą oznaczania linków jest używanie podkreślonego tekstu. W rzadkich przypadkach używa się linków pisanych pogrubioną czcionką.

Często stosowane są pseudoklasy CSS, aby oznaczyć linki znajdujące się w trakcie interakcji z użytkownikiem. Odpowiednio można oznaczyć linki po najechaniu na nie kursorem (:hover), kliknięciu (:active) i odwiedzione już wcześniej (:visited). Najczęściej przyjmowanymi zmianami wyglądu linka w odpowiedzi na którąś z akcji jest zmiana koloru czcionki i ewentualnie usunięcie podkreślenia (w pseudoklasach :hover lub :active).

Co się stanie?

Ważną rzeczą jest poinformowanie użytkownika o tym, co stanie się po kliknięciu przez niego w dany link. Oczywiście, nie chodzi o dodanie do każdego linka opisu “jeśli tu klikniesz, zostaniesz przeniesiony na stronę…”, ale o odpowiednie opisanie treści, do której dany link prowadzi. Często stosowaną praktyką jest umieszczenie na stronie odnośnika w taki sposób:

Kliknij tutaj, aby przejść na stronę z kotkami.

Przez co użytkownik chcący szybko znaleźć informację, gdzie prowadzi dany link, musi przeczytać całe zdanie. Dużo lepszym sposobem jest zrobienie tego w ten sposób:

Strona z kotkami

Użytkownik od razu wie, co go czeka :)

Tytuły

W wielu dokumentach dotyczących użyteczności w sieci, jest mowa o używaniu atrybutu title do opisywania linków na stronie. Moim zdaniem jest to przydatne, jeżeli treść linku, z powodu kontekstu w jakim jest umieszczona, nie może powiedzieć użytkownikowi zbyt wiele o samej stronie za odnośnikiem. Na przykład, kiedy powołujemy się w tekście na jakieś źródło:

Źródła mówią, że udział zwierząt parzystokopytnych w tej sprawie jest marginalny.

Ważną rzeczą jest to, że podany w atrybucie title tekst pojawia się użytkownikowi po najechaniu kursorem na link, a także jest odczytywany przez przeglądarki głosowe, używane przez użytkowników niewidomych.

Jednak użycie tego atrybutu nie zawsze jest korzystne. Kiedy na przykład treść odnośnika mówi nam wszystko i nie mamy pomysłu dodania żadnego nowego opisu, nie ma sensu powielać treści tylko po to, aby mieć atrybut title.

Ikony

Kolejną rzeczą ułatwiającą użytkownikowi zrozumienie linku są ikony. Na przykład widoczne na screenie po lewej stronie, informują w systemie DokuWiki o linku zewnętrznym. Można ich również użyć do oznaczenia linków prowadzących do określonych typów plików np. zip, odt, doc, pdf. Stworzenie takich linków jest bardzo proste przy użyciu CSS3 – na przykład dla dokumentów pdf:

Nawiasy kwadratowe [] oznaczają, że wewnątrz nich znajduje się warunek odnoszący się do atrybutów danego tagu, $= oznacza, że wartość danego atrybutu ma się kończyć podanym po nim ciągiem znaków.

Z kolei linki zewnętrzne możemy oznaczyć w taki sposób:

Tutaj ^= działa podobnie, jak $= w poprzednim przykładzie i oznacza, że wartość atrybutu ma się zaczynać podanym ciągiem znaków.

Otwieranie linków zewnętrznych

Istnieją tutaj dwie szkoły. Pierwsza z nich, nakierowana na użytkowników mniej biegłych w obsłudze komputera, mówi że linki zewnętrzne powinny być otwierane w nowym oknie (atrybut target=”blank”), tak aby użytkownik nie był zaskoczony trafiając nagle na zupełnie inną stronę niż był przed chwilą. Druga szkoła opowiada się za otwieraniem wszystkich linków w ten sam sposób, ponieważ otwieranie ich domyślnie w nowym oknie blokuje możliwość otwarcia ich w tym samym oknie, co zawęża użytkownikowi możliwość wyboru.

Wybór pomiędzy jedną z dwóch szkół zależy tutaj od tego, czego oczekują nasi użytkownicy. Powinniśmy przeanalizować ich sposób korzystania z komputera (chociażby przewidywany) i dostosować do niego zachowanie strony.

Linki wewnętrzne

Jeśli znajdują się one wewnątrz treści strony, tak jak większość linków zewnętrznych, to stosują się do nich te same zasady. Szczególnym rodzajem linków wewnętrznych, który wyłamuje się większości reguł, są linki znajdujące się w nagłówku, menu i stopce strony. Ich wygląd jest ściśle uzależniony od grafiki strony. Bardzo często same w sobie są one specjalnie zaprojektowanymi elementami graficznymi strony. Z tego powodu nie jest przy nich konieczne podkreślenie, ani inne elementy wyróżniające je spośród tekstu strony. Regułą, od której nie ma wyjątków, jest aby użytkownik wiedział, że są to linki i że może z nich skorzystać (inaczej stają się tylko tłem, bez wpływu na interakcję użytkownika ze stroną).

Często spotykaną w menu wersją pośrednią pomiędzy w pełni rysowanymi linkami, a linkami tekstowymi, są linki tekstowe z ikonami opisującymi w sposób symboliczny, gdzie one prowadzą. Może być to na przykład dom przy linku do strony głównej lub ikona telefonu przy linku do strony z informacjami kontaktowymi.

Przykłady takich rozwiązań:

O czym warto pamiętać

Przede wszystkim linki na stronie, nieważne czy mówimy o linkach wewnętrznych czy zewnętrznych, powinny być dla użytkowników pomocą w nawigacji. Użytkownik nie powinien zastanawiać się, co robi dany link, powinien wiedzieć to już po pierwszym rzucie oka.

Dzisiaj przedstawiam sposób na ukrycie kursora na naszej stronie za pomocą CSS.

Specyfikacja CSS2 podaje dla własności cursor następujące możliwe wartości (po najechaniu na wartość, pojawi się przypisany jej w Twojej przeglądarce kursor):

• URL — oddzielona przecinkami lista URL-i do plików z kursorami, najlepiej zakończona którąś z poniższych wartości
• auto — domyślna wartość — przeglądarka sama ustawia kursor
• crosshair
• default
• e-resize
• help
• move
• n-resize
• ne-resize
• nw-resize
• pointer
• progress
• s-resize
• se-resize
• sw-resize
• text
• w-resize
• wait
• inherit — wygląd dziedziczony po elemencie nadrzędnym

Niestety, nie ma tu interesującego nas parametru braku kursora.

W propozycjach do specyfikacji CSS3 dodano kolejnych kilka kursorów:

• alias
• all-scroll
• cell
• copy
• context-menu
• no-drop
• none
• not-allowed
• nwse-resize
• col-resize
• row-resize
• vertical-text

Jak widać, tu już występuje interesujący nas parametr none. Problem w tym, że z przeglądarek, na których przeprowadziłem testy (Internet Explorer 6, 7 i 8, Chrome, Safari 4, Opera 9.64, Firefox 3.0.11), tylko FF obsługuje tę opcję. Obejściem tego problemu jest wykorzystanie specjalnie stworzonego pliku kursora blank.cur będącego jednopikselowym, przeźroczystym plikiem. Aby uzyskać niewidoczny kursor w jak największej liczbie przeglądarek, używamy w CSS stylu:

Pierwsza wartość pozwoli nam na ustawienie przeźroczystego kursora w przeglądarkach nie obsługujących wartości none, a none schowa kursor w Firefoxie. Rozwiązanie to nie działa, niestety, w Operze (która nie obsługuje żadnej z tych wartości), a tylko częściowo działa w Chromie (zamiast przeźroczystości wyświetlana jest czerń — z tego względu stworzyłem 1×1px obraz kursora, aby jego widoczność w Chromie była jak najmniejsza).

Kiedy (jeżeli) CSS3 wejdzie w życie, wszystkie przeglądarki powinny obsługiwać już atrybut none i będzie on wystarczający do działania.