Długa strona internetowa może zawierać wszystkie potrzebne informacje, a mimo to pozostawać niewygodna w obsłudze. Problem pojawia się szczególnie wtedy, gdy użytkownik musi przewijać kilka ekranów, aby znaleźć cennik, formularz kontaktowy, odpowiedź na konkretne pytanie albo interesujący go fragment artykułu – można jednak skrócić tę drogę i jednym kliknięciem przenieść odbiorcę dokładnie do właściwego miejsca. Służą do tego kotwice HTML, czyli proste rozwiązanie sprawdzające się na stronach typu one page, landing page’ach, rozbudowanych stronach usługowych, w dokumentacji, sekcjach FAQ oraz długich artykułach.
Czym jest kotwica na stronie internetowej?
Kotwica pozwala utworzyć odnośnik prowadzący do konkretnego miejsca na stronie – zamiast otwierać nową podstronę, przeglądarka przewija bieżący dokument do elementu oznaczonego odpowiednim identyfikatorem. Mechanizm opiera się przede wszystkim na atrybucie id, a wybranej sekcji można nadać na przykład identyfikator:
id="cennik"
Odnośnik prowadzący do tego miejsca będzie natomiast wyglądał następująco:
href="#cennik"
Po kliknięciu użytkownik zostanie przeniesiony do elementu oznaczonego jako cennik, a w pasku adresu przeglądarki może pojawić się wtedy adres zakończony fragmentem #cennik. To niewielki element HTML, ale odpowiednio wykorzystany potrafi znacząco usprawnić poruszanie się po rozbudowanej witrynie.
Gdzie warto stosować kotwice?
Jednym z najbardziej oczywistych zastosowań jest spis treści, ponieważ długim poradniku czytelnik nie zawsze chce zaczynać od pierwszego akapitu. Czasem interesuje go wyłącznie jedna kwestia, a kliknięcie nazwy sekcji może przenieść go bezpośrednio do odpowiedniego nagłówka H2 lub H3. Podobne rozwiązanie dobrze działa na stronach ofertowych – w górnej części serwisu można umieścić przycisk Sprawdź ceny, który prowadzi bezpośrednio do cennika znajdującego się znacznie niżej, podczas gnny przycisk może kierować do formularza kontaktowego, realizacji albo opisu procesu współpracy. Kotwice są również przydatne w rozbudowanych sekcjach FAQ, dokumentacji technicznej i instrukcjach, kiedy użytkownik otrzymuje możliwość pominięcia treści, której w danym momencie nie potrzebuje.
Dobra nazwa identyfikatora ułatwia zarządzanie stroną
Technicznie identyfikator może być bardzo krótki, ale przypadkowe oznaczenia w rodzaju sekcja1, abc czy element5 szybko stają się nieczytelne, a przy późniejszej edycji kodu trudno ustalić, do czego właściwie odnoszą się poszczególne nazwy.
Znacznie lepiej stosować identyfikatory opisujące zawartość sekcji, na przykład #cennik, #kontakt, #faq, #opinie czy #realizacje.
Ma to jeszcze jedną zaletę – adres zakończony fragmentem #kontakt jest zrozumiały dla człowieka, który otrzyma go w wiadomości lub zobaczy w przeglądarce, dlatego sam sposób nazywania kotwic warto ustalić już podczas projektowania struktury serwisu.
Kotwica może prowadzić także z innej podstrony
Odnośniki tego typu nie muszą działać wyłącznie w obrębie aktualnie otwartego dokumentu – można skierować użytkownika z jednej podstrony bezpośrednio do określonej sekcji innej podstrony.
Jeżeli witryna ma podstronę /oferta/, a znajdujący się na niej cennik otrzymał identyfikator cennik, odnośnik może prowadzić do:
/oferta/#cennik
Po jego otwarciu przeglądarka wczyta podstronę oferty i przejdzie do oznaczonego fragmentu, a takie rozwiązanie przydaje się między innymi podczas linkowania z artykułu do konkretnej części oferty. Nie zawsze trzeba więc kierować odbiorcy na początek dokumentu i oczekiwać, że sam odnajdzie interesującą go informację.
Uważaj na przyklejony nagłówek strony
Jednym z częstszych problemów pojawiających się przy stosowaniu kotwic jest sticky header, czyli nagłówek pozostający na górze ekranu podczas przewijania. Po przejściu do wybranej sekcji jej nagłówek może bowiem znaleźć się pod przyklejonym menu. Użytkownik teoretycznie trafia we właściwe miejsce, ale nie widzi początku sekcji – jest to szczególnie irytujące na smartfonach, gdzie nagłówek może zajmować sporą część niewielkiego ekranu.
Problem można rozwiązać za pomocą CSS, wykorzystując między innymi właściwość scroll-margin-top. Dla elementu będącego celem odnośnika można ustawić odpowiedni odstęp, dzięki któremu przeglądarka zatrzyma przewijanie nieco wcześniej. Wartość powinna być dopasowana do rzeczywistej wysokości nagłówka – jeżeli menu ma 80 pikseli, zastosowanie podobnego lub nieco większego odstępu pozwoli pozostawić nagłówek sekcji w widocznym miejscu.
Płynne przewijanie poprawia odbiór przejścia między sekcjami
Domyślne przejście do kotwicy może być natychmiastowe. Na długiej stronie użytkownik czasami odnosi wtedy wrażenie, że załadował się zupełnie inny fragment witryny – można zastosować płynne przewijanie za pomocą CSS:
scroll-behavior: smooth;
Po kliknięciu odnośnika ekran przesunie się w stronę wybranego miejsca zamiast natychmiast do niego przeskakiwać, a użytkownik łatwiej zauważy wtedy zależność pomiędzy wykonanym działaniem a zmianą położenia dokumentu. Animacja nie powinna jednak stawać się celem samym w sobie – najważniejsza pozostaje szybkość dotarcia do informacji, a nie efekt wizualny.
Nie każdy przycisk powinien prowadzić do kotwicy
Możliwość szybkiego przenoszenia odbiorcy pomiędzy sekcjami nie oznacza, że trzeba stosować ją przy każdym elemencie CTA. Sposób działania odnośnika powinien odpowiadać temu, czego użytkownik może spodziewać się po jego nazwie – jeżeli przycisk brzmi Zobacz ofertę, może prowadzić do sekcji prezentującej usługi, Sprawdź cennik powinien kierować do cen, a Skontaktuj się do formularza, danych kontaktowych albo odpowiedniej podstrony. Problematyczna jest sytuacja, w której użytkownik klika Dowiedz się więcej i zostaje przeniesiony do miejsca, którego związku z przyciskiem nie rozumie – kotwica technicznie działa prawidłowo, ale ścieżka użytkownika została źle zaprojektowana.
Kotwice pomagają uporządkować rozbudowane strony typu one page
Na witrynach typu one page znaczna część zawartości znajduje się pod jednym adresem URL – menu może wtedy prowadzić nie do oddzielnych podstron, lecz do sekcji takich jak O nas, Usługi, Realizacje, Opinie czy Kontakt. Kotwice stają się w takim projekcie podstawowym elementem nawigacji, a ich zastosowanie pozwala zachować wrażenie poruszania się pomiędzy kolejnymi częściami serwisu bez konieczności każdorazowego ładowania nowego dokumentu.
Trzeba jednak uważać, aby nie wykorzystać tego rozwiązania jako sposobu na umieszczenie ogromnej ilości treści na jednej podstronie, a przy bardziej rozbudowanej ofercie osobne adresy URL mogą być korzystniejsze zarówno dla użytkownika, jak i dla organizacji struktury witryny.
