\n Wiele czynnik\u00f3w ma bezpo\u015bredni wp\u0142yw na konwersj\u0119 Twojej witryny. Najwa\u017cniejszym z nich jest jednak projektowanie stron internetowych.\n<\/p>\n
\n Pierwsze wra\u017cenie, jakie otrzymujemy, jest wizualne i decyduj\u0105ce. Dlatego je\u015bli chcesz poprawi\u0107 wsp\u00f3\u0142czynnik konwersji w swojej witrynie, projektowanie stron internetowych jest pierwszym miejscem, od kt\u00f3rego nale\u017cy zacz\u0105\u0107.\n<\/p>\n
\n W tym artykule zebrali\u015bmy podstawowe zasady i wskaz\u00f3wki, kt\u00f3re pomog\u0105 Ci w tym zadaniu.\n<\/p>\n
\n Udzia\u0142 ruchu mobilnego ro\u015bnie i b\u0119dzie r\u00f3s\u0142 w 2020 roku. Badania sugeruj\u0105, \u017ce wi\u0119kszo\u015b\u0107 u\u017cytkownik\u00f3w odm\u00f3wi interakcji z mark\u0105, je\u015bli nie b\u0119dzie mo\u017cliwe wykonanie niezb\u0119dnej czynno\u015bci z urz\u0105dzenia mobilnego. Dlatego przed wprowadzeniem zmian w projekcie swojej witryny, aby uzyska\u0107 wi\u0119cej konwersji, upewnij si\u0119, \u017ce witryna poprawnie wy\u015bwietla si\u0119 na urz\u0105dzeniach mobilnych, a u\u017cytkownicy nie napotykaj\u0105 przeszk\u00f3d na swojej drodze.\n<\/p>\n
\n Jak to zrobi\u0107? Wszystko b\u0119dzie zale\u017ce\u0107 od sposobu, w jaki stworzysz swoj\u0105 witryn\u0119. Na przyk\u0142ad strony na WordPressie i innych popularnych CMS-ach b\u0119d\u0105 responsywne od momentu ich powstania. Jednak dodatkowy test u\u017cyteczno\u015bci nie b\u0119dzie nadmierny.\n<\/p>\n
\n To prawo sugeruje, \u017ce mniejsza liczba wybor\u00f3w zwi\u0119ksza szybko\u015b\u0107 podejmowania decyzji i odwrotnie. Na przyk\u0142ad, je\u015bli u\u017cyjesz trzech wezwa\u0144 do dzia\u0142ania na raz na stronie g\u0142\u00f3wnej, np. zarejestruj si\u0119 w serwisie, uzyskaj rabat i pobierz e-booka, to u\u017cytkownikowi trudno b\u0119dzie zdecydowa\u0107, kt\u00f3r\u0105 akcj\u0119 wykona\u0107 jako pierwsz\u0105. Znacznie rozs\u0105dniej b\u0119dzie u\u0142o\u017cy\u0107 te wezwania do dzia\u0142ania w logicznej kolejno\u015bci \u2013 tak, jak zosta\u0142y wymienione i oferuj\u0105 u\u017cytkownikowi nast\u0119pn\u0105 akcj\u0119 po poprzedniej.\n<\/p>\n
\n To samo dotyczy liczby produkt\u00f3w wy\u015bwietlanych na stronie. Nie nale\u017cy pokazywa\u0107 u\u017cytkownikowi wszystkich mo\u017cliwych produkt\u00f3w pasuj\u0105cych do jego zapytania \u2013 lepiej pokaza\u0107 pi\u0119\u0107 najbardziej odpowiednich opcji i pozwoli\u0107 na kontynuacj\u0119 wyszukiwania za pomoc\u0105 filtr\u00f3w.\n<\/p>\n
\n Pomy\u015bl o mo\u017cliwo\u015bci wy\u015bwietlenia pe\u0142noekranowego formularza kontaktowego w momencie, gdy u\u017cytkownik przewin\u0105\u0142 stron\u0119 g\u0142\u00f3wn\u0105 do okre\u015blonego miejsca. Po pierwsze, pe\u0142noekranowy formularz skupi ca\u0142\u0105 uwag\u0119 u\u017cytkownika i nie pozwoli rozproszy\u0107 si\u0119 innymi elementami serwisu, a po drugie, chodzi tylko o mo\u017cliwo\u015bci wyboru, o kt\u00f3rych m\u00f3wili\u015bmy wcze\u015bniej. U\u017cytkownik otrzymuje wi\u0119c tylko dwie opcje. Pierwszym z nich jest zamkni\u0119cie formularza kontaktowego i kontynuowanie interakcji z witryn\u0105. Drugim jest podanie Ci jego adresu e-mail w zamian za Twoj\u0105 ofert\u0119.\n<\/p>\n
\n Zapewne znasz jedn\u0105 z g\u0142\u00f3wnych zasad fotografii \u2013 zasad\u0119 tr\u00f3jpodzia\u0142u. Zgodnie z t\u0105 zasad\u0105 dwie linie wizualnie dziel\u0105 ekran w pionie iw poziomie, co daje dziewi\u0119\u0107 kwadrat\u00f3w. Cztery punkty przeci\u0119cia linii na \u015brodku ekranu s\u0105 wi\u0119c w centrum uwagi u\u017cytkownika, dlatego najwa\u017cniejsze informacje, takie jak wezwanie do dzia\u0142ania, powinny znale\u017a\u0107 si\u0119 w\u0142a\u015bnie tutaj.\n<\/p>\n
\n Ten element jest bezpo\u015brednio zwi\u0105zany z projektem, poniewa\u017c Twoja strona mo\u017ce by\u0107 przeci\u0105\u017cona ci\u0119\u017ckimi obrazami, kt\u00f3re spowalniaj\u0105 \u0142adowanie Twojej witryny. Usu\u0144 wszystko, co niepotrzebne i zoptymalizuj kluczowe obrazy. Wed\u0142ug statystyk optymalna pr\u0119dko\u015b\u0107 \u0142adowania strony wynosi od dw\u00f3ch do pi\u0119ciu sekund. I w tym przypadku musisz d\u0105\u017cy\u0107 do ni\u017cszego wska\u017anika, poniewa\u017c 40% u\u017cytkownik\u00f3w deklaruje, \u017ce zamknie stron\u0119, kt\u00f3ra \u0142aduje si\u0119 d\u0142u\u017cej ni\u017c trzy sekundy, co oznacza, \u017ce \u200b\u200b\u200b\u200bza ka\u017cdym razem, gdy strona zwolni, stracisz potencjalnego leada.\n<\/p>\n
\n Jan Tschichold m\u00f3wi, \u017ce przestrze\u0144 negatywn\u0105 nale\u017cy postrzega\u0107 jako element aktywny, a nie pasywne t\u0142o. Istnieje zwi\u0105zek mi\u0119dzy dystansem a uwag\u0105. Wi\u0119kszy dystans przyci\u0105ga uwag\u0119, a brak innych element\u00f3w silniej wyr\u00f3\u017cnia istniej\u0105ce elementy. Projektanci mog\u0105 u\u017cywa\u0107 tej w\u0142a\u015bciwo\u015bci przestrzeni do podkre\u015blania wa\u017cnych element\u00f3w. Dodanie spacji do okre\u015blonego segmentu tre\u015bci powoduje, \u017ce u\u017cytkownik zwraca uwag\u0119 na ten obszar po prostu dlatego, \u017ce na ekranie nie ma ju\u017c nic, co mog\u0142oby przyci\u0105gn\u0105\u0107 uwag\u0119. Jak wida\u0107 na poni\u017cszym przyk\u0142adzie, Google jest wielkim zwolennikiem bia\u0142ych znak\u00f3w w swoich projektach. Pomaga to od razu zrozumie\u0107 cel tego projektu: skupienie si\u0119 na g\u0142\u00f3wnym celu strony.\n<\/p>\n
\n Niestety nie ma uniwersalnej porady, kt\u00f3re kolory konwertuj\u0105 lepiej. Wszystko b\u0119dzie zale\u017ce\u0107 od specyfiki Twojego biznesu. Na przyk\u0142ad kolory bia\u0142y i niebieski powoduj\u0105 poczucie stabilno\u015bci i niezawodno\u015bci. Dlatego PayPal u\u017cywa tej kombinacji do tworzenia prawid\u0142owych powi\u0105za\u0144.\n<\/p>\n
\n Je\u015bli nie masz pewno\u015bci, czy Twoje kolory dzia\u0142aj\u0105 poprawnie, po prostu wr\u00f3\u0107 do pocz\u0105tk\u00f3w psychologii kolor\u00f3w w marketingu, a tak\u017ce ponownie zbadaj warto\u015bci swojej firmy i znajd\u017a idealne dopasowanie.\n<\/p>\n
\n Poza tym s\u0105 r\u00f3\u017cne opinie na temat koloru przycisk\u00f3w, kt\u00f3re konwertuj\u0105 gorzej lub lepiej. W\u0142a\u015bciwy kolor guzika to stara filozoficzna kwestia. Kto\u015b twierdzi, \u017ce najwy\u017csz\u0105 konwersj\u0119 osi\u0105ga si\u0119 za pomoc\u0105 czerwonych przycisk\u00f3w. Inni m\u00f3wi\u0105 o zielonym lub niebieskim. Prawid\u0142owa odpowied\u017a brzmi tak (podobnie jak wiele innych odpowiedzi w marketingu i projektowaniu): \u201eTo trzeba przetestowa\u0107”. Dlatego wybierz kolor przycisku, kt\u00f3ry b\u0119dzie kontrastowa\u0142 z podstawowymi kolorami projektu i wykonaj kilka test\u00f3w, aby zrozumie\u0107, kt\u00f3ry kolor konwertuje lepiej.\n<\/p>\n
\n Poprawny obraz mo\u017ce powiedzie\u0107 wi\u0119cej ni\u017c kilka akapit\u00f3w tekstu. Dlatego wykorzystaj moc percepcji wizualnej i emocji w projektowaniu swojej witryny. Mo\u017cesz na przyk\u0142ad ustawi\u0107 obraz jako t\u0142o swojej witryny, a nast\u0119pnie umie\u015bci\u0107 wszystkie elementy w taki spos\u00f3b, aby by\u0142y zgodne z podstawowymi zasadami projektowania stron internetowych. A przy okazji, przyczynia si\u0119 r\u00f3wnie\u017c do lepszych konwersji.\n<\/p>\n
\n R\u00f3wnie\u017c takie podej\u015bcie promuje prostot\u0119 i minimalizm, kt\u00f3ry jest trendem ostatnich lat, a odpowiednio dobrany obraz wywo\u0142uje niezb\u0119dne emocje i skojarzenia. I odwrotnie, jak ju\u017c powiedzieli\u015bmy, zbyt du\u017ca liczba obraz\u00f3w komplikuje wyb\u00f3r i rozprasza uwag\u0119 u\u017cytkownika.\n<\/p>\n
\n Innymi s\u0142owy, d\u0105\u017c do maksymalnej prostoty. We wsp\u00f3\u0142czesnym nadmiarze szumu informacyjnego prostota i przejrzysto\u015b\u0107 sta\u0142y si\u0119 prawdziwym niedoborem. Badania wykaza\u0142y, \u017ce 76% u\u017cytkownik\u00f3w uwa\u017ca prostot\u0119 za g\u0142\u00f3wny czynnik decyduj\u0105cy o projektowaniu stron internetowych. I tutaj trzeba umiej\u0119tnie zachowa\u0107 r\u00f3wnowag\u0119 mi\u0119dzy prostot\u0105, minimalizmem, ale jednocze\u015bnie funkcjonalno\u015bci\u0105 \u2013 bo prostota to tak\u017ce mo\u017cliwo\u015b\u0107 znalezienia tego, czego potrzebuje u\u017cytkownik, za pomoc\u0105 kilku klikni\u0119\u0107.\n<\/p>\n
\n Niestety Internet jest pe\u0142en fa\u0142szywych recenzji i nie w\u0105tp, \u017ce Twoi u\u017cytkownicy r\u00f3wnie\u017c o tym wiedz\u0105. Dlatego zamiast zmusza\u0107 ich do szukania opinii na temat Twoich produkt\u00f3w lub us\u0142ug (kt\u00f3re mog\u0105 by\u0107 napisane przez konkurencj\u0119, aby podwa\u017cy\u0107 Tw\u00f3j biznes), musisz od razu da\u0107 im tak\u0105 mo\u017cliwo\u015b\u0107.\n<\/p>\n
\n Dlatego zastan\u00f3w si\u0119 nad projektem strony w taki spos\u00f3b, aby\u015b m\u00f3g\u0142 umie\u015bci\u0107 kilka prawdziwych recenzji (a jeszcze lepiej karuzel\u0119) pod koniec strony. I pami\u0119taj, aby u\u017cy\u0107 zdj\u0119\u0107 \u017cywych ludzi (najlepiej prawdziwych klient\u00f3w), aby stworzy\u0107 wra\u017cenie mocnych dowod\u00f3w spo\u0142ecznych.\n<\/p>\n
\n Prawdopodobnie widzia\u0142e\u015b witryny, kt\u00f3re zawieraj\u0105 milion kategorii i po prostu niemo\u017cliwe jest wybranie odpowiedniej sekcji za pierwszym razem. A je\u015bli wcze\u015bniej u\u017cytkownicy nadal po\u015bwi\u0119cali czas na takie wyszukiwanie, dzi\u015b chc\u0105 zobaczy\u0107, czego potrzebuj\u0105, bez dodatkowych dzia\u0142a\u0144.\n<\/p>\n
\n Dlatego przemy\u015bl swoje podej\u015bcie do poruszania si\u0119 po stronie, zmniejsz liczb\u0119 kategorii, usu\u0144 wszystkie niepotrzebne i pozostaw tylko najwa\u017cniejsze sekcje. Jak ju\u017c powiedzieli\u015bmy, pe\u0142en wachlarz mo\u017cliwo\u015bci utrudnia podj\u0119cie decyzji lub generalnie zmusza u\u017cytkownika do opuszczenia strony i od\u0142o\u017cenia zadania na p\u00f3\u017aniej.\n<\/p>\n
\n To sztuczka psychologiczna, kt\u00f3ra uruchamia pod\u015bwiadom\u0105 reakcj\u0119 \u2013 ludzie wierz\u0105 w statystyki. A to kolejna okazja do zwi\u0119kszenia konwersji poprzez budowanie zaufania i stwarzanie wra\u017cenia rzetelno\u015bci. Ale jest jeden kluczowy punkt. Pami\u0119tasz, jak rozmawiali\u015bmy o zasadzie tr\u00f3jpodzia\u0142u i strategicznych punktach przeci\u0119cia? To s\u0105 w\u0142a\u015bnie miejsca, w kt\u00f3rych musisz umie\u015bci\u0107 swoje statystyki, aby znalaz\u0142y si\u0119 w centrum uwagi i percepcji.\n<\/p>\n
\n Marketerzy nie zgadzaj\u0105 si\u0119 co do tej taktyki sprzeda\u017cy, ale w przypadku szybkiej i sezonowej sprzeda\u017cy takie podej\u015bcie jest nadal odpowiednie. Dlatego je\u015bli masz ofert\u0119 sezonow\u0105, promocyjn\u0105 lub testujesz zainteresowanie nowym produktem, warto stworzy\u0107 iluzj\u0119 niedoboru i odzwierciedli\u0107 to za pomoc\u0105 designu. Na przyk\u0142ad mo\u017cesz ustawi\u0107 minutnik i ponownie zwr\u00f3ci\u0107 uwag\u0119 odwiedzaj\u0105cego na liczby.\n<\/p>\n
\n Jednak tutaj nadal musisz odpowiednio ustawi\u0107 przyciski wezwania do dzia\u0142ania. I w tym przypadku lepiej to zrobi\u0107 zgodnie ze schematem Z.\n<\/p>\n
\n Uwaga u\u017cytkownika przesuwa si\u0119 wzd\u0142u\u017c g\u00f3rnej poziomej, uko\u015bnie w d\u00f3\u0142 i przechodzi do informacji na dole. W lewym g\u00f3rnym rogu umie\u015b\u0107 logo, poziomo \u2013 nag\u0142\u00f3wki. Prawy dolny r\u00f3g to idealne miejsce na wezwanie do dzia\u0142ania.\n<\/p>\n
\n Mo\u017cna s\u0142usznie zauwa\u017cy\u0107, \u017ce jest to odpowiedzialno\u015b\u0107 projektanta UX, ale w praktyce tak jest tylko w przypadku, gdy projektant sieci i UX musz\u0105 wsp\u00f3\u0142pracowa\u0107, aby uzyska\u0107 jeden wynik. Projekt UX to kolejny czynnik, kt\u00f3ry ma bezpo\u015bredni wp\u0142yw na konwersje, a im mniej krok\u00f3w dzieli u\u017cytkownika od docelowej akcji, tym wi\u0119ksze prawdopodobie\u0144stwo jej wykonania.\n<\/p>\n
\n Dlatego musisz jeszcze raz upewni\u0107 si\u0119, \u017ce informacje lub produkt, kt\u00f3rego potrzebuje, znajduj\u0105 si\u0119 nie dalej ni\u017c trzy klikni\u0119cia.\n<\/p>\n
\n Aby poprawi\u0107 konwersj\u0119 swojej witryny, wykorzystaj zasad\u0119 tr\u00f3jpodzia\u0142u i schemat Z, umieszczaj\u0105c wezwania do dzia\u0142ania. Mo\u017cesz poprawi\u0107 postrzeganie wezwania do dzia\u0142ania, je\u015bli je zduplikujesz \u2013 na przeci\u0119ciu linii oraz w prawym g\u00f3rnym rogu strony, gdzie ko\u0144czy si\u0119 g\u00f3rna linia litery Z. W ten spos\u00f3b uwaga u\u017cytkownika najpierw zatrzyma si\u0119 w prawym g\u00f3rnym rogu, nast\u0119pnie ze\u015blizgnie si\u0119 uko\u015bnie w d\u00f3\u0142 i spocznie bezpo\u015brednio w strategicznym punkcie przeci\u0119cia linii po lewej stronie.\n<\/p>\n
\n Wsp\u00f3\u0142cze\u015bni u\u017cytkownicy s\u0105 bardzo niecierpliwi i ju\u017c o tym m\u00f3wili\u015bmy w akapicie dotycz\u0105cym szybko\u015bci \u0142adowania strony. Ogromny formularz do wype\u0142nienia mo\u017ce zabi\u0107 konwersj\u0119, poniewa\u017c nikt nie chce traci\u0107 czasu, zw\u0142aszcza z urz\u0105dzenia mobilnego. Dlatego przejrzyj formularz rejestracyjny i pozostaw tylko trzy linie \u2013 na imi\u0119 i nazwisko, adres e-mail i has\u0142o, a tak\u017ce dodaj mo\u017cliwo\u015b\u0107 rejestracji przez Google i Facebook.\n<\/p>\n
\n Jak wida\u0107, na konwersje mo\u017ce wp\u0142ywa\u0107 wiele trik\u00f3w. Jednak najwa\u017cniejsz\u0105 rzecz\u0105 do zapami\u0119tania jest to, \u017ce ka\u017cde nowe podej\u015bcie powinno by\u0107 testowane na u\u017cytkownikach. Ka\u017cda firma i ka\u017cda grupa docelowa jest specyficzna; w zwi\u0105zku z tym nie mo\u017ce by\u0107 szablonowych instrukcji dotycz\u0105cych tego, czego u\u017cy\u0107 w projekcie, aby zwi\u0119kszy\u0107 liczb\u0119 konwersji. Ponadto design jest pierwszym, ale nie ostatnim czynnikiem, kt\u00f3ry konwertuje (lub nie konwertuje), io tym te\u017c trzeba pami\u0119ta\u0107.\n<\/p>\n<\/p>\n