Obiecałam więcej tematów z obszaru UI, więc dziś opowiem wam o pewnym, dość podstawowym elemencie interfejsu graficznego. Button, przycisk, czyli o tym w co klikamy. Jest też film na kanale na ten temat, jeśli wolicie oglądać i słuchać.
Button czy przycisk?
Po pierwsze, jaką nazwę stosować? W branży IT i w branży projektowej często stosuje się wymiennie polskie i angielskie określenia. Więc zarówno angielski button i polski przycisk będą zrozumiałe dla innych projektantów czy developerów, z którymi będziecie pracować. Trochę inaczej może być z klientami i może okazać się, ze button będzie jednak kojarzył się bardziej ze snickersem, niż czymś na stronie internetowej. Więc tu ostrożnie!
Co tak naprawdę będzie tym przyciskiem?
O przycisku mówimy, kiedy myślimy o elemencie interfejsu, który pozwala za pomocą jednego ruchu wykonać jakąś akcję albo dokonać wyboru. Oczywiście jest to bardzo ogólne określenie i jest sporo innych komponentów, które pozwalają na to samo, a których już przyciskami raczej nie nazwiemy. Przyciski używane są po to, by np. dodać produkt do koszyka w sklepie internetowym, wysłać maila by dołączyć do newslettera na blogu, polajkować post na FB, czy wyrazić zgodę na coś, co pojawiło się w pop upie.
Rodzaje przycisków
Możemy wyróżnić kilka typów przycisków:
Klasyczne CTA – tu miałam problem żeby znaleźć dla nich nazwę. To wszystkie te standardowo wyglądające przyciski, prostokątne, z zaokrąglonymi rogami lub bez, które składają się z jakiegoś tła i napisu. Mogą mieć gradient, mogą mieć cień albo jakiś inny efekt, ale spośród wszystkich przycisków w projekcie, wyglądają na te najważniejsze.
Ghost buttons – te chyba nie mają dobrego polskiego tłumaczenia. Ale to takie przyciski, które trochę wtapiają się w tło strony i często odgrywają rolę przycisku drugorzędnej akcji. Z reguły jest to przezroczysty przycisk (bądź półprzezroczysty) z ramką i tekstem w środku. Zestawione z klasycznym CTA nie będą rzucać się tak bardzo w oczy, ale wciąż będą wyglądać jak przyciski.
Tekstowe – czyli pozbawione elementów graficznych i opierające się tylko na napisie (mogą być wzbogacone ewentualnie o jakąś ikonę).
Floating (FAB floating action button) – odkąd został wprowadzony do Material Design, możemy spotkać go nie tylko w aplikacjach na Androida. Floating button ma najczęściej formę koła z ikoną w środku. Oczywiście sam Material zakłada inne warianty (tu możecie je zobaczyć), więc nie musi być to koło, ani sama ikona. Taki przycisk z reguły pojawia się jako najważniejsza akcja na ekranie i pływa przypięty w jednym miejscu (np. prawym dolnym rogu ekranu).
W zależności od artykułu czy książki, do których sięgniecie, w typach przycisków możecie znaleźć jeszcze takie komponenty jak Switche czy Toggle Buttony. Te traktuje już jako osobne elementy interfejsu i w moim odczuciu zasługują po prostu na osobny materiał.
Dobre praktyki
No dobra, wiemy już jakiego typu przyciski możemy spotkać w interfejsie, porozmawiajmy chwilę o ich stylach i tym, na co zwrócić uwagę, jeśli takie przyciski tworzymy.
Wizualizacja
Przycisk powinien wyglądać jak przycisk i może brzmi to trochę absurdalnie, ale ta zasada jest często łamana. Bardzo łatwo popełnić błąd przy stosowaniu tekstowych przycisków, które np. nie wyróżniają się wizualnie od zwykłego tekstu. No i wiecie, na pierwszy rzut oka, użytkownik może nie zobaczyć, że jest jakaś akcja do wykonania i np. opuści naszą stronę.
Przyciski w niedługiej historii projektowania interfejsów graficznych przeszły ciekawą drogę i tak jak wszędzie, są pewne trendy i mody, które przemijają i po jakimś czasie wracają. Pierwsze przyciski w interfejsach mocno nawiązywały do rzeczywistych przycisków, z którymi użytkownik mógł spotkać się w codziennym życiu. I im więcej mogliśmy osiągnąć za pomocą kodu, a tym samym stylować elementy interfejsu, tym bardziej potrafiły przypominać prawdziwe przedmioty. I tu warto wspomnieć o zjawisku skeumorfizmu, czyli próbie odtworzenia pewnych właściwości (tu wizualnych), z rzeczywistych przedmiotów i przełożenia ich na te wirtualne.
Po jakimś czasie efekciarstwo nam się znudziło i projekty interfejsów zaczęły się odchudzać. Nadszedł minimalizm, flat design i ich pochodne, natomiast jak wspomniałam, trendy się zmieniają i za jakiś czas, być może znowu trafimy na skeumorficzne przyciski…
Użyteczność
Oprócz tego, że dążymy do tego, żeby pokazać użytkownikowi, że przycisk to coś interaktywnego, musimy mu jeszcze umożliwić tę interakcję. Znaczenie będzie miała na przykład wielkość przycisku – im mniejszy, tym ciężej będzie na niego trafić np. kursorem myszy albo palcem przy ekranie dotykowym. Ważne jest również umiejscowienie przycisku na ekranie oraz odległości przycisku względem innych elementów. To ważne zawłaszcza, gdy pojawia się obok innych elementów interaktywnych (jak na przykład pola formularzy).
Informacja
Jeżeli użytkownik namierzy już przycisk musi wiedzieć, co może za jego pośrednictwem osiągnąć. Tu ważna jest informacja, która w tym przycisku się znajdzie. Warto poświęcić tak samo dużo czasu na zastanowienie się nad treścią akcji, jak nad samą jej wizualizacją.
Starajmy się informować użytkownika, czego może się spodziewać po kliknięciu przycisku. Na przykład zamiast kliknij tutaj, może lepszą frazą będzie pobierz plik, przejdź do strony głównej, dodaj do koszyka itd.
Na koniec – Prawo Fittsa
Paul Fitts, czyli twórca prawa Fittsa, stworzył model, który określa w jakim czasie człowiek wchodzi w interakcję z jakimś elementem. Prawo Fittsa mówi więc o tym, że czas jaki potrzebny jest do wykonania tej akcji, będzie zależny od wielkości obiektu, z którym mamy wejść w interakcję i odległości w jakiej znajduje się ten obiekt od użytkownika.
Sprowadza się to po prostu do tego, że jeśli mamy duży przycisk, który znajduje się bliżej użytkownika będzie prostszy do wciśnięcia, niż ten, który będzie mały i bardzo oddalony. W praktycznym zastosowaniu staramy się umieścić przyciski np. blisko pól formularza, który wypełniamy.
Na dzisiaj to tyle. Dajcie znać czy tematy UIowe was interesują i czy powinny częściej pojawiać się na blogu! Jeżeli interesuje was UI, zerknijcie też do tej kategorii wpisów, o tu: podstawy UI i UX.
