Posts Tagged

UX

Jak przyśpieszyć WordPressa?

Jeżeli zastanawiasz się jak przyśpieszyć WordPressa to bardzo dobrze trafiłeś. W tym artykule odnajdziesz, masę narzędzi oraz strategii które pozwolą Ci w miarę nieinwazyjny sposób poprawić prędkość ładowania się twojej strony.

Dlaczego przyśpieszenie WordPressa jest ważne?

Czasy ładowania strony jest  bardzo ważny. Głównym powodem w jakim użytkownicy/klienci siadają przed ekran komputera jest wygoda i oszczędność  czas. My jako wydawcy musimy im te podstawowe warunki zapewnić.

By nie być gołosłownym przywołam tu kilka bardzo ciekawych statystyk.

Optimizely dodało sztuczne opóźnienie na stronie Telegraph i zanotowało ogromny spadek odsłon: 11% dla 4-sekundowego opóźnienia  i 44% dla 20-sekundowego opóźnienia.

https://blog.optimizely.com/2016/07/13/how-does-page-load-time-impact-engagement

Staples zmniejszył mediane czasu ładowania strony głównej o  1 sekundę i skróciło czas ładowania dla 98% stron  o 6 sekund. W rezultacie, konwersja wzrosła o 10%.

http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds

 

Pamiętać również należy, że są to duże brandy, którym czasem sporo wybaczamy. Jeżeli ktoś kupuję regularnie na Allegro, to nie zrezygnuję z tej usługi gdy strona zwolni, lub nawet gdy przestanie działać. Rozkręcają jednak swój biznes/bloga, lub go dynamicznie rozwijając, musimy starać się podwójnie. Wszystko ma być, płynę, sprawne, zrozumiałe.

Jak sprawdzić prędkość strony?

To proste! Wystarczy użyć tych kilku przykładowych narzędzi:

Przyśpieszenie WordPressa a SEO

Dwoma kolejnym powodami dla których warto pochylić się nad przyśpieszenie strony jest perspektywa UX oraz SEO. Nie mówiąc już o erze mobile.

Tej pierwszej z logicznego punktu widzenia, nie muszę tłumaczyć.  W kwestii optymalizacji, testy nie przedstawiły jasnych dowodów, jednakże wpływ prędkości strony na jej pozycję jest oficjalnym stanowiskiem Google.

https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html

Przyśpieszanie WordPressa

Więc co można zrobić, aby uczynić wordpressa szybszym? Oto kilka prostych sposobów, aby utrzymywać czas ładowania strony na  niskim poziomie.

  1. Dobór hosta/serwera: Dostajesz to, za co płacisz. Tania oferta może bardzo wpłynąć na szybkość ładowania strony, a w miarę jej rozwoju i upływu czasu będzie coraz gorzej. Nie wspominając o darmowych rozwiązaniach. Więc upewnij się, że wybrany przez Ciebie hosting odpowiednio spełnia potrzeb Twojej firmy lub bloga. Radzę zaczerpnąć opinii znajomych, poszukać co nieco w sieci:

http://www.webhostingtalk.pl/ranking/ Osobiście polecam- zdrowy rozsądek.

  1. Optymalizacja ogromnych i „ciężkich” obrazków: Obrazy i fotografie, które pożerają zasoby serwera i których czas załadowania trwa w nieskończoność znacznie zmniejszają prędkość twojej strony.

Zalecane formaty:

  • Format PNG dla obrazów, które nie wymagają wysokich detalach, takie jak logo, części strony.
  • Format JPEG dla zdjęć.

Podstawowe 3  kroki związane z plikami graficznymi:

  1. Przed wrzuceniem na serwer staraj się możliwie maksymalnie zmniejszyć rozdzielczość obrazków.
  2. Po zmniejszeniu rozdzielczości skompresuj obrazki programem np.:
  1. Zainstaluj wtyczki do automatycznej kompresji (WP Smush – Image Optimization).

Jeżeli masz już dużo zdjęć, i rozwiniętego bloga, a nie chcesz wrzuć wszystkiego od nowa, to częściowo problem może rozwiązać nam właśnie ta wtyczka. W sposób hurtowy skompresuję pliki już znajdujące się we wpisach WordPress.

3. Wybór odpowiedniego motywu: Ich konstrukcja i projekt ma wielki wpływ na szybkość ładowania strony. Za zwyczaj im prostszy theme tym szybciej działa. Przed wyborem, lub w trakcie planowania jego zmiany musimy koniecznie zwrócić uwagę na szybkość jego działania*.

*sprawdzić to można programami podanymi  wcześniej.

Oto przykładowe zestawienie bardzo szybkich motywów: http://wpdean.com/fastest-wordpress-themes/

Pamiętaj aby po każdej zmianie tematu skorzystać z wtyczki Force Regenerate Thumbnails, która dopasuje Ci wszystkie zdjęcia do nowego motywu.

UWAGA!: W przypadku, braku możliwości zmiany themu, jesteśmy skazani na zlecenie optymalizacji komuś bardziej wyspecjalizowanemu. Ponieważ może się to wiązać z nieefektywnością i jakością samego kodu.

4. Zmniejszenie liczby aktywnych wtyczek:  Każda dodatkowa wtyczka to dodatkowy balasy dla twojej strony. Staraj się ograniczyć ich liczbę do minimum potrzebnego do funkcjonowania i utrzymywania najważniejszych funkcji.

