Testowa\u0107 mo\u017cna praktycznie wszystko \u2013 od wersji maling\u00f3w, reklamy, po wersj\u0119 strony internetowej. Do pierwotnej wersji witryny mo\u017cesz wprowadzi\u0107 zmiany, a nast\u0119pnie przeprowadzi\u0107 test strony<\/b>\u00a0<\/b>i sprawdzi\u0107, czy s\u0105 one skuteczne i\u00a0zwi\u0119kszy\u0142y konwersj\u0119. Przeczytaj jakie elementy warto sprawdzi\u0107 podczas testowania stron internetowych!<\/p>\nTypografia<\/h4>\n
Projektowanie stron w\u00a095% to typografia. Sprawd\u017a kilka jej aspekt\u00f3w podczas testu strony www:<\/p>\n
- \n
- kroje czcionek:<\/em> szeryfowe (Serif) oraz bezszeryfowe (Sans Serif). Czcionka szeryfowa to inaczej zdobiona. Najbardziej znanym jej przyk\u0142adem jest Times New Roman. W\u00a0bezszeryfowej wyst\u0119puj\u0105 litery nieposiadaj\u0105ce motyw\u00f3w dekoracyjnych, na przyk\u0142ad Arial. Przyj\u0119to, \u017ce pierwszego typu kroju u\u017cywa si\u0119 raczej w\u00a0materia\u0142ach drukowanych, za\u015b drugiego g\u0142\u00f3wnie w\u00a0publikacjach elektronicznych.<\/li>\n<\/ul>\n
- \n
- kolor czcionki:<\/em> oczy cz\u0142owieka przyzwyczajone s\u0105 do czytania ciemnego tekstu na jasnym tle. Zadbaj o\u00a0to, je\u015bli chcesz, aby u\u017cytkownikom komfortowo czyta\u0142o si\u0119 tre\u015bci na stronie.<\/li>\n<\/ul>\n
- \n
- rozmiar czcionki:<\/em> panuje przekonanie, \u017ce czytelno\u015b\u0107 jest tym lepsza, im wi\u0119ksza jest czcionka. Najlepiej uruchom test strony i sprawd\u017a r\u00f3\u017cnic\u0119 w zaanga\u017cowaniu u\u017cytkownika na Twojej stronie w zale\u017cno\u015bci od rozmiaru czcionki. W 2009 roku Smashing Magazine przeprowadzi\u0142 badanie, por\u00f3wnuj\u0105c wielko\u015b\u0107 czcionek pi\u0119\u0107dziesi\u0119ciu popularnych serwis\u00f3w informacyjnych \u2013 wi\u0119kszo\u015b\u0107 stosowa\u0142a czcionk\u0119 o wielko\u015bci 13 px. Po powt\u00f3rzeniu badania w 2013 roku okaza\u0142o si\u0119, \u017ce najpopularniejszymi rozmiarami czcionek sta\u0142y si\u0119 14 px i 16 px. W 2015 roku za\u015b domy\u015blnie czcionki w Firefox oraz Chrome mia\u0142y wielko\u015b\u0107 16px.<\/li>\n<\/ul>\n
Call to action<\/h4>\n
Przycisk wezwania do dzia\u0142ania to jeden z\u00a0wa\u017cniejszych element\u00f3w na stronie, wymaga wi\u0119c odpowiedniej ilo\u015bci eksperyment\u00f3w. Cho\u0107 jest niewielki, to zawiera kilka istotnych cz\u0119\u015bci, kt\u00f3re mo\u017cesz podda\u0107 testom:<\/p>\n
- \n
- kolor<\/em> \u2013 powinien by\u0107 kontrastowy i\u00a0wyr\u00f3\u017cnia\u0107 si\u0119 od pozosta\u0142ych element\u00f3w na stronie. Czy b\u0119dzie to zielony, czerwony, niebieski czy pomara\u0144czowy? Wp\u0142yw na to b\u0119dzie mia\u0142a tak\u017ce og\u00f3lna kolorystyka strony. Zr\u00f3b test swojej strony i\u00a0sprawd\u017a, kt\u00f3ry kolor CTA dzia\u0142a najlepiej!<\/li>\n<\/ul>\n
- \n
- tekst<\/em> \u2013 to jedna z\u00a0kluczowych cz\u0119\u015bci CTA. Testuj go tak wiele razy a\u017c wybierzesz najlepszy. Sprawd\u017a r\u00f3\u017cn\u0105 d\u0142ugo\u015b\u0107, zaimki czy czasowniki i\u00a0wybierz ten, kt\u00f3ry najlepiej trafia do Twoich odbiorc\u00f3w.<\/li>\n<\/ul>\n
- \n
- rozmieszczenie<\/em> \u2013 umie\u015bci\u0107 przycisk wezwania do dzia\u0142ania poni\u017cej czy powy\u017cej ekranu widocznego po przewini\u0119ciu? To cz\u0119sty problem w\u00a0kwestii rozmieszczenia CTA. Jak b\u0119dzie w\u00a0Twoim przypadku? Tego nie mo\u017cesz by\u0107 pewien, dlatego podczas testu strony internetowej sprawd\u017a gdzie powinien znajdowa\u0107 si\u0119 Tw\u00f3j CTA w\u00a0odniesieniu do reszty element\u00f3w.<\/li>\n<\/ul>\n
Przyk\u0142ad:<\/em><\/strong> Firma oferuj\u0105ca produkty oszcz\u0119dno\u015bciowe z Holandii przeprowadzi\u0142a test A\/B, w kt\u00f3rym sprawdzi\u0142a, kt\u00f3ry tekst na wezwaniu do dzia\u0142ania jest bardziej skuteczny: A: \u201eMore Information About Savings\u201d czy B: \u201eYes, I want to save 2,95% Interest\u201d. Wersja A zwi\u0119kszy\u0142a liczb\u0119 otwartych kont oszcz\u0119dno\u015bciowych o 15,8%. Od drugiej wersji r\u00f3\u017cni\u0142a si\u0119 ona tak\u017ce dodatkowym linkiem \u201eApply Direct\u201d, kt\u00f3ry umo\u017cliwia\u0142 bezpo\u015brednie przekierowanie do docelowej podstrony zamiast czytania \u201ewi\u0119cej informacji\u201d.<\/p>\n
\n
![\"szablony](\"https:\/\/www.templatemonster.com\/blog\/pl\/wp-content\/uploads\/sites\/6\/2018\/01\/optimized-xizw.jpg\")
<\/a><\/p>\nPasek nawigacyjny \/ menu<\/h4>\n
Okre\u015bl, kt\u00f3re podstrony Twojej witryny przyci\u0105gaj\u0105 najwi\u0119cej u\u017cytkownik\u00f3w. Mo\u017cesz je odpowiednio zoptymalizowa\u0107 tak, aby jeszcze bardziej zwi\u0119kszy\u0107 na nich ruch. Przetestuj kolejno\u015b\u0107 stron na pasku nawigacyjnym i\u00a0sprawd\u017a, jaki rozk\u0142ad przynosi najwi\u0119cej klikni\u0119\u0107 w\u00a0podstrony istotne ze wzgl\u0119du na konwersj\u0119. R\u00f3wnie przydatne b\u0119d\u0105 testy zwrot\u00f3w u\u017cytych w\u00a0menu.<\/p>\n
Obraz<\/h4>\n
W pierwszej chwili zwracamy uwag\u0119 na obraz. Zapami\u0119tujemy a\u017c 30% z\u00a0tego co widzimy, podczas gdy jedynie 10% z\u00a0tego, co przeczytamy. Warto wi\u0119c pomy\u015ble\u0107 o\u00a0sprawdzeniu tego elementu przy te\u015bcie strony www. Je\u015bli zdj\u0119cie przykuje uwag\u0119, istnieje wi\u0119ksze prawdopodobie\u0144stwo, \u017ce u\u017cytkownik przeczyta tekst i\u00a0wykona wezwanie do dzia\u0142ania, o\u00a0kt\u00f3re prosisz. Przetestuj r\u00f3\u017cne formy obraz\u00f3w, aby sprawdzi\u0107, kt\u00f3re anga\u017cuj\u0105 bardziej u\u017cytkownik\u00f3w: obrazy ludzi, zdj\u0119cia produkt\u00f3w, ilustracje vs. realne fotografie, slajdery czy obrazy statyczne.<\/p>\n
Nag\u0142\u00f3wki<\/h4>\n
Nag\u0142\u00f3wki to kluczowa cz\u0119\u015b\u0107 strony \u2013 s\u0105 elementem, na kt\u00f3ry czytelnik zwraca uwag\u0119 w\u00a0pierwszej kolejno\u015bci. Szukaj\u0105c konkretnej informacji cz\u0119sto wertujemy najpierw nag\u0142\u00f3wki, by sprawdzi\u0107 czy trafili\u015bmy we w\u0142a\u015bciwe miejsce. Dlatego nag\u0142\u00f3wek musi odzwierciedla\u0107 to, co u\u017cytkownik zastanie po klikni\u0119ciu w\u00a0baner, link czy reklam\u0119. Warto wi\u0119c po\u015bwi\u0119ci\u0107 czas na jego testowanie i\u00a0sprawdzi\u0107 czy skuteczniejszy jest w\u00a0przypadku naszych odbiorc\u00f3w kr\u00f3tki czy d\u0142ugi nag\u0142\u00f3wek, odnosz\u0105cy si\u0119 do pozytywnych czy negatywnych odczu\u0107, przedstawiaj\u0105cy korzy\u015bci, funkcjonalno\u015b\u0107 a\u00a0mo\u017ce u\u015bwiadamiaj\u0105cy potrzeby?<\/p>\n
Hiper\u0142\u0105cza<\/h4>\n
Tworz\u0105c hiper\u0142\u0105cza kieruj si\u0119 zasadami jak przy tworzeniu CTA. Poniewa\u017c wyr\u00f3\u017cniaj\u0105 si\u0119 one wizualnie od pozosta\u0142ej cz\u0119\u015bci tekstu i\u00a0zwracaj\u0105 uwag\u0119 u\u017cytkownik\u00f3w, warto zadba\u0107 o\u00a0odpowiedni anchor text linku i\u00a0sprawdzi\u0107, w\u00a0kt\u00f3re u\u017cytkownicy klikaj\u0105 ch\u0119tniej. Opr\u00f3cz tekstu, podobnie jak w\u00a0przypadku CTA, r\u00f3wnie\u017c kolor hiper\u0142\u0105cza ma znaczenie.<\/p>\n
\n* * *<\/p>\n
A je\u015bli wci\u0105\u017c masz jakie\u015b w\u0105tpliwo\u015bci co do designu stron czy jej dzia\u0142ania, sprawd\u017a nasz katalog! Zebrali\u015bmy zestaw z najbardziej stylowych i funkcjonalnych szablon\u00f3w do r\u00f3\u017cnych CMS. Wszystkie z nich zostali wykonane przez najlepszych designer\u00f3w i programist\u00f3w! To znaczy, \u017ce wybieraj\u0105c jeden z naszych szablon\u00f3w, mo\u017cesz by\u0107 pewien, \u017ce strona na jego podstawie b\u0119dzie zawsze stylowo wygl\u0105da\u0142a, oraz skutecznie anga\u017cowa\u0142a klient\u00f3w!<\/p>\n
\u00a0Do katalogu!<\/a>\n
\nCzytaj r\u00f3wnie\u017c:<\/h3>\n
Jak \u0142atwo stworzy\u0107 witryn\u0119 eCommerce? [Darmowa e-ksi\u0105\u017cka]<\/a><\/p>\n
- rozmieszczenie<\/em> \u2013 umie\u015bci\u0107 przycisk wezwania do dzia\u0142ania poni\u017cej czy powy\u017cej ekranu widocznego po przewini\u0119ciu? To cz\u0119sty problem w\u00a0kwestii rozmieszczenia CTA. Jak b\u0119dzie w\u00a0Twoim przypadku? Tego nie mo\u017cesz by\u0107 pewien, dlatego podczas testu strony internetowej sprawd\u017a gdzie powinien znajdowa\u0107 si\u0119 Tw\u00f3j CTA w\u00a0odniesieniu do reszty element\u00f3w.<\/li>\n<\/ul>\n
- tekst<\/em> \u2013 to jedna z\u00a0kluczowych cz\u0119\u015bci CTA. Testuj go tak wiele razy a\u017c wybierzesz najlepszy. Sprawd\u017a r\u00f3\u017cn\u0105 d\u0142ugo\u015b\u0107, zaimki czy czasowniki i\u00a0wybierz ten, kt\u00f3ry najlepiej trafia do Twoich odbiorc\u00f3w.<\/li>\n<\/ul>\n
- kolor<\/em> \u2013 powinien by\u0107 kontrastowy i\u00a0wyr\u00f3\u017cnia\u0107 si\u0119 od pozosta\u0142ych element\u00f3w na stronie. Czy b\u0119dzie to zielony, czerwony, niebieski czy pomara\u0144czowy? Wp\u0142yw na to b\u0119dzie mia\u0142a tak\u017ce og\u00f3lna kolorystyka strony. Zr\u00f3b test swojej strony i\u00a0sprawd\u017a, kt\u00f3ry kolor CTA dzia\u0142a najlepiej!<\/li>\n<\/ul>\n
- rozmiar czcionki:<\/em> panuje przekonanie, \u017ce czytelno\u015b\u0107 jest tym lepsza, im wi\u0119ksza jest czcionka. Najlepiej uruchom test strony i sprawd\u017a r\u00f3\u017cnic\u0119 w zaanga\u017cowaniu u\u017cytkownika na Twojej stronie w zale\u017cno\u015bci od rozmiaru czcionki. W 2009 roku Smashing Magazine przeprowadzi\u0142 badanie, por\u00f3wnuj\u0105c wielko\u015b\u0107 czcionek pi\u0119\u0107dziesi\u0119ciu popularnych serwis\u00f3w informacyjnych \u2013 wi\u0119kszo\u015b\u0107 stosowa\u0142a czcionk\u0119 o wielko\u015bci 13 px. Po powt\u00f3rzeniu badania w 2013 roku okaza\u0142o si\u0119, \u017ce najpopularniejszymi rozmiarami czcionek sta\u0142y si\u0119 14 px i 16 px. W 2015 roku za\u015b domy\u015blnie czcionki w Firefox oraz Chrome mia\u0142y wielko\u015b\u0107 16px.<\/li>\n<\/ul>\n
- kolor czcionki:<\/em> oczy cz\u0142owieka przyzwyczajone s\u0105 do czytania ciemnego tekstu na jasnym tle. Zadbaj o\u00a0to, je\u015bli chcesz, aby u\u017cytkownikom komfortowo czyta\u0142o si\u0119 tre\u015bci na stronie.<\/li>\n<\/ul>\n