Visited i hover, czyli jak zapominamy o linkach?

Obsługa linków visited oraz sensowne stosowanie hoverów to coś, co projektanci z niewiadomych względów uwielbiają zaniedbywać. Tymczasem to jedne z najważniejszych elementów witryny. Dla tych, którzy o nich zapomnieli, krótka ściąga.

Odwiedzone linki (:visited)

Oznaczanie odwiedzonych linków to jeden z najstarszych standardów użyteczności.

  • Po pierwsze – łatwiej zdecydować, gdzie pójść, jeśli wiemy, gdzie już byliśmy.
  • Po drugie – łatwiej wrócić tam, gdzie coś znaleźliśmy, jeśli wyraźnie widzimy, gdzie to było.
  • Po trzecie – łatwiej uniknąć wchodzenia w to samo miejsce, jeśli wiemy, że tam byliśmy.

Proste jak konstrukcja cepa, a jednak jest to jeden z częściej łamanych standardów. Co gorsza – łamią go ze szczególnym namaszczeniem duże portale i sajty, na których – paradoksalnie – rola visited linków jest szczególnie istotna. Pomijając zresztą, że ułatwiają nawigowanie, są zgodne ze sztuką i po prostu fair, warto pamiętać, że dzięki nim można łatwo zwiększyć liczbę odsłon. Krótsze skanowanie strony zwiększa szansę podjęcia decyzji. A to skutkuje spadkiem exit-rate. Jeśli mi nie wierzycie, zróbcie test A/B albo test z użytkownikami.

A jeśli już się zdecydujecie, pamiętajcie, że odwiedzony link musi być intuicyjnie odbierany jako odwiedzony. Stary dobry Nielsen radzi:

„visited links should look used (dull and washed out)”.

Trudno się nie zgodzić. Przy okazji warto też zaznaczyć, że to wcale nie musi być „systemowy” fiolet. Kolor visited linków powinien być jednak bledszym odcieniem tego, którego używacie do normalnych odnośników. To wbrew pozorom dość ważne. Uświadamia to taki przykład:

  • To jest zwykły link.
  • To jest odwiedzony link.

Nieprawidłowo zastosowane odcienie (mocniejszy jest fiolet) sprawiają, że mózg ma wątpliwości czy aby na pewno fioletowy link jest odwiedzony. Na przeczytany wygląda przecież raczej blado niebieski odnośnik.

Najazd myszą (:hover)

Na początek parę słów od klasyka. Nielsen nie jest zwolennikiem hoverów. Pisze tak:

„There is no need to use special colors or other visualizations when the cursor hovers over a link. Doing so only makes the page appear more cluttered as the user moves the mouse across the screen”.

Szczerze mówiąc, nie podzielam jego argumentacji. Hovery są czymś niezwykle popularnym. Użytkownicy są przyzwyczajeni do takiego sposobu komunikowania klikalności, a ich przyzwyczajenia są często dobrą wskazówką.
Robiąc hovery trzeba się jedynie trzymać dwóch prostych zasad.

  • Zasada pierwsza – jeden link to jeden hover. Żadnego zagnieżdżania hoverów.
  • Zasada druga – hover powinien pojawiać się tam, gdzie faktycznie jest link. Tu mały przykład:

Nawigacja w sklepie A.pl

Sklep a.pl, w którym ostatnio robiłem zakupy, tak zorganizował swoje menu. Każdy element jest wyraźnie wyróżniony hoverem (i to dobrze). Niestety linkiem w całym tym hoverze jest tylko napis. Reszta jest nieklikalna. Hover wprowadza więc w błąd i może frustrować. W przypadku krótszych nazw i dużej rozdzielczości ekranu, trzeba dodatkowo całkiem nieźle celować.

Lepiej zrobili to projektanci Agory (pozdrawiam ;) w serwisie Wyborcza.biz:

Hover w serwisie Wyborcza.biz

Hoverami można się fajnie bawić i mogą one stanowić charakterystyczny element strony. Nie myślę tu o żadnych fajerwerkach. Podoba mi się na przykład szary background zastosowany w Tok.fm lub wspomnianej Wyborcza.biz. Jest wyraźny i dobrze wygląda, gdzieniegdzie tylko przydałoby się więcej konsekwencji (nie wszędzie hover jest ten sam). Więcej inspiracji i przykładów ».

Watch your cursor!

Oprócz hoverów, warto pamiętać o kursorze. Jest on nawet istotniejszym dowodem dla użytkownika, że ma on do czynienia z linkiem. Niewiele jest więc gorszych rzeczy niż sytuacja, gdy po najchaniu myszką na link ten podświetla się, ale kursor zamiast dłoni wciąż pozostaje strzałką. To się zdarza szczególnie często pod IE, więc warto mieć na to oko.

Na temat linków visited, hoverów i innych stanów odnośników warto poczytać:

Ten wpis umieszczono w kategorii projektowanie i otagowano jako . Możesz dodać go do zakładek permalink. Dodaj komentarz lub dodaj odpowiedź (trackback): Trackback URL.

Skomentuj

Twój adres email nie zostanie opublikowany i nie będzie rozpowszechniany. Wymagane pola są oznaczone *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>