--- title: "Hiperłącza a dobre praktyki UX" description: "Dlaczego „Kliknij tutaj” szkodzi użyteczności, dostępności i SEO oraz jak pisać linki konkretnie, bez powtórzeń i ze słowem kluczowym na początku." url: https://fluostudio.pl/hiperlacza-a-dobre-praktyki-ux/ --- # Hiperłącza a dobre praktyki UX 6 minut czytania Spis treści Czytaj artykuł ![Acer: lista materiałów sprzedażowych z wyszukiwarką, zaznaczaniem i przyciskiem „Download selected”](https://fluostudio.pl/media/projekty/acer/hub-zywy-pobieranie.webp) [Realizacja Acer](https://fluostudio.pl/projekty/acer/) ## 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](https://fluostudio.pl/uslugi/strony-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](https://en.wikipedia.org/wiki/Information_foraging#History_of_the_theory)” (*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. ### Dobry link i zły link Ogólnikowe, mało konkretne frazy znacząco wpływają na pogorszenie [użyteczności](https://fluostudio.pl/uslugi/product-design/ui-ux-design/), 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. ##### Podziel się wpisem: [](https://www.facebook.com/sharer/sharer.php?u=https://fluostudio.pl/hiperlacza-a-dobre-praktyki-ux/)[](https://www.linkedin.com/sharing/share-offsite/?url=https://fluostudio.pl/hiperlacza-a-dobre-praktyki-ux/)[](https://twitter.com/intent/tweet?text=Popularne%20przyciski%20U%C5%BCytkownik%20serwisu%20internetowego%20powinien%20m%C3%B3c%20korzysta%C4%87%20z%20niego%20bez%20wysi%C5%82ku%2C%20z%20%C5%82atwo%C5%9Bci%C4%85%20odnajdywa%C4%87%20interesuj%C4%85ce%20go%20informacje%20i%20bez%20problemu%20porusza%C4%87%20si%C4%99%20mi%C4%99dzy%20istotnymi%20dla%20siebie%20podstronami.%20Proces%20ten%20zdecydowanie%20usprawniaj%C4%85%20przyciski%20z%20hiper%C5%82%C4%85czami.%20S%C4%85%20powszechnie%20stosowane%20na%20stronach%20www%20oraz%20w%20aplikacjach%20mobilnych.%20Czy%20jednak%20ka%C5%BCdy%20zastosowany%20przycisk%20jest%20pomocny%3F%20Czy%20mo%C5%BCe%20wprowadza%20niepotrzebny%20szum%20informacyjny%3F%20Jak%C4%85%20tre%C5%9B%C4%87%20powinien%20zawiera%C4%87%2C%20poza%20cz%C4%99sto%20u%C5%BCywanym%20i%20niezbyt%20wiele%20m%C3%B3wi%C4%85cym%20%E2%80%A6%20https%3A%2F%2Ffluostudio.pl%2Fhiperlacza-a-dobre-praktyki-ux%2F) ## Z naszych realizacji [Wszystkie projekty](https://fluostudio.pl/projekty/) [Acer Ponad 1200 zleceń dla pięciu rynków Acer, od banerów dla sieci handlowych po portal dla partnerów Acer UK.](https://fluostudio.pl/projekty/acer/) ## Ze słownika pojęć [Wszystkie hasła](https://fluostudio.pl/baza-wiedzy/slownik/) - [CTA](https://fluostudio.pl/baza-wiedzy/slownik/cta/) - [UX writing](https://fluostudio.pl/baza-wiedzy/slownik/ux-writing/) ## Must see Być może zaciekawią Cię również... [Wszystkie wpisy](https://fluostudio.pl/blog/) 10 min czytania Projektowanie ### [Minimalizm w projektowaniu stron – dlaczego mniej znaczy więcej?](https://fluostudio.pl/minimalizm-w-projektowaniu-stron-dlaczego-mniej-znaczy-wiecej/) 8 min czytania Projektowanie ### [Trendy w projektowaniu stron 2024: ekspercki przegląd](https://fluostudio.pl/trendy-w-projektowaniu-stron-2024-ekspercki-przeglad/) 14 min czytania Projektowanie ### [Projektowanie z użytkownikiem w centrum uwagi – podstawy skutecznego UX](https://fluostudio.pl/projektowanie-z-uzytkownikiem-w-centrum-uwagi-podstawy-skutecznego-ux/) ## Projekty Rzuć okiem na projekty jakie zrealizowaliśmy dla naszych klientów! [Zobacz prace](https://fluostudio.pl/projekty/) ## Kontakt Skontaktuj się i uzyskaj bezpłatną wycenę! [Skontaktuj się](https://fluostudio.pl/kontakt/)