5. Zmniejszenie liczby reklam i banerów: Wiele reklam może przeszkadzać  odwiedzającym witrynę w dodatku często zdarza się, że obciążają stronę co wpływa na zmniejszenie szybkości  jej ładowania.

6. Zmniejszenie liczby widgetów: Wiele, nieprzetestowanych i dużych widgetów może znacząco wpłynąć na działanie twojej strony.  Sprawdź, czy z któregoś mógłbyś zrezygnować posiłkując się wykresami z aplikacji testującymi prędkość.

7. Instalacja wtyczki do cache’owania strony: W3 Total Cache lub. WP Super Cache.

8. Instalacja wtyczki do przyśpieszenia: Speed Booster Pack. Wtyczka zawiera bardzo dużo ciekawych opcji, które pomogą nam w przyśpieszaniu WordPressa.

UWAGA!: Opcję pluginu takie jak Move scripts to the footer, Minify all CSS styles, Insert all CSS styles inline to the footer mogą uszkodzić a czasem spowolnić działanie strony. Zalecane dla osób nie bojących się przeinstalowywania motywu. W razie niepewności zalecana jest konsultacja z Webmasterem.

 

Czego możemy się nauczyć od „sprzedawców marzeń”? Case study landing page’a!

Jeżeli zajmujesz się e-commerce z pewnością znasz doskonale cechy i funkcje landing page’y. Nie wdawając się w szczegóły są to strony, które mają przede wszystkim sprzedawać (ewentulanie zamykać kanał i zbierać leady). Stąd tak ważna jest ich konstrukcja.

Poszukałem trochę w sieci i oto kilka jego ważnych cech/części.

  1. Nagłówek
  2.  Call to action
  3. Najważniejsza wartość
  4. Grafika
  5. Rekomendacje

Oraz treść landing page’u:

    • 100% odwzorowania – Landing page musi być logicznym rozwinięciem reklamy.
    • Wartość dla klienta (ang. Unique Seling Proposition)
    • Język korzyści
    • Potwierdzenie skuteczności (ang. Social Proof)
    • Dywersyfikacja działań/źródeł
    • Wezwanie do działania (ang. Call To Action)
    • Formularz

Źródła : http://blog.landingi.pl/skuteczny-landing-page/, oraz http://blog.landingi.pl/skuteczny-landing-page-w-procesie-zbierania-leadow/

Skoro już wszystko wiemy, przejdźmy do meritum. Czyli case study landing page’a.

Tytułowi sprzedawcy marzeń to nie kto inna jak handlowcy leków na łysienie. Pewnie spytacie mnie czemu akurat to?

Nie, nie łysieję. Nie ma z tym problemów. Trafiłem na taki landing ze zwykłej ciekawości.  Osobiście mam do tego rodzaju branży bardzo duży szacunek. Bez „bandy” brand managerów, pr managerów, social ninja managerów, e-commerce managerów, analitików small, medium i big date oraz reklamy zewnętrznej potrafią wicisnąć to co najlepsze z sieci –  sprzedaż.

Zaczynajmy!

Witam na portalu?!

Oczywiście link: http://medicalfacts24.com/1/ mam nadzieję, że go nie usuną szybko.

landing page przykład

Zdziwieni? Ja też!

Landing page tej stron ma formę naukowego portalu. Nagłówek – nieklikalny, menu- nieklikalne, widgety...Ale nie po to tu przyśliśmy prawda?:)

Rozkładamy na części pierwsze. 12 części landing page’u.

  1. Nagłówek – w odpowiednim miejscu. Magiczny trójkąt Google. Więcej na: Skuteczny landing page. Przeczytałem, zapamiętałem. Szwajcaria? Dobra marka kraju. Rozwinięta medycyna.
  2. Attention button – To już dla mnie za drobne. Jestem internetowym maniakiem i „milenialsem” ale sporo osób to pewnie przeczyta.
  3. Prawdziwa twarz– #ładnapani i do tego reporteka. Wygląda jak z telewizji.
  4. Media proof -Duże media proof. Nie znam ale wyglądają na popularne.
  5. Social media proof. Kurde! 900 tyś fanów!
  6. Science proof – Znowu naukowe potwierdzenie. Do tego dochodzą wykresy. Uwielbiamy wykresy! Duża skuteczność. Nie 100%… trochę skromnie ale skutecznie 😉

To dopiero połowa. Nieźle. W dodatku jeszcze nikt mi nic nie chce sprzedać! 😀  Mam full-control mogę sobie przewijać przeglądać i czytać. Strona ładuję się mega szybko 🙂

landing page2

7. Gra na emocjach/Język korzyści – Smutne. Mam to samo… Tekst naukowy nie czytam. Bardzo zgrabny do czytania. W ładnej kolumnie. Niezła typografia. Bloki dobrze podzielone. Nie za długi, nie za krótki. Ze skanowania wnioskuję, że język korzyści też jest 😉

8. Photo proof – Prawa strona. Obrazki! W końcu coś widzę! Przed i po! Fajnie to wygląda musi być skuteczne. „Wypowiadają” się zwykli ludzie 🙂

9. Statistic proof– Ankieta dla twardogłowych. 9/10 osób. Nieźle jak w telewizji.

Teraz najlepszy grubasek.

landing page 3

10. Widget gwarancji-No jak mogło go zabraknąć. Rabaty! 100% satysfakcji! Promocję dla czytelników! 

176oi4

