Przewodnik dotyczący poprawy User Experience (UX) witryny WordPress

Opublikowany: 2017-04-22

Optymalizacja strony internetowej pod kątem lepszego doświadczenia użytkownika to nie bułka z masłem, głównie dlatego, że niezbędne narzędzia i/lub wiedza o kodowaniu nie są za bezcen. Ale kiedy strona jest tworzona na platformie, która jest praktycznie znana i lubiana ze względu na łatwość obsługi, UXO ( optymalizacja doświadczenia użytkownika ) jest znacznie mniej uciążliwa.

W WordPressie dostępne są tysiące narzędzi, wiele z nich nawet za darmo, które pomagają lepiej zrozumieć odbiorców (śledzenie i analityka), poprawiać wydajność (wtyczki do buforowania i optymalizacji obrazu) oraz testować i ulepszać (A/B testowanie oprogramowania, takiego jak Nelio, OptimizePress itp.). Ten przewodnik nie dotyczy ich.

W tym przewodniku opisano niektóre z łatwiejszych do przeoczenia aspektów użyteczności witryny WordPress oraz najlepsze sposoby naprawienia tych niedopatrzeń. Zaczniemy od:

Karuzele

Każdy dział w każdej firmie chce karuzeli/suwaków po prostu dlatego, że jest to piękny złoty środek. Każdy otrzymuje swój produkt/kampanię/wiadomość w jednym, najlepiej widocznym miejscu na stronie: w części strony widocznej na ekranie.

Dlatego najbardziej pożądane motywy WordPress zawierają co najmniej jedną wtyczkę slidera (zazwyczaj Revolution Slider). Zobaczmy plusy i minusy takiego podejścia:

Plusy:

Pokazuje najważniejsze wiadomości w jednym miejscu.
Wiadomości mogą mieć priorytet (najważniejszy dostaje pierwszy slajd)
Ma przemawiać do wszystkich segmentów odwiedzających („coś dla każdego”)

Cons:

Użytkownicy zazwyczaj nie czekają, aż slajdy się obrócą, i przeskakują karuzelę po spojrzeniu na aktualnie widoczną ramkę.
Treści slajdów nie są łatwo indeksowane przez boty wyszukiwania, co jest złą wiadomością dla SEO.

Istnieją sposoby na obejście tych wad i ulepszenie UX karuzeli:

Utrzymuj liczbę slajdów/klatek nie większą niż 5.
Daj użytkownikom kontrolę nad nawigacją karuzeli
NIE przekierowuj automatycznie.

Czasami najprostsze rozwiązanie jest najlepsze. Zamiast polegać na fantazyjnych wtyczkach premium z suwakami, możesz użyć lekkich wtyczek JavaScript (jQuery), takich jak Slick, do tworzenia przyjaznych dla użytkownika karuzeli na WordPress.

Zaawansowana nawigacja

Menu główne w nagłówku w połączeniu z dodatkową nawigacją na pasku bocznym to prawie niezawodny sposób na zapewnienie kompletnej i użytecznej nawigacji. Ale jeśli chodzi o ogromne witryny internetowe (zwłaszcza eCommerce lub duże, bogate w treść blogi) z tysiącami stron, sama dodatkowa nawigacja nie wystarczy.

Dlatego potrzebujemy Mega Menu. Ale są też dwie strony tej monety.

Plusy:

Jednolita widoczność: zawartość/strony na niższych poziomach są uwzględniane w mega menu
Oszczędza dodatkowy krok: użytkownicy mogą szybciej dotrzeć do bardziej odległych/niejasnych treści.

Cons:

Wiadomo, że powodują problemy z wydajnością, gdy dodawane są elementy interfejsu użytkownika, takie jak grafika/ikony.
Mniej lub bardziej nieefektywny na stronie ze złą hierarchią treści
Uczynienie mega menu doskonale responsywnym może być wyzwaniem

Zanim zastanowisz się nad zaletami i wadami (i czy potrzebujesz mega menu na swojej stronie, czy nie), musisz dokładnie skategoryzować swoje treści. Taksonomia WordPressa istnieje nie bez powodu. Użyj tego.

Gdy hierarchia treści jest już wystarczająco oswojona i uporządkowana, możesz użyć wtyczek WordPress, takich jak Max Mega Menu, uberMenu itp., aby dodać mega rozwijane menu do witryny. Rozszerzenia WooCommerce, takie jak Ajax Layered Navigation, dodają do sklepu interfejs filtrowania.

