Dla lepszego projektu UX: czy mogę to kliknąć?

Opublikowany: 2020-02-05

Jak subtelne zmiany mogą zwiększyć Twój CTR

Każdy chce więcej kliknięć. Więcej kranów. Więcej użytkowników mówi „tak, interesuje mnie to, co mi dajesz”. Chcieliśmy przyjrzeć się kilku sposobom, które sprawiają, że użytkownicy chcą więcej klikać, tutaj pojawia się projektowanie UX !

Jest to całkiem dobrze widoczne w całej sieci: kiedy skłaniasz użytkowników do kliknięcia, subtelna zmiana może zajść daleko. Przyjrzeliśmy się, jakie dokładnie mogą być te subtelne zmiany i jaki mogą mieć wpływ na konwersje.

Czcionki

Czcionki mogą mieć szalony, ogromny efekt. Na przykład w 2009 roku Tropicana zmieniła markę w wielkim stylu, a duża część tego polegała na przerobieniu czcionki. Pamiętaj, że czcionka Tropicana to także ich logo.

rebranding tropicany

Obraz za pośrednictwem Vital Design

Sprzedaż szybko spadła o 20%.

Czcionki są również jedną z najbardziej stabilnych rzeczy, na których możesz polegać, gdy zachęcasz ludzi do klikania.

Ogólnie rzecz biorąc, pogrubiona czcionka bezszeryfowa o wysokim kontraście sprawdzi się świetnie.

Czemu? Jest najłatwiejszy do przeczytania. Przykłady tego są w całym Internecie. Basecamp, BaseCRM, Evernote, mHelpDesk – wszystkie te firmy mają tak samo wyglądające CTA – wysoki kontrast, pogrubiona czcionka bezszeryfowa. Łatwo to zobaczyć, łatwo je przeczytać. Dlatego firmy mają tendencję do używania go zamiast czcionek szeryfowych. (To samo dotyczy plakatów – można je czytać od wieków). Ponadto tekst bezszeryfowy jest łatwiejszy do odczytania na komputerze, dlatego chcesz go używać, gdy chcesz, aby czytelnik kliknął – muszą wiedzieć, co mówisz, zanim cokolwiek innego.

Evernotezielony przycisk bezpłatnej wersji próbnejBasecamp gratis przez 2 miesiącemhelpdesk

Cienie + efekty 3D

To niesamowite, jak rzucanie cieni i tworzenie czegoś 3D może skłonić ludzi do kliknięcia. To naprawdę jedna z głównych wad płaskiej konstrukcji. (Obecnie. Drugim jest to, że w końcu będzie szalenie przestarzały.) Kiedy rzeczy są naprawdę płaskie, wyglądają świetnie, ale nie jest tak łatwo określić, co można kliknąć, a co nie. Jakob Nielsen omówił to podczas oceny systemu Windows 8 w 2012 roku.

Ponieważ ludzie klikają więcej, gdy rzeczy wyglądają jak przyciski, zaokrąglone krawędzie lub cień sprawiają, że naprawdę łatwo jest zorientować się, co jest klikalne, a co nie.

(wskazówka dla profesjonalistów: są to tak zwane przyciski w stylu kiosku).

Przycisk To rzeczywiście stanowi interesujący problem. Przyciski w stylu kiosku były pierwotnie używane w arkadach i innych miejscach. Kiedy więc przeszliśmy na technologię cyfrową, ta norma została przeniesiona. To ma sens, ale w pewnym momencie stają się one fazowanymi i trójwymiarowymi przyciskami ze względu na to, że są fazowanymi przyciskami 3D, a nie dlatego, że ktokolwiek pamięta, skąd pochodzą. To jest jak ikona zapisywania dyskietki – skeuomorficzny korzeń w końcu staje się arbitralny i nie jest już skeuomorficzny.

Wszystko po to, aby powiedzieć, że ludzie czują się teraz bardziej komfortowo, klikając przyciski w stylu kiosku, ale możemy zauważyć stopniowy odwrót, jeśli płaska konstrukcja będzie mogła wisieć jeszcze przez kilka lat.

Ruch

Wiele osób skupia się na tworzeniu czegoś, co jest klikalne w 3D, ale myślę, że jest to wystarczająco ważne, aby uzasadnić samą kategorię, po pierwsze z perspektywy UX, a po drugie ze względu na to, co to oznacza dla płaskiego projektu.

Z perspektywy UX

Użytkownicy potrzebują opinii o swoich działaniach. To najlepszy sposób, aby pomóc użytkownikom zrozumieć, gdzie się znajdują i co robić.

Pierwszym zadaniem stworzenia czegoś, co można kliknąć, jest poinformowanie użytkowników, że można to kliknąć.

Jeśli chodzi na przykład o przyciski, nawet najmniejsza zmiana gradientu może zdziałać cuda. Na przykład strona główna Eventbrite wykorzystuje niewielką zmianę gradientu na swoich ikonach, aby pokazać, że można je kliknąć i wzmocnić miejsce, w którym znajduje się użytkownik:

Eventbrite

Innym świetnym przykładem jest strona główna eTecc/Interactive. W rzeczywistości używają wypełnienia, aby poinformować użytkownika, że ​​coś można kliknąć.

To bardzo prosty sposób, aby dowiedzieć się, jak poinformować użytkowników, co można kliknąć, a co nie. A ponieważ rzeczy stają się coraz bardziej płaskie, ta wizualna informacja zwrotna jest coraz ważniejsza. Co dziwne, jest to coś, w czym Apple może poprawić. Sprawdź stronę główną Apple.ca.

Wygląda na to, że linki u góry można kliknąć, a tak jest, i jest niewielka zmiana gradientu, aby potwierdzić tę wiedzę dla użytkownika. Możemy również założyć, że opcja widoku galerii jest również klikalna, i znowu jest zmiana koloru, aby to wzmocnić.

Strona główna Apple2

Problem polega jednak na tym, że można kliknąć cały ekran! Jest to wyjątkowo nieintuicyjne dla użytkownika, a jako ktoś, kto często klika, zajęło mi trochę czasu, aby dowiedzieć się, dlaczego strona ciągle się zmienia. To wcale nie jest intuicyjny interfejs użytkownika.

klikalne jabłko ekranowe

Z płaskiej perspektywy

po prostu kreatywny Więc chociaż Apple nie udało się tego w 100%, są całkiem blisko. Ruch pozwala projektantom na tworzenie płaskich interfejsów, które chcą, jednocześnie informując użytkowników, co można kliknąć, a co nie. Zauważ, że wszystkie przykłady były wyjątkowo płaskie? Pełne ujawnienie zaplanowałem to. Pokazuje, że płaska konstrukcja może działać na przycisk, o ile jest sprzężenie zwrotne.

Oto przykład płaskiego (ish) projektu bez sprzężenia zwrotnego – chociaż jest dla mnie jasne, że jest to przycisk, bez sprzężenia zwrotnego wydaje mi się, że mój komputer nie działa.

Kontrast + Kolor

Niestety, nie ma konkretnego kodu RGB, który gwarantuje ludziom kliknięcie. Ale jest kilka doskonałych zasad, które ci pomogą. Jeśli chcesz, aby użytkownicy coś klikali, chcesz, aby się wyróżniało. Oznacza to, że musisz radykalnie kontrastować z czymkolwiek innym, nawet jeśli oznacza to zerwanie z paletą kolorów marki.

Na przykład David Hamill zaleca używanie koloru dla hiperłączy, który nie jest używany do niczego innego. Na jego stronie każdy link jest zaznaczony na różowo. Użytkownik może łatwo zorientować się, co jest linkiem, a co nie. W połączeniu ze zmianą po najechaniu na nią kursorem jest naprawdę oczywiste dla użytkownika, kiedy możesz coś kliknąć.

David Hamill

Tego rodzaju kwestia koloru i kontrastu najczęściej wiąże się z wezwaniami do działania (CTA) i przyciskami, a niewielka zmiana koloru może spowodować ogromną zmianę zysków. Na przykład Vibethink napisał o CTA i przyciskach i poinformował, że zmiana koloru i kształtu przycisku zwiększyła konwersje (czytaj: kliknięcia) o 35%. Uważali, że zwiększony kontrast ułatwia użytkownikom klikanie.

VibeThink

Ale zmienili dwie rzeczy, więc nie jest to całkowicie naukowe. Hubspot w 2011 roku opublikował wyniki niektórych testów A/B na czerwonych i zielonych przyciskach i stwierdził, że czerwony przycisk przewyższa zielony o 21%.

Punkt centralny

Dlatego kolor i kontrast mogą odgrywać ogromną rolę w zachęcaniu użytkowników do klikania rzeczy.

Zakończyć

Diabeł tkwi w szczegółach. Jako projektanci, programiści, UXerzy i marketerzy, za każdym razem, gdy tworzymy coś, co można kliknąć, prosimy użytkownika o zrobienie czegoś. Kliknij tutaj. Złożyć wniosek. Skontaktuj się z nami. Kup Teraz. Cokolwiek to jest, jest to coś, czego potrzebujemy. Dlaczego więc tego nie uprościć? Najlepszym sposobem, aby pomóc użytkownikom w klikaniu (a tym samym prawdopodobnie pomóc Tobie), jest ułatwienie klikania. Dopasowując przyciski do oczekiwań za pomocą projektu w stylu kiosku, ułatwiając czytanie czcionek na ekranie (nawet jeśli są one małe) oraz dostarczając informacje zwrotne na temat przycisków i zawartości, którą można kliknąć, ułatwiasz życie użytkownikom.

Tak naprawdę. Kiedy tworzysz coś, co można kliknąć, jednocześnie ułatwiaj życie swoim użytkownikom.

Podobał Ci się ten post? Możesz również przeczytać nasz post Zrozum swoich użytkowników, aby ulepszyć swoją witrynę UX Design lub nasze wspaniałe produkty, które każdy projektant UX powinien posiadać !