11. Normalny link. Niebieski, podkreślony. Jak za czasów starych dobrych „Internetów”.  Nikt nie będzie się wahał czy to link! Nikt!

12. Social media proof – TO jest najlepsze!  Kolejny social proof! Pierwsze dwa z pytaniami o opinie. Żadne sztuczne zachwalanie! Nie, nie! Potem tak! Równowaga jak w ying i yang.

176okb

Dopiero jak się już przekonam i się zdecyduję klikam w link. Tu już wita nas normalny landing. Jestem spokojny. Przecież sam tu przyszedłem. I to z fajnej naukowej stron/portalu.

Tutaj jeszcze coś ode mnie co stworzyłem wieki temu.

Podsumowanie:

  1. Nagłówek? Piękny!
  2.  Call to action? N/D
  3. Najważniejsza wartość Jest!
  4. Grafika Jest!
  5. Rekomendacje Są!

Treść:

  • 100% odwzorowania – Landing page musi być logicznym rozwinięciem reklamy. Zaliczona!
  • Wartość dla klienta (ang. Unique Seling Proposition) Jest!
  • Język korzyści. Jak najabrdziej!
  • Potwierdzenie skuteczności (ang. Social Proof) Nawet kilka razy!
  • Dywersyfikacja działań/źródeł N/D
  • Wezwanie do działania (ang. Call To Action) No nie ma! Ale i tak kliknąłem!
  • Formularz N/D

Zapraszam do komentowania i wyrażania swoich opinii!

Czy ładne sprzedaje? Jak ważny jest persona dla której sprzedajemy?  Ma podobać się tobie czy klientowi?

Podrzucajciej case’y!

Audyt UX templatki sklepu  internetowego + (szablon Excel ENG.)

Audyt UX (badanie użyteczności)  zapewnia wgląd oraz podstawy do oceny przydatności  badanego systemu oraz sprawdza w jaki sposób system wspiera wykonywanie zadań przez użytkowników. Zazwyczaj przybiera on formę scenariusz z celem. Może to być wykonanie czynności np. zamówienie biletu, lub sprawdzenie ceny lotu. W przypadku aplikacji sprawne korzystanie z systemu.
Aby to zrobić, należy najpierw zdefiniować kilka scenariuszy dla  użytkownika. Powinny one obejmować wspólne i ważne czynności, które są kluczowe dla powodzenia systemu. Na przykład, jeśli jest to sklep to może to być zamówienie przedmiotu, odnalezienie produktu, zostawienie kontaktu.

Będzie on również zależny od wersji z jakiej korzystam np. mobilna lub wersja desktopowa.

Do każdego ze scenariusz powinno również przygotować odpowiedzi na następujące pytania?

  1. Kto korzysta z systemu? Czy używała go wcześniej? – nie trzeba budować bogatej osobowość wystarczą te podstawowe informację.
  2. Co on lub ona próbuje zrobić? Jakie zadanie użytkownik próbuje podjąć? Czy jest to pierwszy raz kiedy ta osoba zmaga się z tym zadaniem?
  3. Dlaczego użytkownik korzysta z systemu? Jaki jest jego cel?
  4. Jakie jest urządzenie użytkownika i gdzie z niego korzysta?

Liczba scenariuszy zależy od rozmiaru badania oraz samego systemu. W moim artykule skupię się na jednym – odnalezieniu itemu i złożeniu zamówienia na desktopie.

Po zdefiniowaniu każdego scenariusz sprawdzamy jakie jest prawdopodobieństwo podjęcia akcji przez użytkownika  oraz jak osiąga swój cel. Oczywiście to to niemożliwe, aby wiedzieć dokładnie, jakie działania podejmie, więc najlepiej jest oprzeć nasze  przypuszczenia na następujących pytaniach:

  1. Czy użytkownik wie, co zrobić?
  2. Czy istnieje wyraźna droga którą użytkownik ma podjąć? Czy jest oczywiste, co użytkownik musi zrobić na tym etapie?
  3. Czy użytkownik widzi co ma zrobić?
  4. Czy wezwanie do działania jest oczywiste? Czy jasne jest, w jaki sposób użytkownik zakończy ten krok?
  5. Czy użytkownik wie, czy jego  działanie jest prawidłowe?
  6. Czy występuję sprzężenie zwrotne (czy system reaguję na działania użytkownika)? Czy jest jasne dla użytkownik, że  znajduje się na właściwej ścieżce lub etapie?

Tyle w teorii!

Czas na Audyt UX! Zaczynajmy!

Temlatka REF: Atelier – Creative Multi-Purpose eCommerce Theme

Wersja Live-preview

Cel: Kupno koszulki.

Choć nie jestem specjalistą, możemy wstępnie uznać, że ten audyt jest ekspercką analiza heurystyczna, która opiera się na weryfikacji kluczowych aspektów z perspektywy usability  (np. czy dostępna jest wyszukiwarka produktów; czy użytkownicy są informowani, gdzie się znajdują etc.). Analiza posiada również elementy wędrówki (ang. cognitive walkthrough), która pozwoli ocenić serwis w ujęciu osiągania celów. Znajdziesz tu również kilka moich skromnych uwag.

[alert-success]O różnicy między testem eksperckim a testem użyteczności można przeczytać tutaj: http://www.webcredible.com/blog/expert-usability-review-vs-usability-testing/[/alert-success]

