Hiperłącza a dobre praktyki UX

Popularne przyciski

Użytkownik serwisu internetowego powinien móc korzystać z niego bez wysiłku, z łatwością odnajdywać interesujące go informacje i bez problemu poruszać się między istotnymi dla siebie podstronami. Proces ten zdecydowanie usprawniają przyciski z hiperłączami. Są powszechnie stosowane na stronach www oraz w aplikacjach mobilnych. Czy jednak każdy zastosowany przycisk jest pomocny? Czy może wprowadza niepotrzebny szum informacyjny? Jaką treść powinien zawierać, poza często używanym i niezbyt wiele mówiącym “Kliknij tutaj”? Odpowiedzi znajdziesz poniżej.

Teoria pozyskiwania informacji 

Punktem wyjścia do projektowania hiperlinków powinna być wiedza na temat wyszukiwania informacji przez ludzi. Niewielu z nas ma świadomość, że jest to ściśle powiązane z naszymi biologicznymi uwarunkowaniami. Człowiek, poszukując informacji,  korzysta z “wbudowanych” mechanizmów żerowania, które ewoluowały, a przed laty pomagały naszym przodkom znajdować pożywienie! Co to oznacza dla twórców produktów cyfrowych? Użytkownik ocenia przydatność poszczególnych elementów w serwisie czy aplikacji internetowej pod kątem zaspokojenia swoich potrzeb informacyjnych oraz analizuje nakłady czasowe i energetyczne, które musi ponieść, aby uzyskać określone dane.

Odbiorcy nie czytają wszystkich treści na stronie, a raczej “skanują” je w poszukiwaniu tzw. “zapachu informacji” (ang. information scent), który sugeruje czego można się spodziewać po kliknięciu w dany link, przejściu do kolejnego akapitu czy wybranej sekcji w serwisie. 

Dlatego właśnie popularne “Kliknij tutaj” się nie sprawdza. Trop informacyjny musi być wyraźny i dawać jasne wskazówki, które pozwolą zminimalizować wysiłek dotarcia do pożądanej przez użytkownika informacji, a tym samym, poprawić jego doświadczenia i wpłynąć na pozytywny odbiór produktu cyfrowego. 

Ogólnikowe, mało konkretne frazy znacząco wpływają na pogorszenie użyteczności, dostępności i wyszukiwalności strony czy aplikacji w sieci. Dlaczego?

  • Użyteczność 

Link typu: Tutaj / Więcej / Kliknij nie dostarcza odbiorcy wystarczającej ilości informacji. Co więcej, wielokrotne używanie takich przycisków w kilku miejscach serwisu zmusza użytkownika do wykonania dodatkowych akcji, aby je rozróżnić i dowiedzieć się, co właściwie się pod nimi kryje – np. przeczytania tekstu w pobliżu hiperłącza, najechania kursorem na link, w celu wyświetlenia URL, czy wręcz przejścia na inną podstronę, na którą użytkownik wcale nie chciał trafić. W takim przypadku nie pomoże nawet ostylowanie przycisku i wyróżnienie go spośród pozostałych treści. 

Brak słów kluczowych zwiększa obciążenie poznawcze, wydłuża proces dotarcia do właściwych informacji i może nawet wzbudzić w odbiorcy irytację. Warto, zatem, odpowiednio opisywać stosowane linki i używać konkretnych i bardziej informatywnych fraz, które od razu wskażą do czego odsyłają.  

  • Dostępność

Projektowanie inkluzywne (włączające), które jest zdecydowanie na czasie, zakłada umożliwienie korzystania z tego samego produktu cyfrowego jak największej grupie odbiorców – uwzględniając różnice pomiędzy nimi oraz ich ograniczenia. Tworząc stronę czy aplikację internetową powinniśmy brać pod uwagę fakt, że użytkownicy mogą posiadać pewne deficyty lub niepełnosprawności i pomóc im je przezwyciężać, a nie dodatkowo utrudniać wykonanie określonych czynności. 

I tak np. osoby korzystające z czytników ekranów, w przypadku niedokładnie opisanych hiperłączy nie będą w stanie efektywnie korzystać z serwisu. Czytnik ekranu jest to, bowiem, program komputerowy, który rozpoznaje i interpretuje informacje wyświetlanie na  monitorze i przedstawia je w formie głosowej lub przesyła do urządzenia brajlowskiego. Przycisk z napisem Więcej zostanie odczytany: Link Więcej. Niewiele to mówi, prawda? Bez dodatkowego kontekstu nie jesteśmy w stanie stwierdzić, gdzie nas przeniesie. 

Prosta i konkretna fraza, np. Nasze produkty, Cennik, O nas byłaby zdecydowanie bardziej użyteczna.

  • Wyszukiwalność

