Link czy przycisk?

W projektowaniu spotkasz różne dylematy. Jednym z nich jest pytanie: co jest lepsze i bardziej dostępne: link czy przycisk? Co na to wszystko mówią wytyczne na temat dostępności?

👉 Akcja czy przejście dalej?

Znaną regułą, którą polecam jest taki schemat:

  • jeśli to akcja, zastosuj przycisk np. przesłanie formularza, zakup produktu. Przyciski są stosowane do działań, które wpływają na front-end lub back-end witryny
  • jeśli użytkownik gdzieś idzie, zastosuj link np. przy nawigacji. Czyli użytkownik zmienia fokus przeglądarki (np. zostaje przekierowany na podstronę), ale jednocześnie nie wpływa na działanie witryny lub aplikacji.

Podam Ci przykład elementu, na którym fajnie widać powyższą regułę. Jest to okno logowania. Akcja w postaci zaloguj się, zazwyczaj jest pokazana w formie przycisku. Po zalogowaniu, backend się zmienia, użytkownik jest zalogowany.

Natomiast przy formularzu widzisz też hasło “Zapomniane hasło?”, które pokazane jest w formie linku. Po kliknięciu przenosi użytkownika na stronę z odzyskiwaniem hasła, zatem jest to forma nawigacji, które nie wpływa na to co się dzieje w projekcie.

👉 Wyjątki od reguły

Schematy projektowanie swoje, a życie swoje. Na etapie projektowania spotkasz wiele sytuacji, w których wybór nie będzie oczywisty.

Za przykład weźmy wyskakujące okienko, gdzie widzisz trzy możliwe hiperłącza do kliknięcia. Wszystkie wykonują jakąś akcję:

  • Zapisz
  • Edytuj
  • Anuluj

Tak więc według powyższych wytycznych, powinno się zastosować przyciski, wszak wszystkie wykonują jakąś akcję. Ale wyobraź sobie 3 przyciski obok siebie, na tak małym obszarze.

Użytkownik w tym momencie zostaje przeciążony przyciskami i jego orientacja maleje. Owszem, możesz zmienić stylistykę każdego z nich i stworzyć hierarchię ważności na przyciski pierwszorzędne, drugorzędne.

Idąc dalej wyobraź sobie sytuację, gdy masz 10 lub więcej łączy obok siebie, które wykonują akcję. Przykładem może być tabela, gdzie przy każdym wynik łącze: edytuj, wymaż, wyślij. Gdyby zastosować tutaj wyłącznie przyciski, stworzyłby się straszny bałagan.

Rozwiązaniem tej sytuacji jest rozróżnienie ważności linków akcji. Zastosuj przycisk dla ważnej akcji, czyli działań pierwszoplanowych, natomiast linki dla akcji drugo lub trzecioplanowych. Może to wyglądać tak:

  • Zapisz – przycisk pierwszorzędny
  • Edytuj – przycisk drugorzędny
  • Anuluj – link

Jak widzisz trzymanie się sztywno reguł, nie zawsze jest dobrym rozwiązaniem. Kilka przycisków obok siebie znacznie zwiększa obciążenie poznawcze, a to przytłacza nasz mózg, który często broni się ucieczką.

👉 Ux czy marketing?

Dla równowagi podam Ci też przykład, gdzie wybór przycisku w linku nawigacyjnym może być lepszym rozwiązaniem. Przynajmniej z marketingowego punktu widzenia.

Przykładem może być górna sekcja hero, gdzie zazwycaj znajduje się główny przycisk akcji np. Zobacz więcej.

Zgodnie z regułą, zobacz więcej, to łącze nawigacyjne, prowadzi do podstrony. Zatem należałoby tu zastosować link. Jednak z punktu widzenia marketingowego, zależy Ci, by główna akcja jaką jest zobacz więcej była widoczna. Zatem zastosujesz tu przycisk.

A może zainteresują Cię…

Ebook przeprojektowani

Naucz się projektować interfejsy biorąc pod uwagę ich wygląd oraz użyteczność.

Ebook idealny landing page

Jak zwiększyć konwersję strony docelowej poprawiając ux/ui oraz webwriting.

Książka + ebook o formularzach

Łatwe, przyjemne, dostępne, konwertujące. Takie mogą być Twoje formularze.

Zestaw UX writing

Twórz mikrokopię, którą pokochają użytkownicy. Ebook, framework, kurs.

Ebook WCAG + UX

Praktyczna wiedza o dostępności i doskonaleniu wrażeń użytkownika.

Ebook o pisaniu

Opowiadaj. Pokaż problemy. Podaj rozwiązania. Zachęć do działania.

Rzuć też okiem na:

Menu