Omawiane tu będą moje subiektywne wrażenia z korzystania ze strony. Również te wizualne.  Sam audyt UX znajduję się w excelu w tabelce do ściągnięcia na dole wpisu. Zawiera on więcej szczegółów i jest w języku angielskim ( lvl. easy). Źródło oryginalne: http://www.uxforthemasses.com/blog/wp-content/uploads/2011/02/Usability-review-template.xls

Pierwszą rzeczą jaka mi się spodobała to „przekazanie” odwiedzającem natychmiastowej informacji o tym, że jest się na stronie sklepu. To na pewno nie jest, blog, portal ani aplikacja.

1ux

Od razu rzuciło mi się w oczy pasek informujący o:

  1. Darmowej dostawie (nieważne, że powyżej 100$).
  2. Transporcie w każdy kont świata, szybkiej wysyłce.
  3. Oraz prezencie!

Jeszcze nic nie zamówiłem a już mi się tu podoba. Rozwiany został mój „strach” na temat drogiej dostawy, możliwości samego transportu, poinformowano mnie również, że towar zostanie natychmiast wysłany!

Uwielbiam jak każdy, szybkie wysyłki. Dodajcie jeszcze możliwość śledzenia i „jestem w domu”.

W dodatku czeka na mnie jakiś prezent!

Następnie przewijam sobie od góry do dołu. Mam władzę i nic mnie nie blokuję. Elementy delikatnie animują by zwrócić na siebię moją uwagę. Sprawdzam dane teleadresowe strony aby upewnić się, że to prawdziwy sklep. W wersji demo takich danych nie ma ale miejsce na te informacji jest przygotowane i wyeksponowane.

2UX

Na środku strony odnajduję kategorie koszulek. Jestem praktycznie pewny, że  przycisk przekieruje mnie do strony kategorii. Najechałem na niego  i zareagował. To przycisk. Klikam.

3ux

Strona kategorii ma wszystko to czego potrzeba. Duży tytuł, po lewej najpotrzebniejsze filtry, po prawej bardziej szczegółowe.

4ux

Bardzo cieszy mnie, że jest sortowanie po popularności. Jeżeli na czymś się nie znam (w tym przypadku modzie) to patrzę co jest najbardziej popularne w interesującej mnie cenie.  Wykorzystam wiedzę innych.

Strona produktowa zawiera wszystko co trzeba. Cena mogłaby być większa ale to mi nie przeszkadza. Są również oceny użytkowników ale myślę, ze to ryzykowne zagranie. Wymagana jest tu pilna i regularna administracja. Osobiście czytam je jeżeli wyglądają naturalnie i dotyczą sprzętu technologicznego.

5ux

Mimo jednolitego design od razu widzę gdzie znajduję się przycisk dodaj do koszyka.

Zdziwiły mnie przyciski social media. Nigdy nie widziałem, żeby ktoś wrzucił coś takiego na walla choć, może to wynikać ze rodzaju moich znajomych.

Na dole znajdujemy oczywiście podobne produkty. Bardzo dobry pomysł, może coś wpadnie mi w oko.

6ux

Podoba mi się wybrana koszulka. Dodaję do koszyka.

Strona (system) zareagowała. Symbol koszyka zawibrował i przekierował mój wzrok na symbol mojego koszyka. W dodatku prawym górnym rogu pojawiło się okienko z moim zamówieniem. Ujawnia się ono także za każdym razem gdy najeżdżam na koszyk.

koszyk UX

 

 

Czas zaglądnąć do swojego koszyka. Można do niego wejść używając ikonki lub klikając w duży buton.

Na tym etapie zabrakło dodatkowego okienka. Mowa tu o: Kupujący ten produkt zamawiali również.

W wersji demo sklep nie posiada żadnych danych więc może to wynikać z tego powodu.  Może też po prostu nie być tej opcji.

7ux

Postanowiłem kupić, dwie takie koszulki.  Zwiększam ilość. Nic się nie dzieje 🙁

Bardzo szybko odnajduję jednak: Zaktualizuj koszyk. Klikam.

Strona zareagowała i uwzględniła moje zmiany. System potwierdził zmianę odpowiednim i widocznym komunikatem.

Wszystko się zgadza.

Miejsce na wpisanie kuponu jest trochę zwodnicze ponieważ nie do końca  wiadomo, czy jest to okienko do wpisywania. Opisałbym go po prawej stronie a w miejscu okienka umieścił przykładowy format kodu.

Przechodzimy do realizacji zakupów.

8ux

Na stronie odnajduję…

  1. Numer telefonu do obsługi klienta
  2. Wezwanie do zalogowania dla stałego klienta.
  3. Wezwanie do wprowadzeniu kuponu.
  4. Email do obsługi oraz FAQ
  5. Po lewej standardowe  i niezbędne pola na dane do realizacji wysyłki.
  6. Po prawej rodzaje płatności oraz podsumowanie zamówienia.

Podczas wprowadzania danych strona reaguję na moje działania. Gdy wprowadzam prawidłowe dane pola podkreślane są na zielono. Gdy pojawia się problem (np. nieprawidłowy email) podkreślane są na pomarańczowo.

Tu brakuję mi przykładowych formatów.

9ux

Po wypełnieniu danych przechodzimy do wyboru płatności.

9ux

Podoba mi się, że strona tłumaczy mi od razu, że mimo braku konta Paypal będę mógł zapłacić. Znajdują się tu również link do informacji: Czym jest Paypal.

Jeszcze wykaz błędów:

