👉 Analiza butonów na stronie CyberFolks.pl/Stores

Pierwszy widok po wejściu na stronę CyberFolks.pl/Stores:

1. TAK > rozmowa telefoniczna (teraz lub później), formularz kontaktowy

Button „TAK” przekierowuje do okna, w którym jest możliwość szybkiego połączenia telefonicznego, umówienia takiego połączenia później albo zostawienia wiadomości w formularzu kontaktowym. Zgodnie z czwartą heurystyką Nielsena (Trzymaj się standardów i zachowaj spójność) wielu użytkowników może sądzić, że uruchamia czat. Problem może być tym częstszy, że słuchawka telefonu również jest buttonem, które przekierowuje w to samo miejsce co „TAK”. Dymek ma kształt tooltipu, który co do zasady jest elementem pojawiającym się po najechaniu. W takiej formie na podstawowym widoku zasłania to, co ważne.

2. Słuchawka > rozmowa telefoniczna (teraz lub później), formularz kontaktowy

O ile kojarzy się z rozmową, to z formularzem kontaktowym na pewno nie. Nikt nie będzie szukał formularza, klikając taki button.

3. Drugi rok gratis > X

Wygląda jak button, ale nim nie jest. Trzeba go inaczej zaprojektować wizualnie.

4. Dymek > czat

Dlaczego user od razu dostaje dwa dymki z dwóch różnych stron, które służą do kontaktu? Za dużo tego na początek. Nawet po zamknięciu komunikatu „Cześć! Czy chcesz porozmawiać(…)”, słuchawka zostaje w każdym widoku, podobnie jak dymek, który kieruje do czatu (patrz screen poniżej, buttony otoczone granatową ramką). Moim zdaniem warto zostawić tylko słuchawkę i dymek.

.

Widok po wejściu w menu:

1. Wypróbuj bezpłatnie > kreator sklepu internetowego

2. Słuchawka > połączenie telefoniczne (teraz lub później) i formularz kontaktowy

3. Dymek po prawej > czat

.

Widoki na rodzaje sklepów:

1. Drugi rok gratis > X

Element wygląda jak button, ale nim nie jest. To niezgodne z czwartą heurystyką Nielsena.

1. Wypróbuj za darmo > kreator sklepu internetowego

.

Buttony na karuzeli i pod karuzelą

1. Zobacz demo > wybrany szablon sklepu

Button pojawia się dopiero po najechaniu. Powinien być widoczny od razu, bez hover. Część po lewej ma inny odcień niż reszta butonów.

2. Uruchom sklep > kreator sklepu internetowego

Button pojawia się dopiero po najechaniu. Powinien być widoczny od razu, bez hover. Odróżnia się stylem od innych butonów (zaokrąglenie po prawej). Oba buttony mogłyby wyglądać tak samo, ale trzeba by je po prostu od siebie oddzielić. Należy postawić na konsekwencję i guzik nazwać jedną z wybranych nazw – Wypróbuj za darmo albo Wypróbuj bezpłatnie.

3. Pokaż wszystkie > Bezpłatne szablony posegregowane według branż/tematyki

.

Button wypróbuj za darmo:

1. Wypróbuj za darmo > Kreator sklepu internetowego

.

Widok na ostatnie CTA:

1. Dowiedz się więcej > formularz kontaktowy i strona przedstawiające zalety migracji do Stores

.

Button w footerze:

1. Kontakt > Strona kontaktowa (dane adresowe; informacje o czacie, mailu i infolinii)

.

👉 Uwagi ogólne:

  1. Buttony, które przenoszą usera do kreatora, są nazwane: Wypróbuj bezpłatnie albo Wypróbuj za darmo. Proponowałabym wybrać jedną z nazw, aby user wiedział już, że zajrzał do kreatora, klikając wcześniej na inny button, ale z tą samą nazwą. W sekcji z szablonami button, który przenosi usera do kreatora, jest nawet nazwany Uruchom sklep. Wybrałabym konsekwentnie jedną z nazw Wypróbuj bezpłatnie albo Wypróbuj za darmo. Klikanie na różnie nazwane buttony, które przenoszą w to samo miejsce, może irytować usera i spowodować opuszczenie strony.
  2. Niektóre nieaktywne elementy interfejsu (Drugi rok gratis w widoku na widokach z rodzajami sklepów) przybierają postać, która userom będzie kojarzyć się z buttonami (wbrew piątej heurystyce Nielsena). Mają nawet ten sam kolor co aktywne buttony. Aby nie zachęcać usera do klikania, muszą mieć inny wygląd.
  3. Buttony muszą tak samo wyglądać. Tutaj jest różny stopień zaokrąglenia krawędzi. Widać to zwłaszcza na szablonach, z których jeden po prawej stronie jest mocno zaokrąglony.
  4. Poza buttonem Kontakt w footerze oraz buttonami z ikonami (na pierwszym widoku, które prowadzą do czatu, rozmowy i formularz kontaktowego) wszystkie zawierają Call to Action (wezwanie do działania). Ty coś zrób: Dowiedz się więcej, Zobacz demo, Wypróbuj za darmo, Pokaż wszystkie itd. O ile to możliwe, należy konsekwentnie w ten sposób nazywać buttony – powinny wzywać do działania.