Projekt przycisku interfejsu użytkownika strony internetowej: 10 trendów i wskazówek
Świetny projekt przycisku jest czymś, o czym większość użytkowników strony nigdy nie myśli… ponieważ gdy działa dobrze, jest prawie niewidoczny. Najlepsze przyciski są łatwe do kliknięcia lub dotknięcia, mają oczywistą funkcję i pomagają użytkownikom w interakcji z projektem bez zastanowienia.
Jest to dość prosta formuła, ale jej zaprojektowanie może być trudne.
Dzisiaj przyglądamy się trendom w projektowaniu przycisków, a także kilka wskazówek, które pomogą Ci zaprojektować przycisk interfejsu użytkownika, który ludzie klikają w kółko. Wzmocnij wygląd swojego przycisku dzięki tym wskazówkom, trendom i pomysłom, które pobudzą inspirację.
Przeglądaj zasoby projektowe
1. Keep It Simple
Wszystko wraca do tego klasycznego wyrażenia w teorii projektowania: Keep It Simple, Stupid (lub Silly, jeśli wolisz).
Wygląd przycisku strony internetowej nie jest inny. Projekt guzików nie musi być zbyt skomplikowany. Powinno być oczywiste i funkcjonalne. Czasami przeszkadzają w tym inne trendy projektowe, które mogą wpływać na konwersje w Twojej witrynie.
Jeśli chodzi o projektowanie guzików, pomyśl tak - i nie przemyśl tego. Przycisk powinien wyglądać jak przycisk. To takie proste.
2. Zapewnij duży kontrast
Prawie równie ważne, jak posiadanie identyfikowalnego przycisku, jest upewnienie się, że jest dobrze widoczny.
Powody, dla których style przycisków duchów na obrazach szybko zyskały na popularności i zanikły, ponieważ przyciski nie miały wystarczającego kontrastu, aby można je było łatwo dostrzec. Użytkownicy nie mogli ich znaleźć od razu.
Nie ukrywaj przycisków o słabym kontraście. Wyróżnij je i krzycz z dużą ilością kontrastu kolorów i przestrzeni, aby wyróżniały się na tle innych elementów na ekranie. Wokół przycisków pozostaw dużo wypełnienia, aby mogły oddychać.
Ułatwia to użytkownikom znajdowanie i identyfikowanie elementów jako klikalnych, a także fizycznie łatwiejsze klikanie bez pomyłkowego uzyskania niewłaściwego elementu.
3. Użyj koloru
Czy zauważyłeś kiedyś, ile przycisków jest czerwonych lub pomarańczowych? To dlatego, że jasne kolory przyciągają uwagę tych elementów i zachęcają do działania.
Używanie koloru jest również dość modną techniką projektowania. Od jasnych kolorów po guziki z prostymi gradientami, kolor może być jednym z łatwiejszych sposobów pomagania ludziom w interakcji z projektem.
4. Napisz mikrokopię, która rodzi oczekiwania
Nie popełnij tego błędu: przycisk z napisem „Kliknij tutaj”. (Jaki to spam?)
Mikrokopia w projekcie przycisku powinna jasno przewidywać, co stanie się z kliknięciem. Powiedz użytkownikom, co otrzymają w następnej kolejności. Może to być tak proste, jak „Prześlij”, aby wprowadzić dane lub kliknięcie linku do „Więcej informacji” lub obejrzenie filmu. Niezależnie od tego, co to jest akcja, powiedz użytkownikom w mikrokopii.
Informacje te mogą pomóc w budowaniu zaufania użytkowników i zwiększeniu konwersji za pomocą działań / interakcji, które użytkownicy uznają za pożądane.
5. Współdziałaj z subtelną animacją
Istnieje tendencja w projektowaniu przycisków, w których strony internetowe używają dwóch przycisków obok siebie. Jeden jest wypełniony, drugi to styl ducha. Obie zawierają animację najechania kursorem, która dodatkowo podkreśla dwie klikalne opcje.
Animacja może pomóc zwrócić uwagę na przyciski, a nawet zachęca do klikania. Powszechnie akceptowanym wzorcem użytkownika jest umieszczanie animacji na przyciskach i zapewnia prostą wskazówkę dla użytkowników, że powinni się zaangażować.
Tylko nie przesadzaj. Wirujące, wirujące, migające przyciski są bardziej irytujące niż pomocne.
6. Zrób to wystarczająco dużym, by dotknąć
Przyciski powinny zawierać klikalne (dotykalne) obszary o średnicy co najmniej 10 milimetrów, a większe są zawsze OK. Ta rada pochodzi z badania przeprowadzonego przez MIT Touch Lab, które dotyczyło rozmiarów podkładek palców w odniesieniu do urządzeń dotykowych.
Spójrzmy na to z perspektywy. Typowy klawisz na fizycznej klawiaturze komputera to 15 milimetrów na 15 milimetrów. To dobry cel. (Tylko nie zapomnij uwzględnić różnych rozmiarów ekranów, aby Twój przycisk nie zgubił się na małych ekranach).
Jeśli potrzebujesz użyć mniejszych przycisków, rozważ dodanie do niego szerokiego promienia kliknięcia. W ten sposób, jeśli użytkownik nie trafi w same przyciski, wokół niego jest wystarczająco dużo miejsca, aby nadal mogła nastąpić pożądana akcja. (Odwiedzający twoją stronę będą ci wdzięczni).
7. Użyj znajomego stylu
Istnieje kilka ogólnych stylów przycisków, które wszyscy znają. Użyj jednego z nich.
- Prostokątny przycisk z kwadratowymi krawędziami i tekstem w środku
- Prostokątny przycisk z zaokrąglonymi krawędziami i tekstem w środku
- Prostokątny wypełniony przycisk z widocznym cieniem (powyżej)
- Prostokątny przycisk ducha
- Proste kółka, najczęściej używane w prawym dolnym rogu, oznaczają wsparcie, pomoc lub czat
8. Umieść w oczekiwanej lokalizacji
Przyciski muszą nie tylko pojawiać się i działać poprawnie, ale także znajdować się w miejscu, w którym użytkownicy będą ich szukać.
- W przypadku stron głównych obejmuje to umieszczenie przycisku poniżej głównego nagłówka lub bloku tekstu. Przyciski są zazwyczaj wyrównane do lewej strony do tekstu lub na środku ekranu.
- W przypadku formularzy przyciski pojawiają się po danych wejściowych. Niektóre pojedyncze formularze wprowadzania wyrównują przycisk w tym samym rzędzie po prawej stronie wejścia.
- Ogólne przyciski wezwania do działania pojawiają się bezpośrednio pod zawartością, do której się odnoszą.
- Przyciski do odtwarzania lub rozpoczynania wideo lub gry często znajdują się na środku ekranu podglądu.
- Przyciski koszyka lub e-commerce znajdują się zazwyczaj w prawym górnym rogu.
9. Nie zapomnij o opinii
Czy przycisk reaguje na interakcję? Upewnij się, że w projekcie interfejsu przycisku znajduje się oczywista pętla zwrotna.
Podaj wizualną lub instruktażową wskazówkę, że przycisk wykonał swoją pracę. Niektóre przyciski będą wymagały więcej pracy niż inne. Przyciski, które prowadzą do innej strony lub witryny, na przykład, informują o tym, że przycisk zadziałał, jeśli ładuje się nowa strona. Przycisk przesłania formularza może wyświetlać na ekranie komunikat „dziękuję”, jeśli informacje zostaną przesłane prawidłowo.
10. Używaj przycisków celowo
Zbyt wiele przycisków powoduje chaos.
Używaj przycisków tam, gdzie mają one sens. Nie przeciążaj projektu przyciskami w każdym miejscu. Użytkownicy nie będą mieli jasnego pojęcia, gdzie i co najważniejsze kliknąć.
Zapisz przyciski do użycia z celami witryny. Powinny one prowadzić użytkowników do elementów, które są najważniejsze w ogólnym projekcie.
Wniosek
Przycisk strony internetowej to element, który przekształca wezwanie do działania w wynik. Poświęć czas na przemyślenie tego projektu, od koloru po funkcję i mikrokopiowanie. Przetestuj projekty przycisków, aby upewnić się, że masz najbardziej funkcjonalną wersję interfejsu.
Jeśli masz przycisk, który działa, nie wpadnij w pułapkę trendów i zmień wygląd. Jeśli chodzi o przyciski, funkcja powinna mieć najwyższy priorytet.