10 ux bledy

Formularz reaguję tylko na błąd zawarty w email. Numer zaakceptowany!

11 ux

Po więcej szczegółów dotyczących oceny templatki w pliku.

Zachęcam do lektury każdą osobę zajmującą się na co dzień, obsługą, tworzeniem oraz audytowaniem stron e-commerce.

[alert-success]Ściągnij plik:  Audyt UX.[/alert-success]

Ocena templatki według arkusza audytu UX: 89/100 punktów.
Ja oceniam ją również bardzo dobrze.

Na koniec podsyłam wam coś na rozluźnienie na temat audytów UX.

Your website should be so simple, a drunk person could use it.

You can’t test that. I’ll do it for you.

Więcej o projekcie na stronie http://theuserisdrunk.com/

Jestem gotowy rozpocząć taki projekt? Są chętni?!

Źródło części teoretycznej i fotografii:

http://www.uxforthemasses.com/usability-reviews/

Harris & Ewing,, photographer. [Woman seated with a psychograph, a phrenology machine, on her head] http://loc.gov/pictures/resource/hec.36580/

Top 4 programów do tworzenia heat mapy

W teorii, heat mapa jest to dwuwymiarową reprezentacją danych, w którym wartości są przedstawione za pomocą kolorów. Prosta mapa ciepła zapewnia natychmiastową wizualną podsumowanie informacji. Bardziej rozbudowane mapy cieplne pozwalają odbiorcom łatwiejsze zrozumienie złożonych zestawów danych.

Gdy mowa o heat mapie związanej ze stronami internetowymi służy ona do badania szczegółowego zachowania użytowników.

Heat mapy z grubsza można podzielić między heat mapy śledzące ruch myszy i heat mapy śledzące ruch gałek ocznych (eyetracking).  Większość przedsiębiorstw korzysta z heat map śledzących ruch myszki. Głównie ze względu na ich efektywność cenową.

[alert-success]Więcej o badaniach znajdziesz we wpisie Najnowocześniejsze badania marketingowe.[/alert-success]
Jedną z głównych różnic między tymi dwoma rozwiązaniami jest to, że podczas korzystania z funkcji śledzenia myszy, otrzymujesz dane od rzeczywistych użytkowników. W przypadku korzystania z eyetrackingu, testowana jest odpowiednio dobrana grupa ludzi. W takich badania często wyrwanie badanych z ich normalnego środowiska, może doprowadzić do zniekształconych wyników.

Inspectlet

Inspectlethttp://www.inspectlet.com
Inspectlet Ceny zaczynają się od $ 39 / miesiącznie (lub $ 33 / miesiącznie, przy rocznej opłacie) do 5000 wizyt. Wolne Plan jest dostępny dla 100 wizyt miesięcznie.
Zobacz ceny
Przegląd
Obejmują click tracking, śledzenie przewijania, segmentacja i więcej.
Dodatkowe funkcje obejmują nagrania ekranu wizyty, analizy formularzy i wiele innych.

Mouseflow

http://mouseflow.com
Cenowy Mouseflow zaczynają się od $ 19 / miesiąc do 1000 wizyt. Wolny plan jest dostępny do 100 wizyt miesięcznie.
Zobacz ceny
Przegląd
Heat mapa obejmują ruch myszy, przwijania, segmentacja, i więcej.
Dodatkowe funkcje obejmują nagrywanie ekranu oraz inne.

WIDEO

Crazy Egg

http://www.crazyegg.comcrazy egg

Crazu Egg prezentuję się najkorzystniej w tym zestawieniu. Ceny zaczynają się już od $ 9 / miesiączie do 10.000 odwiedzin, ale aplikacja ograniczona jest do 10 aktywnych stron.
Zobacz ceny
Heatmapy obejmują click tracking, śledzenie przwijania, segmentacja, i więcej.

WIDEO

Luckyorange

a68419d37ee0e57c0efd3c64d0344386http://www.luckyorange.com

Opłaty za Luckyorange zaczynają się od $ 10 / miesiącznie (lub $ 9 / miesiącznie, przy opłacie rocznej) do 50.000 odsłon.
Zobacz ceny
Przegląd 
Heat mapy obejmują ruch myszy, śledzenie kliknięć, przwinięć, segmentacja, i więcej.
Dodatkowe funkcje obejmują nagrania ekranu, analizy w czasie rzeczywistym, analizy formularzy,czat na żywo, ankiety i wiele innych.

WIDEO

Hotjar

hotjarhttps://www.hotjar.com/

Zaczyna się od pakietu darmowego do 2,000 odsłon dziennie, możliwość tworzenia mapy cieplnych, ankiet, oraz 100 nagrań. Wersja pro już od 29 € miesięcznie.

Zobacz ceny

Przegląd

Dodatkowe funkcję obejmują, formularze, ankiety i kwestionariusze oraz nagrania zachowań użytkowników.

Inne podobne aplikacje:

Heat Map

Fullstory

To już koniec. Znacie podobne aplikację? Chcielibyście coś dodać? Piszcie śmiało w komentarzach.

Jak wygląda skuteczna strona produktowa?

Skuteczna strona produktowa jest niezwykle ważne zarówno dla użytkowników, jak i dla samego sklepu online.

