Jak wykorzystać elementy projektu, aby zwiększyć konwersje?

Chcesz zwiększyć konwersje w swojej witrynie? Oczywiste zmiany obejmowałyby wezwanie do działania, wymyślenie czegoś bardziej kuszącego i angażującego. A może same materiały marketingowe i promocyjne. W końcu, jeśli zainteresujesz ludzi, zanim trafią do Twojej witryny, na pewno dokonają konwersji, prawda?

Właściwie możesz być zaskoczony wiedząc, że wszystko zaczyna się od projektu. Bez wątpienia znasz podstawy jako menedżer ds. marketingu lub właściciel małej firmy. Z tą samą koncepcją masz do czynienia przy wyborze logo, kolorów i motywu oraz przy wyposażaniu swojego sklepu stacjonarnego. Wszystko sprowadza się do prezentacji i wrażeń, które zapewniasz swoim gościom.

Prawie połowa konsumentów (46,1%) Feel Design to najlepszy sposób, aby zdecydować, czy firma lub marka są wiarygodne. Poza tym ludzie po prostu porzucą Twoją witrynę, jeśli jest brzydka – łącznie 38% wszystkich odwiedzających , byc dokładnym.

Jaki jest zatem najlepszy sposób, aby upewnić się, że witryna jest atrakcyjna, jednocześnie zwiększając potencjał konwersji? Odpowiedzią jest szanowanie podstawowych zasad projektowania: koloru, rozmiaru, przestrzeni, linii, kształtu, tekstury, wartości.

1. Kolor

Zasadniczo kolor służy do wywoływania emocji, zwiększania atrakcyjności wizualnej i podkreślania kluczowych elementów. Wybrane przez Ciebie kolory oddziałują na bardziej instynktowny poziom. Jasne, wybór dwóch kolorów dla motywu, który się nie zazębia, jest irytujący, ale to uczucia i emocje, które wywołuje u odwiedzających, utrudniają im ogólne wrażenia.

Ciepłe, aktywne kolory, takie jak pomarańczowy i czerwony, wywołują bardziej żywe reakcje. Chłodne i pasywne kolory, takie jak niebieski i fioletowy, są o wiele przyjemniejsze, dlatego tak wiele badań wskazuje, że niebieski to kolor szczęścia .

Będziesz chciał zwrócić na to uwagę przy wyborze kolorów tła, dodatkowych elementów wizualnych i akcentów, typografii i wielu innych. Zastanów się, jaki charakter ma Twoja witryna, produkty, usługi i co chcesz osiągnąć. Jeśli chcesz zapewnić bardziej relaksujące, kojące wrażenie, chłodne kolory, takie jak różne głębokie błękity, sprawdzą się świetnie. Jeśli chcesz przyciągnąć uwagę, jaśniejsze kolory są oczywistym wyborem, ale znowu, których użyjesz, będzie zależeć od uwagi, którą wygenerujesz.

Więcej informacji na temat używania psychologii kolorów do zwiększania współczynnika konwersji znajdziesz w tym szczegółowym artykule przez Neila Patela. Podoba mi się to koło emocji od Conversioner opisać różne emocjonalne wyzwalacze kolorów:

2. Rozmiar

Rozmiar, jak wiesz, to jak mały lub duży jest przedmiot lub element. Jeśli chodzi o elementy projektu, rozmiar często dotyczy relacji jednego przedmiotu do innych wokół niego. Im większy element, tym bardziej będzie się wyróżniał wizualnie. Dlatego możesz użyć rozmiaru, aby określić znaczenie, wzbudzić zainteresowanie wizualne, przyciągnąć uwagę, kierować skupieniem prawie jak fabuła i wiele więcej.

Jeśli chcesz mieć pewność, że nagłówek lub tytuł produktu natychmiast przyciągnie uwagę odwiedzających, użyj dużej, atrakcyjnej czcionki, która wyróżnia się na tle całej strony. Jest to również świetny sposób na zwiększenie konwersji bez zmiany całego projektu. Na przykład wezwanie do działania może zostać zwiększone, aby wyróżniało się na tle zwykłych treści.

Jeśli nie znasz kodu, samodzielne wprowadzanie takich zmian może być onieśmielające. Na szczęście, jeśli Twoja witryna działa na WordPressie, istnieją wtyczki, które sprawią, że zmiana rozmiaru nagłówka będzie dziecinnie prosta. Wypróbuj darmową wtyczkę Dostosuj .

3. Przestrzeń

Spacja to puste obszary wokół różnych elementów, w tym typografii, marginesów wokół tekstu i wielu innych. Minimalne strategie projektowania sprzyjają wykorzystaniu większej przestrzeni i położenie nacisku na elementy wizualne, które istnieją. W pewnym sensie zachowuje przejrzysty interfejs, dzięki czemu wszystko się wyróżnia i wygląda, no cóż, pięknie.

Przestrzeń można wykorzystać do oddzielenia elementów lub grup. Może dzielić tekst — tak jak w przypadku podziałów wierszy i nowych akapitów — a nawet dodać atrakcyjności wizualnej. Co ważniejsze, przestrzeń daje odpocząć oczom widza, że ​​tak powiem. Ponieważ nie zawiera niczego ważnego ani obejmującego do patrzenia, może być również używany do kierowania oczami lub skupienia uwagi odbiorców.

Umieść wystarczająco dużo miejsca wokół określonego obiektu, obrazu lub elementu, a naprawdę określisz jego znaczenie. W rzeczywistości jest tak ważny, że stoi sam w morzu tekstu i treści na Twojej stronie.

