Zacznij od zadania, które ma wykonać użytkownik
Przycisk służy do wykonania działania: wysłania formularza, rozwinięcia menu czy dodania produktu do listy. Zanim zdecydujesz o jego wyglądzie, ustal, co stanie się po naciśnięciu. Jeśli element prowadzi po prostu do innej podstrony, zwykle czytelniejszym wyborem jest link. Taki podział pomaga zachować przewidywalność strony, również dla osób korzystających z technologii wspomagających.
Tekst na przycisku powinien nazywać działanie. „Wyślij wiadomość” mówi więcej niż „Kliknij tutaj”, a „Pokaż więcej usług” jest jaśniejsze niż samo „Więcej”. Na stronie firmowej szczególnie ważne jest odróżnienie głównego działania, na przykład kontaktu, od pobocznych opcji. Nie oznacza to jednak, że każdy przycisk musi mocno przyciągać uwagę. Gdy wszystkie wyglądają jak najważniejsze, trudniej wybrać właściwy.
Zadbaj o wygodny obszar naciskania
Na ekranie dotykowym użytkownik naciska palcem, a nie precyzyjnym kursorem. Dlatego liczy się cały obszar reagujący na dotyk, nie tylko widoczny napis lub ikona. Mały symbol można umieścić w większym polu przycisku, zachowując jego spokojny wygląd. Warto też zapewnić trochę miejsca wewnątrz przycisku: tekst nie powinien przylegać do krawędzi.
Sprawdź osobno krótkie i długie etykiety. Przycisk, który dobrze wygląda z napisem „Dalej”, może stać się ciasny przy „Przejdź do podsumowania”. Pozwól tekstowi zmieścić się bez ucinania; na wąskim ekranie przycisk może być szerszy albo jego napis może przejść do drugiego wiersza. Ważniejsze od identycznych wymiarów wszystkich przycisków jest to, by każdy dało się wygodnie odczytać i nacisnąć.
Oddziel sąsiednie działania
Nawet duże przyciski mogą sprawiać kłopot, jeśli stykają się z innymi elementami, które też można nacisnąć. Zostaw wyraźną przerwę między przyciskami, linkami i polami formularza. Dotyczy to zwłaszcza par takich jak „Usuń” i „Anuluj” oraz ikon umieszczonych blisko krawędzi ekranu. Odstęp zmniejsza ryzyko przypadkowego wyboru, a jednocześnie porządkuje wygląd strony.
Nie trzeba jednak rozszerzać każdego przycisku na całą szerokość. W formularzu jeden szeroki przycisk kończący zadanie może być wygodny, ale kilka dużych przycisków ustawionych jeden pod drugim zajmie dużo miejsca i utrudni szybkie rozpoznanie opcji. Grupuj działania, które do siebie należą, i wyraźnie oddzielaj je od pozostałej treści. Na telefonie sprawdź także, czy przyciski nie zasłaniają formularza lub ważnych informacji podczas przewijania.
Pokaż, kiedy przycisk jest aktywny
Przycisk musi wyglądać na element, z którym można wejść w interakcję. Pomaga w tym czytelny tekst, wyraźna granica albo tło odróżniające go od otoczenia. Sam kolor nie powinien być jedyną wskazówką dotyczącą funkcji czy stanu. Jeśli przycisk jest niedostępny, warto wyjaśnić użytkownikowi, czego brakuje do wykonania działania, zamiast pozostawiać go z niejasnym, przygaszonym elementem.
Pamiętaj także o osobach obsługujących stronę klawiaturą. Gdy przechodzą między elementami klawiszem Tab, powinny widzieć, który przycisk jest aktualnie wybrany. Widoczne obramowanie lub inny wyraźny wskaźnik zaznaczenia ułatwia orientację. Po naciśnięciu przycisku strona powinna dać zrozumiały sygnał, co się wydarzyło — na przykład pokazać potwierdzenie wysłania formularza albo informację o błędzie.
Przetestuj projekt poza widokiem edytora
Najprostszy test wykonasz na własnym telefonie. Otwórz stronę i spróbuj wykonać typowe zadania bez powiększania widoku: znaleźć ofertę, otworzyć menu, przejść do kontaktu i wysłać formularz. Zwróć uwagę, czy trafiasz w wybrany przycisk za pierwszym razem oraz czy sąsiednie elementy nie przeszkadzają. Powtórz próbę przy dłuższym tekście, na przykład gdy etykieta przycisku zajmuje więcej miejsca.
Następnie przejdź przez te same działania klawiaturą. Sprawdź kolejność przechodzenia między elementami, widoczność zaznaczenia i to, czy da się uruchomić przyciski bez myszy. Jeśli coś wymaga szczególnej ostrożności albo domyślania się znaczenia ikony, popraw projekt przed publikacją. Wygodne przyciski nie muszą być efektowne: powinny po prostu pomagać użytkownikowi sprawnie dokończyć zadanie.