Wynika to z tego z tego prostego względu, że jest kluczowym etapem w trakcie dokonywania zakupów (jak nie najważniejszym). Uznaję się również, że projektowanie stron produktów jest trudne z uwagi na liczbę sprzecznych wymagań, które często stawia się takim stronom. W trakcie prac nad takimi stronami nieraz trzeba zmierzyć się z klasycznym problemem z obszaru projektowania user experience tzn:

  •  zaspokoić potrzeby użytkowników,
  •  zadbać o cele biznesowe.

Dziś skupimy się na potrzebach użytkownika:

JAKA JEST CENA? CZY OFERTA JEST KORZYSTNA DLA UŻYTKOWNIKÓW?

Osoby robiące zakupy w sieci przywiązują bardzo dużą wagę do ceny. Choć trend ten ulega zmianie to nadal jest  najczęstszym  powodem decydowania się na zakup online.

[alert-success]Więcej o zachowaniach konsumentów przeczytasz tu:Online buyer behavior data.[/alert-success]

 Informują również koniecznie o możliwych zniżkach oraz rabatach.

CZY TOWAR JEST DOSTĘPNY W MAGAZYNIE?

Użytkowników może bardzo  sfrustrować sytuacja, gdy znajdują idealny produkt za świetną cenę, po czym okazuję się, że towar jest niedostępny. Upewnij klientów, że produkt znajduje się w magazynie. W miarę możliwości poinformuj na stronie porduktowej, ile sztuk jest jeszcze dostępnych.

JAKIE SĄ KOSZTY DOSTAWY?

Każdemu z nas zdarzyło się znaleźć tani produkt, po czym przygasić nasz entuzjazm po zaznajomieniu się z  wysokimi kosztami dostawy. Dostawa produktów budzi w użytkownikach poważne obawy, dlatego obniż ich niepokój (anxiety), udostępniając zrozumiałe informacje o dostawie.

[alert-success]Więcej o rodzajach niepokojów przeczytasz: Anxiety attacks! (Or, how to stop worrying and love the privacy statement)  [/alert-success]

skuteczna strona produktowa
Przykład bardzo dobrze zaprojektowanej strony produktowej.

JAK DOKŁADNIE WYGLĄDA PRODUKT?

Ważne jest aby zrekompensować użytkownikom to, że nie mogą osobiście przyjrzeć się produktowi. Udostępnij zdjęcia i filmy i spróbuj ożywić produkty. Pomyśl, jak zaproponować klientom jak największy komfort, jeśli nie mogą wziąć produktu do własnej  ręki. Dobra strona produktowa musi zawierać dobrej jakości zdjęcie najlepiej z zoomem.

POTRZEBUJE CZEGOŚ JESZCZE?

Jeśli produkt do prawidłowego działania wymaga produktów komplementarnych (np. baterii), zadbaj o to, aby w momencie dokonywania wyboru klienci o tym wiedzieli. Dzięki temu nie otrzymają pełny produkt gotowy do natychmiastowego  użycia. Pozwala to uniknąć oczekiwania na dotarcie niezbędnych akcesoriów.

WYJAŚNIJ UŻYTKOWNIKOM, JAK KORZYSTAĆ Z PRODUKTU I JAK SPEŁNIA ON ICH POTRZEBY

Klient nie zawsze dokładnie wie, jak działa dany produkt i jakie daje mu korzyści. Strona produktu może  posłużyć do tego, by poinformować użytkowników o tym, jak dany produkt funkcjonuje i dlaczego może okazać się przydatny.

CZY W DANEJ WITRYNIE MOŻNA BEZPIECZNIE DOKONYWAĆ ZAKUPÓW?

Możliwe, że zajmiesz się stroną produktową dla mało znanej marki, która nie zdobyła sobie jeszcze zaufania klientów. Pomyśl o tym, jak zbudować wiarygodność za pomocą informacji o zabezpieczeniach, o historii organizacji, o firmie matce oraz opinii klientów. Możesz również postarać się o odpowiednie protokoły zabezpieczające np. SSL.

SKUTECZNA STRONA PRODUKTOWA A RÓŻNE KOLORY I ROZMIARY?

Klienci internetowi mają konkretne wymagania, które trzeba zaspokoić. Możliwe, że dla użytkownika kolor nowej koszuli nie jest najważniejszy, natomiast koniecznie musi mieć odpowiedni rozmiar.

Nie należy jednak przesadzać z różnorodnością i ograniczyć sam wybór.  Na podjęcie decyzji potrzeba więcej czasu. Trzeba więcej rzeczy przemyśleć, dokonać wyboru, co z kolei wywołuje stres.

[alert-success] Więcej w książce: „Paradoks wyboru – Dlaczego więcej znaczy mniej” Barry Schwartz[/alert-success]

JAK WYGLĄDA POLITYKA ZWROTÓW?

Klienci internetowi często martwią się o to, czy będą mogli zwrócić kupiony w internecie produkt. Możesz rozwiać ich wątpliwości, prezentując precyzyjną  politykę zwrotów.

WYJAŚNIJ DLACZEGO KLIENT MUSI KUPIĆ TEN PRODUKT TERAZ?

Zostało udowodnione, że zarówno u ludzi jak i u małp,  reagujemy irracjonalnie jeśli chodzi o niechęć do straty.

Ważne jest, aby pamiętać, że istnieje różnica między rzeczywistą a domniemaną  pilnością. Prawdziwy  to sytuacja w której rzeczywiście mamy ograniczoną ilość zasobów lub czasu, aby sprzedać produkt.