Jeśli korzystasz z WordPressa, poszukaj motywu zawierającego narzędzie do tworzenia stron. Kreatory stron zapewniają znacznie większą kontrolę nad rozmiarami i odstępami między elementami na stronie docelowej. Jednym z moich ulubionych jest motyw Salient .

4. Linia

Ściśle mówiąc, linia to znak pomiędzy dwoma przeciwległymi punktami. Jak już wiesz, istnieje wiele rodzajów linii, które mają różne rozmiary i kształty. Masz linie proste, faliste, zakrzywione, pogrubione, cienkie itp.

Linie — podobnie jak przestrzeń — są uniwersalnym elementem nowoczesnego designu . Możesz ich używać do różnych rzeczy, od prostych do zaawansowanych. Możesz użyć linii akcentujących, aby podkreślić słowo, frazę lub obraz. Elementy można łączyć ze sobą za pomocą jednej linii kreślonej. Oczywiście na tym się nie kończy.

Najlepszą strategią na zwiększenie konwersji za pomocą linii jest wykorzystanie ich do przyciągnięcia uwagi do CTA lub formularza kontaktowego. W jednym studium przypadku opublikowanym przez ConversionXL , zespół kancelarii prawnych przetestował szereg wizualnych wskazówek, aby sprawdzić, który z nich sprawdza się najlepiej w badaniach eye-trackingowych. Wyraźnym zwycięzcą była strzałka wskazująca formę generowania leadów.

5. Kształt

Kształt jest zasadniczo kombinacją wysokości i szerokości po rozbiciu. W szkole podstawowej, a zwykle nawet wcześniej, zacząłeś pracować z tymi podstawowymi cegiełkami. Są trójkąty, kwadraty, koła i kule, sześciokąty i wiele więcej. Dziwne lub mniej popularne kształty mogą być użyte do przyciągnięcia uwagi — stąd znaki stopu są ukształtowane tak, jak są, oczywiście w połączeniu z jaskrawoczerwonym kolorem.

Kształty można podzielić na trzy zasadnicze typy: geometryczne, naturalne i abstrakcyjne.

• Geometryczny: trójkąty, kwadraty, prostokąty, koła itp.
• Naturalne: liście, zwierzęta, drzewa, ludzie, przedmioty itp.
• Streszczenie: Ikony, stylizacje, przedstawienia graficzne, symbole, kontury itp.

Możesz użyć kształtów, aby zwiększyć atrakcyjność wizualną sekcji, elementu lub obszaru. Na przykład umieszczenie wezwania do działania w przycisku lub innym pojemniku — który sam jest kształtem — to świetny sposób na przyciągnięcie uwagi. Podoba mi się ten przykład z Visual Website Optimizer :

6. Tekstura

W rzeczywistości znamy teksturę jako odczucie przedmiotu lub powierzchni. Czy jest szorstka jak beton, czy gładka jak polerowane drewno? W projektowaniu to nie do końca tłumaczy się, ponieważ tak naprawdę nie można wyczuć elementów strony lub ekranu. Możesz jednak pokazać teksturę poprzez wygląd przedmiotu.

Na przykład dobrze znany wzór ułożonej cegły może być użyty do dodania wizualnej głębi i zainteresowania nijakim, jednolitym kolorem. Jasne, to sugerowana tekstura, ale działa równie skutecznie , zwłaszcza gdy wybierzesz odpowiedni styl.

Możesz użyć tekstur, takich jak cegła, beton i kamień, aby zasugerować siłę lub zaufanie. Możesz użyć stylu słojów drewna, aby upiększyć wygląd lub elegancję. Wszystko sprowadza się do tego, jak i gdzie używasz tekstur wizualnych oraz jaki rodzaj reakcji emocjonalnej wywołuje, gdy oglądasz projekt.

W jednym studium przypadku organizacja charytatywna, która zbierała używane telefony komórkowe, zastosowała bogate w tekstury tło do formularza generowania leadów i zwiększyła darowizny o 53%. To prosta sztuczka, którą można wykonać za pomocą CSS .

7. Wartość

W marketingu definiujemy wartość jako coś, co w pewnym sensie oddaje. Jaka jest nieodłączna wartość produktu lub komponentu?

W projektowaniu wartość jest wskazywana przez jasność lub ciemność obszaru. Gradient — popularny we współczesnym designie — to jeden z najczęstszych sposobów prezentowania wartości. Zwykle przechodzi od ciemnego do jasnego lub stałego do przezroczystego.

Podobnie jak wiele innych elementów tutaj, możesz użyć wartości lub gradientów, aby poprowadzić wzrok. Co ważniejsze, można ich użyć do podkreślenia znaczenia konkretnego ciała lub koncepcji. Możesz umieścić swoje wezwanie do działania w najbardziej żywej części gradientu lub otoczyć przycisk wezwania do działania kolorową poświatą aby go wyróżniać.

W poniższym przykładzie z koncepcji projektu Denisa Absullina na Dribbble , możesz zobaczyć subtelną poświatę wokół przycisku CTA, aby dodać produkt do koszyka.

Przygotowywanie elementów projektu do pracy dla Ciebie

Projekt jest kluczowym elementem sukcesu strony internetowej, ale nie musi być skomplikowany. Po prostu pamiętanie o elementach projektu może stanowić podstawę wyróżniającej się witryny, która może skutecznie promować Twoją markę.