Wydajność

Bez względu na to, w co chciałbyś wierzyć: NIE jesteś ekskluzywny.

Użytkownicy nie chcą czekać na treść, więc nie każ im czekać na treść, bo poszukają jej gdzie indziej. Nawet twoje szeregi cierpią z powodu powolnych stron internetowych. To suma zapotrzebowania na optymalizację wydajności w doświadczeniu użytkownika.

Zoptymalizuj swoją witrynę WordPress pod kątem wydajności dzięki:

CDN: opłacalna opcja dla witryn internetowych, które otrzymują globalną publiczność i mają średni lub duży ruch. Wtyczka MaxCDN i W3 Total Cache to połączenie stworzone w raju szybkiego ładowania.

Pamięć podręczna: Jak wspomniano powyżej, W3 Total Cache to jedyna wtyczka do buforowania, której potrzebujesz (nawet bez obsługi CDN). Zapytaj także swoich programistów o rozwiązania po stronie serwera, takie jak Redis i Memcached

Optymalizacja frontonu: Wtyczki takie jak EWWW Image Optimizer kompresują obrazy (bez pogorszenia jakości). Upewnij się również, że w plikach motywów jest jak najmniej wbudowanych CSS i JS. Kompresuj i minimalizuj arkusze stylów i pliki JavaScript.

Zmniejsz zewnętrzne zależności, używaj sprite'ów CSS i bądź wyjątkowo wybredny podczas pobierania wtyczek (im mniej, tym lepiej). Możesz nawet skontaktować się z dostawcą usług hostingowych i poprosić o pomoc. Czasami Twój usługodawca hostingowy powoduje problemy związane z wydajnością.

Modalne wyskakujące okienka

Nie bądź nieprzyjemny w imię interaktywności i konwersji.

Tak, wyskakujące okienko modalne (marketing z przerwami) to świetne narzędzie do konwersji. Istnieją dosłownie tysiące wtyczek (większość wtyczek w mediach społecznościowych ma teraz tę funkcję), które pozwalają przykleić użytkownikom wiadomość „uprzejmie”, przypominając im o udostępnianiu/obserwowaniu/polubieniu treści w mediach społecznościowych, subskrybowaniu lub rejestracji, skorzystać z rabatu i in.

Jest w nim tak wiele rzeczy nie tak… ale do tego dojdziemy za chwilę.

Plusy:

Udowodniono, że poprawia współczynniki konwersji

Cons:

Rozpraszanie: Odwiedzający jest tutaj po treść, a wyskakujące okienko przeszkadza.
Wyskakujące okienka są traktowane jako biały szum (jak wiele reklam), chyba że pasują do ścieżki użytkownika.
ZŁE dla dostępności

Istnieją przykłady wyskakujących okienek, które są ładnie używane w kontekście. BrainPickings.org rozumie swoich odbiorców i promuje ich link „podaruj” tylko wtedy, gdy użytkownik wielokrotnie wchodził na stronę i gdy kończy czytać treść. Wyskakujące okienko Reebok Crossfit ma zły czas, ale nieznacznie nadrabia to zniżką na subskrypcję na stronie produktów.

Źródło: REEBOK

Opóźnienia czasu i wyzwalania są w porządku, ale konieczne jest również skupienie się na szerszym obrazie i powiązanie wyskakującego okienka w sposób, który będzie odpowiedni dla użytkowników, którzy tego chcą.

Jak dotąd wzrost konwersji wynika bardziej ze zwykłego tępego działania, ale jakość konwersji i kolejnych leadów można zwiększyć, gdy robisz to mądrze. Proszenie odwiedzającego po raz pierwszy o zasubskrybowanie strony internetowej nie zapewni Ci wysokiej jakości leadów 99/100 razy.

Spróbuj inteligentnie używać wtyczek WordPress do wyskakujących okienek. Jest kilka (takich jak Popups by Supsystic), które są dobre. Pracuj z nimi, zamiast skupiać się tylko na interakcji na jednej stronie.

Przypis końcowy

Aby poprawić wrażenia użytkownika, miej nadzieję, że przyjmiesz tę radę z przymrużeniem oka i przetestujesz wszystko (użyj Google Analytics lub testów Nelio A/B lub dowolnego innego narzędzia: to zależy od Ciebie).

I obiecaj sobie, że będziesz się doskonalić.

Czytaj więcej Wtyczki WordPress | 5 szybkich poprawek dla Twojej witryny WordPress