Domniemany to np. użycie  sformułowania: „pośpiesz się, zanim zostaną wyprzedane”, które ma wywołać poczucie pilności, gdy rzeczywiście nie ma takiej potrzeby.

UŻYTKOWNIK CHCE KUPIĆ PRODUKT

Niezależnie od ceny najważniejszą funkcją strony produktów jest zachęcanie naszego klienta do zakupu.

Zadbaj o to, aby zakupy były jak najprostsze. Musi to być najlepiej zaprojektowany aspekt strony.  Mieszczący się w maksymalnie ograniczonej liczbie kroków.  

Dla klientów rozważających zakup wyjątkową wagę mają opinie innych osób — zwłaszcza jeśli chodzi o produkty lifestyle’owe i o wysokiej cenie. Nie zapomnij również o klarownym CTA (wezwaniu do działania) oraz wyróżnij go używając kontrastu.

OSOBY, KTÓRE OGLĄDAŁY DANY PRODUKT, OSTATECZNIE KUPIŁY…

Internauci coraz bardziej przyzwyczajają się do korzystania z informacji opartych na zachowaniach innych osób.

[alert-success]Więcej w raporcie: Nielsen-global-trust-in-advertising-report-september-2015.pdf [/alert-success]

Jest to przydatne, ponieważ klienci uważają, że mogą w ten sposób wykorzystać pracę wykonaną przez innych. Skonsultuj z programistami i ustal, czy możesz udostępnić tego rodzaju funkcję z dziedziny marketingu behawioralnego.

POZWÓL UŻYTKOWNIKOM PRZEJRZEĆ PODOBNE PRODUKTY

Ważne jest, aby pomóc klientom internetowym ustalić, w którym miejscu katalogu się znajdują i umożliwić im przeglądanie podobnych produktów. Nawigacja powinna to ułatwiać i umożliwiać przechodzenie w górę oraz w dół hierarchii, a także do innych produktów z tego samego poziomu katalogu.

SKUTECZNA STRONA PRODUKTOWA A DOSTĘPNE FORMY PŁATNOŚCI

Klienci oczekują, że w trakcie zakupów w Internecie będą mogli skorzystać z wszystkich standardowych form płatności, a przede wszystkich z tych które zapewniają ochronę przed oszustwem. Upewnij się, że użytkownicy zna  obsługiwane metody, aby nie rozczarował się w momencie dokonywania płatności.

Uwagi, coś do dodania, konstruktywna krytyka, zapraszam do komentarzy.

PS: Publikacja z opóźnieniem ponieważ artykuł ten był przeznaczony na geustblogging jednakże, nie spełnił wymogów żadnego popularnego blożka. Wylądował u mnie i tu mu będzie dobrze 🙂

 

 

 

O podstawach usability słów kilka

Strony internetowe są obecnie jedną z najpopularniejszych form komunikacji. Jeśli nie ma Cię w sieci, to tak jakbyś nie istniał. Jednak to nie sam fakt posiadania strony, świadczy o powodzeniu w internecie. Czyni to jej jakość, przejrzystość i łatwość nawigacji – tym właśnie zajmuje się web usability.

Użyteczność stron internetowych jest podstawą ich funkcjonowania. Jednak jak się okazuje, zaprojektowanie naprawdę ergonomicznej i przyjaznej użytkownikom witryny, dla wielu jest nie lada sztuką.

A przecież wcale nie jest to takie trudne. Web usability jest nauką, która pokazuje w jaki sposób powinna być zaprojektowana strona internetowa, żeby poruszanie się po niej, było dla użytkownika czynnością intuicyjną i nie wymagająca myślenia. Jej założenia pomagają tworzyć strony www łatwe i przyjemne w obsłudze, zarówno dla użytkownika, jak i dla jej administratora. Wielu twórców stron internetowych zbytnio odbiega, od zasad prostoty i przejrzystości, tworząc odstręczające internautów skomplikowane strony i powodując tym samym nieodwracalne straty.

Ergonomia – podstawa web usability

Głównym założeniem web usability jest użyteczność strony zarówno dla użytkownika, jak i dla jej właściciela. Ergonomia równa się wygodzie użytkowania. Dla samych internautów podstawą wygodnego korzystania ze stron www, jest jak najbardziej intuicyjna obsługa, czyli:

  • proste i nieskomplikowane menu, które pozwoli poruszać się po witrynie niemalże w sposób automatyczny,
  • ciągły możliwy szybki powrót do strony głównej,
  • brak ślepych zaułków,
  • intuicyjne kroki,
  • zasada dwóch kliknięć itd…

Ciekawym casem w tym przypadku jest menu zwane jako hamburger. Wielka moda związana z tego typu rozwiązaniem związana była z rozwojem technologii mobile. Na mniejszym ekranie duże menu zaczęto zastępować wspomnianym wyżej hamburgerem.
Rozwinięcie tematu tutaj. eng. http://deep.design/the-hamburger-menu/
Choć według największych okazało się, że to niewypał, wiele stron pozostało przy tym-wtedy nowoczesnym-rozwiązaniu do dziś.
ham

Wracając do budowy strony, badania ruchu gałek ocznych użytkowników internetu – eye tracking, już dawno wykazały, że potencjalny internauta nie czyta całego tekstu na stronie, a jedynie go przegląda(skanuję).

