Podstawowe zasady projektowania przycisków

Przyciski są kluczowym elementem projektowania interakcji. Pełnią one bowiem pierwszorzędną rolę w konwersacji między użytkownikiem a systemem. W tym artykule przedstawię siedem podstawowych zasad, które trzeba znać, aby tworzyć efektywne przyciski. 

1. Spraw, aby przyciski wyglądały jak przyciski

Jeśli chodzi o interakcje z interfejsem użytkownika, dobrze jest wiedzieć, jaki element jest „klikalny”, a jaki nie. Każdy element w designie wymaga zaangażowania użytkownika, ponieważ trzeba go rozszyfrować. Ogólnie rzecz biorąc, im więcej czasu poświęcasz na rozszyfrowanie interfejsu, tym mniej staje się on użyteczny.

Ale w jaki sposób użytkownicy postrzegają interaktywność danego elementu? Używają wcześniejszych doświadczeń i wizualnych wskazówek, aby wyklarować sobie znaczenie obiektu UI. Dlatego tak istotne jest używanie wizualnych wskazówek (takich jak rozmiar, kształt, kolor, cień i tak dalej), aby upodobnić dane elementy do fizycznego przycisku. Właściwości wizualne mają kluczowe znaczenie informacyjne — pomagają stworzyć afordancje w interfejsie. 

Niestety, w wielu interfejsach elementy wskazujące na interaktywność są słabe i wymagają wysiłku ze strony użytkownika: rezultatem jest niestety redukcja czytelności. Jeśli nie ma przejrzystych afordancji interakcji i użytkownicy mają problem z rozpoznaniem tego, co jest „klikalne”, a co nie, to nie będzie miało znaczenia, jak fajny będzie design. Jeśli ciężko się czegoś używa, doświadczenie będzie frustrujące, a interfejs bezużyteczny.

Słabe wskazówki wizualne to nawet większy problem dla użytkowników urządzeń mobilnych. Starając się zrozumieć, czy dany element jest interaktywny, czy nie, użytkownicy komputerów mogą przesunąć na niego kursor i sprawdzić, czy coś się zmienia. Użytkownicy urządzeń mobilnych nie mają takiej możliwości i aby zobaczy czy dany element jest interaktywny, to na telefonie lub tablecie trzeba w niego stuknąć palcem — niestety nie ma tu innego sposobu.

Nie zakładaj, że jeśli Ty coś rozumiesz, to inni też zrozumieją

W wielu przypadkach, projektanci specjalnie nie starają się podkreślić, że przyciski to elementy interaktywne, ponieważ zakładają, że będzie to oczywiste dla użytkowników. Podczas tworzenia interfejsu, powinno się jednak pamiętać o następującej rzeczy: 

Ponieważ to Ty projektujesz interfejs, wiesz lepiej od użytkownika, co dany przycisk ma robić. 

Używaj znanych schematów 

Oto przykłady przycisków, które rozpozna większość użytkowników:

• Kwadratowy przycisk wypełniony kolorem
• Okrągły przycisk wypełniony kolorem
• Wypełniony kolorem przycisk z cieniami po bokach
• Przezroczysty przycisk z wyróżniającą się ramką

Pośród tych wszystkich przykładów, „wypełniony kolorem przycisk z cieniami” jest najbardziej czytelny dla użytkowników. Kiedy widzimy wypukłość danego obiektu, od razu wiemy, że jest to coś, na co mamy nacisnąć.

Nie zapominaj o pustej przestrzeni

Nie tylko właściwości samego przycisku są tutaj istotne. Ilość pustej przestrzeni wokół przycisku sprawia, że jest on łatwiejszy lub trudniejszy do zrozumienia. W poniższym przykładzie, użytkownicy mogą mieć problem ze zrozumieniem, czy ten przezroczysty przycisk z wyróżniającą się ramką to przycisk, czy pole informacyjne. 

Jako użytkownik, ciężko powiedzieć, czy to pole, czy przycisk. 

2. Ustaw przyciski tam, gdzie użytkownik spodziewa się je znaleźć

Przyciski powinny znajdować się tam, gdzie użytkownicy mogą je bez problemu znaleźć. Nie doprowadzaj do tego, że będą oni musieli na nie “polować”. Jeżeli nie możesz czegoś znaleźć, to skąd masz wiedzieć, czy to istnieje?

Używaj tradycyjnych layoutów i standardowych wzorców UI

Konwencjonalne rozmieszczenie przycisków ułatwia użytkownikowi ich wykrywanie. Ze standardowym layoutem, użytkownicy szybko zrozumieją cel danego elementu — nawet jeśli przycisk nie ma silnych cech wskazujących na to, że jest klikalny. Połączenie standardowego layoutu z przejrzystym designem i dużą ilością białej przestrzeni sprawi, że układ elementów na stronie będzie łatwiejszy do zrozumienia.

Nie każ użytkownikom polować na przyciski. 

Wskazówka: przetestuj swój design pod kątem łatwości wykrywania funkcja. Kiedy użytkownicy po raz pierwszy pojawią się na stronie, która ma jakieś zadania, które chcesz, żeby wykonali, odpowiedni przycisk powinien być widoczny.

3. Oznacz przyciski według tego, co mają robić