Aby nasza witryna czy aplikacja mogła zostać wyszukana przez internautę i lepiej pozycjonowała się na tle innych serwisów, powinna być zoptymalizowana pod kątem SEO. Roboty indeksujące zbierają dane o strukturze i zawartości strony, a jej wartość w jest oceniana na podstawie tytułów, nagłówków i hiperłączy. W momencie, kiedy wyszukiwarka indeksująca nie widzi ścisłego powiązania między zastosowanym linkiem, a treścią, do której prowadzi – uznaje hiperłącze za błędne i nie będzie indeksować danej podstrony dla określonego słowa kluczowego. 

Jeśli zależy nam, aby nasz serwis był możliwy do wyszukiwania po wpisaniu wybranej frazy, najlepiej używać jak najbardziej precyzyjnych określeń i słów-kluczy. 

Jak to zrobić lepiej?

Poniżej kilka dobrych praktyk UX, o których warto pamiętać projektując serwis www:

  • Precyzja, prostota i unikanie ogólników 

Porównaj frazy:

Więcej

Czy wiesz gdzie zaprowadzi Cię link? Bez szerszego kontekstu nie jesteś w stanie tego ocenić.

Kliknij tutaj i przeczytaj więcej o naszych wyjątkowych produktach

W tym przypadku otrzymujemy już konkretną informację o zawartości linku, ale czy nie sądzisz, że część słów jest zupełnie zbędna?

Nasze produkty

Tutaj otrzymujemy krótką i precyzyjną informację, której nie musimy dodatkowo analizować – od razu wiemy, co znajduje się pod linkiem.

Wniosek jest jeden – zwięzłe, ale jednocześnie opisowe określenia wpływają na szybkość wyszukiwania informacji i sprawiają, że poruszanie się po stronie czy aplikacji jest bardziej efektywne i przyjemne dla użytkownika. Używajmy rzeczowników. Stosujmy proste, zrozumiałe dla większości osób sformułowania, unikając metafor, neologizmów i żargonu.

  • Niepowtarzalność hiperlinku

Dobrą praktyką jest stosowanie unikalnych nazw hiperlinków, żeby odbiorca z łatwością mógł ocenić, co znajdzie pod określonym przyciskiem i nie odnosił wrażenia, że każdy link prowadzi do tego samego miejsca (jak np. w przypadku wielokrotnego użycia Kliknij tutaj, Więcej, itp.). Takie hiperłącza mogą zostać nawet uznane za SPAM.

Oczywiście są sytuacje, w których zależy nam na przekierowaniu odbiorcy do danej sekcji czy podstrony z kilku punktów serwisu, np. do zakładki Kontakt. Ale należy wówczas pamiętać, że duża liczba odsłon wcale nie musi przełożyć się na działanie użytkownika, o które nam chodziło, np. skontaktowanie się z naszą firmą w celu otrzymania oferty. Może, natomiast, rozproszyć uwagę odbiorcy.

  • Umiejscowienie linku i fraz kluczowych

Aby uprościć proces odnajdywanie fraz kluczowych w naszych linkach, a tym samym wyszukiwanie istotnych dla użytkownika informacji, powinniśmy w miarę możliwości umieszczać słowa-klucze na samym początku hiperłącza, np. Nowości w sklepie online. Pamiętajmy, jednak, że gdy fraza zaczyna brzmieć nienaturalnie – nie trzymajmy się sztywno tej zasady. Poprawność językowa jest również ważna :). 

Dodatkowo, powinniśmy pamiętać o umiejscowieniu linku na podstronie – im wyżej (np. w sekcji Hero), tym większe prawdopodobieństwo, że użytkownik w niego kliknie. Jest to także istotne pod kątem SEO – hiperłącze zlokalizowane wysoko ma większą wartość dla robotów indeksujących.

  • Dopracowanie wyglądu hiperłącza

Jak już wcześniej było wspomniane, odbiorcy po wejściu na stronę nie czytają 100% treści, a intuicyjnie poszukują interesującego ich tropu informacyjnego. Aby link mógł zostać szybko zauważony, powinien się wyróżniać. Dlatego nie zapominajmy o jego odpowiednim ostylowaniu. Najczęściej jest to podkreślenie i zaznaczenie hiperłącza kolorem niebieskim, ale mamy tu znacznie większe pole do popisu – można zastosować przycisk, ciekawą ikonę, niestandardowy kolor i font – ogranicza nas jedynie nasza wyobraźnia. 

Podsumowanie

Chociaż właściwe tworzenie hiperlinków może początkowo wydawać się czasochłonne i wymagać od nas nieco wysiłku, na pewno zostanie docenione przez użytkownika końcowego – umożliwiając mu łatwiejsze i bardziej trafne wyszukiwanie informacji. Dodatkowo, prawidłowo skonstruowane hiperłącza wpłyną pozytywnie na nawigowanie odbiorcy po poszczególnych sekcjach strony czy aplikacji oraz poprawią ich ogólne działanie.

Projekty

Rzuć okiem na projekty jakie zrealizowaliśmy dla naszych klientów!

Kontakt

Skontaktuj się i uzyskaj bezpłatną wycenę!
;