Dlatego kolejnym z najistotniejszych elementów web usability, jest właściwe rozmieszczenie elementów tekstowych i graficznych na stronie. Należy to zrobić w taki sposób, żeby wzrok użytkownika trafił od razu tam, gdzie ujrzy on satysfakcjonujące go treści. Inaczej bardzo szybko opuści on witrynę i raczej już do niej nie wróci.

Najważniejszymi miejscami na stronie staję się tzw. trójkąt  Googla.

Heat-Map-2005-2014

https://www.v9seo.com/blog/2014/10/09/google-eye-tracking-study-reveals-change-google-serps-views/

Przyczyną tego jest głównie to, że w kulturze europejskiej czytamy od lewej do prawej i od góry do dołu. Nawet jeśli skanujemy stronę to ruch jest w kształcie litery Z. 

Na stronach wygląda to bardzo podobnie.

stronammh1

http://blog.clicktale.com/2010/08/03/the-next-big-thing-in-visual-analytics/

Warto też zwrócić uwagę na to, jak ludzie zachowują się wobec zdjęć. W przykładzie poniżej widać, jak wielką uwagę ludzkie oko zwraca na twarz.

https://blog.kissmetrics.com/eye-tracking-studies/

<OFF TOP>  Przy tym spostrzeżeniu przypomniała mi się pewna anegdota o twarzach samochodów. Nawet kiedyś czytałem o tym, że Mini Cooper zawdzięczał swoją sprzedaż głównie przez sympatyczną i uśmiechniętą twarz.

samochody mają twarz

Musi być coś na rzeczy, bo to samo tyczy się wielkich marek np. GetResponse i Amazon, które w swoich logach umieściły element twarzy.

</OFF TOP>

Wracając do tematu, ważne jest aby dłużej zastanowić się nad konstrukcją strony i starać się przekazać użytkownikowi to czego naprawdę potrzebuję i to w jak najszybszym czasie.

Jeżeli użytkownik będzie zadowolony to wróci na stronę nawet przez link bezpośredni. Nie popadajmy w paranoje bounce rate. 

[alert-success]Po więcej w temacie: Obniżanie bounce rate – 5 prostych kroków[/alert-success]

Bardzo ciekawie opisuję to w swojej książce „Nie każ mi myśleć” S. Krug. Wymienia w bardzo ciekawy sposób różnice, między czytaniem książek a przeglądaniem internetu.

Według autora korzystamy z internetu bo:

  • Zazwyczaj spieszymy się. Zwykle korzystanie z Internetu podyktowane jest chęcią zaoszczędzenia czasu. Z tego względu użytkownicy Internetu zazwyczaj zachowują się jak rekiny— albo będą ciągle w ruchu, albo zginą. Po prostu nie mamy czasu czytać więcej niż to konieczne.

  •  Wiemy, że nie musimy czytać wszystkiego. Podczas odwiedzin większości stron internetowych interesuje nas zaledwie ułamek tego, co się na nich znajduje. Szukamy tylko potrzebnych informacji, a pozostała zawartość jest nieistotna. Proces ten odbywa się właśnie przez przeglądanie strony, a nie uważne czytanie jej zawartości.

Cel strony w usability

Odnośnie samej strony jako narzędzia komunikacji i często także zarobku – podstawowym założeniem przy tworzeniu strony, powinno być określenie celu jej istnienia i nastawienie się na jego wyeksponowanie. Inną strukturę będzie mieć strona służąca przede wszystkim do kontakt z usługodawcą niż witryna promująca jakiś produkt, a jeszcze inną budowę będzie mieć sklep internetowy.

Prędkość strony a usabilty

Tego chyba nie muszę opisywać. Strona musi być dynamiczna, ładować i przeładowywać się szybko zarówno na desktopach jak i na urządzeniach mobilnych.

[alert-success]Po więcej w temacie prędkości i audytu strony: 3 darmowe narzędzia internetowe SEO[/alert-success]

Optymalizacja adresu przyjaznej strony www

Dla zachowania zasad web usability, niezwykle ważny jest jak najbardziej zoptymalizowany adres witryny – czyli adres URL. Wskazane jest, żeby był stosunkowo prosty, jak najbardziej trafny – odnośnie treści zawartych na stronie, a także jak najkrótszy. Nie tylko wpływa to na szybkość wyszukiwania strony, ale przede wszystkim na wysokość jej „indeksowania przez wyszukiwarkę„. – moja opinia
Ogromne znaczenie ma również poprawne budowanie linków wewnętrznych, prowadzących do poszczególnych podstron witryny. Przyjazne linki mają prostą budowę i w jak najdokładniejszy sposób odzwierciedlają treści, do których prowadzą. Ważne jest, żeby w tworzeniu linków zachować konsekwencję. Czyli raz obraną strategię, stosować do wszystkich linków zawartych na stronie.

Podsumowanie

Patrząc na podstawowe zasady web usability stron, można się tylko zastanawiać, dlaczego tak wiele witryn ich nie spełnia. Przecież osiągnięcie graficznej przejrzystości strony i jej intuicyjnej obsługi, opartej na prostej nawigacji menu, nie jest jakimś trudnym wyczynem. Wystarczy niekiedy opanować przerost formy nad treścią i wszystko będzie tak jak web usability nakazuje – czyli użytecznie, prosto i przyjemnie.

UWAGA! Na koniec nurtujące mnie od zawszę pytanie na które nie mogę znaleźć w Internecie konkretnej odpowiedzi.

Lepiej się czyta tekst wyjustowany czy zostawiony w taki sposób jak powyżej?