Wskazówki dotyczące projektowania przycisków: proste, małe i niezwykle ważne
Dużo mówimy o szczegółach w projektowaniu. To nie bez powodu. Zwracanie uwagi na nawet najmniejsze detale może stworzyć lub zepsuć projekt.
Dzisiaj zagłębimy się w jeden z tych szczegółów i przyjrzymy się sposobom projektowania przycisków, które użytkownicy chcą kliknąć (lub puknąć). Chociaż przyciski mogą być jednym z najmniejszych elementów w twoim projekcie, są jednym z najważniejszych. Jak inaczej komunikowałbyś działania użytkownikowi? Jak inaczej dostarczaliby informacje w tej pętli zwrotnej?
Zastanówmy się przez chwilę nad jedną z głównych skarg dotyczących płaskiego projektu na wczesnych etapach: użytkownicy nie wiedzieli, co było, a co nie było interaktywne w projekcie. Dlatego ważna jest świetna stylistyka guzików.
Przeglądaj zasoby projektowe
Powinien wyglądać na dotykalny
Użytkownicy powinni zobaczyć przycisk w projekcie i pomyśleć, że muszą - chcą - wyciągnąć rękę i go dotknąć. Podczas gdy na ekranie można kliknąć prawie dowolny przycisk, rozmiar i wypełnienie wokół przycisku na urządzeniu dotykowym jest bardzo ważne.
Przeciętny użytkownik ma rozmiar palca od 8 do 10 milimetrów. Mając to na uwadze, cel 10 na 10 milimetrów jest doskonałym początkowym rozmiarem docelowym przycisków na urządzeniach dotykowych. (Jest to nieco mniej niż standardowe klawisze na klawiaturze).
Jest kilka rzeczy, które możesz zrobić, aby element wyglądał na dotykalny.
- Subtelny cień może „podnieść” element z tła, aby poczuł się trochę bliżej użytkownika.
- Zwiększone wypełnienie wokół przycisków sprawia, że wydają się łatwiejsze do kliknięcia i pomagają poprowadzić użytkownika do elementu.
- Kolorowe operacje najechania kursorem lub przełączania mogą pokazywać użytkownikom, co robią w czasie rzeczywistym, i oznaczać akcję.
Kolor ma znaczenie
Kolor przycisku musi być wyjątkowy w całym projekcie witryny. To dobre miejsce, aby zastosować konkretny kolor akcentujący i używać go tylko do akcji przycisków.
Kolor przycisku powinien być jasny i wciągający. Istnieje powód, dla którego tak wiele wzorów zawiera żółte, niebieskie lub zielone guziki. Są łatwe do zauważenia i wyróżniają się na tle pozostałych elementów. Dla przycisku, który naprawdę się wyróżnia, wybierz kolor, który jest komplementarną parą do głównego koloru w projekcie (przeciwieństwa na kole kolorów).
Drugim problemem kolorystycznym jest marka. Chcesz wybrać kolor przycisku zgodny z paletą kolorów i tożsamością marki. Bez względu na to, jak bardzo chcesz, aby kolor przycisku wyróżniał się w projekcie, powinien on działać z podstawową kolorystyką, a nie z nią.
Rozmiar ma jeszcze większe znaczenie
Zrób to duże!
Przyciski wymagają nieco podniesienia, aby użytkownicy byli natychmiast przyciągani do nich na ekranie. Trend przycisku z widmem - zarysy bez wyraźnego koloru guzika - skupiał się na dużych przyciskach pod względem liczby pikseli, ale nie miał wizualnej wagi. Pod względem wielkości przycisk musi być duży w obu aspektach. (To jeden z powodów, dla których trend wyszedł z mody).
Jest jednak trudne miejsce, gdy przycisk zmienia się z idealnego rozmiaru na żenująco przewymiarowany. Dokładnie, kiedy to nastąpi, zależy od skali innych elementów projektu, ale na pewno będziesz wiedzieć, kiedy to nastąpi. Jeśli przycisk jest wszystkim, co widzisz w projekcie, istnieje duże prawdopodobieństwo, że jest on zbyt duży.
Umieszczenie jest kluczowe
Gdzie w projekcie powinien iść przycisk? Czy istnieje lokalizacja, która pomoże generować kliknięcia bardziej niż inne?
W większości przypadków przyciski powinny być zgodne z treścią, którą mają uzupełniać.
- Na końcu formularza
- Po prawej stronie komunikatu wezwania do działania
- Na dole strony lub ekranu
- Wyśrodkowany pod wiadomością
Dlaczego te miejsca docelowe? Ponieważ podąża naturalną ścieżką działania i sposobem, w jaki użytkownicy czytają strony internetowe i wchodzą w interakcje.
Skoncentruj się na kontraście
W przypadku wszystkich elementów projektu ważny jest kontrast. Dotyczy to technik zastosowanych w samym elemencie, ale także relacji między elementem i jego umiejscowieniem w projekcie a otoczeniem.
Pamiętaj, aby pomyśleć o następujących technikach w tym podwójnym środowisku:
- Kolor
- Wpisz wagę i rozmiar
- Rozmiar elementów
- Kształt odnosi się do tła
- Przezroczystość lub animacja
- Cienie lub Graidenci
- Biała spacja i wypełnienie
Użyj standardowych kształtów
Jeśli chodzi o przyciski, należy wziąć pod uwagę tylko dwa kształty:
- Koła Okrągły przycisk stał się popularny dzięki koncepcjom projektowania materiałów i materiałów Lite. Przy dowolnej podobnej estetyce okrągły przycisk współpracuje z projektem i pasuje do wzoru użytkownika.
- Prostokąty Ten domyślny kształt powinien być dla wszystkich przycisków, chyba że używasz koła w powyższej instancji. To jest to, co użytkownicy wiedzą i są przyzwyczajeni. Większość prostokątów przycisków ma zwykle co najmniej dwa razy większą szerokość (czasami trzy lub cztery razy większą szerokość). Użytkownicy widzą ten kształt i od razu wiedzą, co robić. Chociaż niektórzy mogą argumentować za zaletami zaokrąglonych narożników w porównaniu do kątów 90 stopni, oba są równie odpowiednie w zależności od stylu projektowania.
Powiedz użytkownikom, co mają robić
Każdy przycisk powinien zawierać instrukcję tekstową, która mówi użytkownikom dokładnie, co zrobi przycisk. Chcesz, aby język był krótki i prosty i powinien pasować do reszty projektu witryny.
Następnie wypełnij tę obietnicę. Następna rzecz, która się pojawi, powinna poinformować użytkownika, że dotarli do oczekiwanego miejsca docelowego. Niezależnie od tego, czy przesyła formularz, dokonuje zakupu, czy po prostu przechodzi do innego linku, użytkownik powinien uzyskać pożądany wynik z interakcji z przyciskiem. (Jeśli nie, upewnij się, że wystąpił błąd w pętli sprzężenia zwrotnego, abyś wiedział, jakie poprawki należy wprowadzić w projekcie witryny).
Przykłady komunikatów przycisków obejmują:
- Kliknij tutaj
- Utwórz konto teraz
- Spróbuj za darmo
- Dodaj do koszyka
- Czytaj więcej
Nadaj przyciskom duży wpływ na wygląd
Większość projektów jest wypełniona małymi elementami interfejsu użytkownika. Jedną z pułapek, które się zdarzają, jest przepychanie projektu tych elementów, aż projekt jest prawie ukończony. Następnie wybierasz jeden projekt dla wszystkich elementów interfejsu użytkownika, z kilkoma niewielkimi różnicami.
Nie utknij w tej niebezpiecznej sytuacji.
W projekcie przyciski powinny wyglądać jak tylko przyciski! Nic innego w projekcie nie powinno mieć tego samego kształtu, koloru i wagi wizualnej jak przycisk. Muszą być inni. Pomyśl o stworzeniu stylu dla przycisków, który będzie większy niż jakikolwiek inny podobny element w projekcie, lub użyj akcentującego koloru, który jest tylko dla przycisków. Dzięki tym technikom przycisk może wyglądać wyjątkowo i podkreślać jego użycie.
Wniosek
Czy zaczynasz ponownie zastanawiać się nad niektórymi opcjami projektowania przycisków? Czy uważasz, że możesz stworzyć coś, co lepiej zachęci do kliknięć?
Wypróbuj niektóre z tych wskazówek, jednocześnie obserwując analitykę witryny, aby dokładnie zobaczyć, na jakie zmiany projektowe reaguje baza użytkowników. Skorzystaj z tych informacji, aby stworzyć jeszcze bardziej klikalne przyciski dla przyszłych projektów.