Przyciski z ogólnymi albo mylącymi etykietami mogą być bardzo frustrujące. Napisz takie oznaczenie, które dokładnie obrazuje to, co przycisk robi. Idealnie by było, aby wybrać słowo, które znaczeniowo skupia wokół siebie daną czynność. 

Użytkownicy powinni z łatwością pojąć, co się stanie, jeśli coś nacisną. Oto prosty przykład: wyobraź sobie, że przez przypadek uruchomiłeś usuwanie i widzisz taki oto błąd:

“OK” jest raczej nieczytelne i nie mówi za dużo.

Nie jest jasne, co ‘OK’ i ‘Cancel’ tutaj oznaczają. Większość użytkowników zada sobie następujące pytanie: „co się stanie, jeśli nacisnę ‘Cancel’”?

Nigdy nie zaprojektowałem przycisku, czy okna dialogowego, które zawierało tylko ‘OK’ i ‘Cancel’.

Zamiast pisać ‘OK’, lepiej jest nazwać przycisk ‘Remove (czyli ‘Usuń’). Stanie się wtedy czytelny. Co więcej, jeśli usunięcie czegoś to potencjalnie ryzykowna operacja, możesz użyć czerwonego koloru, aby to zasygnalizować. 

‘Remove’ sprawia, że wiemy, co ten przycisk robi.

Przycisk „Disable Card” jest koloru czerwonego, aby zasygnalizować, że akcja jest niebezpieczna. Źródło obrazka: Ramotion

4. Odpowiednio dobierz rozmiar przycisków

Rozmiar przycisku powinien odpowiadać priorytetowi akcji, jaką wykonuje. Im większy przycisk, tym ważniejsza akcja. 

Określ priorytet przycisków 

Spraw, aby najważniejszy przycisk rzeczywiście wyglądał jak najważniejszy — postaraj się, aby był najbardziej widoczny. Ważne jest zwrócenie uwagi użytkownika, także zwiększ rozmiar i użyj kontrastujących kolorów.

Dropbox używa kontrastujących rozmiarów i kolorów, aby skupić uwagę użytkownika na przycisku call-to-action, „Wypróbuj usługę Dropbox dla firm za darmo”.

Spraw, aby przycisk dobrze się klikało palcem na urządzeniach mobilnych

W wielu aplikacjach mobilnych przyciski są niestety za małe. Prowadzi to często do sytuacji, w której użytkownik wybiera inną czynność, niż chciał. 

Po lewej: przyciski o odpowiednim rozmiarze. Po prawej: przyciski, które są za małe. Źródło obrazka: Apple

Badanie przeprowadzone przez MIT Touch Lab wykazało, że średnia rozmiaru opuszków palców zawiera się między 10-14mm, a koniuszki palców zawierają się średnio między 8-10mm. To sprawia, że 10mm x 10mm to odpowiedni minimalny rozmiar dla przycisku. 

Źródło obrazka: UX Magazine

5. Zwróć uwagę na kolejność

Kolejność przycisków powinna odzwierciedlać naturę konwersacji między użytkownikiem a systemem. Zadaj sobie pytanie: w jakiej kolejności użytkownicy spodziewają się zobaczyć przyciski na ekranie? 

UI polega na rozmowie z użytkownikami. 

Na przykład, jak ustawić przyciski ‘Poprzedni/Następny’ w paginacji? Logicznym jest fakt, że przycisk, który poruszy Cię w interfejsie do przodu, powinien być na prawo, a przycisk, który Cię cofnie — na lewo.

6. Unikaj używania zbyt wielu przycisków

To spory problem wielu aplikacji i stron internetowych. Kiedy mamy za dużo opcji, użytkownik w końcu nie robi nic. Projektując strony w swojej aplikacji lub na witrynie internetowej, pomyśl o najważniejszych akcjach, które użytkownik chce zrobić.

7. Zapewnij wizualny lub dźwiękowy feedback interakcji

Kiedy użytkownicy klikną lub uderzą palcem w jakiś przycisk, spodziewają się, że interfejs jakoś odpowie. Biorąc pod uwagę typ operacji, może to być feedback wizualny lub audio. Kiedy użytkownik nie dostaje żadnej odpowiedzi zwrotnej, może pomyśleć, że system nie otrzymał żadnej komendy i powtórzy swoją akcję. Takie zachowanie często powoduje niepożądane operacje. 

Czemu tak się dzieje? Jesteśmy ludźmi i spodziewamy się jakiejś odpowiedzi zwrotnej po naszej interakcji z danym obiektem. Może być ona wizualna, dźwiękowa lub namacalna — właściwie cokolwiek, co da nam do zrozumienia, że akcja została zarejestrowana.

UI daje wizualną odpowiedź zwrotną sygnalizującą, że akcja została zarejestrowana. Źródło obrazka: Vadim Gromov.

Dla niektórych operacji, takich jak pobieranie, warto nie tylko dać odpowiedź zwrotną, ale również pokazać obecny stan procesu. 

Przycisk zamienia się we wskaźnik postępu, aby pokazać aktualny stan operacji. Źródło obrazka: Colin Garven 

Podsumowanie

Pomimo faktu, że przyciski są zwyczajnym elementem projektowania interakcji, warto poświęcić mu odpowiednią ilość czasu, aby efekt był możliwie jak najlepszy. W projektowaniu UX przycisków zawsze powinno chodzić o przejrzystość i klarowność. 

Dzięki!