Audyt UX strony – co to jest i kiedy warto przeprowadzić audyt user experience

Co to jest audyt UX?

Audyt UX to analiza strony lub sklepu internetowego, którą przeprowadzają zazwyczaj projektanci lub badacze UX. Analiza prowadzona jest na podstawie precyzyjnie zaprojektowanych schematów z udziałem lub bez udziału użytkowników serwisu.

Cel analizy użyteczności strony internetowej

Podstawowym celem analizy użyteczności każdej strony www, jest stwierdzenie w jakim stopniu jest przydatna dla użytkowników. Innymi słowy określenie czy strona zaprojektowana jest w sposób umożliwiający wygodne i efektywne z niej korzystanie. W przypadku sklepu internetowego audyt UX weryfikuje przede wszystkim, czy z punktu widzenia klienta proces zakupowy jest intuicyjny i oczywisty.

Ocena wypadkowa zależna jest od liczby problemów, takich jak słabe strony w zakresie ładowania strony, brak dostosowania strony do urządzeń mobilnych, czy problemy ze struktury strony. Im większa liczba problemów i im więcej z nich ma charakter błędów krytycznych (uniemożliwiających korzystanie ze strony), tym niższa ocena przydatności.

Patrząc szerzej, celem analizy UX jest poprawa wyników biznesowych. Raport z audytu użyteczności wskazuje bowiem najważniejsze problemy strony pod kątem użytkownika, określając jednocześnie ich potencjalny wpływ na osiąganie pożądanych konwersji.

Na czym polega audyt UX?

Jak wspomniałem, audyt użyteczności to identyfikacja możliwych problemów. Dotyczą one różnych cech badanego serwisu.

Część problemów związana jest z projektem strony internetowej. Wygląd, dobór i rozmieszczenie treści, jakość grafiki, słownictwo, ortografia, to niektóre z elementów poddawanych analizie.

Kolejne problemy związane są z użyciem badanego serwisu. Intuicyjność nawigacji, poprawność działania, możliwość zrealizowania wszystkich kroków procesu, zachowanie strony w przypadku wystąpienia błędu to przykładowe składniki brane pod uwagę w trakcie analizy.
Inne problemy dotyczą kwestii technicznych oraz dostępności serwisu.

Prezentacja listy wykrytych niedogodności nie miałaby większego sensu w oderwaniu od kontekstu funkcjonowania strony. Znaczenie problemów jest silnie zależne od grupy docelowej odbiorców i charakteru serwisu. Strona albo jej element uznawany przez jednych użytkowników za oczywisty i przyjazny, dla innej grupy odbiorców będzie irytujący i skłaniający do opuszczenia serwisu. Stronom, które odwiedzamy w celach hobbystycznych, wybaczymy znacznie więcej niż sklepom.

Z tych właśnie powodów raport z audytu kategoryzuje problemy, uwzględniając ich wpływ na skłonność użytkowników do dalszego korzystania z serwisu.

infografika: co warto wiedzieć o audycie UX
Infografika: Co warto wiedzieć o audycie UX.
pobierz pdf

Jak przebiega audyt użyteczności

Audyt UX jest przedsięwzięciem wymagającym systematyczności i dokładności. Tylko metodyczne zbadanie wszystkich aspektów dotyczących UX może dać wiarygodną diagnozę użyteczności serwisu.

Koncentracja na wybranych obszarach, na przykład na systemie nawigacji na stronie, dostarczy zapewne ważnych informacji. Jednak nie będziemy mieli pewności, że w interfejsie nie występują inne problemy, o wyższym priorytecie.

PRZYKŁAD

Analiza procesu przemieszczania się klienta po witrynie e-commerce, od momentu wejścia na stronę sklepu, przez ogólny przegląd i wybór produktu z oferty po przejście do koszyka pokazuje, że proces przebiega praktycznie bez zakłóceń. Ograniczając analizę do tego fragmentu łatwo nie uwzględnić jakości procesu w koszyku, doświadczeń użytkownika związanych z analizą wiarygodności dostawcy, obsługi błędów w czasie przeglądu kart katalogowych produktów etc.

W zależności od potrzeb i rozmiarów sklepu internetowego oraz ograniczeń czasowych lub budżetowych zakres czynności audytu może się różnić.
Poniżej prezentuję zestaw działań składających się na kompleksowe badanie i analizę user experience.

Zebranie wymagań i oczekiwań klienta

Każdy klient jest inny, więc audyt powinien być przystosowany do indywidualnych potrzeb. Dzięki rozmowie z klientem można dostosować metodykę i obszar pokryty przez audyt. Komunikacja i ustalenie wspólnego gruntu powinna być pierwszym krokiem w procesie audytu. Ważnym elementem zbierania wymagań, jest także przekazanie posiadanych informacji dotyczących profilu klientów, ruchu na stronie, opinii użytkowników, zidentyfikowanych problemów ze sprzedażą itp.

Tworzenie persony

Na podstawie danych o grupie docelowej klienta, audytorzy tworzą personę, która jest średnią wszystkich cech odbiorców danego serwisu. Persona UX jest narzędziem, które pomaga audytorom przeprowadzić analizy i badania w kontekście rzeczywistych użytkowników serwisu. W efekcie pozwala zaś na dostosowanie strony do potrzeb użytkowników.

Analiza heurystyczna

Heurystyki to najprościej mówiąc dobre zasady projektowania doświadczeń użytkownika, których używa się jako odniesienie podczas weryfikacji użyteczności witryny internetowej. Wykonując audyt UX, eksperci w trakcie takiej analizy heurystycznej weryfikują, czy strona została zaprojektowana zgodnie z tymi zasadami. Na tym etapie prac często stosowane są listy kontrolne (checklista UX) dostosowane do przeznaczenia badanej strony, a nawet branży, w której działa firma.

Jeśli chcesz pogłębić wiedzę na temat heurystyk, przeczytaj nasz artykuł „Heurystyki Nielsena – co to?„.

Wędrówka poznawcza

Tę metodę stosuje się najczęściej jako wsparcie analizy heurystycznej lub gdy badania z użytkownikami są niemożliwe lub ograniczone. Polega ona na wcieleniu się przez badacza w rolę użytkownika systemu i realizowanie typowych dla niego zadań. Dzięki Customer Journey Map można łatwiej zobrazować sobie scenariusze użycia strony internetowej przez typowego użytkownika oraz sprawdzić wszystkie możliwe procesy w serwisie.

Badania z użytkownikami

Oprócz analizy heurystycznej bardzo ważną częścią audytu, są badania użyteczności z osobami należącymi do grupy docelowej audytowanej strony lub aplikacji. Polegają na wykonaniu wybranych czynności na stronie, często z różnymi wersjami elementów strony. Prawidłowo zaprojektowane i przeprowadzone badania z użytkownikami dostarczają najcenniejszych informacji. Jednak ze względu na czasochłonność i koszty często się je pomija, szczególnie przy pierwszych ocenach jakości funkcjonowania e-sklepu.

Na koniec audytorzy opracowują obserwacje i wnioski z audytu w postaci pisemnego raportu przekazywanego klientowi. Zawartość raportu, a więc jego treść i stopień szczegółowości mogą się znacznie różnić. Wszystko zależy od tego, czego oczekuje zamawiający.

Jeżeli chcesz otrzymać podstawową ocenę kondycji swojego sklepu, wystarczające będzie podsumowanie oceny jakości realizacji procesów biznesowych i wskazanie najpoważniejszych problemów.
Jeżeli praktycznie podjąłeś decyzję o przeprowadzeniu modernizacji sklepu i potrzebujesz konkretnych wytycznych dla developerów, to audyt, siłą rzeczy, będzie obszerny.

Chcesz poprawić działanie swojej strony WWW?

Zamów bezpłatną konsultację UX

Wypełnij formularz, skontaktujemy się z Tobą

Ile trwa audyt UX

Jak widać audyt użyteczności strony internetowej obejmuje kilka etapów. Czas trwania audytu UX w dużym stopniu zależy od tego, czy wszystkie wymienione wyżej zadania są realizowane. Zakres audytu UX dla witryny badanej po raz pierwszy jest szerszy niż w przypadku kontrolnej, okresowej uproszczonej procedury. Kolejny audyt z reguły nie wymaga tworzenia persony, a wędrówka poznawcza może zostać ograniczona do wybranych obszarów serwisu.

Duże znaczenie ma też wielkość analizowanej witryny oraz liczba dostępnych dla użytkownika funkcji. W przypadku audytu UX aplikacji, w których realizowanych jest wiele różnych procesów biznesowych, wpływ na czas trwania ma liczba tych procesów.

Kolejnym czynnikiem jest komunikacja i współpraca między zleceniodawcą oraz audytorami. Jasno określone oczekiwania wobec analizy, uporządkowane, kompletne dane wejściowe i wsparcie na etapie rekrutacji użytkowników do testów UX i wywiadów, wydatnie ograniczają czas badania witryny pod kątem UX.

W praktyce procedura audytu UX wymaga minimum 2 tygodni. Dotyczy to standardowych, średnio rozbudowanych serwisów. Przeciętnie analiza UX przeprowadzana dla e-commerce jest jednak znacznie dłuższa. Od momentu zlecenia do przekazania i omówienia raportu mija najczęściej 6-8 tygodni. Regularnie zdarza się, że prace trwają jednak dłużej.

Wynik audytu UX – co zawiera i jak czytać raport?

Audyt ekspercki powinien zawierać kilka niezmiennych elementów:

  • informacje na temat przyczyn i okoliczności jego realizacji:
    • kto zlecił przeprowadzenie audytu,
    • kiedy i przez kogo audyt został wykonany,
    • jakie dane zostały udostępnione bądź przekazane wykonawcy audytu,
  • zakres analizy:
    • czy audyt dotyczył całej strony, czy jej fragmentów,
    • w jakim stopniu obejmował przegląd procesów biznesowych realizowanych na stronie,
    • czy dotyczył wyłącznie przeglądu stanu istniejącego, czy jego celem było również sformułowanie zaleceń zmian,
  • metodyka prowadzenia audytu:
    • czy przegląd serwisu wykonywany był na podstawie bazowych checklist, czy był prowadzony w wariancie analizy eksperckiej,
    • czy obejmował badania z użytkownikami,
  • podsumowanie:
    • główne zalety i wady badanej strony,
    • ocena wyglądu,
    • pierwsze wrażenie w kontakcie ze stroną,
    • ocena stopnia dopasowania do grupy docelowej,
  • wykaz błędów i problemów usystematyzowany względem części lub funkcji serwisu,
  • wykaz błędów i problemów z podziałem na kategorie (krytyczny, istotny, drobny),
  • ilustracje i przykłady zlokalizowanych błędów i problemów w formie opisów oraz zrzutów ekranu.

W rozszerzonych wariantach audytów raporty zawierają także:

  • określenie potencjalnego wpływu poszczególnych problemów na konwersję i całościowe wyniki biznesowe, najczęściej w postaci szacowania jaka część użytkowników strony internetowej na skutek problemu zrezygnuje z korzystania ze strony,
  • kierunkowe zalecenia dotyczące zmian w serwisie likwidujących bądź ograniczających zlokalizowane problemy,
  • szczegółowe wytyczne projektowe, rozszerzające wspomniane wyżej zalecenia.

PRZYKŁAD

Przeprowadzając audyt UX sklepu internetowego stwierdzono wydłużony czas realizacji płatności online (ponad 3 minuty od wyboru formy płatności, do potwierdzenia zamówienia). Klienci sklepu to w 60% ludzie w wieku 20-24 lata, mieszkający w dużych miastach.
Szacunkowa liczba porzuceń transakcji z powodu opisywanej niedogodności wynosi 45-50% wszystkich użytkowników, którzy dodali produkt do koszyka.

Lektura raportu powinna dać zlecającemu informację o ogólnej kondycji strony pod względem użyteczności. Jeżeli ocena jest negatywna, na podstawie dokumentu można określić ramowy zakres niezbędnych zmian oraz przejść do ich wdrożenia.

Kategorie błędów w raporcie z audytu UX

Powszechnie stosowana jest trójstopniowa skala do określenia ważności problemów i błędów:

  • krytyczny – błąd uniemożliwiający przeprowadzenie procesu biznesowego,
  • istotny – powodujący znaczną uciążliwość w realizacji procesu biznesowego, która może sprawić, że część użytkowników porzuci stronę bez zrealizowania celu wizyty,
  • drobny – powodujący uciążliwość nie mającą dużego wpływu na realizację celu wizyty na stronie przez użytkownika.

Często kategoriom przypisuje się procentowe wartości liczbowe, określające jaka w przybliżeniu część odbiorców wyjdzie ze strony przed dokonaniem konwersji.

Kiedy warto przeprowadzić analizę użyteczności?

Najprostsza odpowiedź brzmi: właściwie zawsze.

Idealna strona internetowa, w której niczego nie można poprawić jeszcze nie powstała. W każdej można zrobić coś lepiej, każdy serwis można dostosować do potrzeb użytkowników, które na dodatek zmieniają się w czasie.

W praktyce ocenę użyteczności strony warto przeprowadzić, gdy osiągnięte korzyści będą większe od kosztów audytu i wdrożenia modyfikacji serwisu wynikających z obserwacji audytowych.

Wyzwalaczami podjęcia decyzji o zleceniu wykonania przeglądu strony pod względem UX są objawy wskazujące na to, że strona internetowa przestała spełniać cele do jakich została stworzona lub spełnia je w stopniu niedostatecznym. Dodatkowo, regularne testy użyteczności pozwalają na bieżąco monitorować i poprawiać jakość doświadczeń użytkowników. Rozważając zatrudnienie audytorów warto pamiętać, że audyt UX może pomóc w prowadzeniu biznesu na wielu płaszczyznach. Od lepszego pozycjonowania strony, w efekcie poprawienia pozycji strony w wynikach wyszukiwania, po poprawę wizerunku marki

infografika: Audyt UX - kiedy warto przeprowadzić analizę użyteczności strony internetowej
Infografika: Audyt UX – kiedy warto przeprowadzić analizę użyteczności strony internetowej.
pobierz pdf

Poniżej opisuję typowe sytuacje, w których warto rozważyć przeprowadzenie audytu ux:

Archaiczna strona www

Znasz na pewno tę pierwszą myśl po wejściu na przestarzałą witrynę: „O rany, strona z późnych lat dziewięćdziesiątych!”. No właśnie.

Internet się rozwija, zmieniają się możliwości sprzętowe i systemowe serwerów oraz urządzeń, którymi posługują się użytkownicy. W efekcie zmienia się dostępna funkcjonalność stron. Zmieniają się trendy w projektowaniu stron internetowych, zmieniają się użytkownicy. Wszystko się zmienia.

Jeżeli strona internetowa nie nadąża ze zmianami, zaczyna być odbierana jako nieaktualna i zacofana. Jeśli na dodatek nie ma opcji dostępnych pod innymi adresami w sieci, trudno liczyć na nowych klientów. Trudno nawet spodziewać się, że sentyment zapewni lojalność dotychczasowych użytkowników.

Sygnały od klientów, że strona jest zbyt skomplikowana

To nieco inna sytuacja. Znasz takie strony na pewno. Pierwsze wrażenie jest dobre. Widzisz, że serwis jest „na czasie”. Tyle, że gdy zaczynasz z niego korzystać, okazuje się, że ktoś coś przekombinował. Może to kwestia nietypowych rozwiązań nawigacji, może masz wrażenie, że dostajesz zbyt wiele informacji. W każdym razie trochę na stronie zbyt barokowo.

Opisane objawy łatwiej zobaczyć na czyjejś stronie. Własny serwis, często wypracowany z trudem i sporym nakładem środków jest dobry, więc… nie może mieć mankamentów. Nie jest łatwo przeanalizować obiektywnie własną stronę, własny sklep.

Dlatego bardzo ważne jest słuchanie uwag użytkowników. Zarówno tych, z którymi zgłaszają się sami, jak i tych uzyskanych przy użyciu ankiet czy badań.

Spadek sprzedaży

Przyczyn spadku sprzedaży w e-sklepie może być wiele. Okresowość sprzedaży, sposób prowadzenia kampanii reklamowych, cykl życia Twojego produktu albo usługi, działania i zmiany w działaniach SEO/SEM, wpływ konkurencji, kondycja gospodarki itp.

Jeżeli rejestrujesz obniżenie obrotów, którego nie potrafisz skorelować z czynnikami zewnętrznymi, być może coś dzieje się na stronie. Może nie zauważyłeś zmiany oczekiwań klientów. Zmiany, która powinna zostać odzwierciedlona w wyglądzie i działaniu Twojego sklepu? Może rynek korzysta z usług towarzyszących (dostawy, płatności), których jeszcze nie oferujesz?

Duży ruch na stronie, ale brak zapytań i sprzedaży

W świecie rzeczywistym sytuacja wyglądałaby jakoś tak: tłum przed sklepem, pełno ludzi między półkami, tylko przy kasie pustki. Jak dzień otwarty w muzeum (bo nawet muzeum potrzebuje pieniędzy z biletów kupionych przez zwiedzających).

Wracając do świata wirtualnego, można by przypuszczać, że klienci albo nie znajdują tego czego szukają, albo po prostu się w sklepie gubią. Tak czy inaczej masz parę kwestii do przemyślenia, może biznesowych, może UX-owych.
Jak wynika z naszych doświadczeń, najczęściej z obu obszarów.

Planowana przebudowa strony www

W tym miejscu wyjaśnienia są chyba zbędne. Masz serwis, który chcesz zmienić. Masz więc doświadczenia z pracy z dotychczasowym rozwiązaniem, masz użytkowników, których możesz zapytać o wszystko co dotyczy korzystania z systemu teraz i w przyszłości.

Nie ma lepszego sposobu na zebranie informacji i określenie wymagań dla nowej wersji strony niż przeprowadzenie szerokiego audytu UX.

Przebudowa strony i spadek wyników

Ostatnia sytuacja, stanowiąca sygnał do przeprowadzenia audytu użyteczności, dotyczy serwisów, które zostały zmodyfikowane i w nowej odsłonie nie spisują się najlepiej.

Być może klienci muszą się przyzwyczaić do nowego wyglądu i nowej funkcjonalności. Jeżeli jednak obroty przez dłuższy czas nie wracają do dawnego poziomu lub znacząco spadła dynamik ich wzrostu, warto wziąć pod uwagę, że stronie przydałby się przegląd pod kątem UX.

Dla kogo analiza użyteczności strony internetowej?

Jak napisałem wcześniej – niemal na każdej stronie, prawie w każdym interfejsie można znaleźć elementy, które dałoby się zaprojektować w sposób lepszy dla użytkowników (przynajmniej niektórych). Napisałem też, że audyt warto zrobić, gdy bilans kosztów i korzyści będzie dodatni.

Istnieją też kryteria, na podstawie których można w miarę obiektywnie ocenić, czy dana strona internetowa lub aplikacja powinna zostać poddana przeglądowi. Te kryteria to:

  • funkcjonalność strony,
  • ilość treści,
  • liczba użytkowników.

Funkcjonalność strony

Wraz ze wzrostem liczby funkcji udostępnianych przez interfejs coraz trudniej jest zaprojektować rozwiązanie intuicyjne, przyjazne i wygodne w użyciu. Im bardzie funkcje są nietypowe, wymagające podania różnych danych tym ciężej zadbać o to, aby użytkownik odnajdywał się na stronie i posługiwał się nią z łatwością.

Długie, wieloetapowe procesy realizowane w interakcji z systemem lub aplikacją, w oczywisty sposób powodują zagrożenie dla użyteczności interfejsu.

Ilość treści na stronie

Liczba informacji udostępnianych na stronie, w szczególności jeśli powiązane są one między sobą, bardzo silnie wiąże się ze sposobem rozmieszczenia i prezentacji danych oraz nawigacją w interfejsie.

Im więcej produktów, im bardziej złożona hierarchia zależności i relacji między nimi, tym większe ryzyko, że klient zgubi się w gąszczu informacji i porzuci stronę. Problemy z poruszaniem się użytkownika w serwisie, czyli inaczej mówiąc z systemem nawigacji, to bardzo często główny czynnik obniżający ocenę użyteczności.

Liczba użytkowników strony

Usłyszałem kiedyś: „To strona tylko dla Twojej cioci. Wiesz co, nie przerabiaj jej, pojedź do ciotki, pogadajcie. Przy okazji zjesz szarlotkę”. I coś w tym jest.

Jeżeli użytkowników jest niewielu i nie wykorzystują serwisu do konkretnych wysokodochodowych (dla właściciela serwisu) operacji, raczej nie warto myśleć o audycie. Natomiast, jeżeli strona ma tysiące, dziesiątki tysięcy, albo więcej użytkowników i przychód właściciela jest wprost proporcjonalny do tej liczby, audyt UX przyniesie wiele cennych informacji. Szczególnie jeżeli odbiorcy nie są grupą jednorodną pod względem przyzwyczajeń, wymagań, wykorzystywanych urządzeń i przeglądarek itp., itd. Lub jeżeli liczba odbiorców gwałtownie wzrasta.

Przykładowe kategorie stron

Łącząc opisane wyżej kryteria można wskazać kilka typowych kategorii stron internetowych, w przypadku których audyt UX jest działaniem wartym przeprowadzenia:

  • strony prowadzące sprzedaż lub ściśle związane ze sprzedażą: sklepy internetowe, marketplaces, porównywarki, katalogi etc.,
  • serwisy dedykowane do komunikacji z dużą liczbą użytkowników: linie wsparcia, biura obsługi klienta itp.,
  • strony operacyjne instytucji finansowych: banki, fundusze inwestycyjne, biura maklerskie,
  • portale informacyjne.

Co dalej po raporcie z audytu UX?

To ostatnia kluczowa kwestia, którą należy wziąć pod uwagę podejmując decyzję o zamówieniu usługi audytorskiej.

Nawet jeżeli Twoja strona spełnia jedno lub więcej kryteriów opisanych w poprzednich rozdziałach, sam audyt nie zmieni sytuacji. Będziesz mieć informację o tym, czy ze stroną jest dobrze czy źle, a jeśli źle, to jak bardzo źle. Być może dostaniesz również wytyczne do zmian wraz z priorytetem ich wdrażania i uzasadnieniem dlaczego priorytety ustawione są właśnie w taki sposób.

Jednak dopóki nie podejmiesz działania, dopóki nie zaczniesz korzystać z informacji, wyniki Twojej strony, serwisu, sklepu się nie poprawią. Musisz podjąć więc kilka ważnych decyzji:

  • będziesz wprowadzać zmiany w istniejącym serwisie, czy zbudujesz go od nowa?
  • jeśli uznasz, że wystarczą zmiany, to które wprowadzisz i w jakiej kolejności?
  • w jaki sposób zadbasz o to, aby nowa wersja strony spełniała oczekiwania UX klientów? zatrudnisz UX designerów? przeprowadzisz badania z użytkownikami w fazie projektowania?

Kiedy znajdziesz odpowiedzi na wymienione kwestie, będziesz mógł ocenić całość kosztów i czas trwania przedsięwzięcia. Bo dobry UX bez cienia wątpliwości się opłaca i to na wielu płaszczyznach. Tyle, że, począwszy od audytu użyteczności, wymaga nakładów.

Czy UX się opłaca?

Jak widzisz, audyt UX jest częścią procesu ściśle związanego ze skutecznością marketingową witryny informacyjnej. Ale czy inwestowanie w user experience to dobry ruch?

Już w latach 60-tych CEO firmy IBM powiedział, że każdy dolar zainwestowany w UX zwraca od $10 do $100. I od tamtego czasu odpowiedź jest niezmiennie taka sama. Najlepiej przekonać się o tym obliczając wskaźnik ROI (Return of Investment) projektu polegającego na modyfikacji witryny na bazie wytycznych z audytu UX.

Audyt UX pozwala dokładnie ocenić, które elementy strony wymagają poprawy, co bezpośrednio wpływa na efektywność całego procesu.

Zainteresowanie użytecznością to stosunkowo nowy trend na polskim rynku. Trend, który idealnie sprawdza się w branży e-commerce. Audyt UX pomaga zidentyfikować problemy, które mogą hamować konwersję i sprzedaż. Dzięki spostrzeżeniom i wnioskom z audytu możesz podnieść konwersję oraz zwiększyć sprzedaż w Twoim sklepie internetowym. 

Na dodatek, z reguły o wiele taniej, niż przy tworzeniu od podstaw, nowego, bardziej UX-owego sklepu.

Ile kosztuje audyt UX?

Koszt audytu użyteczności witryny internetowej zależy od zakresu audytu, na który składa się wiele czynników, takich jak:

  • zakres analizowanych elementów,
  • złożoność serwisu,
  • metody użyte podczas audytu.

Koszt audytu UX może się różnić w zależności od specyfiki strony i wymagań klienta. Ceny mogą zaczynać się od kilkuset złotych za bardzo podstawowe audyty, a osiągać nawet kilkadziesiąt tysięcy złotych za kompleksowe analizy.

To ile kosztuje audyt UX zależeć też będzie od tego komu powierzymy stworzenie dokumentacji. Do tego celu możemy wykorzystać freelancera, agencję marketingową lub agencję UX, która jest wyspecjalizowana w analizie użyteczności.

Podsumowanie

Kompleksowy i metodyczny audyt UX zawsze przynosi właścicielowi strony internetowej wartościowe informacje. Z tego powodu na zawarte w tytule pytanie: „kiedy warto przeprowadzić analizę użyteczności” można odpowiedzieć: zawsze.

Jednak wykonanie audytu kosztuje. Informacje zawarte w raporcie kosztują. Zdobycie danych tylko po to, żeby je mieć nie ma sensu ekonomicznego. Dlatego odpowiedź na pytanie brzmi: audyt UX warto wykonać, gdy przełoży się on na korzyści biznesowe: wielkość sprzedaży, liczbę zapytań, liczbę wejść na stronę. Czyli inaczej mówiąc, kiedy wnioski z audytu doprowadzą do konkretnych zmian w serwisie. No i oczywiście, kiedy modyfikacje podnoszące użyteczność strony doprowadzą do wzrostu konwersji.

Redesign strony internetowej: kompleksowy poradnik

Czym jest redesign strony internetowej?

Redesign strony internetowej to kompleksowy proces odświeżenia i unowocześnienia istniejącej witryny. To znacznie więcej niż zwykła aktualizacja treści czy drobne zmiany wizualne. Redesign obejmuje gruntowne przemyślenie struktury, funkcjonalności i estetyki strony, aby lepiej służyła ona celom biznesowym i potrzebom użytkowników.

Różnica między zwykłą aktualizacją a pełnym redesignem jest znacząca. Aktualizacja może bowiem obejmować dodanie nowych treści, zmianę kilku obrazów czy naprawę błędów. Redesign natomiast to kompleksowe działanie, które może zmienić całkowicie sposób, w jaki użytkownicy postrzegają witrynę i z niej korzystają.

W Polsce, gdzie konkurencja w przestrzeni internetowej staje się coraz bardziej zacięta, redesign strony może być kluczowym czynnikiem decydującym o sukcesie firmy w sieci. Według analiz przeprowadzonych przez PWC, ponad 40% konsumentów deklaruje, że zrezygnowało z zakupu produktu lub usługi ze względu na złe doświadczenia zakupowe. Zdajesz więc sobie sprawę, jak istotna jest aktualna i dobrze zaprojektowana strona.

Redesign to nie tylko kwestia estetyki. To także strategiczna decyzja biznesowa, która może przynieść wymierne korzyści:

  • zwiększenie konwersji i sprzedaży,
  • poprawę pozycji w wynikach wyszukiwania,
  • wzmocnienie wizerunku marki,
  • lepsze dostosowanie do potrzeb użytkowników mobilnych.

Elementy podlegające zmianie podczas redesignu strony internetowej

Przeprojektowanie witryny wymaga analizy i prac w wielu obszarach. Oto ich lista:

Kiedy warto przeprowadzić redesign strony internetowej?

Decyzja o przeprowadzeniu redesignu strony internetowej powinna być podjęta w oparciu o konkretne przesłanki i cele biznesowe. Oto najważniejsze oznaki wskazujące na potrzebę odświeżenia witryny:

  • Spadek ruchu i konwersji. Jeśli zauważasz systematyczny spadek liczby odwiedzin lub zmniejszenie współczynników konwersji, może to oznaczać, że Twoja strona przestaje spełniać oczekiwania użytkowników.
  • Przestarzały design. Trendy w projektowaniu stron zmieniają się szybko. Jeśli Twoja witryna wygląda na przestarzałą w porównaniu z konkurencją, może to negatywnie wpływać na postrzeganie marki.
  • Brak responsywności. W Polsce już ponad 60% ruchu w Internecie pochodzi z urządzeń mobilnych. Jeśli strona nie jest w pełni responsywna, tracisz potencjalnych klientów.
  • Długi czas ładowania. Według badań, 53% użytkowników opuszcza stronę, jeśli ładuje się ona dłużej niż 3 sekundy.
  • Niska pozycja w wynikach wyszukiwania. Jeśli strona nie pojawia się wysoko w wynikach wyszukiwania dla kluczowych fraz.
  • Zmiany w strategii biznesowej. Jeśli Twoja firma przechodzi znaczące zmiany, na przykład rebranding, wprowadzenie nowych produktów czy wejście na nowe rynki.
  • Trudności w zarządzaniu treścią. Jeśli aktualizacja treści w serwisie jest skomplikowana, czasochłonna lub wymaga zaangażowania specjalistów IT.

Inne czynniki wpływające na decyzję o przeprojektowaniu strony

Oprócz wymienionych wyżej elementów, rozważając redesign strony warto uwzględnić również:

  • konieczność zabezpieczenia środków finansowych na projekt,
  • czas pracowników zaangażowanych w redesign,
  • czas od ostatniej aktualizacji strony,
  • zmiany w zachowaniach i oczekiwaniach docelowej grupy odbiorców, a także
  • nowe technologie i możliwości, które mogą zwiększyć funkcjonalność strony.

Korzyści z redesignu strony internetowej

Przeprowadzenie redesignu strony internetowej może przynieść szereg wymiernych korzyści dla Twojego biznesu. Oto najważniejsze z nich:

  • Poprawa użyteczności i doświadczenia użytkownika (UX). Przede wszystkim w zakresie ułatwienia dostępu do poszukiwanych informacji oraz zwiększenia czytelności treści.
  • Zwiększenie konwersji i zaangażowania odwiedzających. Głównie w obszarze optymalizacji ważnych procesów biznesowych (np. ścieżki zakupowej), między innymi dzięki personalizacji treści oraz podniesieniu jakości Call To Action (CTA).
  • Dostosowanie do aktualnych trendów i technologii. W szczególności w odniesieniu do zapewnienia responsywności i zgodności z najnowszymi standardami web designu.
  • Poprawa SEO i widoczności w wyszukiwarkach. Przede wszystkim w odniesieniu do struktury strony i metatagów, poprawy Core Web Vitals oraz lepsze linkowanie wewnętrzne w serwisie
  • Wzmocnienie wizerunku marki. Głównie dzięki zastosowaniu nowoczesnego designu budującego spójny, zgodny z duchem czasu wygląd witryny.
  • Zwiększenie bezpieczeństwa. Między innymi poprzez implementację najnowszych protokołów bezpieczeństwa oraz aktualizację systemu CMS.
  • Lepsze wsparcie dla marketingu i sprzedaży. W szczególności uzyskiwane dzięki integracji narzędzi analitycznych, dostarczających danych o użytkownikach.
  • Oszczędność czasu i zasobów w długiej perspektywie. Dzięki wdrożeniu nowego lub aktualizacji istniejącej platformy CMS i automatyzacji procesów (w tym na przykład komunikacji z klientami z użyciem formularzy kontaktowych).
  • Dostosowanie do zmieniających się potrzeb klientów. Poprzez wprowadzenie rozwiązań technicznych i proceduralnych ułatwiających szybkie reagowanie na trendy rynkowe i feedback klientów (np. łatwe dodawanie nowych produktów, albo funkcji strony).
  • Przewaga konkurencyjna. Uzyskiwana w znacznym stopniu dzięki udostępnieniu atrakcyjnej, nowoczesnej, funkcjonalnej i intuicyjnej witryny.

Etapy procesu redesignu strony internetowej

Przeprowadzenie skutecznego redesignu strony www wymaga systematycznego podejścia. Poniżej przedstawiam listę głównych kroków procesu.

Audyt istniejącej witryny

Przeprojektowanie strony internetowej powinno zostać poprzedzone zbadaniem i oceną funkcjonującej obecnie witryny. Audyt wstępny, to:

  • analiza obecnej struktury i funkcjonalności,
  • przegląd statystyk odwiedzin i zachowań użytkowników (np. przy użyciu narzędzi takich jak Google Analytics, czy Crazy Egg),
  • identyfikacja mocnych i słabych stron witryny,
  • badanie opinii obecnych użytkowników (np. poprzez ankiety).

Analiza konkurencji i trendów rynkowych

Redesign warto także poprzedzić przeglądem rynku. Zarówno w odniesieniu do bezpośredniej konkurencji, jak i w szerszym kontekście:

  • przegląd stron konkurencyjnych firm,
  • badanie najnowszych trendów w web designie,
  • analiza oczekiwań polskich użytkowników Internetu.

Planowanie i strategia

Kolejnym krokiem jest zaplanowanie działań składających się na przeprojektowanie strony. Niezbędnymi elementami są w tym zakresie przede wszystkim:

  • określenie celów redesignu (np. zwiększenie konwersji, poprawa UX)
  • zdefiniowanie lub przegląd i aktualizacja istniejących definicji grupy docelowej i person użytkowników,
  • ustalenie priorytetów projektu, a także kryteriów oceny stopnia ich realizacji,
  • stworzenie mapy strony i architektury informacji.

Projektowanie nowego interfejsu użytkownika (GUI)

Ten krok procesu jest często błędnie opisywany jako redesign. Jak widzisz, mimo, że wiąże się on z projektowaniem musi poprzedzić go wiele czynności przygotowawczych. Podobnie, po zakończeniu fazy projektowania graficznego trzeba wykonać wiele czynności, aby projekt przekształcił się w działającą stronę. Etap projektowania GUI obejmuje:

  • szkicowanie wstępnych koncepcji (wireframes),
  • tworzenie prototypów interaktywnych,
  • projektowanie graficzne zgodne z identyfikacją wizualną marki,
  • dostosowanie projektów do widoków responsywnych,
  • włączenie zasad dostępności (WCAG).

Rozwój i implementacja

Następny etap to prace wykonywane przez działy IT lub specjalizowane firmy zewnętrzne, zajmujące się web developmentem:

  • implementacja systemu zarządzania treścią (CMS),
  • kodowanie front-endu,
  • integracja z narzędziami analitycznymi i marketingowymi,
  • optymalizacja pod kątem szybkości ładowania.

Testowanie i optymalizacja

Ostatnim etapem przeprojektowania witryny www są testy oraz optymalizacja pod kątem wyszukiwarek internetowych:

  • testy użyteczności (najlepiej, gdy prowadzone z udziałem realnych użytkowników),
  • testy kompatybilności z różnymi przeglądarkami i urządzeniami,
  • optymalizacja SEO,
  • testy bezpieczeństwa i wydajności.
Czy Twoja strona www jest nadal skuteczna?

Zamów wykonanie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Kluczowe elementy udanego redesignu strony internetowej

Być może planując redesign strony swojej firmy, chciałbyś mieć pewność, że nie pomijasz żadnych istotnych aspektów. Jeśli tak, potraktuj ten rozdział jako checklistę, która pozwoli Ci sprawdzić, czy pamiętałeś o najważniejszych zagadnieniach.

Responsywność i kompatybilność z urządzeniami mobilnymi:

  • zapewnienie optymalnego wyświetlania na wszystkich typach urządzeń,
  • implementacja podejścia mobile-first w projektowaniu,
  • optymalizacja szybkości ładowania na urządzeniach mobilnych.

Optymalizacja pod kątem wyszukiwarek (SEO):

  • prawidłowa struktura nagłówków i meta tagów,
  • optymalizacja treści pod kątem słów kluczowych,
  • poprawa wewnętrznej struktury linkowania,
  • implementacja danych strukturalnych (schema.org).

Intuicyjna nawigacja i architektura informacji:

  • przejrzyste menu główne i podmenu,
  • logiczna hierarchia treści,
  • efektywne wyszukiwanie wewnętrzne,
  • implementacja okruszków (breadcrumbs) wspierająca nawigację z menu.

Atrakcyjny design zgodny z identyfikacją wizualną marki:

  • spójna kolorystyka i typografia,
  • wysokiej jakości, oryginalne grafiki i zdjęcia,
  • animacje i interakcje wzbogacające użyteczność,
  • dostosowanie do aktualnych trendów w web designie.

Szybkość ładowania i wydajność:

  • optymalizacja obrazów i multimediów, w szczególności zapisywanie ich w nowoczesnych formatach,
  • wykorzystanie technik cache,
  • minimalizacja kodu CSS i JavaScript,
  • wykorzystanie sieci CDN dla szybszego dostarczania treści, przede wszystkim dla witryn o dużym zasięgu geograficznym.

Dostępność (WCAG):

  • odpowiedni kontrast kolorów,
  • alternatywne opisy dla elementów graficznych,
  • możliwość nawigacji za pomocą klawiatury,
  • kompatybilność z czytnikami ekranu.

Integracja z mediami społecznościowymi i narzędziami marketingowymi:

  • łatwe udostępnianie treści w social media (np. LinkedIn, Facebook, X),
  • integracja z narzędziami analitycznymi (np. Google Analytics),
  • implementacja narzędzi śledzących (np. piksel Facebooka).

Bezpieczeństwo:

  • implementacja certyfikatów SSL i protokołu HTTPS,
  • regularne aktualizacje CMS i wtyczek, w szczególności związanych z przechowywaniem danych osobowych użytkowników,
  • zabezpieczenia przed atakami DDoS i innymi zagrożeniami.

Redesign strony internetowej – najlepsze praktyki

Przy przeprowadzaniu redesignu strony internetowej warto kierować się sprawdzonymi praktykami, które zwiększą szanse na sukces projektu. Oto ich lista:

Zachowanie równowagi między innowacją a znajomością:

  • wprowadzaj nowe elementy, ale zachowaj kluczowe, rozpoznawalne cechy strony,
  • unikaj radykalnych zmian, które mogą dezorientować stałych użytkowników,
  • wdrażaj zmiany stopniowo, dając użytkownikom czas na adaptację.

Uwzględnienie opinii użytkowników i analiza danych:

  • przeprowadź ankiety wśród obecnych użytkowników przed rozpoczęciem redesignu – zadbaj przy tym, aby należeli do różnych segmentów grupy docelowej,
  • analizuj dane z narzędzi analitycznych, aby zrozumieć zachowania użytkowników,
  • testuj nowe rozwiązania na małej grupie użytkowników przed pełnym wdrożeniem, aby uniknąć zbędnych i kosztownych poprawek.

Planowanie z myślą o przyszłym rozwoju i skalowaniu:

  • projektuj elastyczną strukturę, która pozwoli na łatwe dodawanie nowych sekcji,
  • wybierz CMS, który umożliwi rozbudowę funkcjonalności w przyszłości,
  • uwzględniaj możliwość integracji z nowymi technologiami (np. AI, VR).

Optymalizacja ścieżki konwersji:

  • upraszczaj formularze i procesy zakupowe (dotyczy e-commerce),
  • implementuj wyraźne i przekonujące wezwania do działania (CTA),
  • minimalizuj rozpraszacze uwagi na kluczowych stronach konwersji.

Personalizacja doświadczeń użytkownika:

  • wykorzystuj dane o użytkownikach do dostarczania spersonalizowanych treści,
  • implementuj systemy rekomendacji produktów lub treści,
  • dostosuj komunikację do różnych segmentów odbiorców, np. odbiorców okazjonalnych i profesjonalnych.

Ciągłe testowanie i iteracja:

  • przeprowadzaj regularne testy A/B kluczowych elementów strony, np. wyszukiwarki, checkoutu,
  • monitoruj metryki wydajności i obserwuj zachowania użytkowników po redesignie,
  • bądź gotowy na szybkie wprowadzanie poprawek i ulepszeń.

Pora na nową odsłonę firmowej witryny?

Zamów bezpłatną wycenę projektu i wdrożenia

Wypełnij formularz, skontaktujemy się z Tobą

Współpraca ze specjalistami przy redesignie strony

Skuteczny redesign strony internetowej wymaga skoordynowanej współpracy ekspertów z różnych dziedzin. Oto kluczowe role w procesie redesignu, wraz z zadaniami, za które odpowiadają:

Projektant UX/UI:

  • przeprowadzanie badań użytkowników i tworzenie person,
  • projektowanie architektury informacji i ścieżek użytkownika,
  • tworzenie wireframes i prototypów,
  • projektowanie interfejsu graficznego.

Web developer:

  • implementacja projektu graficznego w kodzie,
  • zapewnienie prawidłowego wyświetlania w różnych środowiskach (urządzenia, systemy operacyjne, przeglądarki),
  • optymalizacja wydajności i szybkości ładowania strony,
  • integracja z systemami CMS i bazami danych.

Specjalista SEO i marketingu:

  • analiza słów kluczowych i optymalizacja on-page,
  • planowanie struktury strony pod kątem SEO,
  • implementacja narzędzi analitycznych i śledzących.

Copywriter:

  • tworzenie angażujących i perswazyjnych treści,
  • optymalizacja tekstów pod kątem SEO.

Ekspert ds. dostępności (accessibility):

  • zapewnienie zgodności z wytycznymi WCAG,
  • testowanie lub organizacja testów z użytkownikami strony pod kątem dostępności dla różnych grup użytkowników.

Specjalista ds. bezpieczeństwa

  • implementacja protokołów bezpieczeństwa,
  • przeprowadzanie audytów bezpieczeństwa,
  • zabezpieczenie danych użytkowników.

Project manager:

  • koordynacja pracy zespołu,
  • zarządzanie harmonogramem, priorytetami i budżetem projektu,
  • identyfikacja i mitygacja ryzyk,
  • komunikacja ze zleceniodawcą, pracownikami firmy oddelegowanymi do wsparcia merytorycznego i wykonawcami.

Podsumowanie

Redesign strony internetowej to kompleksowy proces, wymagający podjęcia działań na wielu płaszczyznach. Mimo, że jest to rozbudowane i trwające działanie, może przynieść znaczące korzyści dla biznesu.

Rozważając potrzebę przeprojektowania strony warto pamiętać, że wobec szybko zmieniających się realiów technologicznych, społecznych i biznesowych, stagnacja oznacza regres. Regularna ewaluacja i aktualizacja strony internetowej przestaje być luksusem, a staje się koniecznością.

Projektowanie UI/UX aplikacji mobilnych – o tym warto pamiętać

Mobile vs. Desktop: Kluczowe różnice

Z pewnością zauważyliście, że ekrany smartfonów są z reguły mniejsze niż komputerów 😉 Ale to dopiero początek różnic. Projektowanie UX/UI aplikacji mobilnych różni się znacząco od projektowania dla desktopów.

Ograniczona przestrzeń mniejszych ekranów powoduje, że każdy element musi być przemyślany z podwójną starannością. Jest to niezbędne, aby maksymalnie wykorzystać dostępne miejsce.

Użytkownicy mobilni mają też często inne oczekiwania niż osoby pracujące na komputerach. Z reguły korzystają z aplikacji w pośpiechu, oczekując szybkości i płynności interakcji.

Dlaczego mobile-first to dobry pomysł

Nie jest niczym zdumiewającym, że użytkownicy niektórych stron internetowych czy aplikacji korzystają z nich zazwyczaj tylko na telefonach lub tabletach. Takimi aplikacjami są na przykład Instagram czy Tiktok. Obie, z założenia, adresowane są przede wszystkim do odbiorców preferujących urządzenia mobilne.

Podejście mobile-first polega na projektowaniu najpierw z myślą o użytkownikach smartfonów i tabletów, a dopiero potem adaptowaniu projektów na większe ekrany. Taka strategia ma wiele zalet.

Zmusza projektantów do skupienia się na pokazaniu najważniejszych funkcji i uproszczeniu interfejsu. Dzięki temu aplikacje są lepiej dopracowane, responsywne i skupione na użytkownikach mobilnych.

Palec zamiast kursora

Projektowanie UX/UI aplikacji mobilnych wiąże się z zupełnie innym podejściem do interakcji użytkownika niż na urządzeniach desktopowych. Zamiast precyzyjnego sterowania kursorem przy pomocy myszy, mamy do czynienia z palcem, który jest mniej dokładny, ale zaś to bardziej naturalny. Oznacza to, że interfejsy muszą być dostosowane do dotykowych interakcji, co wiąże się z kilkoma kluczowymi aspektami.

Projektowanie z myślą o interakcji dotykowej

Podstawą do projektowania mobilnego jest wzięcie pod uwagę właśnie używania palców. Przyciski, ikony i inne elementy interfejsu muszą być na tyle duże, aby można było je łatwo nacisnąć. Optymalna wielkość przycisków wynosi około 44×44 pikseli, co pozwala na komfortowe korzystanie z interfejsu. Ważne jest również, aby odstępy między elementami były odpowiednio duże, aby zapobiec przypadkowemu naciśnięciu niewłaściwego przycisku.

Potrzebujesz responsywnej strony internetowej?

Opowiedz o szczegółach projektu

Wypełnij formularz, skontaktujemy się z Tobą

Projektowanie interfejsu mobilnego

W odróżnieniu od projektowania na desktop, które daje więcej miejsca na wyeksponowanie informacji i funkcji, projektowanie UX/UI aplikacji mobilnych wymaga przemyślanej kompozycji oraz optymalizacji. Poniżej opisałam kluczowe aspekty, które warto uwzględnić, aby stworzyć efektywny i przyjazny użytkownikowi interfejs mobilny.

Minimalizm i hierarchia

Na małych ekranach mniej znaczy więcej. Użytkownicy powinni móc szybko docierać do poszukiwanych informacji. Istotne jest ograniczenie liczby elementów interfejsu do tych absolutnie niezbędnych.

Ogromne znaczenie ma hierarchia wizualna. Najważniejsze elementy powinny być najbardziej widoczne i łatwo dostępne, a mniej istotne informacje mogą stanowić dla nich tło.

Optymalizacja przestrzeni

Typowe elementy interfejsu, takie jak rozbudowane menu nawigacyjne, muszą być dostosowane do ograniczonej przestrzeni smartfonów czy tabletów. Menu typu „hamburger” (trzy poziome linie) to popularne rozwiązanie, pozwalające na ukrycie nawigacji w rozwijanym panelu. Dzięki temu oszczędzamy miejsce na głównym ekranie, a użytkownicy mogą otworzyć menu, gdy potrzebują dostępu do różnych sekcji aplikacji.

Dzięki elementom UI takim jak „accordion” (akordeon, rozwijane sekcje) czy „modal” (okna dialogowe), można bardzo efektywnie zarządzać ograniczoną przestrzenią ekranu.

Użyteczność i dostępność

Mniejszy ekran oznacza też pomniejszenie elementów interfejsu. Należy jednak uważać, żeby teksty nie były za małe. Za najmniejszą wygodną do czytania wielkość uznaje się 12 px. Dodatkowo ograniczona przestrzeń na ekranie mobilnym może zachęcać do zmniejszania odległości między elementami. Należy jednak zwracać uwagę na zachowanie równowagi między elementami a ilością białej przestrzeni.

Projektowanie zgodnie z zasadami dostępności dotyczy nie tylko projektowania mobilnego, jednakże smartfonów często używamy w bardzo różnych warunkach – od pełnego słońca po ciemne pomieszczenia. Dobrze dobrane kolory i odpowiednie rozmiary czcionek zwiększają czytelność i ułatwiają korzystanie z aplikacji w różnych sytuacjach.

Responsywność

Czy wyobrażasz sobie świat, w którym dostęp do Twojej ulubionej strony internetowej lub aplikacji byłby ograniczony jedynie do komputera stacjonarnego? Dziś takie myślenie jest przestarzałe.

W erze smartfonów i tabletów, responsywność stała się standardem, a nie opcją. To właśnie dzięki niej nasze projekty stają się dostępne dla wszystkich, niezależnie od tego, jakie urządzenie posiadają.

Responsywność to zdolność projektu do automatycznego dostosowania się do rozmiaru ekranu urządzenia, na którym jest wyświetlany. Dzięki temu użytkownik zawsze widzi treść w optymalnej formie, niezależnie od tego, czy korzysta ze smartfona, tabletu czy komputera.

Skąd czerpać inspiracje

Projektowanie UX/UI aplikacji mobilnych, to tworzenie rozwiązań, które siłą rzeczy będą w jakimś stopniu podobne (wyglądem, czy działaniem) do innych aplikacji.

W dzisiejszym świecie, w którym smartfony towarzyszą nam na każdym kroku. Istnieją tysiące aplikacji przeznaczonych do realizacji bardzo różnych zadań. Stąd też stosunkowo łatwo znaleźć inspiracje.

Poniżej znajdziecie kilka moich ulubionych portali do poszukiwania inspiracji:

  • Dribbble: To kopalnia inspiracji dla projektantów UX/UI. Znajdziesz tu setki projektów, zarówno koncepcyjnych, jak i gotowych produktów.
  • Mobbin: To platforma, która gromadzi i prezentuje projekty popularnych aplikacji i stron internetowych, oferując inspirację oraz wgląd w najnowsze trendy w projektowaniu. Jedną z najbardziej przydatnych funkcji jest możliwość przeglądania projektów według typu platformy lub według konkretnego elementu UI.
  • Awwwards: Jest to jedno z najlepszych źródeł inspiracji dla projektantów stron internetowych i aplikacji mobilnych. Na tej stronie prezentowane są topowe projekty, które zdobyły uznanie w branży za swoje innowacyjne projekty, doskonałe wykonanie i wyjątkowe doświadczenia użytkownika.

Technologie i innowacje

Będąc w branży IT zdecydowanie warto śledzić najnowsze nowinki technologiczne, które mogą znacząco wpłynąć na projektowanie oraz przyszłość aplikacji. Sztuczna inteligencja, rozszerzona rzeczywistość, biometria, IoT, 5G, adaptacyjne UI oraz technologie głosowe i chatboty to tylko część trendów, które zmieniają sposób, w jaki tworzymy i używamy aplikacji mobilnych.

Śledzenie i wdrażanie tych nowoczesnych technologii może pomóc w tworzeniu bardziej zaawansowanych, funkcjonalnych i angażujących doświadczeń dla użytkowników.

Podsumowanie

Projektowanie UX/UI aplikacji mobilnych to sztuka łączenia intuicyjności i estetyki. Kluczowe jest skupienie się na architekturze informacji, responsywności i interakcji dotykowej. Pamiętaj, że udana aplikacja to taka, która nie tylko dobrze wygląda, ale przede wszystkim jest użyteczna i przyjemna w obsłudze.

Umiejętności przydatne dla projektanta UX

Podstawowe umiejętności w projektowaniu UX

Zanim jednak przejdziemy do rzadziej wspominanych kompetencji, podsumujmy krótko podstawowe, merytoryczne umiejętności UX designera. Lista jest dość długa, więc omówię je w telegraficznym skrócie:
 

  • Badania użytkowników, czyli zbieranie i analiza danych o użytkownikach. Aby zrozumieć potrzeby odbiorców, zachowania i motywacje niezbędna jest znajomość różnorodnych metod badawczych, takich jak wywiady, ankiety i obserwacje.
  • Tworzenie person polegające na budowaniu fikcyjnych postaci reprezentujących różne segmenty użytkowników. Wymaga umiejętności zrozumienia i systematycznego opisania cech, celów, potrzeb oraz motywacji odbiorców.
  • Projektowanie architektury informacji. Obejmuje organizowanie, strukturyzowanie i etykietowanie treści w sposób, który jest intuicyjny i łatwy do nawigacji dla użytkowników.
  • Mapowanie ścieżki użytkownika. Polega na wizualizowaniu kroków, jakie użytkownik podejmuje podczas interakcji z produktem lub usługą. Wymaga umiejętności identyfikacji kluczowych punktów styku i obszarów wymagających poprawy.
  • Tworzenie scenariuszy użytkownika. Obejmuje pisanie szczegółowych opisów tego, jak różni użytkownicy mogą korzystać z produktu w różnych sytuacjach.
  • Tworzenie makiet. Polega na przygotowywaniu uproszczonych wizualnych reprezentacji stron lub ekranów produktu, które pokazują rozmieszczenie głównych elementów i nawigacji.
  • Tworzenie prototypów. Obejmuje budowanie interaktywnych modeli produktów, które pozwalają na testowanie i ocenę funkcjonalności oraz użyteczności przed finalną realizacją.
  • Projektowanie interfejsu użytkownika (w tym projektowanie responsywne). Polega na tworzeniu atrakcyjnych i funkcjonalnych interfejsów, które dostosowują się do różnych urządzeń i rozmiarów ekranów, zapewniając spójne doświadczenie użytkownika.
  • Umiejętności wizualne. Obejmuje projektowanie estetycznie przyjemnych i czytelnych elementów wizualnych, takich jak kolory, typografia, ikony i obrazy, które wspierają funkcjonalność i użyteczność produktu.
  • Prowadzenie testów użyteczności. Polega na organizowaniu i przeprowadzaniu testów z udziałem rzeczywistych użytkowników, aby zidentyfikować problemy związane z użytecznością i zbierać opinie na temat produktu w celu jego poprawy.

 
Równie ważne umiejętności, które pomagają w projektowaniu UX, to:
 

  • znajomość narzędzi (aplikacje do projektowania graficznego, tworzenia makiet i prototypów, programy komunikacyjne oraz analityczne),
  • znajomość podstawowych technologii oraz ich możliwości i ograniczeń (HTML/CSS),
  • myślenie analityczne.

Inne kompetencje cenne w projektowaniu UX

Zestaw wymienionych wcześniej kompetencji to core zawodu projektanta UX. Przejdźmy jednak do mniej oczywistych, często pomijanych w trakcie rekrutacji, czy szkoleń, umiejętności.

Psychologia i empatia

Zrozumienie, co kieruje odbiorcami podczas korzystania z aplikacji czy witryn internetowych, jest fundamentem skutecznego projektowania UX. Psychologia użytkownika, pomaga przewidzieć, jakie elementy projektu przyciągną uwagę użytkownika, a jakie mogą go frustrować. Zrozumienie mechanizmów, takich jak nawyki, preferencje i potrzeby użytkowników, umożliwia tworzenie interfejsów, które są intuicyjne i angażujące.

Równie ważnym narzędziem dla projektanta UX jest empatia. Pojęcie to oznacza umiejętność postawienia się w sytuacji użytkownika, zrozumienia jego perspektywy i odczuć. Dzięki empatii projektanci mogą tworzyć funkcjonalne produkty, z których korzystanie jest dla odbiorców wygodne.

Projektanci mogą wykorzystać techniki badawcze, takie jak choćby wywiady lub testy użyteczności, aby lepiej zrozumieć potrzeby grupy docelowej tworzonego rozwiązania. Przykładowo, testowanie wczesnych prototypów pozwala na stosunkowo tanie wykrycie i naprawienie potencjalnych problemów, co znacząco poprawia końcowy produkt.

Komunikacja i współpraca

Tworzenie projektów UX/UI wymaga połączenia kompetencji z wielu obszarów. UX designer musi wyjaśniać swoje pomysły i zbierać feedback od członków zespołu oraz klientów. Musi także skutecznie komunikować się z programistami, by wspólnie realizować wizję projektu.

Umiejętność budowania mostów między różnymi dziedzinami i językami – od technicznego żargonu programistów po biznesowe koncepcje menedżerów produktu – może decydować o powodzeniu całego projektu. Zdolności kooperacyjne i komunikacyjne pozwalają na płynne współdziałanie i pomagają unikać nieporozumień, które mogłyby opóźnić lub nawet zatrzymać realizację.

Pisanie i storytelling

Choć na pierwszy rzut oka nie jest to tak oczywiste, umiejętność pisania jest podstawą w projektowaniu UX. Jasne, zwięzłe i przemyślane treści umieszczone na stronie lub interfejsie aplikacji mogą znacząco poprawić doświadczenie użytkownika. Pomagając bowiem nawigować i rozumieć oferowane funkcje.

Dodatkowo, umiejętność opowiadania historii (storytelling) może wzbogacić stronę o angażującą narrację. Dzięki przyciągającej uwagę opowieści strona internetową buduje emocjonalną więź z użytkownikiem. Storytelling w UX pomaga nie tylko kierować uwagą odbiorcy, ale także ułatwia zapamiętanie marki i oferowanych produktów.

Kreatywność i myślenie projektowe

W projektowaniu UX/UI, kreatywność wykracza poza zagadnienie estetyczne i obejmuje także innowacyjne podejście do rozwiązywania problemów. Myślenie projektowe (design thinking) to ścieżka empatycznego podejścia do potrzeb użytkownika. Obejmuje ono definiowanie problemów, proponowanie rozwiązań, prototypowanie i testowanie.

Ta metodologia sprzyja tworzeniu funkcjonalnych, a jednocześnie innowacyjnych rozwiązań, które rzeczywiście odpowiadają na ludzkie potrzeby. Kreatywność w myśleniu projektowym oznacza także umiejętność patrzenia na problem z różnych perspektyw. To z kolei prowadzi często do odkrywania niekonwencjonalnych i przełomowych rozwiązań.

Zarządzanie projektem

Ostatnią ważną dla projektanta UX, a często niedocenianą, umiejętnością jest zarządzanie projektami. Tworzenie rozwiązań przez multidyscyplinarne zespoły wymaga jasnego planu i zdolności reagowania na zmiany założeń oraz nowe informacje od zleceniodawcy lub dotyczące użytkowników produktu cyfrowego.

Projektanci UX często muszą koordynować pracę wielu osób, terminarze i wykorzystanie zasobów. Umiejętności takie jak planowanie, organizacja pracy i zarządzanie czasem mają fundamentalne znaczenie dla utrzymania projektów na właściwym kursie i zapewnienia, że wszystkie elementy współgrają ze sobą harmonijnie. Projektant UX z umiejętnościami menedżerskimi jest w stanie nie tylko tworzyć doskonałe projekty, ale również efektywnie je realizować.

Podsumowanie

Projektowanie UX to nie tylko praca z interfejsami i technologią, ale przede wszystkim z ludźmi i dla ludzi. Umiejętności kojarzone z reguły z innymi profesjami, takie jak empatia, umiejętności komunikacyjne, analiza danych, kreatywność i zarządzanie projektami, są równie ważne co techniczne aspekty pracy.

Dla projektanta UX, ciągły rozwój w tych obszarach jest kluczowy, aby nie tylko tworzyć produkty, które są estetyczne i funkcjonalne, ale także dopasowane do odbiorców, przydatne biznesowo.

Co projektant UX/UI powinien wiedzieć o użytkowniku końcowym

Zrozumienie użytkownika końcowego

Aby stworzyć produkt, odpowiadający na potrzeby użytkowników, projektanci muszą poznać swoich odbiorców. Muszą zrozumieć co kieruje ich działaniami i decyzjami, co jest dla nich ważne i w jakim celu będą korzystali z produktu.

Zdobycie wiedzy o użytkownikach wymaga zarówno otwartości i odpowiedniego nastawienia, jak i zastosowania odpowiednich narzędzi.

Empatia jako narzędzie projektowe

Empatia to zdolność do rozumienia i dzielenia uczuć innej osoby. Jest ona bardzo przydatna w procesie projektowania skoncentrowanego na użytkowniku. Empatia pozwala na wejście w emocje odbiorcy, odczucie zarówno satysfakcji jak i frustracji związanych z posługiwaniem się aplikacją, dokonywaniem zakupów online czy też wyszukiwaniem informacji na stronie www.

Projektanci mogą rozwijać empatię poprzez bezpośredni kontakt z użytkownikami, który pozwoli na lepsze zrozumienie kontekstu użytkowania produktu.

Tworzenie person użytkowników

Persony użytkowników to fikcyjne postaci opisujące typowych użytkowników produktu. Często opisane w wielu wymiarach, począwszy od danych demograficznych, przez cechy charakteru, wykształcenie, pracę, po ulubione powiedzenia czy filmy.

Persony pozwalają projektantom lepiej zrozumieć, kim są odbiorcy, co jest dla nich ważne, jakie mają cele i jakie są ich ograniczenia. Stosowanie person w procesie projektowania ułatwia oderwanie się od własnych potrzeb i przestawienie się na myślenie i postrzeganie klienta. Trochę na zasadzie: czy proponowane rozwiązanie podobałoby się personie. Dzięki temu łatwiejsze staje się podejmowanie trafnych decyzji i tworzenie rozwiązań dopasowanych do docelowych użytkowników.

Mapa doświadczeń klienta

Mapa doświadczeń klienta (customer journey map) to narzędzie, które pozwala na wizualizację ścieżki użytkownika przez różne punkty interakcji z produktem. Począwszy od pierwszego kontaktu, przez zakup, po wsparcie posprzedażowe lub zwrot albo reklamację. Dzięki mapom można lepiej zrozumieć co użytkownik odczuwa na poszczególnych etapach – czy jest to zadowolenie, czy frustracja.

Informacje uzyskiwane z customer journey map pozwalają optymalizować interfejsy i całe ścieżki procesowe lub ich fragmenty (na przykład ścieżkę zakupu w sklepie internetowym) pod kątem użyteczności.

Projektowanie oparte na danych

Projektowanie z wykorzystaniem rzeczywistych danych ma ogromną przewagę nad projektowaniem bazującym na intuicji albo przypadkowych założeniach. Dlatego na każdym etapie życia projektu warto zbierać dane. Począwszy od wywiadów z potencjalnymi użytkownikami końcowymi w fazie definiowania wymagań lub ulepszania prototypów, kończąc na danych pochodzących z narzędzi analizujących ruch na stronie www lub ankiet kierowanych do rzeczywistych odbiorców rozwiązań.

Dane pozwalają na wyraźne skrócenie i obniżenie kosztów procesu wytwórczego produktów cyfrowych a także umożliwiają iteracyjne podnoszenie ich funkcjonalności i użyteczności.

Wykorzystanie danych o użytkowniku w projektowaniu UX/UI

Celem pracy projektanta jest stworzenie rozwiązania dopasowanego do potrzeb, przyzwyczajeń i możliwości użytkownika końcowego. Oznacza to, że projektant UX/UI musi podjąć cały szereg decyzji dotyczących struktury interfejsu, stylu graficznego, a także stosowanego języka, udostępnionych odbiorcom funkcji i innych składowych rozwiązania.

Znajomość użytkownika, w tym poziomu jego umiejętności cyfrowych, danych demograficznych, potrzeb związanych z tworzoną stroną lub sklepem ułatwia projektantowi podejmowanie konkretnych wyborów.

Poniżej przedstawiam listę ważnych cech użytkownika końcowego. Dla każdej z pozycji opisuję wpływ na decyzje projektowe, a także wskazuję gdzie można szukać informacji w zależności od charakteru projektu (nowy produkt / istniejący produkt).

Na pewno nie jest to lista kompletna i nie wyczerpuje wszystkich obszarów wpływu, ani dostępnych źródeł. Stanowić może jednak dobrą bazę do stworzenia własnego wykazu cech end usera.

Wiek użytkownika końcowego

Wpływ na decyzje projektowe: Wiek użytkownika przekłada się na dobór języka i styl graficzny. Młodsi użytkownicy końcowi preferują nowoczesny i dynamiczny design, podczas gdy starsi użytkownicy mogą preferować bardziej stonowane i czytelne interfejsy.

Źródła danych dla istniejącego produktu: Analiza demograficzna z Google Analytics, dane użytkowników z platform reklamowych (np. Facebook Audience Insights). https://www.facebook.com/business/insights/tools/audience-insights/

Źródła danych dla nowego produktu: Badania rynkowe, takie jak raporty Pew Research Center (dane globalne), raporty CBOS, dane GUS (dane dotyczące Polski). Analiza danych z podobnych produktów konkurencyjnych oraz ankiety rynkowe.

Przydatne łącza:

Płeć end usera

Wpływ na decyzje projektowe: Płeć użytkowników może wpływać na preferencje kolorystyczne i estetykę wizualną interfejsów. Przekładać się może również na formę zwracania się do end usera w tekstach.

Źródła danych dla istniejącego produktu: Dane demograficzne z Google Analytics, dane z platform reklamowych (np. Facebook Ads Manager).

Źródła danych dla nowego produktu: Badania rynkowe, takie jak raporty Nielsen, analiza demograficzna konkurencyjnych, badania konsumenckie.

Przydatne łącza:

Poziom wykształcenia end usera

Wpływ na decyzje projektowe: Użytkownicy z wyższym poziomem wykształcenia mogą preferować bardziej skomplikowane i informacyjne treści, podczas gdy ci z niższym poziomem wykształcenia mogą potrzebować prostszych i bardziej zrozumiałych interfejsów.

Źródła danych dla istniejącego produktu: Dane z Google Analytics , ankiety użytkowników.

Źródła danych dla nowego produktu: Badania rynkowe, takie jak raporty Statista (na przykład raport „Edukacja w Polsce”), analiza danych użytkowników podobnych produktów, badania demograficzne.

Przydatne łącza:

Zawód użytkownika końcowego

Wpływ na decyzje projektowe: Zawód wykonywany przez użytkownika końcowego może wiązać się z oczekiwaniami dotyczącymi wyglądu funkcji interfejsu. Na przykład użytkownicy biznesowi mogą potrzebować bardziej surowego i profesjonalnego stylu graficznego oraz dostępu do wywoływania specjalizowanych działań (obliczeń, prezentacji w formie wykresów etc.).

Źródła danych dla istniejącego produktu: LinkedIn Talent Insights, wywiady z użytkownikami.

Źródła danych dla nowego produktu: Raporty branżowe, na przykład firmy Gartner (dane globalne), dane GUS , raporty PARP, PWC, Sedlak & Sedlak, analiza danych produktów konkurencyjnych.

Przydatne łącza:

Doświadczenie techniczne użytkowników

Wpływ na decyzje projektowe: Użytkownicy z dużym doświadczeniem technicznym z reguły preferują bardziej zaawansowane funkcje i możliwości konfiguracji rozwiązań. Pozostali użytkownicy często skłaniają się ku uproszczonym interfejsom.

Źródła danych dla istniejącego produktu: Testy użyteczności, segmentacja użytkowników na podstawie danych z Google Analytics.

Źródła danych dla nowego produktu: Badania rynkowe dotyczące umiejętności technologicznych, takie jak raporty Pew Research (dane globalne), raporty IAB (dotyczące Polski, np. Raport strategiczny: Internet 2023/24), analiza danych użytkowników końcowych podobnych produktów, ankiety oceniające umiejętności technologiczne potencjalnych użytkowników.

Przydatne łącza:

Preferencje językowe

Wpływ na decyzje projektowe: Znajomość preferowanego języka użytkownika pozwala na lepsze dostosowanie treści i komunikacji w interfejsie oraz decyzje co do tworzenia dodatkowych wersji językowych i ich zawartości.

Źródła danych dla istniejącego produktu: Dane Google Analytics dotyczące języka przeglądarki użytkowników. Dane z platform reklamowych.

Źródła danych dla nowego produktu: Badania rynku, np. CSA Research, analiza językowa użytkowników podobnych produktów, ankietowanie potencjalnych end userów.

Przydatne łącza:

Zainteresowania

Wpływ na decyzje projektowe: Znajomość zainteresowań użytkownika pozwala na personalizację treści i funkcji umieszczonych w interfejsie.

Źródła danych dla istniejącego produktu: Google Analytics, narzędzia związane z social media, między innymi: Facebook Audience Insights, Instagram Insights, Account Analytics X (d.Twittera), Brandwatch.

Źródła danych dla nowego produktu: Badania rynkowe (np. prowadzone przez firmę Nielsen), analiza zainteresowań użytkowników podobnych produktów, ankiety dotyczące zainteresowań potencjalnych przyszłych użytkowników końcowych.

Przydatne łącza:

Cel korzystania z produktu

Wpływ na decyzje projektowe: Wiedza o tym, dlaczego użytkownik korzysta z produktu (np. rozrywka, edukacja, praca) pomaga dostosować funkcje i interfejs do jego potrzeb.

Źródła danych dla istniejącego produktu: Wywiady z użytkownikami, analiza danych z Google Analytics (cel wizyty).

Źródła danych dla nowego produktu: Badania rynku, a także analiza celów użytkowników końcowych podobnych rozwiązań.

Chcesz poprawić działanie swojego sklepu lub strony?

Zamów przeprowadzenie audytu UX

Lokalizacja geograficzna

Wpływ na decyzje projektowe: Lokalizacja użytkownika wpływa na aspekty takie jak dostępność usług, język, strefa czasowa i preferencje regionalne.

Źródła danych dla istniejącego produktu: Dane z Google Analytics, dane z narzędzi platform reklamowych.

Źródła danych dla nowego produktu: Badania rynkowe, takie jak Statista, analiza geograficzna użytkowników podobnych produktów.

Przydatne łącza:

Styl życia użytkownika

Wpływ na decyzje projektowe: Użytkownicy prowadzący aktywny tryb życia mogą preferować aplikacje mobilne z szybkimi i łatwymi w użyciu funkcjami. Ponadto charakter aktywności użytkownika końcowego wpływa na styl wizualny interfejsu.

Źródła danych dla istniejącego produktu: Dane z Google Analytics, dane z narzędzi platform reklamowych, badania rynkowe (np. IAB, CBOS, Nielsen).

Źródła danych dla nowego produktu: Badania rynkowe (np. IAB, CBOS, Nielsen), analiza stylu życia użytkowników podobnych produktów, wywiady z grupami fokusowymi.

Przydatne łącza:

Preferencje zakupowe

Wpływ na decyzje projektowe: Wiedza o tym, jakie produkty użytkownik lubi kupować, pozwala na lepszą personalizację rekomendacji w e-commerce.

Źródła danych dla istniejącego produktu: Analiza danych z narzędzi e-commerce, takich jak Shopify Analytics.

Źródła danych dla nowego produktu: Badania rynkowe, takie jak eMarketer, analiza preferencji zakupowych użytkowników podobnych produktów, ankiety konsumenckie.

Przydatne łącza:

Częstotliwość korzystania z produktu

Wpływ na decyzje projektowe: Częstotliwość, z jaką użytkownik korzysta z produktu i jego poszczególnych funkcji/opcji, wpływa na decyzje dotyczące projektowania interfejsu.

Źródła danych dla istniejącego produktu: Dane z Google Analytics (częstotliwość sesji użytkowników), dane analityczne z aplikacji mobilnych, np. Firebase Analytics.

Źródła danych dla nowego produktu: Badania rynkowe (np. IAB, CBOS) i analiza częstotliwości korzystania użytkowników podobnych produktów, wywiady z przyszłymi użytkownikami końcowymi.

Przydatne łącza:

Świadomość marki

Wpływ na decyzje projektowe: Użytkownicy zaznajomieni z marką mogą oczekiwać zgodności wizualnej i funkcjonalnej z innymi produktami tej samej marki.

Źródła danych dla istniejącego produktu: Badania rynku, np. CBOS, ankiety użytkowników.

Źródła danych dla nowego produktu: Badania rynku, np. CBOS, analiza świadomości marki w kontekście produktów konkurencyjnych, konsultacje z ekspertami ds. marki.

Przydatne łącza:

Preferencje w zakresie nawigacji

Wpływ na decyzje projektowe: Niektórzy użytkownicy mogą preferować nawigację za pomocą menu, inni zaś przy użyciu wyszukiwarki.

Źródła danych dla istniejącego produktu: Testy użyteczności i analiza danych z Google Analytics (zachowanie użytkowników), narzędzia Hotjar, Crazy Egg.

Źródła danych dla nowego produktu: Badania rynkowe i analiza preferencji nawigacyjnych użytkowników podobnych produktów, wywiady z grupami fokusowymi.

Przydatne łącza:

Dostępność technologii

Wpływ na decyzje projektowe: Użytkownicy korzystający z różnych urządzeń i systemów operacyjnych mogą wymagać dostosowania projektu do specyfikacji tych technologii.

Źródła danych dla istniejącego produktu: Analiza danych z Google Analytics (urządzenia użytkowników).

Źródła danych dla nowego produktu: Raporty technologiczne, takie jak Gartner (globalne), raporty z badań IAB, CBOS (Polska), analiza dostępności technologii dla użytkowników podobnych produktów, wywiady z ekspertami.

Przydatne łącza:

Przyzwyczajenia użytkowników

Wpływ na decyzje projektowe: Użytkownicy mający określone przyzwyczajenia związane z korzystaniem z technologii mogą preferować interfejsy zgodne z ich nawykami.

Źródła danych dla istniejącego produktu: Testy użyteczności i analiza danych z Google Analytics, dane z aplikacji Hotjar, Crazy Egg.

Źródła danych dla nowego produktu: Badania rynkowe, analiza przyzwyczajeń użytkowników podobnych produktów, wywiady z użytkownikami.

Przydatne łącza:

Podsumowanie

Mówiąc o dopasowaniu produktu cyfrowego: strony internetowej, aplikacji, e-sklepu do użytkownika końcowego najczęściej wspomina się o narzędziach do zbierania danych. Tymczasem fundamentalne znaczenie ma to, jakich informacji powinniśmy szukać i do czego te informacje mogą posłużyć.

Każda z omówionych powyżej kategorii przekłada się na konkretne decyzje projektowe. Decyzje, które projektanci UX/UI podejmują w codziennej pracy.

Spójność i intuicyjność interfejsów w praktyce

Czym jest spójność i intuicyjność interfejsów?

Spójność w projektowaniu UX/UI interfejsu oznacza jednolitość elementów wizualnych i funkcjonalnych. Zmniejsza ona obciążenie poznawcze użytkowników i sprawia, że łatwiej rozpoznają elementy o jednakowym przeznaczeniu. Spójność obejmuje zunifikowany wygląd oraz sposób działania we wszystkich częściach produktu. Ta wizualna i funkcjonalna integralność sprawia, że interfejs jest bardziej przyjazny użytkownikom i ułatwia nawigowanie po serwisie.

Intuicyjność oznacza łatwość zrozumienia przez użytkowników interfejsu i wchodzenia z nim w interakcje, potocznie mówiąc „bez konieczności myślenia”. Intuicyjny interfejs dostosowuje się do modeli mentalnych użytkowników, spełniając ich oczekiwania co do sposobu funkcjonowania strony lub aplikacji.

Osiągnięcie zarówno spójności, jak i intuicyjności jest niezbędne do stworzenia pozytywnego i wydajnego doświadczenia użytkownika. Z reguły wymaga testowania przez użytkowników, informacji zwrotnych i przestrzegania utartych zasad projektowania.

Rola spójności i intuicyjności w interfejsach

Czy ktoś ma wątpliwości co do znaczenia spójności i intuicyjności w projektowaniu produktów? Poniżej przedstawię kilka aspektów projektowania UX, które jednoznacznie pokazują, że odgrywają one wręcz kluczową rolę w użyteczności interfejsów.

Spójność w heurystykach Nielsena

Heurystyki Nielsena to narzędzie, które powinien znać każdy projektant UX. Jest to zbiór wytycznych, zawierający dziesięć zasad oceny użyteczności interfejsów użytkownika. Wśród wspomnianych zasad, spójność wyróżnia się jako fundamentalny kamień węgielny. Odnosi się ona do zachowania jednolitości elementów projektowych, wzorców interakcji i terminologii w całym interfejsie. Przestrzeganie spójnych wzorców projektowych pomaga użytkownikom budować modele mentalne i oczekiwania, zwiększając przewidywalność. Nadając priorytet spójności w projektowaniu interfejsów, projektanci UX mogą tworzyć doświadczenia, które są jednocześnie intuicyjne, wydajne i sprzyjają ogólnie pozytywnemu doświadczeniu użytkownika.

Obciążenie poznawcze, a spójność

Czym właściwie jest „obciążenie poznawcze” i dlaczego jest tak ważne w projektowaniu UX? Obciążenie poznawcze to po prostu ilość pracy umysłowej potrzebnej do wykonania jakiegoś zadania. Im większe obciążenie, tym trudniej się skoncentrować i wykonywać zadania efektywnie. To tak jak z komputerem, na którym jednocześnie włączony jest Photoshop, Word, dziesięć okien przeglądarki i sześć innych programów. Co robi nasz komputer? Spowalnia, a my musimy wyłączyć niektóre z nich, aby komputer znowu działał sprawnie.

Podobny mechanizm zachodzi przy obsługiwaniu przez użytkownika produktu cyfrowego, takiego jak strona internetowa czy aplikacja. Kiedy użytkownik pracuje, jego mózg również doświadcza obciążenia poznawczego. Spójność w interfejsie może pomóc w zmniejszeniu tego obciążenia, dzięki czemu użytkownik może efektywniej i płynniej poruszać się po serwisie. To z kolei przekłada się na pozytywną jakość użytkowania i zadowolenie z produktu.

infografika: spójność i intuicyjność interfejsów
Infografika: Spójność i intuicyjność interfejsów. Zalecenia projektowe.
pobierz pdf

Zrozumienie modeli mentalnych użytkowników

Omówiliśmy już heurystyki, obciążenie poznawcze, teraz kolej na modele mentalne. W projektowaniu UX model mentalny odnosi się do wyobrażenia, które użytkownicy tworzą w swoich umysłach na temat działania systemu, np. strony internetowej czy aplikacji mobilnej. Model obejmuje ich oczekiwania, założenia, przekonania i wiedzę na temat struktury, zachowania i funkcjonalności systemu.

Zasadniczo model mentalny to zrozumienie tego, jak zdaniem użytkownika działa produkt lub interfejs w oparciu o jego wcześniejsze doświadczenia, interakcje i obserwacje. Przy projektowaniu produktów cyfrowych zgodnych z modelami mentalnymi użytkowników, minimalizowane jest obciążenie poznawcze i zwiększona jest intuicyjność systemu.

Projektanci powinni dążyć do tworzenia interfejsów zgodnych z modelami mentalnymi użytkowników, ponieważ produkty są przez to po prostu łatwiejsze w obsłudze.

Zasady projektowania spójnych i intuicyjnych interfejsów

Wiemy już po co mamy dążyć do spójności i intuicyjności interfejsów produktów. Jak zatem wprowadzić teorię w życie? Poniżej opiszę kilka sposobów, które pomogą nam w osiągnięciu tych celów.

Stosowanie design systemów

Pierwszym krokiem w kierunku projektowania spójnego i intuicyjnego interfejsu może być stworzenie design systemu. Design system to zbiór wypracowanych standardów dotyczących elementów interfejsu, takich jak kolory, typografia, ikony i komponenty, np. buttony czy inputy. Dzięki konsekwentnemu stosowaniu tych elementów we wszystkich częściach interfejsu, projekt z pewnością będzie miał jednolity wygląd.

Powtarzalność kolorów, krojów pism i komponentów na wszystkich stronach ułatwi użytkownikom orientację i przewidywanie jak dany system może działać w różnych jego częściach. Design systemy są wspaniałym narzędziem, które ułatwiają pracę nad produktem, jednocześnie zapewniające jego spójność i intuicyjność.

Kolory

Ważnym elementem projektowym interfejsu, który między innymi należy uwzględnić w design systemie, jest jego kolorystyka. Dobór odpowiednich kolorów ma kluczowe znaczenie dla funkcjonalności i estetyki interfejsu. Na przykład, określenie głównego koloru tekstu (tzw. primary color) oraz koloru tła pomaga w zapewnieniu czytelności i kontrastu, co jest kluczowe dla komfortowego czytania treści. Dodatkowo, stosowanie konkretnych kolorów wyróżniających oraz uzupełniających pozwala na wyraźne oznaczenie interaktywnych elementów, takich jak przyciski czy linki, co ułatwia nawigację i interakcję użytkownikom. Konsekwentne trzymanie się ustalonej kolorystyki w całym interfejsie zapewnia spójność wizualną, a to z kolei przekłada się na intuicyjność i estetykę.

Więcej informacji na temat stosowania kolorów znajdziesz w artykule Kolorystyka strony internetowej – jak dobrać kolory do strony internetowej.

Style tekstowe

Podobnie jak w przypadku kolorystyki, określenie stylów tekstowych odgrywa istotną rolę w tworzeniu spójnych i intuicyjnych interfejsów użytkownika. Style tekstowe powinny określać wielkości i rodzaje czcionek, kroje pisma (np. pogrubienie, kursywa), a także odstępy między literami lub wierszami.

Dzięki stosowaniu konkretnych stylów dla nagłówków i paragrafów, użytkownicy mogą łatwiej zidentyfikować różne rodzaje treści i zrozumieć ich znaczenie. Trzymanie się określonych stylów pozwala również na szybsze tworzenie nowych elementów interfejsu oraz ułatwia współpracę pomiędzy członkami zespołu projektowego. W rezultacie, spójne style tekstowe przyczyniają się do lepszej czytelności, estetyki i użyteczności interfejsu.

Ważne jest aby nie przesadzać z ilością fontów użytych w projekcie. Zbyt duża ilość czcionek oraz krojów pism spowoduje uczucie chaosu, i z pewnością będzie ciężej uzyskać spójność projektową. Wskazane jest ograniczenie się do jednej lub dwóch głównych czcionek, które będą używane konsekwentnie w różnych częściach interfejsu.

Ikony

Ostatnim kluczowym elementem projektowym, który omówię w tym artykule pod kątem spójności, są ikony. Bardzo często popełnianym błędem, szczególnie przez początkujących projektantów (mówię to z własnego doświadczenia!), jest stosowanie w projekcie ikon o różnym stylu i grubości linii.

Przykładowe style ikon.
Ikona „home”: przykładowe style.

Ikony mogą mieć różne charakterystyki, takie jak bardziej zaokrąglony czy kanciasty styl, mogą być liniowe lub wypełnione. Jednakże, aby zachować spójność wizualną, istotne jest stworzenie jednolitej rodziny ikon, które będą posiadać dokładnie ten sam styl, tą samą grubość linii czy sposób wypełnienia oraz kolorystykę. Dzięki temu interfejs będzie wyglądał spójnie i profesjonalnie.

Przykład niepoprawnego i poprawnego stosowania ikon.
Przykład niepoprawnego i poprawnego doboru ikon.

Projektowanie responsywne a spójność interfejsu

Spójność interfejsu nie kończy się na jednolitym stylu graficznym czy funkcjonalności. Kolejnym aspektem jest to, jak interfejs zachowuje się na różnych urządzeniach. Projektowanie responsywne jest kluczowe dla zachowania integralności i intuicyjności interfejsów. Zapewnia ona spójność wizualną i funkcjonalną na różnych urządzeniach oraz wspiera dostępność dla wszystkich użytkowników, niezależnie od ich urządzenia lub możliwości.

Podsumowanie

Mam nadzieję, że ten artykuł dostarczył Wam pomocnych informacji jeśli chodzi o spójność i intuicyjność interfejsów. Zachowanie spójności i dbałość o intuicyjność to kluczowe aspekty projektowania, które mają ogromny wpływ na doświadczenia użytkowników. Możemy  dzięki temu tworzyć produkty, które nie tylko są estetyczne, ale i używa się ich z przyjemnością.

Projektowanie skutecznego menu

Wymagania do tworzenia skutecznego menu

Pierwszym etapem projektowania menu jest zrozumienie potrzeb biznesowych i połączenie ich z oczekiwaniami i przyzwyczajeniami użytkowników. Aby to osiągnąć warto odpowiedzieć na trzy pytania:

  • Czego oczekuje właściciel serwisu? Co jest celem strony – sprzedaż produktu, zapisanie do newslettera, wypełnienie formularza kontaktowego?
  • Jakie są główne cele użytkownika odwiedzającego stronę? Co chce osiągnąć odbiorca – zdobyć informacje, dokonać zakupu?
  • W jaki sposób umożliwić realizację celów użytkownika? Jakie intuicyjne rozwiązania zastosować, aby odbiorca rozpoczął wędrówkę po stronie i zakończył ją na pożądanym działaniu?

Im bardziej szczegółowe i bliskie rzeczywistości będą odpowiedzi, tym większe szanse na wypracowanie efektywnych rozwiązań. Dlatego do zbierania informacji i wypracowywania wniosków warto użyć różnych narzędzi.

Na uwagę zasługują przede wszystkim ankiety i wywiady z użytkownikami, które pomagają zrozumieć ich potrzeby i preferencje. Ważnym elementem procesu jest tworzenie person użytkownika, czyli fikcyjnych, ale realistycznych profili użytkowników docelowych. Warte rozważenia jest także wykorzystanie Customer Journey Map, które pomagają przeanalizować etapy, przez które przechodzi użytkownik w trakcie korzystania ze strony.

Wybór układu menu

Decyzja o wyborze układu menu zależna jest od kilku czynników.

Pierwszym z nich jest layout strony. Typowym rozwiązaniem jest menu poziome umieszczone na górze. Jeśli witryna ma odbiegający od standardu układ treści akceptowalnym rozwiązaniem może być menu pionowe lub hamburger menu (charakterystyczne, trzy krótkie poziome linie). Warto przy tym jednak pamiętać, że każde odejście od powszechnie stosowanych schematów niesie ze sobą ryzyko obniżenia użyteczności strony, a więc i utraty potencjalnych klientów.

Drugim ważnym czynnikiem jest struktura i hierarchia informacji w witrynie. Ponieważ głównym zadaniem menu jest przekierowanie użytkownika do konkretnych miejsc w serwisie, istotna jest liczba lokalizacji docelowych. Projektant musi podjąć decyzję, które informacje pokazywać w menu w pierwszej kolejności, a które będą wyświetlane po dodatkowych kliknięciach.

Innymi elementami, które warto uwzględnić wybierając układ menu są:

  • zachowanie spójności wizualnej wersji responsywnych serwisu (nawet w przypadku użycia różnych wersji układu dla widoków desktopowych i mobilnych),
  • możliwość wprowadzania zmian w zawartości menu,
  • skalowalność menu w cyklu życia witryny.

Warto tu wspomnieć, że z punktu widzenia łatwości utrzymania spójności w trakcie rozwoju witryny uzasadnione jest korzystanie z systemów projektowania. Użycie Design Systems istotnie redukuje nakład pracy projektantów i deweloperów, zapewniając uzyskanie wysokiej jakości stron.

Wiele witryn wymaga stosowania rozbudowanych menu. Wynika to przede wszystkim ze złożonej hierarchii informacji. Jak wspomniałem wcześniej projektanci stoją przed wyborem, które z dostępnych opcji pokazać w pierwszej kolejności.

Jedna ze strategii zakłada, że staramy się wyświetlić w menu jak najwięcej możliwości wyboru. Druga z kolei stawia na wyświetlenie minimalnej liczby opcji, których śledzenie (kliknięcie, rozwinięcie) pozwala dotrzeć do opcji podrzędnych.

Każde z podejść ma swoje wady i zalety. Pierwsze udostępnia na raz całą paletę możliwości, co może powodować problemy z czytelnością i łatwością odbioru informacji. Drugie poprawia czytelność, ale wymaga dodatkowej aktywności użytkownika.

Efektem zastosowania pierwszego podejścia jest megamenu, czyli rozszerzone menu, które wyświetla wiele opcji nawigacyjnych za pomocą kolumn, list, ikon, a nawet treści multimedialnych. Megamenu jest szczególnie przydatne na stronach o bogatej zawartości, umożliwiając użytkownikom szybkie zorientowanie się w dostępnych kategoriach i podkategoriach bez konieczności nawigowania po wielu stronach.

Przykładowe megamenu.
Przykład: megamenu.

Stosując drugą strategię otrzymamy menu hierarchiczne z podmenu, czyli menu podrzędnym. Podmenu, są wykorzystywane do organizacji treści w bardziej szczegółowe kategorie pod głównymi punktami nawigacyjnymi. Pozwalają one na czyste i uporządkowane przedstawienie rozbudowanej struktury witryny bez tworzenia dużej przestrzeni nawigacyjnej.

Przykładowe menu hierarchiczne (rozwijane).
Przykład: menu hierarchiczne (rozwijane).

Cechy dobrego menu

Skuteczne menu, bez względu na wybrany układ, musi być przede wszystkim funkcjonalne. Przekładając na konkretne cechy, powinno działać poprawnie na różnych urządzeniach użytkowników oraz być proste i intuicyjne.

Prostota i intuicyjność

Menu powinno być proste i intuicyjne. Oznacza to, że liczba dostępnych opcji jest ograniczona do niezbędnego minimum. Znaczy to również, że do tworzenia menu zostały użyte jasne i powszechnie zrozumiałe nazwy.

Prostota menu to także intuicyjność ich ułożenia. Dobrą praktyką jest stosowanie zasad psychologii Gestalt (https://webflow.com/blog/gestalt-principles-of-design) wyjaśniającej sposób percepcji wizualnej ludzi, czyli to w jaki sposób postrzegamy i organizujemy mentalnie to co widzimy. Przykładem zasady Gestalt jest prawo bliskości mówiące, że elementy położone blisko siebie są postrzegane jako całość.

Poprawność działania na różnych urządzeniach

Menu i ogólniej – cały system nawigacji na stronie www – musi działać poprawnie. Trudno uznać menu za skuteczne i użyteczne, jeśli linki prowadzą do innych lokalizacji niż te sugerowane w etykietach.

Ponadto trzeba pamiętać o odmiennej specyfice wyświetlaczy. Ekran komputera desktop lub laptopa pozwalają na rozmieszczenie wielu pozycji. Kilkukrotnie węższe wyświetlacze telefonów komórkowych nie dają projektantom takiego komfortu. Popularnym rozwiązaniem jest hamburger menu prowadzące użytkownika do osobnego widoku, w którym udostępnione są łącza do podstron. Alternatywą jest dolne menu, łatwo dostępne dla osób korzystających ze smartfona przy użyciu jednej ręki.

Współczesne trendy w projektowaniu menu

Projektanci od zawsze starają się sprostać nowym wyzwaniom i oczekiwaniom użytkowników. Ponieważ świat UI/UX zmienia się dynamicznie, trendy w projektowaniu menu również ewoluują. Zrozumienie trendów pomaga tworzyć dostępne i atrakcyjne dla odbiorców rozwiązania. Oto przegląd współczesnych trendów, które kształtują projektowanie menu w aplikacjach i witrynach internetowych.

Minimalizm i czystość

Minimalizm pozostaje dominującym trendem, z menu stającym się bardziej stonowanym i skoncentrowanym na podstawowych funkcjach. Czyste i uproszczone interfejsy z mniejszą ilością elementów poprawiają czytelność i ułatwiają użytkownikom szybkie znalezienie potrzebnych informacji.

Menu hamburgera i jego ewolucja

Chociaż menu hamburgera bywa krytykowane za „ukrywanie” opcji nawigacyjnych, nadal jest popularne, zwłaszcza w projektach mobilnych. Projektanci eksperymentują z nowymi formami i animacjami, aby uczynić jego wygląd i działanie bardziej atrakcyjnymi.

Interaktywne i animowane menu

Animacje stają się kluczowym elementem w projektowaniu menu, dodając kontekstowe wskazówki i poprawiając estetykę. Subtelne animacje mogą wskazywać zmiany stanu, potwierdzać akcje lub prowadzić użytkownika przez proces nawigacji.

Trendy te kładą nacisk na maksymalizowanie przestrzeni roboczej przez ukrywanie menu, które są dostępne tylko wtedy, gdy są potrzebne, lub poprzez wdrażanie menu pełnoekranowych, które zanurzają użytkownika w czystym, niezakłóconym środowisku nawigacyjnym.

Personalizacja i kontekstowa nawigacja

Zwiększona personalizacja menu na podstawie danych użytkownika, historii interakcji lub preferencji, pozwala na prezentowanie bardziej trafnych opcji i funkcji. Menu mogą się dynamicznie zmieniać, aby odzwierciedlać najbardziej prawdopodobne intencje użytkownika w danym momencie.

Dostosowanie do gestów nawigacyjnych

Projektanci coraz częściej uwzględniają naturalne gesty nawigacyjne urządzeń mobilnych, takie jak przesunięcia i puknięcia, integrując je z projektowaniem menu. Pozwala to na płynniejsze i bardziej intuicyjne doświadczenia użytkownika.

Rozszerzona rzeczywistość (AR) i nawigacja głosowa

W miarę rozwoju technologii AR i interfejsów głosowych, menu zaczynają wykraczać poza tradycyjne wizualne interfejsy, oferując nowe sposoby interakcji. Nawigacja głosowa staje się również bardziej powszechna, zwłaszcza w aplikacjach mobilnych i urządzeniach IoT.

Dostępność w projektowaniu skutecznego menu

Dobrą praktyką w projektowaniu menu jest uwzględnienie wymagań dostępności (accessibility). Aby zapewnić użyteczność interfejsu szerokiemu gronu użytkowników, w tym osobami z różnego typu niepełnosprawnościami, należy wziąć pod uwagę dwa standardy:

  • WCAG (Web Content Accessibility Guidelines), czyli wytyczne opracowane przez W3C (World Wide Web Consortium), obejmujące szeroki zakres zaleceń dla dobrych praktyk projektowych i developerskich.
  • WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications), czyli zestaw specyfikacji technicznych i wytycznych, które pomagają zwiększyć dostępność bogatych aplikacji internetowych, szczególnie dla osób korzystających z czytników ekranu i innych technologii wspomagających.

Kluczowe zasady

  1. Kontrast i czytelność. Tekst menu musi charakteryzować się wysokim kontrastem względem tła, aby był czytelny dla osób z zaburzeniami widzenia. Standardy WCAG zalecają stosowanie kontrastu co najmniej 4.5:1 dla tekstu o normalnej wielkości.
  2. Obsługa klawiatury. Menu powinno być w pełni nawigowalne za pomocą klawiatury, co jest kluczowe dla użytkowników niekorzystających z myszy. Obejmuje to możliwość poruszania się między pozycjami menu za pomocą klawiszy strzałek, Enter i Tab.
  3. Etykiety i role ARIA. Użycie odpowiednich ról ARIA oraz etykiet (np. aria-label, aria-expanded) pomaga użytkownikom technologii wspomagających zrozumieć strukturę menu i jego funkcje. Jest to szczególnie ważne w dynamicznych menu, gdzie stan elementów może się zmieniać.
  4. Dostępne dropdowny. Menu rozwijane muszą być zaprojektowane tak, aby były dostępne, co oznacza, że użytkownicy muszą mieć możliwość otwierania i nawigacji po podmenu za pomocą klawiatury lub technologii wspomagających.
  5. Unikanie pułapek fokusowania. Upewnij się, że użytkownik może łatwo opuścić menu za pomocą klawiatury, nie wpadając w „pułapkę fokusowania”, czyli sytuację, gdy nie można przesunąć fokusu poza pewien element interfejsu.
  6. Responsywność i mobilność. Menu musi być dostępne i funkcjonalne na urządzeniach mobilnych, co obejmuje duże, łatwe do dotknięcia obszary dotykowe i odpowiedni rozmiar tekstu.

Warto pamiętać, że zaprojektowane menu powinno przejść szczegółowy program testowy, aby zweryfikować, czy wszystkie informacje i funkcje są dostępne dla użytkowników.

Podsumowanie

Menu strony internetowej to centralny punkt nawigacji, pozwalający zrozumieć strukturę witryny i pokierować ruchem użytkowników. Dlatego projektowanie skutecznego menu jest szczególnie odpowiedzialnym etapem tworzenia interfejsu.

Kluczem do stworzenia dobrego projektu jest poprawna identyfikacja celów biznesowych i specyfiki użytkowników. Wybór odpowiedniego układu menu zależy od struktury strony, hierarchii informacji oraz spójności wizualnej.

Ważne jest, aby menu było proste, intuicyjne i responsywne oraz uwzględniało zasady dostępności, takie jak wysoki kontrast i obsługa klawiatury.

Wpływ UX na doświadczenia klientów e-commerce

User experience w e-commerce

User experience, tłumaczone na język polski jako doświadczenia użytkownika, to pojęcie opisujące jak łatwo użytkownikowi korzystać ze strony internetowej, e-sklepu albo aplikacji mobilnej. UX obejmuje całokształt doświadczeń – od pierwszego wrażenia po uruchomieniu przeglądarki, po ostatnie kliknięcie zamykające okienko na ekranie urządzenia.

W e-commerce konkurencja sprzedawcy jest odległa o jedno kliknięcie myszką. Dlatego niezwykle ważne jest, aby doświadczenia klienta były jak najlepsze. Dobry user experience może zwiększać konwersję, budować lojalność wobec marki i zmniejszać odsetek porzucanych koszyków.

Decyzje zakupowe klientów w sklepach internetowych są często spontaniczne i emocjonalne. Projektowanie dobrego UX, uwzględnia te czynniki i pozwala skutecznie wpłynąć na decyzje. Dzięki zrozumieniu procesu myślowego klientów i dostosowaniu do niego elementów strony, sklepy internetowe mogą znacząco zwiększyć swoje wyniki.

Poznawanie użytkownika – fundament UX

Badania i analiza potrzeb użytkowników

Aby stworzyć wyjątkowe UX w e-commerce, niezbędne jest poznanie klientów i ich potrzeb. Zrozumienie oczekiwań rzeczywistych użytkowników dostarcza wiedzy niezbędnej do projektowania przyjaznych oraz efektywnych procesów biznesowych i interfejsów stron, czy też aplikacji.

Źródłem wiedzy dla projektantów są badania UX:

  • jakościowe, takie jak wywiady z użytkownikami, dostarczające informacji o motywacjach, zachowaniach i opiniach,
  • ilościowe, na przykład ankiety i analiza danych, mówiące o statystykach, oraz powtarzalnych schematach działania.

Tworzenie person kupujących

Persony, to fikcyjne osoby o cechach zbieżnych z profilem rzeczywistych klientów sklepu lub marki. Poznając dobrze stworzony opis persony można – posługując się empatią – stosunkowo łatwo przewidzieć reakcje odbiorcy na konkretne sytuacje.

Zespoły tworzące rozwiązania dla e-commerce korzystają z person do podjęcia decyzji projektowych odnoszących się do wyglądu sklepu, układu prezentowanej treści, dostępnej funkcjonalności, języka stosowanego w serwisie. W efekcie powstają interfejsy odpowiadające specyficznym potrzebom grupy docelowej.

Mapowanie ścieżki klienta (Customer Journey Map)

Niezwykle ważnym elementem tworzenia projektów dostarczających klientom pozytywnych doświadczeń jest uwzględnianie emocji. Emocje decydują bowiem zarówno o ogólnym podejściu do sprzedawcy, jak i wpływają bezpośrednio na decyzję zakupową.

Narzędziem dającym pełen przegląd odczuć klienta w kontakcie ze sklepem jest Customer Journey Map. Analiza kolejnych etapów poprzedzających zakup i samego zakupu dostarcza ważnych wskazówek do projektowania procesów oraz interfejsu witryny sprzedażowej. Podpowiada na przykład, kiedy i w jaki sposób przekazać informacje na temat promocji, albo na którym etapie procesu unikać nadmiarowego przekazu.

Projektowanie skutecznego interfejsu użytkownika (UI)

Wygląd sklepu internetowego jest jednym z kluczowych czynników sukcesu. Oprócz pierwszego wrażenia, decydującego w znacznym stopniu w ogóle o korzystaniu ze sklepu, walory estetyczne są ważne także dla stałych klientów.

Projektując nową witrynę lub ulepszając istniejącą, warto pamiętać o kilku zagadnieniach odpowiadających za jakość interfejsu sklepu. Poniżej omówię je krótko.

Czystość i klarowność projektu

Przejrzysty interfejs użytkownika, niezakłócany zbędnymi treściami i elementami graficznymi, ułatwia klientom nawigację. W efekcie mogą oni szybko odnaleźć to, czego szukają. Lepszemu doświadczeniu zakupowemu sprzyja także odpowiednie wykorzystanie białych przestrzeni oraz zachowanie spójnej hierarchii wizualnej treści.

Spójność wizualna i jej wpływ na UX

Spójność wizualna jest kluczem do rozpoznawalności marki. Dlatego też należy zadbać o konsekwencję w stosowaniu kolorów, czcionek, ikon oraz innych elementów graficznych w każdej części, na każdej podstronie sklepu.

Warto zapamiętać, że powtarzalność i podobieństwo redukują obciążenie poznawcze użytkowników. To z kolei oznacza, że użytkownicy w znanym, stabilnym środowisku wizualnym mogą poświęcić więcej uwagi prezentowanym produktom. A czas poświęcony na analizę oferty zwiększa prawdopodobieństwem zakupu.

Przyciąganie uwagi przez elementy wizualne

Znaną powszechnie prawdą jest to, że jako odbiorcy treści w Internecie, coraz rzadziej czytamy, a coraz częściej skanujemy teksty. Natłok informacji powoduje, iż odruchowo przełączamy się w tryb poszukiwania najbardziej istotnych, interesujących informacji.

Wykorzystanie angażujących elementów wizualnych skutecznie przyciąga uwagę i prowadzi użytkowników do kluczowych sekcji witryny. Z tego powodu warto stosować w interfejsie sklepu obrazy, animacje, filmy video i inne grafiki, aby pośród treści wyróżnić promocje, bestsellery, czy też nowe produkty.

Responsywność i adaptacja do urządzeń mobilnych

Dostosowanie projektu sklepu do różnych urządzeń jest obecnie koniecznością. Zarówno użytkownicy rozwiązań mobilnych, jak i tych przeznaczonych na komputery mają wysokie oczekiwania wobec użyteczności interfejsów. Oznacza to, że akceptując drobne różnice w funkcjonalności, chcą sprawnie realizować proces zakupu.

Z punktu widzenia e-commerce niezwykle ważna jest szybkość wczytywania witryny i udostępniania przez nią informacji. Dlatego też projektując lub ulepszając sklep bezwzględnie należy zadbać o staranne przygotowanie grafik w odpowiednich formatach oraz optymalizację kodu przez programistów.

Nawigacja i dostępność – klucz do satysfakcji klienta

Ogromny wpływ na skuteczność funkcjonowania sklepu mają jego walory użytkowe. Jeżeli klient nie musi poświęcać czasu i energii na zrozumienie struktury sklepu i poszukiwanie elementów sterujących (menu, przycisków, linków) szansa na finalizację transakcji rośnie.

Poniżej omawiam podstawowe zagadnienia, o które warto zadbać, aby podnosić współczynniki konwersji w sklepie internetowym

Intuicyjna architektura informacji

Klarowna i logiczna architektura informacji jest fundamentalna dla szybkiego i skutecznego dostępu do poszukiwanych treści. Składa się na nią zarówno struktura całego serwisu, jak i poprawnie zaprojektowane, umieszczone w standardowej lokalizacji menu. Nie bez znaczenia jest także stosowanie narzędzi ułatwiających poruszanie się „na skróty” czyli kategoryzacji oraz wyszukiwarki produktów.

Więcej na temat projektowania architektury informacji zawarliśmy w artykule Architektura informacji – co to takiego.

Optymalizacja dla różnych urządzeń

Responsywność interfejsów istotna ze względów estetycznych, ma także kolosalne znaczenie dla łatwości korzystania ze sklepu. Widoczność i czytelność przycisków, dostępność i użyteczność menu bez względu na wielkość wyświetlacza oraz sposób wprowadzania danych przez użytkownika to warunki bezproblemowej interakcji. Ta zaś przekłada się na ogólną satysfakcję klienta i w efekcie wyższe współczynniki konwersji.

Dostępność dla osób z różnymi ograniczeniami

Użyteczność sklepu internetowego wiąże się także z zapewnieniem możliwości korzystania z witryny przez osoby z niepełnosprawnościami. Warto przy tym pamiętać, że w codziennych sytuacjach praktycznie każdy użytkownik styka się z problemami z obszaru dostępności. Wystarczy, że próbujemy przeczytać opis produktu na smartfonie przy silnym świetle słonecznym, albo sfinalizować transakcję jedną ręką, w drugiej niosąc torbę.

Uwzględnianie wymagań dostępności (WCAG) pozwala projektować sklepy w taki sposób, by były użyteczne i przyjazne dla szerokiej grupy odbiorców.

Więcej informacji na temat dostępności serwisów www można znaleźć we wpisie Czym jest dostępność cyfrowa strony internetowej accessibility)?

Chcesz poprawić działanie swojego sklepu internetowego?

Zamów przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Znaczenie szybkości ładowania strony

Szybkość działania strony jest kolejnym ważnym czynnikiem oceny użyteczności sklepu przez jego klientów. Jako odbiorcy treści i usług w Internecie stajemy się coraz bardziej niecierpliwi. Oczekujemy, że informację dostaniemy natychmiast.

Na podstawie badań prowadzonych wiemy, że każde wydłużenie czasu reakcji strony przynosi konkretne straty. Wg Google (badanie z 2017 roku) każde kolejne pół sekundy wczytywania strony odbiera jej 20% użytkowników. Z szacunków Amazon jeszcze z roku 2009 wynika, że dodanie 0,1 sekundy do działania ich serwisów to 1% spadek sprzedaży. Obserwacje te są potwierdzane do dzisiaj.

Warto pamiętać, że szybkość działania witryn oprócz walorów użytkowych wpływa także na skuteczność pozycjonowania. Więcej na ten temat pisaliśmy w artykule poświęconym Core Web Vitals.

Proces zakupowy – eliminacja bariery zakupowej

Innym obszarem związanym z user experience w e-commerce, przekładającym się ostatecznie na wielkość sprzedaży, jest jakość procesów zakupowych. Procesów, które stanowią serce biznesu i które realizowane są w opisywanej wcześniej spójnej architekturze informacji, ubranej w estetyczny interfejs (GUI).

Prostota procesu zakupowego

Podstawową cechą skutecznego, użytecznego procesu jest jego minimalizm. Im mniej kroków potrzebuje klient, aby znaleźć produkt i sfinalizować transakcję, tym lepiej. Dotyczy to w szczególności końcowej fazy, czyli checkoutu.

Podobnie ma się sprawa z otoczką informacyjną. Im mniej przeładowanych tekstem opisów i wymagających przewijania specyfikacji, tym lepiej.

Zastosowanie wymienionych wcześniej zasad dotyczących klarownej struktury oraz intuicyjnego układu strony, standardowej lokalizacji przycisków i innych elementów sterujących także zdecydowanie przyczynia się do wyższej oceny procesu zakupu przez klientów.

Bezpieczeństwo i zaufanie jako aspekty user experience w e-commerce

Niezwykle istotnym elementem eliminującym bariery zakupowe w sklepie internetowym jest bezpieczeństwo z punktu widzenia użytkownika.

O poczucie bezpieczeństwa klienta w e-commerce warto zadbać w dwu wymiarach:

  • formalnym – poprzez stworzenie oraz publikację jednoznacznych, zrozumiałych regulaminów określających zarówno zasady zakupów produktów, jak i zwrotów oraz reklamacji,
  • technicznym – poprzez zaistalowanie certyfikatów SSL potwierdzających wiarygodność witryny sklepu oraz chroniących dane klienta w trakcie składania zamówienia i realizowania płatności.

Informacje zwrotne i wsparcie użytkownika

Na zakończenie wątku warto wspomnieć o wpływie komunikacji na linii klient-sklep jako o istotnym elemencie budowania dobrego user experience w e-commerce.

Istnieje wiele metod skutecznego wspierania użytkowników w procesie dokonywania zakupu. Pierwsza grupa to rozwiązania bardziej tradycyjne takie jak lista najczęściej zadawanych pytań (FAQ), wygodne formularze kontaktowe oraz czytelna informacja na temat opcji kontaktu telefonicznego lub mailowego. Bardziej zaawansowane sposoby komunikacji to chatboty i platformy wykorzystujące mechanizmy sztucznej inteligencji (AI). Niezależnie od zastosowanych rozwiązań, ważne jest by działały one szybko i poprawnie. Bez spełnienia tego warunku osiągnięcie satysfakcji klienta jest niemożliwe.

NASZA REALIZACJA

Projekt sklepu internetowego

Poznaj sklep internetowy zaprojektowany i wdrożony przez ARTNOVA

PORTFOLIO

Testowanie i optymalizacja UX

Tworzenie użytecznych sklepów internetowych nie kończy się ani na etapie projektowania, ani nawet w momencie wdrożenia. W każdej witrynie e-commerce coś można poprawić i udoskonalić. Praktycznie każdy sklep może poprawić współczynniki konwersji, a proces ulepszania z natury jest ciągły i iteracyjny.

Cennym źródłem wiedzy o tym co i dlaczego warto zmienić są badania z klientami. Badania UX dostarczają właścicielowi sklepu rzeczywistych informacji. Wybór odpowiednich metod, określenie celów badawczych, zebranie i opracowanie danych najczęściej warto zlecić wyspecjalizowanemu podmiotowi. Istnieje jednak kilka narzędzi – na przykład ankiety użytkowników, albo testy A/B – które stosunkowo łatwo można wykorzystać samodzielnie.

Więcej informacji na temat typów badań oraz ich przeznaczenia można znaleźć we wpisie Testy UX – jak sprawdzić użyteczność projektu.

Należy też wspomnieć o ważnym narzędziu, jakim jest audyt UX. Audyt daje niezależne spojrzenie na użyteczność sklepu. Z reguły wskazuje on obszary problemowe, których modyfikacja przyniesie poprawę użyteczności. Wykorzystanie informacji o problemach pozwala zarówno na ulepszenie projektu powstającego sklepu, jak i poprawę parametrów funkcjonującej witryny e-commerce.

Podsumowanie

Dobry sklep internetowy, to sklep, który sprzedaje. Sklep atrakcyjny wizualnie, intuicyjny w obsłudze, nie zmuszający do zbędnego poszukiwania informacji, szybki i bezpieczny. Wszystkie wymienione cechy dobrej witryny przekładają się na definicję dobrego user experience w e-commerce (UX) z punktu widzenia klienta.
Chcąc osiągać dobre wyniki sprzedażowe należy zadbać o user experience. To w każdej sytuacji dobra inwestycja

Hamburger menu w interfejsach desktopowych

Czym jest hamburger menu?

Hamburger menu to powszechny element projektowy używany w interfejsach użytkownika, zwykle spotykany – jak wspomniałam – w aplikacjach mobilnych. Nazwa pochodzi od trzech poziomych linii, które przypominają składniki hamburgera, ułożone jeden na drugim.

Kiedy użytkownicy klikają lub dotykają ikony menu hamburgera, zazwyczaj pojawia się menu nawigacyjne lub lista opcji. Tego typu menu jest często stosowane w celu zaoszczędzenia miejsca na ekranie, szczególnie na mniejszych urządzeniach.

Chociaż menu tego typu jest już powszechnie stosowane, do teraz jest przedmiotem debaty w społeczności projektantów. Niektórzy twierdzą, że może ono poprawić doświadczenia użytkownika poprzez uporządkowanie interfejsu. Ich oponenci z kolei wyrażają obawy dotyczące intuicyjności użytkowania, szczególnie na ekranach komputerów, gdzie przestrzeń ekranu nie jest tak ograniczona.

Minusy hamburger menu w nawigacji desktopowej

Mimo, że menu hamburgerowe cieszy się dużą popularnością w projektowaniu UI, zwłaszcza na urządzeniach mobilnych, jego zastosowanie w nawigacji desktopowej wiąże się z pewnymi wadami. Poniżej opiszę kilka z nich.

Ukryta nawigacja

W najbardziej typowej nawigacji desktopowej podstrony są prezentowane w poziomym pasku u góry strony. Takie menu umożliwia użytkownikom natychmiastowe zlokalizowanie interesujących ich informacji. Z kolei menu hamburgerowe ukrywa opcje nawigacyjne, sprawiając, że dla użytkowników staje się mniej oczywiste, gdzie powinni kliknąć, aby znaleźć potrzebne informacje.

Dla użytkowników, którzy nie korzystają na co dzień z aplikacji mobilnych, ikona trzech pasków może nie być zrozumiała jako oznaczenie menu i przycisk, w który należy kliknąć.

Inną kwestią jest fakt, że ekrany komputerów mają więcej przestrzeni w porównaniu do urządzeń mobilnych, więc pojawia się pytanie jaki jest sens zastosowania menu hamburgerowego i zmniejszania widoczności opcji. Ukrycie nawigacji za ikoną może spowodować bowiem, że użytkownicy przegapią ważne podstrony. Istnieje też ryzyko, że użytkownicy nie odkryją pełnej oferty witryny i będą wchodzić w interakcje tylko z widocznymi treściami. Bardzo ciekawy artykuł o hamburger menu znajdziecie na stronie NN group po adresem www.nngroup.com/articles/hamburger-menus/.

Zmniejszona skuteczność kliknięć

Porównajmy znowu typowe menu nawigacyjne i hamburgerowe. W przypadku tego pierwszego, wystarczy, że użytkownik kliknie tylko jeden raz w przycisk prowadzący do interesującej go podstrony. W przypadku menu hamburgerowego, użytkownik musi najpierw kliknąć w ikonę hamburgera, a następnie odszukać podstronę i kliknąć ponownie. Biorąc pod uwagę przyzwyczajenia dzisiejszych użytkowników, taka interakcja może być źródłem frustracji i zniecierpliwienia.

Obawy związane z dostępnością

Dostępność stron internetowych jest nieodłączną częścią projektowania UX. W tym kontekście pojawia się pytanie, czy menu hamburgerowe w nawigacji desktopowej jest dostosowane do potrzeb użytkowników z niepełnosprawnościami. Na przykład czytniki ekranu powszechnie używane przez osoby z ograniczeniami wzroku, mogą mieć trudności z identyfikacją i komunikowaniem ukrytych elementów nawigacyjnych za ikoną hamburgera. To z kolei prowadzi do braku informacji na temat dostępnych opcji, utrudniając użytkownikowi efektywne poruszanie się po witrynie. Projektanci muszą rozważyć alternatywne metody lub zapewnić wyraźne wskazówki, aby zapewnić komplet informacji dla wszystkich użytkowników.

Niespójność z przyjętymi konwencjami desktopowymi

W tym miejscu kłania się nam prawo Jakoba, czyli zasada mówiąca o tym, że użytkownicy więcej czasu spędzają na innych stronach niż na Twojej. Oznacza to, że użytkownicy wolą, aby Twoja witryna działała w taki sam sposób, jak inne, które znają.

W przypadku projektowania nawigacji desktopowej, standardowym rozwiązaniem jest poziomy pasek w górnej części strony, o którym wspomniałam wcześniej. Hamburger menu odbiega więc od tej konwencji. W efekcie, niektórzy użytkownicy mogą je przeoczyć, ponieważ jest dla nich nieintuicyjne lub niezrozumiałe. To z kolei może prowadzić do spadku użyteczności. Więcej o użyteczności i zasadach UX przeczytacie w artykule Zasady projektowania stron internetowych – wytyczne UX tworzenia stron.

infografika: Hamburger menu w nawigacji desktopowej.
Infografika: Hamburger menu w nawigacji desktopowej.
pobierz pdf

Kiedy warto zastosować menu hamburgerowe w nawigacji desktopowej

Istnieją przypadki, kiedy korzystanie z menu hamburgerowego w nawigacji desktopowej może być dobrym pomysłem. Ważne jest, aby dokładnie przebadać kontekst i użytkownika. Poniżej znajdziesz kilka przykładów, gdzie użycie hamburger menu może mieć sens.

Ograniczona przestrzeń ekranu

W przypadkach, kiedy mamy do czynienia ze znaczną ilością treści i ograniczoną przestrzenią ekranu na pulpicie, hamburger menu może pomóc w utrzymaniu czystego i zorganizowanego layoutu, zapobiegając wizualnemu bałaganowi.

Minimalizm i zgodność z trendami w projektowaniu

W przypadkach, w których priorytetem jest podążanie za współczesnymi trendami projektowymi lub gdzie wygląd ma być minimalistyczny, zastosowanie menu ukrytego pod ikoną może być trafne. Czynnikiem, który należy wziąć pod uwagę jest grupa docelowa. Jeśli docelowi odbiorcy są przyzwyczajeni do charakterystycznej ikony i jej funkcjonalności, zwłaszcza jeśli często korzystają z urządzeń mobilnych, wdrożenie jej na desktopie może być zgodne z oczekiwaniami i nawykami użytkowników.

Bardzo rozbudowana nawigacja

W przypadku projektowania bardzo rozbudowanej nawigacji, w której dostępnych jest wiele funkcji, zasadne staje się zastosowanie menu hamburgera. Głównym celem powinno być utrzymanie przejrzystego i zorganizowanego interfejsu głównego. Taki efekt można uzyskać poprzez umieszczenie rzadziej używanych lub mniej ważnych opcji za ikoną.

W ten sposób menu główne może skupić się na podkreślaniu najważniejszych funkcji. Ta decyzja projektowa zapewni, że użytkownicy otrzymają uporządkowany widok, bez natłoku wizualnego,  umożliwiający łatwe lokalizowanie oraz interakcję z kluczowymi funkcjami.

Hamburger menu w tym kontekście posłuży jako kontener dla drugorzędnych elementów nawigacyjnych lub mniej widocznych treści i narzędzi.

Mobile First Design

Mobile First Design, czyli podejście, w którym priorytetem jest projektowanie i optymalizacja doświadczenia użytkownika na urządzeniach mobilnych przed rozszerzeniem go na większe ekrany. Jeśli strona została zaprojektowana w tym duchu, menu hamburgerowe może być spójnym elementem projektu na różnych urządzeniach. Ułatwi to utrzymanie jednolitego doświadczenia użytkownika.

Czas na nowoczesną i efektowną stronę www?

Zamów projekt z wdrożeniem

Wypełnij formularz, skontaktujemy się z Tobą

Najlepsze praktyki dla hamburger menu na komputery stacjonarne

Jeżeli planujesz zastosować menu hamburgerowe w projekcie interfejsu na desktop, warto pamiętać o zastosowaniu najlepszych praktyk. Poniżej znajdziesz kilka zaleceń projektowych.

Strategiczne rozmieszczenie

Menu hamburgerowe powinno być umieszczone w charakterystycznym miejscu, takim jak lewy górny lub prawy górny róg ekranu. Biorąc pod uwagę powszechne konwencje projektowe, użytkownicy oczekują, że elementy nawigacyjne będą znajdować się w tych obszarach.

Wyraźne ikony i etykiety

Upewnij się, że ikona hamburgera nie odbiega od standardowo używanej ikony, która jest łatwo rozpoznawalna. Możesz rozważyć dodanie etykiety przy ikonie, wskazując jej funkcję, np. napis „Menu”. Może to pomóc użytkownikom, zwłaszcza tym niezaznajomionym z symbolem, w zrozumieniu jego funkcji.

Testy z użytkownikami

Zawsze warto przeprowadzić badania użyteczności z docelowymi odbiorcami, aby zebrać opinie na temat skuteczności nie tylko zastosowanego typu menu, ale także całego projektu. Dzięki temu dowiesz się, w jaki sposób użytkownicy wchodzą w interakcję i czy zastosowane rozwiązania są zrozumiałe dla odbiorców.

Podsumowanie

Mimo kontrowersji wokół użycia nawigacji desktopowej w formie hamburger menu, istnieją przypadki, w których jego zastosowanie jest uzasadnione. Użycie tego typu menu na desktopach wymaga starannej analizy kontekstu projektu, z uwzględnieniem jego celów oraz oczekiwań grupy docelowej. Jest to bowiem rozwiązanie projektowe, które przy odpowiednim dostosowaniu, może przyczynić się do poprawy przejrzystości i efektywności interfejsu.

Zasady projektowania stron internetowych – wytyczne UX tworzenia stron

„Don’t make me think” – złota zasada projektowania UX

Zasadę „Don’t make me think” w projektowaniu UX spopularyzował Steve Krug, jeden z pionierów w dziedzinie projektowania interfejsów użytkownika. Krug jest autorem książki o tym samym tytule. Pozycja, opublikowana po raz pierwszy w 2000 roku, stała się klasykiem w dziedzinie UX i projektowania stron internetowych.

Książka Kruga skupia się na zrozumieniu podstaw projektowania stron internetowych, które sprawiają, że użytkownicy mogą łatwo nawigować i korzystać z witryny. Zasada „Don’t make me think” jest jednym z głównych przesłań tej książki i stanowi punkt wyjścia dla projektantów. W skrócie, użytkownik powinien natychmiast zrozumieć, jak korzystać z danej strony bez konieczności zbędnego myślenia lub analizowania. To jedna z najważniejszych zasad projektowania stron www, ponieważ współczesny użytkownik internetu ma ograniczoną cierpliwość. Jeśli strona jest zbyt skomplikowana lub wymaga zbyt dużego wysiłku myślowego, istnieje ryzyko, że użytkownik zrezygnuje i opuści stronę, poszukując alternatywnej, łatwiejszej w obsłudze witryny.

Podstawowe zasady projektowania stron UX/UI

Projektowanie stron internetowych, podobnie jak każda inna dziedzina, opiera się na szeregu zasad i wytycznych. Projektowanie interfejsu użytkownika (UI) i doświadczenia użytkownika (UX) to obszary projektowania stron www, które łączą się w celu stworzenia atrakcyjnych, funkcjonalnych i przyjaznych użytkownikowi produktów digitalowych, w tym stron www. Poniżej opisałam kilka najważniejszych zasad w projektowaniu UX/UI.

Projektowanie zorientowane na użytkownika

Podstawową zasadą projektowania UX/UI jest projektowanie z myślą o użytkowniku (ang. User Centered Design – UCD). Według tej reguły, użytkownik znajduje się w centrum uwagi projektanta. Poznanie docelowych odbiorców ma kluczowe znaczenie i decyduje o wielu aspektach projektu, na różnych etapach jego tworzenia.

Pierwszym krokiem UCD jest dogłębne zrozumienie docelowych odbiorców. Wiąże się to z przeprowadzeniem badań użytkowników w celu zidentyfikowania ich potrzeb, celów i preferencji. Dlatego projektanci stron internetowych powinni dążyć do zrozumienia, co motywuje użytkowników do odwiedzenia witryny lub jakie informacje chcą znaleźć.

Aby lepiej wczuć się w oczekiwania użytkowników, projektanci często tworzą persony użytkownika, czyli fikcyjne postaci, które reprezentują różne segmenty planowanych odbiorców. Więcej o personach można przeczytać we wpisie Co to jest persona UX. Jak tworzyć persony i korzystać z nich w UX Design.

Temat grupy docelowej nie kończy się jedynie na researchu, odbiorcy przewijają się przez cały proces projektowania. Bardzo ważnym etapem są testy użyteczności z udziałem użytkowników. Polegają one na obserwowaniu interakcji osób badanych z witryną w celu zidentyfikowania problemów z użytecznością, zebrania opinii i wprowadzenia ulepszeń. Usability tests pomagają w weryfikacji decyzji projektowych i odkrywaniu wszelkich przeszkód, które użytkownicy mogą napotkać, zarówno przed wdrożeniem produktu, jak i po.

Heurystyki Nielsena

Heurystyki Nielsena, to zestaw dziesięciu wytycznych dotyczących projektowania przyjaznych dla użytkownika i wydajnych interfejsów. Zostały one opracowane przez Jakoba Nielsena, wybitnego eksperta ds. użyteczności, i są szeroko stosowane w dziedzinie projektowania doświadczeń użytkownika (UX).

Heurystyki są cenną listą kontrolną dla projektantów i audytorów. Pomagają identyfikować typowe problemy związane z użytecznością w interfejsach. Wszystkie heurystyki są jednakowo ważne. Jedną z moich ulubionych jest „Pozwalaj wybierać, zamiast zmuszać do pamiętania”. To zasada, która mówi o tym, że interfejs powinien być zaprojektowany w taki sposób, aby umożliwić użytkownikom wykonywanie zadań bez konieczności polegania na własnej pamięci. Wszystkie niezbędne w danym momencie informacje powinny być przez cały czas widoczne na ekranie.

„Prawa UX”

Jest to zestaw zasad, które pomagają w projektowaniu użyteczności. „Prawa” są napisane w cudzysłowiu, ponieważ nie są ścisłymi regułami, ale obserwacjami i zaleceniami opartymi na ludzkim zachowaniu i psychologii.

Jednym z moich ulubionych jest Prawo Jakoba. Ta zasada, nazwana na cześć Jakoba Nielsena, mówi o tym, że użytkownicy więcej czasu spędzają na innych stronach niż na Twojej. Oznacza to, że użytkownicy wolą, aby Twoja witryna działała w taki sam sposób, jak inne witryny, które już znają. Powiązane jest to z zasadą „Don’t make me think”, czyli użytkownicy nie chcą poświęcać energii na uczenie się obsługi Twojej strony. Innym bardzo ciekawym prawem jest „Prawo bliskości”, która mówi o tym, że obiekty, które są umieszczone blisko siebie, postrzegamy jako zgrupowane.

Wszystkich praw jest kilkanaście, a możesz o nich przeczytać w książce Yona Jablonskiego „Prawa UX. Jak psychologia pomaga w projektowaniu lepszych produktów i usług.”. Yon stworzył także stronę „Laws of UX”, która jest rewelacyjnym źródłem wiedzy dla UX designerów.

infografika: zasady projektowania stron www - wytyczne UX
Infografika: Zasady projektowania stron www – wytyczne UX.
pobierz pdf

Wytyczne do projektowania stron internetowych

Kolorystyka i jednolity styl

Wybór kolorystyki strony internetowej ma ogromne znaczenie, ponieważ kolory mają moc wywoływania różnych emocji i skojarzeń. Więcej o odpowiednim dobraniu kolorów na stronę internetową przeczytasz też we wpisie Kolorystyka strony internetowej – jak dobrać kolory?.

Intuicyjna nawigacja

Jak wspominałam wyżej, użytkownicy nie lubią zbędnego zastanawiania się nad obsługą strony. Jednym z najważniejszych aspektów przyjaznej strony jest nawigacja, dzięki której użytkownicy w łatwy sposób będą poruszać się po Twojej witrynie.

Menu nawigacyjne powinno być dobrze widoczne, logicznie uporządkowane, oznaczone wyraźnymi etykietami kategorii, które będą reprezentować zawartość lub sekcje witryny. Unikaj żargonu lub zbyt kreatywnych nazw, które mogą zmylić użytkowników. Nawigacja powinna być identyczna i umieszczona w tym samym miejscu na wszystkich podstronach.

Dostępność strony

Dostępność strony to cecha pozwalająca na korzystanie z witryny przez wszystkie osoby, w tym użytkowników z trwałymi lub kontekstowymi ograniczeniami percepcji, np. wzroku lub słuchu. Więcej tym, czym jest dostępność strony internetowej i jak projektować, aby strona była dostępna przeczytasz w artykule Czym jest dostępność cyfrowa strony internetowej (accessibility)?

Responsywność

W naszym codziennym życiu korzystamy z wielu urządzeń, takich jak telefony, komputery i tablety. Kiedy odwiedzamy stronę internetową, czy to na dużym ekranie komputera stacjonarnego, czy na niewielkim smartfonie, oczekujemy, że dostosuje się ona płynnie do naszego urządzenia. Zdolność adaptacji witryny do urządzenia, znana jako „responsywność”, zapewnia łatwy dostęp do treści i usług, niezależnie od urządzenia, z którego korzystamy. Responsywna strona internetowa jest kluczem do spójnego i komfortowego dla użytkownika doświadczenia online.

Dark mode

Dark mode, czyli tryb ciemny, to tryb wyświetlania, który w ostatnich latach zyskał na popularności. Chociaż tryb ciemny jest doceniany przez wielu użytkowników, zwłaszcza w przypadkach długotrwałego użytkowania w warunkach słabego oświetlenia, to jednak jest on często uważany za miły dodatek, a nie absolutną konieczność. Bardzo wartościowy artykuł na ten temat znajdziesz na stronie  N/N Nielsen Norman Group.

White space

White space, czyli biała przestrzeń, często określana jako „negative space”, jest niezwykle istotnym elementem projektowania zarówno w druku, jak i w produktach cyfrowych. Jest to pusty obszar pomiędzy i wokół elementów w layoucie, takich jak teksty, obrazy.

White space zapewnia wizualny oddech, pozwalając treści i elementom projektu wyróżnić się. Dzięki temu układ nie sprawia wrażenia chaotycznego i przytłaczającego. Odpowiednie użycie białej przestrzeni zwiększa także czytelność, poprzez oddzielenie akapitów, nagłówków i innych elementów tekstowych. Prowadzi wzrok i pomaga czytelnikom płynnie poruszać się po stronie.

Zasady UX a zawartość strony

Zawartość, czyli „content” strony, powinien być dobrany w sposób, który zapewni spójne i przyjemne doświadczenie użytkownika. Zawartość witryny jest substancją, której szukają użytkownicy. Dostarcza cennych informacji, angażujących wizualizacji i atrakcyjnych wiadomości.

Synergia między zasadami UX i wysokiej jakości treścią jest niezbędna do stworzenia strony internetowej, która nie tylko dobrze wygląda, ale także przyczynia się do zaangażowania użytkowników i osiągnięcia celów biznesowych.

Jako zawartość strony traktujemy wszystkie treści, zdjęcia, obrazy które wypełnią witrynę. Warto pamiętać, aby nie przesadzać z ilością treści, stosować nagłówki oraz unikać rozbudowanych bloków tekstu. Jeśli chodzi o zdjęcia i obrazy, powinny być one w jednolitej estetyce z wyglądem strony. Więcej o sposobie prezentowania zawartości strony przeczytasz w naszym artykule o projekcie graficznym strony internetowej.

Wytyczne UX – jakich podstron dotyczą?

Podstrony w witrynie lub aplikacji mogą się różnić się prezentowaną zawartości, ale wytyczne UX dotyczą każdej z nich. Oto kilka ważnych wskazówek dla typowych rodzajów podstron.

Strona główna

Projekt strony głównej powinien zwięźle komunikować cel witryny lub aplikacji. Z tego powodu należy zapewnić klarowną nawigację oraz atrakcyjny, wyróżniający się projekt graficzny. Warto zadbać o responsywny design i wyraźne wezwania do działania (Call to Action – CTA), aby zachęcić użytkowników do interakcji.

Strona kategorii i listingu produktów

Projektując strony kategorii i listy produktów, na pierwszym miejscu należy postawić przejrzystą strukturę i hierarchię, aby ułatwić użytkownikom nawigację w poszukiwaniu konkretnych produktów. Nacisk należy położyć na zwięzłe informacje o produkcie, wysokiej jakości zdjęcia i intuicyjne opcje filtrowania. Również w tym wypadku należy pamiętać o responsywności interfejsu.

Strona pojedynczego produktu

Projekt strony produktu powinien być prosty oraz przejrzysty. Najważniejsze jest przedstawienie istotnych informacji, takich jak szczegóły produktu, specyfikacje i cena. Podstrona koniecznie powinna zawierać wysokiej jakości zdjęcia – jeśli to istotne, pod różnymi kątami – aby użytkownik mógł dokładnie zapoznać się z produktem. Warto zadbać o dodatkowe informacje takie jak możliwości zwrotu i reklamacji oraz czas i ceny wysyłki.

Koszyk i strona płatności

Strona koszyka powinna wyświetlać podsumowanie wybranych pozycji, ilości i wyraźne informacje o cenach. Należy dać możliwość edycji zawartości koszyka oraz wyeksponować przycisk płatności. Na stronie płatności priorytetem jest przejrzysty formularz do wprowadzania danych rozliczeniowych, z wieloma opcjami płatności, jasnymi komunikatami o błędach i zapewnieniem o bezpieczeństwie transakcji.

Strona kontaktowa

Strona kontaktowa powinna być widoczna i łatwo dostępna z poziomu nawigacji. Warto zapewnić kilka możliwości kontaktu, takich jak formularz kontaktowy, adres e-mail i numer telefonu, aby dostosować się do różnych preferencji użytkowników. W przypadku spółek prawa handlowego, należy umieścić tam dane adresowe oraz takie informacje jak numer NIP oraz REGON. Rozważ włączenie krótkiej sekcji FAQ, aby odpowiedzieć na typowe pytania. Jeśli Twoja firma posiada kilka działów, należy je zaprezentować.

Potrzebujesz użytecznej i atrakcyjnej strony www

Zamów projekt UX/UI z wdrożeniem

Dlaczego warto tworzyć strony zgodnie z zasadami UX?

Projektowanie stron internetowych zgodnie z zasadami UX ma kluczowe znaczenie dla zadowolenia użytkowników. Starannie zaprojektowane doświadczenie użytkownika gwarantuje, że odwiedzający mogą płynnie poruszać się po witrynie, łatwo odnajdywać potrzebne informacje i skutecznie realizować zamierzone cele, co przekłada się na zwiększoną satysfakcję.

Jeśli Twoja strona będzie przyjazna i intuicyjna, użytkownicy z przyjemnością będą do niej powracać. Inwestycja w UX nie tylko ułatwia interakcje z witryną, ale także buduje trwałe pozytywne wrażenia, kształtuje lojalność i pozytywny wizerunek marki.

Podsumowanie

W powyższym tekście kryje się jedynie niewielki fragment obszernego świata projektowania UX/UI. Ta fascynująca dziedzina oferuje nie tylko konkretne wytyczne, ale przede wszystkim otwiera drzwi do niekończącej się eksploracji i rozwoju. To dziedzina, gdzie doświadczenie oraz nieustanne dążenie do pogłębiania wiedzy mają kluczowe znaczenie.

Projektowanie UX/UI to coś więcej niż stosowanie pewnych reguł — to sztuka zrozumienia użytkowników i tworzenia interakcji. Kreatywność i empatia współgrają, inspirując do tworzenia innowacyjnych rozwiązań. Prawdziwe mistrzostwo w UX/UI wymaga ciągłego śledzenia zmian oraz adaptacji do nowych technologii.

Dark patterns, czyli złe praktyki w UX Design

Czym są dark patterns w UX?

Dark patterns to praktyki projektowania stron internetowych i aplikacji mobilnych, które celowo wprowadzają użytkowników w błąd, aby skłonić ich do wykonania określonych działań. Są to manipulacje w UX (User Experience), które korzystają z mechanizmów psychologicznych, aby nakłonić użytkowników do decyzji, które mogą być sprzeczne z ich interesem.

Często wykorzystują one skłonność ludzi do szybkich, nieświadomych decyzji, które prowadzą do działań niezgodnych z pierwotnymi intencjami. Te sztuczki w projektowaniu mogą mieć różne formy – od mylących przycisków, przez reklamy udające treść, po ukrywanie informacji przed niezalogowanymi użytkownikami.

Popularne złe praktyki (dark patterns) w projektowaniu i tworzeniu stron internetowych

Dark patterns nie są jednorodne – istnieje wiele różnych technik i strategii, które projektanci mogą stosować, aby wprowadzić użytkowników w błąd. Niektóre są subtelne, inne natomiast agresywne i irytujące. W tym rozdziale przyjrzymy się kilku popularnym „ciemnym wzorcom”, które można znaleźć na wielu stronach internetowych i w aplikacjach.

Mylące przyciski

Jednym z popularnych dark patterns są mylące przyciski. Mogą one przybierać formę przycisków o niejasnej funkcjonalności lub takich, które są specjalnie zaprojektowane, aby skłonić użytkownika do kliknięcia na nie, mimo że mogą prowadzić do niepożądanych działań, np. zakupu dodatkowego produktu lub subskrypcji.

Reklamy „udające” treść

Niektóre strony stosują reklamy, które celowo udają treść strony. Często są one zaprojektowane tak, aby przyciągnąć uwagę użytkownika i skłonić go do kliknięcia, pod pretekstem dostarczenia wartościowej informacji.

„Confirmshaming” – wzbudzanie w użytkownikach poczucia winy

Technika ta polega na manipulacji emocjonalnej użytkowników, zazwyczaj poprzez formułowanie przycisków lub komunikatów w taki sposób, aby użytkownik czuł się winny, jeśli nie wykonuje określonego działania.

Podchwytliwe pytania i stosowanie podwójnego zaprzeczenia

Inną techniką są podchwytliwe pytania lub stosowanie podwójnego zaprzeczenia, które mają na celu wprowadzenie użytkowników w błąd. Technika zakłada, że Internauta nie zrozumie pytania i – w stanie zagubienia i rozkojarzenia – udzieli niekorzystnej dla siebie odpowiedzi.

Automatyczne zaznaczanie odpowiedzi

Często spotykane są formularze, które mają już zaznaczone pewne odpowiedzi. Może to prowadzić do sytuacji, gdzie użytkownik niechcący wybiera opcję, na którą by się nie zdecydował, gdyby musiał ją samodzielnie zaznaczyć.

Ukrywanie indeksowanych treści przed niezalogowanymi użytkownikami

Niektóre strony ukrywają pewne treści przed niezalogowanymi użytkownikami, zmuszając ich do tworzenia konta lub logowania, aby uzyskać dostęp do pełnej zawartości strony.

Wymaganie zbyt szczegółowych danych osobowych podczas rejestracji

Niekiedy strony wymagają od użytkowników podania niepotrzebnie szczegółowych danych osobowych podczas rejestracji, co stoi w sprzeczności z dobrymi praktykami UX. Odrębną kwestią jest w tym przypadku naruszenie prywatności użytkowników.

Uciążliwe popupy

Kolejnym przykładem dark patterns są uciążliwe popupy. Nie chodzi tu oczywiście o każde wyskakujące okienko. Niekiedy ze względów technicznych lub funkcjonalnych jest to jedyne albo najbardziej praktyczne rozwiązanie.

Złą praktyką jest nadmierne używanie pop-upów, które utrudniają nawigację po stronie lub zmuszają do podjęcia określonego działania przed kontynuacją.

infografika: Dark Patterns UX
Infografika: Dark Patterns UX.
pobierz pdf

Skrajnie złe praktyki w UX

Niektóre praktyki dark patterns są nie tylko irytujące, ale wprowadzając użytkowników w błąd mogą prowadzić do poważnych problemów. Niżej opiszę kilka skrajnie złych praktykach UX, które mogą prowadzić do niechcianych wydatków, naruszeń prywatności, a nawet wykorzystania użytkowników do spamowania innych.

Roach motel (Motel dla karaluchów)

Pojęciem „roach motel” określa się czasami procesy na stronie lub w aplikacji, które są łatwe do rozpoczęcia, ale trudne do zakończenia. Przykładowo, mogą to być celowo utrudnione procedury anulowania subskrypcji lub usunięcia konta. Celem takich rozwiązań jest zniechęcenie użytkowników do zrezygnowania z usługi.

Przemyt produktów do koszyka

Niektóre strony internetowe automatycznie dodają do koszyka dodatkowe produkty lub usługi, których użytkownik nie zamierzał kupić. Użytkownik musi zauważyć i ręcznie usunąć te niechciane przedmioty, co jest przykładem manipulacji i złej praktyki UX. Sztandarowym przykładem zastosowania tej praktyki jest zakamuflowane przedłużenie gwarancji na produkt.

Ukryte koszty doliczane do ceny ostatecznej

Ukryte koszty to kolejna forma manipulacji. Użytkownik dowiaduje się o dodatkowych opłatach dopiero w ostatnim etapie procesu zakupu. Może to wprowadzać w błąd i skłaniać do zakupów, które byłyby inaczej nieatrakcyjne. Co ciekawe, w tej technice często wykorzystywane są dwa różne mechanizmy: przemyt produktu i efekt utopionych kosztów.

Spam znajomych

Niektóre aplikacje i strony internetowe zachęcają lub nawet zmuszają użytkowników do udostępniania treści lub zaproszeń do swojej sieci kontaktów. Takie praktyki nie tylko naruszają prywatność, ale również mogą prowadzić do prowadzenia niechcianej korespondencji (spamu).

Wymuszenie przedłużenia płatnej subskrypcji

Niektóre usługi wymuszają automatyczne odnawianie płatnej subskrypcji, bez jasnej możliwości jej anulowania. Takie praktyki są nie tylko frustrujące dla użytkowników, ale mogą prowadzić do niechcianych wydatków.

Szukasz rzetelnego wykonawcy strony www?

Zamów wycenę projektu UX i UI

Wypełnij formularz, skontaktujemy się z Tobą

UX Dark Patterns – dlaczego są tak powszechne?

Dark patterns są powszechne, ponieważ często są skuteczne w osiąganiu krótkoterminowych celów biznesowych. Takich, jak na przykład, zwiększenie sprzedaży czy podniesienie innego rodzaju konwersji. Można je traktować jako formę manipulacji, która wykorzystuje psychologiczne słabości i skłonności użytkowników. Takie praktyki mogą wydawać się atrakcyjne dla niektórych firm, które dążą do szybkich wyników.

Takie podejście prowadzi jednak do negatywnych doświadczeń użytkowników. To zaś w długim terminie może zaszkodzić reputacji firmy i jej relacjom z klientami. W długofalowej perspektywie znacznie korzystniejsze okazują się uczciwość w komunikacji i dbałość o komfort z użytkowania rozwiązań.

Konsekwencje stosowania dark patterns na stronach internetowych

Stosowanie dark patterns ma szereg negatywnych konsekwencji.

Po pierwsze, może prowadzić do utraty zaufania użytkowników. Gdy ludzie czują się oszukani, manipulowani lub zmuszeni do niechcianych działań, mogą zacząć unikać interakcji z daną stroną czy aplikacją.

Po drugie, może to zaszkodzić reputacji firmy. W erze mediów społecznościowych, gdzie informacje rozprzestrzeniają się bardzo szybko, praktyki te mogą być szybko wykryte i skrytykowane.

Po trzecie, może to prowadzić do problemów prawnych. W części krajów, niektóre formy dark patterns są zakazane prawnie (np. w USA niedopuszczalne jest opisane wyżej utrudnianie rezygnacji z subskrypcji).

Pomijając kwestię samej uczciwości i rzetelności kupieckiej przytoczone fakty przemawiają przeciw złym praktykom UX. Mimo krótkoterminowych korzyści, całkowity bilans wskazuje, że stosowanie dark patterns wpływa negatywnie na efekty prowadzonej działalności.

Złe praktyki w UX – podsumowanie

Dark patterns, czyli złe praktyki w UX Design, to zjawisko, które niestety jest nadal powszechne na stronach internetowych i w aplikacjach. Choć mogą przynosić krótkoterminowe korzyści, takie jak zwiększenie sprzedaży czy podniesienie innych współczynników konwersji, ich długofalowe skutki są negatywne. Użytkownicy mogą czuć się oszukani i zmanipulowani, co prowadzi do utraty zaufania i szkodzi reputacji firmy. W świecie wirtualnym, gdzie doświadczenie użytkownika ma kluczowe znaczenie, dążenie do etycznego projektowania UX, które szanuje użytkowników i dba o ich potrzeby, jest niezwykle ważne.

Jak tworzyć komunikaty o błędach na stronach internetowych?

Czym jest i czemu służy komunikat o błędzie na stronie www

Komunikat o błędzie na stronie internetowej to informacja zwracana użytkownikowi, kiedy coś nie idzie zgodnie z planem. Sytuacja może być wynikiem błędu technicznego, problemu z treściami wprowadzanymi przez użytkownika lub niezgodności z określonymi zasadami na stronie.

Celem komunikatu o błędzie jest informowanie użytkownika o problemie i często zasugerowanie jak go rozwiązać. Komunikat pomaga też zrozumieć, co poszło nie tak i jak kontynuować działania. Dobrze zaprojektowane komunikaty o błędach są kluczem do poprawy doświadczeń użytkownika (user experience).

Jakie wyróżniamy rodzaje komunikatów o błędach

Kiedy mówimy o komunikatach na stronach internetowych, ważne jest, aby rozróżniać ich typy. Każdy z rodzajów swoją bowiem inne przeznaczenie i działanie, a ich prawidłowe użycie jest kluczem do skutecznej interakcji z użytkownikiem. Poniżej przyjrzyjmy się najważniejszym typom komunikatów.

Błąd – Error

Błąd, znany także jako „Error”, jest komunikatem, który pojawia się, gdy na stronie wystąpił poważny problem, uniemożliwiający dalsze działanie. Jest to sytuacja, gdy coś poszło naprawdę nie tak. Przykładem może być słynna „strona błędu 404”, która informuje, że żądana strona nie została znaleziona. Komunikaty o błędach powinny być jak najbardziej konkretne i zrozumiałe, aby użytkownik wiedział, co poszło nie tak. Powinny też, jeżeli to możliwe, wskazywać kierunek rozwiązania problemu, np. link do strony głównej w przypadku błędu 404.

Zachęcam do lektury wpisu „Jak zaprojektować podstronę błędu 404”.

Ostrzeżenie – Warning

Ostrzeżenie, czyli „Warning”, to komunikat informujący użytkownika, że może wystąpić problem, jeśli będzie kontynuował aktualne działanie. Przykładowo, ostrzeżenie może pojawić się, gdy użytkownik próbuje usunąć swoje konto lub trwale skasować plik. Ostrzeżenia są szczególnie ważne w miejscach, gdzie decyzje operatora mogą mieć długotrwałe konsekwencje. Dobre ostrzeżenia są wyraźne i bezpośrednie, zapewniając przez to użytkownikowi pełne zrozumienie konsekwencji jego działań.

infografika: Komunikaty o błędach na stronie internetowej. Jak je tworzyć?
Infografika: Komunikaty o błędach na stronie www.
pobierz pdf

Inne typy komunikatów

Funkcjonują również inne rodzaje komunikatów, które wykorzystywane są do obsługi błędów i powiadomień użytkowników o istotnych, innych niż błędy zdarzeniach.

Potwierdzenie – Confirmation

Potwierdzenie, znane jako „Confirmation”, to komunikat, który informuje użytkownika, że jego działanie zostało pomyślnie zakończone. Takie komunikaty są zwykle związane z pozytywnym doświadczeniem użytkownika, potwierdzając, że wszystko przebiegło zgodnie z planem. Na przykład, po złożeniu zamówienia w sklepie internetowym, użytkownik może otrzymać komunikat potwierdzający, że zamówienie zostało poprawnie złożone i jest w trakcie przetwarzania.

Powiadomienie – Notification

Powiadomienie, czyli „Notification”, to komunikat, który dostarcza użytkownikowi ważnych informacji, ale niekoniecznie związanych z błędem czy potwierdzeniem akcji. Może to być na przykład przypomnienie o nadchodzącym wydarzeniu, informacja o nowym poście na blogu lub wiadomość o aktualizacji systemu.

Powiadomienia są kluczowe dla utrzymania użytkowników na bieżąco z ważnymi informacjami i zapewnienia im aktualności. Ich głównym celem jest przekazanie informacji, nie wpływanie na działania użytkownika, jak to ma miejsce w przypadku błędów czy ostrzeżeń.

Jak zaplanować komunikaty o błędach – krok po kroku

Planowanie komunikatów o błędach to istotny element tworzenia strony internetowej. Poniżej przedstawiamy kroki, które mogą pomóc w tym procesie:

  1. Zidentyfikuj potencjalne błędy: Rozważ wszystkie możliwe błędy, które mogą wystąpić podczas interakcji użytkownika ze stroną.
  2. Określ typ komunikatu: Zdecyduj, czy dany problem wymaga zastosowania błędu, ostrzeżenia, potwierdzenia, powiadomienia czy ich kombinacji przeplatanej akcjami użytkownika.
  3. Napisz jasny komunikat: Używaj prostych, konkretnych sformułowań. Komunikat powinien być zrozumiały, precyzyjny i pomocny.
  4. Projektuj dla użytkownika: Zawsze myśl o tym, jak komunikat wpłynie na doświadczenie użytkownika. Czy dostarcza odpowiednich informacji, czy pomaga w rozwiązaniu problemu?
  5. Testuj: Sprawdź, jak użytkownicy reagują na komunikaty i dostosuj je w razie potrzeby. Pamiętaj, że proces ten jest ciągły i wymaga regularnego powtarzania.

Jak wyświetlać komunikaty o błędach na stronie?

Wyświetlanie komunikatów o błędach na stronie internetowej powinno być przemyślane, aby maksymalizować ich efektywność i minimalizować frustrację użytkownika.

  1. Wyraźna lokalizacja: Komunikat powinien być wyświetlany w miejscu, które jest łatwo zauważalne, ale nie przeszkadza w korzystaniu ze strony.
  2. Czytelność: Komunikaty powinny być napisane jasnym, zrozumiałym językiem i wyróżniać się na tle strony.
  3. Czas wyświetlania: Komunikat o błędzie powinien pozostać na ekranie wystarczająco długo, aby użytkownik mógł go przeczytać. W przypadku błędów krytycznych, komunikat powinien być widoczny, dopóki problem nie zostanie rozwiązany.
  4. Interaktywność: Jeśli to możliwe, daj użytkownikowi możliwość interakcji z komunikatem, na przykład zamknięcia go po przeczytaniu.
  5. Spójność: Utrzymuj spójność komunikatów na całej stronie, aby użytkownik łatwo je rozpoznawał.

Szukasz wykonawcy strony www?

Prześlij brief lub zadzwoń

Jak pisać dobre komunikaty o błędach?

Właściwie sformułowany komunikat to klucz do zrozumienia problemu przez użytkownika i dalszego działania. W tym rozdziale przyjrzymy się, jak pisać dobre komunikaty o błędach. Zajmiemy się sposobem prezentowania informacji, opisem problemu, wyjaśnieniem skutków i możliwościami naprawy.

Jasny i krótki przekaz komunikatu

Komunikaty o błędach powinny być jak najbardziej zrozumiałe. Właściwe ujęcie problemu jest kluczem do zapewnienia, że użytkownik zrozumie, co poszło nie tak.

Przede wszystkim, przekaz powinien być jasny i krótki. Unikaj skomplikowanych zwrotów i języka technicznego – użytkownik musi zrozumieć istotę problemu, a nie mechanizm jego powstania. Pamiętaj, że przekaz powinien być zwięzły, ale jednocześnie zawierać wszystkie niezbędne informacje. Krótki, ale jasny komunikat to pierwszy krok do skutecznego radzenia sobie z błędami.

Opisz co poszło źle

Podstawowym elementem każdego komunikatu o błędzie powinno być wyjaśnienie, co poszło nie tak. Użytkownik musi zrozumieć, jaki problem wystąpił. Opis powinien być jasny i bezpośredni, na przykład „Nie udało się załadować strony” lub „Twoje hasło jest nieprawidłowe”. Unikaj ogólnikowych komunikatów typu „Wystąpił błąd”, które nie dostarczają żadnej wartości. Pamiętaj, że użytkownik musi wiedzieć, co poszło nie tak, aby móc podjąć odpowiednie kroki i skutecznie rozwiązać problem.

Wyjaśnij co teraz się stanie

Po wyjaśnieniu, co poszło nie tak, następnym krokiem jest wyjaśnienie, co teraz się stanie. Czy błąd wpłynie na dalsze działanie na stronie? Jakie wywoła konsekwencje? Czy użytkownik musi czekać, aż problem zostanie naprawiony? Czy może kontynuować używanie strony pomimo błędu? Informacja ta jest kluczowa dla użytkownika, aby wiedział, co powinien zrobić dalej. Wyjaśnienie konsekwencji pomaga zrozumieć skutki błędu i pozwala użytkownikowi podjąć świadomą decyzję o dalszych krokach.

Objaśnij jak można to naprawić

Ostatnim, ale nie mniej ważnym elementem jest podanie użytkownikowi wskazówek, jak można naprawić problem. Jeżeli jest to możliwe, powinieneś podać konkretne kroki do rozwiązania problemu, np. „Spróbuj odświeżyć stronę” lub „Wprowadź hasło ponownie”. Jeśli problem wymaga interwencji z Twojej strony, poinformuj o tym użytkownika i daj mu znać, że pracujesz nad rozwiązaniem. Dzięki temu użytkownik nie tylko zrozumie problem, ale będzie miał też narzędzia do jego rozwiązania i świadomość, że jest pod Twoją stałą opieką.

Podsumowanie

Zrozumienie i umiejętne stosowanie komunikatów o błędach to klucz do tworzenia stron internetowych, które są przyjazne dla użytkowników. Pamiętaj, że dobrze sformułowany komunikat o błędzie może nie tylko pomóc użytkownikowi zrozumieć problem, ale również poprawić jego doświadczenie na Twojej stronie. Znajomość różnych typów komunikatów, umiejętność ich planowania i skuteczne wyświetlanie to elementy, które powinny stanowić podstawę każdego projektu stron internetowych.

Makieta UX – co to jest i jak ją stworzyć?

Czym są makiety UX?

Makiety UX to wizualne schematy, które projektanci tworzą, aby nakreślić, jak będzie wyglądał i działał interfejs produktu cyfrowego. Mogą przybierać formę prostych szkiców, bardziej szczegółowych wireframe’ów, a także interaktywnych prototypów, pozwalając na wczesne testowanie i doskonalenie doświadczenia użytkownika.

Dlaczego warto korzystać z makiet UX?

Korzystanie z makiet UX pozwala przede wszystkim na szybkie walidowanie pomysłów i tworzenie wstępnych koncepcji, zarysów projektu. Umożliwia wczesne wychwycenie potencjalnych problemów w projekcie, pozwala zrozumieć, jak użytkownicy będą korzystać z produktu, ułatwia komunikację między zespołem projektowym, a klientem. Prototypy pozwalają na testowanie różnych rozwiązań i iteracyjne doskonalenie projektu. Korzystanie z makiet oszczędza czas i zasoby poprzez eliminację błędów na etapie projektowania, a nie w trakcie wdrażania produktu.

infografika: Różnica między makietami UX: low fidelity i high fidelity
Infografika: Różnica między makietami UX: LoFi i HiFi.
pobierz pdf

Rodzaje makiet UX

Istnieją dwa główne rodzaje makiet UX. Najbardziej podstawowym są makiety LoFi, czyli low-fidelity. Są to proste szkice lub wireframe’y, które skupiają się na podstawowej strukturze i układzie interfejsu użytkownika. Stanowią ogólny zarys projektu, pomagając zrozumieć koncepcję. Makiety HiFi, czyli High-fidelity to szczegółowe i zaawansowane mock-upy, które odwzorowują wygląd i zachowanie finalnego produktu. Zawierają dokładne elementy grafiki, kolorystykę oraz interakcje i animacje.

Czym jest makieta UX LoFi?

Makieta LoFi (Low-fidelity, ang. niskiej szczegółowości) to uproszczona reprezentacja projektu interfejsu. Zazwyczaj jest tworzona na wczesnych etapach procesu projektowania. Skupia się na nakreśleniu struktury i układu produktu cyfrowego takiego jak strona internetowa lub aplikacja mobilna, celowo pomijając skomplikowane szczegóły wizualne i zaawansowane interakcje.

Architektura informacji, nieodłączny element projektowania UX, odgrywa kluczową rolę w makietach LoFi. Obejmuje ona organizowanie treści w celu stworzenia spójnego i intuicyjnego doświadczenia użytkownika. Chociaż makiety Lo-Fi nie mają wyrafinowanej estetyki, są one niezwykle ważne w kształtowaniu podstaw projektu. Skupiając się na architekturze informacji i układzie, pozwalają projektantom ocenić skuteczność nawigacji, hierarchii i przepływu użytkowników na wczesnym etapie procesu projektowania. Makiety Lo-Fi ułatwiają również współpracę między członkami zespołu i klientami, zapewniając namacalną reprezentację struktury produktu.

Przykład makiety LoFi

Makiety Lo-Fi charakteryzują się odręcznymi, prostymi szkicami lub cyfrowymi wireframes’ami. Przedstawiają one głównie zarys projektowanego produktu. Elementy strony takie jak menu, nagłówki, zdjęcia stanowią tylko placeholdery, czyli tylko zaznaczają miejsce w którym znajdzie się docelowy element. Przy projektowaniu makiet LoFi nie należy bardzo skupiać się na designie, tylko na ułożeniu funkcjonalności. W ten sposób w kolejnym kroku, czyli makietach HiFi możemy skupić się wyłącznie na estetyce.

Przykład makiety LoFi.

Makieta UX HiFi – charakterystyka

Makieta HiFi (High-fidelity, ang. wysokiej szczegółowości) to dopracowana wizualnie reprezentacja projektu interfejsu użytkownika, mająca ściśle przypominać ostateczny wygląd i sposób działania produktu cyfrowego, np. strony www lub aplikacji mobilnej. Takie prototypy zawierają dopracowaną grafikę, kolory, typografię i skomplikowane szczegóły wizualne, prezentując niemal realistyczną reprezentację doświadczenia użytkownika. Makiety o wysokiej szczegółowości często integrują zaawansowane interakcje, animacje i inne dynamiczne elementy, które naśladują rzeczywiste zachowanie produktu.

W kontekście projektowania graficznego stron internetowych, makiety HiFi odgrywają kluczową rolę w prezentowaniu estetyki wizualnej i elementów brandingowych witryny. Projektanci używają tego typu mock-upów, aby zaprezentować dokładne rozmieszczenie obrazów, przycisków, menu nawigacyjnych i sekcji treści, zapewniając spójne i atrakcyjne wrażenia wizualne.

Przykład makiety HiFi

To jak będzie wyglądała makieta o wysokiej szczegółowości będzie zależało od typu produktu, jaki będzie prezentowany. Na przykład Landing Page strony o podróżowaniu będzie zawierał menu nawigacyjne z logo oraz linkami do reszty podstron, np. do oferty, kontaktu czy FAQ. Poniżej może znaleźć się fotografia pięknego krajobrazu oraz nagłówek, a poniżej zaprojektowany przycisk CTA.

Przykład makiety HiFi.

Jakie narzędzia wykorzystuje się do tworzenia makiet UX?

Wybór narzędzia zależy od preferencji projektowych, wymagań projektu i oczekiwanego poziomu szczegółowości. Przy rozpoczęciu tworzenia makiet LoFi warto skorzystać z tzw. Paper Prototyping, czyli metody kartki i długopisu. Jest to najbardziej podstawowa metoda, która pozwala na szybkie szkice i burze mózgów.

Istnieje wiele programów komputerowych, z których można skorzystać przy tworzenia mock-upów UX. Możliwości projektowe i opcje współpracy w programie Figma sprawiają, że nadaje się zarówno do tworzenia makiet LoFi, jak i HiFi, umożliwiając pracę zespołową w czasie rzeczywistym. Innym narzędziem wartym uwagi jest program Framer. Jest to zaawansowane narzędzie do projektowania UX i prototypowania, które pozwala projektantom tworzyć interaktywne i animowane interfejsy, szczególnie przydatne w przypadku makiet.

Podsumowanie

Tworzenie makiet UX jest bardzo ważnym krokiem w procesie projektowania produktów digitalowych. Nie warto go pomijać, o czym przekonał się już niejeden projektant. W produktach cyfrowych równie ważna jak estetyka jest funkcjonalność, a ją projektujemy w fazie makietowania LoFi. Dodatkowe korzyści z tworzenia mock-upów są bardzo liczne. Przy ich pomocy możemy walidować wstępne koncepcje, prezentować projekt klientom oraz testować produkt zanim zostanie wprowadzony na rynek.

Czym jest dostępność cyfrowa strony internetowej (accessibility)?

Czym jest dostępność cyfrowa (accessibility)?

O dostępności cyfrowej możemy mówić wtedy, gdy z produktów cyfrowych, czyli stron internetowych, aplikacji mobilnych czy dokumentów (np. plików PDF) mogą skorzystać osoby z niepełnosprawnościami i różnymi ograniczeniami. Skorzystanie z produktów cyfrowych oznacza, że z jednej strony będą one odpowiednio przygotowane pod kątem percepcji, a z drugiej będzie możliwe „odczytywanie” ich przez narzędzia wspomagające, np. czytniki stron dla osób niewidomych.

Jeśli chcesz się dowiedzieć więcej o tym, jak uczynić swoją stronę internetową dostępną dla osób z różnymi rodzajami niepełnosprawności, zapraszam do przeczytania artykułu Dostosowanie stron www dla niepełnosprawnych.

Kogo dotyczy web accessibility?

Bardzo wiele osób twierdzi, że web accessibility, czyli dostępność cyfrowa, to coś czego potrzebują tylko osoby z niepełnosprawnościami. Owszem, osoby ze szczególnymi potrzebami potrzebują dostępnych produktów cyfrowych, ale temat ten jest znacznie szerszy. Niejednokrotnie osoby w pełnym zdrowiu mogą w wielu sytuacjach skorzystać z tego, że dana strona czy aplikacja jest dostępna. Przyjrzyjmy się tematowi bliżej, kogo i w jakim stopniu dotyczy temat dostępności.

Osoby niewidome i słabowidzące

Szacuje się, że w Polsce żyje około 1 miliona osób, które deklarują, że mają znaczne problemy z widzeniem. Będą to osoby niewidome, słabowidzące lub z innymi dysfunkcjami wzroku, które uniemożliwiają na przykład przeczytanie tekstu. Wśród nich jest ponad 40 tys. osób, które deklarują, że nie widzą w ogóle. Osobą niewidomą WHO określa kogoś kto:

  • nie ma poczucia światła,
  • ostrość wzroku przy maksymalnej korekcji okularowej nie przekracza 0,05 (gdy pełna ostrość wzroku określana jest wartością 1,0),
  • jej pole widzenia jest zawężone do maksymalnie 20 stopni.

W jaki sposób korzystają z serwisów
osoby z dysfunkcjami wzroku

  • Powiększają ekran.
  • Dostosowują ekran.
  • Korzystają z czytników stron.
  • Doświadczają materiałów wizualnych poprzez audiodeskrypcję.

Osoby niesłyszące

Grupa określana jako jako osoby niesłyszące jest bardzo różnorodna. Dostępne źródła podają, że liczbę osób głuchych w Polsce szacuje się na około 0,5 miliona.

O kim mówimy myśląc o osobach niesłyszących? Z jednej strony znajdą się to osoby starsze, które wraz z wiekiem coraz gorzej słyszą i potrzebują wsparcia, np. aparatów. Będą to również osoby Głuche posługujące się Polskim Językiem Migowym. Wśród nich z kolei znajdą się zarówno osoby, które znają język polski i jednocześnie wspierają się PJM, ale będą również takie, które z powodu swojego zdrowia nie znają polskiego i posługują się tylko i wyłącznie PJM.

W jaki sposób korzystają z serwisów osoby niesłyszące

  • Wspierają się napisami rozszerzonymi.
  • Korzystają z obecności tłumacza PJM.

Osoby z niepełnosprawnością ruchową

To również bardzo szeroka i różnorodna grupa. Różnorodność ta wynika głównie ze stopnia i charakteru ograniczeń. Jednak duża część z tych ograniczeń utrudnia, a często uniemożliwia korzystanie z produktów cyfrowych. Żeby bardziej zobrazować sobie, o jakim utrudnieniach mówimy pomyślmy o osobie ze złamaną lub złamanymi rękami, osobie z chorobą Parkinsona, czy osobie zupełnie unieruchomionej (leżącej).

W jaki sposób korzystają w serwisów osoby z niepełnosprawnością ruchową

  • Posługują się nawigacją głosową.
  • Nawigują przy użyciu klawiatury.
  • Posługują się switchem.

Inne ograniczenia

Powyżej opisane ograniczenia to niepełnosprawności powszechnie przychodzące na myśl. Pamiętajmy jednak, że istnieje wiele innych ograniczeń, które nie pozwalają korzystać z produktów cyfrowym wielu osobom. Będą to osoby z:

  • zaburzeniami poznawczymi,
  • padaczką fotogenną,
  • dysleksją,
  • czasowymi ograniczeniami wynikającymi z kontekstu, w jakim się znajdują (np. osoba odtwarzająca materiał video w miejscu publicznym, potrzebująca napisów aby zrozumieć sens przekazu).

Myśląc o dostępności nie zapominajmy również o osobach o słabszych kompetencjach w danym temacie, osobach słabo znający język polski czy tych, które korzystają ze starszego sprzętu. Odpowiadając więc na pytanie postawione na początku, kogo dotyczy web accessibility, możemy śmiało stwierdzić, że temat dotyczy lub może dotyczyć każdego.

Web Accessibility Initiative (WAI) – czyli kto ustala zasady dostępności strony?

Web Accessibility Initiative to inicjatywa powołana przez organizacje o nazwie World Wide Web Consortium (W3C). Jej działalność skierowana jest na zwiększenie dostępności serwisów internetowych w oparciu o liczne wytyczne, które mają tę dostępność zapewnić.

Dokumenty regulujące dostępność cyfrową stron internetowych

Na świecie istnieją liczne dokumenty regulujące dostępność cyfrową. Szereg zaleceń tworzonych jest przez niezależne organizacje, o czym wspomniałam powyżej. Zalecenia te wykorzystywane są z kolei w prawodawstwie poszczególnych państw. W Unii Europejskiej kraje członkowskie zostały już jakiś czas temu zobowiązane do regulacji kwestii dostępności cyfrowej. Regulacje te wspierają się właśnie wytycznymi stworzonymi przez organizacje zajmującymi się accessibility.

WCAG

Web Content Accessibility Guidelines, w skrócie WCAG, to najbardziej popularny zestaw zaleceń dotyczących zapewnienia dostępności cyfrowej. WAI przygotowało listę kryteriów, których spełnienie zapewnia dostępność serwisom internetowym. Kryteria, o których mowa pomagają w stworzeniu dostępnego serwisu zarówno osobom programującym, projektantom UX, projektantom graficznym, jak i  osobom tworzącym treści na stronie.

ATAG

ATAG, czyli Authoring Tool Accessibility Guidelines, to standard służący osobom programującym narzędzia autorskie. Narzędzia autorskie to rodzaj oprogramowania, które programiści i inni twórcy stron internetowych używają do stworzenia serwisów internetowych, czyli na przykład systemy CMS.

UAAG

UAAG, czyli User Agent Accessibility Guidelines, to zestaw zaleceń służący temu, aby dostępne były aplikacje do przedstawiania treści w internecie (przeglądarki, playery itp.).

infografika: Accessibility - czym jest dostępność strony internetowej
Infografika: Accessibility – czym jest dostępność strony internetowej.
pobierz pdf

Trzy poziomy dostępności strony

Istnieją trzy poziomy, które określają, w jakim stopniu strona jest dostępna. Najprościej mówiąc, to grupy kryteriów wyznaczonych przez WCAG, inaczej nazywanych kryteriami sukcesu. Najbardziej podstawowym poziomem zapewniającym dostępność jest poziom A. Jeśli strona spełnia kryteria z poziomu A, można powiedzieć, że strona jest ogólnie dostępna. Kolejny poziom, AA, jest zalecany po to, aby usprawnić dostęp do serwisów osobom ze szczególnymi potrzebami. Natomiast poziom AAA jest najbardziej zaawansowany i jego osiągnięcie sprawa, że używanie serwisów internetowych jest dla osób z niepełnosprawnością po prostu komfortowe.

Jak poprawić dostępność strony internetowej

Poprawa dostępności strony internetowej to sprawa złożona, wymagająca czasu, cierpliwości i pracy wielu osób. Jednak przede wszystkim potrzebna jest świadomość problemu.

Dostępności nie zapewnimy w jeden dzień, potrzebny jest plan, który po kolei jako organizacja będziemy realizować. Warto pamiętać, że o dostępność serwisu muszą zadbać zarówno programiści, jak i projektanci UX, projektanci graficzni, osoby przygotowujące treści na stronę oraz te, które je w serwisie publikują. Jest to zdecydowanie praca zespołowa.

Dlaczego warto mieć witrynę dostępną dla osób niepełnosprawnych?

Dostępna cyfrowo witryna jest rzeczą, o którą firmy i instytucje powinny dbać, aby nie wykluczać nikogo z korzystania z internetu. Kwestia ograniczeń i niepełnosprawności to nie sprawa marginalna a dość powszechna i warto to sobie uświadomić.

Podsumowanie

Stworzenie dostępnej witryny dla osób z niepełnosprawnościami wymaga istotnej pracy wielu osób, jednak jej zapewnienie sprawia, że jako firma czy instytucja nie wykluczamy nikogo z korzystania ze strony. Poza tym, zapewnienie dostępności wielokrotnie poprawia użyteczność strony dla wszystkich użytkowników.

Jak dostosować stronę www do potrzeb osób z niepełnosprawnością?

Dostosowanie strony internetowej do potrzeb osób z niepełnosprawnością – dlaczego warto to robić?

Zacznijmy od tego, kim jest osoba z niepełnosprawnością. Gdyby rzucić to pytanie w przypadkowej grupie, pojawią się odpowiedzi, że to osoby niewidome, głuche, z niesprawnością ruchową czy intelektualną. Rzeczywiście, jest to prawda, ale tylko częściowa. Trzeba sobie zdać sprawę, że osoby z niepełnosprawnością to znacznie szersza grupa a dostępność cyfrowa może dotyczyć każdego. Osoba z ręką w gipsie, osoba po ciężko przebytym covidzie z problemami z koncentracją, osoba z dużą wadą wzroku czekająca na nowe okulary. To tylko niektóre przykłady, ale pokazują, że pewnego rodzaju niepełnosprawność lub ograniczenia mogą dotyczyć każdego z nas w różnym momencie życia.

Internet to medium niezwykle demokratyczne, dlatego projektując rozwiązania cyfrowe należy brać pod uwagę wszystkich jego użytkowników zarówno tych w pełnym zdrowiu, tych który mają ograniczenia stałe oraz oraz tych, którzy zmagają się z jakimś problemem czasowo. Warto pamiętać, że ograniczenia i niepełnosprawności, o których wspominam dotyczą wielu osób i mogą w przyszłości odnosić się do każdego. Zwłaszcza w kontekście starzejącego się społeczeństwa.

Dostępność cyfrowa to temat, który można traktować też znacznie szerzej. Każdy z nas wielokrotnie znajduje się w sytuacjach, w których ma duże ograniczenia z powodów zewnętrznych. Co to za sytuacje? Przykłady można mnożyć, a pierwsze z brzegu to przeglądanie aplikacji w rażącym słońcu, rozmowa przez telefon w trakcie niesienia zakupów czy jazda samochodem i konieczność zmiany trasy w nawigacji.

Jeśli chcesz się dowiedzieć więcej na temat tego, jak dokładnie przebiega proces badania i optymalizacji doświadczenia użytkownika, zalecamy zapoznanie się z naszym artykułem Audyt UX – co to jest.

WCAG – co to jest i kogo obowiązuje?

WCAG, czyli w skrócie Web Content Accesibility Guideliness, to zestaw wytycznych, który mówi, jak strony internetowe, aplikacje i inne produkty cyfrowe powinny być stworzone, aby były dostępne dla osób z niepełnosprawnościami.

Aktualnie obowiązuje wersja 2.1 WCAG. W Polsce od kilku lat do wdrożenia tych zaleceń zobowiązane są przepisami prawa instytucje publiczne. Warto jednak przyjrzeć się tym wytycznym i sukcesywnie je wdrażać również w innych organizacjach, aby uczynić internet dostępnym cyfrowo dla wszystkich.

WCAG to zestaw wytycznych, które zajmują się zarówno wizualną warstwą projektu, jak i w dużej mierze mówią o technicznych aspektach projektu (np. atrybutach w kodzie HTML). Owe wytyczne opierają się na czterech filarach, których zrozumienie powoduje, że jako projektanci czy osoby związane z powstawaniem stron czy aplikacji będziemy tworzyć bardziej dostępne produkty. Omówmy po kolei każdy z nich.

Solidność

Solidność, czy zamiennie używana kompatybilność, to najbardziej konkretny i techniczny wymiar wymogów dostępności cyfrowej. Solidnie wykonana strona jest kompatybilna z różnymi urządzeniami, systemami operacyjnymi i przeglądarkami. Jeżeli nie ze wszystkimi to przynajmniej z najbardziej popularnymi. Oznacza to, że każda osoba, która niezależnie, czy używa laptopa, czy smartfona, posługuje się przeglądarką Chrome lub inną, systemem Windows czy Linux, zawsze będzie mogła skorzystać z danej strony internetowej.

Solidnie zaprojektowana i wdrożona witryna ma prawidłowy kod HTML, dodatkowe informacje o statusie wykorzystywane przez osoby z niepełnosprawnościami, sygnalizację ważnych alertów etc.

Zrozumiałość

Strony same w sobie oraz treści znajdujące się na nich powinny być zrozumiałe. Dotyczy to prostego języka, jasnych komunikatów czy etykietowania elementów na stronie w taki sposób, aby było wiadome, co oznaczają (np. buton z komunikatem „Czytaj dalej” zamiast „Pokaż”).

Zastosowanie prostego języka oraz klarowne oznaczanie elementów na stronie będzie pomocne wielu osobom i szczególnie istotne przy projektowaniu strony dostosowanej do osób z niepełnosprawnością. Osoby niewidome korzystające z czytnika stron precyzyjnie poznają treści na stronie i będą wiedziały, co mogą na niej zrobić, a osoby mniej biegłe w temacie lub z trudnościami poznawczymi w ogóle będą mogły zorientować się, czego dotyczy dana strona

Z pewnością każdy spotkał się z pismem urzędowym, którego zrozumienie było trudne lub wręcz niemożliwe. Powielanie tego typu wzorców na stronach www jest zaprzeczeniem dostępności.

Funkcjonalność

Funkcjonalność dotyczy tego, aby umożliwić użytkownikom korzystania ze strony czy aplikacji w bardzo różny sposób. Ten filar będzie wiązał się z różnymi sposobami korzystania z internetu i komputera, w zależności od tego, jakie ograniczenia ma dana osoba.

Na przykład po stronie powinniśmy móc poruszać się za pomocą klawiatury. W ten sposób będą korzystać zarówno osoby z ograniczenia ruchomości rąk, ale również ktoś, kto ma akurat zajętą jedną rękę i nie może użyć myszy.

Funkcjonalność będzie również oznaczać, że dla użytkowników z zaburzeniami uwagi powinniśmy zrezygnować z błyszczących i migających elementów. Dla odbiorców z problemami poznawczymi ważna będzie możliwość wykonywania czynności we własnym tempie.

Postrzegalność

Postrzegalność to cecha, która dotyczy tego, aby każdy element na stronie był dostępny dla każdej osoby, niezależnie od tego, jakich zmysłów używa. Oznacza to, że osoby niewidome powinny mieć możliwość odbioru treści graficznych poprzez odpowiednie opisy i możliwość przyswojenia ich za pomocą czytników. Osoby słabowidzące lub z wadami wzroku mieć możliwość powiększenia treści, bez spadku jakości wyświetlania treści. Osoby słabosłyszące powinny mieć dostęp do napisów przy treściach audiowizualnych.

To tylko niektóre przykłady, ale zauważmy, że wiele z nich dotyczy praktycznie każdego. Możliwość korzystania głosowego z aplikacji bez wątpienia przyda się kierowcom. Oglądanie filmów z napisami jest użyteczne również, gdy uczymy się języka lub oglądamy materiał filmowy w miejscu publicznym.

infografika: strona dostępna cyfrowo
Infografika: Strona dostępna cyfrowo.
pobierz pdf

Dostępność cyfrowa – zasady projektowania stron

Projektowanie stron dostępnych cyfrowo nie jest prostym zadaniem, które może samodzielnie wykonać jedna osoba. Po pierwsze potrzebna jest świadomość i akceptacja ze strony właścicieli witryny. To oni muszą wyrazić zgodę i przeznaczyć środki na pracochłonne, wymagające testowania działania. Po drugie projektowanie wiąże się z koniecznością przewidzenia i obsłużenia wielu przypadków użycia elementów umieszczonych w witrynie. Na koniec projekt witryny musi być odpowiednio wdrożony, czyli musi spełniać kryterium solidności. To z kolei wymaga zaangażowania profesjonalnego dewelopera lub wręcz zespołu deweloperów.

Istnieje jednak kilka zasad, których znajomość pomoże w tworzeniu stron dostosowanych do osób z niepełnosprawnościami.

Dostosowanie czcionki i wielkości

Kwestia czcionki ma dwa podłoża. Z jednej strony powinniśmy wybierać kroje czcionek, które są czytelne i nie sprawiają nikomu problemów z odczytaniem treści. Jeśli masz wątpliwości, czy dana czcionka nie jest zbyt skomplikowana, przetestuj ją z różnymi osobami, starszymi, młodszymi, z wadami wzroku, bez wad. To kilku minut, a feedback bezcenny.

Drugie podłoże to wielkość czcionki. Nikt nie lubi drobnych druczków, dlatego po pierwsze powinniśmy stosować na stronie odpowiednio dużą wielkość czcionki, ale przede wszystkim umożliwić jej powiększanie. Wiele osób korzysta ze specjalnych narzędzi do powiększania treści na stronie lub po prostu powiększa je w przeglądarce stosując skróty klawiaturowe. Dopilnuj, aby po powiększeniu wielkości wyświetlanej strony czcionki nadal były czytelne i nic nie przysłaniało innych treści.

Zrozumiały język

Język stosowany w produktach cyfrowych powinien być maksymalnie prosty i zrozumiały. Jeśli konieczne jest użycie słów branżowych, warto wyjaśnić je. Poza tym unikajmy żargonu i specjalistycznego słownictwa. Zastosowanie prostego i zrozumiałego języka jest istotne dla wielu grup. Warto brać pod uwagę, że odbiorca może mieć ograniczone możliwości poznawcze lub nie być wystarczająco kompetentny w danej tematyce. Dobrze uwzględnić też, że czytelnik będzie po prostu zmęczony i przyswojenie długich wielokrotnie złożonych zdań będzie dla niego za trudne.

Kolorystyka i kontrast

Zastosowanie kolorystyki na stronie również wpływa na odbiór strony przez osoby z niepełnosprawnością lub osoby z pewnymi czasowymi ograniczeniami. Planując kolorystykę na stronie zadbajmy o dwie kwestie. Pierwsza z nich to kontrasty pomiędzy elementami do czytania, czyli tekstem, a tłem, na którym się znajduje. Istotne jest, aby kontrasty były na tyle duże, aby nie sprawiały nikomu problemu z odczytaniem tekstu. Biały tekst na jasnoróżowym tle nie będzie dobrym pomysłem. WCAG szczegółowo określa, jakie to powinny być kontrasty. Jeśli masz wątpliwości, czy na Twojej strony zastosowano odpowiednie kontrasty, możesz to sprawdzić w jednym z wielu bezpłatnych narzędzi online.

Z kolei w kwestii koloru pamiętajmy, że kolor nie powinien być jedynym sposobem wyróżniania treści. Dla przykładu pomyślmy o przyciskach bez treści, z kolorami, jeden zielony do potwierdzenia czynności, drugi czerwony do anulowania. Jeśli na przyciskach nie będzie dodatkowego oznaczenia tekstowego, np. Zapisz i Anuluj, ich użycie może być problemem. Osoby z trudnościami w percepcji kolorów, np. daltoniści, nie będą wiedziały jaką czynność wykonać.

Prosta i intuicyjna nawigacja witryny z poziomu klawiatury

Nawigacja na stronach w kontekście dostępności cyfrowej wiąże się z kilkoma kwestiami. Po pierwsze, pod względem poznawczym, nawigacja powinna być prosta i klarowna. Powinniśmy pamiętać, aby język zastosowany w nawigacji odpowiadał rzeczywistości.

Po drugie powinniśmy umożliwić użytkownikom nawigowanie po stronie za pomocą klawiatury. Dzięki temu użytkownicy z ograniczeniami ruchomości rąk, będą mogli swobodnie przeglądać stronę. Warto uważać na tak zwane pułapki klawiaturowe, czyli elementy (np. zewnętrzne wtyczki), które blokują nawigację klawiaturą poniżej danego elementu.

Nawigacja to również jasno nadane poszczególnym stronom tytuły, nagłówki w tekstach czy etykiety HTML do poszczególnych elementów, np. przycisków. Dzięki etykietom użytkownicy korzystający z czytników otrzymają informację o przeznaczeniu buttona.

Zaznaczajmy również wyraźnie w jakim miejscu użytkownik się znajduje, a jeśli na stronie pojawiają się linki, pamiętajmy, aby nazwa łącza wskazywała, co się pod danym linkiem znajduje.

Opisy grafik

Opisy grafik znane są pod nazwą tak zwanych ALT-ów, czyli tekstów alternatywnych. Opisując na poziomie kodu grafikę tekstowo umożliwiamy osobom niewidomym korzystającym z czytników na stronie odbiór treści w danym serwisie. Ważne, aby wiedzieć jak to zrobić. Opis nie może być jakikolwiek. Należy przygotować taki opis, aby korzystający z serwisu otrzymali klarowną informacje, co na danych materiale wizualnych się znajduje.

Napisy w materiałach wideo

Napisy w materiałach wideo są przydatne z wielu względów. Po pierwsze skorzystają z nich osoby niesłyszące (ale czytające) oraz niedosłyszące. Problemy ze słuchem dotyczą jednak znacznie szerszej grupy. Wiele osób w pewnym wieku zauważa pogorszenie słuchu, więc napisy mogą w wielu sytuacjach być pomocne w obiorze materiałów wideo. Poza tym pamiętajmy o najbardziej prozaicznej sytuacji, kiedy oglądamy jakiś materiał w miejscu publicznym i celowo wyłączamy dźwięk. Wtedy napisy są konieczne.

Mówiąc o napisach warto pamiętać nie tylko o napisach z dialogami, ale o tak zwanych napisach rozszerzonych. Opisują one szerzej rzeczywistość w filmie, np. informują o tym, że w tle słychać głośną muzykę, albo śmiech.

Szukasz wykonawcy profesjonalnej strony www?

Zamów bezpłatną wycenę projektu UX/UI

Wypełnij formularz, skontaktujemy się z Tobą

Najczęstsze błędy w projektowaniu stron dostępnych cyfrowo

Przygotowanie stron czy aplikacji zgodnie z zasadami dostępności jest dużym wyzwaniem, przy którym można popełnić wiele błędów. Największym z nich jest myślenie, że nas ta kwestia nie dotyczy, bo wśród naszych odbiorców nie ma osób z niepełnosprawnościami. Nic bardziej mylnego. Według danych rządowych, w Polsce jest ponad 3 mln osób z orzeczoną niepełnosprawnością. Orzeczoną, co oznacza, że liczby te są znacznie większe. Szacuje się, że jest to liczba 4-7 mln. osób. Doliczmy do tego osoby pełnosprawne, które mają akurat pewne ograniczenia. Gdyby z całej populacji w Polsce odjąć małe dzieci oraz osoby najstarsze, które rzeczywiście nie korzystają pokoleniowo z urządzeń cyfrowych można dojść do wniosku, że mniej więcej 20% użytkowników korzystających z Internetu, może mieć pewne mniejsze lub większe ograniczenia w korzystaniu ze stron czy aplikacji. 20% – to co piąty użytkownik. W związku ze starzejącym się społeczeństwem procent ten z czasem będzie rósł.

Drugim błędem przy projektowaniu dostępnych stron jest skupienie się tylko na tym, co na stronie jest widoczne, czyli kontraście i powiększaniu tekstu. Trzeba pamiętać, że to jedynie wierzchołek góry lodowej. Bardzo duża część dostępności dzieje się tak naprawdę w kodzie strony. To tam trzeba o nią zadbać, np. umożliwiając nawigację za pomocą klawiatury.

Kolejnym błędem jest stworzenie niedostępnej nawigacji na stronie. O ile brak jakiegoś atrybutu ALT jest pewnym utrudnieniem, to brak nawigacji klawiaturowej automatycznie uniemożliwia niektórym użytkownikom skorzystania ze strony.

Błędów w tworzeniu dostępnych stron internetowych i aplikacji można popełnić bardzo wiele. Powyżej wymieniłam dość wybiórczo zaledwie kilka, które związane są z głównie z brakiem świadomości problemu.

Podsumowanie

Dostępność cyfrowa stron i aplikacji dla osób z niepełnosprawnością jest bardzo ważnym, niestety dość często pomijanym tematem. Warto pamiętać, że problem dotyczy znacznie większej liczby osób niż może się wydawać. Poza tym brak pełnej sprawności, w tym tej czasowej, może dotyczyć każdego z nas.

W powyższym artykule miałam na celu przedstawienie ogólnego oglądu na to, czym jest dostępność i w jaki sposób poszerzać świadomość osób odpowiedzialnych za strony internetowe czy aplikacje.

Wykorzystanie persony w projektowaniu stron www

Czym jest persona?

Persona to narzędzie wykorzystywane w projektowaniu user experience. Najprościej mówiąc to modelowy reprezentant odbiorców produktu lub usługi, nad którymi pracujemy.

Persona to fikcyjna osoba, ale stworzona w oparciu o dane, które należy wcześniej uzyskać w trakcie prowadzonych badań lub zebrać z innych źródeł.

Cechy persony

Persona poza tym, że tworzona jest w oparciu o dane, powinna być możliwie realistyczna, konkretna i pokazywać schematy zachowań. Personę opisuje się przez teraźniejszość i zawsze w jakimś kontekście, co jest szczególnie istotne.

Istnieje kilka typów persony:

  • persona główna – reprezentująca typowego użytkownika,
  • persona poboczna – jako uzupełnienie, np. przy mniej ważnej odnodze produktu,
  • persona skrajna – będąca skrajnym typem użytkownika produktu,
  • antypersona – służąca jako narzędzie przypominające projektantom, że danego produktu nie projektujemy dla wszystkich.

Do czego służy persona

Persona jest narzędziem kierunkującym prace nad produktem i bardzo dobrze sprawdza się jako środek do uwspólniania celów i komunikacji w zespole. Zobaczmy, w czym konkretnie pomocna może okazać się persona:

  • Po pierwsze persona to narzędzie do określania i definiowania potrzeb użytkowników. Skupiając się na potrzebach odbiorcy, możemy spojrzeć na produkt oczami klienta, a nie własnymi.
  • Po drugie persona przypomina, aby nie projektować dla siebie tylko dla użytkowników.
  • Persona jest bardzo pomocna w pracy zespołu – wszyscy mają jedno rozumienie dla kogo projektują.
  • Pomaga w prezentacji i argumentowaniu decyzji projektowych w szerszym gronie.
  • Może być bazą do wykorzystania w komunikacji i marketingu produktu.
  • Posiadanie persony pomaga w późniejszych etapach zweryfikować decyzje, np. podczas testów użyteczności, kiedy do testów rekrutujemy użytkowników, których persona reprezentuje.

Jak stworzyć personę

Jak już wcześniej wspomniałam, personę tworzy się w oparciu o dane. Oznacza to, że podstawy persony biorą się z badań jakościowych, ilościowych, desk researchu czy dostępnych badań rynku. Jeśli nie korzystamy z badań a bazujemy na założeniach, mowa wtedy o protopersonie.

Więcej o tym, jak stworzyć personę pisaliśmy na naszym blogu.

infografika: Wykorzystanie persony w projektowaniu stron www
Infografika: Wykorzystanie persony w projektowaniu stron www.
pobierz pdf

Kiedy użyć persony w projektowaniu strony www

Zobaczmy, jak persona będzie przekładała się na decyzje projektowe na konkretnych przykładach. Przypuśćmy, że projektujemy stronę internetową dla gabinetu masażu lub fizjoterapii, w którym można umówić się na zabiegi czy wizytę również przez Internet. Gabinet jest bardzo elegancki i schludny, zapewniający miłą i spokojną atmosferę do przeprowadzenia zabiegów.

Załóżmy, że w wyniku prac na projektem wraz z zespołem stworzyliśmy personę: Agnieszka, lat 38, pracowniczka dużej korporacji w Warszawie, borykająca się z częstymi napadami bólu pleców. Agnieszka często zapisuje się na masaże lub terapie do fizjoterapeutów, jednak nigdy nie wie, na jakiego rodzaju usługę się zapisać.

Wiedząc, że naszą personą jest kobieta, bardzo zajęta, oczekująca szybkich rezultatów i chcąca zapisywać się na zabiegi w dowolnym momencie, szczególnie wtedy, gdy potrzebuje nagłej pomocy możemy podjąć kilka istotnych decyzji projektowych.

Jakich? Będzie to oczywiście duże uproszczenie, chodzi tylko o pokazanie Wam pewnych zależności.

Po pierwsze możemy zaprojektować główną stronę tak, aby rozpoczęcie procesu zapisu na masaż było możliwe proste. Również warstwa językowa to ten czynnik, który będzie się różnił w zależności od tego, do kogo adresujemy stronę. Odpowiadając na potrzeby persony, czyli tego, że nie do końca wie, jaką usługę wybrać, możemy do oferty wprowadzić pozycję dla niezdecydowanych.

Poza licznymi decyzjami projektowymi dotyczącymi procesów możliwych do zrealizowania na stronie czy architektury informacji znając personę projektant UI może zaproponować odpowiedni layout. Na przykład może to być schludny minimalistyczny projekt w ciepłej kolorystyce, tak, aby wzbudzić w użytkowniku spokój i poczucie, że miejsce, do którego się wybierze jest profesjonalne i schludne.

Przykład w skrócie

 

Persona:

Agnieszka, lat 38, pracowniczka dużej korporacji w Warszawie, cierpi na bóle pleców, niekiedy ma niespodziewane ataki bólu, często zapisuje się na masaże lub inne zabiegi terapeutyczne, ale ma problem z doborem zabiegów.

 

Decyzje projektowe:

  1. Uproszczenie procesu zapisu na zabieg – persona korzysta z zabiegów często i zapisując się na zabiegi odczuwa dyskomfort fizyczny,
  2. Dopracowana wersja responsywna – persona jest osobą aktywną zawodowo, pracuje w dużym mieście, korzysta na co dzień ze smartfona,
  3. Dopasowany język i wzorce kulturowe – j.w. + pracuje w dużej firmie, jest przyzwyczajona do charakterystycznej komunikacji,
  4. Opcja dla niezdecydowanych – persona ma problem z doborem zabiegów,
  5. Krótkie jasne opisy zabiegów – j.w. + persona zapisując się na zabiegi często cierpi,
  6. Stonowana, ciepła kolorystyka – persona odczuwa ból i szuka pomocy.

Błędy popełniane przy wykorzystaniu persony

Stworzenie persony to jedno. Trzeba jeszcze odpowiednio z niej skorzystać, dlatego tworząc ją i wykorzystując w pracy warto unikać błędów. Jakie to błędy?

Nieużywanie persony

Stworzenie persony nie jest bardzo trudnym zadaniem, jednak, aby była dobrze zrobiona i mogła posłużyć, należy poświęcić procesowi odpowiednio dużo czasu i uwagi. Błędem jest jednak stworzenie jej i schowanie do szuflady. Będzie to nie tylko strata poświęconego wcześniej czasu, ale pozbawienie się tego, po co persona została stworzona.

Pracując nad projektem, nie zapominajmy o personie, można ją powiesić na przykład w zawsze widocznym miejscu i rozesłać do wszystkich zaangażowanych w pracę nad stroną www.

Brak współpracy przy tworzeniu person

Ten błąd dotyczy procesu tworzenia persony. Warto w prace nad personą zaangażować możliwe dużo osób, najlepiej z różnych działów. Po pierwsze stworzona w ten sposób persona będzie lepiej dopracowana, po drugie współpracownicy, którzy brali udział w pracach nad nią, będą czuli swój wkład i uznają ją za swoją.

Szukasz wykonawcy efektywnej i efektownej strony www?

Zamów projekt UX/UI z wdrożeniem

Wypełnij formularz, skontaktujemy się z Tobą

Brak komunikacji wewnętrznej o personie

Warto nie tylko pracować nad personą międzyzespołowo, ale odpowiednio ją komunikować w organizacji, tak, aby wszyscy pracujący nad produktem zawsze pamiętali, dla kogo projektują.

Zbyt dużo person

Warto stworzyć personę główną i poboczną. Można posiłkować się wspomnianymi wcześniej personą skrajną lub antypersoną. Należy jednak pamiętać, że stworzenie zbyt wielu person nie ułatwi prac, a raczej przeszkodzi. Persona ma służyć temu, aby projektować dla kogoś, a nie dla wszystkich.

Podsumowanie

Persona jest narzędziem, które warto wykorzystywać w pracy nad stroną www oraz innymi projektami cyfrowymi. Wiedząc dla kogo projektujemy, unikniemy wielu decyzji, które mogą niekorzystnie wpłynąć na stronę czy produkt, również w kontekście finansowym.

Co łączy UX i content marketing?

Co łączy UX z marketingiem?

Na pierwszy rzut oka można byłoby powiedzieć, że ux i marketing to dwie odrębne, a nawet nieco wykluczające się dziedziny. Rzeczywiście, wielokrotnie marketing zainteresowany będzie głównie wzrostem sprzedaży i opłacalnością różnych rozwiązań. Z kolei projektanci user experience jako adwokaci użytkowników nie zawsze są chętni, aby uwzględniać w projekcie typowo biznesowe założenia. Szczególnie, gdy te wykluczają się z potrzebami użytkowników.

Wbrew pozorom wszyscy pracują na wspólny sukces. Dobry user experience przyczyni się wzrostu sprzedaży. Obie dziedziny mogą więc korzystać z wzajemnych doświadczeń i usprawniać produkt, tak aby doświadczenie użytkownika było rzeczywiście wyjątkowe.

W kontekście pracy nad stroną internetową, które najczęściej omawiamy na naszym blogu, podzielę się kilkoma refleksjami, w których momentach ux i marketing spotykają się.

Grupa docelowa

Obie dziedziny, zarówno UX jak i marketing muszą wiedzieć, kto jest grupą docelową produktu czy usługi. Co więcej, nie zawsze chodzi jedynie o grupę w określeniu ogólnym, np. mężczyźni w wieku 19-25 studiujący poza miejscem zamieszkania. W user experience, jak i w marketingu decyzje projektowe oraz strategiczne opierają się o badania, na podstawie których wyodrębniana jest persona lub kilka person, czyli modelowi przedstawiciele danej grupy lub grup docelowych.

Jeśli chcesz dowiedzieć się więcej na temat person, sprawdź artykuł Co to jest persona.

Mimo, że marketerzy i projektanci user experience korzystają często z różnych narzędzi badawczych (chociaż nie zawsze) i stawiają nacisk na inne rzeczy (marketingowiec na sprzedaż, ux na zaadresowanie potrzeb użytkowników), to obie dziedziny mogą od siebie czerpać. Pracując nad nowym produktem współpraca zespołów jest konieczna, jeśli chcemy osiągnąć optymalne rozwiązania i zachować spójność samego produktu, jak i komunikacji wokół niego.

Treści na stronie

To, jakie treści (zarówno tekstowe, jak i inne, np. video, zdjęcia itp.) znajdą się na stronie interesuje nie tylko decydentów, ale również projektantów ux oraz marketingowców. W projektowaniu user experience coraz więcej zwraca się uwagę na UX writing, czyli tworzenie krótszych i dłuższych form, które ułatwiają użytkownikowi osiągnięcie celu i czynią kontakt z produktem przyjemnym.

Marketing z kolei od lat stawia na content marketing, czyli angażowanie użytkowników chwytliwymi i wartościowymi treściami.

Na pierwszy rzut oka te dwa podejścia, które poniekąd dotyczą tego samego, czasami wykluczają się. Dlatego współpraca i osiąganie konsensusu są istotne.

Feedback od użytkowników

Feedback od użytkowników jest czymś co zainteresuje zarówno projektantów UX, jak i marketingowców. Mimo, że mówi się, że badania marketingowe różnią się od typowych badań user experience, to warto wykorzystywać każdą wiedzę o użytkownikach.

infografika: User experience i marketing. Interakcje w zespołach projektowych.
Infografika: User experience i marketing. Interakcje w zespołach projektowych.
pobierz pdf

Co marketing może czerpać z UX?

Marketing może czerpać z podejścia UX designerów na wielu płaszczyznach. Wraz ze wzrostem popularności projektowania user experience wiele branż zaczęło zwracać się ku projektowaniu zorientowanemu na użytkownika. Zaczęto również czerpać z metod stosowanych przez projektantów UX.

Prostota procesów i umiar w treściach

Jedną z dobry praktyk, a w sumie konieczności, na które zwraca się uwagę w projektowaniu user experience jest uproszczenie procesów oraz umiar w treściach. Oznacza to, że osiągniecie celu przez użytkownika powinno być maksymalnie uproszczone i jasne w realizacji. To samo dotyczy treści – ich jakości i ilości. Zbyt duża ilość treści, szczególnie odciągających od realizacji celu źle wpływają na konwersję.

Skupienie się na ograniczaniu zbędnych treści oraz upraszczaniu komunikacji, w tym wizualnej, może być inspirujące dla innych dyscyplin, chociażby właśnie marketingu. Pomocne mogą okazać się heurystyki Nielsena, które opisują najważniejsze zasady, które powinien spełniać produkt, aby być użyteczny. Jestem pewna, że owe zasady mogą się odnieść do wielu innych dyscyplin, które pracują nad rozwojem produktu.

Co UX może czerpać z marketingu?

User experience również może nauczyć się wiele od starszego kolegi – marketingu. Z jednej strony UX jest adwokatem użytkowników, ale warto czasami spojrzeć szerzej na problem, który jest rozwiązywany.

Wyobraźmy sobie na przykład stronę główną, która ma:

  1. bardzo dobrze przygotowaną nawigację,
  2. spójną i logicznie zaprojektowaną architekturę informacji,
  3. elementy graficzne i tekstowe, które mówią o tym, w jakie miejsce trafił użytkownik i co może na danej stronie zrobić,
  4. realizacja celu jest prosta i intuicyjna.

Wygląda na to, że wszystko gra i doświadczenie użytkownika powinno być bardzo dobre. A jednak nie jest.

Powodów może być wiele. Pomyślmy, jak komunikacja (wcześniej zaplanowana przez pracowników marketingu) może wpływać na to, jak strona będzie wizualnie wyglądała i jak będzie odbierana. Co może na takiej stronie zadziać się, aby doświadczenie użytkownika było nie tylko bardzo dobre pod względem łatwości realizacji celu ale również dawało coś więcej? Na przykład przyjemne doświadczenie estetyczne albo o prostu dobrą zabawę. Być może można w projekt włączyć elementy storytellingu, tak, aby przejście przez stronę samo w sobie było ciekawie opowiadaną historię? Możliwości i pomysłów jest wiele, dlatego warto otworzyć się na doświadczenia innych współpracowników.

Szukasz wykonawcy profesjonalnej strony firmowej?

Zamów projekt UX/UI witryny

Wypełnij formularz, skontaktujemy się z Tobą

Spójność jako klucz od sukcesu

Wielokrotnie nasze doświadczenia z produktem czy marką, w zależności od punktu styku są bardzo różne. Czasami czujemy się tak, jakbyśmy mieli do czynienia z kilkoma różnymi ofertami. Na niewiele zda się świetnie zaprojektowany sklep internetowy, jeśli obsługa zwrotów będzie niezgodna z przepisami, a osoba pracująca na infolinii niemiła i opryskliwa. Działa to oczywiście w obie strony.

Podsumowanie

Spójność w tym jak marka, produkt czy usługa są odbierane jest bardzo ważna. Dlatego też współpraca osób z różnych dziedzin jest szczególnie istotna. Organizacje przez brak multidyscyplinarnych zespołów i przez zaniedbaną komunikację wewnętrzną kreują oderwane od kontekstu twory, które nie pracują na wspólny sukces. Projektanci user experience w pracy nad produktami cyfrowymi poniekąd mają za zadanie łączenie perspektyw i uwzględnianie celów różnych dyscyplin. Współpraca i czerpanie wiedzy z innych dyscyplin może pozytywnie wpłynąć na efekt końcowy.

Layout strony internetowej – co to jest?

Co to jest layout strony www?

Layout strony WWW to sposób, w jaki elementy witryny są rozmieszczone i prezentowane odbiorcom. Obejmuje sposób ułożenia i styl elementów strony. Składa się na niego forma i zawartość menu, nagłówków, tekstów, elementów graficznych i multimediów, buttonów, formularzy, stopki itp.

Layout w Internecie to potomek layoutu materiałów poligraficznych. Być może masz ulubioną tradycyjną gazetę albo czasopismo. Albo przynajmniej kojarzysz wygląd kilku takich wydawnictw. Wiesz więc, że bez względu na treść umieszczoną w danym numerze gazety czy tygodnika, rozpoznajesz, że widzisz Politykę, Gazetę Wyborczą, Newsweek albo Fakt. Rozpoznajesz, bo periodyki wykorzystują layout graficzny.

Jaki powinien być layout witryny internetowej

Odpowiednio zaprojektowany layout powinien być czytelny, estetyczny, intuicyjny i przyjazny dla użytkowników. Powinien umożliwiać łatwe nawigowanie i odnajdywanie potrzebnych informacji.

Dobry layout powinien również uwzględniać kwestie techniczne. Chodzi przede wszystkim o dostępność przy użyciu różnych urządzeń, szybkość wczytywania oraz optymalizację pod kątem SEO.

No i oczywiście powinien być na tyle charakterystyczny, żeby był łatwo kojarzony z marką, z firmą do której strona www należy.

Jak stworzyć layout strony internetowej?

Niekiedy – szczególnie w przypadku małych, amatorskich stron – layout powstaje jako element uboczny budowy strony. Deweloper ma pomysł, wybiera szablon, albo zaczyna tworzyć stronę od zera. Powstaje witryna, która siłą rzeczy ma jakiś wygląd, więc zgodnie z definicją ma layout.

Zdecydowanie odradzam takie podejście przy kreowaniu rozbudowanych, profesjonalnych witryn. W ich przypadku warto poświęcić uwagę i czas na wykonanie kroków, które sprawią, że layout będzie naprawdę dobry.

Określenie celu strony

Ważnym etapem prac projektowych jest zdefiniowanie i opisanie celu, jaki ma realizować witryna. Czy chodzi o wizerunek, czy na stronie będzie prowadzona sprzedaż? A może zależy nam na udostępnianiu treści i przyjmowaniu informacji zwrotnej od użytkowników? Każda z odpowiedzi dostarczy cennych wskazówek i ukierunkuje prace projektantów.

Przeprowadzenie badań

W idealnym świecie tworzenie layoutu bazuje na wynikach badań grupy docelowej. Zebrane informacje i wnioski służą do stworzenia modelu użytkownika, czyli persony, która reprezentuje preferencje, zachowania i nawyki rzeczywistych odbiorców rozwiązania.

W praktyce często wiedzę o cechach persony zdobywa się pośrednio, np. z analizy podobnych badań lub raportów rynkowych.

infografika: Layout strony internetowej. Co to jest, co zawiera, jak go stworzyć.
Infografika: Layout strony internetowej. Co to jest, co zawiera, jak go stworzyć.
pobierz pdf

Zaplanowanie architektury informacji

Pierwszym krokiem ściśle projektowym jest tworzenie układu treści, które mają znaleźć się na stronie. Wtedy najczęściej powstają makiety pozwalające na wyobrażenie i sprawdzenie działającej witryny, sposobu poruszania się po niej i wyszukiwania treści. Definiowane są nagłówek i stopka strony, struktura podstron, mechanizmy wyszukiwania informacji, zasady i reguły filtrowania oraz sortowania danych, etc. Planowanie architektury informacji to krok decydujący o tym, czy użytkownicy witryny będzie odbierana jako logiczna i intuicyjna.

Znaczenie architektury informacji jest jednak znacznie szersze. Ponieważ odnosi się także do struktury danych, ich hierarchii i wzajemnych powiązań, ma duże znaczenie dla możliwości pozycjonowania serwisu. Z tego powodu w tym kroku projektowania layoutu warto uwzględnić wymagania związane z optymalizacją SEO witryny.

Zaprojektowanie UI

Na tym etapie tworzenia layoutu powstaje skórka graficzna. Określona wcześniej surowa struktura strony zostaje wyposażona w konkretne atrybuty. Należą do nich typografia (czyli krój i wielkość czcionek), kolorystyka, dodatkowe elementy graficzne (ozdobniki, elementy rozdzielające, cienie, tła, logotypy). W trakcie projektowania interfejsu użytkownika graficy określają sposób rozmieszczenia elementów względem siebie oraz wykorzystania dostępnej przestrzeni.

Kodowanie layoutu

Stworzony layout jest przenoszony do świata wirtualnego. Na podstawie przygotowanych projektów graficznych programiści budują kod witryny. Także w tym kroku wykonywane są również czynności optymalizacyjne, polegające na osiągnięciu kompromisu między jakością stosowanych materiałów graficznych oraz szybkością wczytywania strony.

Testy layoutu

I znowu, w świecie idealnym, po oprogramowaniu layoutu jest czas na kontakt z docelowym odbiorcą. Tym razem po to, aby sprawdzić, czy realizując projekt udało się zaspokoić potrzeby i trafić w gusta klientów.

W praktyce, jeżeli nie przeprowadzimy takich testów i tak, wcześniej czy później, otrzymamy informację zwrotną w postaci oceny użyteczności (user experience) witryny przez klientów. Tyle, że identyfikacja problemów na podstawie feedbacku z funkcjonującej strony i późniejsza korekta będzie zdecydowanie trudniejsza i droższa.

NASZA REALIZACJA

Cechy dobrego layoutu strony www

Podsumujmy teraz jakie elementy i aspekty projektu layoutu mają wpływ na ocenę przez użytkowników.

Przejrzysty i intuicyjny układ strony

Na ogólny układ strony składają się: nagłówek strony, treść oraz stopka.

Projekt nagłówka strony ma kluczowe znaczenie dla pierwszego wrażenia z kontaktu ze stroną i ogromny wpływ na jakość nawigacji w witrynie.

Treść strony, czyli tak zwane body jest główną przestrzenią komunikacji z odbiorcą. Tu przekazywana jest treść, tu bardzo często udostępniane są funkcje strony. Ze względu na przeważającą objętość sekcja treściowa najbardziej wpływa na ogólne wrażenia wizualne i w ten sposób pośrednio oddziałuje na emocje klienta e-sklepu, albo czytelnika portalu.

Podobnie ważny jest projekt stopki witryny. Umieszczenie w stopce informacji, które poszukiwane są w specyficznych okolicznościach, np. informacji o zwrotach i reklamacjach w przypadku sklepu internetowego, wpływa na ocenę użyteczności i odbiór strony.

Kolorystyka ma znaczenie

Dobór stosowanej palety i użycie poszczególnych kolorów to być może najważniejsze cechy lauyoutu. Kolorystyka nadaje charakter witrynie. Barwy uruchamiają emocje. Kolory pozwalają też skłaniać odbiorców (lub jeśli wolisz: podpowiadać odbiorcom) konkretne działania. Pisaliśmy o tym więcej w artykule Psychologia kolorów a User Interface – wpływ koloru na decyzje zakupowe.

Odpowiednia czcionka i podział tekstu

Oprócz kolorystyki kolosalne znaczenie ma typografia. Dobór kroju pisma dopasowanego do preferencji grupy docelowej i przeznaczenia strony może zdecydować o porażce lub powodzeniu projektu layoutu. Omówienie znaczenia odpowiedniej personalizacji znajdziesz między innymi w tekście Personalizacja UX – ile lat ma Twój użytkownik i co z tego wynika.

Ergonomiczne elementy aktywne

Ważnymi elementami layoutu, które wpływają na odbiór i ocenę projektu są części pozwalające na interakcje. Przyciski, w tym wykorzystywane w wezwaniach do działania (CTA), pola do wprowadzania danych (inputy), formularze rejestracji i logowania, formularze kontaktowe itp. decydują o jakości współpracy człowieka z witryną.

Layout responsywny

Na koniec wymienię aspekt, którego znaczenie rośnie nieustannie. Chodzi o dostępność i wygodę użytkowania witryny z różnych urządzeń, począwszy od komputerów po smartfony. Responsywna strona internetowa jest obecnie koniecznością, co wiąże się z bezwarunkowym wymogiem tworzenia layoutu dopasowanego także do urządzeń mobilnych.

Twoja firma potrzebuje profesjonalnej strony www?

Zamów kompleksowy projekt UX/UI

Wypełnij formularz, skontaktujemy się z Tobą

Korzyści z dobrze zaprojektowanego układu graficznego strony

Na zakończenie przedstawię kilka pozytywnych efektów z posiadania dobrego layoutu strony internetowej. Uszereguję je trochę nietypowo, w kolejności zgodnej z poznawaniem strony i layoutu przez odbiorców.

Większa skuteczność działań SEO

Dobrze zaprojektowany layout może pomóc w poprawie pozycji strony internetowej w wynikach wyszukiwania. Efekt ten jest osiągany w trakcie kodowania, przez zastosowanie odpowiednich meta tagów oraz nagłówków tekstowych połączone z właściwie zaprojektowaną hierarchią treści. Znaczący wpływ mają także opisane wyżej czynności optymalizacyjne.

Zwiększenie rozpoznawalności marki

Profesjonalnie zaprojektowany layout pomaga zwiększać rozpoznawalność marki. Zastosowanie kolorów, czcionek, logotypów i innych elementów, pomaga odzwierciedlić styl firmy i wyznawane przez markę wartości. Wykorzystanie motywów layoutu w materiałach drukowanych dodatkowo wzmacnia siłę marki.

Poprawa doświadczeń użytkowników

Czytelny, przejrzysty i intuicyjny layout zdecydowanie poprawia doświadczenie użytkowników na stronie internetowej. To z kolei wydłuża czas jaki odbiorca jest skłonny spędzić na stronie, co przekłada się na szansę na realizację celów biznesowych witryny.

Wzrost zaufania do firmy

Profesjonalny i spójny layout wspiera budowę zaufania użytkowników do marki. Powoduje większą skłonność do dokonywania zakupów oraz lepsze opinie o firmie, także te wyrażane w postaci komentarzy i poleceń produktów.

Podniesienie konwersji

Dobrze zaprojektowany layout strony www zachęca użytkowników do podejmowania określonych działań, takich jak zakup produktu lub zapisanie się na newsletter. Inaczej mówiąc, efektywny layout powoduje zwiększenie konwersji.

Podsumowanie

Layout strony internetowej sam w sobie jest wizytówką firmy. Przejrzysty i czytelny projekt, dostosowany do grupy docelowej jest w stanie zrobić dobre pierwsze wrażenie jeszcze zanim użytkownik cokolwiek zdąży przeczytać.

Inwestycja w dobry layout bez wątpienia zwraca się w codziennym działaniu firmy. Począwszy od wpływu przemyślanego projektu na skuteczność pozycjonowania, po wpływ na zwiększenie współczynnika konwersji. Nie warto przesadnie oszczędzać na projekcie layoutu, tym bardziej, że jego gruntowne zmiany wykonuje się rzadko.

Heurystyki Nielsena – co to?

Heurystyki Nielsena – na czym polega metoda heurystyczna?

Heurystyki Nielsena zostały stworzone przez Jakoba Nielsena i Ralfa Molicha ponad 30 lat temu. Mimo 30. na karku, nadal są bardzo aktualne i wykorzystywane w projektowaniu.

Czym dokładnie są heurystyki? To 10 zasad, które pozwalają ocenić użyteczność projektu / rozwiązania / produktu w kontekście interakcji człowieka z maszyną, czyli komputerem. Zasady heurystyki Nielsena stosowane od lat w projektowaniu są bardzo szerokie, lecz nie stanowią przewodnika w projektowaniu krok po kroku. Pozwalają jednak na wyeliminowanie istotnych błędów utrudniających korzystanie użytkownikom z produktu.

10 Heurystyk Nielsena

Heurystyki Jakoba Nielsena to 10 zasad tego, w jaki sposób systemy powinny w działać, od lat wykorzystywane w projektowaniu user experience. Wiedza ta przydatna jest nie tylko dla projektantów, ale również project managerów czy właścicieli sklepów internetowych w procesie ustalania procesów zakupowych. Korzystają z nich także wszystkie osoby, którym zależy, aby ich produkty były dla ludzi po prostu dobre. Przyjrzyjmy się zasadom po kolei.

1. Pokazuj status systemu

System, z którym ma styczność użytkownik powinien informować go o tym, jaka akcja się odbywa i gdzie użytkownik się znajduje. Najprostszym przykładem, który zobrazuje tę zasadę jest potwierdzenie, że produkt został dodany do koszyka. Co się zadzieje, jeśli 1. Heurystyka nie będzie spełniona? Jeśli użytkownik nie otrzyma informacji, że z sukcesem dodał produkt do koszyka będzie tę czynność powtarzał.

Oczywiście dodanie do koszyka to tylko jeden z przykładów. System powinien informować użytkownika o praktycznie każdej ewentualności, która się zdarza lub która może się zdarzyć. Warto usera uprzedzać o konsekwencjach jego działań (np. usunięcie danych) lub zbliżających się sytuacjach (np. przepełnienie miejsca na dysku).

2. Zachowaj zgodność pomiędzy systemem a rzeczywistością

Produkt czy usługa powinny posługiwać się takim językiem, jaki jest zrozumiały dla użytkownika, a zarazem zgody z rzeczywistością. Oznacza to, że powinniśmy unikać na przykład komunikatów stosując język czysto techniczny. Przykładowo sucha informacja „błąd 404” niewiele powie przeciętnemu użytkownikowi. W przeciwieństwie do komunikatu „nie znaleziono strony, której poszukujesz”. Organizacje często przenoszą swój wewnętrzny branżowy język do systemów przeznaczonych dla użytkowników. Na przykład strony urzędów często stosują język niezrozumiały dla klienta. Powoduje to frustrację, a często wręcz uniemożliwia załatwienie sprawy.

3. Daj użytkownikowi pełną kontrolę

Użytkownik musi mieć możliwość „wyjścia ewakuacyjnego” z systemu oraz cofnięcia popełnionego przed chwilą błędu. Przykładowo Gmail daje użytkownikom możliwość cofnięcia wysłanego przed chwilą maila – oczywiście w odpowiednio krótkim czasie. Poza tym ta heurystyka znajduje odzwierciedlenie nie tylko w kontekście błędów, ale również innych kwestii, jak po prostu możliwość dokonania wyboru. Oczywiście nie możemy tutaj popadać w przesadę, bo zbyt dużo opcji również jest frustrujące, np. zbyt rozbudowane menu.

4. Trzymaj się standardów i zachowaj spójność

Trzymanie się stosowanych konwencji i spójny projekt pozwolą użytkownikowi na sprawniejsze osiągnięcie celu. Spójność można rozumieć na dwóch płaszczyznach.  Pierwsza, wewnętrzna, w której dbamy, aby składowe projektu były między sobą spójne (np. to samo nazewnictwo dla tej samej funkcji czy położenie przycisków akcji). Druga, zewnętrzna, nawiązująca do stosowanych praktyk i konwencji w projektowaniu graficznym, np. zastosowaniu ikon. Nie trzeba wymyślać koła na nowo.

5. Zapobiegaj błędom

Znane przysłowie mówi, że lepiej zapobiegać niż leczyć i ma to swoje zastosowanie również w projektowaniu. Oznacza to nic innego jak to, że projekt powinien być przygotowany w taki sposób, aby użytkownik wiedział co ma robić i nie popełniał błędów. Najprostszym przykładem będą podpowiedzi w formularzu z danymi. Jeśli potrzebujesz, aby użytkownik wpisał swój numer telefonu w formacie 9 cyfrowym bez spacji, napisz to w podpowiedzi pola formularza lub podaj przykład. Dobrym przykładem zapobiegania błędom, jest powiadomienie przez program pocztowy o braku załącznika, jeśli w tekście maila pojawi się słowo załączam lub wysyłam.

infografika: Heurystyki Jacoba Nielsena.
Infografika: Heurystyki Jacoba Nielsena.
pobierz pdf

6. Pokaż, zamiast zmuszać do pamiętania

Codziennie bombardują nas nowe informacje, dlatego też system, z którego korzysta użytkownik nie powinien wymagać od niego zapamiętywania i uczenia się różnych rzeczy. Dlatego projekt powinien być przygotowany tak, aby użytkownik wiedział co ma zrobić. System pomocy powinien być zawsze dostępny, tak, aby użytkownik mógł z niego skorzystać, a nie musiał zapamiętywać trudnych i skomplikowanych informacji. Warto też zwrócić uwagę na możliwość łatwego powrotu do wcześniej przeglądanych treści. Poprawi to doświadczenia użytkownika, który korzysta z systemów.

7. Elastyczność i efektywność

Elastyczności i efektywność odnoszą się do tego, że użytkownicy naszego systemu są bardzo różni. Będą to zarówno osoby zaawansowane, jak i mniej doświadczone, ale również osoby z niepełnosprawnościami stałymi lub czasowymi. System powinien być zaprojektowany tak, aby każdy z tych użytkowników mógł zrealizować swój cel.

8. Dbaj o estetykę i umiar

To często popełniany błąd. Systemy powinny zawierać tylko te informacje, które są potrzebne i konieczne, tak, aby nie odwracać uwagi użytkownika od celu, który realizuje. Projektując system warto zadać sobie pytanie o zbędność każdego elementu interfejsu i zrezygnować z tych, które są niepotrzebne lub mogą się przydać w nieokreślonej przyszłości. Zasada estetyki i umiary dotyczy zarówno warstwy wizualnej, ale przede wszystkim tego, jakie treści pojawia się w systemie i jakie procesy można w nim zrealizować.

O wpływie estetyki na efekty biznesowe pisaliśmy w jednym z naszych artykułów Ładny sklep internetowy – to się opłaca.

9. Zapewnij skuteczną obsługę błędów

Popełnianie błędów przez użytkowników jest powszechne, częste też są błędy po stronie systemu. Powinniśmy informować jasno i czytelnie użytkowników jaki wystąpił błąd i co użytkownik powinien zrobić (np. w jakim formacie wpisać adres w formularzu). Unikajmy technicznych komunikatów, pokazujmy miejsce wystąpienia błędów i proponujmy konstruktywne rozwiązanie.

10. Zadbaj o pomoc i dokumentację

W idealnym świecie projekt powinien spełniać zasadę „Zapobiegaj błędom” i być zaprojektowany w taki sposób, aby użytkownik zawsze wiedział co ma zrobić. Świat idealny jednak nie istnieje, a użytkownicy systemów to osoby bardzo różne, dlatego pomoc (w tym kontekstowa) i dokumentacja zawsze powinny być dostępne.

Zalety analizy heurystycznej Nielsena

Analiza heurystyczna jest bardzo dobrym narzędziem dla analizy w codziennej pracy dla projektantów i osób pracujących z produktem. Warto jednak zaznaczyć, że ich znajomość i spojrzenie na swój sklep czy aplikację przez pryzmat heurystyk może być bardzo przydatne dla osób pracujących w innych obszarach, np. właścicieli sklepów internetowych. Analiza za pomocą m.in. heurystyk często pomoże w wyeliminowaniu krytycznych błędów uniemożliwiających użytkownikom zrealizowanie celu, w którym odwiedził stronę internetową lub w którym posługuje się aplikacją.

Potrzebujesz nowoczesnej, użytecznej strony WWW?

Zamów wykonanie projektu UX/UI

Wypełnij formularz, skontaktujemy się z Tobą

Heurystyki Jacoba Nielsena a optymalizacja współczynnika konwersji

Eliminacja błędów sklepu wynikająca z analizy heurystycznej podnosi użyteczność serwisu. Potencjalny klient korzysta z dostępnych funkcji z łatwością. Otrzymuje czytelne komunikaty w zrozumiałym dla siebie języku i nie jest przeciążony informacją. Może w prosty sposób zmienić podjętą decyzję i popełnić błąd, który system mu wyjaśni. I tak dalej. Krótko mówiąc posługiwanie się stroną jest przewidywalne oraz nie wymagała nadzwyczajnego zaangażowania poznawczego.

W takiej sytuacji strona nie dostarcza potencjalnemu klientowi powodów do zagubienia i frustracji. Nie sprawia, że użytkownik staje czuje się zagubiony i decyduje się poszukać produktu w innym sklepie. Z ogromnym prawdopodobieństwem można stwierdzić, że jeśli cena i jakość produktu są odpowiednie odwiedzający sklep dokona zakupu. Mówiąc inaczej: użytkownik dokona najbardziej pożądanej konwersji.

Podsumowanie

Heurystyki Jakoba Nielsena są niezwykle istotnym narzędziem, stosowanym m.in. jako jedno z narzędzi audytu UX. Istnieje jednak wiele innych narzędzi czy zbiorów zasad pozwalających na sprawdzenie użyteczności rozwiązania.

Core Web Vitals a UX – najważniejsze wskaźniki Google do oceny UX

Co to są Core Web Vitals?

Core Web Vitals stanowią wskaźniki dotyczące szybkości i wydajności stron internetowych. Celem ich wprowadzenia do algorytmów Google jest uwzględnienie wpływu jakości doświadczeń użytkownika (UX) strony internetowej na pozycję tej strony w wynikach wyszukiwania.

CWV nadaje użyteczności strony wysoką rangę. To bowiem internauci i ich zadowolenie są kluczowe dla osiągania przez witryny wysokich pozycji. Ważna jest zarówno dostępność strony, jak również czytelność informacji. Dlatego właśnie poprawa Core Web Vitals stanowi ważny element działań SEO.

Dlaczego Core Web Vitals są ważne dla UX?

Core Web Vitals to elementy bardzo istotne z punktu widzenia user experience. Nieco upraszczając, można to podsumować następująco: jeśli strona szybko i poprawnie się wczytuje, jest estetyczna, poruszanie się po niej jest łatwe i intuicyjne oraz strona jest wolna od błędów, satysfakcja użytkownika z jej przeglądania jest wysoka. A to wprost przekłada się na wydłużenie czasu pozostania na stronie, dokładniejsze zapoznanie się z jej treścią, w efekcie na zakup produktu lub wykonanie innej pożądanej przez markę akcji.

3 podstawowe wskaźniki internetowe do pomiaru UX

Core Web Vitals składają się z trzech głównych wskaźników. Mowa tu o LCP (Largest Contentful Paint), czyli czasie wyrenderowania największych treści i FID (First Input Delay) opóźnieniu przy pierwszym działaniu. Trzecim wskaźnikiem CWV jest CLS (Cumulative Layout Shift) mierzący stabilność wizualną układu strony.

LCP (czas ładowania pierwszego znaczącego znaku)

Jest to wskaźnik zliczający czas potrzebny na załadowanie się największego elementu na stronie. Chodzi tu z reguły o grafikę, wideo lub blok tekstu. Wynik wynoszący do 2,5 sekundy uznawany jest za pozytywny. Przeciętny wynik otrzymuje zaś strona, dla której wskaźnik ten wynosi od 2,5 do 4 sekund. Z kolei LCP wynoszące powyżej 4 sekund może zwiastować szybkie opuszczenie strony przez użytkownika.

FID (czas odpowiedzi interakcji)

Wskaźnik ten informuje o tym, po jakim czasie Internauta jest w stanie rozpocząć interakcję ze stroną internetową. Pod uwagę brany jest pierwszy interaktywny element, w który kliknie użytkownik. Dobra wartość FID mieści się w granicach 100 milisekund do pierwszej interaktywności. Z kolei wartość wynosząca między 100 a 300 milisekund wskazuje na potrzebę poprawy interaktywności witryny.

CLS (zmiana rozmiaru okna)

Ten wskaźnik z kolei odpowiada za pomiar nieoczekiwanych przesunięć podczas ładowania się strony. Za dobry wynik uznaje się zupełny brak zmiany położenia elementów layoutu. Mieści się on w przedziale od 0,1 do 0,25 i wskazuje stabilność układu strony. Wyższe wartości CLS wskazują natomiast na konieczność optymalizacji witryny pod tym kątem.

infografika: Core Web Vitals a UX.
Infografika: Core Web Vitals a UX.
pobierz pdf

Jak mierzyć Core Web Vitals?

CWV mierzy się za pomocą danych laboratoryjnych i zgromadzonych. Pomiarów tych pierwszych dokonuje się za pomocą specjalistycznych narzędzi. Informują one o doświadczeniach potencjalnych internautów ze stroną. Do tego celu wykorzystuje się Page Speed Insights i Google Search Console lub GTmetrix. Z kolei dane zgromadzone pochodzą z realnych wizyt użytkowników korzystających z przeglądarki Chrome.

Jak zoptymalizować stronę?

Aby zoptymalizować stronę pod kątem UX, należy przede wszystkim użyć narzędzi do mierzenia prędkości. Optymalizacja powinna odbyć się również z wykorzystaniem danych z raportu dotyczącego podstawowych wskaźników internetowych w Google Search Console. Niemniej ważne są wtyczki do przeglądarki oceniające LCP, FID i CLS.

Inne wskaźniki, które warto wziąć pod uwagę podczas optymalizacji strony, to FB (Time to First Byte), FCP (First Contentful Paint), TTI (Time to Interactive) i TBT (Total Blocking Time).

Jak poprawienie wyników Core Web Vitals może pozytywnie wpłynąć na UX?

Dzięki poprawie wyników Core Web Vitals zwiększa się komfort z użytkowania strony, co pozytywnie wpływa na doświadczenia użytkownika. Pozytywne zmiany w tym zakresie procentują także w kontekście wyszukiwarek, których algorytmy przychylniej oceniają witryny stworzone z myślą o wygodzie internauty. Brak niebezpiecznych elementów to kolejny plus, który umożliwia użytkownikom pozostanie na stronie. Im domena jest mniej przyjazna, tym bardziej wzrasta bowiem współczynnik odrzuceń.

Podsumowanie

Core Web Vitals to wskaźniki, które są powiązane z jakością doświadczeń użytkownika (UX) na stronie. Trzy najważniejsze wskaźniki to LCP, FID i CLS. Szybkie wdrożenie działań optymalizacyjnych sprawi, że witryna będzie przyjazna dla internautów. W zakresie CWV warto zadbać o odpowiedni hosting, włączyć funkcje cache i kompresować zdjęcia oraz pliki. Istotne są również odpowiednio dobrane rozmiary grafik i dynamiczne ładowanie elementów na stronie. Długi czas wczytywania witryny ma bowiem negatywny wpływ na odczucia internautów oraz ich interakcje. Źle wpływa również na podstawowe wskaźniki internetowe określone przez Google.

Jak poprawić jakość obsługi klienta w sklepie internetowym

Czym jest obsługa klienta e-commerce?

Obsługa klienta e-commerce to sposób, w jaki firmy internetowe zapewniają klientom pomoc we wszystkim, od podejmowania decyzji o zakupie online po rozwiązywanie problemów — a wszystko to przy jednoczesnym zapewnieniu bezproblemowej obsługi klienta we wszystkich kanałach i platformach.

Przyjemne doświadczenia sprzyjają większym przychodom, pozytywnym recenzjom i stałym klientom. Natomiast złe doświadczenia klientów prowadzą do czegoś przeciwnego. Zasadniczo, jeśli klienci uwielbiają wchodzić w interakcje z Tobą, polecą Cię innym i zostaną z Tobą na dłużej. W wielu przypadkach lojalność klientów może przetrwać pokolenia lub całe życie samej marki.

Dlaczego obsługa klienta jest ważna?

Lojalni, usatysfakcjonowani klienci stają się rzecznikami Twojej marki i będą ją promować, choćby ze względu na szczęście, jakiego doznali podczas zakupów w Twoim sklepie. Kupujący mają milion opcji, aby wybrać produkt, który chcą.

Obsługa klienta przyniesie 3 główne zalety, z których każda firma może skorzystać:

Ponadto:

  • Zadowoleni klienci to większe przychody, to rozwój biznesu
  • To sposób na zbudowanie pozytywnego wizerunku swojej firmy
  • Zyskasz dane o tym, jak powinien wyglądać Twój produkt

10 praktycznych wskazówek, jak usprawnić obsługę klienta w sklepie internetowym

Będąc na czele biznesu, zespół obsługi klienta odgrywa kluczową rolę w budowaniu relacji i zaufania z klientami. Dlatego stworzenie znakomitej obsługi klienta może zmienić zasady gry w Twojej firmie.

Oto kilka sposobów na usprawnienie obsługi klienta e-commerce:

Proś o opinię.

Musisz wyrobić w sobie nawyk proszenia o informację zwrotną. Chociaż nie zawsze może to być pozytywne, zawsze jest pomocne. Jeśli naprawdę chcesz oferować najlepszą obsługę klienta, wiedza o tym, co klienci myślą o Twojej marce, firmie, produktach i usługach, ma ogromne znaczenie.

Dawaj wybór.

Fakt, że klient kupuje Twoje produkty online, sam w sobie świadczy o tym, że cieszy go różnorodność opcji. Jeśli chodzi o obsługę klienta, upewnij się, że dajesz im taką samą możliwość wyboru. Zamiast dawać im nudny formularz kontaktowy, zaoferuj dodatkowe opcje, takie jak wsparcie na czacie na żywo, obsługa klienta przez SMS-y i bezpłatne numery, pod które można zadzwonić.

Wyrażaj się jasno.

Aby uniknąć konfliktów, podaj jak najwięcej informacji o zamówieniach. Dostarczaj szczegółowych informacji na temat takich kwestii, jak zasady wysyłki i zwrotów, gwarancje i inne informacje, które mogą mieć wpływ na doświadczenia klienta.

infografika: Obsługa klienta. Jak podnieść jakość obsługi w sklepie internetowym.
Infografika: Obsługa klienta. Jak podnieść jakość obsługi w sklepie internetowym.
pobierz pdf

Zainwestuj w wysokiej jakości wyszukiwanie w witrynie.

Znaczna część Twojej obsługi klienta dotyczy sposobu projektowania witryny e-commerce. Aby zapewnić zadowolenie klientów i konwersję kupujących, zainwestuj dużo w wysokiej jakości funkcję wyszukiwania i filtrowania wyników w sklepie. Pomoże to utrzymać zadowolenie klientów i unikniesz niepotrzebnych interakcji, które marnują Twój czas.

Zadbaj o wartościowy kontakt po zakupie.

Wszyscy otrzymujemy te irytujące e-maile od firm po tym, jak kupiliśmy jedną rzecz na ich stronie. Nie bądź tą firmą. Zamiast wysyłać leniwe promocje wiele miesięcy po zakupie, wysyłaj wartościowe okazje i oferty natychmiast po zakupie. Kupujący są bardziej skłonni do konwersji, gdy wciąż jesteś świeży w ich myślach. Ponadto dobre oferty i bezpłatne oferty pokazują, że zależy Ci na zatrzymaniu ich jako klienta.

Oferuj bezpłatną wysyłkę.

Jedną z najlepszych taktyk obsługi klienta e-commerce jest oferowanie bezpłatnej wysyłki. Kosztuje to kilka dodatkowych dolarów, ale robi duże wrażenie na klientach i przekonuje ich do pierwszego zakupu (i być może innych w przyszłości).

Upewniaj się, że problem został rozwiązany.

Istotne jest, aby klienci czuli się tak, jakbyś był po ich stronie, gdy pojawił się problem, więc upewnij się, że problem został w pełni rozwiązany i że klient jest zadowolony z usługi. Możesz to zrobić za pomocą wiadomości e-mail lub ankiety opinii klientów – celem jest poinformowanie klienta, że jesteś po jego stronie.

Aktywnie słuchaj klienta.

Kiedy rozmawiasz z klientami, ważne jest, aby wyjaśniać i przeformułować to, co mówią, aby upewnić się, że dobrze ich rozumiesz. Okazanie empatii i odzwierciedlenie ich uczuć również pomoże ci skierować rozmowę we właściwym kierunku.

Bądź dostępny.

Częścią osobistego kontaktu niezbędnego do zadowolenia klienta jest upewnienie się, że Twoi klienci mogą się z Tobą skontaktować. Na przykład, jeśli znajdujesz się w różnych strefach czasowych bądź dostępny w ich czasie. Pomoże to zbudować ich zaufanie i przypomnieć im, że Twoja firma nie jest zaprogramowana.

Mierz, optymalizuj, aktualizuj.

Żadne podejście do obsługi klienta nie jest uniwersalne i dobre na zawsze. Firmy muszą być proaktywne w rozwiązywaniu problemów klientów przy jednoczesnym ciągłym doskonaleniu procesów opartych na danych. Ocena wielkości zespołu w podziale na kanały, śledzenie najbardziej obciążonych godzin i śledzenie trendów wśród klientów to tylko niektóre z rzeczy, które możesz udoskonalić, mierząc i optymalizując wyniki.

Podsumowanie

W handlu internetowym nigdy nie spotykasz się z klientami twarzą w twarz. To oczywiste, ale często o tym zapominamy. Fakty mówią jednak, że obsługa klienta e-commerce jest dyscypliną samą w sobie.

Aby osiągnąć doskonałą obsługę klienta e-commerce, musisz spotykać się z klientami tam, gdzie się znajdują. Spraw, aby każdy klient czuł, że jest dla Ciebie ważniejszy niż ktokolwiek inny. Mamy nadzieję, że powyższe wskazówki i narzędzia zainspirowały Cię do rozpoczęcia pracy.

Content marketing – treści, które pozyskują klientów

Content marketing co to jest?

Content marketing to rodzaj strategii marketingowej, która polega na tworzeniu i publikowaniu w sieci merytorycznych i użytecznych treści, które znacząco wpływają na osiąganie celów biznesowych.

Użyteczne treści to takie, które wnoszą jakąś wartość i wiedzę do internetu. Użytkownik znajduje w nich odpowiedź lub rozwiązanie jakiegoś problemu.

Specjaliści Google stworzyli przewodnik o SEO, w którym podkreślają, że interesujące i przydatne dla użytkownika treści wpływają lepiej na pozycjonowanie witryny niż jakikolwiek inny czynnik.

Treści wysokiej jakości odpowiadające na potrzeby użytkownika, mają szansę trafić do większego grona odbiorców, przekonać ich do marki oraz zachęcić do działania (zakupu, czy skorzystania z usługi).

Formy marketingu treści – co warto wybrać?

Żyjemy w czasach, kiedy reklamy zewsząd zasypują nas komunikatami: kup!, sprawdź!, zobacz ofertę! itd. Jako społeczeństwo przywykliśmy do tego, a co więcej uodporniliśmy się na takie hasła. Dlatego strategia content marketingu powinna zdecydowanie odchodzić od typowych form reklamowych. Za pomocą treści możemy w różny sposób docierać do naszej persony – czyli przedstawiciela grupy docelowej naszej marki. Najpopularniejsze  formy content marketingu to:

  • Wpisy blogowe – mogą mieć formę poradnikową, edukacyjną, lub informacyjną. Ważne, żeby tematycznie były związane z naszą marką i były poparte ekspercką wiedzą, co pomoże zyskać zaufanie potencjalnego klienta. Pomocna tutaj będzie ścisła współpraca ze specjalistami SEO, którzy wskażą odpowiednie frazy kluczowe, i tematy zasadnych artykułów.
  • Newslettery – to bardzo ważna forma marketingu treści. Przede wszystkim pozwala utrzymać ciągłość kontaktu z klientem, zapamiętanie naszej marki i ewentualny powrót na naszą stronę w przyszłości. Już samo zapisanie się do newslettera świadczy o zdobytym zaufaniu użytkownika, ale też dostarcza nam ogromu cennych informacji o naszej personie.
  • Opisy produktów i kategorii – jeśli prowadzimy e-commerce, są one niezbędne dla dobrej widoczności w wyszukiwarce oraz zwiększenia liczby konwersji. Klient, który trafi na pożądany produkt, ale nie znajdzie szczegółowych informacji na jego temat, najprawdopodobniej przejdzie do konkurencji, gdzie będzie miał pewność, że to jest to, czego szuka i tam zdecyduje się na zakup.
  • Artykuły poparte specjalistyczną wiedzą (wewnętrzne i zewnętrzne) – użytkownicy rozpoznają, która treść jest dobra i mogą kierować do niej innych użytkowników. Dzięki temu linki do naszej witryny mogą pojawiać się na forach, blogach, mediach społecznościowych, innych stronach www itp. To dodatkowa reklama dla nas, a dla Google potwierdzenie, że nasze treści są atrakcyjne dla odbiorców.

Inne rodzaje content marketingu to np. infografiki, publikacje w social mediach, e-booki do pobrania, czy zyskujące na popularności vlogi i podcasty.

Dlaczego warto inwestować w content marketing?

Marketing treści otworzył nowe możliwości dotarcia do klientów, w porównaniu z tradycyjną reklamą w mediach. W dodatku jest to o wiele tańsza i bardziej skuteczna opcja. Przyjrzyjmy się bliżej korzyściom płynącym z dobrze zaplanowanej i wdrażanej strategii content marketingowej:

Generuje ruch na stronie

Oryginalny content odpowiadający na najczęstsze zapytania użytkowników, ułatwia indeksowanie strony i przyciąga potencjalnych klientów. Również linki zamieszczane w artykułach zewnętrznych i forach wpływają pozytywnie na liczbę wyświetleń strony. Generowanie ruchu na witrynie ma z kolei wpływ na lepsze pozycjonowanie w wyszukiwarce.

Zwiększa wskaźnik konwersji

Zaufanie zdobyte dzięki wartościowym treściom, pozytywnie wpływa na zwiększenie liczby konwersji. Szczegółowe opisy produktów w sklepach internetowych z pewnością wpłyną pozytywnie na decyzje zakupowe klientów.

Kreuje wizerunek eksperta

Jeśli zamieszczamy na blogu użyteczne i profesjonalne teksty, to zdobywamy w oczach klienta zaufanie i miano eksperta w dziedzinie. Możemy mieć większą pewność, że użytkownik wróci do nas, a także że będzie nas polecał innym użytkownikom.

Generuje więcej leadów i buduje relacje z odbiorcami

Content marketing ułatwia nam zdobycie informacji o naszych personach, a także docieranie do odpowiedniej grupy docelowej. Dzięki wiedzy na temat ich płci, wieku i zainteresowań możemy dotrzeć do nich z konkretnymi ofertami i promocjami. Leady pozwalają też zacieśniać więzi z odbiorcami. Są więc podstawą dla pozostałych działań marketingowych.

Jest łatwo mierzalny

Możemy łatwo sprawdzić, czy strategia content marketingowa, którą obraliśmy, przynosi efekty. Przede wszystkim, jaki zasięg obejmuje, czy docieramy do tej grupy docelowej, której chcemy, jakie jest zaangażowanie naszych odwiedzających i jaką ilość konwersji przynosi. Wybierając i monitorując odpowiednie do specyfiki działalności współczynniki KPI otrzymamy ocenę skuteczności strategii.


infografika: Content marketing. Treści, które pozyskują klientów
Infografika: Content marketing. Treści, które pozyskują klientów.
pobierz pdf

Cechy dobrych treści w content marketingu

Dobre treści, czyli jakie? Interpretacja tego określenia może nie być jednoznaczna, a właściwie mogłaby nie być, gdyby nie eksperci z Google. W obszernym dokumencie przygotowanym dla swoich pracowników, zajmujących się oceną jakości wyników wyszukiwania, postanowili to sprecyzować za pomocą zasady  E.A.T. (Expertise, Authoritativeness i Trustworthiness), czyli specjalizacja, autorytet i wiarygodność. E.A.T wyznaczyła nowy kierunek w optymalizacji i pozycjonowaniu stron internetowych i stała się filarem w ocenie ich jakości.

Ekspercki charakter wypowiedzi

Oznacza to, że content, który znajduje się na stronach, powinien być tworzony przez ekspertów w danej dziedzinie lub przy współpracy z nimi. Google mocno ceni sobie fachową wiedzę przekazywaną w artykułach. Zwłaszcza, jeśli pojawia się w nich jakaś innowacyjna treść, niepublikowana nigdzie dotąd.

Autorytatywność

Nie wszystkie witryny będą wymagały publikacji tworzonych przez specjalistów. Niektóre strony są prowadzone np. przez pasjonatów danej dziedziny. Google ceni sobie po prostu umieszczanie rzetelnych i skutecznych informacji. Jeśli zadbasz o to, może uznać Twoją witrynę za autorytet w swojej dziedzinie, a to przełoży się na ranking strony.

Warto dodać, że tutaj oceniany będzie także poziom dyskusji w komentarzach i grupach dyskusyjnych na danej stronie, ocena produktów i recenzje użytkowników.

Wiarygodność

Wszystko, co znajduje się na stronie, powinno wzbudzać zaufanie i poczucie bezpieczeństwa użytkowników. Wiarygodność strony należy poprzeć zaimplementowanym certyfikatem SSL. Jest to szczególnie ważne w przypadku sklepów internetowych, gdzie dokonywane są płatności kartą kredytową.

Pora na skuteczną stronę www?

Zamów wykonanie projektu UX/UI i wdrożenie

Wypełnij formularz, skontaktujemy się z Tobą

Kto powinien korzystać z content marketingu

Content marketing powinien być podstawą strategii reklamowych każdej firmy, której zależy na rozwoju marki i dotarciu do szerszego grona odbiorców. Działania powinny być opracowywane indywidualnie dla konkretnych branż, sklepów internetowych, specjalistów, czy usług, w zależności od tego, czy chcemy działać na rynku lokalnym, czy ogólnokrajowym. Coraz więcej osób prowadzących działalność gospodarczą decyduje się na inwestowanie w marketing treści, a to sprawia, że firmy, które jeszcze tego nie robią, przestają być widoczne w sieci.

Ile kosztuje skuteczny marketing treści?

Skoro już wiemy, jak jest ważny dla naszej pozycji w wyszukiwarce, to zastanówmy się ile kosztuje content marketing. Koszt może wynosić od kilkuset nawet do kilku tysięcy złotych, bo jest zależny od wielu czynników, m.in.:

  • czy firma zatrudnia Content Managera, czy współpracuje z agencją marketingową,
  • czy treści na stronie są pisane samodzielnie, czy zlecane copywriterom lub pracownikom,
  • ile i jakie treści są umieszczane na stronie,
  • w jaki sposób pozyskiwane są linki zewnętrzne,
  • czy właścicielowi firmy zależy na jednorazowym przygotowaniu audytu i szczegółowej strategii treści, czy na dłuższej współpracy abonamentowej.

Jedno jest pewne, jest to najbardziej opłacalna forma marketingu w stosunku do zysków, jakie generuje. W dodatku treści umieszczane na stronie mogą pracować latami na sukces marki, nie generując przy tym żadnych dodatkowych kosztów.

Podsumowanie

Content marketing to nowoczesna forma komunikacji z odbiorcami, zastępująca dotychczasową reklamę “call to action”. Chociaż jest to stosunkowo młoda dziedzina w Polsce, to specjaliści z branży marketingowej nie mają wątpliwości, jak ogromny potencjał możliwości ze sobą niesie. Firmy, które zainwestowały w content marketing, odnotowują znacznie większy ruch na stronie web, zainteresowanie i rozpoznawalność marki, a na skutek tego wzrost konwersji.

Web usability – na czym polega użyteczność stron internetowych?

Co to jest web usability?

Web usability to cecha stron internetowych i sposób ich projektowania, która koncentruje się na potrzebach użytkownika. Wykorzystuje zorientowane na użytkownika procesy projektowania, aby zapewnić, że strony internetowe są wydajne i łatwe w użyciu dla osób, które faktycznie z nich korzystają, a nie dla osób, które je zaprojektowały.

Przejrzystość i użyteczność to dwa cele web usability, a projektanci muszą nadać priorytet obu. Innymi słowy, projektanci stron internetowych mają za zadanie tworzyć strony internetowe, które nie tylko wyglądają atrakcyjnie, ale działają dokładnie tak, jak oczekują tego użytkownicy, co jest nie lada wyzwaniem nawet dla najbardziej doświadczonego projektanta.

5 czynników, które wpływają na web usability

Projektowanie z naciskiem na użyteczność pozwoli Ci stworzyć stronę internetową, która spełni oczekiwania odwiedzających i pozwoli im wykonywać swoje zadania z dużą satysfakcją. Najważniejszą rzeczą do sprawdzenia jest to, czy użytkownicy są w stanie osiągnąć swoje cele, gdy odwiedzają Twoją witrynę. Nie tylko powinni być w stanie je zrealizować, ale powinni być w stanie robić to skutecznie. Określ, jakie są podstawowe zadania użytkownika i rozważ następujące kwestie, aby ocenić wydajność:

  • Nauczalność – Jak szybko nowy gość może nauczyć się interfejsu użytkownika, aby wykonywać podstawowe zadania? Czy projekt strony jest intuicyjny?
  • Efektywność – Jak szybko użytkownicy mogą wykonywać zadania, znajdować produkty itp.?
  • Zapamiętywalność – Czy powracający użytkownik pamięta, jak efektywnie korzystać z Twojej strony lub aplikacji, czy też jest zmuszony uczyć się wszystkiego od nowa?
  • Błędy – Jak często odwiedzający popełnia błędy podczas korzystania z Twojej witryny? Jak poważne są to błędy? Dlaczego je robią i czy mogą łatwo naprawić te błędy?
  • Satysfakcja – Czy po wykonaniu zadania użytkownik ma dobre zdanie o Twojej firmie?

Skoncentrowanie się na tych pięciu punktach zapewni dobry start w naprawianiu podstawowych problemów z użytecznością.

Chcesz ocenić użyteczność strony www?

Zleć przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Narzędzia i metody badania użyteczności strony

Istnieje kilka metod testowania użyteczności, a ich wybór zależny jest od celu witryny i wskaźników. Przyjrzyjmy się kilku powszechnym metodom, ich zaletom i sposobom ich stosowania.

Analiza heurystyczna

W 1990 roku pionierzy użyteczności sieci, Jakob Nielsen i Rolf Molich, opublikowali przełomowy artykuł Improving a Human-Computer Dialogue. Zawierał zestaw zasad — lub heurystyk — które specjaliści z branży wkrótce zaczęli stosować do oceny interfejsów w interakcji człowiek-komputer. Heurystyka to szybki i praktyczny sposób rozwiązywania problemów lub podejmowania decyzji. W projektowaniu doświadczenia użytkownika (UX) profesjonaliści wykorzystują ocenę heurystyczną do systematycznego określania użyteczności projektu/produktu. Jako eksperci przeglądają listę kontrolną kryteriów, aby znaleźć wady, które przeoczyły zespoły projektowe. Zgodnie z listą 10 heurystyk Nielsena system powinien:

  • Informować użytkowników o swoim statusie odpowiednio i szybko.
  • Prezentować informacje w sposób zrozumiały dla użytkowników z rzeczywistego świata i w języku użytkowników.
  • Oferować użytkownikom kontrolę i pozwolić im łatwo cofnąć błędy.
  • Być spójny i zgodny ze standardami. Użytkownicy nie powinni zastanawiać się, czy różne słowa, sytuacje lub działania oznaczają to samo. Przestrzegaj konwencji dotyczących platformy i branży.
  • Podpowiadać a nie uczyć, aby użytkownicy nie byli zdezorientowani. Informacje wymagane do korzystania z projektu powinny być widoczne lub łatwo dostępne w razie potrzeby.
  • Zapobiegać błędom. Powinien albo unikać warunków, w których pojawiają się błędy, albo ostrzegać użytkowników przed podjęciem ryzykownych działań (np. komunikaty „Czy na pewno chcesz to zrobić?”).
  • Łatwo udostępniać informacje, instrukcje itp., aby użytkownicy mogli poznać opcje, działania itp., zamiast zmuszać ich do polegania na pamięci.
  • Być elastyczny, aby doświadczeni użytkownicy znajdowali szybsze sposoby osiągania celów.
  • Być estetyczny i minimalistyczny, zawierać tylko informacje istotne dla bieżących zadań.
  • Zapewniać dostęp do pomocy w prostym języku dotyczącą błędów i rozwiązań.

Benchmarking

Benchmarking (analiza porównawcza) to metoda, która pozwala porównać standardowy zestaw wskaźników między dwoma ostatecznymi stanami produktu w celu zmierzenia jego względnej wydajności. Dwa porównywane stany to zwykle wcześniejsza wersja produktu i bieżąca wersja produktu.

Testy porównawcze są istotną częścią planu systematycznej poprawy doświadczenia użytkownika, ponieważ pozwalają sprawdzić, czy wysiłki projektowe faktycznie przyniosły wymierną różnicę w czasie, co może następnie pomóc w odpowiednim dostosowaniu planu działania.

Benchmarking to także świetna metoda udowodnienia zwrotu z inwestycji (ROI) Twoich działań UX. Kiedy już masz wymierny poziom bazowy swojego istniejącego produktu, każda nowa praca po nim spowoduje, że te liczby wzrosną lub spadną, wtedy możesz połączyć to z wysiłkiem, jakiego wymagało osiągnięcie tych liczb i połączyć to wszystko w analizie kosztów i benefitów, która może udowodnić zwrot z inwestycji w Twoje wysiłki UX.

Testy behawioralne użytkowników

Testy behawioralne odnoszą się do monitorowania interakcji użytkowników z Twoim produktem – i w Twoim produkcie – czy to w przypadku Twojej witryny, aplikacji internetowej, czy dowolnego innego narzędzia SaaS.

Oczywiście różne platformy będą wymagały różnych rozwiązań analitycznych, ale cel jest zawsze ten sam – poprawa doświadczenia użytkownika i wyrównywanie satysfakcji klientów, podnoszenie współczynników konwersji i retencji.

Monitorowanie zachowań użytkowników pomaga identyfikować potencjalne wyzwania, na jakie użytkownicy mogą napotykać podczas korzystania z Twojego produktu. Pomaga również zrozumieć każdą customer journey, czyli podróż użytkownika, wyeliminować wszelkie domysły i skupić się na szczegółowej segmentacji użytkowników, aby zoptymalizować produkt pod kątem rozwoju.

Analiza logów serwera

Logi  serwera WWW to niedrogie, automatycznie przechwytywane nagranie doświadczenia użytkownika (UX) na stronie internetowej. Zawierają dane, za pomocą których projektanci mogą ocenić użyteczność i skuteczność wyborów projektowych. Większość wytycznych dotyczących projektowania stron ma charakter opisowy i dosyć otwarty. Ocena poprawności i użyteczności efektów projektowania zazwyczaj opiera się na ocenach obserwatorów. Logi serwerowe dostarczają zaś mierzalnych danych dotyczących faktycznego, statystycznego użytkowania witryny.

Mierzenie szybkości ładowania strony

Szybkość strony, miara szybkości wczytywania treści na Twojej stronie, ma ogromny wpływ na zadowolenie odwiedzających i Twoją konwersję. Definiując Core Web Vitals Google wskazuje szybkość wczytywania strony jako istotny czynnik rankingowy. Jeśli chodzi o wrażenia użytkownika, strony o dłuższym czasie ładowania mają zwykle wyższy współczynnik odrzuceń i niższy średni czas spędzony na stronie.

Jakob Nielsen zdefiniował 3 granice czasu reakcji, które są określone przez ludzkie zdolności percepcyjne:

  • 0,1 sekundy. Limit ten daje użytkownikom poczucie natychmiastowej reakcji. Ten poziom reakcji jest niezbędny do podtrzymania poczucia bezpośredniej interakcji. To także idealny czas reakcji strony.
  • 1 sekunda. Jedna sekunda sprawia, że przepływ użytkownika jest prawie płynny. Chociaż użytkownicy zauważają niewielkie opóźnienie, nadal czują kontrolę nad doświadczeniem.
  • 10 sekund to limit uwagi użytkownika. W przypadku opóźnień przekraczających 10 sekund użytkownicy będą chcieli wykonać inne zadania, czekając na zakończenie działania komputera. 10-sekundowe opóźnienie w sieci bez żadnej informacji zwrotnej często powoduje, że odwiedzający natychmiast opuszczają witrynę.

W ostatnich latach limit czasu reakcji nadal spada. Mimo że 10 sekund to limit uwagi użytkownika, w wielu przypadkach odwiedzający opuszczą Twoją witrynę, jeśli nie załaduje się ona w ciągu kilku sekund.

infografika: Web Usability. Na czym polega użyteczność stron internetowych.
Infografika: Web Usability. Na czym polega użyteczność stron internetowych.
pobierz pdf

Wykorzystanie web usability w projektowaniu stron www

Im lepsza jest użyteczność Twojej witryny, tym bardziej użytkownicy będą zadowoleni z jej użytkowania. Witryna z doskonałym projektem, oferująca wyjątkowe treści i przyjemna w użyciu, to zwycięstwo w rękach.

Jeśli chodzi o użyteczność, istnieją cztery podstawowe zasady, o których należy pamiętać, aby uzyskać jak najlepsze wyniki:

  • Przejrzysta nawigacja: im łatwiej jest przeglądać Twoją witrynę, tym bardziej zadowoleni będą Twoi użytkownicy.
  • Wydajność: powolne strony internetowe tracą odwiedzających, więc musisz zoptymalizować je pod kątem wydajności.
  • Czytelność: Twoja treść powinna być łatwa do odczytania, aby nie wprowadzała w błąd ani nie frustrowała.
  • Responsywność: ruch mobilny jest ważniejszy niż kiedykolwiek, dlatego Twoja witryna musi dobrze działać na wszystkich urządzeniach.

Więcej na temat projektowania użytecznych stron, przeczytasz w naszym wcześniejszym artykule Tworzenie użytecznych stron www.

Podsumowanie

Użyteczność jest kluczowym elementem świetnego projektu strony internetowej. Jest to miara, którą można zastosować do dowolnej witryny internetowej. Opisuje ona, jak skuteczna jest Twoja witryna internetowa i czy jest ona efektywną inwestycją.

Twój projekt witryny może dobrze działać dla menedżerów podczas testowania, ale wiedzą oni, czym zajmuje się Twoja firma i jak działa. Dla użytkowników może to być zupełnie inna historia.

Ponowne skoncentrowanie projektu na użytkownikach i na tym, co chcą osiągnąć, może sprawić, że Twoja witryna będzie bardziej użyteczna. Innymi słowy, ułatwienie korzystania z witryny oznacza, że więcej osób będzie się nią posługiwać.

Landing page – jak zaprojektować stronę lądowania?

Co to jest landing page i dlaczego jest ważna dla skutecznej konwersji?

Landing page po polsku to po prostu „strona lądowania” lub „strona docelowa”, na którą przenoszony jest użytkownik Internetu bezpośrednio po kliknięciu w reklamę. Strona lądowania przygotowywana jest dla konkretnego produktu, usługi czy kampanii. Zawsze powinna być też logicznym rozszerzeniem klikniętej przez odbiorcę reklamy.

Dzięki czytelnej grafice, skondensowanym treściom informacyjnym, niewielkiej liczbie linków i wyraźnie zaznaczonym wezwaniom do działania – osoba odwiedzająca LP nie rozprasza się. Użytkownik utrzymuje skupienie na tym, co go zaprowadziło na stronę i szybciej podejmuje ostateczną decyzję o skorzystaniu z Twojej oferty. A to wprost przekłada się na konwersję.

Landing page nie jest tożsame ze stroną główną Twojej firmy! Zadaniem strony głównej jest bowiem zaprezentowanie marki i całej oferty. LP jest skoncentrowana na precyzyjnie określonym celu (np. jednym produkcie, wybranej usłudze) i umożliwieniu odbiorcy zrealizowania konkretnej akcji w maksymalnie prosty sposób.

Jakie są główne cele stron lądowania?

Głównym celem landing page jest jak najwyższa konwersja, czyli liczba wykonanych przez odbiorców określonych i oczekiwanych przez Ciebie działań w stosunku do liczby wszystkich wejść na stronę. Landing pages konkurują w tej kategorii z innymi popularnymi rozwiązaniami, takimi jak np. formularze kontaktowe czy okienka pop-up. Specjaliści podkreślają jednak, że to właśnie LP zapewnia najwyższą konwersję, która w przypadku odpowiednio zaprojektowanej strony może osiągać wartości dwucyfrowe!

Potrzebujesz skutecznej landing page?

Przygotujemy dla Ciebie niepowtarzalny projekt!

Wypełnij formularz, skontaktujemy się z Tobą

Jak zaprojektować skuteczną stronę lądowania?

Proces projektowania każdej strony docelowej można podzielić na trzy etapy:

  • opracowanie designu strony, a więc dobór kolorystki, fontów i zadbanie o spójność z firmową stroną www,
  • stworzenie contentu, obejmujące napisanie wysokiej jakości tekstu marketingowego lub informacyjnego w optymalnym układzie,
  • optymalizacja rozwiązań technicznych, czyli zadbanie o responsywność strony oraz zastosowanie przycisków CTA z krótką i intuicyjną ścieżką zakupu.

Jak zrobić dobry landing page? Poznaj najważniejsze wskazówki.

Zastosowanie odpowiedniej kolorystyki i fontów

Kreacja graficzna landing page powinna być atrakcyjna wizualnie, ale jednocześnie prosta i nierozpraszająca uwagi odbiorcy. Sięgnij po bezpieczne kolory, które wiążą się z Twoją ofertą oraz maksymalnie czytelne fonty. Pamiętaj, że nadrzędnym celem LP jest wysoka konwersja! Zrezygnuj z nic nie wnoszących ozdobników, które mogłyby obniżyć czytelność strony i zaburzyć intuicyjność ścieżki.

Zadbanie o spójność z całą stroną internetową

Landing page powinno być także spójne z layoutem strony internetowej Twojej firmy, pozostawać w zgodzie z Twoją misją i harmonijnie wpisywać się w ogólne działania marketingowe. Zastosuj więc charakterystyczną kolorystykę, fonty oraz grafiki, które kojarzą się z Twoją marką. Nie zapomnij o logotypie!

Zwiększenie czytelności i użyteczności strony poprzez odpowiednie formatowanie i układ treści

Formatowanie treści i ich układ na stronie LP mają istotne znaczenie dla klarowności przekazu. Jednym z najistotniejszych elementów są nagłówki, podtytuły i leady. Powinny one utwierdzać odbiorcę w przekonaniu, że znajdzie na stronie to, co zainteresowało go w komunikacie reklamowym.

Badania wskazują, że jedynie dwie osoby na dziesięć, które odwiedzą Twoją stronę LP przeczytają coś więcej niż wyróżnione przez Ciebie treści. Na landing page umieść więc wyłącznie informacje niezbędne do realizacji jej celu. Zbyt duża ilość tekstu i treści zbędne będą skutkować obniżeniem konwersji.

Dostosowanie do urządzeń mobilnych

Landing page musi być stroną responsywną, czyli taką, która dostosowuje się do wielkości okna przeglądarki i urządzenia, z którego korzysta odbiorca. Responsywna strona lądowania będzie więc dobrze wyglądać i pozostanie w pełni czytelna zarówno na dużym ekranie komputera, jak i mniejszych ekranach tabletów i smartfonów.

Zastosowanie odpowiednich przycisków CTA (Call To Action)

Przyciski CTA to klucz do sukcesu! Ich rozmieszczenie na stronie, łatwość kliknięcia oraz prostota i intuicyjność ścieżki prowadzącej do finalizacji transakcji mają ogromne znaczenie w kontekście skuteczności landing page. Wezwanie do akcji powinno być maksymalnie czytelne i jednoznaczne.  Powinno utrzymywać u odbiorcy przekonanie o słuszności podjętej decyzji i konsekwentnie prowadzić do punktu konwersji.

Dodanie atrakcyjnych grafik i multimediów dla grupy odbiorczej

Grafiki i multimedia na stronie lądowania powinny być dopasowane do grupy odbiorców, czyli personalizacja UX (ich wieku, zainteresowań itp.).  Powinny także ściśle wiązać się z oferowanym produktem lub usługą bądź stanowić integralną część kampanii marketingowej. Właściwie dobrane grafiki czy materiały video mogą zdecydować o zainteresowaniu Twoim produktem lub usługą!

infografika: Landing page. Jak zaprojektować skuteczną stronę lądowania.
Infografika: Landing page. Jak zaprojektować skuteczną stronę lądowania.
pobierz pdf

O czym warto pamiętać projektując stronę lądowania?

Punktem wyjścia dla wszystkich działań marketingowych powinno być szczegółowe określenie grupy docelowej, czyli stworzenie tzw. persony marketingowej. Kim jest? Jak wygląda jej typowy dzień? Do czego jest jej potrzebny Twój produkt lub usługa? Dlaczego interesuje się Twoją ofertą? Jakie ma obawy i czym kieruje się podejmując decyzje zakupowe?

Im więcej wiesz o personie marketingowej, tym skuteczniej będziesz mógł dopasować treści, ich układ i przyciski CTA do potrzeb odbiorcy. Dlatego pokaż, że rozumiesz potrzeby odbiorcy i działaj zawsze w jednym, ściśle określonym celu marketingowym.

Musisz przekazać, że rozumiesz potrzeby i oczekiwania potencjalnych klientów

Tworząc treści na stronę LP posługuj się językiem korzyści. Opisuj swój produkt lub usługę w taki sposób, by odbiorca czuł, że rozumiesz jego potrzeby i oczekiwania. Zapewnij go, że oferujesz najkorzystniejsze dla niego rozwiązania. Jeśli masz jakiekolwiek wątpliwości dotyczące ukrytych motywacji klienta – wykorzystaj w tworzeniu treści technikę laddering. To seria pytań pozwalająca rozszyfrować, co dokładnie kieruje procesem decyzyjnym u odbiorcy.

Pamiętaj o tzw. social proof na landing page’u. Aż 7 na 10 osób przed dokonaniem zakupu szuka w Internecie społecznego dowodu słuszności dla decyzji zakupowej, do której się przymierza. Dobierz social proof optymalnie dopasowane do Twojego odbiorcy. Mogą to być m.in. prawdziwe opinie dotychczasowych klientów, rekomendacje influencerów czy uwiarygodniające liczby (dane statystyczne).

Dostosuj stronę lądowania do konkretnego celu marketingowego

Landing page musi być tworzony z myślą o konkretnym celu marketingowym, np. sprzedaży wybranego produktu lub usługi, zapisaniu się do newslettera, na webinar lub szkolenie, zostawieniu danych kontaktowych. LP to nie miejsce na prezentowanie szerokiej oferty, przedstawianie siebie i firmy czy chwalenie się rozlicznymi sukcesami. Tutaj skupiasz się na jednym, konkretnym celu!

Testuj i optymalizuj stronę lądowania

Landing page jest gotowa do opublikowania? Zanim oddasz ją w ręce użytkowników dokładnie ją przetestuj i zoptymalizuj z zastosowaniem sprawdzonych narzędzi marketingu internetowego (przede wszystkim Google Ads, Google Analytics). Po opublikowaniu LP monitoruj konwersję i w razie potrzeby wprowadzaj niezbędne modyfikacje.

Podsumowanie

Jak zrobić skuteczny landing page? Zacznij od określenia jednego celu, któremu ma służyć dana strona docelowa. To może być na przykład sprzedaż konkretnego produktu lub usługi, bądź zapisanie na webinar.

Określ tzw. personę marketingową, czyli odbiorcę, który jest Twoim potencjalnym klientem. Przygotuj wysokiej jakości treści oraz opracuj ich optymalny układ oraz przyjazny design strony. Zaplanuj przyciski CTA, które w prosty sposób doprowadzą odbiorcę do punktu konwersji.

Po opublikowaniu LP monitoruj jej skuteczność, optymalizuj i wprowadzaj modyfikacje, dzięki którym osiągniesz swój biznesowy cel.

Gridy, czyli jak projektować na siatce 12 kolumn

Co to są gridy? Z czego zbudowane są siatki gridowe?

Grid to system organizowania treści projektu, wyrównuje i porządkuje elementy. Niezależnie od tego, czy tworzysz układ do druku, na przykład czasopisma, czy łączysz obrazy i tekst w celu zaprojektowania strony internetowej, użyjesz siatki, która pomoże Ci podjąć decyzje projektowe i zapewnić użytkownikowi dobre wrażenia.

Korzystanie z siatki eliminuje przypadkowe podejmowanie decyzji. Dzięki odpowiedniemu użyciu siatki będziesz dokładnie wiedzieć, gdzie umieścić elementy, takie jak logo, elementy menu, nagłówek, treść, obrazy i inne. Pomoże to również przyspieszyć proces projektowania.

Siatki  gridowe w web designie

Siatka witryny internetowej, tak jak wcześniej wspomniałem, to system służący do organizowania treści na stronie oraz tworzenia porządku. Tworzy podstawową strukturę lub szkielet interfejsu użytkownika. Projektanci używają siatek gridowych do podejmowania decyzji projektowych i tworzenia dobrych doświadczeń użytkownika.

Kiedy podzielisz standardowy proces projektowania strony internetowej na etapy, które w większości przypadków będą obejmować tworzenie makiet UX i prototypowanie, zdasz sobie sprawę, że każda strona internetowa jest zbudowana z kwadratów i prostokątów. Ostatecznie, niezależnie od indywidualnego kształtu dowolnego elementu, znajdują się one w układzie siatki.

Jak zbudowana jest siatka?

Niezależnie od tego, czy są proste, czy złożone, wszystkie siatki zbudowane są z trzech głównych elementów:

  • Kolumny  –  są podstawą siatek, określają obszar, w którym zostanie umieszczona treść. Szerokość każdej kolumny jest mierzona w procentach, a nie w stałych liczbach, co pozwala profesjonalistom na większą elastyczność w projektowaniu dla różnych rozmiarów ekranu. Liczba kolumn będzie zależała od rozmiaru i rozdzielczości każdego punktu przerwania ekranu (breakpoints). Najpopularniejsze frameworki wykorzystują system siatki składający się z 12 kolumn o równej szerokości; zapewnia to projektantom dużą elastyczność w zakresie układu.
  • Gutter (rynna) – Rynny to przestrzeń między kolumnami. Ich funkcją jest przede wszystkim, zapewnienie przestrzeni między elementami projektu.
  • Marginesy – to przestrzeń między obramowaniem, a zewnętrzynymi krawędziami strony.

Dlaczego 12 kolumn?

Strony internetowe często prezentują swoją zawartość w wielu kolumnach. Nie jest niczym niezwykłym, że chcemy, aby te kolumny były równomiernie rozmieszczone i miały ten sam rozmiar. Liczba 12 jest najłatwiejszą do podzielenia między rozsądnie małymi liczbami. Możliwe jest posiadanie 12, 6, 4, 3, 2 lub 1 równomiernie rozmieszczonych kolumn. Daje to projektantom ogromną elastyczność w projektowaniu.

Chociaż siatka 12-kolumnowa jest popularnym wyborem wśród wielu projektantów, nie jest to rozwiązanie uniwersalne. Wybierając siatkę, wybierz taką, która zawiera liczbę kolumn, których naprawdę potrzebujesz do swojego projektu. Nie ma sensu używać siatki 12-kolumnowej, jeśli twój układ wymaga tylko 8 kolumn.

infografika: Zastosowanie gridów. Jak projektować na siatce 12 kolumnowej.
Infografika: Zastosowanie gridów. Jak projektować na siatce 12 kolumnowej.
pobierz pdf

Dlaczego warto korzystać z siatki?

Siatki pomagają nadać kształt i hierarchię projektom stron internetowych. Bez nich nie mielibyśmy pojęcia, gdzie umieścić elementy projektu. Potrzebujemy ich, aby stworzyć dobre wrażenia użytkownika, aby wiedział on, jak poruszać się po witrynie i znalazł to, czego potrzebuje. Poniżej znajdziesz listę kluczowych zalet korzystania z siatki.

Tworzy przejrzystość i spójność

Siatka strony internetowej  jest podstawą porządku w projekcie. Proporcje, biała przestrzeń i hierarchia to cechy projektu, które bezpośrednio wpływają na szybkość poznawczą. Siatki tworzą i wymuszają spójność tych elementów w całym interfejsie. Skuteczna siatka prowadzi wzrok, ułatwiając i uprzyjemniając skanowanie obiektów na ekranie.

Poprawia zrozumienie projektu

Ludzki mózg dokonuje oceny w ułamku sekundy. Źle złożony projekt sprawi, że produkt będzie wydawał się mniej użyteczny i godny zaufania. Siatki gridowe łączą i wzmacniają wizualną hierarchię projektu, udostępniając zestaw reguł, takich jak rozmieszczenie elementów w układzie.

Reaguje na zmianę szerokości ekranu

Korzystanie z siatki zapewnia spójne wrażenia na wielu urządzeniach o różnych rozmiarach ekranu. Projektanci nie mogą już tworzyć dla ekranu jednego urządzenia. Środowisko wielu urządzeń zmusza projektantów do myślenia w kategoriach dynamicznych systemów siatek czyli tworzenia projektów responsywnych.

Przyspiesza proces projektowania

Siatki umożliwiają projektantom zarządzanie proporcjami między elementami interfejsu użytkownika, takimi jak odstępy i marginesy. Pomaga to od samego początku tworzyć projekty perfekcyjne co do piksela i pozwala uniknąć poprawek spowodowanych nieprawidłowymi ustawieniami.

Ułatwia modyfikowanie i ponowne wykorzystanie projektu

W przeciwieństwie do druku, produkty cyfrowe nigdy nie są skończone — nieustannie się zmieniają i ewoluują. Siatki zapewniają solidną podstawę, ponieważ gdy wszystko jest zgodne z siatką, poprzednie rozwiązania można łatwo wykorzystać do stworzenia nowej wersji projektu. Siatka to szkielet, który można wykorzystać do uzyskania zupełnie innego wyglądu.

Ułatwia współpracę

Siatki ułatwiają projektantom współpracę nad projektami, udostępniając plan rozmieszczenia elementów. Systemy siatkowe pomagają podzielić pracę nad projektowaniem interfejsu, ponieważ wielu projektantów może pracować nad różnymi częściami układu, wiedząc, że ich praca będzie płynnie zintegrowana i spójna.

Szukasz wykonawcy firmowej strony WWW?

Prześlij brief, aby otrzymać wycenę

Wypełnij formularz, skontaktujemy się z Tobą

Rodzaje gridów na stronach internetowych

Kolumny, rynny i marginesy można łączyć na różne sposoby, tworząc odrębne typy siatek. Poniżej znajdują się trzy standardowe siatki układu:

Siatki hierarchiczne

Siatki hierarchiczne można przydzielić do kategorii, w których inne formy siatek nie pasują. Nie są one ułożone według rzędów ani kolumn. Siatki hierarchiczne nie mają równych odstępów między modułami. Zasadniczo może więc składać się zarówno z wierszy, jak i kolumn, często zachodzących na siebie, tworząc w ten sposób więcej miejsca na treść i kreatywność.

Siatki hierarchiczne są często spotykane w Internecie. Wykonuje się je poprzez umieszczenie danych i uporządkowanie ich w sposób instynktowny, czyli w zasadzie zgodnie z potrzebą danych.

Siatki kolumnowe

Siatki kolumnowe są najczęściej wykorzystywanym typem siatki, służą do organizowania elementów w kolumny. Czasopisma używają siatki kolumn, aby umieścić tekst w łatwych do odczytania sekcjach. Używane są często w witrynach internetowych, ale też w książkach i podręcznikach.

Tekst i obrazy w siatce kolumn są umieszczane zgodnie z pionowymi liniami tworzącymi kolumny. Obrazy można umieszczać w jednej kolumnie, w dwóch lub więcej, aby utworzyć inny układ wizualny. Odstępy między kolumnami (gutters) powinny być proporcjonalne i spójne w całym dokumencie.

Siatki modułowe

Siatka modułowa to siatka kolumn podzielona na wiersze. Przecinające się rzędy i kolumny tworzą moduły. Można ich używać do zarządzania decyzjami dotyczącymi układu. Jest to swojego rodzaj przedłużenia siatki słupów. Siatki modułowe są dobre, gdy wymagana jest większa kontrola nad układem projektu niż przy siatce kolumnowej, zapewnia elastyczny formaty stron i umożliwia tworzenie złożonej hierarchii.

Jak korzystać z siatek w projektowaniu stron internetowych?

Choć użycie siatki wydaje się intuicyjne, warto zapoznać się z kilkoma instrukcjami i podstawowymi zasadami korzystania z Gridów w projektowaniu UX/UI.

  • Umieść elementy w zestawach kolumn – w siatce z 12 kolumnami elementy można umieszczać na kilka sposobów. Na przykład możesz utworzyć dwa bloki treści przy użyciu sześciu kolumn, trzech zestawów po cztery kolumny w każdym lub czterech ramek po trzy kolumny. Pamiętaj, aby zostawić gutter, przestrzeń między każdym blokiem treści. Ustaw również granice swoich elementów na kolumnach, nie umieszczając ich krawędzi na gutterach. Ponadto, centrując elementy w kolumnach, zawsze zostaw trochę miejsca na krawędziach. Oznacza to, że dodaj spacje wypełniające po wewnętrznej stronie.
  • Nie zostawiaj zewnętrznych kolumn bez treści, tak jakby były dopełnieniem – jeśli nie jesteś przyzwyczajony do pracy z siatkami, możesz poczuć potrzebę dodania wypełnienia do swoich projektów. Ale po to właśnie są marginesy boczne: będą dodatkowym wypełnieniem.
  • Wyjście z siatki jest w porządku – używanie obrazów lub elementów, które wylewają się z siatki, jest w porządku; mogą przejść od krawędzi do krawędzi (np. banner lub elementy nawigacji witryny). Jeśli chcesz zaprojektować kolor tła lub obraz, który jest pełnym spadem, po prostu wyciągnij go poza siatkę w makiecie.
  • Zwróć uwagę na odstępy między blokami treści – umieszczając różne elementy na siatce, upewnij się, że odstępy między nimi są spójne.
  • Testuj i pozwól sobie na kreatywność – podobnie jak w przypadku każdej decyzji dotyczącej projektowania UX, powinieneś przetestować i zebrać informacje zwrotne na temat sposobu umieszczenia elementów w interfejsach użytkownika. W ten sposób uzyskasz informacje i spostrzeżenia na temat podróży użytkownika, które mogą być przydatne do ciągłego ulepszania projektów. Nie bój się też eksplorować. Użyj siatki w najlepszy sposób, aby poprawić organizację treści. Spróbuj zrozumieć, w jaki sposób możesz wyróżnić swoje treści i zapewnić lepsze wrażenia użytkownikom.

Gridy, a urządzenia mobilne

Siatki mobilne mają ograniczoną przestrzeń, co sprawia, że układ wielokolumnowy nie jest tak naprawdę możliwy. Treść mobilna jest zwykle ograniczona do jednej lub dwóch kolumn. Projektując dla urządzeń mobilnych, rozważ użycie układu kafelków, w której wysokość kolumn i wierszy jest taka sama. Szczególnie, jeśli korzystasz z podejścia Mobile First Design.

Zwróć uwagę na fakt, że na urządzeniach mobilnych użytkownicy mają ograniczoną przestrzeń na ekranie i mogą przeglądać tylko niewielką ilość treści naraz, zanim będą musieli przewijać. Tak więc, projektując układ siatki, stwórz obrazy wystarczająco duże, aby były rozpoznawalne, a jednocześnie wystarczająco małe, aby umożliwić jednoczesne obejrzenie większej ilości treści.

Podsumowanie

Grid jest jak klej, który spaja projekt. Nawet jeśli elementy są fizycznie od siebie oddzielone, łączy je coś niewidzialnego. Teraz, gdy już wiesz, dlaczego siatki są tak ważne i jak je zbudować, nadszedł czas, aby zacząć mierzyć i wyrównywać.

Pamiętaj, że dotyczy to każdego elementu projektu: widżetów i komponentów zarówno w poziomie, jak i w pionie. Pomoże Ci to osiągnąć zamierzony efekt końcowy i dostarczać wartościowe projekty.

Czy sklep powinien mieć swoją mobilną wersję?

Czym jest Mobile First

Mobile First Design można zdefiniować jako sposób myślenia o projektowaniu stron internetowych, projektowaniu aplikacji, witryn mobilnych i doświadczeniach użytkowników. Chodzi o optymalizację prezentacji stron internetowych na urządzenia mobilne i stworzenie responsywnego projektu, który będzie pasował do innych rozmiarów ekranów. Dzięki projektowi zorientowanemu na urządzenia mobilne pracujesz od najmniejszego do największego rozmiaru.

Dlaczego wersja dla użytkowników mobilnych jest ważna?

Przeglądanie stron na urządzeniach mobilnych jest bardzo powszechną rzeczą. Mając to na uwadze, ważne jest, aby upewnić się, że wszyscy odwiedzający mają wspaniałe wrażenia. Niezależnie od rodzaju urządzenia, z którego korzystają. Jeśli przegladanie witryny trwa zbyt długo i nie jest łatwe w użyciu na urządzeniu mobilnym, użytkownicy najprawdopodobniej przejdą do konkurencji. Posiadanie mobilnej wersji witryny ma kilka kluczowych zalet, w tym:

  • Lepsza widoczność wyszukiwania
  • Poprawa doświadczeń użytkowników (UX)
  • Zwiększone generowanie leadów
  • Wspieranie tożsamości marki

Sklep w sieci – dostosowanie do użytkowników mobilnych

Może istnieć wiele powodów, dla których kupujący sięgają po telefony komórkowe, aby zrobić zakupy online. Jednym z powodów, dla których zakupy mobilne przeżywają taki wzrost, jest ulepszenie technologii. Takich jak technologie rozpoznawania linii papilarnych i rozpoznawania twarzy, które zapewniają dodatkowe bezpieczeństwo. Ponadto takie opcje jak płatności jednym kliknięciem przyspieszają cały proces i czynią go niezwykle łatwym. Nie da się zaprzeczyć, że w dzisiejszych czasach kupujący bardzo szybko się niecierpliwią i frustrują, więc zakupy w środowisku bez kolejek wydają się bardzo atrakcyjnym rozwiązaniem. Co najważniejsze, ludzie zawsze mają telefony komórkowe w ruchu, więc mogą robić zakupy w dowolnym miejscu i czasie.

Jeśli jesteś nowy w temacie projektowania stron internetowych, prawdopodobnie zastanawiasz jak zacząć, aby sklep wyglądał atrakcyjnie. Istnieje kilka sposobów na to, jak prowadzić pracę nad projektem e-sklepu tak, aby prezentował się dobrze i był funkcjonalny.

Wersja mobilna na przeglądarki smartfonów – Strona responsywna

Responsywny projekt (RWD) to projekt strony internetowej, który dostosuje się do wielu rozmiarów ekranu.  Responsywne projekty są w stanie dostosować się do wielu różnych urządzeń i kontekstów — od smartfonów po szerokoekranowe monitory 4K. Ze względu na swoje możliwości adaptacyjne i responsywność, to podejście do projektowania stron internetowych jest często najbardziej skomplikowane i kosztowne.

Jeśli myślisz o responsywnym projekcie strony internetowej, oto kilka kluczowych zasad:

  • Wiele breakpointów — Oznacza to tworzenie projektu dla każdego punktu, w którym zmieni się układ witryny. Określa to, w jaki sposób Twoja witryna będzie responsywna i gdzie elementy będą się poruszać na każdym rozmiarze ekranu.
  • Płynność — Gdy ekrany stają się mniejsze, tekst zajmuje więcej miejsca w pionie, a wszystko inne zostaje przesunięte w dół. Oznacza to projektowanie pod kątem płynności poprzez zapewnienie, że każdy element może przenieść się w nowe miejsce bez uszczerbku dla jego jakości.
  • Brak podejścia stawiającego na komputery stacjonarne lub urządzenia mobilne — Nie ma znaczenia, czy Twoi użytkownicy korzystają głównie z komputerów stacjonarnych, czy urządzeń mobilnych. Responsywne projekty dostosują się do wszystkich ekranów. Dlatego zapewnienie funkcjonalności i użyteczeczności na dużym ekranie jest tak samo ważne jak na małym ekranie.
infografika: Czy sklep powinien mieć swoją mobilną wersję? Rodzaje mobilnego sklepu
Infografika: Czy sklep powinien mieć swoją mobilną wersję? Rodzaje mobilnego sklepu.
pobierz pdf

Progressive Web App – PWA

W naszym mobilnym świecie konsumenci bardzo przyzwyczaili się do korzystania z natywnych aplikacji. Są zbudowane w określonym celu i doskonale pasują do zawiłości formatu. Progresywne aplikacje internetowe to aplikacje internetowe, których celem jest naśladowanie funkcjonalności natywnych aplikacji mobilnych. Robią to, oferując doświadczenie użytkownika, które bardzo przypomina natywną implementację, pozostając jednocześnie opartym na sieci.

Prawdopodobnie zastanawiasz się teraz, czy Twoi klienci będą zadowoleni z PWA – w końcu budujesz je dla nich. W jaki sposób PWA jest korzystne dla użytkowników końcowych? Jesteśmy prawie pewni, że z przyjemnością usłyszysz, że lista zalet jest dość długa.

  • Wymaga bardzo mało miejsca do przechowywania – Progresywne aplikacje internetowe są zwykle mniejsze, więc ładują się szybciej, mniej obciążają dysk twardy użytkownika i wymagają mniej pamięci do działania.
  • Działa w trybie offline równie dobrze jak aplikacje natywne -PWA może ładować się bez aktywnego połączenia sieciowego dzięki buforowanym danym przechowywanym w przeglądarce. Oznacza to, że użytkownicy, którzy nie są online, mogą nadal wchodzić w interakcje z Twoją aplikacją w określony sposób.
  • Nie wymaga pobierania – Użytkownicy nie muszą odwiedzać żadnego sklepu z aplikacjami, aby uzyskać dostęp do Twojej aplikacji. Zamiast tego mogą pobrać Twoje PWA bezpośrednio z Twojego sklepu i natychmiast pojawi się na ich telefonie jako widżet. Znacznie ułatwia to użytkownikom wypróbowanie Twojej aplikacji. Może pojawić się w wynikach wyszukiwania i pomija proces instalacji

Korzyści z PWA dla biznesu

Jakie są korzyści PWA dla Ciebie i Twojej firmy? Jest ich również mnóstwo! Oprócz uszczęśliwiania użytkowników końcowych (co w rzeczywistości jest dużą korzyścią dla Twojej firmy), może również zaoszczędzić pieniądze i ułatwić rozwój firmy. Brzmi dobrze, prawda? Przyjrzyjmy się temu bliżej.

  • Coraz popularniejsze rozwiązanie – To już standard dla Androida i Apple’a, aby przypisywać coraz więcej pamięci RAM do PWA na swoich urządzeniach.
  • Niezależny od branży – Wszechstronność i zestaw funkcji, które umożliwiają PWA, wraz z mniejszymi ograniczeniami zasobów, oznaczają, że jest to doskonałe rozwiązanie dla każdej branży, niezależnie od kontekstu.
  • Tani – Opracowanie PWA jest znacznie tańsze niż aplikacja natywna. Możesz także osiągnąć podobny poziom interakcji i nawigacji, ale przy znacznie niższych nakładach początkowych.

Dedykowana aplikacja mobilna sklepu internetowego

Dedykowana aplikacja (aplikacja natywna) to oprogramowanie, które umożliwia klientom przeglądanie i kupowanie produktów w sklepie internetowym. Aplikacje do handlu mobilnego są korzystne zarówno dla właścicieli firm, jak i ich klientów. Marki mogą lepiej angażować swoich klientów w dedykowanej przestrzeni, a klienci mogą personalizować i kontrolować swoje doświadczenia.

Zalety aplikacji mobilnej

Bez względu na to, jaki typ aplikacji e-commerce pasuje do Twojego modelu biznesowego, tworzenie aplikacji e-commerce jest korzystne zarówno dla właścicieli firm, jak i konsumentów:

  • Prędkość – Aplikacje e-commerce zazwyczaj przechowują swoje dane lokalnie na urządzeniach mobilnych, dzięki czemu są szybsze i bardziej przyjazne dla użytkownika niż ich mobilne odpowiedniki internetowe.
  • Widoczność – Posiadanie aplikacji e-commerce na ekranach głównych klientów to duża wygrana. A dzięki funkcjom, takim jak powiadomienia push, sklepy internetowe mogą docierać do swoich klientów, gdziekolwiek się znajdują — nawet jeśli wchodzą w interakcję z inną aplikacją.
  • Personalizacja – Aplikacje e-commerce pozwalają konsumentom spersonalizować zakupy, niezależnie od tego, czy chodzi o zapisanie rozmiaru, czy dodanie ulubionych produktów do listy życzeń. W zamian właściciele firm mogą uzyskać lepszy wgląd w potrzeby swoich klientów i dostosować komunikację w czasie rzeczywistym do konkretnych preferencji klienta.
  • Lojalność wobec marki – Aplikacje e-commerce pozwalają również właścicielom firm zatrzymać klientów i zwiększyć lojalność wobec marki. A ta lojalność ma duże znaczenie: według raportu Gemius użytkownicy aplikacji są trzykrotnie bardziej skłonni do ponownego zakupu. Ponadto stanowią one ponad trzykrotnie większe przychody niż inni kupujący.
infografika: Czy sklep powinien mieć swoją mobilną wersję? Kluczowe zalety posiadania strony mobilnej
Infografika: Kluczowe zalety posiadania strony mobilnej.
pobierz pdf

Na jaką wersję się zdecydować?

W tym momencie możesz się zastanawiać, dokąd to wszystko prowadzi? Możesz chcieć jasnej odpowiedzi na proste pytanie: które z tych podejść do projektowania jest lepsze? Czy mój projekt strony internetowej powinien być responsywny, czy zdecydować się na progresywną aplikację lub aplikację mobilną?

Cóż, niestety, jest to pytanie bez prostej odpowiedzi. A raczej odpowiedź brzmi: zależy to od Twoich potrzeb, biznesu i, szczerze mówiąc, budżetu. Teraz, gdy wiesz, co ma do zaoferowania, możesz rozważyć, które rozwiązanie będzie najlepsze dla Twoich potrzeb.

Korzyści z posiadania dedykowanej wersji mobilnej sklepu www

Potrzebujesz strony internetowej przyjaznej dla urządzeń mobilnych, ponieważ właśnie tam zmierza przyszłość projektowania stron internetowych. Komputery stacjonarne są coraz rzadziej używane, a wraz ze wzrostem wykorzystania smartfonów jest to nowa fala łączności, której musisz być częścią.

Poza kluczowymi zaletami, wymienionymi we wcześniejszym paragrafie, poniżej znajdziesz więcej powodów, dla których strony przyjazne dla urządzeń mobilnych są tak ważne:

  1. Natychmiastowość – Klienci noszą ze sobą smartfony wszędzie i używają ich regularnie do podejmowania natychmiastowych decyzji i szybkich działań. Sama natura zachowań konsumentów wymaga, aby Twoja firma była obecna na urządzeniach mobilnych. Dzięki temu witryna firmy jest łatwo dostępna w dowolnym miejscu i czasie, gdy Twoi klienci Cię potrzebują.
  2. Szybki dostęp – Zazwyczaj odwiedzający witrynę mobilną szukają szybkiego dostępu do Twojej firmy. Niekoniecznie potrzebują wszystkiego, co jest w Twojej głównej witrynie, ale chcą numeru telefonu, formularza kontaktowego, poznać godziny otwarcia itp.
  3. Większa mobilna publiczność – Posiadanie mobilnej strony internetowej sprawia, że Twoja firma jest łatwo dostępna dla rosnącej grupy odbiorców mobilnych. Nie dawaj klientom będącym w biegu pretekstu do szukania gdzie indziej.
  4. Łatwe odczytywanie treści przez użytkowników mobilnych – Znajdowanie odpowiedzi na pytania jest szybkie, łatwe i przyjazne.
  5. Konkurencyjność – Jeśli Twoja konkurencja ma już witrynę przyjazną dla urządzeń mobilnych, potrzebujesz jej jak najszybciej! W przeciwnym razie ryzykujesz utratę klientów na rzecz firm działających na urządzeniach mobilnych.

Podsumowanie

W ostatecznym rozrachunku witryna dostosowana do urządzeń mobilnych to dobra inwestycja, która przy prawidłowym wdrożeniu może przynieść realne zwroty. Niezależnie od tego, czy spojrzysz na to z perspektywy długoterminowej, czy krótkoterminowej, witryny przyjazne dla urządzeń mobilnych są niewątpliwie przyszłością projektowania. Marki, które wcześnie zainwestują w te innowacje, odniosą największy sukces w dłuższej perspektywie.

Sylwestrowy UX

Etap 1 – Badam potrzeby moich gości

Moim celem było zorganizowanie dość dużej imprezy sylwestrowej, na którą zaproszę różnych znajomych (niektórzy się znają, niektórzy nie). Łącznie 21 gości, 13 dorosłych i 8 dzieci w różnym wieku.

W związku z tym postanowiłam dowiedzieć się w niezbyt bezpośredni sposób (jak na badaczkę UX przystało), jakie są oczekiwania gości w stosunku do imprezy.

  • Telefon 1 – Ania, koleżanka z pracy, dwoje małych dzieci (1 i 4 lata)

Ania powiedziała, że jej dzieci chodzą spać o 20:00 i najchętniej zaczęłaby Sylwestra ok godz. 16:00 [przyp. serio? O 16?]. Dzieciaki zasypiają tylko w swoich łóżkach, więc położenie ich w kąciku lub w wannie [przyp. tak, w dawnych czasach rodzice mieszkający w M1 na czas imprezy kładli czasami dzieci w wannie, oczywiście bez wody] nie wchodzi w grę – muszą wrócić do domu.

  • Telefon 2 – Magda, koleżanka ze starej pracy, z mężem, ma psa

Chciałaby zabrać ze sobą psa [przyp. niestety boję się psów]. Pies nie przepada za małymi dziećmi [przyp. czy ktoś pomyśli o mnie?], ale o ile nie będą go dotykać jakoś przeżyje. Koleżanka nie ma dzieci, ale nie przeszkadzają jej cudze, bo pochodzi z dużej rodziny. Jest wegetarianką, najlepiej bawi się przy hitach z lat 90. [przyp. bardzo lubię Magdę, może z tym psem nie będzie tak źle, podobno jest niegroźny].

  • Telefon 3 – Paweł, przyjaciel męża ze szkoły, trójka dzieci (5, 7 i 10 lat)

Chętnie poimprezuje jak za dawnych czasów, jednak przy dzieciach nie będzie przesadzał. Jego dzieci to nocne marki, mogą bawić się do rana [przyp. czy nie zasnę pierwsza?]. Rozważa wzięcie gitary i przypomnienie sobie hitów śpiewanych przy ognisku. Potem oczywiście tańczy przy Kulcie itp.

  • Telefon 4 – Agnieszka i Marek, sąsiedzi, 1 dziecko (3 lata)

Bardzo się cieszą na perspektywę imprezy, mieszkają za ścianą, więc położą dziecko ok 20-21 i ustawią sobie elektroniczną nianię. Zależy im jednak, aby muzyka nie była zbyt głośna, żeby córka za ścianą się nie obudziła [przyp. i tak obudzą ją fajerwerki]. Agnieszka nie je glutenu, ale na pewno przyniesie coś dla siebie do jedzenia.

  • Telefon 5 – Julita, przyjaciółka od serca, ma nowego chłopaka, nie ma dzieci, ma kota

Jak zawsze chętnie do nas wpadnie, ale dopiero po 23:00 bo najpierw idą na imprezę do siostry nowego chłopaka. Liczy na tańce do rana jak za studenckich czasów (oczywiście przy muzyce elektronicznej). Nie przepada za małymi dziećmi, które płaczą.

  • Telefon 6 – Krzysiek, nie pamiętam skąd go znamy, singiel, dusza towarzystwa

Krzysiek pyta, czy to impreza przebierana, ale nawet jeśli nie, to on i tak się przebierze. Jest fanem Marvela, więc będzie to na pewno bohater z któregoś z komiksów [przyp. wolałabym, żeby przebrał się za Timothee Chalamet]. Poza tym jak zawsze szykuje jakieś niespodzianki. Oczywiście nic więcej nie zdradzi [przyp. niespodzianki Pawła mają różne skutki, chociaż zdarzały się i takie spektakularne].

Wykonując tych 6 telefonów dowiedziałam się, czego miałam się dowiedzieć, jednak zrobiło mi się gorąco. Pierwszy raz pojawiła się wątpliwość, czy taka impreza ma szansę wypalić. Do tego trzeba doliczyć mnie i moją rodzinę (2+2). Do odważnych jednak świat należy, znajdę jakieś wspólne cechy moich gości i zorganizuję taką imprezę, aby każdy był zadowolony.

Etap 2 – persona, mapa empatii i co dalej?

W tym momencie powinnam wyodrębnić personę, która pomoże mi w planowaniu i organizowaniu imprezy. Jednak patrząc na moich gości, bardzo trudno będzie tego dokonać [przyp. każdy jest tu arcyważną personą], dlatego pomijam ten etap.

Może mapa empatii? Chyba empatia jest jedyną rzeczą, która nas uratuje.
Z jednej strony widzę, że istotną częścią będą tutaj bolączki i obawy moich gości. Każdy z nich ma dość duże ograniczenia. Ania ma małe dzieci. Pies Magdy nie lubi dzieci…

Głowa do góry! Damy radę!

Kilka etapów strategicznych później. Prototyp w głowie

Przyszedł moment, w którym mam już listę wymagań jakie ma spełniać impreza. Szukam więc dla nich odpowiednich rozwiązań.

  1. Imprezę podzielimy na dwie części: I część dla maluchów zaczyna się o godz. 17:00, bąbelki, które chodzą wcześnie spać trochę się pobawią i udadzą się na spoczynek. II część – dla pozostałych, można się schodzić o dowolnych porach. Będą tańce i hulańce.
  2. Część taneczna – odbywa się w pokoju w głębi mieszkania, aby nie przeszkadzać śpiącej za ścianą córce Agnieszki i Marka.
  3. Część artystyczna Pawła – planowana najszybciej jak się da, przed przyjściem Julity i jej chłopaka.
  4. Pies Magdy – Magda przyjdzie na imprezę ok 20:00, kiedy małe dzieci pójdą już spać [przyp. może ja też powinnam?].
  5. Krzysiek – to część imprezy, której nie mogę zaplanować, tylko liczyć, że wszystko będzie dobrze [przyp. będzie Krzysiu, prawda?].

Oczywiście zostaje kwestia menu i playlisty…

Etap 4 – Testowanie na żywym organizmie

Przyszedł czas na imprezę właściwą. Jest 31 grudnia 2022 roku. Niestety nie miałam możliwości przetestować prototypu imprezy, przystępujemy do testów na żywym organizmie. Tylko zastanawiam się czy włączyć tryb „nie przejmuję się niczym”, czy bacznie obserwować i udoskonalać projekt na bieżąco zgodnie z duchem metodologii RITE…

Godzina 16:30 – jesteśmy gotowi na przyjście Ani z mężem i dziećmi. Dzwoni telefon – nie przyjdą, jedno z dzieci jest chore. Szkoda, mamy jednak więcej czasu na przygotowanie.

Godzina 20:00 – prawie jednocześnie schodzą się Paweł z rodziną, sąsiedzi i Magda z mężem i psem. Przyznam, że nie zapytałam Magdy o rasę jej psa, nie widziałyśmy się już jakiś czas. Okazało się, że to dog niemiecki [przyp. nie było większych? Ciarki przechodzą mi po plecach. Spokojnie, spokojnie…].

Paweł orientuje się, że nie wziął gitary [przyp. ufff…]. Mimo naszych zapewnień, że nic się nie stało, postanawia ją zdobyć. Okazuje się, że nasz sąsiad posiada starą gitarę… Chwilę później Magda próbuje zabić mnie wzrokiem, ale zgrabnie patrzę w drugą stronę.

Etap 5 – Niech się dzieje co chce

Dzieci nadal się bawią i biegają, zdążyły już rozbić 2 miski, wgnieść chrupki w dywan… Pies mimo wszystko wygląda na zadowolonego, podjada smakołyki, które spadną ze stołu [przyp. dobrze, że nie zjadł jeszcze mnie].

Chwilę po 21 Krzysiek wpada Krzysiek z niespodzianką. Niespodzianką jest grupka jego znajomych, wszyscy przebrani za postaci Marvela, do tego ktoś przyszedł z psem. Pies Magdy zaczyna się denerwować, psy szczekają na siebie…

I nagle… budzę się, zlana potem. To był tylko i na szczęście sen.

infografika: Sylwestrowy zawrót głowy
Infografika: Sylwestrowy zawrót głowy.
pobierz pdf

Pisząc ten tekst, nie wiem jeszcze jak spędzę sylwestra. Wy czytacie go już po Nowym Roku. Jedno wiem, że w życiu nie zawsze trzeba wszystko planować.

Wam życzę dużo spontaniczności, spokoju i zdrowia w Nowym Roku.

Trendy w projektowaniu stron internetowych – co oznaczają dla naszej strony?

Strona internetowa – czy musi być tworzona zgodnie z trendami?

Wraz z ciągłym rozwojem sieci, samo projektowanie stron internetowych stało się bardziej wyrafinowane. Istnieją standardy użyteczności i najlepsze praktyki, które pomagają nam tworzyć zarówno dobrze zaprojektowane, jak i funkcjonalne strony internetowe. Jednak przed przystąpieniem do całkowitego przeprojektowania witryny ważne jest, abyś najpierw rozważył jej cel.

  • Pomyśl o swojej branży

Każda branża ma swój własny styl. Inspirowanie się projektem strony internetowej niezależnego fotografa i próba powielenia go w firmie e-commerce może nie okazać się tak skuteczna, jak myślisz. Projekt jest ważny, ale wrażenia użytkownika są ważniejsze.

  • Co robią Twoi konkurenci?

Możesz przeprowadzić proste badania stron na kilku swoich konkurentach, aby ustalić „normę” witryny w swojej branży, co Twoim zdaniem działa i co Twoim zdaniem można poprawić. Możesz także przeprowadzić badania ze swoimi klientami, aby dowiedzieć się, czego potrzebują.

  • Weź pod uwagę całe doświadczenie marki

Posiadanie dobrej strony internetowej jest bardzo ważne dla Twojej firmy. Jeśli Twoja witryna jest łatwa w nawigacji, zapewnia użytkownikowi szybką i wydajną odpowiedź na zapytanie i widzisz świetny współczynnik konwersji, to na pewno robisz to dobrze. Jednak efekt biznesowy to coś więcej niż tworzenie dobrej strony internetowej. Aby zwiększyć współczynnik konwersji, będziesz chciał zwiększyć swoje wysiłki w zakresie marketingu cyfrowego, wprowadzając marketing w mediach społecznościowych, działania SEO, techniki marketingu e-mailowego lub kombinację ich wszystkich. Silna witryna poparta dobrymi praktykami marketingowymi pomoże określić Twoją drogę w branży.

infografika: Trendy w projektowaniu stron internetowych. Co oznaczają dla naszej strony?
Infografika: Trendy w projektowaniu stron internetowych. Co oznaczają dla naszej strony?
pobierz pdf

Czy warto śledzić modę w projektowaniu stron internetowych?

Projektowanie stron internetowych, bardziej niż jakikolwiek inny zawód, podlega ciągłym zmianom. Niezależnie od tego, czy chodzi o oprogramowanie, na którym polegamy, treści na naszych stronach internetowych, czy stosowane przez nas techniki projektowania. Wszystko podlega ciągłym zmianom, a częścią pracy projektanta jest pilnowanie aby nie przegapić ważnych zmian.

Czasami to wszystko może wydawać się przytłaczające. Rozglądanie się za najnowszymi i najlepszymi projektami może znajdować się na końcu listy rzeczy do zrobienia. Ale nadal jest to ważny krok w utrzymaniu kreatywności i ciągłym doskonaleniu warsztatu.

Kiedy serwis trzeba dostosować do zmieniających się trendów?

Nie wystarczy samo śledzenie trendów projektowych, projektanci powinni również wiedzieć, jak je wdrażać w swoich projektach. Klienci muszą otrzymać dokładnie to, czego szukają, nawet jeśli zmodyfikujesz jakiś istniejący trend. Projektanci powinni być innowacyjni, nawet jeśli chodzi o kopiowanie pomysłów innych. Powinni wiedzieć, jak zmodyfikować istniejący trend i dopasować go do swoich projektów.

Ogromnym błędem byłoby zrobienie czegoś, co klientowi się nie podoba lub czego nie potrzebuje dlatego musisz uważnie słuchać tego, co mówią klienci. Realizacja trendów projektowych powinna zawsze podążać za wymaganiami klientów. Krótko mówiąc, o trendach należy wiedzieć i podążać za nimi tylko wtedy, gdy rozwiązuje problem docelowych odbiorców.

UX a trendy – jak zmiany w trendach wpływają na UX?

Rozpoczynając pracę nad nowym projektem często zaczynamy od przyjrzenia się trendom projektowym. Przychodzą na myśl neumorfizm i glassmorfizm. Kilka lat temu wszystko kręciło się wokół płaskiej konstrukcji.

Rzecz w tym, że często przyjmujemy wygląd i styl znaleziony w trendach, nie zastanawiając się, czy jest to odpowiednie w danej sytuacji. Czy Twoi użytkownicy zrozumieją, co widzą? Czy te przyciski wyglądają jak elementy interaktywne? A może użytkownik nie rozumie, że sekcja może się przewijać? Tracimy wizualną hierarchię, próbując podążać za trendami projektowymi. Dostępność staje się również problemem.

Aby projekt wspierał user experience (UX) trzeba najpierw  dobrze przemyśleć nasze decyzje wizualne, upewniając się, że są one oparte na badaniach, dochodzeniach i faktach. Niestety nie znając zasad projektowania możemy skończyć  z zupełnie odwrotnym efektem niż zamierzony.

Jak często trendy w projektowaniu stron ulegają zmianom?

Zmiany w trendach dokonują się nieustannie. Nie oznacza to jednak, że jesteśmy w stanie zobaczyć zmiany na bieżąco, albo przewidzieć ich kierunek. Na kształt trendów ma bowiem wpływ wiele czynników. Trendy zależą od decyzji globalnych marek, od projektów nowych produktów, od głośnych kampanii marketingowych i społecznych, od wydarzeń w świecie mediów i kultury.

Jest to jednak tylko część prawdy, bo nie uwzględnia oczekiwań konsumentów. Nie każda propozycja, która pojawia się na rynku spotyka się z dobrym odbiorem. A tylko niektóre zdobywają szeroką popularność i mają szansę stać się trendem, a potem nowym standardem. I nie ma przepisu na to, jak trafić w gusta odbiorców. Tym bardziej, że stale zachodzi zmiana pokoleniowa.

Z dobrym przybliżeniem można jednak przyjąć, że trendy zmieniają się w cyklu rocznym. Jeśli chcesz dowiedzieć się co przestaje być modne, a co będzie na czasie w ciągu najbliższych miesięcy wystarczy śledzić publikacje branżowe. Najlepiej między listopadem, a lutym. Nie podaję żadnych adresów serwisów. Jeśli chcesz sprawdzić co w trawie piszczy zapytaj Google’a.

Czas na odświeżenie Twojej strony internetowej?

Zamów projekt nowoczesnej witryny www

Wypełnij formularz, skontaktujemy się z Tobą

Czy nowy trend oznacza dla nas zmianę serwisu?

Mam nadzieję, że po lekturze tekstu znasz odpowiedź na to pytanie. Zmiana trendu w projektowaniu stron internetowych nie oznacza konieczności zmiany serwisu. Najważniejsze jest dostosowanie do oczekiwań i przyzwyczajeń użytkowników. I to Twoich użytkowników, którzy odwiedzają Twoją witrynę w określonym celu. Poszukując konkretnego produktu lub usługi.

Z drugiej strony warto pamiętać, że Twoja strona, Twój sklep nie jest jedynym miejscem odwiedzanym przez klienta w Internecie. Jest wręcz przeciwnie. Twój odbiorca większość czasu spędza poza Twoim serwisem. A ponieważ konsumenci cyfrowych treści nie bardzo lubią się uczyć nowego, warto nie „odstawać” zbytnio od spodziewanego wyglądu i rozwiązań funkcjonalnych.

Mówiąc inaczej: nie musisz korzystać z każdego nowego trendu, ale jeśli pominąłeś ich kilka, popatrz czy Twoja strona nie trąci myszką.

Podsumowanie


Istnieje wiele powodów, dla których zarówno projektanci, jak i klienci powinni śledzić trendy projektowe. Powinni wiedzieć co jest modne i co się użytkownikom podoba w najnowszych trendach, ale to nie znaczy, że muszą się ich ściśle trzymać.

Ważne jest, aby Twoja strona internetowa, zarówno spełniała oczekiwania klientów i wyróżniała się na tle konkurencji oferując coś innego. Bądź na bieżąco z najnowszymi trendami w swojej branży i staraj się, aktualizować witrynę zgodnie z potrzebami Twojej firmy, a przede wszystkim Twoich klientów.

Indywidualne wywiady pogłębione (IDI) – co nam dają?

Czym jest wywiad pogłębiony – IDI?

Indywidualny wywiad pogłębiony, czyli w skrócie IDI (z ang. Individual In-depth Interview), to klasyczna metoda badań społecznych. Najprościej mówiąc jest to rozmowa badacza z badanym na jakiś określony temat.

Rozmowa ma charaktery dość swobodny, jednak skupia się wokół celu badania i pytań badawczych, na które badacz chce znaleźć odpowiedzi. Wywiad pozwala na poznanie opinii, preferencji, oczekiwań i doświadczeń rozmówców w określonym kontekście. Co ważne, poznajemy też język, którym rozmówcy się posługują. To wszystko stanowi podstawę do wnioskowania, jakie są potrzeby odbiorców naszego produktu/usługi.

Jaki jest cel indywidualnych wywiadów pogłębionych?

Celem indywidualnych wywiadów pogłębionych jest uzyskanie informacji na eksplorowany temat. Badacz podczas rozmowy zapoznaje się z obszarem, o którym rozmawiają. Dzięki postawom badanego i językowi, jakim się posługuje, badacz może zapoznać się z tematem, a następnie wyciągnąć wnioski.

Wywiady pogłębione są również podstawą do stworzenia person, które będą potem drogowskazem podczas prac i decyzji projektowych. Czasami po zrealizowaniu wywiadów okazuje się, że person jest więcej niż jedna. Jest to cenna dla projektantów informacja, dzięki której mogą zdecydować, która persona będzie główną, a która poboczną (o personach pisaliśmy już na naszym blogu w artykule Czym jest persona i jak ją stworzyć? – darmowy przykład).

Wywiad pogłębiony może przynieść jednocześnie wiele niespodzianek. Rozmowa z badanym może wydobyć na światło dzienne nowe zagadnienia, których wcześniej nie rozważaliśmy, albo o których nie wiedzieliśmy eksplorując daną tematykę.

Kiedy warto stosować IDI (Individual In-depth Interview)?

Pamiętajmy, że IDI nie są „lekiem na całe zło”. Przystępując do badań potrzeb user experience należy odpowiednio dobrać metodę badawczą. Oznacza to, że metodę należy dostosować do problemu, a nie odwrotnie. Dowiemy się tego odpowiadając sobie na pytania dotyczące celu badania, etapu na jakim jest projekt, dostępnego budżetu, czasu i innych zasobów, a także oczekiwań w stosunku do badania.

Wywiad pogłębiony warto zastosować, gdy eksplorujemy jakiś temat – chcemy zgłębić tematykę i znaleźć obszary, do których być może nie mogliśmy wcześniej dotrzeć ani ich dostrzec.

IDI będzie również dobrym rozwiązaniem, jeśli rozmawiamy o tematach drażliwych, np. o zarobkach. Badanym na pewno dużo łatwiej będzie rozmawiać z jedną osobą, która jest ekspertem niż w gronie nieznanych sobie osób podczas tzw. focusu.

Na czym polega badanie IDI?

Jak już wspomniałam, badanie IDI to rozmowa, która wynika z wcześniej postawionego celu badawczego i pytań badawczych. Jest to metoda częściowo ustrukturyzowana. Oznacza to, że badacz korzysta ze scenariusza, ma wstępną listę pytań, stanowiących punkt wyjścia i podstawę do rozmowy. W związku z tym, że rozmowa ma charakter swobodny badacz może dopytywać. Może także dostosowywać tor rozmowy do zmieniających się warunków. Jest to przydatne np. gdy zauważył wcześniej niezidentyfikowany obszar, o który chciałby dopytać.

Badanie odbywa się w kameralnym gronie, badacza i badanego, badacza może ewentualnie wspierać osoba robiąca notatki (obserwator i rekorder). Poza tym rozmowa powinna odbywać się na neutralnym gruncie, tak, aby obie strony miały komfort i swobodę. Załóżmy, że na potrzeby usługi/produktu firmy, dla której pracujemy, rozmawiamy z młodymi rodzicami o tym, jak wygląda podział obowiązków w ich domach. Rozmowa przeprowadzona bezpośrednio w domu badanego, a co gorsza, w obecności partnera/partnerki może niewiele wnieść do badania, dlatego ważne jest zadbanie o komfortowe warunki.

Indywidualny wywiad pogłębiony, jak i wiele innych metod badawczych, jest zazwyczaj nagrywany. Wszystko po to, aby następnie przygotować transkrypcje lub dokładne notatki, a także, aby móc wrócić do danego zagadnienia i przeanalizować je ponownie.

Jeśli badanie odbywa się w warunkach laboratoryjnych, zdarza się, że rozmowę mogą obserwować zza lustra weneckiego obserwatorzy, o czym należy oczywiście rozmówcę poinformować.

Badania mają to do siebie, że zajmują czas, dlatego należy pamiętać o wynagrodzeniu dla badanego za udział w wywiadzie. Zazwyczaj są to wynagrodzenia pieniężne, czasami bony do znanych sklepów.

Metodologia wywiadu pogłębionego

Metodologia wywiadu pogłębionego (IDI) polega na przeprowadzeniu indywidualnych, wnikliwych rozmów z uczestnikami badania na określony temat. Badacz kieruje pytania badawcze w sposób swobodny, skupiając się jednocześnie na celu badania i dążąc do zgłębienia opinii, preferencji, oczekiwań oraz doświadczeń rozmówcy w określonym kontekście.

Jest to metoda, która umożliwia poznanie języka, jakim posługują się respondenci, co stanowi istotną podstawę do wnioskowania na temat potrzeb odbiorców produktu/usługi. Metodologia ta przeważnie składa się z trzech głównych części: wprowadzenia, właściwej części badania opartej na scenariuszu oraz zakończenia, podczas którego badacz upewnia się, że rozmówca miał możliwość wyrażenia wszystkich swoich myśli oraz dziękuje mu za udział w badaniu

Ile trwa indywidualny wywiad pogłębiony?

Wywiad IDI zazwyczaj trwa około godziny. Jest to na tyle dużo czasu, że sprawny badacz poprowadzi rozmowę uzyskując odpowiedzi na nurtujące go kwestie. Poza tym dłuższa rozmowa mogłaby być zbyt męcząca dla obu stron.

Indywidualny wywiad pogłębiony wady i zalety

Indywidualne wywiady pogłębione jak wszystko mają swoje wady i zalety. Planując działania z zakresu badań potrzeb dobrze je rozważyć i podjąć decyzję uwzględniając zarówno ich korzyści jak i ograniczenia.

Zalety wywiadów pogłębionych

Wywiady pogłębione mają niewątpliwie dużo zalet. Są wprawdzie metodą wymagającą, ale mogą wnieść wiele do całego procesu projektowego. Wymieńmy najważniejsze z zalet IDI:

  • Elastyczność – wywiady indywidualne są elastyczne w kwestii tego, kiedy umówimy się z respondentem i w jakich warunkach będziemy z badanym rozmawiać.
  • Swoboda – pozwala na dopytanie o nurtujące badacza pytania i zmianę toru rozmowy, jeśli okaże się, że pojawiły się nowe i lepiej pasujące do celu badania kwestie.
  • Indywidualność – dzięki rozmowie z jednym badanym ograniczamy wpływ grupy (np. innych badanych) na deklaracje i wypowiedzi badanego.
  • Wrażliwe tematy – podczas rozmów jeden na jeden badany chętniej podzieli się swoimi doświadczeniami związanymi w tematami wrażliwymi, o ile oczywiście badacz wzbudzi w rozmówcy zaufanie.

Wady wywiadów pogłębionych

Indywidualne wywiady pogłębione mają również pewne wady, które mogą wpłynąć na to, czy będzie to odpowiednia metoda do projektu, nad którym pracujesz.

  • Czas – wywiady pogłębione wymagają dużego nakładu czasu. Czas zajmują nie tylko same wywiady, ale przygotowanie się do nich i późniejsza analiza.
  • Koszt – za dużym nakładem czasu idzie również wysoki koszt realizacji. Poza kosztem, jakim jest praca badaczy, należy uwzględnić wynagrodzenie dla badanych.
  • Deklaratywność – wywiady pogłębione opierają się na deklaracjach badanych, co oznacza, że prawdziwe potrzeby czy pobudki mogą różnić się od tych deklarowanych.
  • Trudność analizy – wynikiem IDI są godziny nagrań, setki stron transkrypcji, które trzeba poddać dokładnej analizie, co jest zajęciem równie trudnym, jak żmudnym.
  • Niereprezentatywność – indywidualne wywiady pogłębione to metoda jakościowa, dlatego wniosków z badań nie przekładamy na większą populację.
infografika: Indywidualne wywiady pogłębione (IDI). Jakie są cechy i dobre praktyki IDI
Infografika: Indywidualne wywiady pogłębione (IDI). Jakie są cechy i dobre praktyki IDI.
pobierz pdf

Scenariusz indywidualnego wywiadu pogłębionego

Indywidualny wywiad pogłębiony jest metodą elastyczną i swobodną, jednak badacz porusza się według pewnego schematu, w ramach którego operuje wcześniej przygotowanym scenariuszem badania. Schemat rozmowy wygląda następująco:

1. Wprowadzenie

  • Przedstawiamy się badanemu opowiadając kilka (dosłownie kilka) słów o sobie.
  • Omawiamy cel spotkania i tego jak będzie przebiegało.
  • Informujemy o odpowiednich sprawach prawnych (np. uzyskujemy zgodę na nagrywanie).

2. Właściwa część badania – oparta o scenariusz

Scenariusz opiera się na wcześniej ułożonych pytaniach. Układając je, należy pamiętać o odpowiedniej kolejności, tzn. najpierw pytamy o ogóły, a potem dopytujemy o szczegóły.

Pytania powinny być pytaniami otwartymi. Zamiast pytać: „Czy jeździsz do pracy samochodem czy autobusem?”, zapytajmy: „W jaki sposób poruszasz się po mieście?”. Zadając pytanie w ten sposób możemy dowiedzieć się wielu rzeczy przy okazji i drążyć temat dalej.

Ważne, aby zadając pytania nie sugerować badanemu odpowiedzi. Pytając o jego upodobania na jakiś temat unikajmy pytań: „Jak podoba Ci się…” ponieważ to sugeruje, że dana rzecz mu się podoba. Pytając „Co sądzisz o…” z pewnością dowiemy się znacznie więcej.

Dobrze sprawdza się prośba o wymienianie/listowanie pewnych rzeczy („W jakich miejscach robisz zakupy…Wymień proszę”) czy opowiadanie o kolejności wykonywanych procesów/czynności („W jaki sposób zapisujesz się na wizytę do…Opisz proszę krok po kroku”).

Jako badacz dużo dowiesz się prosząc badanego o porównanie dwóch rzeczy, ale też o to, aby opowiedział o czymś laikowi. Ciekawe odpowiedzi mogą przynieść pytania projekcyjne, np. „Jak mogłaby wyglądać organizacja …. za 2 lub 3 lata?”

3. Zakończenie

  • Upewniamy się, że badany powiedział wszystko co chciał i zapewniamy, że jesteśmy gotowi również rozwiać jego wątpliwości dotyczące wywiadu
  • Dziękujemy za udział w badaniu
  • Pamiętajmy o wynagrodzeniu

Podsumowanie

Badania UX są niezwykle istotną częścią procesu projektowania UX. Jeśli budżet i czas pozwalają na włączenie badań w pracę nad projektem, warto pochylić się nam tematem. Warto znaleźć taką metodę, która będzie optymalna dla rozwoju projektu. Wnioski z przeprowadzonych badań mogą być zaskakujące i w dłuższej perspektywie przynieść firmie wiele korzyści.

Wiemy jednak, że nie zawsze są warunki pozwalające na realizację badań. Mimo, że wywiady IDI są jednymi z bardziej pracochłonnych i czasochłonnych metod, warto myśleć o problemie badawczym do do rozwiązania. Warto rozmawiać z ludźmi, dopytywać i docierać do miejsc, które pokażą inną rzeczywistość, niż ta, w której się poruszamy.

Wpływ UX na biznes – jak UX przekłada się na biznes?

Czym jest UX?

Najkrócej mówiąc user experience, czyli użyteczność to suma wrażeń z kontaktu użytkownika z witryną www, sklepem internetowym lub aplikacją mobilną. Na wrażenia te składają się estetyka, czytelność, łatwość poruszania się po stronie itp. Suma tych wrażeń sprawia, że odbiorca pozostaje na stronie albo ją porzuca. Więcej o tym czym jest UX przeczytasz w naszym wpisie tłumaczącym zagadnienie User Experience.

Wpływ UX na biznes

Jak napisałem we wstępie, właściwie nikt nie wątpi w sens projektowania użytecznych serwisów internetowych. Wiele witryn oraz aplikacji jest modyfikowanych i rozwijanych pod kątem poprawy UX.

Jako projektanci dokładamy starań, by zaspokoić oczekiwania użytkowników stron. Modelujemy interfejsy tak, aby były intuicyjne, wygodne i nie wymagały uczenia się ich obsługi.

Spełniamy w ten sposób oczekiwania właścicieli stron. Sprawiamy, że użytkownicy odnajdują w witrynach to czego szukają, robią na nich to, po co przyszli. Kupują, czytają, pytają, zamawiają, piszą i… płacą. Kartą, gotówką albo swoimi danymi osobowymi.

Korzyści UX dla biznesu

Intuicyjnie korzyści biznesowe z poprawy użyteczności witryny są stosunkowo proste do zlokalizowania. Większy odsetek klientów wchodzących do sklepu dociera do koszyka i dokonuje zakupu. Wydłuża się średni czas pobytu internauty na stronie. Zwiększa się liczba zapytań ofertowych. Spada liczba zapytań dotyczących obsługi strony lub realizacji procesu zakupu lub obsługi reklamacji. Każdy z przykładów wiąże się bezpośrednio ze wzrostem przychodów lub obniżeniem kosztów obsługi klientów.

Jednak intuicja podpowiada tylko, że wpływ zmian UX na biznes jest pozytywny. Nie mówi nic o skali i jakości tego wpływu. Nie mówi ile warto wydać na przeprojektowanie serwisu, ani jak zmiany przełożą się na wynik finansowy.

Czym jest ROI?

Do „twardej” oceny jakiegokolwiek zjawiska przydatne są konkretne wskaźniki. Jednym z nich jest Return Of Investment, o którym więcej przeczytasz we wpisie „ROI – jak szacować korzyści i zwrot z inwestycji?”.

Przypominając w skrócie, wskaźnik ten jest ilorazem odniesionych korzyści i poniesionych kosztów. Gdy ma wartość 0, oznacza, że na inwestycji ani nie zarobiliśmy, ani nie straciliśmy. Im jest większy, tym wydatki, których efektywność badamy, były bardziej opłacalne.

ROI z UX – jak zmierzyć efekty UX?

Wzór do policzenia ROI jest banalnie prosty. Ale nie oznacza to, że za chwilę skontaktujesz się ze swoją księgowością i poznasz wpływ UX na biznes. Zanim podzielisz przez siebie dwie liczby musisz ustalić jakie one są. A to już bardziej skomplikowana sprawa.

Określanie kosztów działań UX

Pierwszym zagadnieniem jest określenie kosztów. Co do nich należy? Oczywistymi składnikami są: zlecony firmie zewnętrznej audyt UX, projekt wdrożenia zmian wynikających z rekomendacji i samo wdrożenie. Ale nie jest to wszystko! Trudniejszymi do wyceny są koszty własnych analiz, wyboru partnerów UX (audytora, designera, dewelopera) oraz udziału pracowników firmy w działaniach związanych z poprawą użyteczności.

Jeszcze trudniejsze jest oddzielenie kosztów związanych z UX od wydatków wynikających z innych, równolegle wdrażanych w firmie projektów. Na przykład prowadzonego rebrandingu, albo rozszerzania oferty sklepu internetowego o nowe grupy produktów.

Określanie korzyści z działań UX

Tu sprawa także jest dosyć złożona. Aby policzyć ROI, musimy znać konkretną wartość wyrażoną w złotówkach. Teoretycznie wystarczy więc policzyć różnicę w wielkości przychodów (na przykład miesięcznych) przed wprowadzeniem modyfikacji UX strony internetowej i po wdrożeniu zmian.

Tyle, że nawet dla sklepu internetowego sprawa wcale nie jest tak prosta. Nie wspominając o firmach mających inny, nie czysto handlowy, profil działalności.

Głównym problemem jest rozróżnienie wpływu na wielkość przychodów projektu UX i innych czynników. A lista takich czynników jest długa: ogólna sytuacja na rynku, działania konkurencji, prowadzone działania marketingowe (własne i konkurencji), zmiany cen (zmiany sezonowe, zmiany cenników) itp.

Przykład wyznaczania korzyści z działań UX

Dlatego wyznaczając korzyści z działań UX często posługujemy się wskaźnikami pośrednimi. Wskaźniki te same z siebie nie mają wartości pieniężnej, jak choćby liczba klientów, czy wskaźnik konwersji, ale dają się na pieniądze przeliczyć. Na czym to polega? Przykładowo, jeżeli po poprawkach sklepu liczba klientów w skali roku zwiększyła się o 100, a średni przychód z klienta to 350 złotych, łączna korzyść wynosi 35.000. I tę wartość możemy odnieść do wyliczonych wcześniej kosztów, aby uzyskać ROI.

infografika: Wpływ UX na biznes. ROI jako metoda oceny wpływu.
Infografika: Wpływ UX na biznes. ROI jako metoda oceny wpływu.
pobierz pdf

ROI w praktyce

Warto zauważyć, że obliczenie ROI wymaga danych. Im więcej mamy danych dotyczących działania firmy i im bardziej są szczegółowe, tym bardziej wiarygodny będzie wynik. Jednak nawet jeśli nie gromadzimy w sposób zorganizowany wielu danych warto przeprowadzić obliczenia przybliżone.

Na etapie planowania wystarczy przyzwoite oszacowanie kosztów – choćby w takim stopniu, żeby stwierdzić, że skala wydatków nie przekroczy możliwości budżetowych.

Sprawdzając opłacalność zakończonych działań warto oczywiste wydatki związane z poprawą UX (faktura audytora, koszt projektu, koszt dewelopmentu) odnieść do zmiany wielkości przychodów ze sprzedaży.

Jeżeli wyznaczenie ROI jest trudne, czy w ogóle warto je liczyć. Zdecydowanie tak! Może nie z dokładnością do trzech liczb po przecinku i przypisywaniem czasu pracy załogi do zadań dokładnością do minuty. Ale zdecydowanie warto szacować opłacalność modyfikacji UX przed przystąpieniem do zmian i sprawdzać po zakończeniu projektu. Po to by racjonalnie wydawać pieniądze i mieć pewność, że poprawa użyteczności przyniosła efekty.

Podsumowanie

Intuicyjnie czujemy, że wpływ UX na biznes jest bardzo istotny. Użyteczna strona przyciąga odbiorców, zaś błędy UX powodują często porzucenie witryny. Dobrze jednak znać konkretne wskaźniki mówiące o opłacalności działań UX.

Najprostszym wskaźnikiem, który możemy zastosować jest ROI. Ma on zastosowanie zarówno w fazie planowania jak i do weryfikacji efektywności projektu po jego zakończeniu.

Pomimo trudności z precyzyjnym wyznaczeniem danych do obliczenia ROI warto dokonać choćby szacunków, które potwierdzą pozytywny wpływ poprawy użyteczności na wyniki finansowe.

Nagłówki strony internetowej – jak projektować skuteczne nagłówki?

Co to jest nagłówek strony internetowej?

Nagłówek witryny to górna sekcja strony internetowej. W nowoczesnym designie cała przestrzeń nad zakładką strony głównej jest uważana za nagłówek. Będąc strategiczną częścią strony, którą ludzie widzą w pierwszych sekundach ładowania witryny, nagłówek działa jak rodzaj zaproszenia. Powinien zawierać podstawowe informacje, aby użytkownicy mogli zrozumieć w ciągu kilku sekund, co oferuje witryna.

Niektórzy projektanci tworzą osobne nagłówki dla różnych sekcji witryny. Na przykład możesz zrobić duży nagłówek dla strony głównej i zostawić mały pasek dla innych stron. Ale zachowaj spójność. Projekt nagłówka na stronie wewnętrznej powinien być skróconą wersją nagłówka na stronie głównej. To dobra praktyka projektowania stron internetowych.

Dlaczego nagłówki są ważne?

Dlaczego nagłówek jest tak ważny? Zasadniczo to twoje powitanie i uścisk dłoni z klientem. Czas i miejsce na zrobienie dobrego pierwszego wrażenia. Jest to część witryny, którą użytkownicy zauważą na początku kontaktu i to ona może sprawić, że zdecydują się zostać lub nie. To miejsce, w którym odwiedzający zapoznaje się z Twoją marką i rozpoczyna podróż po witrynie.

Celem nagłówka jest poprawa interakcji użytkowników z Twoją witryną, więc wybierając elementy, które chcesz w nim umieścić, rozważ podkreślenie części witryny, które chcesz najbardziej wyróżnić. Ta przestrzeń powinna zachęcać użytkowników do dalszego przeglądania treści zgodnie z ustaloną przez Ciebie hierarchią.

Zła nawigacja w nagłówku powoduje, że użytkownicy opuszczają stronę. Nagłówek ma również znaczący wpływ na SEO, ponieważ to tam umieszczane są najważniejsze linki i wiadomości.

Nagłówki witryn pełnią trzy podstawowe funkcje:

  • Informacja. Informowanie użytkownika o tym, czym zajmuje się Twoja marka.
  • Nawigacja. Pomoc w kierowaniu odwiedzających na inne strony.
  • Atrakcyjność wizualna. Przyciąganie uwagi użytkownika.
infografika: Nagłówki strony internetowej - jak projektować skuteczne nagłówki
Infografika: Nagłówki strony internetowej – jak projektować skuteczne nagłówki.
pobierz pdf

Jak powinien wyglądać skuteczny nagłówek strony internetowej?

Nic nie ogranicza Twojej kreatywności, jeśli chodzi o projektowanie sekcji nagłówka. Nagłówek witryny to obszar otwarty na szerokie pole kreatywnych decyzji projektowych, które powinny być łatwe do zapamiętania, zwięzłe i wartościowe. Przejdźmy przez kilka głównych punktów, o których warto wiedzieć zanim rozpoczniemy pracę nad nagłówkiem.

Pamiętaj o swoim głównym celu

Jaki jest pierwszy krok, który chciałbyś, aby zrobili odwiedzający po wejściu na Twoją stronę? Gdzie chciałbyś, żeby poszli? Do jakich informacji potrzebują szybkiego dostępu? Zanim zaczniesz projektować nagłówek witryny, powinieneś dobrze zrozumieć, co chcesz osiągnąć za pomocą swojej witryny jako całości i jak nagłówek spełni to oczekiwanie. Jeśli nie jesteś do końca pewien, jaka jest wyjątkowa propozycja wartości dowiedz się więcej z naszego wcześniejszego artykułu o Value Proposition.

Dołącz wyraźne wezwanie do działania

Wezwanie do działania (Call To Action – CTA) w nagłówku nie powinno być dziwaczne i wprowadzające w zakłopotanie, aby odwiedzający nie wiedzieli, co się stanie po kliknięciu. Proste wezwania do działania, takie jak „Zarejestruj się za darmo”, „Rozpocznij bezpłatny okres próbny” lub „Rozpocznij za darmo”, załatwią sprawę.

Nie przeciążaj projektu nagłówka swojej strony

Twoja witryna powinna zawierać informacje, ale zbyt dużo tekstu lub skomplikowanych elementów wizualnych może przytłoczyć lub zdezorientować użytkownika. Najlepsze nagłówki na stronie powinny pomóc odwiedzającym szybko zdecydować, czy Twoja oferta jest dla nich, czy nie, a słowo kluczowe to „szybko”.

Nie bądź też zbyt minimalistyczny

Zbyt mało tekstu lub zbyt minimalistyczna oprawa wizualna też nie działa dobrze. Jak pokazują badania (https://blog.hubspot.com/marketing/chartbeat-website-engagement-data-nj), masz tylko około 15 sekund, aby przyciągnąć uwagę użytkowników, więc jeśli będą musieli zbyt ciężko pracować, aby dowiedzieć się, co robisz lub jak poruszać się po interfejsie, stracisz ich (i to prawdopodobnie na dobre).

Użyj wyraźnych, czytelnych czcionek

Ozdobne czcionki mogą być modne, ale jeśli chodzi o projekt nagłówka witryny, powinieneś wybrać taki, który jest przejrzysty i łatwy do odczytania. Czcionka ma znaczenie! Lub czcionki, sugerujemy użycie co najmniej dwóch, aby uzyskać dobry kontrast typograficzny i atrakcyjność wizualną. Wybierz czcionki, które są czytelne i współpracują z ogólną tożsamością marki. Tekst w nagłówku powinien pomóc odbiorcom, więc jeśli odwiedzający go nie rozumieją, oznacza to, że nie spełnia swojego zadania.

Czas na nową odsłonę Twojej strony www?

Zamów bezpłatną wycenę projektu UX/UI

Wypełnij formularz, skontaktujemy się z Tobą

Użyj zdjęć lub ilustracji

Nagłówek strony internetowej oferuje wiele możliwości wizualnych, więc rozważ dodanie odrobiny dodatkowego stylu poprzez włączenie ilustracji lub zdjęcia do projektu nagłówka. Obrazy powinny odzwierciedlać przesłanie marki, Twoją koncepcję, produkty lub usługi, które zamierzasz oferować.

Użyj efektów, aby zaangażować odwiedzających

Możesz wykorzystać kolor hovera i inne efekty, aby utrzymać zaangażowanie i stymulację wizualną odwiedzających. to także dobry sposób na pokazanie całościowego wizerunku firmy. Wykorzystanie animacji w projektowaniu stron internetowych może pomóc przyciągnąć uwagę, zaprezentować Twój produkt/usługę i wiele więcej. Może również sprawić, że ogólny projekt witryny będzie bardziej niezapomniany.

Optymalizacja nagłówków pod pozycjonowanie

Termin „nagłówek strony internetowej” odnieść można również do znaczników języka HTML stosowanych do budowania struktury i hierarchii tekstu prezentowanego na stronie. Użycie tego typu nagłówków ma pozytywny wpływ na czytelność witryny. Ułatwiając odbiorcy skanowanie istotnych fraz nagłówki ułatwiają poruszanie się po stronie zgodnie z założeniami przyjętymi przez projektanta.

Nagłówki organizujące tekst mają też wpływ na efekt działań SEO. Opinie specjalistów na temat wpływu na działania algorytmu stosowanego przez Google są różne. Wszyscy są jednak zdania, że warto zadbać o prawidłową spójną strukturę nagłówków. Choćby po to, aby ułatwić działanie robotom zbierającym dane dla wyszukiwarki.

Więcej informacji na temat stosowania nagłówków w rozumieniu HTML znaleźć można na blogu firmy Octamedia we wpisie SEO — Poznaj zasady i podstawy dla początkujących [poradnik].

Podsumowanie

Nagłówek jest jak wizytówka strony internetowej. Powinien być wyjątkowy, łatwy do odczytania i natychmiast przyciągać uwagę. Dlatego projektując stronę internetową, postępuj zgodnie z wskazówkami z tego artykułu, aby uzyskać idealny nagłówek strony internetowej.

Ponadto konieczne jest regularne wprowadzanie zmian, aby witryna była świeża i aktualna. Projekt nagłówka może wyglądać fantastycznie, jednak nie będzie to miało znaczenia jeżeli będzie przestarzały.

UX w bankowości. Projektowanie user experience dla branży finansowej

Dlaczego FinTech UX design jest istotny?

Według raportu netbank przygotowanego przez Związek Banków Polskich w 2022 roku liczba osób mających dostęp do bankowości elektronicznej wyniosła ponad 21 mln (https://www.zbp.pl/raporty-i-publikacje/raporty-cykliczne/raport-netbank). Co więcej, te same badania pokazują, że z roku na rok rośnie liczba osób korzystających z serwisów bankowych tylko na urządzeniach mobilnych.

Klienci powierzają bankowi swoje pieniądze i jednocześnie oczekują, że korzystanie z usług banku będzie łatwe i przyjemne. Bezpieczeństwo transakcji i łatwość korzystania z serwisu są kluczem do satysfakcji klientów. Jednak, aby tak się stało produkt powinien powstawać przy wsparciu projektantów user experience.

UX w bankowości – kluczem do zadowolenia klientów

Badania dotyczące bankowości pokazują, że funkcjonalność i wygoda są dla klientów równie ważne co zakres oferty danego banku.

Badanie Deloitte’a „Global Banking Maturity” (https://www2.deloitte.com/pl/pl/pages/financial-services/articles/Digital-Banking-Maturity-2022.html) z 2022 roku pokazuje, że user experience jest jednym z 6 filarów, które wpływają na rozwiązania i są częścią wiodących praktyk w bankowości elektronicznej na świecie. To chyba wystarczający dowód dla decydentów, aby włączyć projektowanie ux do procesu tworzenia systemów finansowych.

User Experience a kwestie bezpieczeństwa

Bezpieczeństwo w banku to podstawa. W końcu klient powierza instytucji finansowej nawet wszystkie środki jakie posiada. W dzisiejszych czasach, zważając na liczbę ataków na konta klientów indywidualnych koniecznością i obowiązkiem banku jest zadbanie o bezpieczeństwo.

Bezpieczeństwem zajmują się oczywiście eksperci i zespoły IT. Jednak to po stronie UX designera leży zaprojektowanie procesu tak, aby był on z jednej strony zgodny z wymaganiami dot. bezpieczeństwa i dyrektywami, a z drugiej możliwie nietrudny dla użytkownika. Celowo użyłam tu słowa „nietrudny”, a nie „łatwy”. Weryfikacja logowania czy przelewu powinna być dla użytkownika na tyle łatwa, aby nie miał problemu z jej wykonaniem i na tyle trudna, aby nie mogła zostać przeprowadzona przez osoby niepożądane.

Rola badań UX w pracy nad systemami finansowymi

Zaprojektowanie systemu finansowego, czy to dla banku czy innej instytucji, jest dla zleceniobiorcy dużym wyzwaniem. Wyzwanie to wiąże się po pierwsze ze skalą projektu. Systemy finansowe to złożone przedsięwzięcia, które niejednokrotnie wymagają zaprojektowania setek czy nawet tysięcy widoków.

Z drugiej strony trzeba też odpowiedzieć sobie na pytanie, kto będzie korzystał z danego systemu. Projektując system do bankowości elektronicznej, należy wziąć pod uwagę wiele segmentów użytkowników:

  • klientów indywidualnych (dorosłych, ale też dzieci, które posiadają swoje konta),
  • firmy, reprezentowane przez swych pracowników,
  • pracowników danej instytucji finansowej, którzy będą w codziennej pracy stykać się produktem, ale od innej strony.

Stąd też istotna jest rola badań UX w procesie projektowania systemów finansowych. Szczególnie, jeśli mamy za zadanie zaprojektować system, z którego będą mogli na przykład korzystać bez problemu seniorzy.

Badania pozwalają na uwzględnienie w projekcie interesów i potrzeb wielu segmentów użytkowników. Powszechna wiedza o sposobie korzystania z cyfrowych narzędzi finansowych może okazać się niewystarczająca. Zaprojektowanie systemu wygodnego, użytecznego, łatwego i przyjemnego w użytkowaniu wymaga jej poszerzenia.

infografika: Projektowanie UX dla branży finansowej
Infografika: Projektowanie UX dla branży finansowej.
pobierz pdf

Proces projektowania UX dla finansów – jak wygląda?

Proces projektowania UX dla projektu finansowego będzie wyglądał na pewno inaczej niż projekt prostej strony czy aplikacji ze względu na swoje rozmiary. Będzie też zależał od tego, jaki rodzaj współpracy nawiążesz z klientem, developerami pracującymi nad produktem i jaką metodyką będziecie pracować.

Poza działaniami typowo z zakresu UX design, należy zaplanować, w jakiej formie projekt będzie przekazywany klientowi. Czy decydujecie się na projektowanie makiet i przygotowanie projektu graficznego każdego widoku? A może wygodnej będzie dostarczyć klientowi szczegółowy style guide i same makiety?

Planując prace warto też zarezerwować odpowiednio dużo czasu na projekt responsywny. W zależności od charakteru produktu zdecydować, czy lepiej opracować najpierw wersję mobilną czy desktopową. Albo pracować na obiema równolegle?

Doświadczenie mówi nam również, aby nie bać się zmian. Należy je wprowadzać, jeśli poprawią końcowy efekt prac.

Znacznie UX writingu w projektowaniu bankowości elektronicznej

Instytucje finansowe coraz częściej w swoich szeregach zatrudniają UX writerów, którzy odpowiedzialni są za tworzenie prostych i zrozumiałych treści dla klientów banków. Treści te to zarówno dłuższe komunikaty (np. instrukcje, faq itp.), jak i tzw. microcopy czyli treści na przyciskach, w formularzach czy menu.

Dobór słownictwa i komunikatów w systemach finansowych jest o tyle istotny, że klientami banku są praktycznie wszyscy. Kluczowa jest więc uniwersalność i zrozumiałość przekazów dla możliwe szerokiej grupy klientów.

NASZA REALIZACJA

Projekt aplikacji mBank Wealth Management

Aplikacja dla doradcy bankowego

PORTFOLIO

Jak zaprojektować UX systemu finansowego – o czym pamiętać i czego unikać?

W kwestii projektowania systemu finansowego kierujmy się tymi samymi zasadami, co przy projektowaniu jakichkolwiek innych systemów. Jednak ze względu na to, że klientami banków są praktycznie wszyscy warto zwrócić uwagę na kilka rzeczy.

Z pewnością należy docenić znaczenie UX writingu w projektowaniu treści do systemu finansowego, tak, aby był on jasny i zrozumiały dla możliwe szerokiego grona. Poza tym jako projektanci powinniśmy być wyczuleni na zmiany społeczne. Klienci banku to bardzo niejednorodna grupa, bo praktycznie cała populacja. Wsłuchiwanie się w nastroje społeczne i dostosowywanie języka do zmieniających się warunków to jedno z codziennych zawodowych wyzwań.

Tworząc rozwiązania dla klientów indywidualnym można wpaść w pułapkę myślenia o sobie jako kliencie. Nadal jednak trzeba pamiętać, że większość ludzi nie jest hard-userami. Dlatego wnioski wyciągnięte z badań user experience mogą ustrzec projektantów przed nieoptymalnymi decyzjami. Zrealizowanie badań przyda się szczególnie projektując rozwiązanie dla nieco węższej grupy, np. konto dla seniorów.

Podsumowanie

Projektowanie user experience jest w dzisiejszych czasach koniecznością jeśli chodzi o systemy finansowe. Tego oczekuje nie tylko branża sama w sobie, ale również pojedynczy klienci, dla których wygoda w korzystaniu z rozwiązań elektronicznych jest jednym z kluczowych czynników w wyborze banku.

Tworzenie użytecznych stron www – poradnik

Projektowanie stron internetowych

Strony www powstają po coś. Praktycznie każda ze stron ma jakiś cel do zrealizowania. Przyciągnięcie uwagi, ułatwienie kontaktu, przekazanie wiedzy, przeprowadzenie sprzedaży:

  • strony-wizytówki – mają potwierdzić, że firma istnieje, umożliwić sprawdzenie czym dany podmiot się zajmuje, udostępnić dane kontaktowe.
  • sklep internetowy – ma pozwolić wyszukać produkt, a także dodać go do koszyka, kupić i ewentualnie dokonać zwrotu.
  • witryna nastawiona na pozyskiwanie leadów – oprócz celów strony-wizytówki, jej zadaniem jest również zaprezentować ofertę, umożliwić złożenie zapytania lub zamówienia.
  • portal lub hub informacyjny – ma umożliwić znalezienie informacji.

Z każdej strony korzystają jacyś użytkownicy. Oczywiście, jeżeli ją w ogóle znajdą w gigantycznym gąszczu istniejących witryn. Ale jeżeli im się ta sztuka uda, korzystają w taki sposób, w jaki potrafią i lubią.

Sztuka projektowania użytecznych stron to dopasowywanie się do umiejętności i innych preferencji odbiorców.

Użyteczność, czyli user experience

Żeby strona spełniała swoje zadania, czyli realizowała cele właściciela, musi być dobrze odbierana przez użytkownika. Mówiąc inaczej, jego doświadczenia z witryną muszą być pozytywne.

I nie jest ważne, czy strona podoba się jej posiadaczowi, albo czy uważa on ją za super wygodną. Liczą się tylko odczucia i opinie użytkownika. To właśnie jego doświadczenia decydują o ostatecznej efektywności biznesowej rozwiązania

Co składa się na użyteczność strony www

Na pozytywne doświadczenia odbiorcy w trakcie korzystania ze strony internetowej składa się wiele czynników o różnym charakterze.

Za dobry odbiór strony odpowiadają między innymi:

  • wygoda korzystania,
  • intuicyjność korzystania,
  • estetyka interfejsu zgodna z oczekiwaniami,
  • dopasowana warstwa językowa,
  • czytelny układ treści,
  • odpowiednia objętość treści,
  • poprawność działania,
  • zachowanie w sytuacjach nietypowych,
  • sposób w jaki witryna uczy i wspiera posługiwanie się nią,
  • przydatność systemu nawigacji.

Co się dzieje, gdy strona nie jest użyteczna

Jeżeli któreś z wymienionych przed chwilą warunków nie są spełnione (a często wystarczy, że witryna ma problem z jednym) użytkownik zazwyczaj uzna stronę za nieużyteczną. W jakim stopniu, to całkiem inna sprawa, faktem jest jednak, że nie powie: świetna strona, wszystko mi się podoba, będę tu wracał i jeszcze zarekomenduję stronę innym.

Opinia o niskiej użyteczności strony powstaje w kilku krokach. Na początku są odczucia użytkownika, potem wnioski, a następnie działania, niekoniecznie ograniczające się do własnej negatywnej opinii o witrynie.

Odczucia

Typowe odczucia związane z problemami z korzystaniem ze strony mają różne natężenie:

  • zauważam, ale ignoruję,
  • to męczące,
  • to irytujące,
  • nie mogę znaleźć czego szukam.

Wnioski

W efekcie dyskomfortu użytkownik formułuje spostrzeżenia:

  • strona jest niedopracowana,
  • strona jest nieprzemyślana,
  • strona jest niewygodna,
  • z tej strony nie da się korzystać.

A następnie bardzo łatwo je uogólnia:

  • firma nie dba o klientów,
  • są niezorganizowani,
  • jeśli tak prezentują ofertę, to jak świadczą usługi,
  • to niepoważna firma,
  • to firma krzak.

Działania

Odczuwany dyskomfort oraz wnioski i uogólnienia, sprawiają, że użytkownik podejmuje niekorzystne dla właściciela strony decyzje i działania, na przykład:

  • rezygnuje z zakupu,
  • rezygnuje z zapytania,
  • nie decyduje się na rozpoczęcie współpracy,
  • zalicza firmę do grupy podmiotów, z którymi nie chce współpracować, którym nie ufa, których produkty / usługi ocenia nisko.
  • dzieli się negatywną opinią z innymi użytkownikami.

infografika: Tworzenie użytecznych stron internetowych
Infografika: Tworzenie użytecznych stron internetowych.
pobierz pdf

Co się dzieje, gdy strona jest użyteczna

Użyteczna witryna internetowa, która spełnia warunki dobrego odbioru nie generuje negatywnych odczuć użytkownika. Tym samym nie koncentruje jego uwagi na ustalaniu „co mi się tu nie podoba i co w związku z tym zrobię”. Odbiorca może poświęcić się realizacji swojego celu wizyty na stronie. To z kolei przekłada się na:

  • dłuższą wizytę na stronie,
  • lepsze zapoznanie się z warstwą merytoryczną,
  • zwiększoną reakcję na cechy oferty (cena, warunki realizacji, warunki dostawy)
  • częstsze zakupy (mniejsza liczba porzuconych koszyków),
  • częstsze zapytania,
  • częstszy kontakt.

Te składowe podnoszą z kolei efektywność biznesową:

  • zwiększają sprzedaż produktów i usług,
  • zwiększają liczbę zapytań,
  • zwiększają możliwości reklamowe.

Projektowanie użytecznych stron www

Tworzenie strony, która jest wygodna i intuicyjna dla użytkownika to projektowanie UX (UX design). Polega ono na stworzeniu interfejsu spełniającego warunki dobrego odbioru strony. Na kompletny projekt serwisu składa się również projekt szaty graficznej (UI design).

Projekt zawsze należy wykonywać w kontekście docelowego użytkownika opisanego w formie persony, realizującego konkretne procesy (np. wyszukiwanie produktu, dodawanie do koszyka, składanie zapytania z wykorzystaniem formularza kontaktowego) z użyciem witryny.

NASZA REALIZACJA

Wykonanie strony internetowej

Realizacja dla Hillwood Polska

PORTFOLIO

Składowe projektu UX

Projektowanie obejmuje:

Przy dzisiejszym poziomie technologii dostępu do Internetu projekt musi mieć wersje responsywne, a więc dostosowane do rozmiarów urządzenia, na którym wyświetlana jest strona.

Schemat projektu UX

Projektowanie przebiega według schematu:

  • rozpoznanie potrzeb klienta (właściciela serwisu):
    • poznanie biznesu klienta,
    • poznanie klientów klienta,
    • poznanie konkurencji,
  • cykl projektowania (jeden lub wiele).

W trakcie całego projektu niezwykle ważnym elementem jest kontakt z zamawiającym oraz jego odbiorcami. Kontakt ten z jednej strony zapewnia dopływ istotnych dla projektantów informacji, z drugiej zaś pozwala na uzyskanie feedbacku w trakcie prac. To z kolei umożliwia wprowadzanie na bieżąco korekt projektu.

Produkty projektu UX

Produktem projektowania jest zestaw makiet dla rozwiązań responsywnych, które w przypadku projektowania kompletnej strony www obejmują:

  • makietę strony głównej (w tym nagłówek, menu główne, stopka),
  • makiety najważniejszych podstron,
  • makiety szczegółów rozwiązania,
  • [opcjonalnie] mapę strony,
  • [opcjonalnie] diagramy ścieżek klienta.
Szukasz wykonawcy profesjonalnej strony www?

Zapytaj o wdrożenie projektu UX/UI

Wypełnij formularz, skontaktujemy się z Tobą

Projekt UI

Makiety UX serwisu są podstawą do prac projektantów graficznych, którzy na ich podstawie tworzą szatę graficzną / skórkę strony.

Na tym etapie warto zadbać o zgodność z aktualnymi wiodącymi trendami dotyczącymi wyglądu serwisów internetowych, w szczególności o zbliżonym charakterze, przeznaczeniu i funkcjonalności.

Konieczne jest także dostosowanie do estetyki grupy docelowej, czyli faktycznych użytkowników rozwiązania.

Poprawa użyteczności istniejących stron internetowych

Projektowanie i wdrażanie użytecznych rozwiązań w witrynach www dotyczy nie tylko nowo powstających rozwiązań. Bardzo często dotyczy to także istniejących stron i aplikacji.

Sposobem na lokalizację problemów z użytecznością jest przeprowadzenie audytu UX polegającego na przeglądzie strony pod kątem spełnienia warunków jej dobrego odbioru.

Audyt oczywiście należy przeprowadzić w kontekście docelowego użytkownika opisanego w formie persony, realizującego konkretne procesy z użyciem strony.

Wdrożenie zmian opisanych w raporcie z audytu prowadzi do eliminacji problemów utrudniających posługiwaniem się serwisem, a więc w efekcie podnosi użyteczność i efektywność biznesową.

Podsumowanie

Projektowanie użytecznych stron www jest procesem tworzenia rozwiązań dopasowanych do użytkownika. Wymaga zrozumienia celu, jakiemu ma służyć strona oraz poznania potrzeb i preferencji docelowych użytkowników.

Wysiłek włożony w tworzenie użytecznej witryny przekłada się jednak na dłuższy czas pobytu Internauty w serwisie, co pozwala na lepsze zapoznanie się z treściami i podjęcie pożądanych przez właściciela działań (kontakt, zakup, zapytanie).

Newsletter w sklepie internetowym – czy warto?

Co to jest newsletter w sklepie internetowym?

Newsletter to publikacja cyfrowa zawierająca informacje o działalności firmy lub organizacji, która jest regularnie wysyłana pocztą elektroniczną do wszystkich potencjalnych lub obecnych klientów, którzy wykazali zainteresowanie otrzymywaniem informacji.

Newsletter z dobrą listą mailingową to skuteczny sposób na promocję Twoich produktów lub usług, nawiązanie wysokiej jakości relacji z czytelnikami i zapewnienie konwersji w najbliższej przyszłości.

Newslettery dają większe szanse na konwersję i zyskanie lojalności, ponieważ osoby otrzymujące e-maile to osoby, które są zainteresowane poznaniem Ciebie, które obdarzyły Cię zaufaniem, zapisując się, aby dowiedzieć się o Tobie.

Newsletter w e-commerce – jak możesz zwiększyć sprzedaż w sklepie www?

Newsletter może być bardzo pomocny w edukacji i przekonywaniu potencjalnych klientów do zakupu Twoich produktów i usług. To, jak wiele sprzedasz, zależy od tego, jak bardzo newsletter był pomocny dla potencjalnych klientów. Biorąc pod uwagę, że aż 84% respondentów deklaruje odbieranie komunikacji o ofercie sklepów internetowych za pomocą poczty elektronicznej, nie powinniśmy przechodzić obojętnie obok tego tematu (https://www.smsapi.pl/static/files/SMSAPI_raport2020.pdf). Przyjrzyjmy się więc niektórym zaletom regularnej wysyłki newslettera do klientów.

Zwiększenie świadomości marki

Twoi potencjalni klienci mogą nie znać Twojej marki lub mogli odkryć Twoją witrynę e-commerce dzięki reklamom w mediach społecznościowych. Newsletter dostarcza im więc dodatkowych, potrzebnych informacji, pomaga lepiej poznać Twoją markę i zwiększa szanse na konwersję.

Zwiększenie ekspozycji produktów

Newsletter może pomóc Ci przybliżyć potencjalnego klienta do końca lejka sprzedażowego, a nawet ostatecznie przekonać go do zakupu. Jednym z podstawowych praw marketingu jest to, że im bardziej klient ma kontakt z produktem, tym większe jest prawdopodobieństwo, że go kupi. Dlatego właśnie regularny newsletter to idealne miejsce do zaprezentowania swoich produktów.

Utrzymanie kontaktu z klientami

Regularne wysyłanie newslettera pomoże Ci otworzyć kanał bezpośredniej komunikacji z obecnymi i potencjalnymi klientami. Dzięki regularnej komunikacji użytkownicy będą na bieżąco z wiadomościami o Twojej firmie, produktach i transakcjach. Za każdym razem, gdy planują coś kupić, dasz im więc doskonały powód, by pamiętali o Twojej witrynie e-commerce.

Zwiększenie szansy na konwersję

Jeśli chodzi o zwrot z inwestycji, newsletter znacznie częściej generuje sprzedaż w Twoim e-commerce niż inne rodzaje komunikacji lub reklamy w mediach społecznościowych. Dzieje się tak, ponieważ komunikujesz się bezpośrednio z klientami, którzy wykazali zainteresowanie Twoją marką i produktami. W tym momencie do Ciebie należy skuteczne wzbudzenie ciekawości i chęci zakupu, prezentowanie swoich punktów sprzedaży, odpowiadanie na potrzeby klientów i dawanie przekonujących powodów do zakupu w Twoim sklepie.

Newsletter w sklepie internetowym – od czego zacząć?

Teraz, gdy już poznałeś i zrozumiałeś powody, dla których warto tworzyć newsletter, nadszedł czas, aby rozpocząć pracę. Na skuteczność newslettera wpływa wiele składowych. Niezwykle istotne są czynniki takie jak: cel i strategia newslettera oraz odpowiedni dobór grupy docelowej. Ważny jest także wybór platformy oraz szablonu. Przyjrzymy się zatem bliżej pierwszym krokom tworzenia skutecznego newslettera.

Cel oraz strategia newslettera

Najlepsze kampanie marketingowe wykorzystują kilka różnych touchpoints, czyli punktów styku. Jeśli chcesz, aby Twoja strategia była w pełni zintegrowana, będziesz chciał udostępniać swoje zasoby marketingowe w różnych kanałach. Prowadzisz promocję? Czy ostatnio dodałeś nową funkcję lub produkt? Czy Twoi czytelnicy słyszeli także o Twoich kanałach w mediach społecznościowych? Bierzesz udział w konferencji? A może uczestniczysz w targach, na których klienci mogliby się z tobą spotkać i przywitać?

Jednym priorytetów w tworzeniu newslettera powinno być dostarczanie realnej wartości Twoim subskrybentom. Jeśli Twoje kampanie oferują wyłącznie treści promocyjne, współczynniki otwarć i klikalności ucierpią.

Możesz dodać wartość do swoich newsletterów na przykład poprzez:

  • Udostępnianie spersonalizowanych ofert i rabatów.
  • Sygnalizację przydatnych treści w Twojej witrynie (jak choćby nowe posty na blogu, poradniki itp.).
  • Linki do treści dostępnych tylko dla subskrybentów (ebooki, materiały szkoleniowe, narzędzia lub szablony itp.).

To są tematy warte opublikowania! Twój newsletter i reszta strategii marketingowej powinny zawsze się uzupełniać. Upewnij się, że używasz wszystkich dostępnych kanałów w swoich kampaniach, w tym newslettera.

Dopasowanie do osobowości kupującego

Pomyśl o swoim idealnym kliencie i o tym, co lubi. Użyj jego tonu, słownictwa i zainteresowań jako przewodnika. Napisz swoje treści, tak aby co tydzień czuł się, jakby wracał do znajomego.

Pamiętaj, że możesz mieć różne rzeczy do zaoferowania stałym klientom i osobom, które właśnie wykupiły subskrypcję. Dlatego wysyłanie im różnych treści w zależności od ich pozycji w lejku sprzedażowym odgrywa ważną rolę w przenoszeniu ich do następnej fazy i konwersji sprzedaży. Newsletter może być bardzo osobisty i zawierać imię i nazwisko klienta. Możesz utrzymywać listy e-mailowe zgodnie z docelowymi atrybutami, takimi jak dane demograficzne, lokalizacje geograficzne i wiele innych.

Wybór platformy dla newslettera

Dostarczalność wiadomości e-mail zależy od kilku czynników. Twoja reputacja jako nadawcy, treść newslettera i aspekty techniczne, takie jak podpis domeny i adres IP, mają wpływ na to, czy wiadomość e-mail dotrze do skrzynek odbiorczych. Bez uwzględnienia tych rzeczy Twoje kampanie prawdopodobnie zostaną oznaczone jako spam.

W tym miejscu pojawia się kwestia oprogramowania do e-mail marketingu. Posiadanie dedykowanej usługi newslettera pomaga zwiększyć dostarczalność i zarządzać bardziej technicznymi aspektami działań.

Oprogramowanie do e-mail marketingu:

  • Służy jako dostawca usług poczty e-mail (ESP).
  • Dostarcza analizy kampanii, w tym współczynniki otwarć, współczynniki klikalności i współczynniki odrzuceń.
  • Pomaga spełnić standardy RODO.
  • Pozwala łatwo tworzyć atrakcyjne i angażujące kampanie.
infografika: Newsletter w sklepie internetowym - czy warto
Infografika: Newsletter w sklepie internetowym – czy warto.
pobierz pdf

Stałe elementy newslettera

Jak napisać newsletter, aby przyciągnąć uwagę i zachęcić do czytania? W newsletterach można wyróżnić 5 najważniejszych części, które powinieneś dokładnie zaplanować.

Nadawca i temat

Nadawca i treść newslettera to te elementy, które decydują, czy użytkownik otworzy maila. Powinny odpowiadać na pytania: “Od kogo przyszedł?” i “Czego dotyczy?”. 

Dlatego po pierwsze ważne jest, aby nasz adres mailowy jasno wskazywał, kto jest nadawcą wiadomości. Anonimowym i nieznanym autorom użytkownicy poczty elektronicznej nie ufają.

Po drugie musimy zadbać o krótki i chwytliwy tytuł maila. Powinien zawierać około 30-40 znaków. Ważne, aby sugerował, czego dotyczy wiadomość.

Niektórzy uważają, że dużą klikalność newslettera można osiągnąć dzięki “tajemniczym tytułom”, ale na pewno nie powinno stać się to regułą. Oczywiście można to przetestować i sprawdzić jak reagują na nie nasi subskrybenci.

Preheader

Preheader udziela czytelnikowi odpowiedzi na pytanie: Dlaczego do mnie piszą? Jest to kolejny po temacie element, który może przekonać użytkownika do przeczytania wiadomości.

Trzeba podkreślić, że preheader jest ważny ze względu na rosnącą liczbę użytkowników mobilnych. Albowiem jest w dobrze widocznym miejscu i nie wymaga przewijania. Dzięki położeniu w górnej części newslettera mamy szansę zaangażować użytkownika zanim stracimy jego uwagę.

Dodatkowo warto zaznaczyć, że dobrze sformułowany preheader znacznie zmniejsza szansę na zgłoszenie spamu przez użytkownika.

Header

Header to po prostu górna część wiadomości, widoczna od razu po otwarciu maila. Powinna zachęcać użytkownika do przeczytania newslettera. Decyzja o tym zapada zaledwie w kilka sekund, więc przekaz powinien być jasny i chwytliwy.

W tej części znajdują się również takie elementy jak: logo firmy, przycisk udostępnienia innym użytkownikom oraz przekierowanie na stronę, do której zapraszamy w wiadomości.

Treść newslettera

Wreszcie dotarliśmy do samej treści newslettera. Dobrą praktyką, o której warto tu wspomnieć, jest niedopowiedzenie. Treść maila nie powinna całkowicie wyjaśniać i ze szczegółami przedstawiać oferty. Nie można przesadzać z długością wiadomości, dlatego newsletter zawiera jedynie wprowadzenie do jakiegoś tematu i zachęcenie do dalszego działania.

Newsletter ma za zadanie wstępnie poinformować użytkownika o jakimś wydarzeniu, akcji promocyjnej, zaprosić na stronę sklepu. 

Zadbaj również o wizualny aspekt, czyli czytelny układ treści, odpowiednią czcionkę, dodaj grafikę lub wideo dla przyciągnięcia uwagi.

Stopka

Ostatnia, ale równie ważna część newslettera to stopka. Tutaj zamieszczamy informacje o firmie, dane kontaktowe oraz ikony przekierowujące na nasze media społecznościowe.

W tej części zwykle znajduje się link do rezygnacji z subskrypcji newslettera. Dzięki temu dajemy szansę na dobrowolne wypisanie się z naszej bazy, a to ułatwia jej aktualizowanie.

infografika: Jak zaprojektować newsletter w sklepie internetowym.
Infografika: Jak zaprojektować skuteczny newsletter.
pobierz pdf

Skuteczny newsletter w e-sklepie – co możesz w nim pisać?

Droga klienta od poznania sklepu internetowego do dokonania pierwszego zakupu przebiega na kilku etapach. To, co im powiesz na każdym z tych etapów, ma znaczenie, a e-mail marketing jest indywidualnym kanałem, który pomoże Ci dostarczyć właściwy komunikat. Pamiętaj, że nie musisz informować go wyłącznie o wyprzedażach i nowościach. Wręcz przeciwnie, to Twoja szansa na budowania tożsamości Twojej marki i długotrwałej relacji z klientem.

Oto kilka przykładowych treści, które mogą okazać się interesujące dla Twojego klienta:

  • Tematy związane z Twoją branżą
  • Inspiracje, którymi chcesz się podzielić
  • Informacje o Twoich osiągnięciach
  • Informacje o nowościach produktowych
  • Zawiadomienia o promocjach
  • Historie Twoich klientów – jak pomógł im Twój produkt
  • Porady dla klientów – jak wykorzystywać Twój produkt
  • Przypomnienia o porzuconych koszykach
Szukasz wykonawcy projektu graficznego newslettera?

Prześlij brief i zamów bezpłatną wycenę

Wypełnij formularz, skontaktujemy się z Tobą

Jak napisać newsletter w sklepie internetowym – sprawdzone rady

Prawda jest taka, że ​​nie ma jednego uniwersalnego przepisu na udany newsletter, ale powinieneś skupić się na kilku ważnych czynnikach, w tym:

Personalizacja

Jeśli subskrybent poczuje osobisty charakter, chętniej przeczyta to, co masz do powiedzenia.

Zajawka

Zajawka to tekst podsumowujący, który pojawia się zaraz po temacie w skrzynce pocztowej. Wykorzystywanie jego pełnego potencjału może radykalnie zwiększyć współczynniki otwarć i klikalności.

Responsywność

Każdy marketer rozumie, że wszystko powinno być zoptymalizowane pod kątem urządzeń mobilnych, w tym projekt newslettera. Najprostszym rozwiązaniem są projekty jednokolumnowe.

Hierarchia wizualna

Ta koncepcja zachęca czytelnika do interakcji z treścią w określony sposób, w oparciu o jej projekt. Są to naturalne tendencje w sposobie odbierania treści przez użytkowników, więc dobrze zaplanowana hierarchia wizualna powinna wpływać na to, co postrzegają jako najważniejsze.

CTA

Tworzenie skutecznych wezwań do działania ma zasadnicze znaczenie dla generowania sprzedaży i konwersji. Dlatego CTA powinny być odpowiednio zintegrowane z projektem.

Podsumowanie

Czas zakasać rękawy i zabrać się do pracy. Najpierw upewnij się, że określiłeś swoją strategię, cele biznesowe i grupę docelową, a następnie zaprojektuj różne rodzaje newsletterów i testuj je.

Korzystanie z wielu sposobów podejścia do odbiorców może przynieść tylko korzyści Twojej firmie. Daj im więc opcje dotyczące sposobu, w jaki konsumują Twoje treści, a będziesz zaskoczony wynikami.

UX writing co to jest – na czym polega?

Tekst w serwisach internetowych

Jeden obraz jest wart więcej niż 1000 słów. I jest to niezmiennie prawda. Ale nie znaczy to, że słowa są w odwrocie. Wręcz przeciwnie – ich znaczenie stale wzrasta. Dlaczego? Bo współczesny Internauta nie chce dużo czytać. Najchętniej przyswaja krótkie porcje tekstu, a dłuższe fragmenty jedynie skanuje. Tworząc treści pozostaje więc tak formułować przekaz, żeby nie tracąc sensu, zmieścić się w niewielkiej liczbie znaków, wyrazów, zdań.

W niepamięć odchodzą witryny firmowe opowiadające ze szczegółami wieloletnią historię spółki. Coraz trudniej znaleźć strony produktowe wymagające wielokrotnego scrollowania treści z rzadka przedzielonej ilustracją. Dzisiaj największe zmiany dotyczą podstawowego przekazu interfejsu, od którego oczekuje się, aby był zrozumiały w krótkim czasie i bez (przesadnego) wysiłku.

Chcesz dowiedzieć się więcej jak powinny wyglądać strony produktowe? Sprawdź artykuł Jak dobrze zaprojektować stronę produktową.

Czym jest UX writing?

Z wielu definicji i opisów UX writingu najbardziej spodobała mi się chyba taka, że jest to młodszy brat copywritingu. Brat, który udoskonalił zasady zwięzłego pisania na zadany temat oraz zwrócił większą uwagę na klienta i jego działania.

Pisząc bardziej formalnie to tworzenie tekstu, zrozumiałego dla użytkownika produktu cyfrowego (strony www, aplikacji webowej, sklepu internetowego), wyjaśniającego działanie i ułatwiającego posługiwanie się produktem.

Copywiriting vs UX writing

Copywriting to pisanie mające za cel sprzedaż produktu. Autor tekstu, niezależnie czy jest to slogan reklamowy, artykuł sponsorowany, czy ścieżka dialogowa spotu dąży do przekonania odbiorcy do zakupu. Kreśli więc piękną przyszłość, odsuwa za horyzont ciemne chmury towarzyszące ludziom, którzy nie zdecydowali się na kupno.

UX writing koncentruje się na jakości komunikacji z klientem. Zamiast tworzyć plastyczną historię dba o krótki, ale jednoznaczny i zrozumiały przekaz. Opisuje cechy produktu, czasem porównuje je z innymi. Daje przede wszystkim jasne wskazówki do interakcji ze stroną.

Mimo, że podobne, specjalności zaliczają się do różnych obszarów specjalizacyjnych. Copywiting należy do sfery marketingu, zaś UX writing do zakresu działań projektowych

Gdzie stosować UX writing?

Nie ma elementów interfejsu strony internetowej, albo aplikacji, w których możemy całkowicie zrezygnować z czytelnego przekazu do klienta. Warto jednak poświęcić szczególną uwagę miejscom szczególnie ważnym biznesowo, takim jak ścieżka zakupowa czy też generalnie nawigacja w witrynie.

Call To Action

Tworząc wezwanie do działania (CTA) oprócz wyglądu i przekazu marketingowego, warto zadbać, aby użytkownik otrzymał wyraźne wskazówki. Użytkownik powinien wiedzieć co ma zrobić i co stanie się na skutek jego działania.

Przyciski i elementy menu

Projektując system nawigacji witryny UX writer (specjalista UX writingu) skoncentrować powinien się na zrozumiałości użytych tekstów dla grupy docelowej odbiorców. Musi też zadbać o spójność nazewnictwa w obrębie całego serwisu.

Formularze kontaktowe

Budując formularze kontaktowe często zapominamy, że są one wirtualnym pracownikiem firmy. Celem UX writingu w projektowaniu formularzy jest ułatwienie klientowi zwrócenia się do nas z zapytaniem. Chodzi więc o stworzenie sytuacji, w której użytkownik będzie wiedział „co gdzie wpisać”.

Warstwa obsługi technicznej

Ważnym obszarem dla UX writingu jest nauka korzystania przez użytkownika z rozwiązania oraz komunikaty dotyczące statusu aplikacji. Mam na myśli wszelkiego rodzaju instrukcje obsługi, tooltipy, podpowiedzi, informacje o trwaniu czynności, o zakończeniu z powodzeniem oraz całą obsługę błędów.

infografika: UX writing co to jest, gdzie i dlaczego stosować
Infografika: UX writing co to jest, gdzie i dlaczego stosować.
pobierz pdf

Najważniejsze zasady UX writingu

Reguły tworzenia treści nakierowanej na użytkownika i jego doświadczenia znacznie łatwiej opisać, niż w praktyce użyć. Dobry tekst powinien być bowiem krótki, ale jednocześnie musi przekazywać niezbędne treści. Musi być poprawny językowo, ale powinien też trafiać do odbiorcy.

Poniżej wymieniam podstawowe reguły, które warto mieć w pamięci pisząc treści w duch UX writingu.

Pisanie dla odbiorcy

Warto stworzyć personę i zaprzyjaźnić się z nią. Dopasowanie do potrzeb odbiorcy – personalizacja UX, jego stylu komunikacji i słownictwa to absolutna postawa. Strona firmowa dużej firmy technologicznej i sklep z odzieżą dla nastolatków to dla UX writera dwa różne wyzwania.

Krótko albo jeszcze krócej

Natłok informacji w Internecie jest ogromy. Użytkownicy nie czytają słowo po słowie – słowo! Skanują tekst co najwyżej zatrzymując się w szczególnie (ich) interesujących miejscach. Warto pisać krótko i skłonić do przyswojenia całego przekazu, zamiast ryzykować ominięcie istotnego fragmentu.

Prosty język

Tworzenie krótkiego tekstu kusi użyciem slangu, słownictwa branżowego. Najczęściej jest to jednak błąd – no, chyba, że persona świetnie takim językiem włada. Stąd pierwsza rada: ostrożnie z terminami specjalistycznymi.

Druga kwestia, to styl. UX writing i ozdobniki zdecydowanie nie idą w parze.

Komunikat wprost

Dobry efekt pracy UX writera nie powinien zmuszać do przetwarzania informacji. Warto unikać zbędnego dekodowania przez użytkownika. Cyfry służą do zapisywania liczb, a analogie i metafory praktycznie nigdy nie sprawdzają się w interfejsach stron internetowych.

Spójność

Reguła ta jest rozwinięciem poprzedniej. Każde wyjście ze schematu, odejście od raz zaproponowanego wzorca powoduje zaburzenie komunikacji. Użytkownik – najczęściej nieświadomie – sprawdza, czy dobrze odebrał przekaz, dziwi się na zasadzie „a tam było inaczej”. A tym samym traci kontakt ze stroną, oddala się od działania na którym nam zależy.

UX writing – dlaczego warto?

Doświadczenie użytkownika związane z korzystaniem ze strony, sklepu lub aplikacji przekłada się na kontakt z firmą lub marką. Odbiorca korzysta z witryny bo jest to dla niego wygodniejsze lub jedyna dostępna forma relacji. Mimo, że nie rozmawia z człowiekiem, ma bardzo podobne oczekiwania: chce czuć się dobrze, być zrozumianym, wiedzieć czego się od niego oczekuje itp. Jeżeli te oczekiwania zostaną spełnione, marka postrzegana jest pozytywnie, a to przekłada się na pierwszy zakup i kolejne zakupy.

UX writing to kompetencja i część procesu projektowego odpowiedzialna za jakość komunikacji. Część, zorientowana właśnie na wspomniane oczekiwania użytkownika. Dobrze wykonany UX writing to zadowolenie klienta, generujące przychody firmy.

Podsumowanie

UX writing to istotny element projektowania rozwiązań internetowych.

Obejmuje tworzenie treści związanych z posługiwaniem się produktem cyfrowym. Koncentruje się na komunikacji z odbiorcą. Jego celem jest jasny i spójny przekaz, budujący pozytywne doświadczenie użytkownika.

Emocje w e-commerce – jak emocje wpływają na procesy zakupowe?

Rola emocji w sklepie internetowym – dlaczego są tak ważne?

W trakcie rozmowy z jednym z klientów, któremu doradzałem jak zorganizować procesy biznesowe w firmie, doszliśmy do wniosku, że sklep internetowy to po prostu sklep, ale jednak internetowy. Sklep zajmuje się sprzedażą i tego lokalizacja w Internecie nie zmienia. Jednak kupowanie w sieci jest inne, daje klientowi znacznie więcej swobody, żeby nie powiedzieć poczucia bezkarności.

W sklepie stacjonarnym wzięcie towaru do ręki jest okazaniem zainteresowania. Być może akurat dla Ciebie nie jest to problemem, ale uwierz, nie każdy tak ma. Wiele osób w sposób bardziej lub mniej świadomy, pod obserwującym okiem sprzedawcy, czuje jakąś formę zobowiązania, która utrudnia odłożenie produktu z powrotem na półkę i opuszczeniem sklepu bez zakupu. Trzy doktoraty można napisać na temat mechanizmów, jakie zachodzą w głowie klienta i w co najmniej jednym pojawi się rozdział na temat wstydu albo skrępowania. W sklepie internetowym tych emocji raczej nie spotkasz.

Jak emocje wpływają na decyzje zakupowe w e-Commerce?

Najczęściej uważamy, że decyzje zakupowe podejmujemy w racjonalny i zorganizowany sposób. Nic z tego. Badania Google pokazały wyraźnie, że jedyne wzorce jakimi się posługujemy to rozszerzanie zbioru informacji, aby „mieć z czego wybierać”, albo zawężanie zbioru „żeby się nie pogubić” (https://www.thinkwithgoogle.com/intl/en-cee/consumer-insights/consumer-journey/navigating-purchase-behavior-and-decision-making/).

W sklepie internetowym, w którym czujemy się mniej obserwowani, bardziej jesteśmy sobą działamy „na swoim terenie”. Kupujemy w domu, na ulicy, rozmawiając ze znajomymi, na swoim smartfonie albo komputerze, ale nie fizycznie w sklepie. W takich warunkach wpływ emocji staje się bardzo wyraźny.

I wyraźna jest ogólna, wspólna dla ludzi tendencja: wolimy, żeby było nam lepiej niż gorzej. Podążamy ku zadowoleniu, satysfakcji, radości, spełnieniu i przyjemności, odsuwając się od wstydu, złości, lęku, irytacji i zakłopotania.

Wpływ na kupującego na poziomie emocjonalnym – zachęcenie do zakupu

Odkąd istnieje handel sprzedawcy wykorzystują emocje, aby skłonić potencjalnych klientów do zakupu. I robią to na dwa sposoby.

Pierwszy ze sposobów to stworzenie wrażenia, że wejście w posiadanie produktu przyniesie odbiorcy pozytywne odczucia, albo doprowadzi go do pozytywnych stanów. Gama możliwości (i obietnic sprzedawców) jest tu przeogromna. Poczujesz się lepiej, będziesz wyglądał/a jak model/ka, będziesz zdrowy, bezpieczny, będziesz wzbudzać podziw, będziesz modny/a itd. itd.

Drugi kierunek to wywołanie przekonania, że zakup pozwoli uniknąć niekorzystnych, negatywnych odczuć i stanów. Zamawiając dziś kupisz taniej (nie przepłacisz), ostatnie egzemplarze (niedługo towar będzie już niedostępny), kupując, nie będziesz musiał czekać (produkt pozwoli Ci nie tracić czasu) itp. itp.

Jak wykorzystać emocje, aby osiągnąć sukces w e-handlu?

Opisane wyżej ogólne mechanizmy są wykorzystywane w różny sposób. Głównym nośnikiem przekazu treści uruchamiających emocje zachęcające do zakupu jest interfejs graficzny (UI). Teksty przekazują informacje budujące kontekst i formułują obietnice, elementy graficzne podkreślają i wzmacniają siłę słów.

Używaj mediów wizualnych do wywoływania emocji

Jeden obraz jest wart tysiąca słów. Dlatego każdy użyty w sklepie powinien być dobrze przemyślany pod kątem wrażeń i odczuć użytkowników. Ważny jest kolor, istotna jest zgodność przekazu wizualnego z estetyką odbiorców (personalizacja UX).

Baner reklamowy, grafika ilustrująca albo inny element pełniący rolę wezwania do działania (CTA) powinien być ponadto spójny. Jeżeli słowa obiecują zadowolenie i radość, tonacja kolorystyczna i elementy graficzne muszą te zapowiedzi wspierać, a nie zaprzeczać im.

Idealnym miejscem do generowania emocji wspierających decyzje zakupowe są też zdjęcia produktów. Odzież prezentowana przez modeli mówi: Ty też możesz tak dobrze i swobodnie wyglądać. Narzędzia wykorzystywane przez osoby wykonujące konkretne czynności wysyłają przekaz: dasz radę, będziesz zaradny, będziesz bohaterem domu.

Treści, które wzbudzają emocje kupujących

Przekazywanie treści niosących emocje nie jest trudne, ale wymaga zastosowania kilku zasad.

Po pierwsze – emocje, to nie logiczne, racjonalne, podporządkowane schematom myślenie. Dlatego treści powinny być umieszczone w spójnej, trafiającej do odbiorcy, napisanej jego językiem opowieści. Na pewno złym sposobem byłoby (Ty to wiesz, ale chcę pokazać skrajny przykład) umieszczenie przekazu w punktach. Kupując produkt X: 1. będziesz wyglądać jak gwiazda TV, 2. będziesz Ci wygodnie, 3. znajomi będą Ci zazdrościć.

Po drugie, trzeba zbudować strategię przekazu i się jej trzymać. Jeśli decydujesz się na przekaz zachęcający: Dzięki naszemu kremowi będziesz miał/a zdrową cerę, to dobrze się zastanów, czy chcesz również wzbudzić niepokój albo lęk. Moim zdaniem komunikat w stylu: Spiesz się, zostało tylko 100 opakowań nie jest najlepszym pomysłem. Raz, że jest zapowiedzią, że za tydzień, dwa, miesiąc kremu nie dostanę (więc po co zaczynać tę przygodę), dwa raz obudzony lęk, łatwo przeniesie się na inne kwestie (co jeśli krem mi zaszkodzi?).

Po trzecie, układając teksty mające poprzez emocje wpływać na sprzedaż warto wykorzystywać szeroko nagłaśniane trendy. Dobrym przykładem są działania proekologiczne, czy ochrona zwierząt. Przekaz podkreślający, że produkt lub usługa postępują zgodnie z takimi trendami buduje przekonanie „jestem po słusznej stronie”, co sprawia, że odbiorca kupuje między innymi po to, by poczuć satysfakcję z dobrze podjętej decyzji.

Zadbaj o UX swojej strony

Duże znaczenie, często decydujące o sukcesie lub porażce e-sklepu, ma też struktura serwisu, architektura informacji, system nawigacji, czyli zagadnienia pozostające w obszarze użyteczności serwisu i doświadczeń użytkownika. Przemyślany UX design pozwala bowiem uniknąć trudnych emocji, o których napiszę za chwilę.

Jeżeli masz wątpliwości co do użyteczności swojego sklepu, rozważ wykonanie przeglądu witryny w formie audytu UX. Audyt badający witrynę pod różnymi aspektami, w wielu miejscach odnosi się do elementów sklepu i kroków procesu mocno związanych z emocjami klienta.

infografika: Emocje w eCommerce - jak emocje wpływają na procesy zakupowe?
Infografika: Emocje w eCommerce – jak emocje wpływają na procesy zakupowe?
pobierz pdf

Elementy irytujące użytkowników – co może zniechęcić do finalizacji transakcji?

Nie zawsze emocje użytkownika mają pozytywny wpływ na klienta. Niejednokrotnie stają się powodem porzucenia koszyka, czyli rezygnacji z zawarcia transakcji na końcowym etapie procesu zakupowego. I nie jest to jedyne miejsce, w którym emocje mogą przeszkodzić w sprzedaży.

Jest wiele sytuacji, w których pojawiają się emocje niekorzystne z punktu widzenia właściciela sklepu. Najczęściej emocje te są wynikiem niedopatrzeń lub błędów w trakcie projektowania użyteczności witryny.

Poniżej omawiam kilka przykładów spotykanych regularnie w naszej praktyce.

Konieczność utworzenia konta w sklepie przed dokonaniem zakupów

Wchodzisz do sklepu i widzisz, że musisz założyć konto. Zapewne najpierw zadasz sobie pytanie „ale po co?”, być może już w trakcie wpisywania do formularza – z rozpędu – nazwiska albo maila. Po chwili zdajesz sobie sprawę, że sytuacja jest dziwna. To tak, jakby po wejściu do sklepu stacjonarnego ochroniarz przy drzwiach poprosił Cię o dowód lub prawo jazdy i chciał wpisać Twoje dane do jakiegoś dziwnego zeszytu. Co czujesz? Zakłopotanie, niepokój, dyskomfort. Mniejsza zresztą o nazwę – prawie na pewno sytuacja Ci się nie podoba i chcesz wyjść z tego nieprzyjaznego miejsca. O zakupach oczywiście nie ma mowy.

Ukryte opłaty – jasność dotycząca ponoszonych kosztów

Docierasz do koszyka, potwierdzasz chęć zakupu. Cena produktu jest niezła, termin dostawy rewelacyjny, ścieżka do checkoutu była krótka. Pojawia się okienko z podsumowaniem wartości transakcji i okazuje się, że musisz zapłacić za dostawę i to całkiem sporo. Cena, którą widziałeś wcześniej dotyczy odbioru osobistego w sklepie 130 kilometrów od Twojego domu. Co czujesz? Złość? Ostrzej? Ktoś właśnie próbował Cię oszukać!

Niedostosowana strona do użytkowników mobilnych

Komputera używasz w pracy, na studiach, w szkole. Bo musisz, bo potrzebny jest duży ekran. Kupujesz gdzie się da, na sofce przed telewizorem, w autobusie, na ławce w parku, a przede wszystkim na smartfonie. Produkt znajdujesz w Google szybko, wchodzisz do sklepu i zaczynają się schody. Trudno przewijać stronę, menu jest niewygodne, a na znalezienie przycisku powiększenia grafiki straciłeś 3 minuty. Szefie sklepu, nie jest dobrze. Klient zaczyna być poirytowany. A wiesz, że jeśli raz opuści sklep zdenerwowany i niezadowolony, to prawdopodobnie już nigdy nie wróci. I co gorsza podzieli się z innymi negatywną opinią.

Błędy 404

Inna sytuacja wygląda tak: dotarłeś do sklepu i zaczynasz przeglądać produkty. Albo inaczej – w trakcie przeglądania dopadły Cię wątpliwości i szukasz regulaminu, żeby sprawdzić, czy ewentualny zwrot będzie łatwy do przeprowadzenia i bezpłatny. Niestety wyskakuje błąd 404, strony nie znaleziono. Odświeżasz stronę i efekt ten sam. Cofasz krok i niestety ponownie czterysta czwórka. Emocje w miarę proste do przewidzenia: zniecierpliwienie i okolice.

Jeśli chcesz się dowiedzieć więcej na temat projektowania atrakcyjnych i efektywnych stron błędów 404, zapraszam do zapoznania się z artykułem Strona błędu 404 – jak zaprojektować.

Inne sytuacje powodujące niezadowolenie klienta

Listę przykładów sytuacji, które wywołują trudniejsze, niepożądane emocje można ciągnąć niemal w nieskończoność. Wyszukiwarka zwracająca błędne lub puste wyniki. Niska jakość obsługi klienta. Wolno wczytujący się serwis (cóż, że z przepięknymi, wręcz artystycznymi fotografiami prezentującymi produkty). I tak dalej.

Zapewne sam dodałbyś do listy jeszcze kilka pozycji. Nie chodzi mi jednak o tworzenie kompletnego spisu „rzeczy, które przy projektowaniu sklepu mogą pójść nie tak”. Chcę, żebyś zauważył, że często nawet drobne problemy w witrynie, mogą powodować duże następstwa biznesowe. A z drobnymi problemami we własnym sklepie, przygotowanym z zaangażowaniem i kreatywnością, jest tak, że ciężko je zauważyć.

Na szczęście na firmowym blogu mogę sobie pozwolić na product placement, więc jeszcze raz przypomnę, że dobrym sposobem na znalezienie generatorów niekorzystnych emocji jest audyt UX. Audyt, który jest jedną ze świadczonych przez nas usług.

NASZA REALIZACJA

Projekt sklepu internetowego

Realizacja dla Naszosie.pl

PORTFOLIO

Wykorzystywanie emocji w sklepie – ogólne korzyści dla marki

Na zakończenie poruszę jeszcze jeden wątek związany z emocjami.

Emocje pozostawiają po sobie ślad. Masz zapewne takie miejsca, do których chętnie wracasz. Gdybyś zaczął się zastanawiać dlaczego tak jest, bez trudu odkryjesz, że to kwestia skumulowanego wspomnienia z poprzednich kontaktów z miejscem. Restauracja kojarząca się ze smacznym posiłkiem, miłym kelnerem, muzyką jaką lubisz, spotkaniem z przyjaciółmi przyciąga Cię. Sytuacje sprawiające, że do innej restauracji nie pójdziesz już nigdy, a nawet jej nie polecisz wymyśl sam. Wcześniejsze przykłady z pewnością Ci to ułatwią.

Zwrócę Twoją uwagę na ciekawe zjawisko, bardzo istotne przy myśleniu o kreowaniu emocji klienta e-sklepu. Na ogólne dobre wrażenie i wspomnienie pracuje się długo. Jedną pozytywną sytuacją możesz uzyskać kredyt zaufania, na lojalność musisz pracować przy każdym kolejnym kontakcie. Niestety niepożądane emocje mają znacznie większą siłę. Bywa, że wystarczy jeden raz, żeby rozgniewany, rozzłoszczony czy zirytowany użytkownik zdecydował: nigdy tu nie wrócę.

Skumulowane pozytywne wrażenia przenoszą się stosunkowo łatwo na markę. Wygodne, budzące miłe emocje zakupy powodują, że klient pamięta nie tylko o sklepie, ale gotów jest dzielić się z innymi opinią także poza siecią, czy systemem komentarzy witryny.

Podsumowanie

Zazwyczaj nie zdajemy sobie sprawy ze znaczenia emocji w procesie podejmowania decyzji, w tym decyzji zakupowych. W rzeczywistości emocje mają ogromny wpływ na to czy chcemy być klientami danego sklepu. Naturalne dążenie do sytuacji miłych i unikanie niemiłych stoi za naszymi wyborami.

Uzbrojeni w wiedzę o korzystnych emocjach, możemy w znacznym stopniu wpływać na decyzje klientów i zachęcać ich do dokonania transakcji. Równie ważnym obszarem, o którym warto pamiętać jest projektowanie sklepu w taki sposób, żeby minimalizować liczbę trudnych emocji, powodujących rezygnację z zakupu.

Najważniejsze funkcje sklepu internetowego – co musi posiadać sklep internetowy?

Czym jest funkcjonalność sklepu internetowego?

Nie istnieje jednoznaczna definicja terminu funkcjonalność sklepu internetowego. Ogólnie opisując jest to zbiór wszystkich dostępnych funkcji w sklepie internetowym oraz sposób ich przedstawienia użytkownikowi.

Zarówno funkcje, jak ich prezentacja wpływają na sposób w jaki klienci przechodzą proces zakupowy i jak się czują podczas wykonywania kolejnych czynności. Niezadowolony klient to brak zysku, to oświadczenie dotyczy wszystkich przedsiębiorców. Słabe wrażenia użytkownika sprawiają, że klienci porzucają Twoją witrynę i zdecydowanie mniej jest skłonnych do powrotu na nią. Zapewniając doskonałe wrażenia użytkownika, zdobędziesz lojalność klientów, zwiększysz współczynnik konwersji i zachęcisz klientów do wydawania większej ilości pieniędzy na Twoje produkty.

Jako właściciel sklepu internetowego Twoim głównym celem jest sprawienie, aby proces zakupów był jak najbardziej płynny dla użytkownika. Oznacza to, że powinieneś zadbać o wygodne narzędzia, które pomogą mu ten proces przejść. Wszystko sprowadza się do komfortu użytkowania Twojego sklepu internetowego.

Co jest najważniejsze w sklepie internetowym?

Niektóre funkcje mogą sprawić, że witryna e-commerce będzie łatwiejsza w użyciu dla klientów i łatwiejsza do nadzorowania z perspektywy właściciela. Zanim jednak podejmiesz decyzję, które funkcjonalności będą odpowiednie dla Twojego sklepu warto stworzyć strategię UX. Strategia UX określa ogólną wizję produktu lub usługi, którą projektujesz. Obejmuje cele biznesowe i potrzeby użytkowników końcowych. Odpowiada na takie pytania jak: Czego chcą użytkownicy końcowi? Jakie są cele biznesowe? Jaka jest tożsamość marki? W jaki sposób zespół projektowy może tworzyć i iterować produkty, usługi czy funkcje, które spełniają wszystkie powyższe wymagania? Zapewnia, że podczas podejmowania każdej decyzji projektowej uwzględniono zarówno cele biznesowe jak i użytkowników końcowych.

Jeżeli, na rynku e-commerce jesteś już od dłuższego czasu, kiedyś miałeś stabilną i przewidywalną sprzedaż, a teraz zauważasz spadek zaangażowania użytkowników pomocny również może okazać się audyt UX twojej witryny. Audyt UX to proces, który sprawdza istniejący produkt cyfrowy w celu upewnienia się, że spełnia wymagania biznesowe, zapewnia pozytywne doświadczenia użytkownika i dostępność witryny.

Badając swoją witrynę oraz opierając się na strategii UX dowiesz się, które funkcjonalności są najważniejsze dla Twoich klientów oraz jaki sposób ich prezentacji będzie dla nich najlepszy.

Szukasz wykonawcy funkcjonalnego e-sklepu?

Zamów bezpłatną wycenę projektu

Wypełnij formularz, skontaktujemy się z Tobą

Funkcje sklepu internetowego – co powinien posiadać sklep internetowy

Nie sposób stworzyć pełną listę funkcji, która zapewni sukces każdej witrynie e-commerce. Ale niektóre elementy są niezbędne, aby użytkownik czuł, że dbasz o jego potrzeby. Poznaj kilka najważniejszych funkcji, których wprowadzenie powinieneś rozważyć.

Wyszukiwarka produktów

Jeśli odpowiednio zaprojektujesz wyszukiwarkę produktów w sklepie www, może ona stać się niesamowitym atutem Twojego sklepu. Wdrożenie wyszukiwarki wydawać się może proste, jednak powinno być dobrze przemyślane i oparte na projekcie Twojej witryny. Wyszukiwarka musi służyć nie tylko dotychczasowym klientom, ale także tym, którzy nie znają rzeczywistych nazw produktów, a chcą je odnaleźć i kupić. Funkcja wyszukiwania musi dawać kupującym online sugestie dotyczące możliwych rzeczy, których szukają.

Narzędzia sortowania i filtrowania

Jak wspomniałam wcześniej, sukces Twojej firmy jest bezpośrednio zależny od możliwości znalezienia produktu. Podczas zakupów online dostępne są setki produktów, dlatego warto pomyśleć o potrzebie filtrowania produktów. Powodem jest to, że użytkownicy stali się bardziej świadomi czasu, jaki spędzają w sieci. Udostępnij uporządkowany sposób sortowania i filtrowania w sklepie internetowym, który pomoże im podjąć właściwą decyzję. Kategoryzuj filtry według najważniejszych atrybutów, dzięki którym klienci mogą chcieć filtrować Twoje produkty, i umieść najważniejsze z nich na górze.

Porównywarka produktów

Wyfiltrowanie produktów nie musi zakończyć się ich zakupem. Stanie się tak w szczególności, gdy oferujesz wiele towarów o zbliżonych cechach. Klient, który nie będzie w stanie łatwo zestawić parametrów produktów wzbudzających jego zainteresowanie, może poczuć się zagubiony i porzucić koszyk. Jeżeli oferta Twojego sklepu odpowiada powyższemu opisowi, zdecydowanie powinieneś rozważyć wdrożenie porównywarki produktów.

Obsługa opinii użytkowników

Jednym z głównych powodów, dla których użytkownicy nie czują się komfortowo robiąc zakupy w Twoim sklepie internetowym, jest brak jakichkolwiek dowodów społecznych. Nie jest łatwo przekonać ich do zakupu, chyba że ktoś, kogo znają lub komu zaufają, pozytywnie ocenia markę. Inaczej mówiąc, kupują chętniej, gdy znajdą jakiś dowód na jakość i autentyczność przedmiotów, które planują kupić. Z tego powodu powinieneś rozważyć dodanie modułu opinii użytkowników do swojego sklepu internetowego. Zbieranie i udostępnianie opinii jest świetnym narzędziem wpływającym na wahających się odbiorców.

Strona kontaktowa

Przekonałeś już klienta do zakupu Twoich produktów, zaufał Twojej marce i co dzieje się dalej? W tym miejscu ważne jest budowanie relacji z klientami. Warto zadbać o opcję, dzięki której Twoi klienci mogą się z Tobą skontaktować w przypadku pytań, wyjaśnień, wątpliwości lub opinii. Może to mieć formę najczęściej zadawanych pytań (FAQ), formularza kontaktowego lub czatu na żywo.

infografika: Najważniejsze funkcjonalności sklepu internetowego
Infografika: Najważniejsze funkcjonalności sklepu internetowego.
pobierz pdf

Udostępnianie funkcji sklepu – o co zadbać

Definicja funkcjonalności, którą podałam na początku artykułu, mówi o sposobie udostępniania funkcji użytkownikowi. I jest to niezwykle ważne stwierdzenie. Nawet najbardziej przydatne narzędzie nie będzie użyteczne dla klienta, jeśli nie będzie w stanie go znaleźć na stronie. Dlatego projektując funkcjonalny sklep internetowy warto pamiętać o minimum dwu cechach, opisanych niżej.

Intuicyjna nawigacja

Spraw, aby nawigacja była łatwa do zrozumienia, a podróż klienta, przebiegała w płynny niczym nie zakłócony sposób. Proste menu, dobrze zaprojektowany nagłówek, czytelne i skuteczne przyciski CTA oraz obszerna stopka z mapą witryny sprawiają, że klient pozostanie w Twoim sklepie.

Responsywność

Oczywistą, ale dość ważną cechą jest zdolność Twojej witryny do oferowania bezproblemowego działania na ekranach wszystkich rozmiarów. Konsumenci nieustannie przemieszczają się między urządzeniami i ważne jest, aby przeglądanie na nich było spójne, zwłaszcza na urządzeniach mobilnych. O zasadach projektowania responsywnego pisałam w osobnym artykule.

Podsumowanie

Istnieje wiele funkcjonalności sklepu internetowego, które warto uwzględnić podczas tworzenia witryny. Ponieważ rynek rozwija się tak szybko, powinieneś rozważyć je wszystkie. A Twoim celem powinno być takie ich wyważenie, aby sklep dostarczał najlepszych wrażeń klientom od momentu wejścia na stronę do finalizacji zakupu.

Pamiętaj, że wybierając tę ​​lub inną najważniejszą funkcję sklepu dla swojej witryny, musisz wziąć pod uwagę rodzaj działalności, rynek i konkurencję, środki bezpieczeństwa, swoje potrzeby i oczekiwania klientów.

Jak tworzyć opisy produktów w sklepie internetowym – oryginalne opisy produktów

Dobry opis produktu – dlaczego warto tworzyć?

Opis produktu to tekst marketingowy, który wyjaśnia, czym jest produkt i dlaczego warto go kupić. Celem opisu produktu jest dostarczenie klientom ważnych informacji o cechach i kluczowych zaletach produktu, aby bez wahania dodali produkt do koszyka.

Faktem jest, że ludzie czytają opisy produktów. Mogą nie przeczytać wszystkiego, ale to, co widzą, pomaga im zdecydować czy dokonać zakupu. Według ankiety przeprowadzonej przez Salsify, 88% konsumentów twierdzi, że opisy produktów odgrywają ważną rolę w ich decyzjach zakupowych (https://www.salsify.com/blog/cracking-the-consumer-code-how-product-content-drives-conversion-infographic).

Ankieta podkreśla również znaczenie dostarczania informacji o produktach, w tym zdjęć i recenzji. Około 66% chce zobaczyć co najmniej trzy zdjęcia, 87% sprawdza recenzje, a 94% nie kupi, jeśli nie znajdzie informacji o produkcie.

Dlaczego warto inwestować w opisy produktów

Opisy produktów wypełniają luki, których nie mogą oddać zdjęcia. Pomagają klientom podejmować lepsze decyzje dotyczące tego, czy produkt jest dla nich odpowiedni. Na dłuższą metę dobre opisy produktów pozwolą Ci zaoszczędzić czas. Jeśli odpowiedzą na potencjalne pytania, klienci nie będą musieli wysyłać do Ciebie wiadomości z pytaniami. Ponadto istnieje mniejsza szansa, że zirytuje ich brak informacji i porzucą koszyk. Odpowiednio przygotowane opisy produktów mają dodatkową zaletę w postaci optymalizacji SEO sklepu internetowego. Oznacza to, że więcej osób będzie mogło znaleźć produkty i zostać klientami Twojego sklepu.

Opisy produktów dla sklepów internetowych – budowa

Dobry opis produktu jest pełen informacji i kładzie nacisk na przekonanie czytelnika do dokonania zakupu. Treść i obrazy powinny podkreślać te cechy produktu, które bezpośrednio przynoszą korzyści czytelnikowi. Oto kluczowe elementy, które powinieneś wziąć pod uwagę podczas tworzenia opisów produktów:

  • Tytuł / nazwa produktu

    Powinien być największym i najłatwiejszym do znalezienia tekstem na stronie produktu. Tytuł produktu nazywa produkt, pokazując klientom dokładnie to, na co patrzą. Staraj się być tak konkretny, jak to możliwe, bez zbytniego komplikowania.

  • Opis produktu

    Nie musi być zbyt długi, ale powinien dokładnie określać cechy, zalety, funkcje i ograniczenia produktu. Tutaj przydaje się dobry UX writing; wiedza o tym, czego chcą Twoi klienci i odpowiedni język, w jakim się z nimi porozmawia, może naprawdę zachęcić ich do kupowania większej liczby produktów w Twoim sklepie internetowym. Jeśli możesz dodać do treści słowa kluczowe odpowiednie z punktu widzenia SEO, to jeszcze lepiej.

  • Zdjęcia produktów

    Potrzebujesz dobrych, wysokiej jakości zdjęć produktu, aby klienci mogli dobrze go obejrzeć z każdej strony. Chcesz, aby czuli się tak, jakby patrzyli na przedmiot osobiście, więc upewnij się, że pokazujesz zdjęcia produktu pod każdym kątem i udostępniasz możliwość przybliżenia detali.

  • Cena

    Prawdopodobnie najważniejszy czynnik na tej stronie dla Twoich potencjalnych klientów. Cena produktu lub usługi musi być widoczna, należy ją również umieścić w pobliżu przycisku „Kup” lub „Dodaj do koszyka”. Ma to pomóc w naturalnym procesie poruszania się po stronie i zachęcić użytkowników do przejścia od przeglądania ceny do dodania produktu do koszyka.

Jeśli chcesz się dowiedzieć więcej na temat tego, jak powinna wyglądać skuteczna prezentacja oferty produktowej, zapoznaj się z artykułem Jak powinna wyglądać prezentacja produktu.

  • Wezwanie do działania (CTA)

    To najbardziej ekscytująca część strony. W tym miejscu możesz powiedzieć swoim klientom, aby „dodali do koszyka” Twój produkt! Wezwanie do działania to krótkie i szybkie żądanie, które skłania klientów właśnie do działania. Zazwyczaj jest to czynność polegająca na dodaniu towaru do koszyka.

  • Dostępność produktu

    Potencjalni klienci chcą wiedzieć, że mogą szybko otrzymać przedmiot, a pokazanie, że produkt jest w magazynie lub jego ilość jest ograniczona w magazynie, może zachęcić ich do zakupu.

  • Dowód społeczny

    Dowód społeczny wpłynie pozytywnie na współczynnik konwersji w Twoim sklepie. Nic tak nie przekona potencjalnego klienta do zakupu produktu, jak usłyszenie pozytywnych opinii innych użytkowników.

  • Informacje o wysyłce i możliwych dodatkowych kosztach

    Jak wspomniałam we wcześniejszym artykule „Wysokie lub ukryte koszty dostawy to jeden z najczęściej wymienianych powodów, dla których klienci decydują o porzuceniu koszyka”. Konsumenci wolą też dokupić dodatkowy produkt i uzyskać w ten sposób darmową dostawę, niż płacić za koszty przesyłki. Stąd dobrym rozwiązaniem może być widoczna informacja o darmowej dostawie, dostępnej dla zamówień o określonej wartości. Jeśli do zamówienia doliczane są inne dodatkowe koszty, np. wniesienia czy montażu sprzętu, koniecznie należy o nich poinformować klienta jak najwcześniej.”

infografika: Jak tworzyć efektywne opisy produktów
Infografika: Jak tworzyć efektywne opisy produktów.
pobierz pdf

Jak tworzyć opisy produktów w sklepie internetowym?

Teraz, gdy już wiesz, co i dlaczego powinien zawierać opis produktu, następnym krokiem jest dowiedzenie się, jak je pisać, aby klienci dokonywali zakupów. Nie martw się ― nie musisz być profesjonalnym copywriterem ani marketerem. Kluczem do sukcesu jest nastawienie na klienta. Oto kilka wskazówek, jak zrobić to dobrze:

  • Skoncentruj się na odbiorcy

    Jeśli spędziłeś już jakiś czas w branży e-commerce, prawdopodobnie znasz już swojego klienta. Użyj tej wiedzy do stworzenia treści. Postaw się na jego miejscu i pomyśl o swoich problemach. Teraz spróbuj wyobrazić sobie, co chciałbyś zobaczyć w opisie produktu, aby rozwiązać te problemy.

  • Zachęcaj funkcjami i korzyściami

    Jeśli chodzi o jakikolwiek tekst marketingowy (w tym opisy produktów), zazwyczaj najlepiej jest przyjąć podejście oparte na korzyściach, ponieważ dla klientów liczy się najbardziej wartość, jaką uzyskają po zakupie produktu.

  • Odwołaj się do wyobraźni

    Pomóż kupującemu wyobrazić sobie życie z Twoim produktem za pomocą krótkiej historii. Co mogą z tym zrobić? Gdzie mogą się udać? Jak będą się czuć podczas używania lub noszenia? Alternatywnie Twoja historia może dotyczyć historii produktu, jego produkcji lub inspiracji, która za nim stoi.

  • Dołącz dowód społeczny

    Dowód społeczny może przybrać formę recenzji produktów i referencji w Twoim sklepie, w wyszukiwarce Google lub mediach społecznościowych. Uczciwe opinie poprzednich kupujących mogą wyjaśnić niepewność i odpowiedzieć na pytania dotyczące tego, jak produkt faktycznie działa, pasuje lub smakuje.

  • Ułatwiaj skanowanie opisu wzrokiem

    Badania przeprowadzone przez Nielsen Norman Group wskazują, że ludzie częściej skanują stronę internetową niż czytają każde słowo (https://www.nngroup.com/articles/how-people-read-online/). Korzystaj z list punktowanych, krótkich akapitów i dużej ilości wolnego miejsca. Funkcje i specyfikacje dobrze pasują do list, a zalety i najważniejsze informacje można zmieścić w krótkim akapicie. Jako nazwę produktu użyj nagłówka z większą czcionką.

Celem opisu produktu jest dostarczenie kupującym ważnych informacji, które pomogą im w podjęciu decyzji o zakupie. Pomyśl o opisie produktu jak o sprzedawcy, który pracuje 24 godziny na dobę na stronach Twoich produktów.

Jak powinien wyglądać opis produktu – przykład

Spójrzmy na opis produktu na przykładzie sklepu FemiStories. Przeglądając jeden z ich opisów produktów, możemy zbadać jego budowę i najważniejsze cechy:

przykład opisu produktów

Pierwsze co widzimy wchodząc na stronę produktu to duże, dobrej jakości zdjęcia, nazwę produktu oraz wezwanie do działania. Dodatkowo, na tym przykładzie możemy zobaczyć prezentację ceny po rabacie zawierającą informacje o poprzedniej cenie.

Poniżej znajdują się szczegółowe informacje, które klienci mogą chcieć poznać. Krótko wypunktowane najważniejsze cechy produktu wraz z jego zaletami. Firma zwraca uwagę na ekologię, zapewnia, że dba o te same wartości co klienci, wpływa tym samym na emocje użytkowników w e-commerce.  Najważniejsze cechy podkreśla krótki akapit który odnosi się bezpośrednio do potrzeb klientów i podkreśla zalety produktu takimi frazami jak: „niezwykle kobiecy”, „pasuję na każdą sylwetkę” „delikatna, dziewczęca”.

Na koniec pozostawia użytkownikom możliwość zapoznania się z tabelą rozmiarów, informacjami dotyczącymi dostawy i zwrotów oraz opiniami innych użytkowników.

Podsumowanie

Jak widać, opisy produktów to dość ważny element sklepów internetowych. Pomagają budować połączenia z docelowymi odbiorcami, odpowiadają na kluczowe pytania, mogą mieć ogromny wpływ na pozycję Twojej strony w wyszukiwarkach i późniejszy ruch w Twoim sklepie internetowym. Spraw, aby opisy Twoich produktów były czytelne i dopasowane do odbiorców, dokładnie rozważ użycie słów kluczowych i unikaj duplikowania treści.

One Page Checkout – czy warto wdrożyć w esklepie?

One Step Checkout – czym jest checkout jednoetapowy?

Jednoetapowy checkout to najprościej mówiąc dokończenie zamówienia w jednym kroku. Oznacza to, że dane adresowe, metoda płatności i sposób dostawy oraz podsumowanie zamówienia są widoczne na jednym ekranie.

Taka forma realizacji zamówienia w sensie projektowym jest z pewnością dużym wyzwaniem dla sklepu, ale w wielu przypadkach wartym wysiłku. O zaletach one step checkout dowiesz się więcej z jednego z poniższych akapitów.

Czym się różni checkout jednoetapowy od wieloetapowego?

Najważniejszą różnicą między jednoetapowym a wieloetapowym checkoutem jest szybkość finalizacji zamówienia. Wieloetapowa finalizacja jest procesem wymagającym większej liczby czynności, a co za tym idzie bardzo często zajmuje więcej czasu.

Kolejna różnica to kwestia miejsca. Pisząc o miejscu mam na myśli powierzchnię, jaką zajmują poszczególne elementy na ekranie. Jednoetapowa finalizacja zajmuje znacznie mniej miejsca niż wieloetapowa, która rozłożona jest na kilku widokach. W one step checkout nie ma w związku z tym miejsca na żadne dodatkowe rozpraszacze, co również sprzyja ukończeniu procesu zakupowego.

Na pewno do różnic zaliczyć trzeba specyfikę dokonywania zakupu, uwzględniającą oczekiwania związane z samym produktem, jak i miejscem oraz sposobem sprzedaży. Wieloetapowe checkouty zazwyczaj dotyczą zakupów, które muszą być przemyślane, użytkownik wielokrotnie chce się upewnić, co do poprawności wpisywanych danych. Dzieje się tak na przykład przy zakupach bardzo drogich i/lub prestiżowych produktów.

One step checkout – jak jest skonstruowany?

One step checkout polega na tym, że użytkownik wszystkie etapy finalizacji zamówienia widzi na jednym widoku. Oznacza to nic innego niż to, że wszystkie elementy konieczne do zrealizowania zamówienia są umiejscowione na jednym ekranie bez konieczności przechodzenia na kolejne strony.

Jednoetapowy checkout powinien być podzielony na konkretne sekcje (dane adresowe, metoda płatności, metoda wysyłki, podsumowanie) ułożone w kolumnach lub jedna pod drugą. Sekcje te powinny być wyraźnie oddzielone, a użytkownik powinien wiedzieć, którą z nich akurat wypełnia. Poza tym trzeba zadbać o to, aby liczba pól do wypełnienia była jak najmniejsza. W końcu tym sposobie finalizacji zamówienia musimy zmieścić wiele elementów na stosunkowo niedużej powierzchni jednego ekranu.

One page checkout – wady i zalety

One page checkout jak i inne rodzaje finalizacji transakcji ma swoje wady i zalety. Trudno od razu określić, czy dany sposób realizacji zamówienia przyniesie Twojemu sklepowi więcej korzyści. Przeanalizujmy zatem cechy tego rozwiązania, aby wspomóc Cię w decyzji.

Zalety one step checkout

One step checkout zdecydowanie ma wiele zalet. Dobrą wiadomością jest to, że dotyczą one zarówno perspektywy klienta jak i sprzedawcy.

Pierwsza zaleta to szybkość. Klient oszczędza czas, bo nie musi przechodzić z jednego kroku do kolejnego. Od razu sprawdza poprawność danych, a podsumowanie wyświetla mu się cały czas podczas finalizacji zamówienia. Co więcej – wie od razu jakie są dostępne formy płatności i dostawy.

Z powyższej zalety, czyli szybkości, wynika kolejna, która ucieszy sprzedawcę. Szybki proces finalizacji zamówienia przekłada się na bezpośrednio na zmniejszenie liczby porzuconych koszyków. A redukcja liczby transakcji, które nie zostały sfinalizowane to realnie większa sprzedaż.

Istotną zaletą omawianego rozwiązania, która niewątpliwie łączy się z szybkością realizacji procesu, jest fakt, że klient od razu ma świadomość, jakie są koszty wysyłki i metody płatności, ponieważ wszystkie te informacje znajdują się na innym ekranie. Zdarza się, że sklepy nie informują klienta o kosztach wysyłki, trudno też wielokrotnie znaleźć taką informację w sklepie, dlatego one step checkout rozwiązuje ten problem. Następstwem takiego informowania klienta jest to, że nie porzuci procesu w trakcie np. z powodu zaskoczenia zbyt wysokimi kosztami przesyłki.

One page checkout wady

One page checkout jak każde rozwiązanie ma również pewne wady. Nie są one tak duże, ale warto mieć te kwestie na względzie, szukając odpowiedzi, czy zaimplementować ten system finalizacji zamówienia w swoim sklepie.

Jednoetapowy checkout na pewno jest dużym wyzwaniem projektowym. Dlaczego? Po pierwsze dlatego, że w jednym widoku trzeba umieścić bardzo wiele informacji. Należy to zrobić w taki sposób, aby widok był czytelny i logiczny.

Druga wada wynika z pierwszej. Jeśli widok nie jest dobrze zaprojektowany, może być nieczytelny, a wtedy nie spełni swojego zadania.

Inną kwestią jest przyzwyczajenie klientów. Są obszary, w którym one step checkout sam w sobie będzie wadą. Należy zastanowić się, czy klienci Twojego sklepu znają takie rozwiązanie i czy specyfika Twojej sprzedaży pozwala na zastosowanie takiego rozwiązania. Jeśli oferujesz produkty, których zakup wymaga przemyślenia i masz tego świadomość, jednoetapowa finalizacja może być odstraszająca.

infografika: One Step Checkout / One Page Checkout
Infografika: One Step Checkout / One Page Checkout.
pobierz pdf

Jak wdrożyć checkout jednoetapowy?

Wdrożenie jednoetapowego checkoutu wymaga odpowiedniego przygotowania i poświęcenia czasu. Mogłoby się wydawać, że tak szybka i prosta forma finalizacji zamówienia jest łatwa do wdrożenia, jednak nic bardziej mylnego. Trzeba pamiętać, że na małej przestrzeni powinno znaleźć się dużo informacji, a te powinny być przedstawione w czytelny sposób, tak aby ułatwić, a nie utrudnić użytkownikowi ostatni etap realizacji zakupu.

Przejdźmy więc do konkretów. Projektując one step checkout skoncentruj się na kilku rzeczach:

  1. Wymagaj tylko o koniecznych danych – formularz danych oraz pozostałe sekcje muszą być skromne, dlatego proś tylko o informacje konieczne do realizacji zamówienia.
  2. Wyraźnie oddziel od siebie sekcje, w których użytkownik wypełnia dane i w których wybiera metodę płatności i metodę dostawy.
  3. Pamiętaj o pokazaniu podsumowania koszyka i oznaczeniu końcowego kosztu zamówienia wraz z kosztami dostawy.
  4. Oznacz tę sekcję, którą aktualnie użytkownik się zajmuje – niech ma wiadomość, w którym miejscu formularza się znajduje.

Przykłady zastosowania One Step Checkout

W związku z tym, że one step checkout jest stosunkowo nowym rozwiązaniem, liczba przykładów jest ograniczona. Jest jednak jeden, bardzo popularny, wart uwagi. Jest nim checkout w wersji desktopowej strony eobuwie.

ilustracja: Przykłąd One Step Checkout - eobuwie

Z jednej strony jest to checkout czytelny, wszystkie najważniejsze informacje znajdują się na jednej stronie, sekcje są wyraźnie od siebie oddzielone. Widoczna jest cena produktów oraz koszt dostawy. Zdecydowanie jest to przykład warty uwagi, trzeba jednak pamiętać, że jest on dostępny tylko w widoku desktopowym.

Jeśli chcesz się dowiedzieć więcej na temat wyboru odpowiedniej platformy dla Twojego sklepu internetowego, to sprawdź artykuł Jaką platformę wybrać dla sklepu internetowego?

Podsumowanie

One step checkout jest ciekawą alternatywą dla wieloetapowej finalizacji zamówienia. Jeśli problem porzuconych koszyków dotyczy również Twojego sklepu, warto rozważyć wdrożenie tego rozwiązania. Wprawdzie jest to wymagające wyzwanie, ale może przynieść realne korzyści dla poziomu sprzedaży.

Jak powinna wyglądać prezentacja produktu – oferta w sklepie www

Wygląd sklepu a prezentacja produktu w Internecie

Wygląd i styl sklepu internetowego to pierwsze elementy na które zwrócą uwagę Twoi klienci. Badania wykazały, że użytkownicy określą, czy podoba im się strona czy też nie w ciągu zaledwie 50 milisekund (https://anaandjelic.typepad.com/files/attention-web-designers-2.pdf). Użytkownicy którym nie spodoba się to co widzą, albo co gorsza nie zrozumieją oferty opuszczą sklep i najprawdopodobniej nigdy do niego nie wrócą. Warto zatem postawić na estetyczny i intuicyjny projekt, który nie tylko wpłynie pozytywnie na konwersję, ale także na reputację Twojego sklepu.

Oto kilka podstawowych wskazówek, które powinieneś znać, zanim zaczniesz projektować stronę produktową:

  • Upewnij się, że projekt graficzny jest spójny z identyfikacją wizualną Twojej marki (kolory, fonty i inne charakterystyczne elementy) i estetyczny.
  • Trzymaj się znanych symboli. Używaj ikon lub oznaczeń, które są łatwe do zidentyfikowania.
  • Zadbaj o dostępność i intuicyjną nawigację na stronie (tooltipy, breadcrumbsy, CTA itp.)

UX strony produktowej w sklepie internetowym

W branży e-commerce, strona produktu ma ogromną wartość, śmiało mogę dodać, że większą niż strona główna. To na stronie produktu, klienci decydują się na zakup lub opuszczają sklep. Aby pomóc im w podjęciu decyzji o zamknięciu transakcji, musisz ich zadowolić, dostarczając im wszystkich potrzebnych informacji.

Strona produktu powinna zawierać:

  • Nazwę produktu.
  • Zwięzły i informacyjny opis produktu.
  • Zdjęcia produktu zawierające zbliżenia produktu, lub możliwość powiększenia zdjęcia (szczególnie gdy produkt posiada ważne detale).
  • Cenę, w tym wszelkie możliwe dodatkowe opłaty związane z produktem.
  • Szczegóły produktu, takie jak np. kolor i rozmiar oraz jasny sposób ich wyboru.
  • Dostępność produktu.

Ponadto strona produktu powinna w przejrzysty sposób umożliwiać dodawania produktu do koszyka i dawać wyraźną informację zwrotną po dodaniu.

Wprowadź jak najwięcej informacji o produkcie do uporządkowanych atrybutów. W ten sposób możesz łatwo przekształcić je w filtry w swojej wyszukiwarce. Jeśli ważna informacja znajduje się tylko w opisie produktu, nie ma to żadnej wartości przy bardziej zaawansowanym wyszukiwaniu. Warto kategoryzować produkty w swojej ofercie np. po kolorystyce i parametrach technicznych.

Jeśli chcesz się dowiedzieć więcej na temat przygotowania podstrony dla kategorii produktowych w swoim sklepie internetowym, to sprawdź artykuł Jak przygotować podstronę kategorii produktowych w sklepie www.

Konstruując stronę nie zapomnij o CTA! Call To Action (wezwanie do działania) to jeden z najważniejszych elementów skutecznych stron produktów. Dobre CTA to przycisk, który kontrastuje z resztą witryny e-commerce, nie utrudniając w żaden sposób nawigacji.

Przykładowe frazy CTA na stronie produktu:

  • Kup Teraz!
  • Dodaj do koszyka.
  • Utwórz konto.

Prezentacja produktu w sklepie internetowym – użyteczne ułatwienia

Klienci zazwyczaj oczekują, że znajdą poniższe elementy na karcie produktu i doceniają, gdy są one obecne w Twoim sklepie. Jednak w większości przypadków nie są one niezbędne do zawarcia transakcji.

Elementy, które wpłyną pozytywnie na użyteczność strony produktowej to np.:

  • Recenzje produktów i możliwość filtrowania produktów według ich ocen.
  • Dodatkowe zdjęcia produktów (widoki szczegółowe, animowane zdjęcia produktu w użyciu).
  • Filmy o produktach.
  • Rekomendacje powiązanych lub podobnych produktów.
  • Treści generowane przez użytkowników: np. recenzje zawierające obrazy lub filmy od klientów.
  • Przycisk Dodaj do ulubionych.
  • Czas i koszt dostawy.

Jak efektywnie wyróżnić ofertę w sklepie internetowym?

Efektywne elementy, to takie które mogą być przydatne w przypadku niektórych produktów, ale tylko wtedy, gdy są one bezbłędnie zaprojektowane z wysoką użytecznością. Zazwyczaj korzystają z nich największe sklepy i marki.

Należą do nich m.in.:

  • Wirtualna przymierzalnia (funkcja dostępna dzięki rozszerzonej rzeczywistości).
  • Wyszukiwanie głosowe i inteligentni asystenci.
  • Opcja wyszukiwania według obrazu.
  • Zakupy subskrypcyjne.
  • Personalizowany produkt (klient może stworzyć bardziej unikalny produkt, a nie masowo produkowany).
infografika: Prezentacja oferty w sklepie internetowym - jak powinna wyglądać
Infografika: Prezentacja oferty w sklepie internetowym – jak powinna wyglądać.
pobierz pdf

Oferta sklepu internetowego – Najczęstsze błędy

Wielu sprzedawców wciąż nie zwraca wystarczającej uwagi na strony swoich produktów. Popełniają błędy, które są na tyle znaczące, że odciągają konsumentów od ich witryn.

Poniżej kilku najważniejszych błędów:

  • Podawanie nieaktualnych lub niespójnych informacji o produkcie

Nieprawidłowe specyfikacje produktów, zduplikowane treści i nieaktualne informacje mogą powodować frustrację klientów. Złe doświadczenia mogą zmniejszyć zaufanie konsumentów i zaszkodzić reputacji Twojej marki, co ostatecznie zmniejszy Twoje przychody.

  • Używanie tylko standardowych materiałów

W szczególności brak dodatkowych wizualizacji, materiałów video czy zdjęć 360°. Wiele marek umieszcza na swoich stronach produktów tylko standardowe zdjęcia i opisy produktów. Ale trzeba zrobić więcej, aby zdobyć serca i umysły współczesnych konsumentów. Jednym z najlepszych sposobów na to jest skorzystanie z dodatkowych elementów przyciągających uwagę oglądającego.

  • Brak ocen i recenzji

Recenzje odgrywają ogromną rolę w tym, czy kupujący czują, że mogą zaufać Twojej marce. Dzisiejsi konsumenci wykorzystują recenzje, aby poznać doświadczenia innych z danym produktem, znaleźć odpowiedzi na często zadawane pytania i uzyskać wgląd w ważne czynniki, takie jak typowy czas wysyłki i jakość obsługi klienta.

  • Niedostępna informacja o stanie produktu (dostępny/niedostępny)

Użytkownicy powinni wiedzieć, kiedy produkt jest niedostępny, bez konieczności dodawania produktu do koszyka tylko po to, aby przed samą finalizacją zakupu dowiedzieć się, że został wyprzedany.

  • Brak informacji o kosztach i czasie dostawy

Wysokie lub ukryte koszty dostawy to jeden z najczęściej wymienianych powodów, dla których klienci decydują o porzuceniu koszyka. Konsumenci wolą też dokupić dodatkowy produkt i uzyskać w ten sposób darmową dostawę, niż płacić za koszty przesyłki. Stąd dobrym rozwiązaniem może być widoczna informacja o darmowej dostawie, dostępnej dla zamówień o określonej wartości. Jeśli do zamówienia doliczane są inne dodatkowe koszty, np. wniesienia czy montażu sprzętu, koniecznie należy o nich poinformować klienta jak najwcześniej.

NASZA REALIZACJA

Projekt sklepu internetowego

Profesjonalna odzież i akcesoria marki ASSOS

PORTFOLIO

Jak zastąpić kontakt fizyczny z towarem w sklepie internetowym

W sklepie internetowym kupujący nie mogą dotknąć, poczuć ani wypróbować produktu. Wszystko zależy od tego, co widzą na karcie produktu, dlatego dostarczenie zdjęć produktów, które wyraźnie pokazują wszystkie aspekty produktu, ma kluczowe znaczenie. Oto krótka lista, którą warto odhaczyć zanim załadujemy zdjęcia produktowe do naszego sklepu:

  • Użyj jednolitego tła. Tło zdjęć produktów nie powinno rozpraszać ani kolidować z samym produktem. Białe tło sprawdza się najlepiej, ponieważ pozwala wyróżnić się produktowi i działa z niemal każdym stylem lub schematem kolorów.
  • Używaj wysokiej jakości dużych obrazów. Dobre zdjęcia sprzedają produkt. Obrazy wysokiej jakości przyciągają uwagę kupujących i pokazują im dokładnie to, co kupują. Posiadanie dużych zdjęć pozwala kupującym powiększyć i szczegółowo przyjrzeć się produktowi.
  • Dodaj kilka zdjęć. Wyświetlaj produkt pod różnymi kątami i umieszczaj zbliżenia, aby zapewnić pełniejszy obraz produktu. Widok 360 stopni, na którym mogą przenosić produkt, to dobry sposób na zapewnienie wrażeń zbliżonych do fizycznego wejścia do sklepu i zaangażowania się w niego. VR e-commerce to kolejna fala tego doświadczenia.
  • Dodaj wideo. Filmy mają możliwość dostarczenia dużej ilości informacji w krótkim czasie. Wykorzystaj film, aby pokazać produkt w użyciu i podać jak najwięcej informacji funkcjonalnych.
  • Bądź konsekwentny. Używaj obrazów, które są spójne na wielu stronach, a także zgodne z wyglądem i stylem pozostałej części witryny. Dzięki temu wszystko będzie wyglądało na czyste i uporządkowane. Główny obraz produktu powinien być taki sam we wszystkich obszarach witryny, takich jak informacje o produktach lub w sekcji polecanych produktów.

Podsumowanie

Strony produktowe powinny być kompletnym źródłem informacji o oferowanym produkcie. Użytkownicy oczekują, że znajdą tam dane niezbędne do podjęcia decyzji: charakterystykę, konfigurację, cenę, czas dostawy, koszty wysyłki i informacje techniczne. Niestety wiele serwisów zaniedbuje stan strony produktowej i nie dba o poziom informacji na niej zawartych i to idealne miejsce dla Ciebie, aby wyróżnić się na tle konkurencji.

Jak stworzyć efektywny formularz rejestracji i logowania?

Dobry formularz rejestracji i logowania – dlaczego warto?

Dobrze zaprojektowany formularz rejestracji jest bardzo ważną częścią procesu zakupowego. Warto się nad nim pochylić, aby zwiększyć szansę, że użytkownik założy konto w sklepie internetowym i oczywiście zrealizuje zakupy.

Jako właścicielowi sklepu internetowego zależy Ci na tym, aby klienci zakładali konto w Twoim sklepie. Zrobią to oni tym chętniej, im łatwiejszy i bardziej klarowny będzie proces rejestracji. Szczególnie, że wiele sklepów w tej chwili umożliwia zakupy w wersji bez rejestracji (jako gość).

Więcej na temat tworzenia formularzy pisaliśmy już na naszym blogu w artykule Jak stworzyć skuteczny formularz kontaktowy.

Nieprzemyślany formularz rejestracji i logowania – możliwe skutki

Nieprzemyślane okno rejestracji i logowania, a szczególnie takie, w którym pojawiają się błędy projektowe może skutkować zmniejszeniem ruchu na stronie i co za tym idzie, spadkiem sprzedaży.

Użytkownicy, którzy nie będą mogli przejść przez formularz lub będzie on zbyt skomplikowany czy niejasny, przerwą wypełnianie formularza. Co gorsza opuszczą stronę i – koniec końców – będą sfrustrowani wizytą w serwisie. Niestety, mogą też na długo zapamiętać ten moment.

Czego unikać przy tworzeniu formularza rejestracji?

Najważniejszą zasadą w tworzeniu formularza rejestracyjnego jest to, aby prosić klienta tylko o najważniejsze i tylko rzeczywiście potrzebne dane. Klient mając podejrzenia, że przekazuje niekonieczne potrzebne informacje o sobie traci zaufanie do sklepu. Ryzyko porzucenia procesu rejestracji i dalszych zakupów jest znaczne.

Poza tym moment wypełniania formularza wymaga pewnego skupienia. Chcąc, aby użytkownik jednak dobrnął do końca i nie porzucił formularza należy unikać wszystkich elementów, które mogą rozproszyć lub odwrócić uwagę klienta. Zrezygnuj więc z reklam, pop upów, krzykliwych bannerów itp.

Formularz rejestracji – najlepsze praktyki UX

Przygotowanie poprawnego i użytecznego formularza rejestracji nie powinno nastręczać wielu trudności, jeśli zastosujemy się do kilku ważnych zasad:

  1. Pola do wypełnienia – dostosuj szerokość pola do treści jaka ma się w niej znaleźć, np. pole na kod pocztowy powinno być krótsze niż pole na adres e-mail. Dzięki temu klient będzie miał pewność, że treść, którą wpisuje jest odpowiednia.
  2. Kontrola i informowanie – od początku informuj jak długi jest formularz i na jakim etapie jego wypełniania znajduje się użytkownik. Wiedząc, ile czasu trzeba poświęcić na wypełnienie formularza osoba wypełniająca uniknie zaskoczeń, a co za tym idzie niepotrzebnych frustracji.
  3. Obsługa błędów – jeśli użytkownik popełni błąd przy wypełnianiu pola bardzo ważne jest, aby poinformować go o tym. Informacja, że pole jest wypełnione błędnie jest jednak niewystarczająca. W dobrym formularzu użytkownik ma wskazane, gdzie popełnił błąd i w jaki sposób powinien wypełnić dane (np. w jakim formacie powinien wpisać numer telefonu). Poza tym dobrą praktyką jest informowanie o źle wypełnionym polu od razu, a nie dopiero wtedy, kiedy użytkownik chce przejść do następnego kroku.
  4. Dane cząstkowe – zapisuj dane cząstkowe w formularzu. Jeśli użytkownik przypadkiem wyjdzie ze strony, upewnij się, że wracając nie będzie musiał wypełniać formularza ponownie.
infografika: Rejestracja i logowanie - użyteczne formularze w sklepie internetowym
Infografika: Rejestracja i logowanie – użyteczne formularze w sklepie internetowym.
pobierz pdf

Projektowanie formatki logowania – o tym warto pamiętać

Wymienione wyżej praktyki to must have procesu rejestracyjnego, jednak istnieje jeszcze kilka zaleceń, które pozytywnie wpłyną na sukces w trakcie rejestracji.

  • Rejestracja one click – to wymagająca jednego lub dwóch kliknięć szybka rejestracja za pomocą posiadanych kont w mediach społecznościowych. To bardzo korzystne rozwiązanie, bo proces rejestracji jest krótki a użytkownik nie musi zapamiętywać kolejnego hasła.
  • Brak walidacji hasła – niektóre serwisy zdecydowały się na rezygnację z podwójnego wpisywania hasła, ponieważ użytkownik wpisując dwukrotnie hasło nie wiedział, gdzie popełnia błąd. To powoduje frustrację, co może skutkować porzuceniem procesu rejestracyjnego. Wpisanie pojedynczo hasła na pewno usprawni proces i jest warte rozważenia.
  • Informowanie o sile tworzonego hasła – informuj użytkownika o sile hasła na bieżąco, nie czekając z oceną do próby logowania.
  • E-mail zamiast loginu – zamiast wymyślania kolejnego loginu i weryfikowania czy ten istnieje już w bazie, poproś klienta o wpisanie adresu e-mail. Będzie to również ułatwienie dla użytkownika, który nie będzie musiał zapamiętywać kolejnego loginu.

Okno logowania – jak stworzyć je poprawnie?

Logowanie powinno być przejrzyste, bez zbędnych informacji. Wystarczy zastosować prosty formularz zawierający:

  • pole do wpisania loginu,
  • pole do wpisania hasła,
  • przekierowanie do rejestracji,
  • opcje zapomniałem hasła,
  • możliwość zrezygnowania z logowania,
  • opcję „Zapamiętaj mnie”.

Okno logowania powinno również posiadać opcję logowania przez posiadane konta w mediach społecznościowych. To jeden klik, który ułatwia cały proces logowania do konta.

Jeśli chcesz się dowiedzieć więcej na temat tego, jak audyt UX może wspomóc Twój projekt, to koniecznie zapoznaj się z artykułem Audyt UX – w czym Ci pomoże.

Podsumowanie

Formularz rejestracyjny i logowania na stronie to swoistego rodzaju test dla sklepu internetowego. Na pierwszy rzut oka niby drobiazg, a jednak wiele mówi o podejściu sklepu do klienta. Zwrócenie uwagi na kilka kwestii w trakcie projektowania pozwoli na unikniecie podstawowych błędów, które utrudnią lub uniemożliwią klientowi realizację celu.

Trzeba jednak pamiętać, że coraz więcej sklepów decyduje się na umożliwienie zrobienia zakupów bez rejestracji. Warto pokazać klientowi jakie korzyści niesie za sobą rejestracja konta, ale najważniejsze, aby dać klientowi wybór i pozwolić mu na wygodną realizację zakupów.

Porównywarka produktów w e-commerce – kiedy warto zaimplementować

Czym są porównywarki na stronach internetowych?

Porównywarka to strona, której użytkownicy używają do porównywania produktów na podstawie ceny, funkcji, atrybutów, recenzji i innych kryteriów. Daje to klientom możliwość porównania produktów kilku marek i wybrania tego, który jest najbardziej atrakcyjny.

Jak działają porównywarki?

Próbowałeś kiedyś kupić telewizor, odkurzacz lub nowy telefon i miałeś trudności z rozróżnieniem dostępnych opcji? Przekątna ekranu, moc silnika, dostępna pamięć czy parametry aparatu mogą się od siebie znacznie różnić w zależności od modelu czy marki. Możliwość porównania każdej opcji obok siebie daje wizualny obraz kluczowych czynników wpływających na decyzję.

Na tym właśnie polega porównanie produktów w e-commerce. Zasadniczo wymienia funkcje i cechy kilku różnych produktów na tej samej stronie, przedstawione w formie tabeli lub checklisty. Zazwyczaj narzędzia do porównywania wymagają od kupujących wybrania pozycji, które chcą zobaczyć obok siebie, poprzez np. zaznaczenie checkboxa lub kliknięcie w ikonę „dodaj do porównania”.

Nie zawsze jednak porównywarka będzie niezbędna w sklepie internetowym. Niewielu klientów pomyślałoby nawet o porównaniu kilku książek lub par skarpet. Zdecydowanie większa liczba kupiłaby odkurzacz lub telefon wcześniej sprawdzając ich funkcje i parametry. Właśnie tam dobrze zaprojektowane porównanie funkcji może zwiększyć sprzedaż i poprawić satysfakcję użytkowników. Jeśli uda nam się zaangażować niezdecydowanego klienta w chwili gdy ogarną go wątpliwości — zanim opuści stronę internetową lub zacznie się rozglądać — i umiejętnie poprowadzić go do właściwej decyzji, podniesiemy jego satysfakcję z zakupów. Tym samym zwiększymy zysk i rozbudujemy bazę lojalnych klientów.

infografika: Porównywarka produktów - kiedy zaimplementować
Infografika: Porównywarka produktów – kiedy zaimplementować.
pobierz pdf

Jak stworzyć porównywarkę produktów?

Tabele porównawcze produktów mogą wydawać się łatwym dodatkiem do stron produktowych, ale ich poprawne wykonanie może wymagać dużo pracy. To nie tylko kwestia estetycznej prezentacji atrybutów produktów. Musisz bowiem zagłębić się w preferencje klientów i unikalny punkt sprzedaży każdego produktu.

Jeśli chcesz się dowiedzieć więcej na temat projektowania stron produktowych w sklepie internetowym, sprawdź nasz artykuł Jak zaprojektować stronę produktową w sklepie internetowym.

1. Poznaj produkty

Po pierwsze, musisz naprawdę poznać produkty, które udostępniasz użytkownikom do porównania. Nie chodzi tylko o ich wymiary i wygląd, ale także o ukryte funkcje i korzyści, jakie przynoszą klientom.

Podstawowe informacje, na które powinieneś zwrócić uwagę, to:

  • wymiary produktu,
  • dostępne kolory,
  • szczegółowe informacje dotyczące produktu (np. przekątna ekranu, typ procesora, moc),
  • dodatki dołączone do produktu,
  • cena,
  • użyte materiały lub składniki.

2. Znajdź wyjątkową cechę produktu

Co sprawia, że ​​każdy porównywany produkt różni się od następnego? Większość produktów będzie miała unikalną cechę, nawet jeśli jest to coś tak prostego, jak ich warianty kolorystyczne. Studiując produkty, zwróć uwagę na to, co je wyróżnia.

3. Zrozum swoich klientów

Co najważniejsze, strona porównywania produktów powinna odzwierciedlać potrzeby Twoich klientów. Oznacza to dogłębne zrozumienie tego, czego dokładnie szukają oni w produktach.

Badania UX powinny rozpocząć się, zanim jeszcze Twój sklep zacznie działać, mogą one również pomóc w jego udoskonalaniu i ulepszaniu. We wcześniejszym artykule opowiedziałam na co należy zwrócić uwagę podczas zbierania informacji na temat użytkowników.

4. Zbuduj porównywarkę produktów

Sposób prezentacji porównywarki produktów będzie zależeć od rodzaju sprzedawanego produktu i grupy docelowej. Istnieje jednak kilka prostych zasad, o których należy pamiętać, aby dopasować się do oczekiwań klientów:

  • dołącz zdjęcia – wyświetlaj zdjęcia produktów, które porównujesz, aby klienci dokładnie wiedzieli, które produkty porównują,
  • zadbaj o stronę wizualną – oprócz zdjęć produktów dołącz ikony i inne elementy wizualne, aby utrzymać uwagę czytelnika,
  • wyświetlaj maksymalnie 5 produktów – nie przytłaczaj kupujących tonami produktów,
  • zastanów się nad zainteresowaniami kupujących – na szczycie listy umieść funkcje, które są najważniejsze dla Twoich klientów,
  • zachowaj prostotę – ogranicz tekst do minimum i unikaj podawania skomplikowanych funkcji, które mogą wprowadzać klientów w błąd,
  • dołącz dowód społecznościowy – dodaj oceny i recenzje klientów do swojej tabeli, aby kupujący mogli zobaczyć, jak poprzedni kupujący ocenili produkty.
NASZA REALIZACJA

Projekt sklepu internetowego

Przykład realizacji porównywarki

PORTFOLIO

Porównywarka produktów w e-commerce – dlaczego warto?

Zgodnie z analizą krytycznych incydentów na stronach internetowych (https://www.nngroup.com/articles/the-3cs-of-critical-web-use-collect-compare-choose/), najważniejsze zadania użytkowników w sieci polegają na gromadzeniu i porównywaniu wielu informacji, zwykle po to, by mogli dokonać wyboru.

Biorąc to pod uwagę, udostępnienie użytkownikom możliwości porównania kilku podobnych produktów może mieć kluczowe znaczenie w podjęciu decyzji zakupowej. Ponadto zastosowanie porównywarki:

  • zwiększy konwersję,
  • zatrzyma użytkownika na dłużej,
  • ułatwi dokonanie wyboru, wpływając pozytywnie na doświadczenia zakupowe,
  • zmniejszy liczbę zwrotów i reklamacji.

Porównywarki produktów stanowią ważną część cyklu sprzedaży. Zamiast zmuszać do otwierania setek kart i przeskakiwania między nimi, udostępniaj klientom wszystkie potrzebne im informacje w jednym miejscu. Strony porównujące produkty to świetny sposób na podkreślenie cech i zalet każdego produktu oraz upewnienie się, że klienci dokonują właściwego dla nich wyboru.

Potrzebujesz sklepu z porównywarką?

Opisz potrzeby aby otrzymać wycenę

Wypełnij formularz, skontaktujemy się z Tobą

W jaki sposób porównywanie wpływa na decyzję zakupowe

Ważnym aspektem ludzkiej pamięci jest umiejętność przywoływania położenia rzeczy. W interfejsach użytkownika ta funkcja jest absolutnie niezbędna, ponieważ pozwala użytkownikom szybko zlokalizować ważne elementy. Klasycznym błędem projektowym jest przedstawianie zestawień, w których wszystkie atrybuty produktów stanowią niezróżnicowany bałagan, nawet jeśli większość wartości jest taka sama dla wszystkich lub większości produktów.

Dlatego sposób prezentacji danych jest istotnym czynnikiem przyciągającym odwiedzających. W przypadku porównywarki produktów formatowanie powinno być jasne i proste, a nie naładowane zbędnymi szczegółami, które dezorientują odwiedzających. Korzystanie z porównywarki powinno pozwolić użytkownikom podsumować cechy i uporządkować wiedzę na temat produktu.

Pamiętaj aby stosować tę samą hierarchię informacji dla wszystkich wyświetlanych produktów. Nie zmuszaj użytkownika do każdorazowego uczenia się tabeli na nowo i żmudnego wyszukiwania cech, które są dla niego istotne. Spraw, aby teksty były łatwe do odczytania i przeskanowania. Nie prezentuj zbyt wielu opisów, szczegółów i funkcji produktu.

Podsumowanie

Aby naprawdę zmaksymalizować potencjał swojego sklepu, konieczne jest odpowiadanie na potrzeby użytkowników w każdy możliwy sposób. Chociaż porównywarka produktów może stanowić spore wyzwanie, udostępnienie jej użytkownikom zapewnia sprzedawcom znaczną przewagę nad tymi, którzy jeszcze jej nie posiadają.

Tworząc tabelę porównawczą produktów, przeprowadź badania. Przestudiuj produkty, które zamierzasz uwzględnić, aby określić, co je wyróżnia, ustal co Twoi klienci faktycznie chcą wiedzieć o produktach i stwórz stronę do której użytkownicy będą wracać i której będą ufać.

Zachowania konsumentów w e-commerce

Zachowania konsumentów – definicja

Jak się być może domyślacie, temat nie jest najprostszy. Nie zdziwicie się więc zapewne, że dodam kolejne „wiele” do tych ze wstępu. Definicji pojęcia „zachowania konsumentów” jest… no co najmniej kilka.

My posłużymy się taką: są to działania podejmowane przez klienta na drodze od pierwszego sygnału w głowie „kupiłbym” do sfinalizowania transakcji. Przy czym nie są to same widoczne fizyczne akcje, ale także myśli, skojarzenia i emocje.

Znajomość wzorca według jakiego działają klienci to klucz do sukcesu dużych i małych dostawców produktów. Klucz pozwalający na podejmowanie skutecznych działań reklamowych oraz perfekcyjną organizację sprzedaży. W efekcie metoda na zaspokojenie oczekiwań każdego klienta.

Uniwersalny wzorzec zachowania konsumentów

Niestety taki wzorzec nie istnieje. Badania przeprowadzone przez Google w 2020 roku wykazały, że ludzie podejmują decyzje zakupowe w sposób chaotyczny.

Okazało się, że między wyzwalaczem decyzji o zakupie a finalizacją transakcji jest jeden wielki statystyczny bałagan. Udało się wyodrębnić dwa podstawowe tryby działania klientów:

  • poszerzanie wiedzy o produkcie,
  • redukowanie liczby czynników,

Wiedza ta nie przynosi jednak praktycznych wskazówek jakie działania podjąć, żeby skutecznie przekonać każdego potencjalnego klienta do swojej oferty. Ani stałe zwiększanie liczby informacji na temat produktu w Internecie, ani ograniczanie listy wyróżników produktu nie daje gwarancji dokonania sprzedaży.

Dlaczego warto analizować zachowania klientów

Nie oznacza to jednak, że zachowania konsumentów nie powinny być uwzględniane przy projektowaniu i prowadzeniu sklepów internetowych. Powiedziałbym nawet, że wręcz przeciwnie.

Bez względu na to jakim modelem marketingowym się posługujemy, czy jest to stary poczciwy lejek sprzedażowy, czy ścieżka decyzyjna konsumenta McKinseya ludzie pozostają ludźmi. Mają swoje motywacje, upodobania, swoje autorytety i podejście do życia.

Nawet jeżeli nie potrafimy powiedzieć, co jest języczkiem u wagi, co ostatecznie spowoduje finalizację sprzedaży, powinniśmy metodycznie zwiększać swoje szanse dopięcie transakcji korzystając z wiedzy o zachowaniach konsumentów.

infografika: Zachowania klientów w Internecie
Infografika: Zachowania klientów w Internecie.
pobierz pdf

Jak zwiększać szanse sklepu na finalizację transakcji

Zachęcaj użytkowników do zakupu

Pisaliśmy kiedyś jak ważne jest pierwsze wrażenie w trakcie wizyty w sklepie. Bez względu na to, czy chodzi o sklep stacjonarny, czy internetowy ludzie chcą kupować w miejscach, które im się podobają i które „pasują” do oferowanego asortymentu wyglądem i treścią serwisu. Projektując i utrzymując sklep celuj w pożądane zachowanie „zostaję tutaj na zakupy”, zamiast „uciekam”.

Klienci mają swoje przyzwyczajenia i niechętnie z nich rezygnują. Bardzo wyraźnie widać to na przykładzie oczekiwań dotyczących dostępnych form płatności oraz dostaw. W skrócie często mówimy, że sklepy powinny mieć możliwie szeroki wachlarz możliwości. Nie dlatego, że istnieją użytkownicy oceniający lepiej sklep z 12 opcjami niż z jedną, ale dlatego, że każdy z nas, jako klient, chce znaleźć metodę płatności, której używa. Pamiętaj o tym negocjując umowę z kolejnym dostawcą, bo sprawiasz, że kolejne osoby pomyślą „o, jest dostawa Y, fajnie, kupię tu, po co szukać dalej”.

Ludzie są istotami stadnymi. Jeśli inni coś robią i wyglądają przy tym na zadowolonych, to być może warto postąpić jak oni. Korzystaj z opinii obecnych użytkowników, dziel się nimi z potencjalnymi klientami. Opinie to najprostsza droga do przekonania potencjalnego odbiorcy, żeby zaufał Tobie, tak jak zrobili to wcześniej inni.

Osoby odwiedzające sklep będą zwracały uwagę na różne elementy i będą miały inne oczekiwania. Od Ciebie zależy jak będą wyeksponowane produkty, jak wyraźnie będzie widoczna ścieżka prowadząca do koszyka. Jeśli nie jesteś do końca na bieżąco z nowymi technologiami, uwierz na słowo: większość klientów odwiedza Twój sklep patrząc na niego przez stosunkowo nieduże okienko smartfona. Projektując witrynę zadbaj, by użytkownik komórki powiedział „super, jak tu się wygodnie i szybko kupuje” i faktycznie złożył zamówienie. Jak to zrobić pisaliśmy między innymi we wpisie Responsywna strona internetowa – czym jest i dlaczego jest ważna.

Unikaj krytycznych błędów

Mało kto lubi sytuację, gdy nie dostaje tego, czego się spodziewał. Dorosły kupujący produkt za kilka tysięcy złotych lub droższy funkcjonuje bardzo podobnie do trzylatka chcącego dostać lizaka za złotówkę. Z tą różnicą, że dorosły klient, w przypadku niepowodzenia nie rzuca się na podłogę z płaczem, tylko najczęściej wychodzi ze sklepu z mocnym postanowieniem, że nigdy już do niego nie wróci. Mimo różnego doświadczenia i innych potrzeb zachowania klientów są bardzo zbliżone. Dlatego właśnie tworząc i prowadząc sklep warto poświęcać uwagę poprawności działania witryny.

O ile część niedogodności na stronie sklepu powoduje „tylko” frustrację i w pomyślnych okolicznościach jedynie opóźni finalizację transakcji, o tyle błędy krytyczne zabijają wręcz biznes. Wyobraź sobie, że nie na ekranie smartfona nie widzisz przycisku Zapłać („przesunął się” poza obszar wyświetlany, bo produkt ma długą nazwę i do przycisku nie można się doscrollować). Masz nadzieję, że klient wpisze adres sklepu na laptopie, żeby sfinalizować zakup? Moim zdaniem jest 1 szansa na 50, że tak zrobi. Obawiam się, że zachowaniem wybranym przez większość użytkowników będzie przejście do innego sprzedawcy.

Warto też uwzględniać, że nie wszystkie sytuacje jesteśmy w stanie przewidzieć. Sklep internetowy, to przecież po prostu program komputerowy. A stara prawda programistów mówi, że w każdym programie jest jeszcze jeden błąd ; ). Dlatego dbaj o właściwą obsługę błędów: informuj klienta o tym co zrobić w sytuacji nietypowej, gdzie znaleźć pomoc, jak w alternatywny sposób kontynuować proces zakupu.

Dostosowuj się do swoich klientów

Pożądanym zachowaniem konsumenta w procesie zakupowym w sklepie internetowym jest, gdy bez poszukiwania informacji poza sklepem, dochodzi do koszyka, składa zamówienie i dokonuje płatności. Aby było to możliwe, użytkowników musi czuć się w serwisie dobrze, musi mu się podobać i być wygodnie. Dodatkowo, cały czas w ramach tej samej strony, powinien on dostać komplet potrzebnych informacji utwierdzających go w przekonaniu, że dobrze trafił, że jest w miejscu, gdzie jego potrzeby zostaną zaspokojone.

Mimo, że klienci działają chaotycznie i różnią się między sobą, jest wiele cech, które ich łączą. Produkt, którego potrzebują, wiek, język, wzorce kulturowe, możliwości finansowe, miejsce zamieszkania itp. itd. Zestaw cech przekłada się na definicję grupy docelowej, ta zaś w fazie projektowania użyteczności sklepu internetowego (UX) przekłada się na stworzenie persony. Posługiwanie się personą zarówno w trakcie tworzenia witryny, jak i okresowych przeglądów zwiększa odsetek oczekiwanych, korzystnych dla biznesu zachowań klientów.

Jeśli chcesz poszerzyć swoją wiedzę na temat tworzenia efektywnych person, zapraszamy do lektury naszego artykułu Persona – co to jest i jak ją stworzyć?

Czy Twoja strona odpowiada oczekiwaniom klientów?

Zamów przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Wykorzystuj różne motywacje do zakupów w Internecie

Zachowania ludzi motywowane są wieloma czynnikami. Chcemy wywoływać określone wrażenie, chcemy zwracać uwagę lub nie rzucać się w oczy, chcemy być wyjątkowi a jednocześnie przynależeć do grupy. Mamy własne hierarchie wartości, w swój unikalny sposób zarządzamy czasem. Coś lubimy, coś nas drażni.

Większość z tych czynników jest w różny sposób wykorzystywana w designie produktów i ich opakowań, przekazach marketingowych, materiałach informacyjnych.

Patrząc z perspektywy e-sklepu warto wziąć pod uwagę i wykorzystywać specyficzne motywatory:

  • Dowolny czas zakupu. Sklepy internetowe nie wymagają „zdążenia przed zamknięcie”, pozwalają pogodzić inne zajęcia z zakupem. Podkreślenie tej cechy zdecydowanie pozwala wzmacniać przewagę e-commerce nad sklepami tradycyjnymi,
  • Nielimitowany czas na dokonanie wyboru. Klient e-sklepu nie jest ograniczany godzinami funkcjonowania placówki, ani obecnością sprzedawców. Udostępnienie wyczerpujących i czytelnych materiałów informacyjnych i/lub opinii klientów, pozwala na podjęcie decyzji w indywidualnym tempie.
  • Wygoda. Motywator, którego szerzej nie trzeba omawiać, gdyż stanowi on główną dźwignię e-handlu. Klient nie musi udawać się do sklepu stacjonarnego, aby dokonać zakupu. Najważniejszym zadaniem e-sprzedawcy jest spowodowanie, by użytkownik pozostał aż do finalizacji na stronie sklepu, by nie opuszczał jej w celu znalezienia kontroferty.

Podsumowanie

Niezależnie od przyjętego modelu sprzedaży nie istnieje uniwersalny wzorzec zachowań konsumentów, rozumiany jako gwarancja dokonania sprzedaży. Jest za to wiele dobrze rozpoznanych mechanizmów, które skutecznie oddziałują na część odbiorców.

Im lepiej rozpoznana jest grupa docelowa sklepu internetowego, tym łatwiej identyfikować cechy mające potencjalny wpływ na decyzje zakupowe. Konsekwentne stosowanie person sprzedażowych w trakcie projektowania serwisów i projektowanie skoncentrowane na użytkowników nadal pozostają najlepszym przepisem na sukces e-sklepu.

Jak stworzyć skuteczną podstronę „Kontakt”

Czym jest podstrona kontakt na stronie internetowej?

Podstrona „Kontakt” to element witryny informujący odbiorców w jaki sposób skontaktować się z firmą, sklepem, twórcą do których strona należy.

Jednocześnie jest to element wymagający szczególnej uwagi w trakcie projektowania. W pierwszej chwili odpowiedź na każde pytanie dotyczące tworzonej zakładki kontaktowej wydaje się prosta. Jednak tak nie jest – szybko powstają kolejne, bardziej szczegółowe pytania, na które trzeba odpowiedzieć zanim podstrona powstanie.

– Do czego służy podstrona „Kontakt”? – Do umożliwienia Internaucie, klientowi, użytkownikowi dotarcia do właściciela witryny w inny niż przez stronę WWW sposób. Ale czy każdemu użytkownikowi? W jaki sposób: telefonicznie, mailowo, osobiście? Czy mały sklep prowadzący sprzedaż wysyłkową powinien podać adres?

– Co umieścić na podstronie „Kontakt”? – Numer telefonu i email? Ale czyj, jakiego działu? Czy napisać w jakich godzinach telefon jest czynny? Czy podać jeden numer, czy kilka? Komórkowy, czy stacjonarny? A fax?

Udzielanie odpowiedzi na powyższe i podobne pytania, pomaga ukształtować spójną politykę komunikacji biznesowej z użytkownikami.

Czy podstrona „Kontakt” powinna być na każdej stronie?

Zdecydowana większość stron o przeznaczeniu biznesowym powinna mieć sekcję „Kontakt”. Trudno wyobrazić sobie firmę albo sklep, które nie dają swoim klientom możliwości zadania pytań, zgłoszenia reklamacji albo zwrotu towaru.

Kwestią otwartą jest za to, czy dane kontaktowe umieszczone są na dedykowanej podstronie, czy stanowią element podstrony „O nas”, czy są na przykład integralną częścią stopki.

Dlaczego warto zadbać o stronę kontaktową?

Argumentów jest kilka. Dobra podstrona kontaktowa pozwala na zadanie pytań przez użytkowników, dla których treść serwisu nie jest w pełni zrozumiała i wymaga uzupełnienia. Umożliwia zgłoszenie uwag do działania firmy lub samej witryny. Jest ważnym elementem wizerunku, pokazującym potencjał firmy, jej strukturę i sposób prowadzenia biznesu.

Jednak najważniejszy jest fakt, że podstrona kontakt jest bardzo często formalną wizytówką firmy. Tak samo ważną jak na poziomie emocjonalnym strona główna.

Strona kontaktowa – jakie zamieścić dane?

Zawartość podstrony „Kontakt” może się różnić w zależności od firmy i charakteru strony. Ma na nią wpływ także to, jaki efekt – w tym wizerunkowy – chcemy osiągnąć. Poniżej przedstawiam typowe informacje wraz z krótkim omówieniem.

Nazwa firmy

Bardzo często marka produktu lub produktów kojarzonych z przedsiębiorstwem jest inna niż nazwa firmy. W takim przypadku podanie nazwy w sekcji „Kontakt” ma walor formalny i informacyjny. Ale nazwę firmy warto umieszczać także w sytuacji gdy jest ona zbieżna z marką. W obu sytuacjach klient dostaje sygnał podnoszący zaufanie do kontrahenta, w efekcie chętniej podejmuje współpracę.

Warto w tym miejscu przypomnieć, że zgodnie z obowiązującymi przepisami przedsiębiorcy mają obowiązek podawania na stronach internetowych danych rejestrowych. W zależności od formy prawnej działalności może być to NIP, KRS i/lub informacja o kapitale zakładowym spółki.

Adres

Wbrew pozorom nie w każdym przypadku jest to niezbędny element podstrony „Kontakt”. Jeżeli charakter działania firmy nie wymaga odwiedzenia siedziby firmy w celu złożenia zamówienia lub odbioru towaru podanie fizycznego adresu nie ma większego sensu.

Jednak np. dla firm średniej wielkości o marce, która nie jest powszechnie znana, umieszczenie adresu jest pośrednim potwierdzeniem wiarygodności. Dowodem na to, że przedsiębiorstwo istnieje i działa.

W przypadku dużych podmiotów podawanie adresu jest standardem, tym bardziej, że lokalizacja siedziby w prestiżowych dzielnicach lub budynkach podkreśla status biznesu.

Decydując się na podanie adresu warto zadbać, żeby był kompletny. Powinien zawierać kod pocztowy oraz oznaczenie lokalu, bądź innej cechy umożliwiającej odnalezienie firmy pod adresem. Należy też wyraźnie zaznaczyć, jaki adres podajemy, np.: siedziby, sklepu, magazynu, punktu obsługi klienta, przychodni itp.

infografika: Jak stworzyć skuteczną podstronę 'Kontakt'
Infografika: Jak stworzyć skuteczną podstronę 'Kontakt’.
pobierz pdf

Mapa

Umieszczenie mapy wskazującej lokalizację biznesu jest dość częstym zabiegiem. Podobnie jak w przypadku adresu korespondencyjnego ma uzasadnienie, gdy nasza działalność wiąże się z fizyczną obecnością klientów w siedzibie.

Mapa ma również znaczenie wizerunkowe, w przypadku szczególnie atrakcyjnie położonych siedzib firmowych. W przedsiębiorstwach wieloodziałowych lub z rozbudowaną siecią partnerską mapa obrazowo prezentuje potencjał biznesu. Jest też często wykorzystywana jako wygodne narzędzie do znalezienia najbliższej placówki firmy.

Są sytuacje, w których mapa jest niezbędna. Jeśli odbiór towaru jest możliwy wyłącznie z firmowego magazynu lub jeżeli wykonanie usługi jest związane z obecnością klienta (na przykład jest to usługa medyczna). W takich przypadkach dobrze jest dodać także praktyczne wskazówki dotyczące dojazdu, w tym także z wykorzystaniem transportu publicznego, informacje dotyczące miejsc parkingowych itp.

Zdjęcia

Na stronach kontaktowych wykorzystywane są również fotografie. Bez względu na to, czy są to zdjęcia siedziby firmy, wnętrz biur lub hal produkcyjnych, czy ludzi, najczęściej służą budowie wizerunku.

Zawartość zdjęć ma pokazać prestiż i potencjał firmy oraz profesjonalizm i podejście do klienta ludzi związanych z firmą.

Decydując się na wykorzystanie fotografii na podstronie „Kontakt” trzeba pamiętać, że muszą być one wykonane profesjonalnie. Klienci kupują oczami. Dotyczy to nie tylko towarów i usług, ale i sprzedawców. Dobre, wzbudzające zaufanie, zdjęcie menedżera Biura Obsługi Klienta lub przedstawiciela handlowego może zachęcić użytkownika do zadania pytań albo podzielenia się opinią. Amatorskie i źle wykadrowane wręcz przeciwnie, zniechęcić do kontaktu.

Godziny funkcjonowania

Tworząc podstronę „Kontakt” warto pamiętać także o podaniu godzin pracy przedsiębiorstwa lub aktywności infolinii lub Biura Obsługi Klienta. Informacja ta pozwala uniknąć nieporozumień, skarg i negatywnych opinii związanych z trudnością w nawiązaniu kontaktu.

Numery telefonów

Namiary telefoniczne na stronach kontaktowych to temat rzeka. Problemu nie mają jedynie osoby fizyczne prowadzące jednoosobową działalność gospodarcze, które mają jeden numer telefonu. Ich decyzja ogranicza się do stwierdzenia, czy umieszczają numer czy nie. Wszyscy pozostali przedsiębiorcy mają do rozwiązania bardziej skomplikowane zagadnienie.

Czy lepiej jest podać numer stacjonarny (bo wskazuje na posiadanie „poważnej” siedziby) czy komórkowy? Czy podawać numer faksu i czy w ogóle warto jeszcze w XXI wieku mieć fax? Podać jeden numer czy wiele? Czy podać ogólny numer do biura, czy numery do poszczególnych działów? Czy przy numerach podawać nazwiska?

Nie istnieje uniwersalna recepta dająca odpowiedź każdej firmie. Decydując o wyborze numerów, trzeba wyśrodkować między wygodą klienta a możliwością obsługi przychodzących telefonów. Wygoda klienta to przede wszystkim możliwie szybkie nawiązanie kontaktu z człowiekiem. Jeśli zaś chodzi o możliwość obsługi, dobrym celem jest nie dać zasypać się telefonami, które nie mają wartości biznesowej. Mówiąc inaczej takimi, na które odpowiedzi powinny znajdować się na stronie na przykład w postaci FAQ.

Decyzja o tym, czy podawane są numery konkretnych osób, działów czy centrali lub infolinii zależy głównie od wielkości i struktury firmy.

Adresy e-mail

Adresy poczty elektronicznej są najczęściej występującym składnikiem stron kontaktowych. Bez względu na wielkość i charakter firmy dają klientom możliwość podjęcia komunikacji. Na dodatek użytkownik decyduje o czasie wysyłki, a administrator serwisu może wybrać czas odpowiedzi.

Wadą korzystania z poczty elektronicznej jest bezosobowy sposób prowadzenia komunikacji. Duża część użytkowników strony chcących nawiązać kontakt preferuje kontakt osobisty lub telefoniczny. Dlatego dobrą praktyką jest wysyłanie automatycznej informacji o otrzymaniu informacji i przybliżonym czasie odpowiedzi.

Przy podejmowaniu decyzji jakie adresy email umieścić na podstronie „Kontakt” warto wziąć pod uwagę wygodę klienta, który powinien móc łatwo i precyzyjnie wybrać odbiorcę odpowiedniego dla swojej sprawy. Ponadto czytelna kategoryzacja adresów sprawi, że użytkownik będzie mieć wrażenie, że jego mail nie trafi do bezdennego worka i dostanie szybką, merytoryczną odpowiedź.

Należy pamiętać też o tym, że służbowe adresy e-mail powinny być utworzone w firmowej domenie i być związane z danymi personalnymi osoby lub działu przedsiębiorstwa. Bezpłatny adres (jak gmail, hotmail, yahoo, wp, onet) ze śmiesznym prefiksem potrafi skutecznie obniżyć prestiż firmy.

Formularz kontaktowy

Formularze kontaktowe są wykorzystywane bardzo często. Dają możliwość nawiązania kontaktu oraz jednoczesnego wcześniejszego zasygnalizowania tematu, którego rozmowa będzie dotyczyła.

Projektowanie formularzy kontaktowych jest odrębnym zagadnieniem. Pisaliśmy o nim w jednym z wcześniejszych wpisów na blogu.

Decydując się na użycie formularza warto zadbać, żeby był on wygodny dla odbiorców. Nadmiar pól obowiązkowych, skomplikowany sposób kategoryzacji tematu kontaktu lub zastosowanie nieintuicyjnych schematów graficznych może obniżyć liczbę zgłoszeń w kanale nawet o kilkadziesiąt procent.

Linki do Social Media

Ostatnim elementem, o którym napiszę są linki do kont i profili w mediach społecznościowych. Umieszczenie tych łączy jest niezwykle istotne, jeżeli głównym kanałem bieżącej komunikacji z klientami są właśnie social media. Warto jednak zaznaczyć, że nawet jeżeli profile mają charakter wyłącznie informacyjny i nie są miejscem dynamicznej konwersacji warto zapraszać na nie użytkowników. Głównie dlatego, że za ich pośrednictwem można stosunkowo łatwo przypominać o sobie potencjalnym klientom.

Chcesz zamówić nowoczesną stronę WWW?

Prześlij brief, wycenimy projekt

Wypełnij formularz, skontaktujemy się z Tobą

Podstrona kontakt a RWD

Zakładka „Kontakt” bezwzględnie powinna zostać zaprojektowana zgodnie z regułami Responsive Web Design. Liczba mobilnych użytkowników Internetu stale rośnie i nic nie zapowiada szybkiej zmiany tego trendu.

Nawet zakładając, że potencjalni klienci dokonują tylko wstępnego przeglądu oferty przy użyciu smartfona, a transakcję będą finalizowali przy użyciu komputera należy umożliwić im możliwie łatwy kontakt.

Projektując responsywny widok podstrony „Kontakt” warto w szczególności zadbać o wysoką użyteczność formularza kontaktowego.

Podsumowanie

Podstrona „Kontakt” jest elementem witryny odwiedzanym przez użytkowników zainteresowanych złożeniem zamówienia lub zadaniem dodatkowych pytań.

Dlatego tworząc jej projekt warto myśleć o tej stronie jednocześnie jak o formalnej wizytówce firmowej i o wygodnym poradniku mówiącym jak skontaktować się w ważnych dla klienta sprawach.

Zawartość strony kontaktowej zależy od strategii komunikacyjnej oraz struktury firmy.

Jak stworzyć podstronę „O nas”

Czym jest podstrona O nas?

Podstrona „O nas” to po pierwsze wizytówka firmy. Jest to miejsce, w którym to Ty decydujesz, w jaki sposób przedstawisz siebie i swój biznes. Opisujesz na niej czym się Twoja firma zajmuje, skąd pomysł na jej powstanie, jaka jest jej historia, czy przyświecają Wam jakieś idee i wiele, wiele innych.

Być może chcesz pokazać, czym wyróżnia się Twoje przedsiębiorstwo i dlaczego klient albo kontrahent powinni rozpocząć współpracę właśnie z Tobą. To również odpowiednie miejsce, aby pokazać wyjątkowość firmy i potwierdzić swój profesjonalizm.

Strona „O nas” to też forma pokazania, że firma rzeczywiście istnieje.

Strona „O nas” – czy ktoś to w ogóle czyta?

Być może strona „O nas” nie jest pierwszą stroną, na którą wchodzi użytkownik, ale na pewno w wielu przypadkach jest często odwiedzana. Niejednokrotnie zdarza się, że jej zawartość decyduje, czy klient dokona zakupu.

Wyobraźmy sobie sytuację, w której klient znajduje w Twoim sklepie poszukiwany przez niego przedmiot, czy usługę. Cena go zadowala i chciałby zamówić produkt, ale nie zna sklepu i nie wie, czy jest on godny zaufania.

Podstrona „O nas” może zaważyć, czy klient Ci zaufa i dokona zakupu u Ciebie.

Jeśli chcesz się dowiedzieć więcej o skutecznych strategiach projektowania stron produktowych, które przekładają się na realne zyski, to koniecznie sprawdź nasz artykuł Jak zaprojektować stronę produktową.

Strona „o nas” — jak napisać i czy warto to zrobić?

Jeśli zastanawiasz się, czy warto uwzględnić na Twojej stronie sekcję „O nas” – odpowiadamy: zdecydowanie warto! To ona niejako buduje relacje zarówno z klientem końcowym, jak i biznesowym.

Jak ją napisać? Na pewno przygotuj tekst w taki sposób, aby pasował do grupy docelowej Twojej witryny. Poza tym pamiętaj, aby tekst nie był zbyt długi. Postaw też na autentyczność. Stosowanie gotowców i wszędzie spotykanych frazesów na pewno nie sprawi, że opis spełni jedną ze swoich głównych funkcji, czyli nie wzbudzi zaufania.

Postaraj się, aby tekst na podstronie „O nas” był przyjazny zarówno dla klienta końcowego, klienta biznesowego jak i potencjalnego pracownika, który chciałby zatrudnić się w Twojej firmie.

Brak podstrony O nas – strona internetowa, która nie budzi zaufania

Rezygnacja z podstrony „O nas” jest ryzykownym posunięciem, szczególnie dla małej i mało znanej firmy. Rezygnując z tej strony należy mieć świadomość, że możemy nie wzbudzić zaufania klienta, nie potwierdzimy też, że firma rzeczywiście funkcjonuje. Klient mający wątpliwości czy firma istnieje z pewnością wybierze innego dostawce produktu lub usługi.

infografika: Podstrona 'O nas'. Jak zbudować, aby wzbudzić zaufanie
Infografika: Podstrona 'O nas’. Jak zbudować, aby wzbudzić zaufanie.
pobierz pdf

Opis firmy „o nas” — częste błędy

Przygotowując się do stworzenia opisu na podstronę „O nas” warto zwrócić uwagę na potencjalne błędy, które można popełnić podczas pracy. Jedne z najważniejszych to:

  • Zbyt długa treść – jeśli historia jest dobrze napisana, klient chętnie ją przeczyta, ale nie jest tajemnicą, że większość ludzi tylko skanuje tekst lub w ogóle go nie czyta.
  • Treść niedopasowana do grupy docelowej – warto zastanowić się do kogo kierujemy treść strony i napisać ją tak, aby nasza grupa docelowa ją zrozumiała i poczuła, że tekst jest do niej skierowany.
  • Banalne sformułowania – pisząc tekst na podstronę „O nas” warto być autentycznym i napisać coś od siebie. Stosowanie banalnych stwierdzeń, np. „Dopasujemy ofertę do Twoich potrzeb” w niczym Cię nie wyróżni i będzie wyglądało jak skopiowany z innej strony tekst.
  • Branżowa nomenklatura – jeśli chcesz dotrzeć do możliwe szerokiego grona odbiorców unikaj słów powszechnie nierozumianych.
  • Mylenie z ofertą – strona „O nas” bywa mylona z ofertą. Warto pamiętać, że to coś więcej, a oferta powinna znaleźć się w innym miejscu na stronie.

Co powinna zawierać strona O nas?

Strona „O nas” powinna prezentować, czym zajmuje się firma, jakie jest jej doświadczenie w oferowaniu produktu czy usługi. Być może za biznesem stoi ciekawa historia albo idea, która przyświeca założycielowi?

Pokaż zespół

Elementem, który wzbudza zaufanie to również zaprezentowanie swojej „twarzy” (niekoniecznie mam tu na myśli zdjęcie). Pokazanie, że za biznesem stoją żywi ludzie i ich praca to dobra droga do zaskarbienia sympatii i zaufania wśród klientów. To tutaj możesz też pokazać, że Ty i Twoi pracownicy jesteście profesjonalistami.

Prezentacja zespołu pokazuje też strukturę firmy, co może być ciekawe dla potencjalnych pracowników lub kontrahentów biznesowych.

Opisz Twój model biznesowy

Opisanie modelu biznesowego warto zawrzeć na podstronie „O nas” ze względu na kontakty b2b oraz potencjalnych nowych pracowników. Nie chodzi oczywiście o przestawianie szczegółowych planów Twojej firmy, ale napisanie w kilku zdaniach o Waszych celach i sposobie pracy tylko uwiarygodni biznes.

Zdjęcie

Jeśli chcesz pokazać zdjęcie swoje lub swojego zespołu przemyśl, w jaki sposób chcesz, aby Twoi klienci Was odebrali. Czy zależy Ci na wizerunku twardo stąpającego po ziemi profesjonalisty? A może chcesz zaprezentować się z kreatywnej strony? Którąkolwiek opcje wybierzesz zadbaj, aby zdjęcie było dobrej jakości. Najlepiej gdyby było profesjonalnie wykonane, ale kluczowe jest to, aby było wiarygodne – zdjęcie o charakterze stockowym nie będzie dobrym pomysłem.

Szukasz wykonawcy strony internetowej lub e-sklepu?

Zamów profesjonalny projekt i wdrożenie

Czy każda firma potrzebuje podstrony „O nas”

Większość firm potrzebuje podstrony „O nas”. Powodów, dla których warto pamiętać o takiej stronie jest wiele, ale najważniejsze z nich to wiarygodność, wzbudzanie zaufania i kreowanie pozytywnego wizerunku.

Można zaobserwować, że np. duże sklepy internetowe nie mają takich podstron. Są na tyle znane, że nie muszą informować o sobie w tej formie. Poza tym zaprezentowanie idei czy pracowników firmy nie przełoży się w ich przypadku w żaden sposób na sprzedaż. Bywa jednak, że już na stronach korporacyjnych tychże firm takie opisy można znaleźć, czasami są nawet bardzo rozbudowane.

Podsumowanie

Podstrona „O nas” jest ważna wizytówką Twojej firmy. Może decydować o tym, czy klient zdecyduje się na zakup w Twoim sklepie czy skorzysta z usług, które oferujesz.

Sekcja „O nas” to także skuteczne narzędzie budowania wiarygodności firmy i jej marki. Wzbudzanie zaufania klientów jest z kolei ważnym czynnikiem wpływającym na sprzedaż.

Od Ciebie zależy w jaki sposób się zaprezentujesz, ale warto zrobić to w sposób przemyślany. Dobrze opowiedziana historia na pewno przyciągnie uwagę Twoich klientów.

Jak powinna wyglądać stopka na stronie www?

Stopka znajduje się na dole każdej strony internetowej. Służyć może do przechowywania ważnych informacji i linków, potrzebnych użytkownikowi do nawigacji. Zawiera takie informacje jak: dane firmy, ikony i linki przekierowujące do mediów społecznościowych, politykę prywatności, informację o prawach autorskich, dane kontaktowe, formularz kontaktowy, linki do najważniejszych podstron itp.

Stopka nie musi zawierać wszystkich powyższych informacji, ale większość z nich posiada przynajmniej część z tych danych. Takie podejście wychodzi na przeciw zachowaniom użytkowników przewijających stronę w poszukiwaniu danych, których nie znaleźli w nagłówku lub treści strony. Dlatego stopka jest jak siatka bezpieczeństwa dla odwiedzających witrynę, którzy do tej pory nie otrzymali odpowiedzi na nurtujące ich pytania. Łapie ich w ostatniej chwili i ułatwia nawigację po stronie.

Projektowanie stopki – o czym należy pamiętać?

Stopka to jeden z elementów, na który zwykle nie zwracamy uwagi, ale w rzeczywistości często pomaga nam poruszać się po witrynie. Jest niewielka, ale może wykonać dla Ciebie dużo pracy, jeśli jej na to pozwolisz. Zastanów się dokładnie nad tym, co chcesz uwzględnić w projekcie i wykorzystaj maksymalnie te ostatnie kilka centymetrów swojej strony internetowej.

Stopki są istotnym elementem strony pod kilkoma względami:

Odwiedzający oczekują, że znajdą je na dole strony.

Kluczową cechą dobrego projektu strony internetowej jest umożliwienie odwiedzającym jak najłatwiejszego znalezienia tego, czego szukają. Stopki występują powszechnie. Ludzie wiedzą, że jeśli nie mogą znaleźć czegoś wyżej na stronie, zwykle wystarczy przewinąć w dół, aby zobaczyć dłuższą listę opcji.

Są sprytną taktyką budowania linków wewnętrznych.

Linkowanie wewnętrzne jest ważną częścią dobrej strategii SEO (optymalizacji wyszukiwarek). Stopka to sprytny sposób umieszczania linków do wszystkich najważniejszych stron wraz z wybranym kluczowym tekstem każdej podstrony.

Zapewniają dodatkowe miejsce na linki dla których zabrakło miejsca w głównym menu.

Często uwzględnienie każdego linku w menu głównym nie jest praktyczne i negatywnie wpływa na design strony. Dlatego dobrą i sprawdzoną praktyką jest umieszczanie w stopce rzadziej używanych linków np. przekierowanie do mediów społecznościowych czy polityki prywatności.

Co powinna zawierać stopka strony internetowej?

Dodanie rozbudowanej stopki do witryny powinno być oczywistą decyzją, ale ustalenie co umieścić w stopce może być bardziej skomplikowane. Poniżej znajdziesz listę rzeczy, które warto wziąć pod uwagę projektując stopkę internetową.

infografika: stopka na stronie WWW - czym jest i co powinna zawierać
Infografika: Stopka na stronie WWW – czym jest i co powinna zawierać.
pobierz pdf

Elementy, które trzeba umieścić w stopce strony internetowej:

  • Kontakt – Odwiedzający wręcz oczekują, że znajdą Twoje dane kontaktowe właśnie w stopce. Umieszczenie ich w projekcie jest teraz uważane za standard projektowania stron internetowych. Numery telefonów, adresy wraz z linkami do map i formularze kontaktowe to dobre informacje do udostępnienia, chociaż możesz znaleźć o wiele więcej w zależności od konkretnej niszy.
  • Linki wewnętrzne – Stopka może funkcjonować jako drugie menu, ale takie, w którym możesz przekierować użytkownika na wybrane przez Ciebie kategorie. Jak wspomniałam wcześniej odpowiednio dobrane linki będą miały pozytywny wpływ na SEO Twojej witryny. Przede wszystkim dlatego, że ułatwiają robotom indeksującym wyszukiwanie najważniejszych stron i wyświetlanie najczęściej używanych fraz.
  • Polityka prywatności i regulamin – Zapewnienie odwiedzających, że dbasz o ich prywatność to duży plus, ponieważ budowanie zaufania w przestrzeni cyfrowej może być dość trudne. Jednocześnie regulamin z informacjami dotyczącymi ewentualnych reklamacji i zwrotów zapewni użytkowników, że dbasz o ich satysfakcję.
  • Prawa autorskie – Chociaż nie daje pewnej ochrony przed plagiatami, nadal warto zadbać o ten element. Pamiętaj, aby ustawić kod, tak aby data w tekście dotyczącym praw autorskich zmieniła się automatycznie.

Co jeszcze możemy umieścić w stopce strony?

  • Ikony mediów społecznościowych – Media społecznościowe mogą być świetnym sposobem na generowanie ruchu w Twojej witrynie. Możesz kierować ruch z mediów społecznościowych na Twoją witrynę, ale też możesz przekierować ruch z witryny na linki mediów społecznościowych. Decyzję o umieszczeniu ikon podejmij kierując się celami biznesowymi Twojej marki.
  • Link zapisu do newslettera – Chociaż zapisy do newslettera zwykle znajdują swoje miejsce na bardziej znaczących stronach, takich jak blog czy strony produktów, umieszczenie formularza zapisu w stopce nadal jest zgodne z najlepszymi praktykami i bardzo popularne.
  • Informacje o nagrody i certyfikatach – Nagrody i certyfikaty są rodzajem społecznego dowodu. Dają do zrozumienia, że ​​jesteś ceniony w swojej niszy, co w naturalny sposób zwiększa pozycję na rynku.
  • Wyszukiwarka – Ponownie, jeśli odwiedzający przewinął na sam dół strony, najprawdopodobniej nie znalazł tego, czego szuka. Umieszczenie wyszukiwarki informacji na stronie w stopce może zaradzić frustracji, jakiej doświadcza odwiedzający szukający czegoś konkretnego.
  • Wezwanie do działania – Stopka to również dobre miejsce na umieszczenie 'okolicznościowych’ wezwań do działania, takich jak np. weź udział w konkursie, pobierz e-book itp.
Szukasz wykonawcy strony internetowej lub e-sklepu?

Zamów profesjonalny projekt i wdrożenie

Stopka na stronie internetowej a pozycjonowanie

Algorytmy wyszukiwarek internetowych otoczone są mgiełką tajemnicy. Trudno jednoznacznie stwierdzić, w jakim stopniu stopka wpływa na pozycję witryny w wynikach prezentowanych użytkownikom. Zdania wśród specjalistów SEO są podzielone. Dość często pojawia się opinia, że wpływ na rankingi jest mniejszy niż innych elementów witryny.

Nie da się jednak zaprzeczyć, że projektowanie architektury informacji witryny z uwzględnieniem dodatkowej, często odwiedzanej przez odbiorców przestrzeni sprzyja lepszemu projektowaniu struktury serwisu i systemu nawigacji.

Podsumowanie

Stopka Twojej witryny może być tętniącym życiem miejscem, które służy cennym celom promowania Twojej witryny i jej treści, Twoich produktów, stron w mediach społecznościowych i nie tylko. Chodzi o doświadczenie użytkownika. Przyciągnij uwagę użytkownika, ułatw użytkownikom znajdowanie treści i promuj interesujące linki i informacje w swojej witrynie. Posiadanie dobrej stopki zwiększy liczbę odsłon i pomoże promować Twoją witrynę i markę.

Responsywna strona internetowa – czym jest i dlaczego jest ważna?

Strona responsywna – co to takiego

Najkrócej mówiąc jest to strona internetowa, która „dobrze” wyświetla się na każdym urządzeniu, na którym można ją odczytać. Przy czym „dobrze” znaczy w sposób umożliwiający dostęp do treści i udostępnianych przez stronę funkcji. Warto też zaznaczyć, że „dobrze” nie znaczy „tak samo” dla różnych rozmiarów ekranów.

Projektowanie stron responsywnych

Są dwie strategie tworzenia stron responsywnych. Celem obu jest stworzenie witryny lub aplikacji webowej o wysokiej użyteczności na różnych urządzeniach. Jednak sam proces projektowy różni się znacznie.

Responsive Web Design (RWD)

Pierwsza ze strategii wywodzi się z klasycznego projektowania interfejsów dla aplikacji dostępnych na komputerach stacjonarnych, wyposażonych w duże monitory (1024px szerokości i więcej).

Responsywne projektowanie stron internetowych odnosi się do sposobu projektowania strony internetowej, który pozwala dostosować ją do rozmiaru urządzenia, na którym użytkownicy przeglądają stronę. Obejmują one wyświetlanie na telefonach komórkowych, tabletach i komputerach stacjonarnych.

Inaczej mówiąc RWD to stworzenie projektu na duży wyświetlacz i dopasowywanie go do warunków ekranów o mniejszych rozdzielczościach.

Mobile First Design

Druga strategia, historycznie znacznie bliższa współczesności, zakłada, że w pierwszej kolejności powstaje projekt na małe wyświetlacze. Następnie projekt jest rozbudowywany i dopasowywany do realiów komputerowych: znacznie większej ilości miejsca na treść oraz bogatszej palety dostępnych interakcji (klawiatura, mysz zamiast interfejsu dotykowego).

Strona responsywna a strona mobilna

Co ciekawe, zastosowanie podejścia mobile first design nie zawsze kończy się powstaniem witryny responsywnej. Ze względu na stale rosnący udział w rynku użytkowników korzystających z Internetu wyłącznie przy użyciu smartfonów, często projektowanie rozwiązania ogranicza się do wersji mobilnych.

Potrzebujesz profesjonanej reponsywnej strony WWW?

Zamów projekt i wdrożenie witryny

Dlaczego strona responsywna jest tak ważna?

Istnieje wiele korzyści związanych z responsywnym projektowaniem stron internetowych. Związane są one zarówno z ich efektywnością (pozyskiwanie leadów, sprzedaż w sklepie internetowym) jak oraz kosztami utrzymania i rozwoju.

Dostęp do grupy docelowej

Widać to szczególnie wyraźnie na rynku B2C, czyli segmencie zdominowanym przez użytkowników mobilnych.

Brak strony responsywnej (lub mobilnej) odcina witrynę od kilkudziesięciu procent potencjalnych odbiorców.

Responsywna wersja witryny jest dla wielu biznesów must have, gdyż decyduje w stopniu kluczowym o istnieniu interesu.

Dorównywanie konkurencji

Stosunkowo niski próg wejścia w biznes e-commerce i gwałtowny rozwój technologii sprawiają, że praktycznie każdy produkt ma wielu potencjalnych dostawców. To zaś powoduje podniesienie poziomu oczekiwań klientów. Dzisiejsi odbiorcy chcą znaleźć produkt szybko, intuicyjnie dodać go do koszyka i wygodnie zapłacić.

Brak strony responsywnej może spowodować przegraną w przedbiegach. Klient łatwo zrezygnuje nawet z tańszej oferty na stronie przygotowanej „na laptopa”, jeśli dwa kliknięcia dalej dokona zakupu w minutę używając tylko kciuka. Myślisz, że to nie ma sensu? Wytłumacz swoje zdanie milionom Internautów ; )

Lepsze SEO

Kolejną zaletą responsywnego projektowania stron internetowych jest poprawa pozycji w wyszukiwarkach. Od kwietnia 2015r. Google bierze pod uwagę responsywność witryny jako jeden z sygnałów decydujących o pozycji na stronie wyników wyszukiwania. Jeśli Twoja witryna jest responsywna, gigant wyszukiwarek umieści ją wyżej na stronie wyników.

Szybszy czas ładowania strony

Projektowanie stron responsywnych wymusza też uwzględnienie jakości łącza użytkownika i wydajności stosowanego urządzenia.

Witryny responsywne zwykle ładują się szybciej na wszystkich urządzeniach, ale zwłaszcza na smartfonach i tabletach. Dzięki responsywnym obrazom i płynnym siatkom ładowanie strony zajmuje znacznie mniej czasu, co ma bezpośredni wpływ na współczynnik odrzuceń. Według badań, 53% użytkowników mobilnych opuści witrynę, jeśli wczytanie strony zajmie więcej niż trzy sekundy (https://www.thinkwithgoogle.com/consumer-insights/consumer-trends/mobile-site-load-time-statistics/). Te same badania pokazują, że strony, które szybko się ładują, korzystają z większej ilości czasu spędzonego w witrynie, a także z lepszych współczynników konwersji.

Łatwiejsze zarządzanie treścią i rozwój strony

Strona responsywna zapewnia obsługę całego spektrum urządzeń użytkowników. Aby osiągnąć taki efekt w inny sposób, należałoby zbudować odrębne wersje witryny dla różnych rozdzielczości ekranu. To zaś powodowałoby konieczność odrębnego zasilania serwisu w treści.

Responsywny interfejs wykorzystuje jeden zestaw treści, zmieniając jedynie sposób ich prezentacji.

infografika: Responsywna strona internetowa - co to jest i dlaczego jest ważna.
Infografika: Responsywna strona internetowa – co to jest i dlaczego jest ważna.
pobierz pdf

Jak sprawdzić czy strona jest responsywna?

Test projektowania responsywnego polega na testowaniu strony internetowej lub adresu URL z różnych urządzeń. Praktycznie nie da się całkowicie przetestować responsywnej strony internetowej, ponieważ w tym celu musimy ustawić różne systemy dla różnych rozmiarów ekranu.

Możliwym sposobem przeprowadzenia testu responsywnego jest zmiana rozmiaru okna przeglądarki. Niektóre przeglądarki, takie jak Safari czy Chrome, udostępniają wtyczki lub rozszerzenia przeglądarki, które pomogą Ci wyświetlić stronę w różnych rozdzielczościach ekranu.

Podczas testowania strony zmniejsz i powiększ okno przeglądarki, aby zobaczyć czy elementy na stronie się skalują. Sprawdź, czy wszystkie obrazy, filmy i dźwięki znajdujące się na Twojej stronie są wyświetlane i odtwarzane bez problemów. Upewnij się, że użytkownik w łatwy sposób może nawigować po stronie, bez konieczności powiększania obrazu i przesuwania treści.

Co zrobić żeby strona była responsywna?

Projektowanie responsywne to nie tylko skalowanie wszystkich elementów, tak aby zmieściły się na ekranie — to także dostosowanie do możliwości urządzenia i przeglądarki internetowej.

Poniżej znajdziesz kilka wskazówek na które warto zwrócić uwagę rozpoczynając projekt.

Dostępność

Upewnij się, że dla wszystkich obsługiwanych rozdzielczości informacje są łatwo dostępne w Twojej witrynie. Wszystkie istotne elementy, takie jak kluczowe treści, produkty i dane kontaktowe, są odpowiednio widoczne.

Zadbaj o widoczność i łatwość posługiwania się elementami odpowiedzialnymi za interakcje z witryną: przyciskami, dropdownami, suwakami etc.

Intuicyjna nawigacja

Nawigacja odgrywa kluczową rolę w tworzeniu responsywnego projektu. Odwiedzający powinni mieć możliwość poruszania się po Twojej witrynie bez żadnych niedogodności. Wszystkie opcje dostępne w menu powinny być łatwo dostępne i wygodne w użyciu.

Wykorzystuj w pełni charakterystyczne dla poszczególnych urządzeń opcje sterowania interakcjami.

Jeśli chcesz się dowiedzieć więcej o tym, jak efektywnie zaprojektować nawigację na swojej stronie internetowej, to sprawdź artykuł Projektowanie nawigacji na stronie www.

NASZA REALIZACJA

Optymalizacja multimediów

Obrazy sprawiają, że Twoje treści są bardziej wciągające. Szczególnie ważne dla widoków na urządzenia mobilne jest, aby obrazy były odpowiednio zoptymalizowane, tzn. miały możliwie wysoką jakość przy jednoczesnym ograniczeniu wielkości plików.

Zoptymalizowane multimedia obniżają koszty dostarczania treści i ceny hostingu, ponieważ redukują transfer danych. Dodając do zalet, zoptymalizowane treści graficzne pomagają też poprawić pozycję Twojej witryny w Google. Więcej na ten temat dowiesz się z artykułu poświęconego Core Web Vitals.

Podsumowanie

Na pierwszy rzut oka może się wydawać, że responsywne projektowanie stron internetowych polega po prostu na dopasowywaniu treści do różnych urządzeń. Ale cel jest znacznie większy – poprzez nadanie priorytetu treści, wpływa na całokształt doświadczeń użytkowników ze stroną internetową.

Jeśli Twoja witryna nie jest jeszcze responsywna, zaplanowanie przeprojektowania nowego, płynnego układu to świetny pierwszy krok. Pomoże Ci określić, które elementy strony są najważniejsze, które strony można wyeliminować i ile treści chcesz zachować na swojej witrynie.

Jak dobrze zaprojektować stronę produktową, która generuje sprzedaż

Dobra strona produktowa – kluczowe elementy

Strona produktowa jest równie ważna jak strona główna w sklepie internetowym. Zdarza się bowiem wielokrotnie, że potencjalny klient trafi na stronę produktową bezpośrednio z wyników wyszukiwania w przeglądarce, a nie przez stronę główną. Wtedy też koniecznie trzeba wywołać w kliencie jak najlepsze pierwsze wrażenie, które może zaważyć na tym, czy klient zapozna się z treścią strony i doda produkt do koszyka.

W kwestii pozostałych kluczowych elementów nie ma znaczenia, w jaki sposób klient trafi na stronę produktową. Wszystkie elementy są również ważne i trzeba o nie zadbać.

Najważniejsze elementy dobrej strony produktowej to widoczna cena produktu, precyzyjny, ale niezbyt długi opis oraz zdjęcia. Jeśli produkt ma warianty (np. kolorystyczne) warto je pokazać, a jeśli jest konieczne, należy dodać instrukcję obsługi.

Zdjęcie produktu

Na stronie produktowej nie może zabraknąć zdjęcia. Dobre zdjęcie a najlepiej zdjęcia to jeden z najważniejszych elementów strony produktowej. Czasami ludzie nie czytają opisu i właśnie zdjęcie decyduje, czy produkt trafi do koszyka.

Zdjęcia powinny pokazywać zarówno produkt ogólnie z różnych perspektyw, jak i szczegóły (np. ozdobne fragmenty lub faktura tworzywa). W przypadku detalu, potrzebne będą zdjęcia wysokiej jakości.

Poza tym pokażmy produkt w kontekście – w realnym użyciu. Na przykład wyobraź sobie, że chcesz kupić lampę. Na stronie oglądasz zdjęcia lampy, zbliżenia na detale. Lampa ma 40 cm średnicy. Zastanawiasz się, czy to dużo, czy mało? Pokazanie produktu w kontekście, czyli wiszącej w pokoju, pozwoli Ci wyobrazić sobie, czy wybrana lampa będzie pasować do Twojego pomieszczenia.

Przygotowując zdjęcia do sklepu internetowego zadbaj, aby wszystkie były zrealizowane w podobny sposób, np. na tym samym tle.

Opis produktu

Efektywny opis produktu powinien być jasny i przejrzysty. Z jednej strony napisany językiem dopasowanym do grupy docelowej, z drugiej precyzyjnie określający cechy produktu.

Tworząc opis nie należy zapominać o parametrach i danych technicznych produktu, np. na stronie produktowej kurtki turystycznej należy uwzględnić skład materiałowy oraz sposób jej prania oraz konserwacji.

To, co znajdzie się w opisie produktu będzie w dużej mierze zależało od specyfiki tego, co sprzedajemy. Jeśli to urządzenie elektroniczne konieczna będzie np. tabela z danymi technicznymi urządzenia, instrukcja obsługi, informacje i gwarancji, jeśli ubranie nie zapominajmy też o tabeli rozmiarów, jeśli produkt spożywczy konieczny będzie skład oraz data ważności.

W ramach jednego sklepu wszystkie strony produktowe powinny być takie same, tak, aby użytkownik wiedział, gdzie szukać pożądanych przez niego informacji.

Ostatnia, ale bardzo ważna rzecz – zadbaj, aby wielkość czcionki była wystarczająco duża, tak, aby każdy bez problemu mógł ją przeczytać.

infografika: Jak dobrze zaprojektować stronę produktową, która generuje sprzedaż.
Infografika: Jak dobrze zaprojektować stronę produktową, która generuje sprzedaż.
pobierz pdf

Wskaźnik dostępności produktu

Na stronie produktu warto przedstawić klientowi informację o dostępności produktu. Niejeden raz można spotkać się z sytuacją, kiedy klient zamawia produkt, płaci za niego, a dopiero potem dostaje informację, że produkt jest dostępny, ale na zamówienie. Napisać, że sytuacja wywołuje frustrację, to mało powiedziane. Szanse, że klient wróci do sklepu lub go poleci znajomym są marne.

Dostępność produktu można pokazać za pomocą ogólnego stwierdzenia (np. „dostępny” lub „stan: ostatnie sztuki”), jak i informacji o dokładnej liczbie produktów w magazynie, co będzie dodatkowym triggerem zakupowym.

Opcje dostawy

Poza informacją o dostępności produktu, istotną informacją decydującą o zakupie produktu będzie termin jej wysyłki. Jest to szczególnie ważne, jeśli termin różni się w zależności od produktu (np. jedne produkty są wysyłane w ciągu 24h a inne w ciągu 3 dni, ponieważ są przechowywane w zagranicznym magazynie).

W przypadku, kiedy zamówienie jest dzielone i wysyłane z dwóch różnych miejsc, również należy poinformować o tym klienta, szczególnie, jeśli części zamówienia różnią się terminem dostawy, a koszty przesyłki rosną.

Call to action (CTA)

Kiedy klient zdecyduje się na zakup produktów nie powinien mieć wątpliwości co do tego, w jaki sposób zakupić produkt. Dlatego tak ważne jest odpowiednie wezwanie do działania, czyli CTA. W tym wypadku będzie to najczęściej odpowiednie wyeksponowanie przycisku Kup lub Dodaj do koszyka.

CTA ma jednak dużo więcej odsłon i może przybierać różne formy, o czym piszemy w artykule: Co to jest CTA?

Opinie klientów

Opinie klientów mogą być ważnym czynnikiem zachęcającym potencjalnego klienta do zakupów. Ważna będzie zarówno średnia ocena, jak i opinie wymieniające plusy i ewentualne minusy produktu. Dobre opinie wzbudzają zaufanie i zwiększają prawdopodobieństwo dokonania przez klienta zakupu.

Powiązane produkty

Czasami klient ogląda jakiś towar, jednak nie jest do niego przekonany. Dlatego też pokazanie pod spodem podobnych produktów może go doprowadzić potencjalnego odbiorcę do innego, ale bardziej pasującego przedmiotu.

Poza tym warto również pokazać produkty, które będą stanowić komplet lub uzupełnienie do wybieranego towaru, np. jeśli klient kupuje smartfona, można mu przedstawić etui lub uchwyty.

Chcesz efektownie zaprezentować produkty?

Zamów profesjonalne wizualizacje 2D/3D

Wypełnij formularz, skontaktujemy się z Tobą

Dobrze zaprojektowana strona produktowa – krok po kroku

Przygotowanie dobrej karty produktu wymaga przygotowania i podjęcia różnych działań.

  1. Przemyśl, jakiego rodzaju produkty oferujesz w swoim sklepie internetowym. Pogrupuj podobne sobie i wypisz, co należy zawrzeć na stronie produktowej w zależności od rodzaju produktu.
  2. Na tej podstawie zaplanuj „szablon” strony produktowej, tak, aby klient w łatwy sposób mógł się poruszać między kartami produktów i wiedział, gdzie znajdzie potrzebne mu informacje.
  3. Zrealizuj sesję zdjęciową – tutaj najpewniej będziesz potrzebować pomocy profesjonalnego fotografa zajmującego się fotografią produktową. Będzie to szczególnie ważne, jeśli będziesz pokazywać detale produktów.
  4. Przygotuj opis pasujący do grupy docelowej. Przy opisie zawrzyj wszelkie instrukcje i szczegóły techniczne produktu.

Projektując stronę produktową nie zapominaj o dobrze wyeksponowanej cenie oraz przycisku dodającym produkt do koszyka.

Podsumowanie

Strona produktowa jest miejscem, które decyduje, czy klient doda produkt do koszyka. Uwzględniając, że może być również pierwszą stroną, z którą zetknie się użytkownik z Twoim sklepem, warto traktować ją z dużą uwagą.

Pamiętaj, aby strona była czytelna i aby dobrze wyświetlała się na różnych urządzeniach, w tym mobilnych. Dobrą praktyką jest informowanie klienta o tym, że produkt pomyślnie został dodany do koszyka. Klient będzie pewien, że udało mu się wykonać czynność.

Poza tym nie zapominaj o przejrzystym opisie i dobrych zdjęciach. To połowa sukcesu.

Strona błędu 404 – jak zaprojektować?

Co to jest strona błędu 404?

Strona błędu 404 to strona, którą widzą użytkownicy próbujący uzyskać dostęp do adresu URL na Twoim serwerze, który nie istnieje. Błąd 404 to standardowy kod używany do pokazania, że połączenie z serwerem zostało nawiązane, jednak serwer nie znalazł potrzebnej strony. W rezultacie, serwis informuje nas, że żądanych informacji, produktów lub usług nie można znaleźć pod wskazanym adresem.

Może się to zdarzyć z różnych powodów:

  • Strona została usunięta. Oznacza to, że poszukiwany produkt lub usługa nie są już dostępne.
  • Zmodyfikowano strukturę serwisu. W ten sposób strona nadal istnieje, ale pod innym adresem.
  • Adres strony został po prostu wpisany nieprawidłowo.
  • Zawarte informacje nie mogą być udostępniane osobom trzecim.

Istnieją dwa rodzaje stron 404 – standardowe i spersonalizowane. Strona standardowa przedstawia tradycyjny, jednowierszowy komunikat, zwykle na białym tle. Tymczasem strona spersonalizowana to strona zaprojektowana i skonstruowana indywidualnie zgodnie ze stylem marki i witryny.

Czy strona błędu jest potrzebna?

Jednym z głównych powodów, dla których warto zbudować spersonalizowaną stronę 404, jest jej zdolność do podniesienia jakości doświadczeń użytkowników i zmniejszenia współczynnika odrzuceń witryny.

Inną przyczyną, dla której warto rozważyć stworzenie spersonalizowanej strony błędu 404, jest jej zdolność do angażowania i wyjątkowego zaskakiwania odbiorców. Ponieważ błędy 404 w naturalny sposób powodują frustrację, niestandardowa strona 404 zbudowana z humorem i ekscytującymi grafikami przyczynia się do chwili radości. A kiedy klienci są zadowoleni, są gotowi wydać w Twoim sklepie więcej.

Niestandardowe strony 404 mogą być również używane jako magnes lub narzędzie optymalizujące konwersję w sklepie lub na stronie. Za pomocą odpowiednio sformułowanego komunikatu i udostępnionych linków, zaprosisz użytkowników do dalszego przeglądania sklepu. W ten sposób przykujesz ich uwagę i ponownie zaangażujesz w proces poszukiwania.

Strona 404 – najlepsze praktyki tworzenia

Tworząc stronę błędu 404, akceptujesz swój błąd i zapewniasz użytkownikowi pozytywne doświadczenia w Twoim sklepie. Zastanawiasz się pewnie, jak zrobić stronę błędu? O to kilka wskazówek, które warto poznać zanim rozpoczniemy projektowanie.

1. Unikaj technicznego żargonu

Większość standardowych stron 404 zawiera techniczne słowa, takie jak „Kod stanu HTTP 404”, „Błąd serwera” lub „Żądany adres URL nie został znaleziony na tym serwerze”. Problem z tym tekstem polega na tym, że znaczna część użytkowników nie do końca wie, co oznaczają te terminy.

Zamiast tego pozbądź się technicznego żargonu i użyj nieskomplikowanego języka, który zrozumie każdy odbiorca. Oto kilka dobrych przykładów prostych komunikatów o błędach 404:

„Przepraszam, strona, której szukałeś, nie istnieje”.

„Wydaje się, że nie możemy znaleźć strony, której szukasz”.

„Ups! Coś poszło nie tak.”

Ten rodzaj języka pomaga użytkownikom natychmiast rozpoznać, że strona, na którą weszli, to 404.

Jeśli chcesz, możesz również wykonać dodatkowy krok, aby wyjaśnić użytkownikom, dlaczego trafili na stronę 404. Sformułowania typu: „Możesz widzieć tę stronę, ponieważ…” lub „Trafiłeś tu z powodu…” pomagają użytkownikom lepiej zrozumieć, dlaczego wystąpił błąd 404.

2. Bądź spójny ze swoim brandingiem

Jeśli chodzi o strony błędu, najlepiej myśleć o nich po prostu jako o podstronach serwisu. Podobnie jak w przypadku każdej innej podstrony w Twojej witrynie, konsekwentne promowanie marki ma kluczowe znaczenie. Upewnij się, że projekt strony 404 jest zgodny z Twoją witryną. Spójność wizerunku zmniejszy współczynnik odrzuceń.

W ramach procesu projektowania pamiętaj o uwzględnieniu następujących elementów witryny:

  • Logo marki.
  • Schematu kolorów witryny.
  • Standardowych czcionek i stylu projektowania.

Przyczyniając się do pozytywnego pierwszego wrażenia, spersonalizowana strona 404 ma większą szansę na przekonanie odbiorców do odwiedzenia innych sekcji Twojej witryny.

infografika: jak zaprojektować stronę błędu 404
Infografika: Jak zaprojektować stronę błędu 404.
pobierz pdf

3. Spraw aby Twoja strona była użyteczna

Większość stron błędów 404 nie zawiera wezwania do działania, czyli CTA. Dobrą praktyką jest zachęcenie użytkowników do przejścia na stronę główną. Robiąc tak, zapewniasz w ten sposób odbiorcom lepszy dostęp do reszty treści witryny.

Oprócz podania linku do strony głównej, nie zapomnij dodać paska wyszukiwania, niektórych linków do najlepszych produktów lub popularnych artykułów.

4. Nie zaśmiecaj strony 404

Dołączenie kilku linków do Twojej strony 404 nie daje Ci swobody dodania każdego możliwego linku. Strona przepełniona linkami powoduje bałagan i może przytłoczyć odwiedzających witrynę, co jeszcze bardziej pogłębia sfrustrowanie użytkowników.

Badanie przeprowadzone przez Nielsen Norman Group (https://www.nngroup.com/articles/minimize-cognitive-load/), wykazało, że im więcej obciążenia poznawczego potrzebowali użytkownicy do znalezienia treści lub wykonania zadań w Twojej witrynie, tym bardziej prawdopodobne było, że zrezygnują z wykonania zadania. W tym przypadku są to zakupy w Twoim sklepie. Aby zwiększyć wskaźniki sukcesu użytkowników i zminimalizować obciążenie poznawcze, dodaj trzy lub cztery linki do swoich najpopularniejszych treści.

5. Dołącz swoje dane kontaktowe

Kiedy odwiedzający natyka się na błąd, pojawia się frustracja. Jednym z najskuteczniejszych sposobów jej zwalczania jest ułatwienie użytkownikom kontaktu z Tobą. Zapewniając opcje komunikacji z zespołem obsługi klienta, możesz bezpośrednio odpowiedzieć na wszelkie pytania, które mogą mieć odwiedzający witrynę. Pomaga to zwiększyć więź z marką.

6. Bądź kreatywny

Bądź kreatywny i myśl nieszablonowo podczas tworzenia projektu. Przełam schemat, pokazując, że ta strona nie musi być nudna i frustrująca, ponieważ Twoja marka nie jest nudna i frustrująca!

Przykłady stron 404

Strona 404 sklepu internetowego Rossman to kreatywny sposób na przekierowanie doświadczenia użytkownika z czegoś negatywnego na coś pozytywnego.

ilustracja: Przykład strony 404 - rossmann
Przykład strony błędu 404

Media Expert udowadnia, że strona 404 może być zabawna i dawać użytkownikowi szereg możliwych rozwiązań.

ilustracja: Przykład strony 404 - media expert
Przykład strony błędu 404

Strona błędu 404 księgarni Lubimy czytać jest dość prosta, ale żartobliwie sugeruje pozycję „404 Gdy zajdziesz za daleko” i zapewnia przycisk, który zabierze użytkownika z powrotem na stronę główną.

ilustracja: Przykład strony 404 - lubimy czytac
Przykład strony błędu 404

Podsumowanie

Ciekawy projekt strony błędu 404 to wspaniała okazja, aby pokazać swoją kreatywność i zachęcić użytkowników do kontynuowania podróży po Twoim sklepie. Daje pewność, że pomimo tego, że coś pójdzie nie tak, wszystko będzie dobrze.

Wakacje z UX

Modne słowo destynacja

No i wydało się. Tak, nie mam jeszcze zielonego pojęcia co będę w czasie urlopu robił. Oprócz oczywiście oddychania i podobnych didaskaliów.

Pomysłów kilka się uzbierało i koncepcji, ale decyzje nie zapadły. Chyba, że żona przezornie dokonała za nas wyborów, o których teraz – w ramach podziału obowiązków – powiem, że są świetne. I zrobię co tam trzeba, żeby nasze (sic!) wybory mogły się urzeczywistnić.

Bo trzeba Wam tak w ogóle wiedzieć, że gdyby nie umiejętność mojej drugiej połówki do łączenia kropek na rysunku z planem wakacji, sypialibyśmy zapewne w trakcie eskapad na ławkach w parkach. Ja jakoś nawet nie wiem, czy o rezerwacji lipcowego noclegu w miejscowości X wystarczy pamiętać w lutym, czy trzeba w październiku roku poprzedniego.

W drodze na urlop

Część 1: Lotniczy UX, czyli zanim wsiądziesz do samolotu

Więc (wiem, nie wolno tak zaczynać zdania – Pani Mario, polonistko niezłomna, przepraszam) będę być może kupował bilety. Oby nie na samolot. Jeszcze bardziej oby nie na samolot z przesiadką na dalekim lotnisku. Bo zacznę psioczyć na UXy. Że na przykład czytam i nie wiem czy zdążę się przesiąść. Znaczy rozumiem, że zdążę, ale gdybym miał się spotkać z kimś na dużym lotnisku tuż poza Europą (DLtpE), to nijak bym nie zgadł według jakiego czasu podane są godziny przylotów.

Wiem, myślicie, że pewnie mało latam i piętrzę. Zgoda, trochę piętrzę. Skutek czekania kiedyś tam kiedyś na Okęciu na opóźniony samolot z DLtpE.

Część 2: Kolej na user experience, czyli UX na kolei

Myślę, że to jednak będzie pociąg. Obosz! Znowu nawybieram się, że:

  • ze stacji do stacji,
  • dnia o dacie,
  • o godzinie godzinie,
  • przy oknie i obok siebie w przedziale lotniczym, albo, że przy oknie i przy oknie w wagonie z przedziałami,
  • i że z promocją dla early birda,
  • i w klasie tej a nie innej,
  • w taryfie takiej a takiej ze względu na to i tamto

i… dowiem się, po 5 minutach, że mogę zacząć wybierać od początku. I niestety nie, że trochę od początku, tylko całkiem od początku. Ostatnio wybierałem od nowa, bo się wczesny ptaszek za 4 godziny dopiero zaczynał. No niech to UX i jego projektanci!

Zaczynam się zastanawiać, czy ja w ogóle potrzebuję urlopu? Może by tak zostać? Nie da rady, obiecałem żonie i w żaden sposób się nie wykręcę. Zresztą potrzeba mi odpoczynku, a ten – jak wspominałem – jest jak psia micha. Nie ma wyjścia.

infografika: Wakacje z user experience. UX-owa gra o urlop.
Infografika: Wakacje z user experience. UX-owa gra o urlop.
pobierz pdf

Na urlopie

Część 1: UX spotyka UI

Urlop, urlop. Pewnie odwiedzimy jakieś wystawy albo inne muzea. Nie wiem jak Wy, ale takie statystyczne muzeum, to wywołuje we mnie mieszane odczucia. Pierwsza reakcja, że z dużym prawdopodobieństwem będzie nuda. Stara reakcja jeszcze z podstawówki. Potem mi się przypomina, że są rzeczy znacznie, znacznie i jeszcze raz znacznie nudniejsze niż muzeum w starym stylu (*). Po chwili już zasadniczo mam ochotę odwiedzić fajne muzeum, bo się czegoś ciekawego dowiem, coś interesującego zobaczę… Jeśli dam radę zobaczyć oczywiście. Bo ostatnio nie miałem szans. Śmiały pomysł designerski z:

  • umieszczeniem opisów prac wystawianych w dość skąpo oświetlonym wnętrzu,
  • na przezroczystym szklanym podkładzie,
  • plus użycie małej czcionki,
  • plus margin-bottom tabliczki z opisem względem podłogi równy 5 centymetrów,

załatwiły sprawę koncertowo. Schylić się ciężko, bo człek zasiedziany przed monitorem, kucnąć jeszcze gorzej, bo od siedzenia spodnie się zeszły, wzrok od monitora też – ten tego – no, był kiedyś lepszy.

Tak, wiem, wpuść UXowca na wystawę, to opowie o fontach i marginesach, nie odnosząc się nawet do kapitalnie wyeksponowanego zielonego Bugatti.

Część 2: UX nie spotyka Customer Journey

Może jakieś w plenerze atrakcje sobie wymyślimy (wymyśliliśmy)? E, pobłądzę pewnie. Jak wtedy, gdy w pewnym skansenie nie wpadł mi w oko komunikat wypisany wersalikami, ale na tablicy informacyjnej wielkości przeciętnego znaczka pocztowego. Oczywiście znaczka w rozmiarach rzeczywistych. Zgoda, odrobinę piętrzę.

A we wspomnianym skansenie na wymienionej wyżej tabliczce było jak wół (wołek?) napisane, że mapki i audio przewodniki są dostępne w budce za drugim rogiem idąc w prawo. No nie miałem ochoty wracać ponad pół kilometra do rogu, gdy skumałem, że współzwiedzający mają słuchawki na uszach i kiwają głowami z zainteresowaniem. Nie spodobało mi się tam w ogóle i wcale. I powiem Wam, że ktoś tam, za przeproszeniem, w organizacji skansen organizującej lekceważąco podszedł do – całkiem skądinąd niegłupiej – koncepcji Customer Journey Map ; )

Część 3: w poszukiwaniu edenu UX

Żebym się nie rozchorował z tego myślenia o urlopie. No w kropce jestem, nie ukrywam. Wiecie co, zróbmy tak: na dzisiaj już skończę, a jakoś tak po urlopie, to dam Wam znać jak wyszło. Może uda mi się trafić do jakiegoś raju user experience i będzie mi zrozumiale, dobrze i komfortowo? Nie, że w stu procentach, wystarczy, że częściej niż rzadziej. Mniej będę marudził i piętrzył. Być może. Mam nadzieję.

Życzę – Wam i sobie – udanych wakacji!

Zamiast podsumowania

Tak w ogóle, to miałem ochotę napisać o UX UXowców. O branżowej książce bez ani jednej ilustracji, złożonej czcionką nasenną. I o znanym powszechnie programie, którego funkcji codziennie szukam od nowa. A także o konfiguratorze usług pewnej marki, niezrozumiałym nawet dla pracujących dla marki doradców.

Ale… co tam, przecież wakacje coraz bliżej! Nie? ; )


(*) ja tam jestem zdania, że najnudniejszą rzeczą na świecie jest oglądanie dużej liczby czyichś zdjęć z wakacji, przy czym „duża liczba” zaczyna się dla mnie od 3.

A Wy? Co dla Was jest najnudniejsze? To jest właśnie pytanie konkursowe. Wszyscy, którzy zgłoszą swoje typy na najnudniejszą rzecz na świecie i przebiją w skali nudy moją propozycję, dostaną bezpłatny projekt logo swojej firmy wykonany przez naszego Dyrektora Kreatywnego.

Wpisujcie propozycje w komentarzach i podsyłajcie namiary na siebie mailem na kruk@artnova.com.pl.

Czekamy do 23 czerwca 2022.

Dobre praktyki UX – porady specjalisty

Czym jest User Experience, albo ułatwiaj życie

Na początek krótkie przypomnienie czym jest UX. User experience (użyteczność) to całość wrażeń z kontaktu użytkownika ze stroną internetową, e-sklepem, aplikacją mobilną. Wrażeń na które składają się estetyka, czytelność, łatwość poruszania się po stronie itp. Wrażeń, których suma sprawia, że odbiorca pozostaje na stronie albo ją porzuca.

Właściwie nie chciałem rozpisywać tutaj kolejnej definicji użyteczności. Tym bardziej, że o tym co to jest user experience możecie przeczytać w osobnym wpisie. Moim zamiarem było pokazanie w praktyce może nie najważniejszej, ale istotnej dobrej praktyki. Chodzi o ułatwianie życia odbiorcy. Nie chciałem, żebyś się zastanawiał, czy pamiętasz o co chodzi z tym uiksem, nie chciałem, żebyś błąkał się po Internetach i szukał – dałem Ci prostą, krótką definicję.

Pora na kolejne dobre praktyki.

Persona i tak dalej, czyli dla kogo tworzysz projekt

Użytkownicy strony internetowej

Osiągnięcie wysokiej użyteczności strony internetowej w oderwaniu od jej docelowego odbiorcy jest praktycznie niemożliwe.

Typowy użytkownik ma swoje przyzwyczajenia i preferencje. W charakterystyczny sposób wykonuje określone czynności (na przykład wyszukuje produkt i dodaje go do koszyka). Sposób ten wynika z wielu czynników, w tym doświadczeń z innymi podobnymi stronami.

Przeciętny użytkownik Twojej witryny ma jakiś poziom umiejętności cyfrowych i możliwości operowania elementami nawigacyjnymi. Te zaś ściśle wiążą się z projektowaniem GUI, w tym uwzględniającym zagadnienia dostępności.

Typowy odbiorca ma także określone poczucie estetyki i sposób przyswajania informacji. Obie cechy ściśle wiążą się z User Interface i architekturą informacji witryny.

Informacje o użytkownikach

Oczywiste jest, że powinieneś jak najwięcej dowiedzieć się o użytkownikach i następnie zdobytą wiedzę wykorzystywać w trakcie projektowania strony.

Sposobów zdobywania wiedzy o odbiorcach jest mnóstwo. Począwszy od ankiet, po zaawansowane badania UX z udziałem użytkowników.

Podobnie ze sposobami wykorzystania zdobytych informacji. Bez wątpienia wartymi polecenia są: regularne posługiwanie się personą i Customer Journey Map.

Podsumowując dobrą praktyką UX jest uwzględnianie w projekcie potrzeb docelowych użytkowników.

Jeśli chcesz zrozumieć głębiej co to jest persona i dowiedzieć się, jak skutecznie ją stworzyć w kontekście marketingu, sprawdź artykuł Persona – co to jest i jak ją stworzyć?

infografika: Dobre praktyki UX. User experience oczami specjalisty.
Dobre praktyki UX. User experience oczami specjalisty.
pobierz pdf

Mobile First na pewno nie zaszkodzi

Świat się zmienia. Niektórzy twierdzą nawet, że w zastraszającym tempie. Tak czy inaczej dzisiejsze realia dostępu do Internetu i korzystania ze stron są inne niż 15, 10, 5 lat temu. Inne są też technologie wykorzystywane przez odbiorców treści cyfrowych.

Witryna, która ma być odbierana AD 2022 jako użyteczna musi być dostępna na urządzeniach mobilnych. A jeżeli tak, warto rozważyć zastosowanie podejścia Mobile First Design, czyli „rozszerzania” wersji interfejsów od edycji dla smartfonów po ekrany dużych laptopów i komputerów stacjonarnych.

Podsumowując, następną dobrą praktyką UX jest dostarczanie klientom starannie przemyślanych wersji responsywnych serwisów.

Proste, powtarzalne schematy, uwierz, że warto

Kilka słów na ten temat już napisałem. Użytkownicy Twojej strony – daję słowo – odwiedzają także inne witryny w Internecie. Ba, odwiedzają ogromną liczbę witryn różnego typu. I tak się składa, że bardzo lubią od razu wiedzieć, co zrobić, żeby osiągnąć zamierzony efekt. Od razu, czyli intuicyjnie i bez zbędnego zastanawiania. Albo ujmując rzecz inaczej: podobnie jak gdzie indziej.

Podobno utarte schematy prowadzące do pożądanego skutku sprawdzają się tak dobrze dzięki ludzkiemu lenistwu i zamiłowaniu do nagród, ale… czy to w sumie ważne? Proste schematy działają, najlepiej sprawdź sam, że jest to jeszcze jedna ważna dobra praktyka UX.

Nie gadaj tyle!

Przypomniałem sobie, że zapowiedziałem krótki tekst i… Właśnie: nie warto przeładowywać serwisów treścią. Sam nie masz ani czasu, ani szans na przeczytanie choćby procenta tego co znajdziesz w Sieci. I mam na myśli tylko rzeczy ciekawe i wartościowe.

Dobra praktyka UX dotycząca treści brzmi: pisz na temat, konkretnie, bez zasypywania zbędnymi informacjami. Zresztą nie dotyczy to tylko pisania. Jeśli na swojej stronie prowadzisz videobloga, linkujesz do webinaru, umieszczasz podcast oszczędzaj czas użytkowników. Będą Ci wdzięczni za trafne i zwięzłe informacje.

Chcesz poprawić działanie swojego e-sklepu?

Zamów audyt lub konsultacje UX

Wypełnij formularz, skontaktujemy się z Tobą

Ułatwiaj życie po raz drugi, trzeci i kolejne

Patrzenie oczami klienta, wchodzenie w jego buty, korzystanie z własnej strony tak jakby było się na niej pierwszy raz składają się na UX-owe podejście do projektu.

Myśląc w taki sposób kolejne dobre praktyki UX pojawiają się niejako same. Jeśli możesz przeprowadzić jakieś działanie na stronie w trzech krokach, nie wykonuj go w pięciu. Jeśli nie musisz posługiwać się specjalistycznym żargonem, nie używaj go, szczególnie gdy informujesz o wystąpieniu w witrynie błędu.

Wbrew pozorom, takie podejście wcale nie jest trudne i nienaturalne. Wystarczy, że przypomnisz sobie jakąś „nie swoją” stronę, która sprawiła Ci trudność, na której nie mogłeś czegoś znaleźć, albo zirytowała Cię z innego powodu. Jeżeli potrafisz zauważyć problemy na obcych stronach, dasz radę także u siebie.

Podsumowanie

Strona, którą projektujesz i wdrażasz jest przeznaczona dla Twoich klientów, Twoich odbiorców. Dlatego musi odpowiadać ich przyzwyczajeniom i oczekiwaniom. Nawet, jeżeli różnią się od Twoich wyobrażeń i przekonań.

Jeśli chcesz zapamiętać tylko jedno zdanie z tego wpisu, to brzmi ono: słuchaj swoich użytkowników i ułatwiaj im życie.

A gdybyś chciał zapamiętać drugie, to – uwaga dyktuję – doskonalenie UX nie kończy się nigdy. Warto co jakiś czas sprawdzić co użytkowników przyciąga do strony, a co… no wręcz przeciwnie.

Co to jest Customer Journey?

Czym jest Customer Journey – definicja

Customer journey (ścieżka klienta) to narzędzie komunikacji w organizacji, które pozwala na spojrzenie na drogę jaką przechodzi klient realizując określone cele. Użytkownik i jego potrzeby stawiane są w centrum. Ta metoda bazująca na wykorzystaniu persony daje przede wszystkim możliwość obserwacji, jak klient rozwiązuje dany problem w szerokim kontekście.

Jest to również wizualizacja procesu osiągania celu przez użytkownika. Najprościej mówiąc Customer Journey Map to przejście przez etapy drogi klienta stykającego się z wybranym problemem z uwzględnieniem jego emocji oraz innych okoliczności.

Ścieżka klienta – dlaczego warto ją analizować?

Analizowanie ścieżki klienta warto wykonywać z wielu powodów. Korzyści z zagłębienia się w ścieżkę klienta widoczne są w kilku obszarach.

Po pierwsze analiza customer journey pozwala na skupienie się na kliencie i jego potrzebach. Tak ukierunkowane spojrzenie na przygotowaną mapę pozwala więc na znalezienie szczegółów, które mogą zoptymalizować biznes. Co więcej, w przypadku, kiedy próbujemy usprawnić już istniejący produkt, CJM pozwala na zidentyfikowanie obszarów wcześniej pomijanych albo zaniedbanych.

Po drugie customer journey to bardzo dobre narzędzie komunikacji wewnątrz organizacji. Daje ono możliwość znalezienia wspólnych dla różnych działów celów i wizji dotyczących produktu. Tworzenie i analiza ścieżki klienta ułatwia włączenie empatii i postawieniu się w pozycji klienta. Z tego też powodu Customer journey może być bardzo odkrywcze dla osób, które w codziennej pracy nie stawiają użytkownika w centrum swojego zainteresowania.

Do czego możesz wykorzystać Customer Journey?

Customer journey można wykorzystać w różny sposób np.:

  • do poprawy obecnego stanu produktu czy usługi,
  • jako wsparcie decyzji przy nowym produkcie,
  • do poprawy komunikacji wewnątrz organizacji,
  • do znalezienia kluczowych momentów w kontakcie klienta z produktem.

Warto podkreślić, że customer journey może doprowadzić do wniosków, które odpowiednio wdrożone wpłyną na jakość produktu, usługi. To z kolei skutkuje wzrostem zadowolenia klienta z kontaktu z produktem.

Co analizujemy w ramach Customer Journey

Persona i fazy

Punktem wyjścia do analizy cutomer journey jest persona. Persona, czyli przykładowy klient wraz z całym zestawem jego cech charakterystycznych. Personę tworzy się na podstawie badań, które poprzedzają etapy strategiczne.

W przypadku, kiedy badania nie były realizowane, można stworzyć protopersonę, czyli personę, o której wiedzę czerpiemy z życia codziennego. Aby uwiarygodnić swoją protopersonę warto skorzystać z desk researchu, np. forów tematycznych, Instagrama, dostępnych raportów z badań. Dobrym pomysłem może okazać się także krótka rozmowa ze znajomymi znajomych, która może wiele wnieść w nasze rozumienie danego problemu.

Następnie należy zidentyfikować cel, jaki chce osiągnąć klient. Drogę, którą persona przejdzie zanim osiągnie cel należy podzielić na kilka ogólnych faz.

PRZYKŁADY:

PERSONA:
Marcin, 42 lata, wegetarianin, pracuje jako fotograf, mieszka w Poznaniu. Lubi wyjeżdżać w naturę, ale ma problem ze znalezieniem noclegu z wyżywieniem wege.

FAZA:
Poszukiwanie noclegu.

Etapy ścieżki klienta

Kolejnym etapem jest rozpisanie wszystkich kroków, jakie użytkownik musi wykonać, aby zrealizować cel. Bardzo dobrym zwyczajem jest ilustrowanie kroków, co pozwala później na szybsze zorientowanie się w mapie.

Tę fazę można wykonywać na początku indywidualnie, a następnie grupowo, scalając w jeden proces.

PRZYKŁAD DZIAŁANIA:

Telefonowanie do wybranych miejsc noclegowych z pytaniem, czy dostępna jest dieta wege.

Emocje i myśli

Określenie emocji w customer journey to w głównej mierze nawiązanie do badań. Do każdej akcji/działania, które wykonuje persona przypisujemy emocje, które w danej chwili odczuwa. Kluczowe okazują się insighty z badań (insight rozumiany jako wynik obserwowania klienta, jego problemów, potrzeb, pragnień), podkreślające często trudne do zauważenia, ale ważne niuanse.

Ten etap pozwala często także na znalezienie przyczyn ewentualnego złego doświadczenia, jakiego doznaje persona podczas realizacji celu.

PRZYKŁAD EMOCJI:

Frustracja a nawet lekka wściekłość, kiedy Marcin wykonuje kolejny telefon i albo nikt nie odbiera, albo nie oddzwania albo nie ma dostępnej diety wege. „Ile można dzwonić i pytać! Na pewno muszą być jakieś miejsca dla wegetarian!”

Plusy i minusy

W tym miejscu do wszystkich powyższych elementów przypisujemy plusy i minusy, czyli tak zwane pains and gains, które pojawiają się w poszczególnych krokach działania persony. Pomocnym narzędziem w określeniu bolączek i korzyści jest Value Preposition Canvas. Narzędzie pozwala bowiem łatwo ustrukturyzować korzyści osiągane przez klienta oraz ryzyka i przeszkody w realizacji zadania.

PRZYKŁAD:

W tym kroku największą bolączką Marcina jest to, że w popularnych serwisach z noclegami nie ma informacji o rodzaju diety. „Gdybym nie był wege, bardzo szybko znalazłbym nocleg, a tak muszę poświęcić dużo więcej czasu na wykonanie kilku a nawet kilkunastu telefonów.”

Customer Journey a touchpoints

Kiedy już rozpiszemy kroki, jakie musi podjąć użytkownik, aby osiągnąć cel, należy dopasować do każdego kroku touchpointy, czyli „punkty styku” klienta z produktem czy usługą.

Punktami styku będą miejsca, urządzenia a nawet kontekst, w którym persona realizuje kolejne kroki. Oznacza to, że punktami styku mogą być zarówno komputer/telefon, jak i reklama outdoorowa czy pracownik punktu obsługi klienta.

I tutaj pojawia się kolejna zaleta customer journey jako narzędzia komunikacji. W ramach organizacji dowiadujemy się, ile punktów styku ma klient z naszym produktem, co umożliwia wyciąganie spójnych dla wielu obszarów czy działów wniosków.

Szanse / wartości

Ostatni etap tworzenia CJM to propozycje rozwiązań, jakie wynikają ze wcześniej przygotowanych składowych mapy. Analizując dotychczas zebrane można w każdym kroku persony sprawdzić, czy i jak możliwe jest poprawienie produktu, tak, aby zniwelować bolączki i negatywne emocje odbiorcy.

PRZYKŁAD:

Filtr „dieta wege” w serwisach agregujących oferty noclegów.

Jak stworzyć Customer Journey map?

Stworzenie customer journey map wymaga przede wszystkich otwartej głowy i zespołu ludzi. Pracować można na jednym z wielu dostępnych w Internecie szablonów (również i my przekazujemy Wam taki), ale najważniejsze to wyniki badań lub inne dane pozwalające na stworzenie persony i wyciąganie kolejnych, wiarygodnych wniosków.

Przydatne będą także duża tablica, karteczki samoprzylepne i flamastry.

Przykład wypełnionego formularza Customer Journey Map

infografika: Customer Journey Map - przykład wypełnionego formularza.
Infografika: Customer Journey Map – przykład wypełnionego formularza.
pobierz pdf

Wzór formularza Customer Journey Map

infografika: Customer Journey Map - wzór formularza.
Infografika: Customer Journey Map – wzór formularza.
pobierz pdf

Podsumowanie

Customer Journey Map jest narzędziem bardzo przydatnym na wielu polach i stosunkowo łatwym do użycia. Po pierwsze może realnie wpłynąć na polepszenie jakości produktu czy usługi, po drugie pozwoli usprawnić komunikację w Twojej organizacji.

Warto wspomnieć, że CJM można rozwinąć o dwa dodatkowe punkty: „świat idealny” – czyli jak rozwiązalibyśmy problem w świecie idealnym, oraz wskaźniki KPI, w którym określamy w jaki sposób można zmierzyć wpływ modyfikacji, jakie wprowadzimy.

Value Proposition w UX – 3 kroki do stworzenia atrakcyjnej propozycji wartości

Czym jest propozycja wartości (Value Proposition)?

Propozycja wartości to stwierdzenie, które wyraża cechy i wyróżniki marki z uwzględnieniem problemów, pragnień i potrzeb klientów. To ta wyjątkowa cecha, która wyróżnia Twoją markę na tle konkurencji. Value proposition definiuje to, co oferujesz, czego inne firmy e-commerce na Twoim rynku nie posiadają.

Propozycja wartości mówi, co klient otrzyma od sprzedawcy wraz z produktem. Potencjalni klienci czytający value proposition powinni od razu zrozumieć zalety produktu i mieć chęć dowiedzenia się o nim więcej.

Projektowanie propozycji wartości – o czym trzeba pamiętać?

Przyjrzyjmy się bliżej budowie propozycji wartości, aby lepiej ją zrozumieć. Oto kilka zasad, o których warto pamiętać tworząc ją.

Szybki sposób wyszukiwania produktów i łatwy proces zamawiania

Terminy takie jak pozycjonowanie, czyli SEO i SEM są powtarzane jak mantra, ale wyświetlanie się w wynikach wyszukiwania Google to tylko jedna z wielu bitew, które musisz stoczyć, aby klienci mogli łatwo znaleźć Twoje produkty w Internecie. Samo wyszukiwanie nie wystarczy, jeżeli ścieżka zakupowa w Twoim sklepie będzie skomplikowana i trudna do zrozumienia. Oszczędź czas konsumenta – stanowi to ogromną korzyść w dzisiejszym szybko zmieniającym się środowisku e-commerce.

Bezpłatna i szybka wysyłka

O ile nie oferujesz unikatowych produktów, długie oczekiwanie na dostawę może zniechęcić użytkowników. Jeśli kupujący trafi do Twojego sklepu i znajdzie produkt, który spełni jego oczekiwania, powolna lub droga wysyłka może spowodować rezygnację z całego procesu zakupowego. Dołóż starań, by produkt trafiał do odbiorcy jak najszybciej. Jeżeli możesz sobie na to pozwolić ze względów biznesowych, proponuj wysyłkę bez dodatkowej opłaty.

Dzielenie się wartościami i pasjami klienta

Ta propozycja wartości e-commerce jest naprawdę ważna dla marek niszowych. Innymi słowy, jeśli próbujesz obsługiwać stosunkowo niewielki rynek o wyjątkowych potrzebach, jest to droga właśnie dla Twojego biznesu. Duże firmy też dbają o to, co lubią / czego nie lubią ich klienci, ale marki niszowe muszą dbać o swoich klientów w szczególny sposób.

Wszystko, czego potrzebujesz, to umiejętność zidentyfikowania słabo obsługiwanego, rozwijającego się rynku i poświęcenia się zaspokajaniu jego wyjątkowych potrzeb.

infografika: Tworzenie atrakcyjnej propozycji wartości (Value Proposition).
Infografika: Tworzenie atrakcyjnej propozycji wartości (Value Proposition).
pobierz pdf

Łatwa do znalezienia i korzystania pomoc

Ile razy chciałeś rzucić telefonem przez pokój po kontakcie z agentem obsługi klienta, który nie potrafił udzielić Ci odpowiedzi i powtarzał w kółku „tak, rozumiem…” ? W przypadku sprzedawców internetowych większość komunikacji z odbiorcą przebiega w witrynie sklepu.

„- A jeśli coś pójdzie nie tak, jak szybko otrzymam odpowiedź?”, „- Czy opcje samopomocy są łatwe w interakcji?”, „- Jeśli muszę z kimś porozmawiać, jak długo zajmie mi dotarcie do tej opcji? I gdzie ją znajdę?”. To pytania użytkownika, na które powinieneś odpowiedzieć już w trakcie projektowania sklepu.

Szczegółowe śledzenie zamówień online

Gdy użytkownik kliknie kup, chce wiedzieć, kiedy przedmiot do niego dotrze. Może martwi się o pogodę lub jest po prostu niecierpliwy. Tak czy inaczej, jeśli nie ma wglądu w to, kiedy przesyłka do niego dotrze, zaczniesz otrzymywać niepotrzebne telefony i maile z pytaniami. W zależności od tego, z usług jakiej firmy kurierskiej korzystasz, możesz po prostu podać klientowi numer śledzenia. Jeśli chcesz zdobyć dodatkowe punkty, dołącz bezpośredni link do szczegółów śledzenia, aby klient nie musiał kopiować i wklejać długiej liczby.

Prosta polityka zwrotów

Prosisz kupujących online, aby Ci zaufali. Podane przez Ciebie informacje muszą być dokładne, a produkt musi dotrzeć zgodnie z opisem. Polityka zwrotów to jedyny sposób na potwierdzenie obietnicy złożonej klientowi po drugiej stronie ekranu. Jest to propozycja wartości, którą ma ogromne znaczenie dla klientów, którzy lubią wypróbować produkt zanim podejmą ostateczną decyzję. Obecna technologia ułatwia proces reklamacji i zwrotu w sklepie www, który ponadto jest zwykle bezpłatny, a punkty odbioru są liczne i łatwo dostępne.

Indywidualne rekomendacje dla stałych klientów

Dużo słyszymy o tym, że prywatność jest poważnym problemem. Tak jest, dopóki nie zaczniesz mówić o dostosowywaniu czyichś doświadczeń zakupowych i reklamowych. Pozwalamy Google indeksować nasze e-maile. Pozwalamy Amazonowi instalować urządzenia podsłuchowe w całym naszym domu, a witryny, które używają śledzących plików cookie, nagradzamy większymi i częstszymi zamówieniami. Kupujący sami udowadniają swoimi portfelami, że chcą niestandardowych ofert opartych na sztucznej inteligencji.

Pokonanie gigantów w tej grze byłoby kosztowne. Możesz jednak zoptymalizować swój sklep internetowy, aby wyświetlać powiązane produkty i poprawić wrażenia klientów podczas zakupów.

Newsletter i program lojalnościowy

Kupujący online chcą jak najwięcej korzyści, w zamian za ciężko zarobione pieniądze. Chcą ekskluzywnych ofert, ofert limitowanych i innych korzyści. Znajdź sposoby, by zachwycić swoich najbardziej lojalnych klientów. Daj zniżkę w zamian za subskrypcję swojego newslettera. Spraw, aby odbiorcy poczuli się wyjątkowo zapraszając ich do programu lojalnościowego z szeregiem korzyści.

Autentyczność zamiast korporacyjnych botów

Twoi najbardziej lojalni klienci wrócą, ponieważ jesteś kimś więcej niż adresem URL i logo. Im bardziej możesz pozwolić swojej osobowości zabłysnąć, tym lepiej. Konsumenci chcą robić interesy z ludźmi, a nie z korporacjami bez twarzy. Marki niszowe przodują, gdy mogą zaprezentować osobę lub zespół, który podziela wartości swoich kupujących.

Jak stworzyć skuteczną Value Proposition?

Skuteczne propozycje wartości produktów pozostają z konsumentem przez pewien czas. Obejmują różne korzyści produktu, jednocześnie określając produkt jako rozwiązanie problemów, z jakimi borykają się ich docelowi klienci. Jak zatem rozpocząć pracę nad propozycją wartości?

Krok 1. Porozmawiaj ze swoimi klientami

Podobnie jak w przypadku wszystkich części strategii marketingowej, Twoja unikalna propozycja sprzedaży musi skupiać się na kliencie. Upewnij się, że cokolwiek wybierzesz dla swojej wyjątkowej propozycji sprzedaży, jest to coś, czego naprawdę chcą Twoi klienci. Analizuj zebrane dane, zapoznaj się z opiniami, wyślij ankietę, aby jak najlepiej poznać swojego klienta. Dowiesz się między innymi jaki jest ich wiek, poziom edukacji, wysokość zarobków czy najważniejsze dla nich wartości.

Chcesz poprawić działanie swojego e-sklepu?

Umów się na kosultację UX

Wypełnij formularz, skontaktujemy się z Tobą

Krok 2. Wybierz kluczowe wartości

Zebrane wcześniej dane pozwolą na określenie preferencji grupy docelowej. Określenie wartości istotnych dla grupy docelowej e-sklepu może pomóc w realizacji strategii biznesowych na wiele sposobów. Na pewno pozwala skoncentrować działania marketingowe na najbardziej zainteresowanych odbiorcach. Znając wartości grupy docelowej będziesz wiedział jak rozmawiać ze swoimi klientami, co jest dla nich ważne podczas zakupów, poznasz ich bolączki i cele. Wykorzystaj zdobyte informacje do zbudowania persony reprezentującej cechy odbiorców.

Jeśli pragniesz zanurzyć się głębiej w tematykę i zrozumieć, czym naprawdę jest persona w kontekście biznesowym, zachęcam do odwiedzenia szczegółowego artykułu Persona – co to?

Krok 3. Stwórz listę wyróżników marki

Już wiesz, kto jest Twoim głównym klientem i czego potrzebuje. Wiesz również, co masz do zaoferowania. Dodaj te elementy razem, a odpowiedź stanie się podstawą Twojej unikalnej propozycji wartości. Jakie problemy ma Twój idealny klient, których inni przedsiębiorcy e-commerce nie rozwiązują bezpośrednio?

Zrób listę potencjalnych wyróżników Twojej marki i tego, co sprzedajesz. Bądź super konkretny! Nie ma złych pomysłów, chcesz to wszystko zobaczyć i wyciągnąć wnioski.

Atrakcyjny branding i przekonujące komunikaty wynikają z precyzji: rozwiązują problem i komunikują korzyści dla klientów własnymi słowami. Oznacza to, że musisz sformułować propozycję wartości w języku swoich klientów. Nie chodzi o to, czego Ty potrzebujesz, chodzi o nich.

Podsumowanie

Jasno sformułowana, unikalna propozycja wartości jest skutecznym narzędziem, które pomoże Ci ukształtować i ukierunkować cele marketingowe, dzięki czemu możesz wyróżnić swoją markę i produkty na tle konkurencji.

Tworząc i testując swoją propozycję wartości, znajdziesz taką, która skutecznie angażuje potencjalnych klientów, dzieli się zaletami Twojego produktu i przybliża ich do zakupu.

Program lojalnościowy w sklepie www – czy warto wprowadzić takie rozwiązanie?

Czym są programy lojalnościowe?

Chociaż szczegóły każdego programu mogą być różne, podstawa zawsze jest taka sama. Program lojalnościowy to różnego rodzaju benefity dla stałych klientów, udostępnione przez sklepy e-commerce w celu nagradzania zachowań zakupowych klientów. W konsekwencji program zwiększa chęć klienta do pozostania lojalnym wobec marki.

Przykłady programów lojalnościowych w sklepach online

Istnieje wiele różnych rodzajów programów lojalnościowych dla klientów. Poniższa lista definiuje i wyjaśnia różne programy lojalnościowe oraz korzyści, jakie przynoszą sprzedawcom.

Program punktowy

Program punktowy to program lojalnościowy, który wykorzystuje punkty do nagradzania. Klienci mogą zbierać punkty za zakupy, recenzje, a nawet udostępnianie postów w mediach społecznościowych. Gdy zdobędą wystarczającą liczbę punktów, mogą je wykorzystać do wymiany na nagrody, cashback, rabaty, gratisy itp. Przykładem takiego programu jest Klub TchiboCard i Ziarna (https://www.tchibo.pl/klub-tchibo-card-s400049908.html).

Program oparty na poziomach

Program oparty na poziomach działa jak program członkostwa, w którym klienci uzyskują więcej korzyści w miarę przechodzenia na kolejne poziomy. Marki dzielą kupujących na różne poziomy w zależności od zebranych punktów lub ilości pieniędzy, które wydają na zakupy. Wspaniałą rzeczą w systemach opartych na poziomach jest to, że klienci starają się osiągnąć wyższe poziomy, aby uzyskać więcej korzyści.

Płatny program lojalnościowy

Płatny program lojalnościowy różni się od dwóch powyższych programów tym, że zapewnia klientom natychmiastowe korzyści. Wnoszą oni opłatę z góry i uzyskują dostęp do korzyści premium, takich jak jednodniowa wysyłka, treści tylko dla członków, ekskluzywne rabaty i nie tylko. Płatne systemy lojalnościowe zapewniają natychmiastową satysfakcję klientom, a fakt, że płacą oni za program, sprawia, że ​​czują się częścią Twojej marki.

Program oparty na wartościach

Program lojalnościowy oparty na wartościach, łączy się z odbiorcami na głębszym poziomie.

Załóżmy na przykład, że prowadzisz markę odzieżową i za każdy zakup, którego dokonają Twoi klienci, przekazujesz część na organizacje charytatywne lub na ochronę środowiska.

Chociaż Twoi klienci nie otrzymują nagród bezpośrednio, program ma dla nich osobiście dużą wartość. Świadomość, że ich zakupy mogą pomóc społeczeństwu, jest nagrodą samą w sobie, a oni doceniają wartości, które reprezentuje Twoja marka.

Możliwe jest też pozostawienie klientowi decyzji o przeznaczeniu uzyskanych nagród na kolejne zakupy lub cel charytatywny. Tego typu program prowadzi np. The Body Shop (https://www.thebodyshop.com/en-gb/love-your-body-club).

Grywalizacja

Grywalizacja to program lojalnościowy, który koncentruje się na zaangażowaniu użytkowników. Tutaj klienci wykonują zadania lub wyzwania, aby zdobyć nagrody. W miarę przechodzenia przez określone etapy odblokowują więcej korzyści. Więcej informacji i przykładów wykorzystania grywalizacji w e-commerce znajdziesz na blogu sales layer (https://blog.saleslayer.com/ecommerce-gamification).

Cechy dobrego programu lojalnościowego sklepu internetowego

Spójność z identyfikacją wizualną marki

Programy lojalnościowe, które nie są oznaczone marką, nie przyciągają uwagi klientów. Upewnij się, że korzystasz z kolorów i szczegółów swojej marki oraz nadaj swojemu programowi lojalnościowemu lekką nazwę, która pasuje również do sprzedawanych przez Ciebie przedmiotów. Zapewni to doskonałe i ekscytujące wrażenia dla Twoich lojalnych klientów.

Koncentracja na klientach

Posiadanie programu lojalnościowego to Twoja szansa na pokazanie klientom, że Ci na nich zależy. Twój program lojalnościowy nie powinien skupiać się wyłącznie na Twoich przedmiotach, ale też na sposobach, w jakie klienci mogą się z tobą związać. Zapewnij odbiorcom szereg sposobów na zdobywanie i uzyskiwanie punktów, aby mieli powody do powrotu. Pamiętaj o dostosowaniu do specyficznych wymagań swojej grupy docelowej, czyli personalizacji UX.

Prosta budowa

Program lojalnościowy nie powinien być skomplikowany. Lepiej gdy jego zasady i sposób korzystania z nagród jest prosty. Im bardziej skomplikowany staje się twój program, tym bardziej ludzie będą się od niego trzymać z daleka. Spraw, aby zdobywanie punktów było proste i łatwe, aby każdy mógł to zrobić bez nadmiernych utrudnień.

Godne zaufania narzędzie programu lojalnościowego

Dodając aplikacje do swojego sklepu internetowego, musisz korzystać z niezawodnych narzędzi. Każde narzędzie programu lojalnościowego oferuje coś innego niż jego konkurent. Od wdrożenia, oferty, aż po projekt, będziesz musiał wywnioskować, jaki program lojalnościowy sprawdzi się najlepiej dla Twojego biznesu.

Aktualizacje

Poszukaj opinii klientów i sposobów na ulepszenie obecnego lub stworzenie całkowicie nowego programu lojalnościowego.

Satysfakcjonujące doświadczenia

Program lojalnościowy musi być satysfakcjonujący i gwarantować, że klienci dążą do czegoś, czego potrzebują. Może istnieć szeroki zakres nagród – takich jak kupony rabatowe, oferty limitowane i wykorzystanie punktów do zakupów – wybierz coś, co pasuje do Twojego planu działania.

Promocja programu

Nikt nie dołączy do Twojego programu lojalnościowego, jeśli nie będzie wiedział, że istnieje. Prowadzenie akcji promocyjnych zwiększy świadomość programu lojalnościowego i prawdopodobnie zachęci nowych kupujących do spróbowania zakupów również w Twoim sklepie.

infografika: Program lojalnościowy w sklepie WWW. Czy warto wprowadzić takie rozwiązanie?
Program lojalnościowy w sklepie WWW. Czy warto wprowadzić takie rozwiązanie?
pobierz pdf

Dlaczego warto uruchomić program lojalnościowy?

Programy lojalnościowe e-commerce mogą przynieść sprzedawcom wiele korzyści. Najważniejsze z nich to:

  • Łatwiejsze pozyskiwanie klientów.
  • Silniejsza lojalność wobec marki.
  • Wyższe zyski.

Łatwiejsze pozyskiwanie klientów

Kiedy klient ma trudności z zaangażowaniem się w zakup, oferta rabatu i punków członkowskich może często pomóc mu podjąć decyzję.

Silniejsza lojalność wobec marki

Program nagród zapewnia wzajemność w relacjach z klientami. Nagradzasz swoich odbiorców za kupowanie od Ciebie, a oni nagradzają Cię swoją lojalnością.

Wyższe zyski

Lojalni klienci kupują częściej i wydają znacznie więcej na zakup niż przypadkowi, jednorazowi odbiorcy.

Jak stworzyć dobry program lojalnościowy sklepu online?

Prosty mechanizm lojalnościowy oparty na punktach pozwala na zaangażowanie docelowych odbiorców w opłacalny sposób, który jest wystarczająco elastyczny, aby zaspokoić wszystkie cele biznesowe.

Aby pomóc Ci to osiągnąć, poniżej przedstawiam kilka wskazówek dotyczących tworzenia skutecznego programu lojalnościowego:

  • Upewnij się, że gromadzisz wystarczająco dużo danych dobrej jakości, aby budować długotrwałe relacje z członkami.
  • Dostosuj swoje oferty i nagrody do konkretnych klientów i głównych celów.
  • Zachwycaj swoich klientów na każdym etapie zakupu.
  • Bądź elastyczny w swoich ofertach, kampaniach i wiadomościach. Stale sprawdzaj skuteczność swojego programu i wprowadzaj wszelkie niezbędne zmiany, aby zaspokoić nastroje klientów.

Podsumowanie

Nie ma jednego uniwersalnego podejścia do zbudowania programu lojalnościowego e-commerce, który zwiększy sprzedaż. Ważne jest, aby dostosować swój program do potrzeb klientów dzięki spersonalizowanym funkcjom, które powodują, że dokonują kolejnych zakupów.

Zacznij od małych rzeczy, uważnie obserwuj zebrane dane i umieść swojego klienta w centrum programu.

Jak opracować strategię UX?

User Experience w pigułce

Czym jest UX? User experience to suma doświadczeń użytkownika w kontakcie z produktem cyfrowym. To wypadkowa ocena wrażeń związanych z wyglądem, atrakcyjnością, czytelnością, łatwością korzystania i przydatnością interfejsu. Jeżeli odbiorcy podoba się to co widzi i od razu wie jak poruszać się po stronie, UX jest dobry. Jeśli interfejs nie wyświetla się poprawnie, design drażni, a użytkownik momentami traci pewność czy strona nadal działa, user experience zdecydowanie wymaga poprawy.

Strategia UX – co to jest?

Strategia User Experience to sposób myślenia o produkcie cyfrowym nakierowany na osiągnięcie jego wysokiej użyteczności. Sposób uwzględniający, że na wypadkową użyteczność strony WWW bądź sklepu internetowego składa się wiele składowych ocen, których odbiorca dokonuje w kontakcie z interfejsem. Przy czym trzeba pamiętać, że większość z tych ocen dzieje się bardzo szybko i nieświadomie.

Celem tworzenia strategii UX jest wzięcie pod uwagę istotnych warunków wpływających na całkowite doświadczenie użytkownika. Jednocześnie ważne jest by użyteczność osiągana w trakcie wdrożenia przekładała się na rzeczywistą efektywność biznesową.

Dlaczego strategia UX jest istotna?

Dobry UX serwisu internetowego wspiera osiąganie celów biznesowych. Sklep internetowy sprzedaje więcej, aplikacja ułatwia obsługę klientów, którzy chętniej wracają do sklepu, formularz na stronie firmowej „zbiera” więcej zamówień.

Bez strategii trudniej jest osiągnąć dobre wyniki na standardowym rynku. Co prawda, nadal możliwy jest spektakularny sukces monopolisty oraz ciągle wiele da się uzyskać obniżając ceny i stosując agresywny marketing. Jednak dobry UX, stworzony na bazie konkretnej wiedzy sprawia, że współczynniki konwersji są wyraźnie wyższe.

Strategia UX – jakie elementy ją kształtują?

Lista czynników, które warto i należy brać pod uwagę tworząc strategię UX jest długa i obejmuje kilkadziesiąt pozycji. W dzisiejszym artykule skoncentruję się na kilku wybranych, które są – jak wynika z naszych obserwacji i doświadczeń – częstym powodem niskiej użyteczności stron WWW i sklepów internetowych.

Nawigacja

Czytelność i intuicyjność systemu nawigacji ma podstawowe znaczenie dla odbioru strony przez użytkownika. Przedłużające się próby dotarcia do poszukiwanego przez odbiorcę elementu szybko powodują niezadowolenie i frustrację. Te z kolei bezpośrednio poprzedzają porzucenie strony lub sklepu. Na co zwrócić uwagę przy projektowaniu nawigacji napisaliśmy w jednym z wpisów w grudniu 2021 roku.

Responsywność

Odsetek użytkowników korzystających z Internetu przy pomocy urządzeń mobilnych jest wysoki i stale rośnie. Planując, a następnie projektując i wdrażając rozwiązanie webowe należy bezwzględnie o tym pamiętać. Znacznie ograniczona funkcjonalność w stosunku do wersji desktopowej, błędy w wyświetlaniu informacji (np. obcięte treści, niewidoczne przyciski), czy UI niedostosowane do wyświetlaczy smartfonów to recepta na klęskę. Dlatego tworząc strategię UX warto rozważyć podejście Mobile First Design.

Dopasowanie do grupy docelowej

Osiągnięcie wysokiej użyteczności strony WWW nie jest możliwe bez uwzględnienia przyzwyczajeń i oczekiwań grupy docelowej. Jeżeli interfejs ma zostać oceniony dobrze, musi być przede wszystkim zgodny w warstwie graficznej z poczuciem estetyki odbiorców. Co równie ważne strona, sklep, aplikacja powinny komunikować się zrozumiałym i akceptowalnym dla odbiorców językiem. Bardziej szczegółowo odnieśliśmy się do tematu we wpisie dotyczącym personalizacji UX serwisów internetowych.

Kwestie techniczne

Ostatnią grupą czynników, które należy uwzględnić tworząc strategię UX są elementy mniej widoczne, ale wpływające na odczucia odbiorców. W pierwszej kolejności, często zaniedbywane, kwestie związane z szybkością wczytywania witryny (opisane szerzej w artykule o Core Web Vitals). Dochodzą do nich komunikaty błędów oraz dokumentacja użytkownika (poczynając od tooltipów, kończąc na podręcznikach użytkownika). Do grupy tej warto zaliczyć także sposób informowania użytkownika o miejscu procesu w jakim aktualnie się znajduje (np. w trakcie finalizacji zakupu w koszyku).

infografika: Tworzenie strategii UX. Jak osiągać wysoką użyteczność produktów cyfrowych.
Infografika: Tworzenie strategii UX. Jak osiągać wysoką użyteczność produktów cyfrowych.
pobierz pdf

Jak stworzyć strategię UX?

Tworzenie strategii UX nie odbiega zasadniczo od tworzenia innych planów. Składa się z kilku kroków, które trzeba przeprowadzić konsekwentnie i metodycznie.

Spisz założenia

Wbrew pozorom to kluczowy punkt tworzenia strategii. Nawet jeśli sądzisz, że wszystko masz w głowie poświęć czas na opisanie wizji gotowej witryny. Jeśli prowadzisz sklep, wyobraź sobie jak będzie wyglądała sprzedaż. Pomyśl kto będzie klientem, w jaki sposób będzie Cię znajdował, jak wyszukiwał produkty i finalizował transakcję. W przygotowaniu modelu odbiorcy może pomóc Ci nasz wpis Czym jest persona i jak ją stworzyć? – darmowy przykład.

Zrób dokładny research

Rozpoznanie powinno obejmować zarówno grupę docelową, jak i aspekty rynkowe obejmując produkt i konkurentów. Ten etap pozwoli na określenie podstawowych założeń projektowanego interfejsu. Pokaże „jak to się dziś robi” i jednocześnie da cenne wskazówki na temat tego, czego klienci oczekują, a czego nie akceptują.

Ustal punkt startowy

Tworzenie strategii UX dla nowego sklepu internetowego i dla witryny, która jest modernizowana to całkiem inne przedsięwzięcia. W każdym z wymienionych przypadków masz inne doświadczenia, a Twoim klienci czegoś się po Twojej stronie spodziewają (lub nie, jeśli to będzie debiut sklepu).

Ustal cel, jaki chcesz osiągnąć

Chodzi tutaj zarówno o cel biznesowy, związany z przeliczanym na pieniądz wynikiem jak i o wysokość na jakiej zawieszasz poprzeczkę pod kątem UX. Jeżeli chcesz stworzyć interfejs bliski ideału, siłą rzeczy musisz dopilnować większej liczby szczegółów. A co za tym idzie, poświęcić projektowi więcej czasu i zaangażować więcej środków.

Chcesz podnieść użyteczność swojej strony lub sklepu?

Zamów przeprowadzenie audytu UX
lub umów się na konsultację

Wypełnij formularz, skontaktujemy się z Tobą

Określ co zrobić, aby osiągnąć cel

Ostatni etap opracowywania strategii UX to planowanie realizacji. Obejmuje on przede wszystkim zagadnienia projektowe dotyczące sposobu budowy strony lub sklepu. Jest to faza, w której dochodzi do ostatecznej decyzji co do zakresu wdrożenia. Zapadają także decyzje dotyczące wyboru technologii dla aplikacji webowej, czasu realizacji oraz wyboru podmiotu odpowiedzialnego za uruchomienie i późniejsze utrzymanie produktu cyfrowego.

Ważnym elementem planowania jest także zabezpieczenie niezbędnych zasobów organizacyjnych i finansowych. Warto przy tej okazji policzyć współczynnik zwrotu z inwestycji (ROI) działań UX. Z jednej strony wyznaczenie Return of Investment utwierdzi Cię w słuszności podejmowanych działań, z drugiej pozwoli ocenić poprawność planowania po zakończeniu projektu.

Podsumowanie

Strategia UX odpowiada za użyteczność tworzonej strony WWW, sklepu internetowego lub aplikacji. Powstaje na podstawie badania rynku i grupy docelowej. Daje wytyczne do wytworzenia produktu cyfrowego, który dzięki spełnieniu potrzeb użytkowników realizuje cele biznesowe.

Z dziennika UX Designerki vol 2

Krok 1 – Persona

Stworzenie i analiza listy gości, dalej zwanych użytkownikami, była pierwszym zadaniem, którego się podjęłam. Tworząc listę brałam pod uwagę takie informacje jak: możliwe alergie, nietolerancja produktów, choroby, które wpływają na dietę, wiek i przyzwyczajenia żywieniowe.

Z pierwszej analizy wynikło, że mam do czynienia z 4 personami:

  • Andrzej Tradycjonalista – święta bez żurku to nie święta!

* Note to self – Użytkownicy zapamiętają smak Twoich potraw na wiele lat.

  • Małgorzata Ekologiczna – weganizm to nasza przyszłość!

* Note to self – Spodziewaj się wykładu na temat wpływu wybranych przez Ciebie produktów na środowisko.

  • Jagna Wybredna – ‘’bleee… Nie zjem tego!”

* Note to self – Dzieci! Bardzo wymagająca grupa użytkowników, a dodatkowo część z nich z cukrzycą i chorobami układu pokarmowego.

  • Aleksandra Alergiczna– lekarz mi zabronił…

* Note to self – Użytkownicy, którzy przez problemy zdrowotne nie mogą spożywać niektórych produktów.

Dosyć sporo jak na jedno śniadanie, nie uważacie? Na szczęście jedynym produktem, który kategorycznie nie mógł znaleźć się na stole ze względu na alergie okazał się miód – uff…

Krok 2 – Podział na dwa interfejsy użytkownika

Biorąc pod uwagę odmienne potrzeby person, najlogiczniejszym byłoby stworzenie zupełnie oddzielnych interfejsów. Idealne, ale wymagające zbyt dużego nakładu w stosunku do samego wydarzenia, byłoby stworzenie 3 interfejsów: Tradycyjny, Ekologiczny i Kreatywny.

Analizując dostępną przestrzeń, budżet i czas na realizację postanowiłam zatrzymać się przy podziale na dwa interfejsy – To może się udać i Kreatywny. Poniżej postaram się w skrócie opisać ich cechy charakterystyczne.

Interfejs 1 – To może się udać

W skład wchodzą 3 persony: Andrzej Tradycjonalista, Małgorzata Ekologiczna, Aleksandra Alergiczna.

Tak wiem, jestem optymistką, ekolog i tradycjonalista przy jednym stole… Niemniej podejmuje wyzwanie, wezmę na siebie przywoływanie do porządku, nawigację między tematami i próbę zadowolenia wszystkich podniebień.

Przygotowując interfejs zwróciłam szczególną uwagę na:

  • Tradycję – nie może zabraknąć tradycyjnych potraw i dekoracji.
  • Pochodzenie produktów – Ekolog, słysząc, że kupiłaś warzywa w markecie uzna, że ślad węglowy jaki zostawił po sobie ten produkt jest nie do zaakceptowania i on tego nie ruszy. Tradycjonalista z drugiej strony, stwierdzi, że produkty zakupione w markecie nie mają smaku i są bez wyrazu.
  • Skład produktów – niech wizyta rodziny nie skończy się na ostrym dyżurze.
  • To może się udać – pozytywne nastawienie to podstawa!

Interfejs 2 – Kreatywny

W skład wchodzi jedna persona – Jagna Wybredna.

Wszyscy jesteśmy świadomi, że dzieci to jedna z najbardziej wymagających grup. Bez znaczenia czy mówimy o modzie, diecie, spędzaniu wolnego czasu itd. Dzieci wytkną Ci każdy błąd, głośno wyrażą swoje niezadowolenie, ale na szczęście jako jedyna grupa, następnego dnia, nie będą już tego pamiętać. Tym bardziej nie wypomną Ci tego po 10 latach przy okazji innego rodzinnego spędu.

Przygotowując interfejs zwróciłam szczególną uwagę na:

  • Zieleninę –natka, koperek, szpinak, sałata, szczypiorek, przyprawy ziołowe itp. nie zostaną zaakceptowane. Nawet najmniejsze źdźbło wypatrzone przez użytkownika spowoduje lawinę komentarzy, głośno wyrażanych opinii, co w ostateczności doprowadzi do strajku i całkowitego porzucenia interfejsu.
  • Zbyt skomplikowane produkty – najważniejsza jest prostota, im dłuższa lista składników tym większe zniechęcenie. Produkty powinny być możliwie proste i odpowiednio od siebie odseparowane. Zapomnij o sosie podanym na ziemniakach, kotlecie czy ryżu. Jedyne akceptowalne połączenie to sos pomidorowy + makaron spaghetti – które, jak wiemy zupełnie nie pasuje do naszego wydarzenia.
  • Wprowadzenie – podanie posiłku powinno być kreatywne, wesołe i wzbudzać ciekawość. Najlepiej podając dania opowiadać anegdoty. Przykład: Szef kuchni z dumą prezentuje marchewkę królewską, podaną z filetem rybnym wyłowionym przez uznanego w swym fachu Karola Ryboustego, a wszystko to przyozdobione jest złocistymi ziemniakami itd. itd…
  • Niespodzianki / nagrody – ta grupa jak żadna inna kocha niespodzianki! Przygotowanie deseru, gier i nagród, sprawi, że użytkownicy Cię pokochają.

* Note to self – 100% użytkowników tej grupy potwierdziło, że truskawka to najlepszy owoc na świecie!

Krok 3 – Nawigacja

Znam już swoich użytkowników i ich potrzeby. Kolejnym i ostatnim krokiem jest nawigacja na stronie www, odpowiednie rozmieszczenie interfejsów i użytkowników.

Przede wszystkim dystans

  • Zalecana odległość między interfejsami min. 2m – tak aby interfejs 2 nie skończył na plecach interfejsu 1.
  • Ekologa i Tradycjonalistę najlepiej oddzielić odległością przynajmniej jednego krzesła.

* Note to self – dystans nie może być zbyt duży, w razie niepowodzenia całej akcji, może skończyć się babką lub co gorsza żurkiem na ścianie.

  • Podając godzinę wydarzenia należy doliczyć około 30min na ostatnie poprawki – nie daj się zaskoczyć wcześniejszym przyjazdem.

* Note to self – Nie zapomnij o nawodnieniu, krótki czas na realizację wydarzenia i stres z nim związany mogą powodować odwodnienie (informacja potwierdzona przez specjalistów).

infografika: Z dziennika UX Designerki vol 2: Happy UX-Easter
Infografika: Z dziennika UX Designerki vol 2: Happy UX-Easter.
pobierz pdf

Podsumowując

Rodzina to wyjątkowa grupa docelowa. Nie mamy wpływu na jej skład, a tym bardziej zachowania jej członków. Najlepiej z góry zaakceptować to jaka jest i cieszyć się nią.

W sumie to jest całkiem jak w sklepie internetowym, nie? Klienci są różni, każdego z osobna nie sposób w pełni zadowolić… a żyć i sprzedawać trzeba. Zostaje więc tylko zadbać o sposób udostępnienia oferty Twojego sklepu internetowego menu i organizację świątecznego stołu. Nie próbuj zadowolić każdego możliwego klienta gościa, skup się na grupie docelowej, na personach i dbaj, aby Twój sklep stół odpowiadał na ich potrzeby.

Post scriptum – Pij dużo wody i przygotuj miskę truskawek w razie awarii – To może się udać! 🙂

Wyszukiwarka produktów w sklepie internetowym – o co warto zadbać?

Czym jest wyszukiwarka w sklepie internetowym?

Wyszukiwarka to oprogramowanie, które przeszukuje bazę danych informacji zgodnie z zapytaniem użytkownika. Wyszukiwarka dostarcza listę wyników, które najlepiej pasują do tego, co użytkownik próbuje znaleźć. Obecnie w Internecie dostępnych jest wiele różnych wyszukiwarek, z których każda ma własne możliwości i funkcje. Za pierwszą stworzoną wyszukiwarkę uważa się Archie, która służyła do wyszukiwania plików FTP, a za pierwszą wyszukiwarkę tekstową – Veronica. Obecnie najpopularniejszą i najbardziej znaną wyszukiwarką jest Google.

Wyszukiwanie w witrynie e-commerce, w najbardziej podstawowym zakresie, pomaga użytkownikom znaleźć dokładnie te produkty, których szukają w Twoim sklepie, poprzez dopasowanie słów kluczowych. Ale może – a nawet powinno – robić o wiele więcej.

Co powinna zawierać wyszukiwarka w sklepie internetowym

Choć użytkownicy lubią wyszukiwać, nierzadko otrzymują słabe wyniki wyszukiwania: Aż 61% wyszukiwarek stron e-commerce osiąga wyniki „poniżej akceptowalnej wydajności wyszukiwania” (https://baymard.com/blog/ecommerce-search-query-types). Dlatego warto zadbać o to, aby wyszukiwarka Twojej strony oferowała użytkownikom najlepsze wyniki, dzięki czemu dokonają oni zakupu, zamiast szukać produktów gdzieś indziej.

Projektując lub wybierając wyszukiwarkę pamiętaj o funkcjonalności:

1. Umożliwiaj popełnianie błędów i korzystanie z autokorekty.

Jaki jest najtrudniejszy do przeliterowania produkt, który masz przy sobie? Być może produkty do pielęgnacji skóry – nawilżająco-dotleniające, a może czujnik prędkości obrotowej i położenia? Nawet jeśli wszystkie Twoje produkty są łatwe do przeliterowania, nadal będziesz musiał brać pod uwagę literówki i autokorektę – zwłaszcza biorąc pod uwagę odsetek konsumentów, którzy dokonują zakupów za pomocą urządzeń mobilnych w responsywnej wersji strony sklepu.

Upewnij się, że Twoja wyszukiwarka jest zoptymalizowana pod kątem rozumienia fonetycznych oraz ortograficznych błędów i literówek, aby proste błędy nie powodowały wyświetlania pustej strony wyników.

2. Zapewniaj wyniki synonimów.

Zapewnienie, że Twoja wyszukiwarka rozumie synonimy, pomoże użytkownikom znaleźć produkty, których szukają. W niektórych rozwiązaniach dostępnych na rynku, trzeba to dodać ręcznie w zależności od potrzeb. W innych biblioteki synonimów są tworzone automatycznie.

3. Zadbaj aby wyszukiwarka była widoczna.

O tym chyba nie trzeba przypominać, ale upewnij się, że użytkownicy widzą pola wyszukiwania. Istnieje kilka najlepszych praktyk dotyczących pasków wyszukiwania związanych z użytecznością. Przede wszystkim jednak, nie jest to miejsce na kreatywność. Umieść ją w miejscu, w którym klienci zwyczaj jej szukają i spraw, aby użytkownicy mogli łatwo zorientować się, co to dokładnie jest i jak z tego korzystać – np. poprzez umieszczenie ikony lupy, która w powszechnym rozumieniu oznacza wyszukiwanie.

4. Nie pozwól, aby wyszukiwanie w witrynie kończyło się na niczym.

Jeśli na Twojej stronie znajduje się klient, który chce zrobić zakupy pod dużym naciskiem, ostatnią rzeczą, jakiej pragniesz, jest wysłanie komunikatu, że nie masz dla niego odpowiedniego produktu. Dlatego warto zadbać o to, aby typowe wyszukiwania dawały jakieś wyniki. Jeśli nie masz odpowiednich produktów do wyświetlenia, skonfiguruj swoje rozwiązanie tak, aby polecało powiązane produkty, zamiast wyświetlać pusty ekran.

5. Korzystaj z danych, aby w przyszłości udoskonalać parametry wyszukiwania.

Dane analityczne pochodzące z wyszukiwarki produktów, mogą dostarczyć wielu informacji na temat tego, czego oczekują klienci oraz w jaki sposób myślą i dokonują zakupów. Kiedy będziesz mieć wystarczająco dużo danych, aby wyciągnąć wnioski, będziesz mógł sprawdzić, czy słownictwo klientów jest zgodne z tym, co znajduje się na stronach produktów, a jeśli nie, podjąć kroki w celu ich połączenia.

Skuteczna wyszukiwarka w sklepie internetowym - dlaczego warto ją mieć.
Infografika: Skuteczna wyszukiwarka w sklepie internetowym – dlaczego warto ją mieć.
pobierz pdf

6. Skonfiguruj funkcje wyszukiwania mobilnego.

Odsetek ruchu w handlu elektronicznym pochodzącego z urządzeń mobilnych stale rośnie, a różne metody płatności ułatwiają cały proces zakupu na urządzeniach mobilnych. Dlatego tak ważne jest, aby wyszukiwarka była w pełni funkcjonalna również na urządzeniach mobilnych. Inteligentne sugestie autouzupełniania, czyli podpowiedzi zapytań, mogą być potężnym narzędziem, dzięki któremu mobilni użytkownicy będą mogli poruszać się po stronie, ograniczając ilość wpisywanego przez nich tekstu.

7. Rozważ dodanie grafiki i przycisków do wyników wyszukiwania.

Użytkownik o wysokiej motywacji ląduje w wyszukiwarce, ponieważ szuka czegoś, co go interesuje. Poprzez merchandising wyników wyszukiwania (tzw. „searchandising”) można:

  • Nadawać różną wagę produktom, aby lepiej kontrolować, które wyniki są wyświetlane i kiedy
  • Rekomendować odpowiednie produkty, nawet jeśli nie masz w swojej ofercie tego, czego szuka użytkownik

Wyszukiwarka produktów w sklepie online – dlaczego to must have?

Dobra wyszukiwarka produktów jest potężną funkcją dla Twojego sklepu internetowego, nie tylko dlatego, że pomaga klientom szybko znaleźć pożądane produkty – zbiera ona również ważne dane na temat tego, czego chcą Twoi klienci, jak mówią o tych produktach lub usługach i jak możesz zoptymalizować swoją ofertę właśnie dla nich.

Skuteczna wyszukiwarka produktów:

1. Poprawi user experience sklepu

Prawie nikt nie lubi przeklikiwać się przez różne kategorie lub szukać wśród setek dostępnych produktów tego, który mu odpowiada. Jest to strata czasu. Większość użytkowników odwiedza sklep internetowy, znajduje wyszukiwarkę produktów i wpisuje nazwę poszukiwanego produktu. Otrzymują szybko wyniki związane z ich wyszukiwaniem, bez konieczności przeglądania sklepu. Dzięki wewnętrznej wyszukiwarce zmniejszysz liczbę użytkowników, którzy opuszczają stronę, i zwiększysz liczbę konwersji. Możemy Cię zapewnić, że jeśli po 5 sekundach nie będą wiedzieli, gdzie znaleźć to, czego szukają, opuszczą Twój sklep internetowy.

Rejestrujesz spadek sprzedaży w swoim sklepie internetowym?

Zamów przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

2. Zwiększy sprzedaż krzyżową

Zdarza się, że użytkownik szuka konkretnego produktu, ale jest on wyprzedany lub niedostępny. Bez wewnętrznej wyszukiwarki nie możesz nic dla niego zrobić i najprawdopodobniej przejdzie do innego sklepu. Co się jednak stanie, jeśli masz wewnętrzną wyszukiwarkę? Możesz „zaatakować” swojego klienta sprzedażą krzyżową. Sprzedaż krzyżowa odnosi się do sprzedaży produktów powiązanych, zastępczych lub uzupełniających. Na przykład, użytkownik może szukać konkretnego modelu telefonu komórkowego, który może być już wyprzedany. Wewnętrzna wyszukiwarka wyświetli komunikat „ten produkt nie jest teraz dostępny, ale tutaj są 4 podobne modele”, co skłoni użytkownika do dalszego przeglądania Twojego sklepu. Jest to również pomocne, gdy produkt jest dostępny. Gdyby ta osoba ponownie szukała tego samego telefonu komórkowego, wyszukiwarka na stronie internetowej pokazałaby jej model i inne powiązane akcesoria, takie jak futerały czy ładowarki.

Bez wyszukiwarki wewnętrznej możesz sprzedać telefon, ale z nią możesz sprzedać telefon, etui i inne akcesoria. Nie tylko zatrzymasz klienta, który miał odejść, ale także skłonisz go do zakupu większej liczby rzeczy, niż początkowo szukał. Całkiem nieźle!

3. Ułatwi wyszukiwanie produktów

Istnieją sklepy internetowe, których produkty są trudne do przeliterowania. Niektóre produkty trudno jest sklasyfikować, trudno jest nawet określić, czym są, ponieważ niewiele o nich wiadomo. Jak je znaleźć bez dobrej jakości wyszukiwarki? Zwykła wyszukiwarka nie wystarczy, potrzebna jest taka, która potrafi przewidzieć, czego szukają użytkownicy. Wyszukiwarka, która nie znajduje produktu z powodu błędnej litery, jest bezużyteczna, ponieważ tylko niewielki procent użytkowników poprawnie wpisuje nazwę produktu.

Podsumowanie

Zapewnienie płynnego sposobu wyszukiwania dostarczy Twoim klientom przejrzyste, intuicyjne doświadczenie, które skróci ich drogę do koszyka i sprawi, że będą zadowoleni z Twojej witryny – i chętnie wrócą po więcej. Udostępnij im więcej możliwości i ułatwień oraz spraw, że Twoja wyszukiwarka stanie się napędzającym biznes narzędziem – którym ma być!

Konsultacje User Experience (UX) – czego się dowiesz?

User Experience – krótkie przypomnienie

Zanim przejdziemy do konsultacji User Experience, krótkie przypomnienie samego terminu UX.

Internauta odwiedzający firmowy serwis www albo witrynę e-sklepu ocenia stronę jako ładną lub brzydką, nowoczesną lub przestarzałą, łatwą w obsłudze lub trudną itd. Wszystkie te oceny, obserwacje i wrażenia odbiorcy stanowią doświadczenia użytkownika, czyli User Experience.

Wypadkowa doświadczeń odpowiada za ogólną ocenę strony i decyzję „podoba mi się, zostaję na stronie” lub „nie podoba mi się tutaj, wychodzę ze strony”.

Doświadczenia poszczególnych osób są subiektywne. Jedni lubią żywe kolory, inni preferują odcienie pastelowe. Praktycznie każdy element, który stanowi część strony może się podobać lub nie. I nie dotyczy to tylko wyglądu, ale i elementów graficznych oraz architektury informacji, czyli treści i ich rozmieszczenia, nawigacji etc.

Różnorodność wrażeń użytkowników sprawia, że stworzenie interfejsu strony, który będzie akceptowany przez wielu odbiorców jest zadaniem złożonym i pracochłonnym. Projektowanie pod kątem User Experience wymaga łączenia wiedzy z odległych dziedzin począwszy od psychologii (zobacz wpis na temat wpływu emocji na decyzje klienta), przez grafikę, po marketing.

Czym są konsultacje User Experience?

Konsultacje UX to usługa ekspercka adresowana do właścicieli oraz projektantów stron internetowych. Umożliwia ona zweryfikowanie przyjętych założeń tworzonego projektu interfejsu (witryny, sklepu internetowego, aplikacji mobilnej itp.) pod kątem użyteczności dla odbiorców. Usługa jest dosyć często wykorzystywana w trakcie modernizacji strony internetowej, szczególnie, gdy zmiany spowodowane są niskimi współczynnikami konwersji.

Na czym polegają konsultacje User Experience?

Formy konsultacji UX są różne. Od wspólnych warsztatów, po dostarczenie odpowiedzi na konkretne pisemne pytania postawione przez klienta. Jednak bez względu na formę istota pozostaje ta sama: ekspert odnosi się do wybranych, wskazanych przez zamawiającego aspektów działania strony. W przeciwieństwie do pracy w ramach audytu UX strony, w którym ekspert dokonuje przeglądu badanej witryny lokalizując problematyczne elementy.

Kim jest konsultant UX?

Prowadzenie konsultacji User Experience wymaga wiedzy i doświadczenia z obszaru UX oraz umiejętności analitycznych i komunikacyjnych. Dobry konsultant jest najczęściej UX designerem z kilkuletnim doświadczeniem zawodowym lub audytorem UX.

Z punktu widzenia klienta konsultant UX jest doradcą, który na bazie wiedzy i doświadczenia potrafi wskazać dobre rozwiązania oraz wykluczyć koncepcje, które nie sprawdzają się w praktyce. Jest też ekspertem, który na przykładach dotyczących bezpośrednio klienta, wyjaśni niuanse projektowania skierowanego na potrzeby i oczekiwania użytkownika.

Konsultacje UX - dla kogo, w jakim celu i czy to się opłaca.
Infografika: Konsultacje UX – dla kogo, w jakim celu i czy to się opłaca.
pobierz pdf

Konsultacje UX – kiedy warto skorzystać?

Jak napisałem wcześniej, konsultacje UX przydają się zarówno w trakcie tworzenia nowego serwisu, jak i modyfikacji istniejącego. W obu przypadkach warto z nich korzystać aby potwierdzić słuszność założeń projektowych, dokonać „UX-tuningu” własnych koncepcji oraz skrócić proces wdrożenia i uniknąć kosztownych błędów.

Dla kogo przeznaczone są konsultacje UX?

Pierwszą grupą odbiorców konsultacji UX są właściciele produktów, aplikacji, witryn. Klienci tej kategorii najczęściej poruszają się na wysokim poziomie ogólności. Konsultacje dotyczą kwestii strategicznych. Typowe tematy obejmują układ strony, architekturę i treść informacji, kolorystykę, stosowany język etc. Mówiąc inaczej konsultacje z właścicielami przekładają się na ogólny wygląd i układ interfejsu.

Druga grupa odbiorców to projektanci i web deweloperzy rozwiązujący problemy projektowe, które pojawiają się w trakcie tworzenia interfejsów. Kwestie poruszane w trakcie konsultacji są często bardzo szczegółowe. Dotyczą elementów i funkcjonalności, których użytkownik witryny najczęściej świadomie nie analizuje, ale źle reaguje (np. porzuca stronę) na ich brak. Typowe zagadnienia to np. optymalizacja lub projektowanie skutecznej nawigacji, kształtowanie ścieżki klienta,  czy projektowanie one page checkout.

Konsultacje UX – jakie są korzyści?

Podstawową korzyścią jaką przynoszą klientowi konsultacje UX jest oszczędność czasu. Wykorzystanie praktycznej wiedzy eksperckiej jest bardzo dobrą alternatywą w stosunku do samodzielnego zdobycia wiedzy i wypracowania poprawnych, czyli działających w praktyce rozwiązań. Tym bardziej, że kwestii związanych z User Experience nie da się opanować wyłącznie czytając o dobrych praktykach. Trzeba zdobyć jeszcze doświadczenie, co siłą rzeczy musi trwać i pociąga za sobą ryzyko błędów.

Dlatego drugą niezwykle ważną korzyścią jest możliwość uniknięcia błędów we własnym projekcie. Konsultacje pozwalają ominąć pułapki i problemy, które znalazły się na drodze innych właścicieli i projektantów w innych projektach. Warto pamiętać, że błędy UX bezpośrednio przekładają się na efektywność witryny mierzoną współczynnikami konwersji.

Jak łatwo zauważyć wypadkową korzyścią z konsultacji UX są pieniądze. Krótszy okres wdrażania serwisu lub jego poprawek oraz mniejsza liczba iteracji usuwających usterki to niższe nakłady. Z kolei wyższa użyteczność, to większa efektywność e-sklepu lub witryny firmowej. Można powiedzieć, że zysk jest podwójny.

Chcesz poprawić użyteczność swojej witryny www?

Umów się na konsultację UX

Wypełnij formularz, skontaktujemy się z Tobą

Konsultacje User Experience – co dalej?

Efektem konsultacji UX jest zawsze wiedza. Wiedza ekspercka z niezależnego źródła. Może być ona wykorzystana na wiele sposobów.

Jeśli wnioskiem płynącym z uzyskanych informacji jest „UX nas przerasta, sami nie damy rady” dobrym rozwiązaniem może okazać się zlecenie wykonania projektu lub audytu wyspecjalizowanej agencji. Jeżeli w trakcie konsultacji dowiadujemy się, że zasadniczo nasze pomysły są OK, a warto bardziej przyjrzeć się jakiemuś wybranemu aspektowi, warto kontynuować projekt.

Oczywiście konsultacje UX można prowadzić w projekcie wielokrotnie. Zarówno w odniesieniu do tego samego zagadnienia (choćby w formie cyklicznego angażowania eksperta), jak i do różnych tematów.

Podsumowanie

Konsultacje User Experience nie są usługą dla każdego. Wymagają od klienta podstawowej wiedzy na temat UX. Nie stanowią alternatywy dla kursów i podręczników „Podstawy UX design” lub podobnych. Dostarczają konkretnych odpowiedzi na pytania związane z użytecznością interfejsów stron lub aplikacji internetowych.

Dzięki konsultacjom, zarówno właściciele jak i projektanci stron www, na przykład sklepów internetowych, mogą wiarygodnie zweryfikować założenia projektowe tworzonych lub modyfikowanych interfejsów. Co ważne w krótkim czasie i bez ryzyka popełnienia podstawowych błędów.

Projektowanie UX/UI – różnice pomiędzy UX Design i UI Design

UX i UI design – czym są i dlaczego są istotne?

Pomimo różnych koncepcji, oba elementy są kluczowe podczas projektowania produktu i ściśle ze sobą współpracują. W rzeczywistości nie można mieć jednego bez drugiego, ale stanowią one osobne role z różnymi procesami i zadaniami. A więc do rzeczy.

Czym jest UI Design?

Interfejs użytkownika (UI) to wszystko, z czym użytkownik może wchodzić w interakcje podczas korzystania z produktu lub usługi online. Koncentruje się na wyglądzie, a najbardziej efektywne projekty interfejsu użytkownika są proste, spójne, wręcz niewidoczne i zachęcają użytkownika do pozostania na stronie.

Podczas projektowania UI należy pamiętać o następujących cechach:

  • Empatia: Tworzenie produktu, który jest łatwy i intuicyjny, często oznacza patrzenie na rzeczy z perspektywy użytkownika. Jeśli projektant potrafi wczuć się w użytkownika, który ostatecznie będzie korzystać z projektu, może zacząć dostosowywać swoje decyzje projektowe do jego potrzeb.
  • Współpraca: Rozwój produktu to wysiłek zespołowy. UI designer będzie ściśle współpracować z projektantami UX i badaczami użytkowników, aby przekształcić ich podstawowe modele szkieletowe i architektury informacji UX w pełni zaprojektowane prototypy. Będzie także współpracować z programistami front-end, aby przetłumaczyć swoje projekty na funkcjonalny kod.
  • Teoria kolorów: Niektóre z najważniejszych wyborów, jakich dokonuje projektant, dotyczą kolorów. Nie chodzi tylko o ładny wygląd. Kolory mogą również podkreślać funkcję witryny i wspierać tożsamość marki.
  • Typografia: Przeważająca część informacji w Internecie ma postać tekstu. Ponieważ odgrywa tak kluczową rolę, typografia może decydować o dobrym i złym interfejsie użytkownika.
  • Wzorce projektowe: Wzorce projektowe interfejsu użytkownika oferują ogólne rozwiązania typowych problemów projektowych. Znajomość tych typowych wzorów i komponentów pozwoli zaoszczędzić czas i skoncentrować się na bardziej konkretnych problemach użytkownika.
Potrzebujesz nowej strony www?

Wykonamy dla Ciebie projekt UX/UI

Wypełnij formularz, skontaktujemy się z Tobą

Czym jest UX Design?

Projektowanie UX, czyli doświadczeń użytkownika polega na zrozumieniu, jak czują się klienci, gdy wchodzą w interakcję ze stroną internetową, aplikacją lub produktem. UX design wymaga więc stworzenia person i zrozumienia ich zachowań, a także kontekstu w jakim korzystają ze strony. To z kolei wymaga badań UX użytkowników i testowania UX.

Dobry projekt UX będzie użyteczny, dostępny, wiarygodny, możliwy do znalezienia i wartościowy. Podczas prac projektant będzie zadawał m.in. takie pytania:

  • Czy to jest użyteczne? Aplikacja lub strona internetowa spełnia oczekiwania lub potrzeby klienta czy rozmija się z nimi? Czy robi to lepiej niż konkurencja?
  • Użytkownik porusza się po witrynie z łatwością, czy nie ma problemów z nawigacją? Czy witryna lub usługa są łatwe do znalezienia dla użytkowania?
  • W jaki sposób użytkownicy doświadczają produktu/usługi, czy wszyscy odbierają go w ten sam sposób?
  • Czy witryna jest wiarygodna? Dostarcza szczegółowych i przejrzystych informacji?
  • Czy to jest wartościowe?

Jeśli projektowanie UX wydaje się skomplikowane, to dlatego, że tak właśnie jest. Proces projektowania UX wymaga specjalistycznych umiejętności z dziedzin takich jak:

  • prowadzenie analizy biznesowej / użytkownika,
  • projektowanie architektury informacji,
  • prototypowanie,
  • analiza i modelowanie scenariuszy użycia produktu,
  • umiejętności miękkie: empatia, komunikacja, współpraca.

Bez zrozumienia znaczenia UX, wiele krytycznych elementów projektu jest pomijanych lub przekazywanych do realizacji bez odpowiednich wytycznych i wskazówek młodszemu projektantowi graficznemu lub stażyście.

Różnice między UX Design i UI Design.
Infografika: Różnice między UX Design i UI Design.
pobierz pdf

Jak UI design współpracuje z UX design?

UI i UX to w rzeczywistości przecinające się siły, które się wzajemnie uzupełniają.

UI to wygląd produktu, podczas gdy UX to sposób, w jaki użytkownicy czują się podczas korzystania z niego. Innymi słowy, UX to proces rozumienia tego, czego chce i co czuje użytkownik, przy czym interfejs użytkownika jest jednym z wyników tego wglądu. Projekt wizualny (UI) odgrywa ważną rolę w przekształcaniu projektu interfejsu użytkownika poprzez układy, odstępy, obrazy, filmy, grafikę i kolory.

Wiele osób lubi patrzeć na role UX i UI przez analogię do tworzenia nowego domu. Projektant UX jest w takim modelu „architektem”, projektant UI „projektantem wnętrz”. Pierwszy jest zatrudniony do zaprojektowania idealnego domu dla konkretnej rodziny, wiedząc, ile potrzebuje ona pomieszczeń, jak wygodnie się między pomieszczeniami poruszać i jakie cechy domu są dla rodziny ważne. Drugi dodaje ostatnie szlify, aby dom był wygodniejszy i bardziej estetyczny.

Podobnie jak w przypadku budowania domu, projektanci UX i UI muszą ściśle współpracować na wszystkich etapach, aby zrozumieć użytkownika oraz zaprojektować, zbudować, przetestować i udoskonalić produkt.

Podsumowanie

Do tej pory powinieneś dobrze rozumieć różnice między projektowaniem UI i UX. Są to dwa odrębne działy. Tak, uzupełniają się, ale są bardzo różne. Projektowanie UX jest bardziej analityczne niż projektowanie UI.

W skrócie:

  • UI to sposób, w jaki rzeczy wyglądają, a UX to sposób działania,
  • UX to proces, a UI to wynik,
  • UX sprawia, że interfejs jest użyteczny, UI sprawia, że interfejsy są piękne.

Architektura informacji UX – co to takiego?

Architektura informacji UX – dlaczego to takie ważne?

Na początek ograniczmy się do bardzo ogólnego stwierdzenia, że architektura informacji (w skrócie IA, od angielskiego: Information Architecture) to sposób organizowania, prezentacji i udostępnienia danych. Ponieważ dane są czymś, czego nam na pewno w dzisiejszych czasach nie brakuje, warto zadbać, by nie zaginąć w morzu wszelakich informacji. I nie tylko nie zaginąć, ale również przedostać się do świadomości odbiorcy oraz wywrzeć na nim pozytywne wrażenie.

Czym jest architektura informacji i z czego się składa?

Jak powiedzieliśmy, architektura informacji jest sposobem organizowaniem danych. Oznacza to, że informacje są w pewien sposób grupowane, oznaczane i nazywane.

Architektura informacji książki to zbiór zdań, połączonych w akapity, pogrupowanych w mające tytuły rozdziały. Zbiór ten uzupełnia z reguły spis treści i być może indeks użytych terminów lub nazwisk osób wymienionych w książce.

Architektura informacji strony (na przykład sklepu) oprócz grup danych dotyczących firmy, produktów, warunków zakupu itp. obejmuje również system nawigacji, czyli poruszania się po stronie w celu odnalezienia konkretnej informacji. Bardzo często system ten wspiera się wyszukiwarką pomagającą dotrzeć do informacji bez potrzeby wnikania w logikę rozmieszczenia danych. Mówiąc o stronie internetowej warto podkreślić rolę graficznej prezentacji danych. Układ treści, użycie ikon, podkreślenie informacji kolorami czy krojem czcionki ma znacznie większe znaczenie niż w materiałach drukowanych.

Komponenty architektury informacji

Podsumowując, na architekturę informacji składają się:

  • sposób łączenia informacji w grupy mające wspólne cechy (np. przekazujące komunikat, dotyczące konkretnego tematu),
  • kategoryzowanie, nazewnictwo i oznaczanie grup informacji (np. w formie nagłówków, kategorii produktów, stosowania ikon lub innych wyróżników dla podobnych danych),
  • nawigacja, czyli poruszanie się po danych według zaprojektowanych reguł
  • wyszukiwanie, czyli możliwość bezpośredniego dotarcia do pożądanej informacji, z pominięciem nawigacji.

Architektura informacji strony internetowej – do czego jest potrzebna?

Wspomniałem już o potrzebie zaistnienia ze swoim przekazem w świecie przesyconym danymi i komunikatami. W praktyce sprowadza się to do możliwie szybkiego i zrozumiałego dla odbiorcy przekazania jakiego typu informacje mu udostępniamy oraz jak się po tych informacjach poruszać.

Poprawnie zaprojektowana architektura informacji sprawia, że po wejściu na stronę odbiorca bardzo szybko zaczyna ze strony korzystać. Jeśli użytkownik otwierając po raz pierwszy stronę e-commerce od razu wie, że jest w sklepie to dobry znak. Jeżeli ponadto wie, że sklep sprzedaje poszukiwany produkt, a po chwili orientuje się gdzie go szukać jest jeszcze lepiej. Jeśli zauważa jednocześnie jak dotrzeć do koszyka, architektura informacji e-sklepu jest co najmniej dobra.

Korzyści z projektowania architektury informacji

W biznesie korzyści zawsze oceniane są w perspektywie pieniądza. Czy warto więc podjąć wysiłek by zaplanować architekturę informacji? Odpowiedź brzmi: „zdecydowanie tak”. Tworzenie witryny z dobrą architekturą informacji przekłada się na opisane niżej korzyści biznesowe.

Uproszczenie i skrócenie procesu projektowania serwisu

Świadome włączenie zagadnień architektury informacji porządkuje proces tworzenia witryny. Treść stanowi szkielet serwisu. Pozwala to na równoważenie przejrzystości treści z wyglądem interfejsu. W efekcie potrzeba mniej iteracji dla dostosowana strony do potrzeb i przyzwyczajeń odbiorców.

Zwiększenie współczynników konwersji

Przemyślane rozmieszczenie informacji oraz ich intuicyjne oznaczenie i spięcie systemem nawigacji podnosi użyteczność serwisu. W konsekwencji użytkownicy rzadziej porzucają stronę w pierwszym kontakcie. Wygodne poruszanie się w serwisie i prosta realizacja czynności (wyszukiwania produktów, odnajdywania informacji etc.) przekładają się na podniesienie współczynników konwersji, czyli większą liczbę zapytań, zamówień, transakcji.

Możliwość sterowania ruchem użytkowników

Projektowanie architektury informacji strony oznacza także, że wybrane treści można zaprezentować tak, aby naturalnie wzbudzały większe zainteresowanie użytkowników. Efekt przyciągnięcia uwagi realizowany jest zarówno przez nazewnictwo, jak i oznaczenia graficzne oraz lokalizację wybranych elementów.
Przykładem takich działań w sklepie internetowym może być przypisanie produktów, których sprzedaż chcemy zwiększyć do kategorii „Wyprzedaż” lub „Nowość” oraz oznaczenie etykiet tych kategorii kontrastowymi kolorami bądź ikonami w menu.

Dodatkową korzyścią wynikającą z projektowania IA, jest uporządkowanie biznesu. Analiza i projektowanie rozmieszczenia informacji dostarczają bowiem cennych danych zarówno na temat klientów jak i oferty sklepu. Niejednokrotnie okazuje się, że wstępnie zaprojektowany podział produktów jest nielogiczny i niezrozumiały dla potencjalnego odbiorcy.

Architektura informacji - czym jest i dlaczego warto ją projektować
Infografika: Architektura informacji – czym jest i dlaczego warto ją projektować.
pobierz pdf

Jak stworzyć architekturę informacji?

Budowa AI zdecydowanie nie jest przedsięwzięciem, któremu wystarczy poświęcić kilka godzin. Nawet jeżeli w trakcie tworzenia strony internetowej nie wiążemy części czynności z architekturą informacji, jednak faktycznie dotyczą one IA.

Badania

Wstępna, analityczna część budowy IA poświęcona jest przeglądowi udostępnianych materiałów i treści, potrzeb biznesowych, które za prezentacją informacji stoją oraz preferencji odbiorców. Obejmuje ona:

  • działania wewnątrz firmy (co chcemy przekazać, komu, co w przekazie jest najważniejsze, co chcemy osiągnąć),
  • badania UX potencjalnych odbiorców (jak kategoryzują informację, jak szukają danych, jakim językiem się posługują).

Strategia

Na tym etapie tworzona jest struktura zbioru danych. Zapadają decyzje odnośnie podziału informacji na kategorie i sposób ich oznaczenia (etykietowanie). Powstaje zarys nawigacji określający w jaki sposób użytkownik będzie docierał do danych.

Opracowana strategia IA daje odpowiedź na to jak użytkownik będzie poruszał się po serwisie rozpoczynając od strony głównej oraz jakie będzie miał możliwości gdy spotkanie ze sklepem rozpocznie od konkretnego produktu.

Chcesz wiedzieć jak opracować strategię UX? Przeczytasz o tym w innym artykule na blogu.

Projektowanie

Faza projektowania UX to czas kreowania kierunkowych rozwiązań rozmieszczenia informacji, jej oznaczeń oraz działania nawigacji oraz systemu wyszukiwania. Na tym etapie powstają makiety UX, które umożliwiają pierwszą praktyczną weryfikację założeń strategii z użytkownikami.

Wdrożenie

Końcowy etap, to przełożenie wypracowanych wcześniej rozwiązań na funkcjonującą stronę internetową lub sklep internetowy. Poszczególne bloki informacji reprezentowane na makietach przez umowne bloki tekstowe wypełnione zostają rzeczywistą treścią. Serwis otrzymuje interfejs graficzny (UI). Następuje konfiguracja systemu nawigacji poprzez zdefiniowanie połączeń elementów. Zaczyna działać mechanizm wyszukiwania.

W efekcie witryna funkcjonuje zgodnie z potrzebami określonymi w fazie badania, z treściami ułożonymi na podstawie strategii, w schemacie stworzonym na etapie projektowania.

Chcesz przekazać klientom dużo informacji, ale rozmieszczenie treści w witrynie jest trudne?

Zamów projekt strony u specjalistów

Wypełnij formularz, skontaktujemy się z Tobą

IA a SEO

Architektura informacji, ze względu na systematyczny i strukturalny sposób tworzenia porządkuje w znacznym stopniu prezentowane treści. I to jest bardzo dobra wiadomość, jeśli chodzi o pozycjonowanie, czyli działania SEO. Można wręcz powiedzieć, że IA jest z optymalizacją pod przeglądarki po drodze.

Jednak jest i druga, mniej kolorowa, odsłona tej relacji. Wymagania SEO definiuje się na potrzeby robotów przeczesujących Internet. Niesie to za sobą określone konsekwencje. Podstrony jednego serwisu nie powinny mieć podobnych tytułów, nie powinny również pozycjonować się na te same frazy kluczowe. Specjaliści SEO, śledząc popularność fraz faktycznie używanych do wyszukiwania konkretnych produktów, chętnie widzieliby w nagłówkach długie ogony (long tails) czyli nazwy szczegółowo opisujące produkt wraz z jego cechami lub sposobem użycia (zamiast „grzebień” – „różowy grzebień do łamliwych włosów”).

Dlatego połączenie potrzeb jasnej, czytelnej organizacji danych oraz przypisania im nazw nadających logiczne miejsce w całej strukturze informacji z oczekiwaniami SEO bywa trudne. Jednak praktyka pokazuje, że kompromis jest możliwy.

Podsumowanie

Bez względu na to, czy świadomie projektujemy i wdrażamy architekturę informacji, czy nie zajmujemy się nią przy tworzeniu strony lub sklepu, witryna jakąś AI posiada.

Naszym zdaniem czas poświęcony architekturze informacji, poświęcony na analizy, badania i projektowanie zwraca się z nawiązką. Dobra architektura informacji ułatwia bowiem użytkownikowi posługiwanie się stroną internetową i w ten sposób przekłada się na wynik biznesowy.

Co to jest persona UX. Jak tworzyć persony i korzystać z nich w UX Design

Czym jest persona – definicja

Persona to fikcyjny profil reprezentujący grupę ludzi, takich jak użytkownicy czy potencjalni klienci – a także ich sposób myślenia, potrzeby, motywacje i wzorce zachowań. Po określeniu cech takiej postaci możesz wykorzystać je w swojej codziennej pracy, aby „wejść w buty” klienta czy pracownika.

Persony mają kluczowe znaczenie dla sukcesu produktu, ponieważ kierują decyzjami projektowymi poprzez uwzględnianie wspólnych potrzeb użytkowników i wysuwanie ich na pierwszy plan w trakcie organizacji prac jeszcze przed faktycznym rozpoczęciem projektowania UX. Tym samym zapewniają zespołowi wspólne zrozumienie użytkowników pod kątem celów i możliwości. Po zdefiniowaniu person, przejście przez analizę zadań ze scenariuszami zapewnia niedrogi sposób na testowanie i ustalanie priorytetów w trakcie rozwoju.

Persona jako narzędzie zarządzania informacją w procesie projektowania

Projektowanie produktu (product design) w tym UX Design lub tworzenie strategii marketingowej wymaga zgromadzenia i analizy wielu szczegółowych informacji. Tymczasem posługiwanie się suchymi danymi jest trudne. Dane statystyczne wymagają interpretacji i przetłumaczenia na istotne w procesie projektowym wytyczne. Nie pokazują jednak w pełni kontekstu działania użytkowników danego produktu. Przygotowana persona będąca reprezentantem danej grupy, mająca cechy konkretnej osoby, pozwala lepiej wczuć się w motywacje zakupowe nabywców czy zrozumieć interakcję z produktem w punktach newralgicznych procesu kupna-sprzedaży.

Persony mają kluczowe znaczenie dla sukcesu produktu, ponieważ kierują decyzjami projektowymi poprzez uwzględnianie wspólnych potrzeb użytkowników i wysuwanie ich na pierwszy plan w trakcie organizacji prac jeszcze przed faktycznym rozpoczęciem projektowania. Zapewniają zespołowi wspólne zrozumienie odbiorców rozwiązania pod kątem celów i możliwości. Dla wygody posługiwania się modelem użytkownika kluczowy jest łatwy do zapamiętania krótki opis wypunktowujący najważniejsze elementy person.

Po zdefiniowaniu person, przejście przez analizę zadań ze scenariuszami zapewnia niedrogi sposób na testowanie i ustalanie priorytetów w procesie projektowania UX i w dalszym rozwoju produktu. Warto zauważyć, że łatwiej jest także aktualizować pozyskiwaną wiedzę w formie modyfikacji cech przypisanej personie opartej na danych pochodzących z wielu źródeł.

Czy może być więcej niż jedna persona?

Może się wydawać, że im więcej typów person stworzysz, tym więcej odbiorców zostanie objętych analizą. Ale tak to nie działa. Jasne, prawdopodobnie będziesz potrzebować więcej niż jednej persony. Ale przede wszystkim powinieneś skupić się na jakości, a nie na ilości.

W większości przypadków powinny wystarczyć maksymalnie cztery różne profile – sam zaczniesz zauważać, że każda nowa jest tylko odmianą już istniejącej. Celem projektowania person jest uzyskanie wglądu w większość odbiorców. Oznacza to, że niektórzy klienci nieuchronnie wpadną w te same schematy zachowań – i to jest w porządku. Komplikowanie procesu rozwoju profilu użytkownika, aby uwzględnić każdy typ klienta wśród odbiorców, prawdopodobnie przyniesie więcej zamieszania niż jasności. Zacznij analizę od tych, którzy odpowiadają za największą sprzedaż.

Dlaczego warto budować persony dla strony internetowej?

Mówiąc o personie, wskazujemy na jej znaczenie dla kształtowania produktu. Warto jednak pamiętać, że „produkt”, co widać dobrze w e-commerce, może być rozumiany zarówno jako towar, jak i witryna powstającego e-sklepu, który będzie służył do sprzedaży towaru.

Jakość strony internetowej jest wypadkową kilku składowych. Są nimi funkcjonalność, użyteczność (user experience) oraz wygląd witryny (UI, user interface). Persona to narzędzie zorientowane na użytkownika, szczególnie ważne dla projektantów UX, szukających wskazówek co do tego jak zapewnić komfortowe korzystanie z serwisu.

Persony dają więc działom projektowym możliwość omówienia krytycznych cech strony sklepu internetowego. Jest to szczególnie przydatne, gdy podczas jej tworzenia pracuje kilka osobnych działów a każdy z nich ma inny pomysł/rozwiązanie na to, co należy najpierw opracować. Ponieważ skupiają się one na potrzebach użytkowników, zespół może przejść przez scenariusze i określić optymalne rozmieszczenie treści, aby wspierać cel funkcjonalny. Ma to kluczowe znaczenie dla sukcesu strony internetowej lub aplikacji i pozwoli. Jednocześnie pozwoli zaoszczędzić pieniądze i czas na przerabianie witryny po jej uruchomieniu i przetestowanym przez rzeczywistych odbiorców.

Warto również zaznaczyć, że persony zapewniają „twarz” userowi, tworząc więcej empatii i zrozumienia wobec osoby korzystającej z produktu: uniemożliwia to projektantom i programistom stosowanie własnych modeli mentalnych w trakcie projektowania, które mogą nie odpowiadać faktycznym potrzebom użytkownika.

Jak powstaje persona UX?

Tworzenie pełnowartościowej persony składa się z pięciu głównych części: ustalenia, jakie informacje są potrzebne, zebrania ich, analizy, budowy persony i projektowania.

1. Zidentyfikuj potrzebne informacje

Podczas badania bazy klientów będziesz chciał zadawać pytania, aby lepiej ich zrozumieć. Pytania, które zadasz, będą zależeć od tego, co jest ważne dla Twojej firmy. Oto kilka przykładów:

Dane zawodowe

  • Jaka jest ich rola/tytuł zawodowy?
  • W jakiej branży pracują?
  • Jak duża jest ich organizacja?
  • Jakie są ich obowiązki zawodowe?
  • Jak mierzą sukces?
  • Jak wygląda ich typowy dzień pracy?
  • Jakich narzędzi używają w pracy?
  • Komu podlegają?
  • Kto im podlega?
  • Jakie wartości są dla nich najważniejsze w pracy?
  • Jak dostali pracę, którą mają dzisiaj?
  • Jaki jest ich największy strach w pracy?

Dane demograficzne

  • Czy to mężczyzna czy kobieta?
  • Ile mają lat?
  • W jakim przedziale dochodowym się znajdują?
  • Gdzie mieszkają?
  • Czy żyją w małżeństwie?
  • Czy maja dzieci?
  • Jaki jest ich najwyższy poziom wykształcenia?
  • Jakie mają hobby?

Zachowania użytkowników

  • Jak opisaliby swoje zachowanie i osobowość?
  • Co ich inspiruje do działania?
  • Jak zdobywają nowe informacje o swojej pracy?
  • Do jakich sieci i mediów społecznościowych należą?
  • Jakie kanały komunikacji preferują?
  • Czy szukają produktów online?
  • Jak wyglądają ich zakupy: gdzie szukają informacji, jakie kroki prowadzą do zakupu, co doprowadza do podjęcia decyzji?
  • Co często mówią (hasło)?

Cele

  • Jakie są ich główne i drugorzędne cele na ich obecnej pozycji?
  • Jaki jest główny cel życiowy poza pracą, którą wykonują?

Wyzwania

  • Jakie są największe wyzwania, przed którymi stoją na ich obecnym stanowisku?
  • Jakie jest ich wyzwanie poza pracą?

Zastrzeżenia

  • Czy uważają, że Twój produkt lub usługa dobrze pasuje do ich firmy / życia?
  • Dlaczego tak lub dlaczego nie?

Od Ciebie zależy, co chcesz wiedzieć i jakie pytania dadzą Ci właściwe odpowiedzi.

Czym jest persona i jak ją stworzyć?
Infografika: Czym jest persona i jak ją stworzyć?
pobierz pdf

2. Zbierz informacje

Oto kilka sposobów na zebranie powyższych danych:

  • Wywiady zewnętrzne: Wywiady z istniejącymi użytkownikami i potencjalnymi klientami przez telefon lub osobiście. Oferuj zachęty, aby ludzie z radością w nim uczestniczyli. Co więcej, spraw, aby było to wygodne, planując z wyprzedzeniem i usprawniając planowanie. Upewnij się również, że uczestnicy wiedzą, że nie jest to inicjatywa sprzedażowa.
  • Wywiady wewnętrzne: przeprowadzaj wywiady z całym zespołem wewnętrznym (sprzedaż, marketing, obsługa klienta itp.), aby zebrać wgląd w ich interakcje z użytkownikami. Persony tworzone na podstawie doświadczenia zespołu nie tylko pozwalają dowiedzieć się co myśli typowy odbiorca, ale często tłumaczą też relacje pomiędzy decyzjami a pewnymi działaniami klientów
  • Ankiety: Poproś obecnych lub potencjalnych użytkowników o wypełnienie ankiety online lub osobiście. Warto tworzyć ankiety pozwalające weryfikować (np. w sposób ilościowy) przekazywane informacje.
  • Analityka: Badaj dane analityczne ze swojej witryny (np. dostępne w Google Analytics), mediów społecznościowych i innych platform.
  • Formularze: Dodaj pola do formularzy w swojej witrynie lub aplikacji, które będą rejestrować dodatkowe dane osobowe, takie jak wielkość firmy, stanowisko itp.

3. Przeanalizuj zebrane informacje

Gdy masz już wszystkie informacje na temat użytkowników, czas je pogrupować i przeanalizować. Przejrzyj wszystkie swoje dane i poszukaj wzorców. Czy w Twojej bazie dominuje wyraźny przedział wiekowy? Czy ci ludzie mają podobne cele i wyzwania?

Podziel użytkowników na grupy odbiorców i uszereguj ich według dochodowości dla Twojej firmy. Następnie zdecyduj, którego segmentu użytkowników chcesz użyć w swojej pierwszej personie użytkownika.

4. Zbuduj personę użytkownika

Po wybraniu segmentu, który będzie używany dla Twojej pierwszej persony kupującego, ożyw ją, korzystając z zebranych danych. Zdefiniuj szczegóły, takie jak:

  • Zdjęcie
  • Nazwa (wymyślone imię i nazwisko)
  • Wiek
  • Płeć
  • Dochód
  • Stanowisko
  • Ścieżka kariery
  • Rodzina
  • Lokalizacja
  • Profil osobowości
  • Preferencje technologiczne
  • Zwyczaje
  • Codzienne zajęcia
  • Preferencje komunikacyjne
  • Cele
  • Wyzwania

Utwórz jednostronicowy dokument zawierający wszystkie powyższe szczegóły dotyczące profilu użytkownika lub pobierz nasz bezpłatny szablon, który pomoże Ci rozpocząć pracę.

5. Dostosuj swoje produkty do persony użytkownika

Gdy Twoja persona jest gotowa, możesz dostosować do niej swoje produkty. Przeanalizuj jej cele i wyzwania, i ustal, co Twoja firma może zrobić, aby pomóc osiągnąć cel lub przezwyciężyć wyzwanie. Określ, jakie funkcje wbudujesz w swoje produkty. Twórz treści, które przemawiają do Twoich person i publikuj je na preferowanych przez nie kanałach. Zaprojektuj swój lejek zakupowy zgodnie z typowymi zachowaniami zakupowymi osoby.

Pamiętaj, że proces optymalizacji nigdy się nie kończy, więc zaplanuj ciągłe poznawanie swoich odbiorców, monitorowanie wyników i odpowiednie dostosowywanie strategii projektowania.

Narzędzia do tworzenia persony

W Internecie znajdziesz wiele gotowych szablonów i narzędzi. Zaletą korzystania z nich jest to, że pozwalają one na łatwą organizację i koordynację pracy, co może uprościć proces budowania person.

Te narzędzie, które wybierzesz, powinno prezentować personę w estetyczny, przyjemny dla oka sposób. Wbrew pozorom jest to bardzo ważne – aby tworzenie persony miało sens, musi być ona później używana. Prezentując efekty pracy w mało atrakcyjny sposób ryzykujesz, że trafią one do szuflady.

Tworzenie persony – wzór

Poniżej znajdziesz naszą propozycję szablonu do tworzenia modelowego użytkownika produktu. Wzór obejmuje zestaw cech definiujących daną personę. Oprócz danych demograficznych i osobowych uwzględnia umiejętność korzystania z nowych technologii oraz preferowane marki funkcjonujące na rynku.

Persona - wzór formularza
Infografika: Persona – wzór formularza.
pobierz pdf

Podsumowanie

Odpowiednio przeanalizowane i zbudowane persony użytkownika mogą zmienić trajektorię rozwoju produktu w każdym momencie jego powstawania i dać początek produktowi, który pokochają użytkownicy.

Biorąc pod uwagę, jak ważna jest ona podczas podejmowania decyzji marketingowych, kluczowe jest, aby zbudować ją poprawnie. Poświęć więc czas na przeprowadzenie badań jakościowych oraz zbuduj profile typowych użytkowników w oparciu o prawdziwy wgląd w klienta.

Pamiętaj, że warto rozmawiać z klientami i o klientach.

Psychologia kolorów a User Interface – wpływ koloru na decyzje zakupowe

UI Design – dlaczego to takie ważne?

Jeśli jesteś jednym z wielu milionów ludzi, funkcjonujących na co dzień w Internecie, rozumiesz, jak ważny jest projekt i użyteczność witryny. Nawet drobne elementy interfejsu mogą mieć kolosalny wpływ na odczucia oraz zachowania użytkownika. Na przykład, czy wiesz, że kształt i kolor przycisku może decydować o tym, czy ktoś wie, jak wykonać zadanie? Warto o tym pamiętać projektując lub akceptując projekt strony. Ludzie działają odruchowo w reakcji na elementy wizualne, co przekłada się na sposób interakcji ze stroną internetową. Design przemawia do ludzi i należy traktować go poważnie, jeśli chcemy odnieść sukces.

Rola UI w projekcie UX

Kiedy analizujemy co sprawia, że interfejs jest dobry, często myślimy o tym, jak wygląda, a zapominamy o funkcjonalności. Szanse, że ktoś pozostanie w sklepie z dobrym projektem graficznym, są faktycznie większe pomimo jego funkcjonalności. Ale dopiero połączenie funkcjonalności (UX) i dobrego wyglądu (UI), zwiększa lojalność klientów. A to przekłada się na współczynnik konwersji i sprzedaż.

Oprócz podstawowych cech projektu, takich jak kształty przycisków i schematy kolorów, które mają ogromny wpływ na decyzje zakupowe, istnieje duże prawdopodobieństwo, że klienci nie pozostaną w Twoim sklepie, jeśli trudno będzie wejść z nim w interakcję. Doświadczenie użytkownika powinno być jednym z Twoich głównych priorytetów. Klienci dokonują szybkich osądów, a kiedy odwiedzają nową witrynę, niekoniecznie chcą poświęcać czas na zrozumienie trudnej, nieintuicyjnej nawigacji i architektury informacji. Dobry projekt interfejsu powinien prowadzić użytkownika po sklepie, podkreślać jego doświadczenia, zwiększać zaangażowanie, udoskonalać funkcjonalność i budować więź między klientami a witryną.

Czy kolor może wpłynąć na sprzedaż?

Znaczenie koloru i psychologia kolorów mogą silnie wpływać na zachowanie ludzi i podejmowanie decyzji. Ludzie dokonują podświadomych osądów na temat osoby, środowiska lub produktu w ciągu kilku, kilkunastu sekund. W Internecie dzieje się to jeszcze szybciej.

Kolor ma silny wpływ na to początkowe wrażenie.

Poprzez wybór koloru w logo, opakowaniu, oznakowaniu i reklamie możesz wpływać na konsumentów, aby kupowali pod wpływem impulsu lub wybierali Twój produkt czy usługę zamiast produktów konkurencji.

Czym jest psychologia kolorów?

Zanim zagłębimy się w znaczenia i konotacje, musimy zrozumieć teoretyczne podstawy psychologii koloru. Czym właściwie jest psychologia kolorów?

Psychologia koloru to nauka o barwach jako wyznaczniku ludzkiego zachowania.

Zgodnie z tą koncepcją, kolory mają głębszy wpływ na ludzkie zachowanie, niż większość z nas sądzi, wpływają nawet na najdrobniejsze szczegóły, takie jak nasze codzienne nastroje czy preferencje żywieniowe. Właśnie dlatego marketerzy wykorzystują psychologię kolorów – chcą podnieść świadomość marki i zainspirować konsumentów do podjęcia pożądanego działania.

Dlaczego psychologia kolorów jest ważna?

Barwy mają moc wpływania na ludzkie emocje, zachowania i decyzje, co jest kluczowe w marketingu, projektowaniu oraz komunikacji wizualnej. Badania pokazują, że dobrze dobrany kolor może zwiększyć rozpoznawalność marki oraz skuteczność reklam, przyciągając uwagę klientów i pobudzając ich do działania. Użytkownikowi wchodzącemu na stronę wystarczy 90 sekund by wyrobić sobie opinię na temat danej witryny, gdzie spora część jego opinii będzie oparta o wykorzystane kolory, a nie samą treść.

Odpowiednie stosowanie kolorów może poprawić samopoczucie użytkowników, wpływając na postrzeganie jakości produktów lub usług. Dlatego też psychologia koloru jest niezbędnym elementem strategii projektowych i marketingowych.

Oddziaływanie kolorów na użytkownika – jak kolory wpływają na sprzedaż?

Badanie reakcji konsumentów na różne produkty nie pozostawiają złudzeń:

  • 93% przy rozważaniu nowych produktów polega na wyglądzie.
  • 85% twierdzi, że sam kolor jest głównym powodem zakupu produktu.
  • 90% twierdzi, że ich zakupy pod wpływem impulsu są oparte wyłącznie na kolorze.

Kolory wywierają silne wrażenie na konsumentach i często wpływają na decyzje zakupowe, dlatego należy je przeanalizować i starannie dobrać do potrzeb i preferencji grupy docelowej.

infografika: UI a psychologia kolorów - wpływ koloru na decyzje zakupowe.
Infografika: UI a psychologia kolorów – wpływ koloru na decyzje zakupowe.
pobierz pdf

Wpływ koloru na działanie użytkowników

Zrozumienie psychologii koloru i tego, jak wpływa na zachowanie konsumentów, może pomóc w przekazywaniu odczuć Twoim odbiorcom, które z kolei mają duży wpływ na decyzje zakupowe.

Poniżej przedstawiam kilka podstawowych i powszechnie występujących skojarzeń oraz emocji powiązanych z często używanymi kolorami.

Biały: kolor doskonałości, biały reprezentuje niewinność, czystość i pełnię. Może sugerować nowy początek, uważność i neutralność. Nie budzi silnych emocji, a raczej sugeruje, że marka jest wyważona, czysta i pogodna. Dlatego wiele marek kosmetycznych używa bieli jako symbolu świeżości i czystości.

Żółty: wykazuje optymizm i wysoki poziom energii, dlatego zwracamy uwagę na branding oparty na żółtym kolorze. Pobudza procesy umysłowe i cały układ nerwowy, dlatego jest również uważany za doskonały wzmacniacz komunikacji.

Pomarańczowy: Pomarańczowy to bardzo ciepły kolor, który wyraża podekscytowanie, szczęście i entuzjazm. Jednak marketerzy zwykle używają go do podkreślenia ważnych elementów, takich jak wezwania do działania, taktyka ta sprawdza się w przypadku impulsywnych kupujących.

Czerwony: To jeden z najczęściej używanych kolorów w historii marketingu. Czerwień budzi intensywne i silne reakcje emocjonalne, symbolizując uczucia miłości i namiętności. Zwiększa tętno klienta i pobudza apetyt, dlatego tak wiele restauracji stosuje w swoim wystroju odcienie czerwieni.

Zielony: Biały może być kolorem czystości, ale zielony jest zdecydowanie kolorem natury i spokoju. Odgania depresję i symbolizuje nowy początek. W związku z tym nie jest niespodzianką, że marki używają zieleni do reprezentowania produktów poprawiających nastrój.

Niebieski: Wraz z czerwienią kolor niebieski jest z pewnością najpopularniejszym wyborem wśród marketerów. Symbolizuje spokój, racjonalne podejmowanie decyzji, zaufanie i wiarygodność. Marketerzy kochają kolor niebieski, ponieważ pokazuje on profesjonalny autorytet, co zwiększa lojalność klientów.

Fioletowy: królewski charakter, ukazujący zamożne osoby i ekskluzywne marki. Firmy sprzedające produkty z wyższej półki często używają fioletu, aby podkreślić znaczenie premium swoich marek.

Czarny: podobny do fioletu, czarny to kolor, który pokazuje moc i luksus. To częste rozwiązanie brandingowe, ponieważ czerń można łatwo połączyć z praktycznie każdym kolorem z koła barw (o kole barw napiszę więcej za chwilę).

Jak przykuwać uwagę – psychologia kolorów a CTA

Wezwania do działania (CTA) są jednym z najważniejszych narzędzi marketingowym, zachęcają użytkowników witryny do podjęcia konkretnej akcji. Jednak, aby spełniały swoje zadanie, CTA musi być bardzo widoczne.

Nie trzeba dodawać, że kolory odgrywają główną rolę w tworzeniu wysoce konwertującego wezwania do działania. Celem jest użycie kolorów i białych przestrzeni wokół wezwania do działania, aby zmaksymalizować kontrast między tym elementem a tłem witryny.

Który kolor wezwania do działania sprawdza się najlepiej?

Hubspot przeprowadził badania, aby określić, który kolor sprawdza się lepiej – zielony czy czerwony. Dowiedziono, że kolor czerwony jest lepszy od zielonego o ponad 20% w przypadku, gdy wszystkie inne elementy na stronie pozostają takie same.

Oczywiście nie oznacza to, że czerwony zawsze daje lepsze wyniki niż zielony (lub jakikolwiek inny kolor). Zależy to od innych kolorów na stronie, a także od grupy docelowej.

Dowodzi to jednak, że psychologia kolorów wpływa również na przyciski CTA.

Pora odświeżyć kolorystykę Twojej strony?

Zamów elegancki projekt graficzny

Wypełnij formularz, skontaktujemy się z Tobą

Psychologia kolorów w praktyce – jak łączyć barwy, aby sprzedawać więcej?

Stworzenie spójnej kompozycji barwnej nie jest łatwe. Jednak zadanie to możemy sobie znacząco uprościć dzięki korzystaniu z konceptu, jakim jest koło barw.

Oryginalne koło barw, stworzone przez niemieckiego fizjologa Ewalda Heringa, składa się z czterech kolorów. Są to: czerwony, żółty, zielony i niebieski. Stanowią one pewnego rodzaju podstawę pod całe spektrum barw – ich przenikanie się i mieszanie powoduje powstawanie wszystkich innych kolorów.

Barwy na kole barw można ze sobą zestawiać według różnych zasad. Najpopularniejsze grupy kolorów to podstawowe, pochodne i dopełniające. Jednak poza nimi stosuje się wiele innych połączeń, z których każde ma swoje wady i zalety. Znajomość ich właściwości pomoże zdecydować, który zestaw barw będzie w danej sytuacji lepszym rozwiązaniem.

Podstawowe

Podstawowe kolory to czerwony, żółty i niebieski, tak jak często widuje się je w zabawkach dla dzieci. Kolory podstawowe są podstawą wszystkich innych kolorów i są obecne w najbardziej podstawowych elementach, jakich doświadczają ludzie na Ziemi: ogniu, wodzie i słońcu.

Pochodne

Kolory drugorzędne to pomarańczowy, zielony i fioletowy. Pomarańczowy, połączenie czerwieni i żółci, zapewnia ekscytację czerwieni z optymizmem żółci. Stwarza to ideę zachęty i skutkuje pozytywnymi odczuciami. To coś, czego ludzie często szukają przy wyborze marek z dowolnej kategorii.

Dopełniające

Kolor trzeciorzędowy powstaje przez zmieszanie równej ilości koloru podstawowego z kolorem wtórnym. Przykładowe barwy dopełniające to akwamaryna lub turkus, które są kombinacją niebieskiego i zielonego. Kolory trzeciorzędne odgrywają ważną rolę w psychologii kolorów, ponieważ dodają głębsze i bardziej zróżnicowane kolory do palety marki.

Wybierając paletę barw do Twojego sklepu pamiętaj, że kolory, muszą stwarzać poczucie wizualnej harmonii, podtrzymując w ten sposób i wzmagając zainteresowanie klientów zakupami. Analizując produkty, rynek docelowy oraz rozwiązania konkurencji wybierzesz odpowiednią kolorystykę dla Twojego sklepu. Nie próbuj wymyślać na nowo koła kolorów, używając nietypowych barw. Istotne jest, aby kolory miały jakiś związek – symboliczny lub dosłowny – z produktem lub usługą.

Podsumowanie

Kolor jest podstawowym budulcem obrazów i doznań wizualnych, odgrywa kluczową rolę w krytycznej decyzji klienta – kupować lub nie kupować. To właśnie on będzie atrybutem, który połączy wszystkie elementy na stronie internetowej (system nawigacji, banery, przyciski i tekst). Użyj go, aby stworzyć najbardziej funkcjonalny projekt interfejsu użytkownika.

Najczęstsze błędy w sklepie internetowym

Co powodują błędy na stronie sklepu

Rozmawiając z klientami najczęściej mówimy im o zidentyfikowanych problemach. Jako problem traktujemy sytuacje, w których sklep, strona bądź aplikacja nie realizują celów biznesowych, dla których zostały stworzone. W e-commerce podstawowym problemem jest niezrealizowana sprzedaż. Pomijając kwestie związane z polityką cenową i dostępnością produktów, przyczynami, dla których użytkownik nie sfinalizował transakcji są błędy w sklepie internetowym związane z jego budową i działaniem.

Podstawowe grupy błędów

Błąd błędowi nierówny. Część z nich wynika z decyzji podjętych jeszcze przed powstaniem e-sklepu. Witryna tworzona jest „dla wszystkich”, z przeznaczeniem na jeden typ urządzeń, ma nieprzemyślaną nawigację i jest przeładowana informacją. Tę grupę najprościej określić jako błędy projektowe.

Kolejna grupa to niedociągnięcia związane z wyglądem strony. Część z nich wynika z przesadnej dbałości o estetykę, odbijającej się na funkcjonalności. Pozostałe z kolei to efekt oszczędności, albo pośpiechu – niskiej jakości elementy graficzne, chaotyczne i niedopasowane rozmieszczenie elementów.

Ostatnią grupę stanowią błędy związane z komunikacją z użytkownikiem. Brak informacji od zadowolonych klientów, utrudniony kontakt ze sprzedawcą, brak wiarygodnych informacji o firmie. Czyli czynniki, mogące w jednej chwili spowodować porzucenie sklepu na rzecz konkurencji.

Błędy projektowe

Brak wiedzy o kliencie

Persona użytkownika to fikcyjna postać, która reprezentuje grupę docelową. Chociaż persona użytkownika nie jest prawdziwą osobą, opiera się na danych i faktach uzyskanych podczas wywiadów, ankiet i innych form badań użytkowników.

Celem stosowania person jest zebranie ustaleń i wykorzystanie ich do zdefiniowania takiego wyglądu interfejsu, który będzie użyteczny i przyjazny dla odbiorcy. Posługując się personami łatwiej odnieść się do ograniczeń, zmagań, sukcesów i celów rzeczywistych użytkowników. Inaczej mówiąc, łatwiej stworzyć spersonalizowane środowisko zoptymalizowane pod kątem potrzeb klientów. Im bardziej szczegółowe są wykorzystywane persony, tym lepiej można dostosować sklep, stronę, aplikację.

Zaniedbanie analizy i przeglądu potrzeb użytkowników najczęściej przekłada się na niespójność rozwiązań. Na przykład bardzo tradycyjna grafika i niemal slangowe, młodzieżowe słownictwo. Brak znajomości profilu klientów skutkuje też uwypuklaniem elementów oferty, które są nieatrakcyjne dla grupy docelowej, które „nie trafiają” w jej oczekiwania.

Brak lub błędy widoków responsywnych

Tak, zgadza się – rok 2022 jest już prawie tutaj, a problemy z responsywnością wciąż znajdują się na liście. Zbyt wiele sklepów internetowych ignoruje potrzebę dostosowywania wyświetlania do rozdzielczości urządzeń odbiorców! Mimo, iż Google obniża pozycję takich stron w rankingu, a zdecydowana większość użytkowników nie ufa stronom bez wersji mobilnych. Responsywne serwisy internetowe mają więc dużo większą szansę na wzrost konwersji.

Bardzo ważne jest, aby sklep internetowy wyglądał świetnie i szybko się ładował na wszystkich popularnych rozmiarach ekranu. I warto myśleć o tym jeszcze w fazie tworzenia i rozwoju witryny.

Nieintuicyjna nawigacja

To jeden z najczęstszych błędów UX. Konsekwencją umieszczania linków w nielogiczny sposób może być odmowa przez użytkownika dalszego zapoznania się z Twoją witryną i przejścia na strony konkurencji. Intuicyjny projekt nawigacji oznacza prostotę, łatwość użytkowania i przejrzystość zasobów internetowych dla większości użytkowników. Próba stworzenia fajnego projektu często zmienia się w szukanie szczęśliwego środka między czymś prostym/zrozumiałym a wyrafinowanym/kreatywnym. Umiejętność tworzenia perfekcyjnie intuicyjnego i jednocześnie stylowego designu to prawdziwy wyznacznik profesjonalizmu projektanta. Jest takie powiedzenie – Interfejs użytkownika jest jak żart. Jeśli musisz go wyjaśniać, to nie jest dobry. To absolutnie prawda. Z perspektywy UX stworzenie strony internetowej, której potencjalni klienci nie mogą zrozumieć w lot, jest ogromnym błędem.

infografika: Najczęstsze błędy w sklepie internetowym
Infografika: Najczęstsze błędy w sklepie internetowym.
pobierz pdf

Przeładowanie informacjami

Częstym problemem jest miszmasz czcionek, kolorów, elementów i treści. Eksperymentujemy z czcionkami i kolorami, aby się wyróżnić, ale zwykle kończy się to dezorientacją użytkownika. Klienci pragną spójności w możliwie najprostszej formie. Dobre jest rozwiązanie, w którym nie ma czego dodać, ale i nie ma też elementów zbędnych. Warto zwrócić uwagę na szczegóły, takie jak odpowiednio sformatowany tekst i jednolite schematy kolorów. Projekt mobilnego interfejsu użytkownika szczególnie wymaga spójnych, minimalistycznych rozwiązań.

Należy pamiętać, że przeciążenie zdolności poznawczych obniża jakość doświadczenia użytkownika, co w efekcie wpływa negatywnie na wielkość sprzedaży. Możliwie prosty, pozbawiony zbędnych elementów interfejs najskuteczniej prowadzi klientów przez proces sprzedaży.

Błędy UI

Wygląd stawiany wyżej niż użyteczność

Częstym błędem projektantów jest nadanie estetyce sklepu wiele ważniejszej roli niż przepływowi i architekturze informacji. Zdecydowanie zalecamy zaplanowanie architektury informacji jeszcze przed przejściem do etapu tworzenia makiet. Wielu programistów ignoruje UX i niezbędną logikę lub nawigację w sklepie internetowym, co może prowadzić do tworzenia serwisów, które wyglądają świetnie, ale są uciążliwe w użyciu.

Niska jakość zdjęć

Kolejnym często odnotowanym błędem jest niska jakość zdjęć. I nie chodzi o wykorzystanie pierwszych wyszukanych fotografii stokowych, ale o techniczną jakość plików graficznych. Wymagania SEO dotyczące wielkości ładowanych zdjęć są oczywiste: im plik mniejszy tym lepiej (patrz artykuł dotyczący Core Web Vitals). Tyle, że jest granica, której lepiej nie przekraczać. Rozmazane fotografie, z wyraźnym uziarnieniem sprawiają, że klienci – często podświadomie – zaczynają traktować sklep jako niedopracowany. I to wrażenie bardzo szybko przenosi się na inne elementy witryny, prowadząc do obniżenia jej wiarygodności.

Niestaranne rozmieszczenie elementów

Równie często występującym błędem jest niewłaściwe przygotowanie elementów do wyświetlania. Typowym miejscem, w którym można zaobserwować ten mankament są podstrony prezentujące kategorie produktów, lub dostępne w ofercie produkty wybranej kategorii.

Projekt strony bazuje na siatce, ale fotografie są różnej wysokości lub szerokości, co powoduje zaburzenie harmonii. O ile można się zgodzić, że dobrze wykorzystana asymetria na stronie informacyjnej ułatwia prowadzenie wzroku czytelnika, to na stronie kategorii produktów nieład jest bardzo niekorzystny. Utrudnia szybki przegląd najważniejszych informacji i powoduje dekoncentrację potencjalnego klienta.

Jeśli pragniesz pogłębić swoją wiedzę na temat efektywnego projektowania na siatce i zrozumieć, jak wykorzystać 12-kolumnowe układy w swoich projektach, zdecydowanie polecam artykuł „Gridy, czyli jak projektować na siatce„.

Błędy związane z komunikacją z klientem

Brak opinii użytkowników

To dość powszechnie występujący błąd. Sklep ma całkiem interesującą sprzedaż, ale nie wykorzystuje potencjału w postaci zadowolonych klientów. Tymczasem potwierdzenie ze strony osób, które dokonały zakupu w sklepie jest niezwykle skutecznym elementem rozwiewającym potencjalne wątpliwości nabywcy.

Skomplikowane formularze kontaktowe

Formularze internetowe są bardzo szeroko stosowane. Udostępnianie danych kontaktowych, rejestracja, autoryzacja… lista możliwych zastosowań jest długa. Jednak nawet przy tak prostym elemencie, jak formularz kontaktowy, łatwo popełnić całą serię błędów UX. Oto najczęstsze problemy: za dużo pytań, za dużo pól obowiązkowych, nieprawidłowo skonfigurowana walidacja. Nadmierna liczba pytań może sprawić, że kupujący zamkną formularz przed jego wypełnieniem. W trakcie projektowania warto dobrze zdefiniować cel formularza i dobrać optymalną liczbę pytań.

Chcesz polepszyć działanie swojego e-sklepu?

Zamów przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Niewystarczające informacje o firmie

Ostatni błąd na jaki chcemy zwrócić uwagę dotyczy sekcji lub podstrony „O nas”. Problemem jest niedostatek informacji na temat sprzedającego. W trakcie niemal każdego zakupu, a szczególnie pierwszego w danym sklepie, klient ma wątpliwości. Dotyczą one zarówno produktu („czy to jest to czego potrzebuję?”) jak i dostawcy („czy to rzetelny sprzedawca?”). Ograniczenie informacji kontaktowych do jednego adresu email, czy brak adresu pocztowego wywołuje niepewność. Jeśli do skąpych informacji o firmie dodać przelew z góry jako jedyną formę płatności oraz niejasny regulamin sklepu, to ucieczka klienta jest kwestią sekund.

Podsumowanie

Błędy dotyczące witryn, z którymi stykaliśmy się w roku 2021 mają realny wpływ na wyniki biznesowe. Wskazują na to zarówno badania rynkowe jak i historie poszczególnych sklepów.

Gdyby spróbować znaleźć wspólną praprzyczynę opisanych błędów, to zdecydowanie jest to brak znajomości charakteru i potrzeb klienta. Większości mankamentów można by uniknąć pamiętając, przede wszystkim w fazie projektowania, kim jest użytkownik. Mając świadomość w jaki sposób korzysta ze sklepu internetowego, jakie ma przyzwyczajenia, co mu przeszkadza oraz – co chyba najważniejsze – na podstawie jakich informacji podejmuje decyzje zakupowe.

We wpisie skoncentrowaliśmy się na omówieniu błędów dotyczących tego co dzieje się po przekroczeniu wirtualnych progów sklepu internetowego. Pominęliśmy problemy związane z SEO dla ecommerce, odpowiedzialne za przyciągnięcie zbyt małej liczby potencjalnych klientów.

UX Reverse Engineering – co to takiego?

Na początek

Pewnie część z Was zdążyła pomyśleć, że przedświąteczny pośpiech uwolnił moje tajne pokłady frustracji. I będę teraz, zamiast podłogi pastować i uszka lepić, uprawiał reverse engineering UX pastwił się nad jakimś niewinnym serwisem internetowym. Próbując udowodnić, że został zaprojektowany dla pustego zbioru użytkowników, czyli dla nikogo.

I otóż wcale nic z tych rzeczy! Żadnych frustracji, żadnych pastwień się, ukrytego sarkazmu etc.. Promise!

Zbadajmy choinkę

Produktem, o którym dziś napiszę jest choinka. Tak, tradycyjna choinka, wycięta gdzieś (miejmy nadzieję) na certyfikowanej plantacji, przywieziona do domu na dachu auta, osadzona jak kto umie i przybrana również jak kto potrafi. Może być zresztą i choinka w doniczce, albo choinkopodobny wytwór przemysłu chemicznego. Generalnie produkt to obiekt typu drzewko, z zawieszonym czymś, służący temu żeby było miło, sympatycznie itp.

Cechy podstawowe

Podchodząc analitycznie do cech typowej choinki, jest ona:

  • raczej wyższa niż szersza,
  • raczej bardziej zielona niż w innym kolorze,
  • ma na sobie ozdoby kilku typów:
    • świecące (tzw. lampki),
    • dyndające szklane (tzw. bombki),
    • dyndające słodkie (tzw. cukierki, ew. suszone owoce),
    • czub (zwany czasem gwiazdą, jeśli ma kształt bardziej gwieździsty niż czubiasty),
    • ciągnące się (czyli łańcuchy papierowe, lamety oraz im podobne),
    • pozostałe.

Cechy dodatkowe

Ponadto typowa choinka:

  • pachnie,
  • sypie sowicie igliwiem wraz z upływem czasu (nie dotyczy większości choinek w doniczkach oraz wykonanych z plastiku),
  • służy do sprawiania przyjemności użytkownikom poprzez dostarczenie różnego rodzaju ekscytujących doświadczeń (tak tak, user experience w czystej postaci),

i zapewne wiele innych, które pamiętając, że Wigilia za 3 dni, pominę.

Pora na wsteczną inżynierię. Kto – sądząc po cechach choinki – jest docelowym odbiorcą? Dla kogo choinka została zaprojektowana? Nie wchodząc w dyskusję na temat kto miałby być projektantem.

Reverse engineering, czyli dla kogo jest choinka

Idziemy po kolei:

Wysokość choinki wyklucza raczej Toma Cruise’a, Tatianę Okupnik, Danny’ego de Vito i dzieci. Chociaż z dziećmi to nie wiadomo, dzieci zawsze można wziąć na ręce, co zwiększa ich szanse na bliższe zbadanie każdego odcinka choinki. Tyle, że ile można dziecko trzymać przy drzewku na wyciągniętych rękach. Nie, dzieci nie. Osoby krótkowzroczne też nie. Ze względu na nich choinka powinna być niższa. Albo pozioma. Pozioma ze względu na niższych osobników oczywiście.

Zieleń. Pojęcia nie mam. Może to jakiś ekstra ficzer, dorzucony w ostatniej chwili? Tak wyszło po prostu UI-owcom i nie ma się czego doszukiwać? Mniejsza.

Ozdoby. Temat rzeka. Generalnie tropy prowadzą do kogoś z wyczuciem estetycznym i wrodzonym dążeniem do zaspokajania potrzeby kontaktu z czymś pięknym. Pomijając kwestie gustu. Światełka, migotanie, coś się przemieszcza, coś dynda, coś szeleści. To wskazuje na rozwinięty zmysł kinestetyczny. I chyba ciekawość. Hmmm, jakby dziecko, ale dla dziecka choinka (do czego doszliśmy wcześniej) byłaby pozioma. A więc dorosły. I wrażliwy na dodatek. OK, może potem do tego wrócimy.

Zapach. No tak, zapach. Przyciąga, uspokaja, a ponadto tworzy nastrój. Tyle mi to mówi, że użytkownik ma nos. Duży, czy mały to raczej bez różnicy. Ha! Gdyby zapach był kluczowy dla odbiorcy, to by się sztuczne choinki nie sprzedawały. Więc zapach to cecha bez wiodącego znaczenia dla usera.

Sypanie igliwiem wyklucza tych, co sprzątają. Raczej dorosłych. Ale przecież choinka jest bardziej dla nich niż dla dzieci, bo wysoka… Ciężko się reversinguje, oj ciężko. Może chociaż ostatnia cecha coś podpowie?

Sprawianie przyjemności… Jak pomyślę o sprzątających, to przychodzi mi do głowy, że dla nich najlepsze doświadczenie z choinką, to sytuacja, gdy JUŻ jej w domu nie ma. Psia kosteczka, w ślepą uliczkę wpadliśmy…

Tu mały wtręt. Nie wiem czy zauważyliście, że na początku artykułu to było, że go napiszę i w ogóle – znaczy ja autor. A jak się zaczęło robić trudno, to już razem wpadliśmy w ślepą uliczkę i takie podobne. Całkiem jak w tawernianej opowieści starego kapitana: wyszedłem w morze, płynąłem do brzegu, wchodziłem do portu i… władowali się na mieliznę. Ha ha…

Chyba się poddam. Zaczynam rozumieć dlaczego UX nie korzysta z reverse engineering.

Albo zrobię jeszcze jedno podejście. Ale to za chwilę. Teraz potrzebuję przerwy…

Przerwa na kawę zawsze robi dobrze! Nawet w trakcie przedświątecznej gorączki.

No i mam. Wy pewnie też w międzyczasie odkryliście najprawdziwszą prawdę o choince. Ja doznałem olśnienia po trzecim łyku espresso.

Rozwiązanie

Choinka została stworzona dla kota.

Jest na tyle wysoka, żeby było na co włazić. Interesująca ze względu na elementy świecące, dyndające i łatwo tłukące. Ma jakiś cel do zdobycia na samej górze. Łańcuchy da się poszarpać pazurami, cukierki pogryźć, a całą choinkę wywrócić. Jakież to było w sumie proste 🙂

infografika: UX Reverse Engineering - edycja świąteczna 2021
Infografika: UX Reverse Engineering – edycja świąteczna 2021.
pobierz pdf
I to by było na tyle przedświątecznego UX-owego reverse engineeringu

Razem z całą ekipą ARTNOVA
życzę Wam, Szanowni Subskrybenci
i Czytelnicy naszych artykułów,
zdrowych i pogodnych Świąt.

UX Design nawigacji na stronie www – jak zrobić to poprawnie?

Nawigacja na stronie www – czym jest?

Nawigacja na stronie to jeden z najważniejszych elementów odpowiadających za użyteczność strony internetowej. Nieważne, czy mamy do czynienia ze sklepem internetowym lub inną witryną. Dlatego praktycznie każdy audyt UX obejmuje badanie i analizę pod kątem poruszania się użytkownika w serwisie.

Dobry projekt nawigacji na stronie internetowej – dlaczego jest tak ważny?

Dobrze zaprojektowana nawigacja będzie pomagała nie tylko użytkownikom, ale również biznesowi. Klient przemierzający z łatwością drogę do koszyka, dokona zakupu. Potencjalny zamawiający, szukający wykonawcy prac, który łatwo dotrze do poszukiwanych informacji w serwisie, także chętniej nawiąże współpracę biznesową.

Źle zaprojektowana nawigacja strony internetowej może zniechęcać użytkowników

Badania wykazują, że około 25% użytkowników porzuca koszyk w sklepie internetowym, ponieważ proces checkoutu był za długi i skomplikowany. Źle zaprojektowany proces zakupowy przekłada się zatem pośrednio na wysokość sprzedaży.

Nawigacja na stronie wpływa na konwersję użytkowników

Nawigacja pomaga użytkownikom w dotarciu do pożądanego celu. Jeśli ta droga nie będzie dla nich wystarczająco łatwa, to mogą mieć problemy lub po prostu zrezygnować np. ze złożenia zamówienia w sklepie internetowym. Należy pamiętać, że dzięki sprawnej nawigacji możemy zwiększyć konwersję.

Na co zwrócić uwagę przy projektowaniu nawigacji?

Przy projektowaniu nawigacji należy przede wszystkim zwrócić uwagę na:

  • charakter strony (nawigacja będzie inna w sklepie internetowym i na landing page),
  • cele biznesowe (może jakieś elementy powinny być bardziej widoczne, np. promocje),
  • potrzeby użytkowników (szybki dostęp do jakiegoś elementu),
  • utarte schematy (zazwyczaj nie warto przenosić ikony koszyka w inne miejsce niż prawy górny róg, ponieważ użytkownicy tam się go spodziewają).

Elementy nawigacji strony internetowej

Na stronie internetowej można wyróżnić zazwyczaj wiele elementów nawigacji. Pełnią one odmienne funkcje, jednak wspólnie się uzupełniają i umożliwiają wygodne poruszanie się po stronie.

Breadcrumbs – okruszki jako element nawigacji serwisu www

Okruszki to stały element szczególnie większych i bardziej skomplikowanych serwisów. Często zagłębiając się w architekturze strony, możemy się pogubić. Okruszki przypominają nam jednak, jaką ścieżkę przeszliśmy i umożliwiają powrót na powiązaną hierarchicznie stronę serwisu.

Menu z kategoriami i podkategoriami

Głównym kręgosłupem nawigacji jest menu strony. Znajdziemy tam wszystkie podstrony, na które zawsze możemy się wygodnie przenieść, ponieważ menu pozostaje na ekranie jako stały element. Kluczem do dobrego menu są dobrze nazwane i posortowane kategorie.

Logo najczęściej oprócz funkcji identyfikującej i estetycznej pełni również funkcję nawigacyjną. Służy także do szybkiego powrotu na stronę główną witryny. Jest to na tyle utarty schemat, że większość stron posługuje się tym zabiegiem.

Stopka strony www zawiera często odnośniki do podstron takich jak np. regulamin sklepu internetowego, kariera, czy kontakt. Ponieważ, mimo, że zawierają one ważne informacje, najczęściej nie wchodzą w skład głównego procesu nawigacyjnego umieszcza się je z reguły na dole strony.

infografika: Nawigacja strony internetowej na stronie www - jak zrobić poprawnie
Infografika: Nawigacja strony internetowej na stronie www – jak zrobić poprawnie.
pobierz pdf

Jaka powinna być dobra nawigacja strony www?

Dobra nawigacja jest intuicyjna. Użytkownik wie, co gdzie się znajduje i potrafi korzystać z nawigacji od razu po wejściu na stronę. Nie musi się jej uczyć. Dobra nawigacja powinna również zawsze informować użytkownika o tym, gdzie aktualnie się znajduje.

Intuicyjna i czytelna nawigacja strony www

Aby stworzyć czytelną i intuicyjną nawigację, musimy przede wszystkim wiedzieć, jaka będzie zawartość strony. Dopiero wtedy możemy przystąpić do tworzenia struktury, która odpowie na potrzeby użytkowników.

UX nawigacji strony internetowej – wersja desktop i mobile

W zależności od rozdzielczości i typu urządzenia docelowego używa się różnych rodzajów nawigacji. Należy zawsze wziąć pod uwagę możliwości, ale również ograniczenia, które narzuca nam dany typ urządzenia.

Popularne rozwiązania

Pośród rozwiązań, które do tej pory powstały możemy wyróżnić parę, które należą do tych bardziej lubianych i popularnych. Częstość ich występowania sprawia, że ich przeznaczenie jest jasne dla klientów, a użycie intuicyjne.

Hamburger menu

Do najbardziej popularnych rozwiązań mobilnych zalicza się tzw. menu hambgurgerowe. Jego nazwa wywodzi się z kształtu ikony, która kryje pod sobą menu. Jest ona złożona z trzech poziomych kresek, które jednoznacznie kojarzą się z wyglądem hamburgera.

Ta metoda ma swoje zastosowanie na urządzeniach mobilnych z uwagi na ograniczone miejsce na ekranie. Dzięki hamburger menu możemy ukryć zawartość menu w bocznym wysuwanym panelu.

Poziome menu

Poziome menu stosuje się zazwyczaj w desktopowych wersjach serwisów. Dzięki obszerności ekranu mamy możliwość umieszczenia pozycji menu poziomo obok siebie. Zaletą tego rozwiązania jest przede wszystkim szybki dostęp do poszczególnych podstron.

Odpowiednikiem tego rodzaju menu w warunkach mobilnych jest dolny pasek nawigacyjny, składający się z paru ikon ułożonych obok siebie, z których każda odpowiada za uruchomienie innej zakładki w aplikacji mobilnej.

CTA

Dzięki Call To Action możemy przenieść się z jednej strony na drugą. Zazwyczaj tego zabiegu używa się na stronie głównej, która gromadzi tylko część informacji o usłudze lub produkcie. Aby przeczytać na dany temat więcej, użytkownik ma możliwość przeniesienia się na konkretną podstronę za pomocą przycisku.

Chcesz sprawdzić jakość nawigacji na swojej stronie?

Zamów audyt UX

Wypełnij formularz, skontaktujemy się z Tobą

Pamiętaj o testowaniu rozwiązań

Tak jak każdy inny proces na stronie, architektura strony również może być poddana testom użyteczności. Może się okazać na przykład, że podkategorie menu zostały niewłaściwie przypisane do kategorii głównych i użytkownicy mają problem z odszukaniem konkretnych informacji. Można wtedy zastosować technikę badawczą sortowania kart, aby poprawnie pogrupować informacje na stronie. Więcej o testach użyteczności dowiesz się w naszym artykule „Testy UX – jak sprawdzić użyteczność projektu”.

Podsumowanie

Nawigacja odgrywa bardzo ważną rolę w tworzeniu doświadczeń użytkownika. Dokładnie przemyślana nawigacja stworzona z myślą o potrzebach użytkownika może przyczynić się do wzrostu konwersji oraz sprzedaży.

Trendy User Experience w 2020 i 2021 + update 2024

Trendy UX 2020 – jak się zmienił świat UX w obliczu pandemii

Możemy śmiało powiedzieć, że rok 2020 wywrócił nasz świat do góry nogami. Lockdown zmusił nas wszystkich nie tylko do pracy zdalnej, ale też do załatwiania codziennych spraw za pomocą Internetu. Uwięzieni w domach zaczęliśmy korzystać z aplikacji online częściej niż kiedykolwiek, testując rozwiązania, które wcześniej nie były nam znane.

Nowe wyzwania User Experience, przed którymi postawiła nas pandemia

Potrzeba zmian z jednoczesnym dostępem do zaawansowanej technologii sprawiła, że UX designerzy nie bali się łamać zasad i eksperymentować. Przełamany grid i asymetryczny układ strony, duży i pogrubiony font czy ręcznie rysowane ilustracje to tylko część z trendów w UI design. Wpływają one na wygląd strony odradzając tym samym styl brutalizmu, ale przede wszystkim mają swoje odniesienie w User Experience Design.

Minimalistyczny, asymetryczny layout

Asymetria w interfejsach internetowych i mobilnych może być wykorzystana do ustanowienia równowagi i harmonii lub celowego stworzenia poczucia zamieszania i przypadkowości.

W tym pierwszym podejściu asymetryczny projekt interfejsu użytkownika w dużym stopniu wykorzystuje białe pola, podzielone ekrany, wyraźne linie i kontrastujące schematy kolorów. W drugim przypadku, kiedy jest używany, by prowokować i niepokoić, opiera się na nietypowych kompozycjach, rozproszonych układach, niekonwencjonalnych doborach kolorystycznych i pozornie przypadkowych elementach. Niezależnie od przypadku, dobrze zaprojektowane asymetrie zawsze układają treści w wyraźną ścieżkę, którą mogą podążać oczy odwiedzających.

Wyrafinowana typografia

Użycie pogrubionych czcionek nie jest niczym nowym, ale znaczne powiększenie ich rozmiaru i odważne rozmieszczenie na stronie przyciąga uwagę użytkowników. Służy to nie tylko aspektom wizualnym, ale także dodaje marce odwagi. Pogrubione czcionki podkreślają treść i wpływają na narracje strony. Użytkownik skanując treść nie jest w stanie ich przeoczyć, a wręcz podąża za nimi wzrokiem.

Animacje i ilustracje

W 2020 ilustrowaliśmy wszystko, otworzyliśmy się na nowe style i indywidualizm artystów. Zrezygnowaliśmy ze stockowego wyglądu co w wielu przypadkach zaowocowało wręcz przeniesieniem sztuk pięknych do mediów cyfrowych.

Wizualizujemy dane nie tylko za pomocą ilustracji i infografik. Trendy minionego roku potwierdziły nam w zasadzie wszystko co wiemy o animacji. I podkreśliły, że jest w stanie przekazać więcej niż poprawnie napisany tekst. Animacja to potężne narzędzie sprzedażowe. Jedyne co musimy zrobić to przefiltrować informacje, znaleźć te, które mają największe znaczenie. Potem wystarczy tylko zbudować historię, która wciągnie użytkownika.

Warto wspomnieć o ogromnej roli developera w procesie realizacji animacji. Szybkość ładowania, ogólna jakość i płynność oraz jak najmniejsze obciążenie urządzenia – to cele, które wyznaczył nam 2020 rok.

Mikro interakcje

Kolejnym ważnym trendem wyznaczonym w minionym roku jest wzrost znaczenia mikro interakcji. Codziennie korzystamy z telefonów i komputerów – do przeglądania artykułów, przeglądania historii na Instagramie lub wysyłania wiadomości. Większość z nas nie zdaje sobie sprawy, że angażujemy się w mikro interakcje tylko poprzez wykonywanie tak trywialnych zadań. Są wszędzie, wdrażane przez projektantów, w każdym dobrze zaprojektowanym urządzeniu, aplikacji czy witrynie.

Mikro interakcje to nie tylko efekt ‘wow’! Zmiana koloru ikony po najechaniu, jej powiększenie lub poruszenie wpływa na emocje i sprawia, że doświadczenia użytkownika są bardziej satysfakcjonujące. Jednak cel jest znacznie większy. To usprawnienie nawigacji, ułatwienie czytelności witryny i przekazywanie natychmiastowej informacji zwrotnej o wykonanej czynności na stronie. Wygrałeś bitwę o uwagę, ale nie możesz przegrać wojny o satysfakcję!

infografika: Trendy User Experience w 2020 i 2021 roku
Infografika: Trendy User Experience w 2020 i 2021 roku.
pobierz pdf

UX w 2021 – obecnie panujące trendy w UX

Ciągłe poszukiwanie przez marki sposobu na wyróżnienie się, sprawiło, że UX w 2021 roku stał się kluczowy w angażowaniu użytkownika i zapewnianiu niezapomnianych wrażeń. Doszliśmy do momentu, w którym dobry UX nie jest już tylko bonusem, ale wręcz oczekiwanym przez użytkowników standardem.

Wyzwania dla branży UX, które pojawiły się w 2021

Rok 2021 to przede wszystkim kontynuacja trendów z roku 2020. Ciekawych danych dostarcza raportu UX Trend Report 2021 (https://worldusabilitycongress.com/about/ux-trend-report/), opublikowany na stronach World Usability Congress. Niemal 73 proc. respondentów zapytanych o to, jak oceniają znaczenie UX dla sukcesu w biznesie, odpowiedziało, że jest ono bardzo ważne. Teraz, gdy cały świat jest zmuszony do korzystania z wirtualnych środków do interakcji, komponent UX stał się najważniejszą kwestią dla wielu firm. Zintensyfikowanie relacji między użytkownikami a firmami stało się największym wyzwaniem tego roku.

Personalizacja treści na zupełnie nowym poziomie

Użytkownik jest głównym bohaterem w projektowaniu UI/UX w 2021 roku. Dzięki personalizacji zmniejszamy ilość informacji i opcji, prowadząc użytkowników przez dostosowany lejek zaprojektowany dla nich i ich indywidualnych potrzeb. Trend ten pomaga budować przynależność do marki: zapewnia innowacyjne interakcje z klientami, aby wzmocnić ich zaufanie i lojalność wobec marki. Zwiększa zaangażowanie użytkowników co ostatecznie wpływa na wzrost współczynnika konwersji i generowanie leadów.

Popularność trybu ciemnego

Tryb ciemny to trend, który tak naprawdę przybiera na sile już od 2019 roku. Chwalony przez sporą grupę użytkowników, za wpływ na oszczędność baterii i zdrowie oczu. Ponadto podkreślający istotne motywy i elementy projektu. Możesz przejść na ciemną stronę, albo nie. Ważne, aby decyzja oparta była na potrzebach odbiorców, przekazie Twojej marki i sposobie interakcji ludzi z Twoimi produktami.

Technologia 5G i wpływ na UX

Wraz z nowymi prędkościami pojawiają się wielkie możliwości. Pobierając, przesyłając i ładując strumieniowo, może stworzyć zupełnie nową wartość dla użytkowników.

Grafiki 3D i interaktywne interfejsy

Dzięki 5G projektanci UI/UX mogli skoncentrować się na wdrażaniu elementów graficznych 3D w celu zapewnienia wciągających wrażeń użytkownikom na wyższym poziomie. Pomyśl o wykorzystaniu wizualizacji Virtual Reality lub Augmented Reality, które przekraczają granice między prawdziwym życiem a wirtualną przestrzenią. Warto też przemyśleć bardziej podstawowe elementy, takie jak ruchome i interaktywne bąbelki oraz inne animowane elementy wizualne. Te wciągające elementy projektu wymagają witryny o wysokiej wydajności. Wolne ładowanie strony będzie miało negatywny wpływ na płynność wizualizacji.

Rozwój interfejsów głosowych

Także interfejs głosowy (VUI) znacznie zyskał na popularności w tym roku. Niektórzy analitycy przewidują wręcz, że za 10 lat nie będziemy używać klawiatur do interakcji z komputerami.

Kiedy myślimy o „doświadczeniu użytkownika”, zwykle myślimy o tym, co możemy zobaczyć i dotknąć. W konsekwencji głos jako metoda interakcji jest rzadko brany pod uwagę. Jednak głos i wizualizacje nie wykluczają się wzajemnie podczas projektowania doświadczeń użytkownika — oba stanowią wartość dodaną.

W nadchodzących latach spodziewamy się, że więcej firm będzie chciało zatrudnić projektantów VUI — i więcej projektantów doda projekt interfejsu użytkownika głosowego do swoich umiejętności. Wykorzystanie głosu niesie ze sobą zupełnie nowy zestaw wyzwań. Głównie w zakresie prywatności, bezpieczeństwa i etyki, więc będą to również bardzo ważne tematy nadchodzących latach.

Pora na nowy wygląd strony www?

Zleć wykonanie projektu UX/UI

Wypełnij formularz, skontaktujemy się z Tobą

Jakie zmiany w trendach UX przyniesie dla nas przyszłość?

Chociaż na Trendy UX w 2020 i 2021 roku największy wpływ miały zmiany stylu życia wprowadzone przez COVID-19 to wygląda na to, że zostaną z nami na lata i w miarę czasu będą się rozwijały.

W 2022 r. do najważniejszych trendów w zakresie UX, które już teraz zaczynają pojawiać się na rynku należą ekscytujące futurystyczne aplikacje, takie jak rzeczywistość rozszerzona (AR) i wirtualna rzeczywistość (VR).

AR i VR przeżywają szczególnie dynamiczny rozwój i stają się już normą w branży technologicznej. Dostarczają użytkownikom nowe światy i nową jakość doświadczeń.

Update 2024

COVID był niewątpliwie wyjątkowym doświadczeniem dla całego pokolenia. Dziś, kiedy czas pandemii jest już wspomnieniem, na nowe trendy w projektowaniu UX zdecydowanie wpływa sztuczna inteligencja. Rozwiązania AI są wsparciem w codziennej pracy UX designerów zarówno od strony organizacji pracy, jak i tworzenia konkretnych elementów projektów. Co przyniesie ta tendencja, jak bardzo zmieni projektowanie i projekty? Głosy są różne. Na pewno będzie inaczej niż jest i inaczej niż sobie dziś wyobrażamy.

Podsumowanie

W 2021 roku trendy w projektowaniu UI/UX koncentrują się na tym, aby wrażenia użytkownika były mniej skomplikowane, bardziej zróżnicowane, zachwycające i satysfakcjonujące. Nie ma potrzeby mieszać wszystkich trendów – wystarczy, że wykorzystasz tylko niektóre z nich, aby zmienić wygląd i styl swojej witryny. Minimalizm to jeden z największych trendów 2020 i 2021, więc kierujmy się nim tworząc nowy projekt.

Personalizacja UX – ile lat ma Twój użytkownik i co z tego wynika

Era konsumenta – jak wpływa na user expercience?

W 2013 roku firma doradcza Forrester rozpoczęła publikację artykułów i raportów, w których ogłosiła wejście biznesu w Erę konsumenta (Age of the Customer). Poprzedzająca, trwająca do 2010 Era informacji stworzyła możliwości ku temu, by pojedynczy klienci lub ich grupy zostali liczącymi się partnerami dla marek nawet o zasięgu globalnym.

Age of the Customer – co to oznacza dla Twojego biznesu?

Era konsumenta to przede wszystkim możliwość bezpośredniego dotarcia klienta do producenta lub sprzedawcy. Dotarcia z informacją zwrotną na temat jakości produktu, standardu obsługi, zasad sprzedaży itp. Złożenia reklamacji. Wyrażenia opinii.

Przy czym, opinie klientów przestały być znane wyłącznie odbiorcy, który kiedyś podejmował arbitralną decyzję o sposobie załatwienia sprawy. Komunikaty klientów stały się widoczne publicznie i zaczęły w ogromnym stopniu wpływać na decyzje zakupowe innych osób.

Opisany mechanizm sprawia, że klienci nie są już pasywnymi odbiorcami kampanii marketingowych, a ich potrzeby określają kierunki rozwoju produktów i sposobów sprzedaży.

Czy wiek konsumenta wpływa na Twój produkt?

Konsumenci nie stanowią jednak jednolitej masy, której zachowania i oczekiwania można w trywialny sposób uśrednić. Wiek klientów stanowi jeden z podstawowych czynników różnicujących wpływających na pożądane właściwości produktów i sposób ich promocji, prezentacji oraz dystrybucji.

Wiek konsumenta ściśle wiąże się z:

  • rodzajem produktów, którymi konsument jest zainteresowany, które kupuje,
  • budżetami zakupowymi, jakimi dysponuje,
  • umiejętnościami cyfrowymi, wpływającymi na sposób korzystania ze sklepów,
  • oczekiwaniami odnośnie sposobu komunikacji z dostawcą,
  • poczuciem estetyki w odniesieniu do produktu, jego opakowania i prezentacji,
  • wzorcami kulturowymi, stanowiącymi bazę komunikacji,
  • językiem stosowanym w komunikacji.

Personalizowanie User Experience – poznaj swoich użytkowników

Z perspektywy UX najbardziej istotne są cechy związane z prezentacją produktów oraz treściami i sposobem ich przedstawienia użytkownikom.

Punktem wyjścia do projektowania sklepu jest znajomość oczekiwań odbiorców. Wyobrażenia właściciela sklepu mogą stanowić pierwsze przybliżenie co do preferencji klientów. Powinny być jednak możliwie szybko zweryfikowane przez choćby podstawowe badania rzeczywistych użytkowników.

Projektując wygląd i działanie sklepu warto posłużyć się personą, czyli umownym reprezentantem docelowej grupy odbiorców. W praktyce rzadko wystarcza stworzenie jednej persony. Najczęściej w trakcie budowy sklepu i późniejszej jego obsługi (dodawania nowych produktów, opisów, reklam) tworzonych jest kilka zestawów charakterystycznych danych klienta. Takie podejście pozwala na pogodzenie potrzeb możliwie szerokiej grupy konsumentów.

Jeśli chcesz się dowiedzieć więcej na temat kreowania postaci użytkowników i ich roli w projektowaniu doświadczeń, zapraszam do lektury artykułu „Czym jest persona UX”.

infografika: Personalizacja UX - ile lat ma Twój użytkownik i co z tego wynika
Infografika: Personalizacja UX – ile lat ma Twój użytkownik i co z tego wynika.
pobierz pdf

Różnice międzypokoleniowe

Przyjrzyjmy się bliżej wybranym cechom klientów zależnym od ich wieku. Aby wychwycić najbardziej istotne różnice skupię się na dwóch grupach użytkowników.

Pierwsza z nich, to dzisiejsi kilkunastolatkowie. Grupa o ograniczonej zdolności nabywczej, ale której preferencje będą bardzo istotne na rynku za mniej więcej 10 lat.

Druga grupa, to osoby w wieku 50+. Są to użytkownicy dokonujący zakupów o ogromnym w skali rynku wolumenie, którzy współtworzyli Internet, lecz nie stanowią obecnie jego siły napędowej.

Umiejętności cyfrowe

Czasami mówi się, że pokolenie dzisiejszych nastolatków żyje bardziej w świecie wirtualnym niż rzeczywistym. Dostęp do telefonów i komputerów od najmłodszych lat sprawia, że najmłodsi konsumenci są bardzo sprawni w korzystaniu z rozwiązań cyfrowych. Są one dla nich czymś naturalnym, z czym mają do czynienia w wielu aspektach życia.

Na drugim biegunie są osoby urodzone w latach 70. i wcześniej. Nawet jeżeli korzystają oni z komputerów regularnie, większość z nich nie śledzi nowinek i zadowala się funkcjonowaniem w środowisku wirtualnym na bazowych poziomie.

Wygląd interfejsu

Trendy w wyglądzie serwisów internetowych zmieniają się stale. To co było krzykiem nowoczesności osiem lat temu, dziś trąci myszką. Wiek konsumenta bardzo wyraźnie przekłada się może nie tyle na gusta, co na akceptację nowinek oraz gotowość nauczenia się i zaakceptowania nieznanych dotąd rozwiązań.

Wraz ze wzrostem wieku klientów wzrasta ich konserwatyzm i przywiązanie do estetyki znanej sprzed lat. Przekłada się to najczęściej na lepsze oceny stonowanej kolorystyki, klasycznej grafiki oraz nieagresywnych multimediów w grupie wiekowej 50+

Sposób komunikacji

To kolejny obszar, w którym różnice wynikające z wieku są znaczne. Starsze roczniki, przyzwyczajone w dużym stopniu do zakupów w świecie realnym, akceptują sytuację, w której czekają na odpowiedź na pytania lub reklamacje. Młodzi użytkownicy są zdecydowanie mniej cierpliwi i oczekują niemal natychmiastowej reakcji.

Ponadto im niższy wiek klienta, tym większa skłonność do bezpośredniego formułowania opinii, w tym także negatywnych. Rośnie też gotowość do dzielenia się opiniami z innymi osobami za pośrednictwem social media.

Omawiając różnice w sposobie komunikacji nie sposób pominąć kwestii językowych, choćby takich jak słownictwo czy korzystanie z form grzecznościowych. Preferowany przez grupę 50+ styl formalny odbierany jest często przez nastolatków jako archaiczny i sztuczny.

Różne są też wzorce kulturowe, do których odnoszą się omawiane grupy. Młodsi czerpią je w znacznym stopniu z Internetu i seriali, dla starszych ich istotnym źródłem jest literatura i klasyczny film. W efekcie, przekaz kierowany do odbiorców z opisywanych grup, wykorzystywać musi odniesienia do innych postaci lub wydarzeń oraz posługiwać się innymi zwrotami, skrótami myślowymi, „kultowymi” tekstami.

Ostatni, chociaż być może warto byłoby go wymienić jako pierwszy, czynnik to korzystanie z social mediów. Oczywiście starsze pokolenie jest pod tym względem zdecydowanie bardziej konserwatywne. Nawet jeśli jego przedstawiciele korzystają z SM, tradycyjnie nie podążają za trendami, bądź włączają się w nie ze znacznym opóźnieniem.

Dostosuj swoją stronę do grupy docelowej

Zacznij od audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Wiek konsumenta – jak uwzględnić w projekcie sklepu

Sformułowanie recepty jest proste: projekt sklepu musi być dostosowany do preferencji odbiorców. Dostosowany pod względem wyglądu, języka, treści oraz sposobu obsługi. Zastosowanie przepisu wymagać może jednak sporo wysiłku. Zarówno w trakcie wstępnych analiz jak i samego wykonania.

O tworzeniu person napisałem już kilka słów. W fazie projektowania dużym wyzwaniem jest jednak uwzględnienie wypadkowych preferencji klientów. Sklep mający wśród swoich klientów zarówno nastolatków jak i pokolenie 50+ musi rozwiązać problem skutecznej komunikacji z obydwoma grupami. Decydując się na przykład na przyjęcie neutralnego charakteru interfejsu lub wprowadzenie odrębnych ścieżek zakupowych dla każdego z segmentów odbiorców.

Bez względu na to, jak sumiennie zostały przeprowadzone analizy przygotowawcze, projektowanie i wdrożenie serwisu, zawsze warto pamiętać, że każda realizacja może być lepsza. Aby stwierdzić, co i w jaki sposób zmodyfikować należy przeprowadzić testy UX.

Podsumowanie

Wiek konsumenta ma zasadniczy wpływ na projekt efektywnego sklepu internetowego. Spełnienie oczekiwań użytkowników i zapewnienie im wysokiej jakości doświadczeń przekłada się bowiem bezpośrednio na wyniki sprzedażowe.

Dokładne rozpoznanie grupy docelowej oraz dostosowanie wyglądu sklepu oraz zamieszczanych treści do jej potrzeb jest w Erze konsumenta receptą na sukces.

User Experience – czym jest i co dokładnie oznacza?

User Experience – co to jest?

User Experience to suma odczuć i doświadczeń użytkownika danego produktu. Projektowanie UX to podejście, które stawia końcowego użytkownika i jego potrzeby w centrum. Najczęściej słyszymy o UX w odniesieniu do produktów cyfrowych takich jak strony i sklepy internetowe oraz aplikacje mobilne.

Projektant UX jest odpowiedzialny za stworzenie jak najbardziej przyjaznego w obsłudze produktu, który spełni potrzeby użytkowników, ale bierze również pod uwagę potrzeby biznesu. Nie jest to zatem takie proste zadanie, jak mogłoby się wydawać.

Wrażenia użytkownika – jak powstał User Experience?

Termin User Experience pojawił się dopiero na początku dwudziestego pierwszego wieku. Jednak już o wiele wcześniej (nawet przed erą cyfrową) zajmowano się doświadczeniami użytkowników. W latach 70. zaczęto rozumieć, że aby człowiek mógł korzystać z maszyny, interfejs należy zaprojektować tak, aby odzwierciedlał logikę użytkownika a nie systemu. Jak się okazało, ludzki wymiar jest kluczowy przy projektowaniu użytecznych rozwiązań i to właśnie na styku człowieka z maszyną i połączeniu inżynierii z psychologią powstało coś, co dzisiaj znamy jako UX Design.

Dlaczego UX jest takie istotne?

Coraz więcej firm korzysta z usług wyspecjalizowanych agencji projektowych lub ma własny dział User Experience. Dlaczego przedsiębiorstwa chętnie inwestują w działania związane z projektowaniem zorientowanym na użytkownika?

Już w latach 70. Ówczesny CEO firmy IBM, T.J. Watson, Jr., napisał, że „Każdy dolar zainwestowany w UX zwraca od 10$ do 100$”. Projektowanie użyteczności pomaga zatem nie tylko użytkownikom, ale także biznesowi.

Rola User Experience w sprzedaży

Weźmy na przykład sklep internetowy. Jego głównym celem jest utrzymanie lub zwiększenie poziomu sprzedaży. W czym może leżeć problem, kiedy nawet rozległe działania marketingowe nie przynoszą rezultatów? Okazuje się na przykład, że przyczyną może być źle zaprojektowany proces zakupowy. Badania wykazały, że ponad 20% (aktualizacja na rok 2024) klientów porzuca koszyk, ponieważ nie może znaleźć w nim informacji o całkowitych kosztach zakupu a aż 22% (aktualizacja na rok 2024) dlatego, że checkout jest zbyt długi lub skomplikowany. Jeśli użytkownik napotka takie problemy na swojej drodze, to prawdopodobnie znajdzie inny sklep, w którym zakup będzie o wiele łatwiejszy.

O tym, jak UX może wpłynąć na sprzedaż przeczytasz w naszym artykule UX w e-commerce sposobem na zwiększenie konwersji.

infografika: User Experience - czym jest i co dokładnie oznacza
Infografika: User Experience – czym jest i co dokładnie oznacza.
pobierz pdf

Co wpływa na pozytywne doświadczenia użytkownika – user experience?

Na pozytywne doświadczenia użytkownika wpływa sporo czynników, które różnią się od kontekstu oraz celu zastosowania danego systemu. O tym, jak szybko i sprawnie uda się wykonać dane zadanie, decyduje mnóstwo małych elementów. I właśnie te elementy muszą być precyzyjnie stworzone przez projektantów.

Projekt końcowy jest dobry wtedy, gdy użytkownik nie zauważa poszczególnych detali, oceniając jednocześnie interfejs jako wygodny i intuicyjny.

User Experience – na co zwrócić uwagę przy projektowaniu

Projektanci UX na pierwszym miejscu stawiają użytkownika docelowego i jego potrzeby. Dzięki badaniom UX i obserwacjom są w stanie stwierdzić, co najbardziej będzie odpowiadało grupie docelowej. Należy zwrócić uwagę na obawy i problemy, które mogą mieć użytkownicy i starać się im zaradzić.

Dobre praktyki w projektowaniu User Experience

Każdy projekt będzie inny i będzie miał innych użytkowników z ich indywidualnymi potrzebami. Jednak istnieje coś takiego jak dobre praktyki UX, które zazwyczaj są prawdziwe dla każdego typu projektu i wyznaczają ogólne zasady projektowania zorientowanego na użytkownika.

Przykładowym zbiorem dobrych praktyk projektowania są heurystyki Nielsena. Poniżej wypiszę niektóre z nich.

Pokazuj status systemu

Znajomość stanu systemu determinuje następne kroki użytkownika. Dzięki informacji zwrotnej wie on, czy idzie w dobrą stronę i czy osiągnie zamierzony cel. Status systemu powinien się również pojawić najszybciej jak to możliwe po zakończonej akcji, aby użytkownik nie czuł się zdezorientowany.

Daj pełną kontrolę użytkownikowi

Użytkownicy często popełniają błędy podczas korzystania z systemu. Na przykład ktoś może dodać o jedną parę butów za dużo do koszyka. Należy dać możliwość łatwego wyjścia z takiej sytuacji bez zmuszania danej osoby do ponownego przechodzenia skomplikowanego procesu. Może oznaczać to np. dodanie opcji zmiany liczby produktów w koszyku lub umożliwienie cofnięcia kroku.

Chcesz poprawić użyteczność swojej strony www?

Zamów przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Trzymaj się standardów i zachowaj spójność

Użytkownik nie powinien zastanawiać się, czy różne słowa lub akcje oznaczają to samo. Należy trzymać się standardów i dla tych samych sytuacji stosować te same oznaczenia, aby nie wprowadzać zamieszania w systemie. Jeśli projektujesz dla wąskiej grupy specjalistów, to postaraj się używać tych samych słów, które są stosowane w danej branży.

Zapobiegaj błędom

Informowanie o problemach we właściwy sposób jest ważne, ale staraj się zapobiegać błędom zanim się pojawią. W pierwszej kolejności eliminuj ryzyko błędów, których następstwa są najbardziej kosztowne lub poważne. Jeśli to możliwe i sensowne, stosuj dane domyślne, aby ułatwić pracę użytkownikowi i zapobiegać potencjalnym pomyłkom.

Podsumowanie

User Experience stał się ważną częścią działalności firm, które chcą dostarczyć jakościowy produkt swojej grupie docelowej. Optymalizacja doświadczeń użytkownika to nieustanna praca, która wymaga sporej wiedzy i dużej dawki empatii. Jednak dzięki projektowaniu zorientowanemu na użytkownika masz szansę wyróżnić się na tle konkurentów i zyskać zaufanie klientów.

Mobile First Design – dlaczego warto zadbać o użytkowników mobilnych?

Czym jest podejście Mobile First Design

W odpowiedzi na rosnącą popularność korzystania z internetu na urządzeniach mobilnych powstał pomysł projektowania stron internetowych przyjaznych dla telefonów komórkowych. Responsive Web Desing – responsywny projekt strony internetowej. Jest to proces tworzenia stron internetowych, które działają na dowolnym urządzeniu mobilnym z dowolnym rozmiarem ekranu bez konieczności powiększania i pomniejszania, aby zobaczyć całą zawartość. W ten sposób treść strony jest dostępna dla wszystkich użytkowników, co jednocześnie sprawia, że wzrasta jakość doświadczeń na stronie.

Ale sprawy poszły o krok dalej, gdy narodził się projekt mobile first. Mobile First Design jest dokładnie tym na co wskazuje jego nazwa – rozpoczęciem projektowania od najmniejszych ekranów, a następnie przechodzenie do coraz większych rozmiarów.

Mobile first a User Experience

Generowanie leadów i współczynniki konwersji są w dużym stopniu uzależnione od wyglądu i treści witryny, która jest widoczna dla użytkowników. Jeśli nie możesz wyjaśnić odbiorcom, w jaki sposób Twoje usługi / produkty przyniosą im korzyści, nie zostaną oni na Twojej stronie. Projektując witrynę zorientowaną na urządzenia mobilne, możesz pomóc Twojej firmie w spełnieniu wszystkich wymagań i szybkim osiągnięciu celów. User experience jest najważniejszym aspektem podczas tworzenia strony, a jeśli możesz potencjalnie poprawić to doświadczenie, zyskasz szacunek i zaufanie użytkowników. Takie podejście sprawi, że będą oni wracać, a tym samym Twoje zyski będą rosły.

infografika: Mobile First Design - dlaczego warto zadbać o użytkowników mobilnych?
Infografika: Mobile First Design – zalety i wady.
pobierz pdf

Mobile First Design – wady i zalety

Mimo, że brzmi to jak idealne rozwiązanie, to wciąż podejście mobile first design nie jest normą dla większości firm zajmujących się projektowaniem stron. Aby zrozumieć dlaczego, przejdźmy do zalet i wad projektowania witryn z myślą o urządzeniach mobilnych.

Zalety Mobile First

  • Doskonałe doświadczenia użytkownika.

Podejście mobile-first pozwala stworzyć doświadczenie użytkownika (UX), które faworyzuje urządzenia mobilne. Odwiedzający inaczej wchodzą w interakcję z witrynami komputerowymi niż mobilnymi, a Twój UX musi się zmieniać w zależności od rozmiaru ekranu. Konstrukcja zorientowana na urządzenia mobilne pozwala na stopniowe zwiększanie wrażenia i treści w miarę powiększania się ekranu.

  • Koncentracja na najważniejszej treści.

Ponieważ przestrzeń na urządzeniu mobilnym jest niewielka, a projekt musi wyglądać na czysty i dopracowany, musisz ustalić priorytety. Podejście Mobile First zapobiega dodawaniu niepotrzebnych funkcji i treści.

  • Dopracowana strategia i plan wdrażania.

Mobile first design wymaga, aby przed rozpoczęciem opracowywania ustalić priorytety dla treści. Często programiści zapominają o istotnych treściach i dodają je później. Strategia mobile first zmusza Cię do planowania w pierwszej kolejności i późniejszego rozwoju, dzięki czemu nie możesz zapomnieć o ważnych treściach.

  • Szybszy czas ładowania.

Podczas ładowania strony internetowej w przeglądarce wiele elementów (obrazów, filmów, audio itp.) jest automatycznie ładowanych. Wersje mobilne tej samej witryny często ukrywają te elementy ze względu na ograniczoną przestrzeń. Nie myślą o tym, że zawartość jest również ładowana w tle. Powoduje to wydłużenie czasu ładowania. W przypadku korzystania z podejścia Mobile First tak się nie dzieje.

Wady Mobile First

  • Czas i koszty.

Projektowanie z myślą o urządzeniach mobilnych nie jest ani zabawne, ani łatwe, i wymaga zespołu, który rozumie nieodłączne różnice w tym podejściu. Wymaga nowych metod pracy i projektowania, a także zaangażowania, testowania i szerokiego zrozumienia platformy mobilnej.

Masz niską sprzedaż w kanale mobilnym?

Zamów nowoczesny responsywny e-sklep

Wypełnij formularz, skontaktujemy się z Tobą

Strona Mobile First – na co zwrócić uwagę?

Ponownie, ponad połowa internautów twierdzi, że nie poleci firmy ze źle zaprojektowaną witryną na urządzeniu mobilnym. Aby uniknąć tego scenariusza, Twoja firma powinna postępować zgodnie z poniższymi krokami, aby upewnić się, że Twoja witryna mobilna jest na najwyższym poziomie.

1. Użytkownicy na pierwszym miejscu

Pierwszą rzeczą, którą należy zrobić jeszcze przed rozpoczęciem procesu projektowania witryny na urządzenia mobilne, jest zbadanie i zidentyfikowanie problemów użytkowników. Witryna zorientowana na urządzenia mobilne powinna pomóc odwiedzającym wykonać zadanie lub rozwiązać problem szybko i skutecznie, w sposób, który jest dla nich najwygodniejszy.

Drugim ważnym krokiem jest określenie, jakie ścieżki użytkowników należy zaimplementować w swojej witrynie mobilnej. Spróbuj rozważyć różne scenariusze zachowań użytkowników na każdej podstronie i odpowiednio dostosuj projekt do podróży użytkownika.

WAŻNE WSKAZÓWKI

Aby Twoja witryna była bardziej przyjazna i intuicyjna dla użytkownika, zastanów się nad możliwymi interakcjami między użytkownikiem a interfejsem witryny i zidentyfikuj problemy użytkowników poprzez:

 

  • Zbadanie istniejących już witryn mobilnych i dowiedzenie się, jak się poprawiły.
  • Analizę konkurencji i sprawdzenie, jakich rozwiązań przyjaznych dla urządzeń mobilnych używają, ale też co mogłoby działać lepiej.
  • Zapytanie odwiedzających bezpośrednio o problemy, które napotykają na Twojej stronie mobilnej za pomocą ankiet.

2. Hierarchia treści

Tworząc treści dla witryny mobilnej, należy zadbać o to, aby była ona jak najbardziej zwięzła i rzeczowa. Daj użytkownikom treści, których szukają, pozbywaj się bałaganu i wszystkiego, co może rozpraszać użytkownika lub utrudniać odczytanie strony. Ponieważ witryny mobilne mają pewne ograniczenia dotyczące rozmiaru ekranu, powinieneś prezentować treści swoim odbiorcom w sposób, który respektuje wizualną hierarchię według ważności treści. Ułatwia to rozeznanie, które elementy są najważniejsze i zasługują na pierwsze miejsce.

WAŻNE WSKAZÓWKI

W trakcie optymalizacji treści podczas tworzenia projektu mobile first i tworzenia jej hierarchii, kieruj się następującymi wskazówkami:

 

  • Utrzymuj tytuły na górze, a podgląd artykułu w części strony widocznej na ekranie, aby czytelnicy mogli od razu zobaczyć i zrozumieć treść.
  • Zoptymalizuj rozmiary obrazów i filmów, aby uzyskać wysoką wydajność na urządzeniach mobilnych.
  • Skoncentruj się na prezentowaniu tylko odpowiednich treści, które Twoi użytkownicy mogą szybko przeskanować.
  • Zadbaj, aby treść była zwięzła oraz dostarczała jak najwięcej informacji w jak najmniejszej liczbie słów.

3. Prosty i minimalistyczny design

Prosty i zwięzły design nie bez powodu jest modny w projektowaniu stron internetowych. Poprawia bowiem czytelność strony i skupia uwagę użytkowników na tym, co najważniejsze. W praktyce oznacza to, że budując stronę mobile first, powinieneś zachować te elementy, których naprawdę potrzebujesz, a resztę usunąć. Uwaga ta w szczególny sposób odnosi się do fragmentów interfejsu związanych z interakcją z użytkownikiem, takich jak formularz kontaktowy. Staraj się nie obciążać użytkowników zbędnymi elementami, które mogą ich denerwować i rozpraszać, takimi jak wyskakujące okienka i reklamy. Uwzględnij tylko te elementy, dla których pojawili się oni na Twojej stronie.

WAŻNE WSKAZÓWKI

Chcąc uprościć swoją witrynę zorientowaną na urządzenia mobilne, rozważ podjęcie następujących środków:

 

  • Używaj prostej typografii i nie rób jej zbyt małej dla ekranów mobilnych.
  • Używaj szerokich odstępów i czystych linii.
  • Zadbaj o odpowiednio wyeksponowaną i zintegrowaną wyszukiwarkę.
  • Wykorzystaj białą przestrzeń, aby układ był bardziej czytelny.
  • Użyj maksymalnie dwóch kolumn podczas prezentacji treści.

4. Czytelne i widoczne CTA

Poste linie, jasne kolory i elementy typograficzne zdziałają cuda w przypadku witryn zaprojektowanych z myślą o smartfonach. Połączenie ich wszystkich w skuteczny, efektowny przycisk CTA (wezwanie do działania) jest koniecznością. Brak CTA może skutkować utratą cennych leadów i konwersji. Jeśli to możliwe, używaj ich zamiast linków, które mogą być bardzo trudne do kliknięcia na ekranach telefonów komórkowych.

WAŻNE WSKAZÓWKI

Inne graficzne elementy zorientowane na urządzenia mobilne, które poprawiają wrażenia użytkownika i prowadzą ich w dół lejka sprzedażowego, również powinny przyciągać uwagę. Obejmują one:

 

  • Czytelne przyciski nawigacyjne.
  • Kontrastowe schematy kolorów i żywe odcienie.
  • Oryginalny design np. ręcznie rysowane ilustracje.
  • Dopracowaną typografię – odpowiednio dobrany rozmiar i krój pisma.

Podsumowanie

Użytkownicy mobilni stanowią już większość odwiedzających internet. Prowadząc biznes w internecie Twoim zadaniem jest zaspokojenie potrzeb odbiorców. Oznacza to, że jeśli oni zaczynają się od urządzeń mobilnych, Ty również powinieneś zacząć od urządzeń mobilnych.

Mobile first to nowe podejście do projektowania najlepszych możliwych doświadczeń użytkowników, które pomoże określić strategię cyfrową dla Twojego produktu lub marki.

Testy UX – jak sprawdzić użyteczność projektu

Co to są i na czym polegają testy UX (usability tests)?

Testy użyteczności zaliczają się do jakościowych metod badawczych, które pozwalają nam ocenić jak intuicyjna dla grupy docelowej jest dana strona internetowa, sklep online lub oprogramowanie. W przeciwieństwie do badań ilościowych, odpowiadających na pytanie „Jak często”, odpowiadają na pytanie „Dlaczego?”. Zazwyczaj korzystamy z nich, gdy chcemy zweryfikować poziom użyteczności projektu i poszukujemy dalszych możliwości rozwoju.

Kiedy warto przeprowadzić testy UX stron internetowych?

Testy UX mogą być przeprowadzane w różnych etapach tworzenia, użytkowania i rozwijania witryny. Uzyskane wyniki badań ux pozwalają usprawnić działanie witryny oraz zwiększyć jej intuicyjność. W każdej z faz projektu mają jednak nieco inne cele i pociągają za sobą inne skutki.

Na etapie projektowania dzięki testom użyteczności dowiadujemy się przede wszystkim czy planowane rozwiązania będą zrozumiałe dla użytkowników. Pozwala to zweryfikować przyjęte założenia oraz uniknąć w przyszłości kosztownych i pracochłonnych modyfikacji.

W fazie użytkowania strony internetowej testy UX pozwalają zbadać, jakie są słabe i mocne strony serwisu. To z kolei umożliwia wytypowanie obszarów wymagających naprawy ze względu na realizację zdań biznesowych strony, e-sklepu bądź aplikacji.

Testy mogą być przeprowadzane także w trakcie prac rozwojowych. Pełnią one wtedy rolę podobną jak przy projektowaniu witryny, lecz częściej ograniczone są do weryfikacji pojedynczych elementów serwisu. Niejednokrotnie badania prowadzone są jako testy powykonawcze.

Testy użyteczności aplikacji – obowiązkowy element każdego projektu

Trudno wyobrazić sobie wykreowanie strony internetowej lub aplikacji webowej w oderwaniu od tych, którzy będą się nią posługiwali. Testy użyteczności są nieodłącznym elementem każdego projektu, który cechuje się projektowaniem skoncentrowanym na końcowym użytkowniku. Przetestowanie projektu z jednym odbiorcą jest o niebo lepsze od nietestowania. Kto inny ma nam powiedzieć, czy projekt idzie w dobrym kierunku jak nie osoba, która będzie z niego korzystała?

Po co przeprowadzać testy UX – korzyści

Dzięki testowaniu projektów, szczególnie w trybie iteracyjnym, zespół projektowy wie, gdzie ma szansę wprowadzić poprawki, które przełożą się na większą wygodę użytkowania, która z kolei prowadzi do większej konwersji.

Po przeprowadzeniu testów użyteczności dostaniemy odpowiedź na pytania takie jak:

  • Czy użytkownicy rozumieją cel i funkcje strony lub aplikacji?
  • Czy potrafią korzystać poprawnie z całego zakresu funkcjonalności systemu?
  • Jak radzą sobie z nawigacją, czy potrafią poruszać się po stronie z łatwością?
  • W jakim stopniu problematyczne jest dla nich odnajdywanie informacji?

Badacze UX obserwując interakcję użytkowników z systemem mogą wydać opinię oraz rekomendacje na dalsze rozwijanie produktu.

Etapy testów UX – harmonogram i przebieg testów

Testy użyteczności można podzielić na różne etapy, aby systematycznie analizować i ulepszać witrynę internetową lub aplikację. Poniżej przedstawiam harmonogram i przebieg testów UX, które pomogą zoptymalizować doświadczenia użytkowników na stronie.

Faza projektowa

W fazie projektowej warto przeprowadzać testy UX, aby uzyskać informacje na temat oczekiwań i preferencji grup użytkowników. Testy na tym etapie pomagają namierzyć potencjalne problemy oraz sprawdzić, czy nowe rozwiązania są zrozumiałe dla userów.

Testy poszczególnych działań

Na tym etapie przeprowadza się testy dotyczące poszczególnych działań, takich jak nawigacja, wyszukiwanie czy interakcja z elementami interfejsu. Dzięki temu można namierzyć i ulepszyć konkretne części serwisu, które generują problemy dla użytkowników.

Analiza danych

Warto również analizować dodatkowe dane, takie jak współczynnik odrzuceń, aby zrozumieć, jakie elementy witryny zniechęcają użytkowników do dalszego korzystania z serwisu. Analiza tych danych pozwala na wprowadzenie odpowiednich zmian i ulepszeń.

Testy A/B

Przeprowadzanie testów UX innego rodzaju, takich jak testy A/B czy testy wieloplatformowe, pozwala na uzyskanie informacji na temat różnic między różnymi wersjami strony oraz zrozumienie, jak użytkownicy korzystają z witryny na różnych urządzeniach.

Opracowanie raportu

Po przeprowadzeniu wszystkich testów, na każdym etapie warto opracować raport zawierający wnioski oraz rekomendacje dotyczące ulepszeń. Raport ten będzie niezbędny w dalszym procesie wdrożenia zmian i ulepszeń.

Wdrożenie zmian i ulepszeń

Na podstawie raportu oraz zebranych informacji, można wprowadzić zmiany i ulepszenia. Warto przeprowadzać kolejne testy, aby sprawdzić, czy wprowadzone zmiany przynoszą pożądane efekty i czy witryna spełnia oczekiwania użytkowników.

Pamiętaj, że harmonogram i przebieg testów UX mogą się różnić w zależności od projektu, jednak kluczowe jest przeprowadzenie testów na każdym etapie, aby uzyskać wartościowe informacje oraz ulepszyć serwis lub aplikację zgodnie z potrzebami użytkowników.

Skutki nieprzeprowadzania testów UX

Testowanie we wczesnych etapach projektu może zniwelować dużo błędów, które w przyszłości mogłyby się przerodzić w skomplikowane problemy powodujące znaczące opóźnienia i straty.

Brak testów UX tworzy także ryzyko złego przyjęcia przez grupę docelową. Jeśli produkt nie spodoba się odbiorcom, to biznes niestety również na tym nie skorzysta. Nigdy nie będziemy w stanie wypuścić idealnie zaprojektowanego dzieła, zawsze będą podstawy do ulepszania projektu, nawet jeśli już funkcjonuje na rynku. Ciężko jednak optymalizować produkt, stronę, aplikację, które zupełnie wyminęły się z potrzebami użytkowników i im nie służą.

Rodzaje testów UX

Obecnie mamy bardzo szeroki wybór narzędzi i sposobów na testowanie użyteczności. Niektóre polegają w dużej mierze na umiejętnościach osoby, która przeprowadza i obserwuje badanie UX, a inne opierają się silnie na zastosowanej technologii. To, jaki rodzaj testów użyteczności wybierzesz do swojego projektu zależy od jego charakteru i środków, jakimi dysponujesz. Zawsze jednak musimy wiedzieć najpierw, co chcemy zbadać, a dopiero potem wybieramy najbardziej odpowiednią metodę.

Zadaniowe testy użyteczności

Zazwyczaj testy użyteczności wykonuje się w formie zadaniowej. To znaczy, że badany dostaje do wykonanie konkretne czynności w systemie. Przykładowe zadania to:

Badacz UX obserwuje jego zachowanie, czyli podejmowane działania, decyzje, reakcje, popełniane błędy, napotkane przeszkody itd. oraz zadaje dodatkowe pytania, które uzupełniają opinię badanego na temat produktu.

Niemoderowane zdalne testy użyteczności

Tańszą i stosunkowo szybszą alternatywą dla zadaniowych testów UX z moderatorem są zdalne testy niemoderowane. Dzisiaj mamy wiele narzędzi online, dzięki którym możemy przeprowadzić ten typ testów. Zaliczają się do nich Lookback, Loop11, usertesting.com, userzoom.com, itd. Jest to opcja przede wszystkim cenna dla zespołów, które nie dysponują większymi środkami i nie mogą sobie pozwolić na własnych badaczy, moderatorów oraz analityków.

Jednak ta metoda oprócz zwolenników ma również przeciwników. Testując jakąś stronę poprzez właśnie taki portal nie jesteśmy pewni, że trafimy na respondentów, na których nam zależy. Należy pamiętać, że osoby, które zapisują się na te testy dostają za nie jakieś wynagrodzenie. Może nam się trafić zatem jakiś seryjny respondent, który bierze udział w badaniach, do których zupełnie nie pasuje, tylko żeby dostać punkty.

Innym zagrożeniem jest niemożność zadawania pytań uzupełniających przez moderatora. Przez to wyniki badań mogą być niepełne.

Eyetracking / clicktracking

Ten rodzaj badan należy do bardziej zaawansowanych technicznie. Eyetracking polega na rejestrowaniu ruchu gałek ocznych, który pozwala w obiektywny sposób stwierdzić, gdzie badani patrzą. Podczas wykonywania zadania lub przeglądania danej strony możemy widzieć, na czym badany skupia swoją uwagę. Ten sam mechanizm występuje w przypadku clicktrackingu. Podczas badania rejestrowane są wszystkie kliknięcia respondenta.

Dzięki tym metodom możemy zaprojektować optymalny układ informacji na stronie lub zweryfikować, czy aktualne rozmieszczenie przyciąga uwagę, tak jak zakładaliśmy.

Analityka stron internetowych

Analiza zachowań Internautów odwiedzających stronę www również pozwala zidentyfikować problemy w trakcie korzystania z produktu cyfrowego. Przykładowo monitorowanie ścieżek użytkowników daje możliwość obserwacji, które fragmenty procesu zakupowego są intuicyjne, a które sprawiają trudności. Wykorzystanie danych analitycznych funkcjonującego w warunkach rzeczywistych serwisu dostarcza informacji trudnych do uzyskania w przypadku testów prowadzonych w warunkach laboratoryjnych. Ponadto warto pamiętać, że aby zbierać dane analityczne nie musimy prowadzić przygotowań, których wymagają innego typu testy z udziałem użytkowników.

infografika: Testy UX - jak sprawdzić użyteczność projektu.
Infografika: Testy UX – jak sprawdzić użyteczność projektu.
pobierz pdf

Jak zaprojektować testy UX?

Planowaniem testów użyteczności zajmują się zazwyczaj badacze UX. Powinni oni podejść indywidualnie do każdego projektu, ponieważ cele badawcze i zakres badania są różne. W zależności, czego chcemy się dowiedzieć w wyniku badań, scenariusz, respondenci i metody będą się różniły.

Określenie celu testów UX

Pierwszym etapem badania jest przygotowanie. Należy zacząć od określenia celów badania, narzędzi badawczych oraz grup docelowych. Cele badawcze będą się różniły w zależności od tego, czego chcemy dowiedzieć się podczas testowania. Celem badawczym może być na przykład zweryfikowanie sposobu dokonywania zakupów w sklepie internetowym lub upewnienie się, że grupa docelowa poprawnie zrozumie ideę nowej aplikacji mobilnej.

Identyfikacja grupy docelowej

W skrócie, są to osoby, dla których przeznaczony jest produkt. Testy użyteczności wykonujemy z udziałem przedstawicieli tej właśnie grupy. Dzięki temu wiemy, z jakimi problemami mogą spotkać się dane osoby lub co im się podoba w naszym produkcie. Jeżeli na przykład projektujemy aplikację do śledzenia cyklu menstruacyjnego, to na badania zaprosimy raczej kobiety, które znają się na temacie zdecydowanie lepiej niż mężczyźni.

Scenariusz wykonania testów użyteczności

Kiedy wiadomo już, czego chcemy dowiedzieć się w wyniku testów UX, należy przygotować scenariusz badania, czyli rozpisać zadania, które respondenci będą wykonywali podczas testu.

Dzięki trafnym zadaniom będziemy mogli zaobserwować badanych w sytuacjach, które potencjalnie mogą być dla nich problematyczne i odkryć, jak możemy je poprawić.

Czas trwania testu UX

Zazwyczaj na jeden zadaniowy test użyteczności trzeba zarezerwować około godziny razem z pytaniami uzupełniającymi. W zależności od rozległości zadań, czas testu może się różnić.

Idealna liczba użytkowników testujących

Według teorii Jakoba Nielsena, wystarczy 5 respondentów, żeby odkryć około 85% problemów w systemie. Tak naprawdę już po drugim czy trzecim teście, lista problemów napotkanych przez badanych będzie się częściowo powielała. Dlatego w jednej iteracji pięć osób powinno wystarczyć, żeby odkryć większość błędów.

Chcesz sprawdzić użyteczność swojej strony lub sklepu?

Zleć wykonanie audytu lub badań UX

Wypełnij formularz, skontaktujemy się z Tobą

Realizacja testów użyteczności – praktyczne wskazówki

Podczas testów ważne jest, aby moderator zachowywał się w odpowiedni sposób w stosunku do respondenta, tak, aby wynik badań był jak najbardziej prawdziwy. Nie powinien przede wszystkim naprowadzać badanego na odpowiednie rozwiązanie lub okazywać emocji związanych z przebiegiem badania.

Czasem jest tak, że moderator jest również osobą zaangażowaną w projektowanie rozwiązania. Ważne w tym wypadku jest zachowanie zimnej krwi, gdy respondent robi zupełnie coś innego, niż sobie zaplanowaliśmy (a taka sytuacja zdarza się bardzo często).

Z jakimi kosztami wiążą się testy UX

Koszty związane z testami UX mogą się różnić w zależności od wielu czynników, takich jak: rodzaj testów (np. zdalne, moderowane), zakres badania, wykorzystywane narzędzia, liczba uczestników oraz zespół prowadzący testy. Poniżej przedstawiamy przykładowe zakresy cenowe, które mogą wystąpić podczas przeprowadzania testów użyteczności:

  • Testy zdalne niemoderowane: Koszty takich testów zaczynają się już od kilkuset złotych za pojedynczą sesję z jednym użytkownikiem. W przypadku większej liczby uczestników koszty mogą sięgnąć kilku tysięcy złotych.
  • Moderowane testy: Cena takich testów zwykle zaczyna się od kilku tysięcy złotych i może wzrosnąć do kilkudziesięciu tysięcy, w zależności od liczby uczestników, czasu trwania testów oraz specjalistycznych narzędzi wykorzystywanych w trakcie badania.
  • Zespół badający: Koszt zatrudnienia zespołu specjalistów może się różnić w zależności od doświadczenia i kompetencji. W przypadku zewnętrznej agencji koszt usługi może sięgać od kilkudziesięciu do nawet kilkuset tysięcy złotych.

Warto pamiętać, że inwestycja w testy UX przynosi korzyści w postaci zwiększenia satysfakcji użytkowników oraz poprawy wyników biznesowych, dzięki czemu koszty te mogą zostać zrekompensowane w dłuższej perspektywie czasowej.

Podsumowanie

Proces projektowy skoncentrowany na użytkownika nie może obejść się bez badań użyteczności. Warto wykorzystywać testy UX na różnych etapach projektu, tak aby jak najwcześniej wykryć problemy i szybko je zniwelować.

Testować można już nawet na papierowych prototypach, także nie zwlekaj i testuj!

Jak przygotować podstronę kategorii produktowych w sklepie www?

Podstrona kategorii produktów, a wpływ na sprzedaż

Wygląd sklepu internetowego to oczywiście ważna kwestia, ale żeby klient mógł się w nim odnaleźć trzeba zadbać o dostępność zarówno dla kupujących jak i wyszukiwarek. Po wejściu na stronę klient powinien intuicyjnie poruszać się po niej oraz mieć łatwy dostęp do menu, kategorii i wyszukiwarki produktów.

Wchodząc do sklepu stacjonarnego klient bardzo szybko otrzymuje informacje co może w nim kupić i gdzie może to znaleźć. Doświadczenie to powinno być odwzorowane w e-sklepie. Dobrze zaprojektowane i opisane kategorie będą użyteczne nie tylko dla klienta czy wyszukiwarek, ale też dla Ciebie, jako właściciela sklepu:

  • Uporządkują asortyment, ułatwiając prace administracyjne.
  • Ułatwią poruszanie się po sklepie i zrozumienie oferty.
  • Pozyskają ruch z fraz kluczowych, wprowadzanych przez klientów w wyszukiwarkach.
  • Poprowadzą klienta do koszyka.

Projekt kategorii produktowej – co powinien zawierać?

Jak dokładnie powinna wyglądać Twoja podstrona kategorii będzie zależeć od Twojej marki i tego co sprzedajesz, ale przygotowałam kilka przydatnych wskazówek, które pomogą uporządkować pracę nad projektem.

Projekt graficzny kategorii

Określenie roli jest pierwszym krokiem w tworzeniu dobrych stron kategorii. Zacznij od odpowiedzi na pytanie, jakie działania chcesz, aby odwiedzający podjęli na stronie kategorii.

Możesz chcieć, aby odwiedzający zrobili jedną, część lub wszystkie z poniższych rzeczy:

  • przejść do strony produktu,
  • przeglądać dostępne produkty,
  • porównać produkty,
  • dodać produkt do koszyka,
  • zapytać o produkt.

Każda z powyższych akcji wymusi podjęcie decyzji projektowej na stronie kategorii. Należy, nie tylko zastanowić się, jakich działań Ty oczekujesz, aby Twoi odwiedzający podjęli na stronie kategorii, ale musisz zastanowić się też, jakich działań oczekują / potrzebują odwiedzający. Na przykład, nie kupują produktu z poziomu strony kategorii. Muszą kliknąć na konkretny produkt, aby przeczytać więcej szczegółów na jego temat, zanim dodadzą go do koszyka. Inni odwiedzający mogą już wiedzieć, czego szukają i posiadanie przycisku „dodaj do koszyka” na stronie kategorii uprości im proces składania zamówienia. Przecięcie ścieżek pomiędzy działaniami, których chcesz, aby odwiedzający podjęli, a działaniami, które oni sami chcą podjąć, dostarczy listę funkcji i możliwych działań, które powinieneś mieć na stronie kategorii.

NASZA REALIZACJA

Projekt dla Audiopolis

Sklep z profesjonalnym sprzętem audio

PORTFOLIO

Prosta i konkretna nazwa kategorii

Kolejną ważną kwestią jest ciągłe informowanie użytkownika, w którym miejscu się znajduje – spraw, aby był pewny, gdzie trafił. Strony kategorii są często zoptymalizowane pod kątem SEO, a także kierowany jest na nie płatny ruch – oznacza to, że klient może trafić na stronę kategorii bez odbycia podróży ze strony głównej. Dlatego ważne jest, aby dać silne wizualne wskazówki, w którym miejscu strony się znalazł. Może to obejmować inspirujące banery rozciągające się na całą szerokość strony. Powinny one podkreślać wiele elementów, aby pokazać zakres oferty i utrzymać stronę na czasie. Obraz może i powinien być również wzmocniony przez opisowy nagłówek, który szczegółowo określa rodzaj produktów, które będzie można tam znaleźć.

Sposób wyświetlania

Kolumny ze średnio trzema elementami na linię, są najczęściej używanym układem w e-commerce. Oczywiście nie jest to idealne rozwiązanie dla wszystkich i powinno być ustalone na podstawie poszczególnych branży.

Na przykład, możesz chcieć mieć tylko jedną kolumnę, dając każdemu produktowi z listy pełną szerokość ekranu. Jest to przydatne, gdy masz produkty, o których z natury ludzie chcą dowiedzieć się więcej np. sprzęt AGD. Działa to również dobrze, jeśli masz małą kategorię z kilkoma prostymi i uzupełniającymi się produktami, które prawdopodobnie będą kupowane razem, ponieważ pozwala ludziom przeglądać je razem i wybierać to, co chcą z danej strony kategorii.

Filtrowanie

Filtry produktów w sklepie www są jednym z najważniejszych elementów UX na stronach kategorii. Pomagają zmniejszyć zakres wyszukiwania, dopasowują produkty do potrzeb klientów i skracają czas dotarcia do koszyka.

W przypadku dużej ilości kategorii i produktów, używaj filtrów specyficznych dla kategorii, które pozwalają kupującym filtrować według specyfikacji produktów z danej kategorii.

Na przykład filtr klasy energetycznej może pomóc w uproszczeniu wyszukiwania lodówki, ale nie jest odpowiedni dla innych kategorii, takich jak ubrania, samochody, artykuły spożywcze i zabawki.

WAŻNE WSKAZÓWKI:

  • Zezwalaj użytkownikom na stosowanie więcej niż jednego filtra jednocześnie.
  • Spróbuj stworzyć unikalne i spersonalizowane filtry, które rozwiążą określone problemy odbiorców.
  • Ułatw dodawanie i usuwanie filtrów.
  • Unikaj błędnych danych wejściowych, dających zerowymi wyniki wyszukiwania.

Sortowanie

Łatwe sortowanie pomaga uściślić wyszukiwanie produktów, co prowadzi do szybszej realizacji transakcji.

Większość odnoszących sukcesy marek e-commerce rozumie tę zasadę, dzięki czemu sortowanie na ich platformach jest bezbolesne. Pomaga także szczególnie tym kupującym, którzy nie są do końca pewni, czego chcą, a sklep posiada dużą liczbę produktów.

Sortowanie zmienia kolejność wyboru produktów zgodnie z intencjami kupujących, na przykład umieszczając tanie produkty nad drogimi (sortowanie po cenie: od najtańszych do najdroższych), aby umożliwić kupującym szybkie przeanalizowanie swoich wyborów.

WAŻNE WSKAZÓWKI:

  • Dodaj atrybut sortowania po cenie, aby pomóc kupującym szybko znaleźć produkty adekwatne do ich budżetu.
  • Zaimplementuj dodatkowe atrybuty sortowania, np.: dostępność, popularność, marka, ocena.
  • Zezwalaj użytkownikom na wybór liczby produktów, które chcą na stronie, aby rozwiązać problem przeciążenia wyborem.

Prezentacja produktów na stronie kategorii

Dobrze dobrane i uporządkowane informacje pozwolą użytkownikom podejmować świadome decyzje dotyczące produktów bez odwiedzania karty produktu. Zwłaszcza w przeglądarkach mobilnych, gdzie liczy się każde kliknięcie, jeśli połączenie internetowe jest słabe, a otwieranie wielu kart w celu porównywania produktów jest bardziej kłopotliwe niż na komputerach, użytkownicy oczekują, że listy produktów będą zawierały wystarczająco dużo różnicujących informacji, aby mogli w pełni zrozumieć, czy dany produkt jest wart kliknięcia.

Przydatne informacje wyróżniające dla każdej listy produktów powinny obejmować co najmniej:

  • Zwięzłe nazwy zawierające ważne i znaczące cechy produktu.
  • Zdjęcia wystarczająco duże, aby zidentyfikować znany przedmiot i pokazać różnice między przedmiotami.
  • Wskazanie innych dostępnych kolorów, stylów lub opcji.
  • Cenę!

Niektóre witryny dostarczają jeszcze więcej informacji, wykraczając poza te podstawowe wymagania. Użytkownicy to doceniają, ponieważ mogą zdobyć dalszą wiedzę o przedmiocie przed podjęciem decyzji o wczytaniu nowej strony.

Dodatkowe informacje o produkcie, które mogą być pomocne dla użytkowników, obejmują:

  • Oceny klientów.
  • Ikony lub podobne oznaczenia oznaczające przedmioty jako popularne, nowe, w sprzedaży itd.
  • Informacje o dostępności (w magazynie lub dostępne w pobliskim sklepie fizycznym; dostępne rozmiary, warianty jeśli dotyczy).
  • Link do narzędzia szybkiego podglądu, aby wyświetlić krótki opis produktu i inne szczegóły bez ładowania nowej strony.
  • Alternatywne zdjęcia produktów dostępne po najechaniu kursorem lub kliknięciu karuzeli.
infografika: Jak przygotować podstronę kategorii produktów w sklepie internetowym.
Infografika: Jak przygotować podstronę kategorii produktów w sklepie internetowym.
pobierz pdf

Optymalizacja podstrony kategorii

Wdrażanie najlepszych praktyk SEO podczas optymalizacji stron kategorii to prosty sposób na zwiększenie konwersji.

Tworzenie bezproblemowego doświadczenia użytkownika składa się z kilku elementów:

  • Szybkość ładowania: Szybkość jest bardzo ważnym czynnikiem rankingowym według Google (przeczytaj więcej we wpisie na temat Core Web Vitals). Dlatego ważne jest, aby zoptymalizować prędkość ładowania strony kategorii.
  • Hierarchia witryny: Postępuj zgodnie z zasadą 3 kliknięć. Oznacza to, że użytkownicy powinni być w stanie znaleźć każdą informację na Twojej stronie za pomocą nie więcej niż trzech kliknięć. Jednym ze sposobów na zoptymalizowanie swojej strony pod kątem zasady 3 kliknięć jest zbudowanie efektywnej hierarchii kategorii produktów e-commerce. Zacznij od zestawu szerokich, głównych kategorii produktów. Dodaj jeden lub dwa poziomy podkategorii poniżej. Im niższa kategoria, tym bardziej jest ona specyficzna.
  • Opis kategorii: Napisz szczegółowe i zoptymalizowane opisy kategorii, używając powiązanych słów kluczowych. Każde znane narzędzie SEO może Ci w tym pomóc, ale możesz też osiągnąć świetne (i darmowe!) rezultaty dzięki funkcji autouzupełniania w Google.
  • Linkowanie wewnętrzne i breadcrumbs: Linkuj do podkategorii z opisu kategorii oraz informuj użytkownika, w którym miejscu się znajduje. Implementując breadcrumbs na górze strony połączysz wszystkie strony ułatwi to kupującym poruszanie się po kategoriach i odkrywanie Twoich produktów.
  • Optymalizacja słów kluczowych: Wybierz odpowiednie słowa kluczowe dla danej kategorii. Ponadto, biorąc pod uwagę konkurencyjność niektórych słów kluczowych, spróbuj znaleźć alternatywne słowa kluczowe, które zmaksymalizują szansę bycia znalezionym przez wyszukiwarki.

Dowiedz się więcej o optymalizacji e-commerce z artykułu Optymalizacja SEO sklepu internetowego, szczegółowo opisującego jaka powinna być strategia SEO, aby sklep sprzedawał.

Podsumowanie

Projekt i optymalizacja strony kategorii wymaga wiele poświęcenia i czasu.

Stosowanie ogólnych reguł prowadzi do stworzenia sklepu o współczynnikach konwersji wyższych niż średnia. Ale dopiero optymalizacja i testy A/B stron kategorii prowadzą do wyników ponadprzeciętnych.

Należy pamiętać, że branże i produkty wymagają często zastosowania indywidualnego podejścia. Dlatego nie warto ślepo kopiować istniejących rozwiązań. Trzeba je dostosować do swojej marki i potrzeb użytkowników.

Co to jest konwersja i współczynnik konwersji – jak je zmierzyć i zwiększyć

Co to jest konwersja?

Stworzyłeś swoją stronę po coś. Witrynę firmową, żeby przyszli klienci Cię wyszukiwali i przesyłali zapytania ofertowe. Sklep, żeby kupowali produkty. Zdecydowanie nie było Twoim celem, żeby po wejściu na stronę Internauci poklikali chwilę i wyszli, a za moment zapomnieli o odwiedzinach.

Mówiąc inaczej, uruchomiłeś stronę, żeby użytkownicy dokonywali konwersji, czyli robili rzeczy na których Ci zależy.
Konwersją jest każde działanie osoby odwiedzającej stronę internetową, do którego chcemy skłonić użytkownika poprzez treść, wygląd i działanie strony. Każde inne działanie konwersją nie jest.

Konwersje mikro i makro – czym się różnią?

Konwersje rzadko wiążą się z wykonaniem jednego kroku.

Trochę przypominają bieg maratoński. Ktoś kto przebiegł całą trasę, może powiedzieć „przebiegłem maraton”. Ale jeśli będzie chciał opowiedzieć więcej, dowiesz się, że najpierw przebiegł pierwszy kilometr, dobiegł do piętnastego, z trudem osiągnął zakręt na czterdziestym… Przebiegł maraton i przebiegł któryś kilometr. Niby to samo bieganie, ale coś innego znaczy.

Makrokonwersja – co to?

Wróćmy do sprzedaży w sklepie internetowym. Sprzedaż produktu jest zwieńczeniem współpracy z klientem. W momencie zakończenia płatności dokonała się konwersja. Ze względu na to, że osiągnięty został jeden z głównych celów istnienia sklepu, na dodatek wynikający z ciągu wcześniejszych zdarzeń mówimy, że dokonała się makrokonwersja.

Przykłady makrokonwersji:

  • sprzedaż produktu,
  • przesłanie zamówienia na produkt lub usługę,
  • umówienie terminu realizacji usługi,
  • złożenie zapytania ofertowego,
  • zaproszenie do złożenia oferty.

Mikrokonwersje – drobne interakcje

Żeby doszło do makrokonwersji, musi zajść ciąg drobniejszych zdarzeń. Niekoniecznie muszą się wydarzyć wszystkie, niekoniecznie w konkretnej kolejności. Na pewno są to jednak wydarzenia i sytuacje, które przyczynią się do wystąpienia (makro)konwersji.

Według badań potrzeba od kilku do nawet kilkunastu kontaktów potencjalnego klienta z marką sprzedawcy albo produktu, żeby doszło do sprzedaży. Użytkownik, który odwiedza witrynę internetową, lecz nie dokonuje zakupu być może potrzebuje czasu lub argumentów, by podjąć decyzję o wydaniu pieniędzy. Część zachowań użytkowników na stronie wiąże się z procesem decyzyjnym klienta. I to są właśnie mikrokonwersje.

Przykłady mikrokonwersji:

  • użycie wyszukiwarki na stronie,
  • zasubskrybowanie newslettera,
  • użycie przechowalni produktów,
  • dodanie produktu do koszyka,
  • użycie porównywarki produktów,
  • przegląd szczegółowych danych produktu,
  • wyświetlenie określonej liczby podstron,
  • przeglądanie strony przez określony czas,
  • przegląd ocen i komentarzy,
  • pobranie specyfikacji produktu lub innych dokumentów,
  • zapytanie dotyczące produktu przez formularz kontaktowy lub czat,
  • odtworzenie multimediów na stronie.
infografika: Co to jest konwersja - jak ją zmierzyć, jak ją zwiększyć.
Infografika: Co to jest konwersja – jak ją zmierzyć, jak ją zwiększyć.
pobierz pdf

Współczynnik konwersji – czym jest?

Nawet jeśli jeszcze dotąd oficjalnie nie wiesz co to jest współczynnik konwersji, to na pewno się domyślasz. Miejmy to za sobą: współczynnik konwersji, albo inaczej wskaźnik konwersji, to liczbowy parametr, który mówi jaka część osób odwiedzających Twoją stronę internetową, zrobiła to, na czym Ci zależy.

Inaczej rzecz ujmując to prosty wskaźnik określający jak skuteczna w przekonywaniu ludzi do konkretnych działań jest strona. Im większy odsetek odwiedzających serwis robi to czego oczekuje od nich właściciel strony, tym bardziej strona jest efektywna.

Jak wyliczyć współczynnik konwersji?

Wzór na współczynnik konwersji przedstawia się następująco:

(liczba użytkowników, którzy podjęli pożądane działania / liczba użytkowników, którzy odwiedzili stronę) * 100%

PRZYKŁAD:

Celem konwersji jest, aby odwiedzający stronę internetową zapisał się do newslettera.
W ciągu miesiąca na stronę weszło 1.200 użytkowników, z których 260 zasubskrybowało newsletter. Współczynnik konwersji w rozpatrywanym okresie wynosi 21,7%.

Jaki powinien być współczynnik konwersji?

To bardzo często zadawane pytanie. Jaki współczynnik jest dobry? I jednocześnie jest to pytanie, na które nie da się odpowiedzieć zaczynając inaczej niż „to zależy”.

Skupmy się na e-commerce. Oczywiście dobrze, jeżeli wskaźnik jest jak najwyższy, ale wiele zależy od tego o jakich konwersjach mówimy. Jeśli jako cel mikrokonwersji ustalimy wejście przez użytkownika na stronę główną sklepu, osiągniemy bardzo wysokie wartości, być może bliskie 100%. Tyle, że taki wskaźnik będzie absolutnie niemiarodajny i zakłamujący rzeczywistość.

Drugim „to zależy” jest branża w jakiej działa sklep. Według różnych źródeł średni współczynnik konwersji, a właściwie makrokonwersji waha się między 1, a 5%. A to oznacza, że o dobrej, wysokiej konwersji dla sklepu internetowego możemy mówić przeciętnie od poziomu 10-12%.

Warto jednak pamiętać, że za wysoki wskaźnik konwersji nie odpowiada wyłącznie serwis internetowy, ale także świadomość marki budowana poza stroną (social media, telewizja, prasa etc.).

Odpowiadając na pytanie z tytułu rozdziału: jeśli współczynnik dla Twojego sklepu jest wyższy od średniej, nie jest źle. Jeżeli niższy, potraktuj to jako sygnał ostrzegawczy.

Informacje o średnich wartościach współczynnika konwersji wyszukasz w Internecie bez problemu. Przykładowe dane dla kilku branż znajdziesz w raporcie ADI Consumer Electronics Report 2020 (https://www.slideshare.net/adobe/adi-consumer-electronics-report-2020). Dotyczą one rynku amerykańskiego w roku 2019, ale nieźle pasują także do polskich i europejskich realiów.

Jak mierzyć współczynnik konwersji?

Aby móc dokonywać pomiaru jakiejkolwiek wielkości, musimy wybrać odpowiednie wskaźniki UX i dysponować narzędziami do ich obróbki. W przypadku mierzenia wskaźnika konwersji bodajże najpopularniejszym wyborem jest Google Analytics.

Narzędzie w pierwszym kontakcie (niekiedy w kilku pierwszych kontaktach ;)) sprawia wrażenie dość skomplikowanego. Jednak, kiedy zrozumiesz jego logikę, możesz bardzo szybko zacząć z niego korzystać.

Jeżeli samodzielnie posługujesz się Google Analytics ustaw cele konwersji, poczekaj aż zgromadzi się odpowiednia ilość danych i przystąp do analizy raportów. Jeżeli zlecasz obsługę Google Analytics współpracownikom albo firmie zewnętrznej, zapamiętaj jakie masz możliwości definiowania celów. Pomoże to w świadomym formułowaniu oczekiwań wobec pomiarów.

Cele konwersji dostępne w Google Analytics to:

  • miejsce docelowe,
  • czas trwania,
  • strony/ekrany na sesję,
  • zdarzenie.

Przekładając opcje na pomiar i analizę typowych mikrokonwersji zauważ, że poszczególnym pożądanym działaniom odpowiadają różne cele. Na przykład cel „zasubskrybowanie newslettera” rejestrowany jest jako odwiedzenie strony z formularzem do zapisu, zaś „pobranie karty katalogowej produktu” jako zdarzenie.

Jakie czynniki wpływają na konwersję?

Projektując stronę o przeznaczeniu biznesowym warto pamiętać, że jej zadaniem jest prowadzenie do konwersji. W przypadku istniejącego serwisu, który nie przynosi spodziewanych korzyści warto zastanowić się nad podniesieniem współczynnika konwersji.

W obydwu sytuacjach trzeba mieć świadomość co zwiększa prawdopodobieństwo konwersji, co sprawia, że użytkownik składa zamówienie, albo płaci za produkt.
Na konwersję wpływają te same czynniki, które powodują, że dany serwis ma wysoką użyteczność dla odwiedzającego, czyli estetyka, czytelność, zrozumiałość i łatwość użycia.

Wygląd strony

Zdanie na temat odwiedzanej po raz pierwszy witryny wyrabiamy sobie bardzo szybko.

I ten odbiór strony ma bezpośrednie przełożenie na konwersje. Jeśli użytkownik odbiera szatę graficzną jako dopasowaną do siebie, jego skłonność do pozostania na stronie i wykonywania kolejnych czynności rośnie.

Starannie dobrane i przygotowane do publikacji materiały graficzne, przemyślana typografia, kojarzące się z treścią ikony, dobrze przygotowane Call To Action, to kolejne elementy zapraszające do korzystania z serwisu.

Intuicyjna i wygodna nawigacja

Strony zawierające dużo treści i prowadzące klienta do makrokonwersji w wielu krokach wymagają perfekcyjnej zaprojektowanej nawigacji. Klient musi jednocześnie poruszać się jasną, nie pozostawiającą wątpliwości ścieżką i mieć możliwość wyboru.

Realizacja tych prostych założeń nie zawsze jest łatwa, ale zależność między wygodą poruszania się po sklepie internetowym, a liczbą sfinalizowanych sprzedaży jest jednoznaczna.

Poprawność językowa i dostosowanie do grupy docelowej

Kolejnym czynnikiem wpływającym na konwersję jest warstwa językowa. Poczynając od doboru treści i rozmieszczenia informacji, a kończąc na poprawności językowej. Być może część użytkowników nie zwróci uwagi na błędy ortograficzne lub gramatyczne, jednak dla wielu odbiorców stanowić one będą czynnik zmniejszający zaufanie do marki i produktu.

Personalizacja UX, a więc dostosowanie języka treści do grupy docelowej również ma kolosalny wpływ na konwersję. Zrozumiałość komunikatów przekłada się bezpośrednio na chęć do posługiwania się daną stroną internetową.

Szybkość ładowania i poprawność działania

Inną grupą czynników, które mogą zaważyć na wartości współczynnika konwersji są kwestie techniczne. Użytkownicy chcą, aby strona wczytywała się szybko i działała bezbłędnie. Jest to na tyle ważny czynnik, że Google zdecydował się traktować go jako element wpływający na pozycję strony w wynikach wyszukiwania. Więcej na ten temat dowiesz się z wpisu poświęconego Core Web Vitals.

Użytkownicy oczekują też, że w sytuacji gdy pojawi się błąd, dostaną jasny i zrozumiały komunikat co mają zrobić, żeby kontynuować to, po co na stronę przyszli. Obsługa sytuacji nietypowych jest o tyle ważna, że wiele zachowań witryny internetowej traktowanych przez odwiedzającego jako błąd, jest w rzeczywistości reakcją na pomyłkę użytkownika. Przykładami jest wpisanie w przeglądarce adresu nieistniejącej podstrony, dodanie ujemnej liczby produktów do koszyka etc.

Poczucie bezpieczeństwa

Kolejny wewnętrzny czynnik, którego wpływ na konwersję jest często niedoceniany to poczucie bezpieczeństwa klienta. Użytkownik widzący ostrzeżenie o braku certyfikatu SSL zaczyna obawiać się o swoje dane osobowe. Potencjalny kupujący, który nie rozumie regulaminu sklepu i zasad zwrotu towarów niepokoi się, czy nie poniesie strat, jeżeli nie spodoba mu się dostarczony produkt. Zaniedbania takie jak wymienione mają znaczny udział w obniżaniu wskaźnika konwersji.

SEO

Last but not least to pozycja w wyszukiwarkach. Trzeba pamiętać, że aby konwersja przekładała się w widoczny sposób na przychody należy zadbać o dopływ użytkowników na stronę. Dlatego nie można zapominać o SEO sklepu internetowego, którego efekty skalują efekt biznesowy.

Czym jest optymalizacja współczynnika konwersji?

Jeżeli dokonujemy pomiaru wskaźników konwersji i nie jesteśmy zadowoleni z ich wartości, naturalnym działaniem jest próba ich podniesienia. Tym bardziej w sytuacji, w której mamy wiedzę na temat czynników wpływających na chęć odbiorców na aktywne korzystanie ze strony.

Każda modyfikacja wyglądu, treści i działania serwisu, na przykład sklepu internetowego, mająca na celu poprawę jej skuteczności biznesowej jest optymalizacją współczynnika konwersji.

Jak zwiększyć współczynnik konwersji?

Brak jednej recepty na poprawę wskaźnika konwersji. Wynika to zarówno z charakteru strony (sklep, blog specjalistyczny, witryna firmowa) jak i jakości projektu, na podstawie którego została zbudowana oraz zawartych na niej treści.

Chcesz podnieść współczynnik konwersji swojego sklepu?

Zleć nam przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Jeśli jeszcze nie jesteś zdecydowany na zlecenie przeprowadzenia audytu zapoznaj się z poniższymi poradami. Ich wdrożenie nie wymaga gruntownej przebudowy serwisu ani całego biznesu. Jeśli przyniosą efekt, jeśli znacznie wzrośnie liczba konwersji to świetnie. Jeżeli nie, zamów audyt UX, bo prawie na pewno problemy z Twoją stroną są poważniejsze.

Prowadź newsletter

Newsletter jest efektywnym sposobem na podtrzymywanie kontaktu z potencjalnym klientem. Jeżeli użytkownik strony będzie otrzymywał od Ciebie co jakiś czas interesujące i wartościowe z jego punktu widzenia informacje, będzie również odwiedzał stronę. I z każdą wizytą będzie rosła szansa na to, że dokona ważnej biznesowo konwersji.

Prowadź blog

Dostarczanie wartościowych treści za pomocą bloga jest jednym z najskuteczniejszych sposobów zwiększania liczby konwersji. Jeżeli jesteś w stanie regularnie dzielić się konkretną, sprawdzoną wiedzą z użytkownikiem, po pewnym czasie staniesz się istotnym źródłem informacji z branży. A stąd tylko krok do zapytań, zamówień i zleceń.

Używaj Wezwań Do Działania (Call To Action)

CTA mają bardzo duży wpływ na współczynnik konwersji. Użytkownik serwisu, dostaje przy pomocy wezwania do działania, propozycję konkretnego działania, wspartego często obietnicą natychmiastowej korzyści.

Więcej na temat tworzenia i stosowania CTA dowiesz się z wpisu Call To Action – co to jest i jak powinno wyglądać?

Dlaczego powinieneś wyznaczyć cele konwersji?

Udało nam się omówić podstawowy zakres zagadnień dotyczący konwersji, jej mierzenia i optymalizacji. Pozostają tylko pytania: dlaczego to robić i czy warto?

Naszym zdaniem odpowiedzi brzmią: „żeby biznes przynosił maksymalne możliwe efekty” i „tak, warto”. Ale, aby te odpowiedzi były prawdziwe nie można działać po omacku. Konieczne jest określenie odpowiednich celów konwersji.

Jak określić swoje cele konwersji?

Cele konwersji powinny przede wszystkim być dobrze skorelowane z prowadzonym biznesem. Makrokonwersje powinny wiązać się z transakcją, lub „być blisko” niej. Mikrokonwersje powinny odnosić się do istotnych kroków w procesie zakupu, który przemierza klient.

Tylko takie zdefiniowanie celów zapewni, że uzyskiwane z raportów informacje dostarczą wiedzy o ogólnym stanie witryny i pozwolą na optymalizację współczynników, a właściwie procesów biznesowych.

Poniżej przedstawiam dwa zestawy celów makro- i mikrokonwersji dla e-commerce i biznesów usługowych. Nie są to oczywiście listy kompletne, ani uwzględniające specyfikę konkretnych biznesów. Warto się im jednak przyjrzeć i potraktować choćby jako inspirację lub checklistę przy tworzeniu własnej listy celów.

NASZA REALIZACJA

Sklep z odzieżą i akcesoriami marki Assos

Projekt i wdrożenie dla Naszosie.pl

PORTFOLIO

Cele dla sklepu internetowego

Makrokonwersje:

  • dodanie produktu do koszyka,
  • dodanie produktu do przechowalni,
  • zatwierdzenie płatności za produkt.

Mikrokonwersje:

  • wyszukiwanie produktu,
  • przegląd karty produktu,
  • dodanie produktu do porównywarki,
  • porównanie produktów,
  • dodanie produktu do przechowalni,
  • dodanie produktu do listy życzeń,
  • przegląd komentarzy i opinii.

Cele dla biznesu usługowego

Makrokonwersje:

  • złożenie zamówienia na wykonanie usługi,
  • zapytanie o koszt lub inne parametry usługi,
  • wypełnienie formularza wyceny.

Mikrokonwersje:

  • wyszukiwanie usługi,
  • dłuższy czas spędzony na stronie z opisem usługi,
  • użycie kalkulatora do samodzielnej wyceny,
  • wejście na podstronę z warunkami świadczenia usługi,
  • kontakt z infolinią,
  • przegląd komentarzy i opinii.

Podsumowanie

Konwersja to cel, do którego została stworzona strona internetowa. To działanie, którego oczekujemy od użytkownika. Mimo tego, że zasady tworzenia serwisów w taki sposób, aby miały wysokie współczynniki konwersji są znane, w praktyce nie jest łatwo zaprojektować i wdrożyć efektywną witrynę.

Niskie współczynniki konwersji praktycznie zawsze przekładają się na spadek sprzedaży w sklepie internetowym. I właśnie przede wszystkim z tego powodu, warto mierzyć współczynniki dla odpowiednio dobranych celów, a następnie na ich podstawie podnosić jakość serwisu.

Mierniki UX – jak mierzyć poziom satysfakcji użytkowników?

Czym są mierniki UX?

Nie zawsze trzeba przeprowadzić szereg badań z użytkownikami, aby dowiedzieć się, czy nasz produkt dobrze sobie radzi. Wiele można się dowiedzieć na podstawie twardych danych, które dają nam obraz postępu naszej pracy. Mierniki User Experience są to zatem wartości liczbowe wykorzystywane do zobrazowania doświadczeń użytkowników.

Dlaczego mierzenie doświadczeń użytkownika jest ważne?

Mierniki UX stanowią świetne uzupełnienie badań z użytkownikami. Warto dobrać odpowiednie dla siebie mierniki i monitorować ich zachowanie. Dzięki temu będziemy na bieżąco, z tym, jak użytkownicy radzą sobie z naszym produktem.

Jeśli pracujemy dla większej organizacji, to wprowadzenie wskaźników UX jest dobrym sposobem na zaprezentowanie namacalnych korzyści jakie płyną z projektowania zorientowanego na użytkownika. Dzięki metrykom projektanci mogą mieć również większą siłę przebicia w firmie, ponieważ wartości liczbowe są często bardziej zrozumiałe i przekonujące dla większości osób niż miękkie dane takie jak np. opinie.

Mierniki UX służyć też mogą jako narzędzie wspomagające audyt UX. Dostarczają bowiem konkretnych informacji o postępach realizacji i efektach zmian wynikających z zaleceń poaudytowych.

UX ROI – zwrot z inwestycji w działania UX

Jednym z mierników UX jest ROI, czyli Return on Investment, co oznacza zwrot z inwestycji. ROI z UX to najprościej część inwestycji, która się zwraca dzięki pracy projektantów UX. Ten wskaźnik odpowiada na pytanie, co dostaniemy w zamian za inwestycję w projektowanie doświadczeń użytkownika. ROI zazwyczaj liczy się w wartościach pieniężnych, ale czasem również przy pomocy wielkości konwersji, kosztach supportu, liczbie klientów czy też produktywności zespołu.

ROI z UX ukazuje, że projektowanie doświadczeń ma realny wpływ na biznes. I ten wpływ można właśnie zmierzyć.

Mierniki UX, a KPI biznesowe

Na potrzeby zobrazowania działań i postępów firmy potrzebujemy szeregu wskaźników. Różne działy będą zwracały uwagę na różne zjawiska i będą inaczej mierzyły swoją efektywność. Tak samo mierniki UX oraz KPI biznesowe będą się od siebie różniły i pełniły odmienne funkcje w organizacji .

Czym się różnią wskaźniki UX od KPI?

Wskaźniki UX są charakterystyczne dla pomiaru działań związanych z User Experience. Będą mierzyły doświadczenia użytkowników na stronie lub w aplikacji na przestrzeni czasu. Może to być na przykład czas, w jakim użytkownik wykonał jakieś zadanie lub popełniona przez niego liczba błędów.

Za to KPI biznesowe odzwierciedlają raczej ogólne cele firmy takie jak wzrost przychodów, średnią wartość transakcji czy skuteczność działań sprzedażowych.

Jak wybrać kluczowe wskaźniki UX dla Twojego biznesu?

Aby dobrze wybrać wskaźniki UX należy zastanowić się, jakie są cele firmy, na które wpływ ma zespół projektantów UX. Organizacji może zależeć na przykład na liczbie zapisanych na newsletter użytkowników, wysokiej częstotliwości kliknięć w daną ofertę lub w przypadku branży e-commerce liczbie sesji zakupowych zakończonych sukcesem.

Dopiero wiedząc, na jakich danych najbardziej nam zależy, możemy dobrać odpowiednie wskaźniki.

Jak określić poziom sukcesu satysfakcji użytkownika?

Załóżmy, że chcesz poprawić liczbę użytków, którzy błędnie wypełniają formularz kontaktowy. Jak poprawisz tę metrykę?

Po analizie formularza odkrywasz, że większość błędów prawdopodobnie wynika ze złego opisania pól tekstowych. Poprawiasz więc formularz i wprowadzasz nowe rozwiązanie na stronie. W jaki sposób można stwierdzić, że twoje działania przyniosły jakiekolwiek skutki? Wystarczy, że zmierzysz, czy liczba błędnie wypełnionych formularzy zmniejszyła się po wprowadzeniu zmian. Porównując wskaźniki z przed i po wprowadzeniu zmiany możesz określić, w jakim stopniu Twoje rozwiązanie odniosło sukces.

infografika: Mierniki UX - jak mierzyć poziom satysfakcji użytkowników
Infografika: Mierniki UX – jak mierzyć poziom satysfakcji użytkowników.
pobierz pdf

Rodzaje mierników UX

Do naszej dyspozycji mamy mnóstwo wskaźników, dzięki którym możemy zmierzyć satysfakcję użytkownika i postępy w naszej pracy. Zazwyczaj dzieli się je na dwa rodzaje: behawioralne oraz oparte na opinii.

Rodzaj 1 – Behawioralne (co robią)

Ta grupa wskaźników opisuje w liczbach, jak użytkownik wchodzi w interakcję z witryną lub produktem i co robi najbardziej efektywnie. W dzisiejszych czasach dane te mogą być zwykle zbierane w pełni automatycznie, bez interwencji ankietera lub obserwatora. Jest to zatem dość prosty i niedrogi sposób na rozpoczęcie zbierania wskaźników UX.

Do behawioralnych mierników zaliczamy:

  • Współczynnik porzuceń
  • Liczba wyświetleń strony
  • Czas potrzebny na wykonanie zadania
  • Liczba zadań zakończonych sukcesem
  • Współczynnik błędów

Obserwacja wymienionych wyżej mierników niejednokrotnie sygnalizuje faktyczny spadek sprzedaży w sklepie internetowym z wyprzedzeniem. Spadająca liczba wyświetleń, rosnąca liczba porzuconych koszyków są wyraźną zapowiedzią słabszych wyników biznesowych.

Rodzaj 2 – Wskaźniki oparte na opinii (co mówią)

Ten rodzaj wskaźników mierzy, jak użytkownicy czują się lub co mówią przed, w trakcie oraz po interakcji z produktem i jak wpływa to na opinię o marce lub firmie. Możemy wyróżnić parę najbardziej popularnych mierników:

  • System Usability Scale (SUS) – 10 zdań z odpowiedziami w skali “Zdecydowanie się nie zgadzam” do “Zdecydowanie się zgadzam”
  • Net Promoter Score (NPS) – ilustruje satysfakcję użytkowników za pomocą jednego prostego pytania “ Z jakim prawdopodobieństwem polecisz usługę znajomemu?”. Odpowiedzi udzielane są w skali od 1 do 10.

Monitorowanie wskaźników UX

Niestety nie wystarczy tylko raz na jakiś czas zmierzyć parę danych, aby uzyskać wiarygodne wyniki świadczące o wydajności działań UX. Aby efektywnie określić poziom satysfakcji użytkowników należy mierzyć wybrane metryki w jednakowych odstępach czasu, na przykład co miesiąc. Dopiero wtedy możemy określić, czy nasze postępowania przynoszą założone skutki.

Mierniki UX – najczęstsze błędy przy monitorowaniu wskaźników UX

Zanim weźmiemy się za interpretowanie mierników UX, należy pamiętać, że trzeba to robić z rozwagą. Można czasem łatwo wyciągnąć zbyt pochopne i błędne wnioski. Wszystko bowiem zależy od kontekstu.

Zła interpretacja wskaźników

Jeden wskaźnik może oznaczać dwie zupełnie inne rzeczy w dwóch różnych sytuacjach. Na przykład wysoki współczynnik porzuceń występujący na stronie koszyka w sklepie internetowym może oznaczać, że w koszyku występuje jakiś problem, z którym użytkownicy nie mogą sobie poradzić. Należy wtedy bliżej przyjrzeć się tej stronie. Natomiast ten sam wskaźnik na stronie z potwierdzeniem płatności jest zupełnie naturalnym zjawiskiem i nie powinien wzbudzać obaw.

Pomijanie zewnętrznych czynników

Innym elementem, który należy wziąć pod uwagę przy interpretowaniu mierników UX są zewnętrzne wydarzenia niezależne od badanej strony internetowej lub aplikacji. Ten wysoki wskaźnik konwersji, który nagle zaobserwowałeś/aś może nie mieć nic wspólnego z działaniami zespołu UX. Może w tym czasie akurat firma wypuściła kampanię reklamową i nastąpił chwilowy przyrost liczby odsłon. Należy zatem wziąć pod uwagę okoliczności, aby rzetelnie zinterpretować wskaźniki.

Chcesz poprawić efektywność swojej witryny internetowej?

Zleć nam przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Metody mierzenia satysfakcji użytkowników

W zależności od tego, jakimi wskaźnikami chcemy się posługiwać, metody zbierania informacji będą się różniły. Można korzystać z ilościowych lub jakościowych danych do mierzenia tych wskaźników.

Metoda 1 – Narzędzia do mierzenia ruchu na stronie

Google Analytics, Fullstory, Hotjar są to przykłady programów, dzięki którym możemy zebrać wartościowe dane ilościowe opisujące ruch na stronie. Najczęściej będą wykorzystywane przy obliczaniu behawioralnych wskaźników UX, takich jak: współczynnik porzuceń czy wskaźnik konwersji.

Metoda 2 – Ankiety

Dobrą metodą na zebranie feedbacku od użytkowników jest przeprowadzenie krótkiej ankiety. O tym jak i kiedy przedstawić ją klientowi można przeczytać w naszym artykule Opinie klientów – dlaczego warto pytać.

Metoda 3 – Badania z użytkownikami

Jeśli zespół dysponuje czasem i budżetem, to warto cyklicznie przeprowadzać badania UX z użytkownikami. Najczęściej do określenia satysfakcji wykorzystuje się zadaniowe testy UX. Nie zawsze jednak muszą być one moderowane. Do dyspozycji mamy dużo internetowych narzędzi takich jak np. Lookback czy Loop11, dzięki którym możemy przeprowadzić o wiele więcej i częściej niemoderowanych badań.

Podsumowanie

Wskaźniki UX są świetnym sposobem na przedstawienie wyników pracy UX designerów w firmie. Dzięki nim możemy zaprezentować, że warto inwestować w projektowanie nastawione na użytkownika.

Pamiętajmy, że należy odpowiednio dobierać mierniki według unikalnych celów biznesowych organizacji oraz że najlepszym sposobem na określenie efektywności UX jest połączenie monitorowania wskaźników z badaniami z użytkownikami.

Jak zmniejszyć współczynnik odrzuceń w sklepie internetowym?

Co to jest współczynnik odrzuceń – Bounce Rate?

Współczynnik odrzuceń jest jedną z najważniejszych miar stosowanych w analizie ruchu na stronie.
Zgodnie z definicją Google:

Odrzucenie to sesja w witrynie ograniczona do jednej strony. W Analytics do odrzuceń zalicza się konkretnie te sesje, podczas których zostało uruchomione tylko jedno żądanie do serwera Analytics, np. gdy użytkownik wyświetla pojedynczą stronę w witrynie, a następnie opuszcza ją bez wywoływania w ramach tej sesji żadnych innych żądań wysyłanych do serwera Analytics.

Współczynnik odrzuceń to liczba sesji ograniczonych do jednej strony podzielona przez liczbę wszystkich sesji, czyli odsetek wszystkich sesji w witrynie, podczas których użytkownicy wyświetlali tylko jedną stronę, uruchamiając zaledwie pojedyncze żądanie do serwera Analytics.”

Jaki powinien być współczynnik odrzuceń? – dobry i zły Bounce Rate

Współczynnik odrzuceń na stronie interpretujemy różnie w zależności od charakteru i celu danej strony internetowej.

Jeśli chcemy, aby użytkownicy zobaczyli jak najwięcej podstron lub przeszli przez jakiś proces na stronie (np. zakupy), to należy unikać wysokiego współczynnika odrzuceń.

Jeżeli z kolei witryna składa się tylko z jednej strony i nie prowadzi nigdzie więcej (np. blog lub wizytówka), to wysoki współczynnik odrzuceń jest jak najbardziej normalnym zjawiskiem.

Współczynnik odrzuceń – gdzie szukać?

Jeśli zajmujemy się prowadzeniem sklepu internetowego, ważne jest, aby monitorować współczynnik odrzuceń na takich podstronach jak koszyk, strony z opisem produktów lub na stronie głównej. Jeśli zauważymy tam niepokojące statystyki, może to świadczyć o jakimś problemie. Musimy w takim przypadku poddać stronę z wysokim współczynnikiem odrzuceń analizie i ją poprawić. Być może na stronie głównej Call To Action jest za mało widoczne? Opis produktu nie jest przekonujący lub należy go uzupełnić o istotne informacje? Czy może użytkownicy nie mogą znaleźć pasującego sposobu dostawy i porzucają koszyk?

Jeśli chcesz się dowiedzieć więcej o tym, jak tworzyć efektywne i oryginalne opisy produktów dla swojego sklepu internetowego, to zapraszam do zapoznania się z artykułem Oryginalne opisy produktów w sklepie internetowym – jak tworzyć efektywne opisy produktów.

infografika: Jak zmniejszyć współczynnik odrzuceń w sklepie internetowym
Infografika: Jak zmniejszyć współczynnik odrzuceń w sklepie internetowym.
pobierz pdf

Dlaczego warto zadbać o niski współczynnik odrzuceń?

Niski współczynnik odrzuceń może być korzystny z wielu powodów. Szczególnie widać to w branży e-commerce, gdzie wysoki współczynnik odrzuceń przekłada się bezpośrednio na sprzedaż. Dlatego tak ważne jest zwrócenie uwagi i przyjrzenie się źródłom problemów na stronie.

Niższa sprzedaż w sklepie – niekorzystny wpływ na rentowność

W przypadku witryn e-commerce niski bounce rate wskazuje przede wszystkim na wyższą sprzedaż. Im więcej użytkowników pozostaje na stronie, tym większa szansa na dokonanie przez nich zakupu.

Wzrost kosztów pozyskania klienta

Powszechnie wiadomo, że o wiele taniej jest zatrzymać klienta na stronie niż walczyć o nowego. Dlatego tak wiele sklepów oferuje karty lub programy lojalnościowe.

O wiele trudniej i drożej jest zdobyć nowych klientów, którzy jeszcze nigdy nie byli na Twojej stronie. Dlatego ważne jest, aby ograniczać współczynnik odrzuceń i starać się, aby klienci zostali w sklepie jak najdłużej.

Wysoki współczynnik odrzuceń obniża pozycje w wyszukiwarce

Dużo porzuceń strony wpływa również negatywnie na pozycjonowanie Twojego sklepu. Jeśli użytkownicy porzucają często stronę, to algorytmy Google powodują, że wyświetla się ona niżej w wynikach. Niższy bounce rate to lepsza jakość strony i korzystniejsze pozycjonowanie.

Dlaczego potencjalni klienci opuszczają stronę? – geneza współczynnika odrzuceń

Eksperci wskazują na szereg czynników, które mogą wpłynąć na wysokość współczynnika odrzuceń. Na większość z nich tak naprawdę mamy wpływ. Przy pomocy analizy eksperckiej i wykonaniu audytu UX sklepu internetowego możemy zidentyfikować większość problemów na stronie i sprawić, by klienci na niej pozostawali i dokonywali zakupów.

Jak zmniejszyć współczynnik odrzuceń?

Aby dowiedzieć się, jak zniwelować współczynnik odrzuceń, musimy najpierw odnaleźć przyczynę, dla której użytkownicy opuszczają stronę i nie chcą robić zakupów.

Wypiszę teraz najważniejsze obszary, na których należy się skupić, gdy szukamy przyczyn wysokiego współczynnika odrzuceń.

Pierwsze wrażenie istotne dla zmniejszenia współczynnika odrzuceń

Pierwsze wrażenie jest bardzo ważne, jeśli chcemy zatrzymać klienta na naszej stronie. Większość (prawie wszyscy) użytkowników tylko pobieżnie skanuje pierwszą stronę i jeżeli w przeciągu kilku sekund nie znajdzie czegoś interesującego, zamyka witrynę.

Ważne, aby pierwsza strona, na jaką wchodzą miała przykuwające uwagę elementy takie jak np. CTA, zdjęcia lub promocje. Warto też zadbać o dobór kolorystyki na stronie, który wywoła pozytywne emocje użytkownika.

Remarketing – zadbaj o powracających klientów

Nawet jeśli użytkownik wyjdzie z Twojego sklepu, to nie do końca znaczy, że jest stracony. Postaraj się walczyć o powracających klientów za pomocą remarketingu, czyli rodzaju kampanii reklamowej prowadzonej m.in. za pomocą programu Google Ads. Polega ona na wykorzystywaniu plików cookie do reklamowania ostatnio przeglądanych produktów nawet po wyjściu z danego sklepu. Celem takiej kampanii jest przypomnienie klientowi o niedokończonych zakupach i w najlepszym wypadku doprowadzenie ich do sukcesu.

Skomplikowana droga zakupowa

Powodem, który odpowiada za największą liczbę porzuceń strony jest zbyt długi i skomplikowany proces zakupowy. Jeśli wiemy, że proces koszykowy będzie nieco długi, warto podzielić go na mniejsze etapy i dać znać użytkownikowi, na jakim etapie się właśnie znajduje i co musi jeszcze zrobić, zanim sfinalizuje transakcję.

Warto pamiętać o dobrze zaprojektowanym interfejsie, aby jeszcze bardziej nie komplikować sprawy. Czy ważne elementy są wyróżnione? Widać wszystkie informacje o zakupie? Czy użytkownik ma pełną kontrolę nad koszykiem? Ważne, aby mógł bez wychodzenia z koszyka na przykład zmienić liczbę zamawianych produktów lub zupełnie jakieś usunąć.

Wszystkie te elementy składają się na proces, który gładko prowadzi użytkownika do płatności.

Badania wykazały, że 26% osób porzucających koszyk nabyło później ten sam produkt, tylko że w innym sklepie (https://www.salecycle.com/blog/featured/10-fascinating-stats-cart-abandonment/). Jeśli użytkownik trafi na witrynę, w której obsługa koszyka będzie dla niego niewygodna, to prawdopodobnie znajdzie inne miejsce, gdzie zakup będzie o wiele łatwiejszy.

Chcesz poprawić efektywność swojego e-sklepu?

Zamów przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Problemy ze stroną wpływają na współczynnik odrzuceń

Kiedy prześladuje Cię wysoki współczynnik odrzuceń warto pomyśleć o UX. User experience ma znaczący wpływ na to, jak użytkownicy odbierają Twoją stronę i jak sprawnie się po niej poruszają. Na całokształt doświadczeń użytkownika składa się wiele czynników.

Czas ładowania strony

Szybkość ładowania strony wpływa bardzo znacząco na jej odbiór. Według badań, jeśli strona ładuje się 5 sekund, to prawdopodobieństwo jej porzucenia wzrasta o 90% (https://uxplanet.org/how-page-speed-affects-web-user-experience-83b6d6b1d7d7).

Opóźnienia w działaniu strony mogą spowodować, że użytkownik będzie miał poczucie braku kontroli. Skupi się na powolnym ładowaniu a nie na osiągnięciu zamierzonego celu takiego jak zrobienie zakupów. Znaczenie wpływu czasu wczytywania strony na odczucia użytkowników zostało uwzględnione wprost we wskaźnikach Core Web Vitals.

Nieczytelna szata graficzna

Warto pamiętać o spójnym i przejrzystym designie. Nie ma jednej recepty na estetyczny sklep internetowy. Warto pamiętać jednak o głównych zasadach takich jak: spójna kolorystyka, dobrze dostosowane wysokiej jakości zdjęcia i banery, czytelna czcionka, itp.

Również wyróżnienie najważniejszych informacji pomoże przyciągnąć uwagę klienta i poprowadzić go we właściwym kierunku. Więcej o tym, jak grafika pomaga zaskarbić klienta przeczytasz w artykule Ładny sklep internetowy – to się opłaca!.

Intuicyjne poruszanie się po stronie – korzystnie wpływa na Bounce Rate

“Don’t make me think”. Taki tytuł ma najpopularniejsza książka autorstwa Steve’a Kruga dla osób rozpoczynających przygodę z projektowaniem stron internetowych. Główna myśl zawarta w tej książce mówi o tym, aby interakcja człowieka ze stroną internetową była jak najbardziej wygodna i intuicyjna. Chodzi o to, żeby użytkownik nie musiał uczyć się najpierw, jak strona działa, tylko od razu mógł jej używać. Im bardziej intuicyjna strona i wygoda użytkowania, tym więcej kliknięć i zakupów.

Brak wiarygodności

Na wiarygodność sklepu internetowego składa się szereg czynników takich jak: certyfikaty SSL odpowiadające za bezpieczeństwo danych, obecność informacji kontaktowych, wyraźne zdjęcia, pełne opisy produktów oraz wiele innych. Użytkownicy zazwyczaj będą w stanie na pierwszy rzut oka określić, jeśli ze sklepem jest coś nie tak, nawet jeśli nie będą wiedzieli, o co dokładnie chodzi. Dlatego warto zadbać o spójny wygląd witryny, zamieścić regulamin zakupów lub opinie klientów. Sprawdź nasz artykuł Klienci Ci nie ufają? Jak budować zaufanie., aby dowiedzieć się więcej o tym, jak zyskać zaufanie swojej grupy docelowej.

Pop-upy i banery reklamowe – co za dużo to niezdrowo

Czy kiedyś zdarzyło Ci się lekko poirytować, gdy na stronie wyskoczyło niechciane okienko? Ja z pewnością tego doświadczyłam. Podczas gdy jeden popup z propozycją zapisu do newslettera jeszcze nie wydaje się taki szkodliwy, to należy pamiętać, że co za dużo, to niezdrowo. Klient, który próbuje dokonać zakupu nie powinien być rozkojarzony. Pop-upy i banery reklamowe powinny się pojawiać tylko w niektórych momentach. Miejscem, gdzie kategorycznie nie powinno ich być, to na przykład checkout. Kiedy klient jest już o krok od zakupu w naszym sklepie ważne jest, aby nie odciągać jego uwagi reklamami i okienkami – na to jest czas podczas przeglądania oferty.

Nie zapomnij o Mobile First Design

W dzisiejszych czasach coraz bardziej popularne jest robienie zakupów przez smartfona. Ułatwiają to między innymi zakupy przez platformy społecznościowe i aplikacje mobilne. Już właściwie każdy sklep, który chce dotrzeć do jak największego grona klientów ma wersję na telefon.

Jednak responsywny design stron www to nie tylko zmniejszenie obrazków. Należy również pamiętać o zaprojektowaniu intuicyjnej ścieżki zakupowej i odpowiedniej nawigacji, która będzie pasowała do różnego typu urządzeń.

Podsumowanie

Współczynnik odrzuceń nie musi być czymś z założenia złym. Jest to cenny wskaźnik, który może nam bardzo dużo powiedzieć o ruchu na stronie. Trzeba go interpretować w odniesieniu do danego sklepu internetowego. Jeśli zaobserwujesz wysoki bounce rate w swoim sklepie internetowym, w szczególności w koszyku, to warto zwrócić się do ekspertów i sięgnąć po ich radę. Jednym ze sposobów na zidentyfikowanie problemów na witrynie jest audyt UX, który wskaże obszary do poprawy.

Jak stworzyć skuteczny formularz kontaktowy

Strona Kontakt to ważny element w budowaniu relacji z Twoim klientem. Jej budowa i zawartość mogą różnić się w zależności od branży i tego co dana firma ma do zaoferowania. We wszystkich przypadkach powinieneś pamiętać, aby Twój klient miał wybór, a udostępnione mu możliwości kontaktu były dopasowane do jego potrzeb.

Dowiedz się jak stworzyć skuteczną podstronę „Kontakt”.

Wielu przedsiębiorców rezygnuje z udostępnienia formularza kontaktowego na swojej stronie. Twierdzą oni, że klient na przykład skopiuje adres e-mail, albo przejdzie do innych form kontaktu takich jak popularny teraz chatbot lub po prostu zadzwoni.

W dzisiejszym artykule opowiem, dlaczego warto odrzucić nasze prywatne przyzwyczajenia, nie wrzucać użytkowników do jednego worka i pochylić się nad formularzem kontaktowym. Podzielę się również kilkoma wskazówkami odnośnie jego budowy i zawartości.

Formularz kontaktowy – dlaczego warto zamieścić na stronie WWW?

Jeżeli masz wątpliwości, co do korzyści płynących z wdrożenia formularza kontaktowego, poniżej wymieniłam kilka najważniejszych punktów, które powinny przekonać Cię o jego sile.

Wzrost konwersji

Klienci, którzy wykażą zainteresowanie produktami i rozpoczną rozmowę z Tobą za pomocą formularza kontaktowego, bardzo często dokonają zakupu. Dlatego przemyślany, dobrze zaprojektowany i zaprogramowany formularz dostarczy odpowiedzi na pytanie jak zwiększyć konwersję w Twoim sklepie www.

Uporządkowanie komunikacji z klientem

Automatycznie posortujesz wiadomości od klientów, udostępniając w formularzu pole z wyborem tematu zapytania np. Dostępność produktu, Reklamacja / Zwrot, Płatności.

Automatyzacja odpowiedzi

Masz już uporządkowane tematycznie wiadomości, dlaczego więc nie skorzystać z automatycznie wygenerowanej odpowiedzi? Dzięki niej zapewnisz użytkownika, że wiadomość do Ciebie dotarła.  Dodatkowo nadasz jej numer referencyjny lub/i prześlesz pomocne linki.

Wygoda

Oczywiście wygoda klienta. Nie decyduj za użytkownika! Niech sam zdecyduje w jaki sposób chce się z Tobą skontaktować.

Zatrzymanie Klienta na stronie

Brak formularza kontaktowego wymusi na użytkowniku wyjście z Twojego sklepu i zalogowanie się do jego własnej poczty, co może skutkować automatycznym porzuceniem strony.

infografika: Dlaczego warto zamieścić formularz kontaktowy na stronie www
Infografika: Dlaczego warto zamieścić formularz kontaktowy na stronie ww.
pobierz pdf

Formularz kontaktowy – krok po kroku

Jak wspomniałam wcześniej, przemyślany, dobrze zaprojektowany i zaprogramowany formularz będzie miał bardzo duży wpływ na konwersję w Twoim sklepie. Ale co to właściwie oznacza?

Mogłoby się wydawać, że budowa formularzy jest bardzo standardowa, prosta i powielana od lat. Jednak – nie tylko naszym zdaniem – niekoniecznie powielane są dobre wzorce. Badania i statystyki od lat potwierdzają, że tak jak w przypadku innych kluczowych elementów sklepu – budowa, wygląd i działanie formularza kontaktowego powinny być precyzyjnie dopasowane do potrzeb użytkownika.

Formularz kontaktowy na stronie powinien być czytelny i zrozumiały

Po pierwsze zadbaj o intuicyjny i klarowny projekt. Powinieneś umieścić formularz w łatwo dostępnym miejscu. Dobrze, jeśli zadbasz też o to, by łatwo się nim posługiwać. Budowa formularza będzie wymagała od Ciebie zwrócenia uwagi na wiele aspektów UX design oraz UI związanych z zachowaniami użytkowników w Twoim sklepie.

Niezależnie od tego kim jest Twój klient zwróć szczególną uwagę na czytelność. Pola powinny być opisane w klarowny sposób i rozmieszczone według logicznego oraz intuicyjnego wzorca. Użytkownik nie powinien zastanawiać się, czego od niego oczekujesz. Np. pytanie o nazwisko powinno znajdować się zaraz po pytaniu o imię.

Prostota kluczem do skutecznego formularza kontaktowego

Formularz kontaktowy przede wszystkim powinien być prosty i przejrzysty. Użytkownicy klikający w zakładkę kontakt najczęściej chcą w szybki sposób otrzymać interesujące ich informacje, rozwiać wątpliwości lub mają pytania odnośnie zamówienia / produktu. Ważne jest, żeby nie zniechęcać ich do skorzystania z formularza zbędnymi ozdobnikami, nieczytelną czcionką i niewyraźnie zaznaczonymi polami.

Duże odstępy między polami i opisy umieszczone nad nimi wprowadzą porządek i ułatwią czytanie. Należy również pamiętać o przycisku akcji, który pozwala na przesłanie formularza. Wyraźne oznaczenie i opisanie przycisku sprawi, że nie będzie wątpliwości do czego służy.

Układ formularza kontaktowego – poziomo czy pionowo?

Jeśli chodzi o układ formularza, bardziej intuicyjny i przyjazny dla użytkownika jest układ pionowy. Jeżeli martwisz się, że nie zmieścisz wszystkich niezbędnych pól, rozłóż proces na kroki, a formularz na mniejsze formularze. Nie zapomnij poinformować użytkownika o liczbie kroków do przejścia! W tej sytuacji dobrą formą komunikacji jest pasek informujący o miejscu formularza, w którym znajduje się użytkownik i liczbie etapów pozostałych do przejścia. Pasek pozwala nie tylko odnaleźć się w dużym formularzu, ale też ocenić czas, który będzie potrzebny do ukończenia.

Formularz kontaktowy – jaka liczba pól do wypełnienia?

Im krócej tym lepiej – długie formularze, które wymagają podania wielu danych osobowych, zniechęcają użytkowników. Hubspot przeprowadził badania na stronach swoich klientów (https://blog.hubspot.com/blog/tabid/6307/bid/6746/Which-Types-of-Form-Fields-Lower-Landing-Page-Conversions.aspx). W podsumowaniu dokładnie opisano jak duży wpływ na konwersję w sklepie ma liczba pól formularza i typ stosowanych pól. Użytkownicy najchętniej korzystają z formularza zawierającego od 3 do maksymalnie 5 pól. Autor badań zauważa również, że klienci znacznie bardziej entuzjastycznie reagują na możliwości wyboru odpowiedzi w polu rozwijanym, niż skorzystanie z pola tekstowego do samodzielnego wypełnienia.

Chcesz zlecić wykonanie profesjonalnej strony www?

Prześlij brief, aby otrzymać wycenę

Wypełnij formularz, skontaktujemy się z Tobą

Gdzie umieścić formularz kontaktowy na stronie WWW?

Oczywiste dla nas wszystkich jest, że formularza kontaktowego będziemy szukać na stronie kontakt.

Nie jest to jednak jedyne miejsce, w którym użytkownik może szukać sposobu dotarcia do nas lub mieć potrzebę kontaktu z nami. Kolejną lokalizacją, w której równie często umieszcza się informacje kontaktowe jest stopka na stronie www. Link do formularza kontaktowego umieszczony pod danymi firmy będzie równie skuteczny jak kliknięcie w stronę kontaktu.

Dobrze sprawdzają się również formularze umieszczone na innych stronach, np. głównej lub karcie produktu, wzywające do konkretnego działania, przykładowo: „Potrzebujesz szczegółowej oferty?” „Zapytaj o produkt” itp. (przeczytaj nasz artykuł dotyczący Call To Action)

Komunikaty, ostrzeżenia i błędy w formularzu kontaktowym

Myślisz, że w Twoim formularzu nie da się popełnić błędu? Błąd!

Informuj użytkownika nie tylko o tym, że popełnił błąd. Pokazuj również gdzie, w którym miejscu formularza kontaktowego. Informując użytkownika, dlaczego nie może wysłać wiadomości, podkreśl pole, w którym wystąpił błąd i dodaj informację co dokładnie chciałbyś, żeby poprawił.

Komunikaty powinny być krótkie i zrozumiałe. Ponadto powinny pojawiać się na żywo w trakcie wypełniania formularza. Nie każ też użytkownikowi wracać na górę strony po wypełnieniu wszystkich pól.

Kolejnym komunikatem, którego użytkownicy wręcz oczekują, jest potwierdzenie pozytywnego zakończenia procesu. Po wysłaniu formularza, nie przenoś automatycznie użytkownika na stronę główną czy stronę kontaktu. Klient chce otrzymać potwierdzenie, że jego wiadomość została wysłana pomyślnie. A mówiąc przy okazji: warto w takiej sytuacji wyświetlić okno z podziękowaniem za kontakt. Warto dodać też informację, że wiadomość do nas dotarła. I, chociaż to nie dotyczy bezpośrednio formularza kontaktowego, warto przesłać maila z potwierdzeniem na skrzynkę klienta.

infografika: Formularz kontaktowy - krok po kroku
Infografika: Formularz kontaktowy – krok po kroku.
pobierz pdf

Formularz kontaktowy a RODO – na co uważać?

Bardzo ważnym elementem formularza kontaktowego jest zgoda na przetwarzanie danych osobowych, w której informujemy, kto, w jakim celu i w jakim zakresie będzie wykorzystywał przesłane dane. Zgodnie z obowiązującym prawem jesteśmy zobligowani do udostępnienia takich informacji użytkownikowi. Najbardziej popularnym rozwiązaniem jest umieszczenie na końcu formularza checkboxu z treścią zgody.

ilustracja: formularz kontaktowy, użycie checkbox, RODO

Pamiętaj, że checkboxy powinny zawierać wszystkie informacje dotyczące przetwarzania danych oraz na każdy z Twoich celów niezbędna jest osobna zgoda. Przykładowo: jeżeli poza odpowiedzią na wiadomość chciałbyś wysyłać do klienta newsletter, taki cel powinien być opisany osobno w zgodzie na przetwarzanie danych w celach marketingowych.

Formularz wymagający podania przez użytkownika danych osobowych, powinien również kierować do polityki prywatności. Umieszczenie obligatoryjnego checkboxu potwierdzającego zapoznanie się z polityką prywatności zapewni nam potwierdzenie świadomego wyrażenia zgody na przetwarzanie danych osobowych zgodnie z Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z 27.04.2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (ogólne rozporządzenie o ochronie danych) (Dz.Urz. UE L 119, s. 1).

Optymalizacja i testowanie formularza kontaktowego

Testuj, testuj i jeszcze raz testuj swój formularz kontaktowy. To co świetnie działa w jednej firmie, nie musi być dobre dla innej, nie musi być skuteczne w Twojej. Za pomocą testów dowiesz się, co działa, a co sprawia problemy Twoim klientom. Testuj to, dopóki liczba kontaktów z formularzy nie będzie stale wzrastać! Ważnym narzędziem, którego warto używać w testach są wskaźniki UX.

Jednym z polecanych narzędzi do testowania są testy A/B, gdzie możesz wypróbować różne układy swojego formularza na wybranych grupach odbiorców. Testować możesz praktycznie każdy element. Począwszy od wysokości i szerokości pól, ich ilości, układu tekstu, wyglądu i treści przycisku, kończąc na oznaczeniach pól wymaganych.

ilustracja: formularz kontaktowy, testowanie wariantów

W zależności od tego, jakie były konwersje na Twojej stronie zanim zacząłeś testować różne projekty, dobrym wskaźnikiem będzie wzrost liczby zgłoszeń o 5 do 10 procent. Nie oznacza to wcale, że projekt jest już skończony, Twoim celem jest przecież ciągły wzrost.

Podsumowanie

Podsumowując, nie istnieje idealny formularz pasujący do każdego rodzaju biznesu. Nic nie zrobimy, jeżeli użytkownik się waha. Ale nawet drobne zmiany mogą mieć duży wpływ na przekonanie klientów do wypełnienia formularza. Twoim celem jest maksymalne ułatwienie tego procesu poprzez zapewnienie płynnego i niezawodnego doświadczenia pomiędzy użytkownikiem, a formularzem kontaktowym.

Eksperymentuj, aby wypracować skuteczne praktyki i w końcu znaleźć receptę, która najlepiej sprawdzi się w przypadku Twojej marki.

Call To Action – co to jest i jak powinno wyglądać?

Ty nie potrzebujesz żadnych Call To Action! Napisałeś najlepszą ofertę na świecie. Opisałeś działalność co do najdrobniejszego kroczku. Uzasadniłeś wartość swoich słów kopiami certyfikatów, dyplomów, zezwoleń, atestów. Każdy inteligentny czytelnik, jeżeli tylko potrzebuje Twojego produktu, usługi albo towarzystwa wie co teraz powinien zrobić. No właśnie, ale czy aby na pewno wie?

Call To Action – czyli czym jest CTA?

Call To Action, czyli bardziej swojsko Wezwanie Do Działania, jest komunikatem skierowanym do czytelnika, mówiącym co ma zrobić. Możemy się oczywiście pospierać, czy „ma” nie jest za ostre, czy nie należałoby użyć „powinien”, „byłoby fajnie gdyby”, albo „uprzejmie sugerujemy żebyś wziął pod uwagę”. Bez względu na wynik sporu, CTA po prostu podpowiada odbiorcy tekstu konkretne działanie do wykonania.

Call To Action jest elementem dobrej komunikacji. Jako autorzy przekazu mówimy wprost, czego oczekujemy. Na przykład, zamiast biernie poddawać się ocenie walorów oferty przez potencjalnego klienta, mówimy – sprawdź, przetestuj, kup. I to działa, bo ludzie niekoniecznie chcą analizować. Statystyczny Kowalski lub Nowakowa, chętnie skorzystają z sugestii, która zwolni ich z konieczności porównywania i podejmowania decyzji.

Korzyści Call To Action

Finalną korzyścią ze stosowania CTA są najczęściej pieniądze. Niekiedy droga do ich zarobienia jest krótka. Jeżeli wzywasz klienta do zakupu e-booka, wystarczy, że kliknięcie doda produkt do koszyka. I gotowe. Oczywiście, jeżeli użytkownik zdecyduje się na zakup.

Jednak w większości przypadków rzecz jest bardziej skomplikowana.

Przykładowo zapraszasz użytkownika do zapisania się do newslettera. Dlaczego? Bo zależy Ci, żeby osoba, która odwiedziła stronę nie zapomniała o niej, a wręcz poprosiła żebyś jej o sobie przypominał. Po co? Żebyś mógł tę osobę informować o nowościach, o tym jakie produkty wprowadzasz do oferty, na co ogłaszasz promocję. A to wszystko po to, żeby odwiedzający stronę zmienił się w klienta, czyli zostawił w Twoim sklepie pieniądze. Doszliśmy do kasy, ale na innym poziomie prawdopodobieństwa efektu i inną ścieżką.

Gdyby skatalogować podstawowe korzyści ze stosowania Call To Action, lista wyglądałaby następująco:

Uruchomienie procesu sprzedaży

Przycisk CTA wprowadza użytkownika na ścieżkę sprzedaży. Potencjalny klient, który dotąd zwiedzał Twój sklep, dostaje komunikat przypominający o celu wizyty.

– „Skorzystaj z jesiennej wyprzedaży” – może spowodować, że dość chaotyczne przeglądanie oferty, przekształci się w ciąg działań prowadzących do koszyka.

Skrócenie procesu sprzedaży

CTA może również być skierowany do użytkownika będącego już w procesie sprzedaży. Przykładowo potencjalny klient, który aktywnie przegląda od dłuższego czasu wybraną kategorię produktów dostaje komunikat o zniżce przy zakupie 2 sztuk produktu. Wątpliwości związane z wyborem wersji towaru stracą nieco na znaczeniu. Jednocześnie wzrosną szanse, że użytkownik stanie się za chwilę klientem.

Zwiększenie współczynnika konwersji

Pojedyncze wprowadzenia użytkownika do procesu sprzedaży i/lub przełączenie go w tryb przyspieszonej podróży do koszyka cieszą. Globalne zwiększenie współczynników konwersji, przekłada się na realne efekty finansowe.

Jeśli chcesz się dowiedzieć więcej na temat optymalizacji skuteczności swojego biznesu poprzez lepsze zrozumienie i wykorzystanie konwersji, to sprawdź nasz artykuł „Co to jest konwersja – jak ją zmierzyć, jak ją zwiększyć”.

Lepsze pozycjonowanie

Last but not least, to wpływ CTA na wyniki organicznego pozycjonowania e-sklepu lub strony firmowej. Frazy kluczowe umieszczone w Call To Action zwiększają wartość witryny z punktu widzenia algorytmów Google. Warto jednak pamiętać, że co za dużo, to niezdrowo. CTA złożone z kilkudziesięciu fraz poprzedzielanych przecinkami ani nie posłuży czytelności, ani nie wezwie do działania.

Rodzaje CTA

Mechanizm Call To Action jest bardzo elastycznym narzędziem w komunikacji i marketingu. Mimo, że docelowo prowadzi on głównie do zarabiania pieniędzy, może być stosowany w bardzo różnych celach pośrednich i konfiguracjach.

Przeznaczenie CTA

  • pozyskanie danych potencjalnego klienta (lead):
    • cel: zdobycie leadu, najczęściej w zamian za dostarczoną wartość (interesująca treść, zniżka, dostęp do limitowanej oferty),
    • przykład treści: Zapisz się do newslettera, Pobierz bezpłatny e-book, Zarezerwuj produkt przedpremierowo,
  • udostępnienie materiału:
    • cel: zdobycie leadu lub dostarczenie treści, która przypomni klientowi o Tobie i wzmocni wizerunek Twojej marki,
    • przykład treści: Pobierz infografikę, Obejrzyj krótki film instruktażowy, Obejrzyj webinar, Posłuchaj podcastu,
  • skierowanie użytkownika do określonej lokalizacji:
    • cel: przekierowanie użytkownika w celu dokonania zakupu, pozostawienia danych kontaktowych lub dalszego korzystania z serwisu,
    • przykłady treści: Dodaj do koszyka, Zamów, Zapoznaj się ze szczegółami, Przeczytaj również o,
  • działanie społecznościowe:
    • cel: oddziaływanie użytkownika na innych Internautów, budowanie społeczności, rozszerzanie zasięgu, wzmacnianie wizerunku marki,
    • przykłady treści: Polub nas na Facebooku, Zostaw komentarz, Skomentuj, Podziel się artykułem ze znajomymi.
infografika: Przeznaczenie Call To Action
Infografika: Przeznaczenie Call To Action.
pobierz pdf

Przykładowe działania

Katalog możliwych akcji podejmowanych przez użytkownika jest ogromny. Ograniczają go jedynie wyobraźnia i przyjęta koncepcja działań marketingowych. Do najczęściej spotykanych – dla jasności: wymienionych w kolejności alfabetycznej – należą:

  • kontakt telefoniczny,
  • obejrzenie filmu,
  • ocena produktu,
  • odsłuchanie podcastu,
  • odwiedzenie adresu URL,
  • pobranie pliku,
  • podzielenie się linkiem,
  • polubienie strony,
  • pozostawienie danych kontaktowych,
  • przesłanie maila,
  • skomentowanie wpisu,
  • wypełnienie formularza,
  • zakup produktu,
  • zapisanie się do newslettera.
Szukasz wykonawcy firmowej strony WWW?

Zamów bezpłatną wycenę projektu

Wypełnij formularz, skontaktujemy się z Tobą

Sposoby realizacji Call To Action

Jeśli chodzi o sposób zakomunikowania wezwania do działania również dostępne jest wiele opcji. Mimo, że sedno CTA pozostaje niezmienne – jest to jakiś tekst, albo hiperłącze – „opakowania” różnią się bardzo.

Treść CTA może być po prostu zdaniem „Zadzwoń do nas, aby dowiedzieć się więcej” we wpisie na firmowym blogu. Zdaniem w żaden sposób niewyróżnionym wizualnie z całego materiału.

Jednak w większości sytuacji CTA są projektowane w ten sposób, by zwrócić uwagę czytelnika i spowodować, że treść zostanie przeczytana. Tak zrobiliśmy kilka ułamek scrolla temu.

Ponieważ ruch przyciąga w naturalny sposób wzrok użytkownika, wykorzystywany jest w wezwaniach do działania regularnie. Stąd użycie sliderów, wyskakujących okienek, wysuwających się zakładek, podskakujących albo kręcących się elementów, a nawet mrugających okiem spinaczy biurowych ;).

Zestawiając często stosowane formy wykonania Call To Action warto wymienić:

  • przyciski umieszczane bezpośrednio w tekście lub na innych obiektach (np. sliderach),
  • wyskakujące okienka (pop-up lub snackbar) uruchamiane przez świadome działanie użytkownika (np. naciśnięcie przycisku) lub uruchamiane automatycznie (np. exit popup),
  • pola tekstowe połączone z elementami graficznymi, w tym z wykorzystaniem dodatkowych efektów (lightbox, overlay itp.),
  • slidery / karuzele (np. z banerami promocyjnymi grup produktowych),
  • przyklejone okienka (np. callout infolinii),
  • zakładki boczne (np. wysuwane side tabs z łączami do konta w serwisie społecznościowym).

A skoro padła już nazwa pop-up, to gorąco namawiam do przemyślenia, w którym momencie pobytu na stronie i w jakim wariancie (modal / non-modal) ich używać. Nie da się bowiem ukryć, że wyskakujące okienko często nie wzbudza sympatii użytkownika strony internetowej. Ciekawe omówienie tematu znajdziesz na witrynie Nielsen Norman Group (https://www.nngroup.com/articles/modal-nonmodal-dialog/).

SEO Call To Action – CTA w wynikach wyszukiwania

Wezwania do działania pojawić się mogą także w wynikach wyszukiwania Twojego sklepu lub strony firmowej w Internecie. Jeżeli korzystasz z Google Ads, masz do dyspozycji nagłówki i teksty reklam, które wyświetlą się na liście wyników przy łączu do witryny. Podążając za nagłówkami podpowiadanymi przez Google, oprócz nazwy Twojej firmy, informacji o produktach, cenach i promocjach, warto wprost napisać użytkownikowi, jakiego konkretnego działania oczekujesz (za konfiguratorem reklam GA: „Zarezerwuj hotel we Wrocławiu”, „Umów się na jazdę próbną” itp.).

Można wręcz zaryzykować twierdzenie: im lepsze CTA, tym wyższy CTR.

Wzorowy Call To Action – jak napisać wezwanie do działania?

Dobre wezwanie do działania powinno spowodować, że użytkownik zdecyduje się… zadziałać. Jak to zrobić? Dobre praktyki można sprowadzić do czterech (ok, w sumie pięciu) punktów.

Podstawą jest:

Zachowanie spójności tematycznej

Call To Action powinno odnosić się do treści, z którą w danym momencie zapoznaje się użytkownik. Czytelnik w Internecie jest raczej „skanerem” lub „przeglądaczem”, niż czytelnikiem sensu-stricto. Jednak będąc na Twojej stronie jest w pewnym kontekście, czegoś szuka, czegoś się spodziewa. Jeżeli sprzedajesz wysokiej jakości sprzęt audio, użytkownika może zainteresować zakup kolekcji unikalnych winyli. Proponowanie pobrania e-booka na temat technik jazdy samochodem po śliskiej nawierzchni, sensu raczej nie ma. „Raczej”, bo może trafisz na audiofilów z zacięciem rajdowym ;).

Jeżeli spełnimy warunek spójności, możemy przystępować do komponowania przekazu. Załóżmy, że sprzedajesz sprzęt muzyczny. Twoim celem jest pozyskanie adresu e-mail użytkownika swojej strony i zgody na przesyłanie mu co jakiś czas materiałów informacyjno-promocyjnych. Przynętą, albo jeśli wolisz wartościową treścią jest, e-book o konserwacji progów i wymianie strun w gitarach elektrycznych. Decydujesz się na stworzenie CTA, w formie wyskakującego okienka, pojawiającego się po przescrollowaniu do połowy strony poświęconej gitarom.

Jeśli chcesz się dowiedzieć więcej o tym, jak stworzyć treści, które skutecznie przyciągają i zatrzymują klientów, koniecznie sprawdź nasz artykuł „Content marketing – treści, które pozyskują klientów”.

Obietnica w CTA

Ty od początku wiesz dlaczego zależy Ci na kliknięciu przycisku CTA. Użytkownik nie. Warto więc go o tym poinformować. Komunikat „Pobierz e-book” daje czytelnikowi obietnicę, że już za chwilę będzie miał okazję zapoznać się z treścią oferowanego przez Ciebie materiału.

Korzyści

Trzymajmy się naszego przykładu. Obietnica możliwości pobrania bezpłatnego podręcznika to jeszcze za mało. Prawdę powiedziawszy, pozostawiona w podstawowej wersji stawia więcej pytań niż daje odpowiedzi. Jakich? Na przykład ile kosztuje e-book, czego jest wart, albo inaczej co zawiera no i jaka jest forma jego odbioru (tak Ty wiesz, że nagrywanie e-booka na CD nie wchodzi w rachubę, ale uwierz – takie pytania padają).

„Pobierz bezpłatnego e-booka polecanego przez wirtuozów gitary bezpośrednio na swój telefon”. Może nie jest to najzgrabniejsza forma, ale za to pokazuje korzyści (za darmo, świetny, od ręki).

infografika: Jak stworzyć skuteczne Call To Action (CTA)
Infografika: Jak stworzyć skuteczne Call To Action (CTA).
pobierz pdf

Potrzeba

„E-book prawdopodobnie jest wartościowy i za darmo” – to już do klienta dotarło. Ale rodzi się wątpliwość spod znaku: „czy będę z niego korzystał”, ewentualnie „czy potrzebny mi setny e-book o gitarach”. Bardzo groźna wątpliwość, która nierozwiana lada chwila pozbawi Cię kolejnego leadu.

Rozwiązaniem jest odniesienie się do potrzeby czytelnika. Hmmm, co to może być? Brzmienie instrumentu? Wygląd?

„Nadaj swej gitarze wyjątkowo czysty dźwięk”? „Sprawisz, że Twój Fender będzie zawsze wyglądał jak nowy”? Coś podobnego? Na pewno któraś z fraz, wybór zostawmy na później.

Zasygnalizuję tylko, uprzedzając kolejny punkt, że o potrzebach warto mówić językiem potencjalnego klienta. Bo to tworzy podstawy więzi, dobrego kontaktu. Bo lepiej pogadać ze swoim, który zna się na rzeczy, dzieli pasje niż z nie wiadomo kim. Stąd pomysł na Fendera (https://en.wikipedia.org/wiki/Fender_Stratocaster).

Emocje

Na zakończenie przykładu jeszcze jeden element. Nie obowiązkowy, ale za to na tyle skuteczny, że warto go uwzględnić. Ten element to emocje. Dokładnie jak w sprzedaży, jeśli potencjalny klient będzie chciał, albo bardzo chciał, to przestanie być potencjalnym klientem. Stanie się klientem, po prostu klientem.

ilustracja: przekształcanie potencjalnego klienta w klienta

„Oferta dostępna do 15 września”, „Pozostało jeszcze tylko 10 egzemplarzy” (tak, pamiętam, że mówimy o e-booku, niech będzie: ten pomysł jest słabszy) lub podobna fraza powinny klientowi pomóc w podjęciu decyzji.

Przycisk CTA – jak powinien wyglądać?

Treść wezwania do działania mamy właściwie gotową. Przyszła pora na nadanie jej formy graficznej. W telegraficznym skrócie mówiąc musimy zadbać o to by:

  • przekaz wyróżniał się na tle strony, nie będąc jednocześnie rażącym dysonansem,
  • przekaz wyróżniał się na tle strony, nie będąc jednocześnie rażącym dysonansem,
  • na tle CTA widoczne i czytelne było wezwanie do działania…
  • …oraz pozostałe informacje, rozwiewające wątpliwości i motywujące do podjęcia akcji.

Efekt końcowy wyglądać może na przykład tak.

infografika: Przykład CTA

Testuj i eksperymentuj z Call To Action

Udało nam się stworzyć przykładowy przycisk CTA dla wyimaginowanego sklepu.

Nie podejmuję się odpowiedzieć precyzyjnie na pytanie ilu czytelników na 10 skorzysta z opcji „Pobierz e-booka”. W dużej części dlatego, że struny wymieniam bardzo bardzo rzadko, a o progach nie wiem nawet czy się je konserwuje. Inaczej rzecz ujmując, mój profil nie bardzo pasuje do persony, w którą trzeba by się wcielić projektując CTA. Albo jeszcze krócej: nie należę do grupy docelowej.

Z tego samego powodu nie odwiedzam sklepów muzycznych i nie wiem zbyt dobrze jak one wyglądają, co jest modne z punktu widzenia UI itp. W efekcie trudno mi powiedzieć, czy zastosowana kolorystyka, czcionka i cały design pasuje do branży.

Jeżeli jesteś właścicielem sklepu wiesz, a przynajmniej powinieneś/powinnaś przeczuwać, czy projekt z grubsza pasuje do Twoich klientów. Bo na początek wystarczy, że CTA będzie po prostu pasował.

To co możesz zrobić potem, to modyfikacje treści i wyglądu Call To Action, zmiany, testy A/B, pytanie użytkowników, badanie skuteczności.

Przy okazji: zapewne zauważyłeś, że teksty na załączonym CTA trochę różnią się od opracowanych wcześniej. Dlaczego? Po złożeniu całości doszedłem do wniosku, że takie ich brzmienie będzie lepsze. I to był mój pierwszy eksperyment z CTA.

Podsumowanie

Call To Action to temat rzeka. W artykule omówione zostały podstawowe zagadnienia dotyczące wezwań do działania, w tym wachlarz stosowanych w praktyce rozwiązań. Lektura materiału powinna pozwolić na wybór najlepszej do indywidualnych potrzeb formy przekazu oraz świadome stworzenie skutecznego CTA.

Ładny sklep internetowy – to się opłaca!

Zmiana zachowań zakupowych i ich wpływ na wygląd sklepu.

Pandemia koronawirusa wywołała lawinę zmian w procesach zakupowych. Zmieniły się oczekiwania klienta oraz sposób wykorzystywania różnorodnych technologii. Według ekspertów (https://www.gemius.pl/wszystkie-artykuly-aktualnosci/e-commerce-w-polsce-2020.html) Polski rynek e-commerce w ostatnim roku przeskoczył 10 lat do przodu i jest jednym z najdynamiczniej rozwijających się w Europie. Użytkownicy są świadomi panującej sytuacji na świecie, dlatego są w stanie zgodzić się na więcej, ale sami też więcej wymagają. Dodatkowe zgody i potrzeby niosą za sobą nowe możliwości i rozwiązania. Z weekendów spędzonych w galeriach handlowych, w dużej mierze traktowanych jako rozrywka i sposób na spędzenie czasu z rodziną i przyjaciółmi, przeszliśmy do wirtualnego świata.

Biorąc to wszystko pod uwagę, bardzo ważnym aspektem staje się personalizacja UX sklepu, tak aby wywoływał emocje w użytkowniku, odpowiadał na jego potrzeby, a przede wszystkim pociągał do zakupu. Co możemy zrobić, żeby nasz sklep był pozytywnie odbierany przez Klientów?

infografika: Ładny sklep internetowy - to się opłaca
Infografika: Ładny sklep internetowy – to się opłaca.
pobierz pdf

Opowiedz historię za pomocą zdjęć

Nie sposób w tym pędzie zmian wypisać receptę, która, na pewno zatrzyma klienta w naszym sklepie i podniesie sprzedaż. Pewne jest jednak, że na pozytywny odbiór treści sklepu przez użytkownika mają wpływ zdjęcia lub krótkie video podkreślające zalety produktu.

Zdjęcia produktów mogą informować, ale mogą też wywoływać emocje. Wysokiej jakości zdjęcie produktu może utwierdzić klienta w przekonaniu, że jest to produkt dla niego i zminimalizować prawdopodobieństwo zwrotów. Może zwiększyć sprzedaż, zapewniając emocjonalną zachętę do zakupu poprzez spójną prezentację. Niezależnie jednak od tego, czy zlecasz wykonanie zdjęć profesjonalnemu fotografowi produktów, otrzymujesz je bezpośrednio od producenta, czy też tworzysz je samodzielnie – upewnij się, że dokładnie przedstawiają one oryginalny produkt! Im bardziej zdjęcie odbiega od produktu, tym większe prawdopodobieństwo zwrotów, kosztów, których można uniknąć, a w najgorszym wypadku złych opinii od klientów, którzy raczej nigdy nie wrócą. Należy więc zwrócić szczególną uwagę na wierność kolorów, dokładne odwzorowanie materiałów i ważnych szczegółów produktu.

Przenieś doświadczenia ze sklepu stacjonarnego do e-sklepu

Chcesz być w stanie odtworzyć doświadczenie klienta wchodzącego do sklepu i mogącego wziąć produkt do ręki. Zaprezentuj swój produkt, wyświetlając zdjęcia pod różnymi kątami i z różnych odległości, aby dać klientom poczucie tego, jak produkt będzie wyglądał na żywo. Dedykowana sesja z modelami nie tylko pozwoli użytkownikowi wyobrazić sobie siebie z produktem, ale także da zapewnienie, że produkt jest skierowany właśnie do niego, rekompensując w ten sposób fakt, że nie może go dotknąć. Codzienne doświadczenia sprawiają, że bez dłuższego zastanowienia, podświadomie nadajemy znaczenia widzianym obrazom. Na przykład, jeśli sprzedajesz sukienki, będziesz chciał pokazać zdjęcia każdej sukienki pod różnymi kątami, gdy jest noszona. Niektóre strony e-commerce oferują nawet zdjęcia swoich ubrań noszonych przez modelki o różnych typach budowy ciała, aby dać klientom najpełniejszy obraz tego, jak ubrania będą na nich wyglądać.

Fotografia produktowa (packshot) przydatna nie tylko w sieci

Fotografia produktowa ma również duży wpływ na Twoje działania marketingowe, dlatego ważne jest zaprezentowanie produktu na białym lub jednolitym tle. Ułatwi to nie tylko estetyczną prezentację produktów na stronie, ale też pracę nad dalszymi działaniami marketingowymi.

NASZA REALIZACJA

Projekt sklepu internetowego

Przykład realistycznej prezentacji profesjonalnej odzieży i wyposażenia dla kolarzy marki ASSOS

PORTFOLIO

Części zamienne i drobne detale urządzeń wymagają ostrego, precyzyjnego zdjęcia na białym tle, które zapewni dobry poziom kontrastu. Prezentując swoje produkty na billboardach, również docenisz magię białego tła i równomiernego oświetlenia, jaką oferują packshoty.

Ulotki, plakaty, broszury będą przykładem dobrego wykorzystania fotografii produktowej. Produkt na białym tle lub wycięty z tła może być wykorzystany w montażu i dobrze zagrać w kompozycji z tekstem.

Na zakończenie

Opracowałeś swój produkt z pasją, więc nie zapomnij o niej, gdy wystawiasz go na półki. Jako właściciel znasz swoje produkty lepiej niż ktokolwiek inny. Wykorzystaj na swoją korzyść fakt, że naprawdę zależy Ci na sukcesie sklepu. Odbiorcy są niezwykle wyczuleni na autentyczność. Jeśli nie wierzą w twój produkt, nie zaufają niczemu innemu, co masz do powiedzenia.

Checkout UX. Jak poprawić użyteczność koszyka

Wyniki badań z roku 2021 wskazują, że porzucone koszyki w sklepach internetowych różnych branż stanowią aż 81% wszystkich potencjalnych transakcji. Znaczy to, że klienci rezygnują z zakupów „w ostatniej chwili” aż w 4 przypadkach na 5.

Przyczyny porzuceń są różne. Na pewno za część z nich odpowiada cena produktu, warunki dostawy lub dostępne opcje płatności. Użytkownicy często porównują ze sobą oferty dostępne w kilku sklepach i wybierają spośród nich najkorzystniejszą.

Jednak w wielu przypadkach powodem rezygnacji z transakcji jest użyteczność koszyka (checkout UX). Do najczęściej spotykanych przyczyn należą: nieintuicyjne umieszczenie ikony koszyka, przesadnie wydłużony proces finalizacji transakcji, brak czytelnych komunikatów dla klienta oraz błędy walidacji formularzy.

Jak zorganizować koszyk, żeby był on oceniany pozytywnie przez użytkowników? Na co zwrócić uwagę, czego należy dopilnować w fazie projektowania i budowy sklepu?

Pięć cech koszyka przyjaznego klientowi

Poniżej znajdziesz parę wskazówek co zrobić, aby koszyk był łatwiejszy w użyciu dla klientów. Pomoże Ci to w poszukiwaniu odpowiedzi na odwieczne pytanie: „jak zwiększyć sprzedaż w sklepie internetowym?„.

Lokalizacja koszyka na ekranie

Zakupy przez Internet stały się typową czynnością. Dlatego jesteśmy bardziej przyzwyczajeni do wyglądu sklepu internetowego i za każdym razem, kiedy wchodzimy na nową witrynę możemy mniej więcej spodziewać się, gdzie będzie się znajdował koszyk.

Standardowym miejscem dla koszyka jest prawy górny róg i do tego przyzwyczajeni są użytkownicy. Należy również pamiętać, że nie należy chować koszyka na tle ciemnych i wąskich pasków, ponieważ nasze mózgi mogą po prostu nie wychwycić małej niewidocznej ikonki.

Koszyk powinien być łatwo dostępny w miejscu, gdzie wszyscy się go spodziewamy.

infografika: Checkout UX - jak zmniejszyć liczbę porzuconych koszyków
Infografika: Checkout UX – jak poprawić użyteczność koszyka w e-sklepie.
pobierz pdf

Możliwość zakupu bez konta

Drugą najczęstszą bolączką, która powoduje porzucenia koszyka wyróżnioną w badaniach jest konieczność założenia konta narzucona przez stronę. Nie należy przeciążać klienta. Zadał już sobie przecież tyle trudu, aby przebrnąć przez ofertę sklepu, wybrać interesujący produkt a na końcu dodać go do koszyka. Nic dziwnego zatem, że nie chce mu się przechodzić przez jeszcze jeden skomplikowany proces, jakim jest rejestracja.

Bardzo dużo ludzi nie lubi również udostępniać swoich danych na stałe. Warto w procesie zakupowym udostępnić opcję zakupów bez rejestrowania się, aby każdy znalazł najbardziej odpowiadającą im opcję.

Co za długo to niezdrowo

Zbyt skomplikowany lub długi proces finalizacji transakcji pogarsza checkout UX i odpowiada za prawie jedną trzecią wszystkich porzuceń koszyka. Często ma to miejsce w branży turystycznej. I nic dziwnego, bo bookowanie wycieczki ma prawo być bardziej skomplikowane niż kupno butów.

Jeśli wiemy, że proces koszykowy będzie nieco długi, warto podzielić go na mniejsze etapy i dać znać użytkownikowi, na jakim etapie się właśnie znajduje i co musi jeszcze zrobić.

Warto pamiętać tutaj o dobrze zaprojektowanym interfejsie, aby jeszcze bardziej nie komplikować sprawy. Czy ważne elementy są wyróżnione? Widać wszystkie informacje o zakupie? Czy użytkownik ma pełną kontrolę nad koszykiem? Ważne, aby mógł bez wychodzenia z koszyka zmienić na przykład liczbę zamawianych produktów lub zupełnie jakieś usunąć.

Wszystkie te elementy składają się na proces, który prowadzi gładko użytkownika do płatności.

Podsumowanie koszyka

Ponad 20% klientów porzuca koszyk, ponieważ nie może znaleźć w nim informacji o całkowitych kosztach zakupu. Aby temu zapobiec stosuje się podsumowanie koszyka, które pojawia się przed ostatnim krokiem, czyli płatnością lub mini podsumowanie w ramce, najczęściej obecne przez cały proces checkoutu.

Na podsumowaniu widać dokładnie to, co zamawia użytkownik, w jakich ilościach, jaką opcję płatności i dostawy wybrał i ile za nią zapłaci.

Jeśli mamy do czynienia ze sklepem z ubraniami, to warto, aby na podsumowaniu pojawiły się również rozmiary produktów. W innym przypadku użytkownik chcąc upewnić się, czy wybrał dobry rozmiar będzie musiał wracać do samego początku procesu. A to stwarza ryzyko, że klient nie wróci do zakupów.

Umieszczenie danych o rozmiarach daje również klientowi szansę, aby wyłapał ewentualne pomyłki, co oznacza mniej zwrotów i reklamacji.

Chcesz zwiększyć skuteczność swojego sklepu?

Zamów przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Zdjęcia i linkowanie

O wiele trudniej jest podtrzymać entuzjazm kupującego, jeśli w koszyku nie są widoczne zdjęcia produktów. Umieszczenie miniaturowego zdjęcia w koszyku jest jak marchewka, która prowadzi klienta przez co najmniej nudny proces zakupowy.

Ale nie trzeba ograniczać się jedynie do zdjęć. Podlinkowanie nazwy do strony z opisem produktu, paradoksalnie nie spowoduje rozproszenia uwagi klienta. Umożliwi mu za to powrót do strony opisu produktu, który otworzy się niezależnie od koszyka. Dzięki temu, jeśli ktoś będzie potrzebował doczytać coś o produkcie, nie będzie musiał całkowicie wychodzić ze strony koszyka zakupowego, na której tak bardzo chcemy go zatrzymać.

Podsumowanie

Badania wykazały, że 26% osób porzucających koszyk nabyło później ten sam produkt, tylko że w innym sklepie. Jeśli użytkownik zetknie się z trudnym w obsłudze koszykiem, to prawdopodobnie znajdzie inny sklep, gdzie zakup będzie o wiele łatwiejszy.

Każdy element koszyka składa się na całość doświadczeń, czyli krótko mówiąc checkout UX i decyduje o tym, czy zakup zakończy się sukcesem. Małymi krokami można dążyć do jak najbardziej intuicyjnego checkoutu.

Jednak należy pamiętać, że preferencje klientów w czasie się zmieniają. Śledzenie ruchu na stronie pozwoli Ci na bieżąco wprowadzać zmiany, aby obniżać współczynnik porzuceń.

Wpływ pierwszego wrażenia w e-commerce na zwiększenie konwersji

Czym jest efekt pierwszego wrażenia?

Od wielu lat naukowcy potwierdzają siłę pierwszego wrażenia. Efekt pierwszego wrażenia towarzyszy nam codziennie. Gdy wybieramy obok kogo usiąść czy stanąć w autobusie, gdy wybieramy z tłumu osobę, którą zapytamy o drogę. Te kilkanaście sekund obserwacji pozwala nam nie tylko na fizyczną ocenę drugiej osoby, ale także jej charakteru, a co najciekawsze często ta ocena jest trafna.

Ocena powstaje błyskawicznie i nieświadomie, możemy prawić morały, że książki nie ocenia się po okładce, ale nasz umysł i tak kalkuluje. Kalkuluje m.in. walory fizyczne drugiej osoby, styl ubioru, sposób poruszania się, mimikę twarzy, zapach, a następnie porównuje je z dotychczasowymi doświadczeniami i dopasowuje do znanych nam schematów oraz określa czy obserwowana osoba może być zagrożeniem. Niesamowitym jest fakt, że całe to zdarzenie trwa do 15 sekund, często nawet krócej. Jeszcze ciekawsze jest, że zmiana pierwszej oceny jest bardzo trudna. Nawet jeżeli zrozumiemy, że błędnie, negatywnie kogoś oceniliśmy, bardzo ciężko będzie nam to zaakceptować. Podświadomie wciąż będziemy ostrożni wobec tej osoby i tylko długotrwała relacja będzie w stanie powoli tą opinię zmieniać. Dlatego tak ważne jest dbanie o dobre pierwsze wrażenie.

infografika: Wpływ pierwszego wrażenia na zwiększenie konwersji
Infografika: Wpływ pierwszego wrażenia na zwiększenie konwersji.
pobierz pdf

Efekt pierwszego wrażenia w Internecie.

Zastanawiasz się pewnie jaki ma to związek z Twoim sklepem? Badania zdecydowanie potwierdzają, że rzeczywistość i świat wirtualny bardzo się od siebie różnią. Ocena strony internetowej, pierwsze wrażenie jakie na nas wywiera, powstaje w niecałe 50 milisekund, znacznie szybciej niż w świecie rzeczywistym. Warto więc pochylić się nad projektem i postawić na efekt WOW. Estetyczny i intuicyjny projekt wzbudzi zaufanie, a to już 50% sukcesu wpływającego na zwiększenie konwersji! Nasze decyzje zakupowe kierowane są emocjami, a więc siła dobrego pierwszego wrażenia może być decydująca w procesie zakupowym, nawet napotykając niedogodności w kolejnych krokach, zdobyty wcześniej kredyt zaufania wesprze użytkownika w dokończeniu zakupu.

Dopasuj projekt do grupy docelowej.

Warto zadbać o potrzeby odbiorcy, wykorzystując informacje o jego stylu życia, wartościach, wieku, hobby, a nawet wysokości zarobków. Dzięki odpowiedniej analizie zachowań stworzonej na podstawie zebranych danych persony, dowiesz się, jakie ma potrzeby i które z nich może zaspokoić dzięki Twojemu produktowi. Następnie spraw, aby strona internetowa stała się pracownikiem ‘pierwszego kontaktu’. Zdobyta wiedza o kliencie powinna automatycznie wpłynąć na identyfikację wizualną firmy, sposób komunikacji oraz wybór kanałów komunikacji.

Odpowiednio dobrana kolorystyka, krój pisma i styl graficzny do grupy docelowej będą pierwszym krokiem w procesie projektowania. Ważna jest świadomość cech użytkownika – w zależności od wieku i wykonywanego zawodu, będzie on mniej lub bardziej zaawansowany w użytkowaniu Internetu czy odbiorze bardziej abstrakcyjnej i awangardowej grafiki na produkcie. Inaczej będzie wyglądała komunikacja ze studentem, niż z profesjonalistą czy starszym pokoleniem np. 60+.

Pozytywne zaskoczenie może sprawić też udostępnienie odpowiedzi, zanim jeszcze padną pytania. Klient nie chce czekać na sprzedawcę, nie wróci także do sklepu, na którym się zawiedzie. Pomocne w zapobieganiu będzie sprawdzenie korespondencji od klientów, opinie zarówno Twoich produktów jak i konkurencji. Śledź uwagi i obawy swoich klientów, a następnie wykorzystaj je w pierwszym kontakcie. Umieść odpowiedź na banerze obok produktu, na opakowaniu i ulotce.

Czy Twój sklep robi dobre wrażenie na klientach?

Chcąc osiągnąć zwiększenie konwersji w sklepie internetowym, musisz przede wszystkim zrozumieć co jest powodem słabych wyników.

Zacznij od analizy współczynnika odrzuceń (bounce rate). Jeżeli jest on wysoki i wynosi powyżej 60% jest to pierwsza oznaka, że projekt wymaga poprawy. Kolejnym narzędziem, które pozwoli ocenić stronę będzie badanie skupienia wzroku na danych elementach strony (eye tracking, stosunkowo często stosowany test użyteczności UX). Dzięki wynikom dotyczącym strony głównej dowiesz się, co przyciąga użytkowników i w którym kierunku podąża ich wzrok. Łatwiej będzie Ci też zrozumieć, które elementy są omijane, albo wywołują konsternację lub zakłopotanie użytkownika.

Chcesz poprawić działanie swojej witryny internetowej?

Zamów przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Dodatkowo warto zaangażować odbiorców strony do podzielenia się opinią. Możesz wykorzystać w tym celu ankiety i po pierwszych 5 sekundach przeglądania witryny losowo wybranym użytkownikom udostępnić pop’up z krótką ankietą dotyczącą ich wrażeń.

Poprawny projekt, to już za mało, żeby być pewnym sukcesu. Podobnie jak w świecie filmu. Nie wystarczy, że nakręcisz super-obraz, musisz jeszcze zadbać o pierwsze wrażenie, którym zaprosisz i zachęcisz widza. Musisz zmontować atrakcyjny trailer. I główna strona Twojego sklepu powinna być właśnie takim trailerem.

Podsumowanie

Użytkownicy są coraz bardziej świadomi ogromu wyboru, ale także możliwości jakie daje im Internet. Zamiast przeglądać wiele stron korzystają z porównywarek, dzięki którym w kilka sekund otrzymują wyniki zgodne z ich oczekiwaniami.

Warto mieć świadomość, jak krótko trwa „zrobienie pierwszego wrażenia”. Warto pamiętać, że jego zmiana może być niemożliwa. Dlatego warto poświęcić czas na zadbanie, by strona główna zachęcała użytkowników do pozostania w sklepie na dłużej. A najlepiej do sfinalizowania transakcji.

Z dziennika UX Designerki

Gdzie jest mleko? Czyli jak połączyłam kropki „Kawa – UX”.

Wszystko zaczęło się w poniedziałek rano. Obudziłam się leniwie, upał wdarł się już przez uchylone okno do pokoju. Wyszłam przed dom i natychmiast po wyjściu za próg zrozumiałam, że chłodniej już dzisiaj nie będzie. „Idealnie byłoby wypić kawę. Kawa pobudzi krążenie i pomoże wpaść w rytm pracy.” – stwierdziłam w miarę przytomnie.

Świadoma braku mleka, bez którego kawa czasami nie ma sensu (nieprawdaż?), wskoczyłam na rower i popędziłam (na ile da się pędzić rano, przed pierwszą kawą) do pobliskiego sklepu. Ale to jakby nie był mój sklep! Wszystkie produkty były poprzestawiane. Wszyściutkie! Czując spływającą kroplę potu po plecach wpadłam między regały, szukając jakiegoś znaku „z góry”, który pokierowałby mnie do nabiału. Niestety…

Robiłam się coraz bardziej poirytowana. Przecież nie piłam jeszcze kawy! A już tajemnicze siły zmusiły mnie do myślenia. Zniecierpliwiona i świadoma zbliżającego się poniedziałkowego statusu w pracy, szczęśliwie natrafiam na ekspedientkę, Panią Zosię…

Okazało się, że sklep przeszedł remanent i stał się totalnie innym sklepem niż jeszcze dwa dni temu. Wnętrze to samo, znajome półki i regały, ale poza tym labirynt, pułapka itp. Pani Zosia doprowadziła mnie do starej, znajomej lady chłodniczej, z mlekiem poszłam do kasy.

Jadąc do domu z kartonem pełnym szlachetnego uzupełnienia do kawy zrozumiałam, że wcale nie ściemniam, powtarzając klientom z branży e-commerce, że „UX jest wszędzie”.

Użytkownik powinien być w stanie poruszać się po sklepie samodzielnie, bez konieczności rozwiązywania skomplikowanych zagadek. Bez względu na to, czy jest Twoim klientem pierwszy raz, czy kolejny. Bez względu na to, czy Twój sklep działa 10 lat bez zmian, czy właśnie kończysz rebranding.

A jak jest w Twoim sklepie? Znalazłabym mleko?

Wracając do świata wirtualnego, zanim otworzysz przeglądarkę i wpiszesz adres swojego sklepu, wejdź w buty klienta. Zacznij od opracowania prawidłowej i skutecznej strategii UX. A potem wyobraź sobie, że szukasz konkretnego produktu, przejdź przez proces zakupowy i zapytaj sam siebie:

  • Czy projekt strony jest estetyczny i czytelny?
  • Czy strona wyraźnie informuje o tym, gdzie trafiłeś i jakie usługi są w ofercie?
  • Czy proces poruszania się po stronie był logiczny i nie musiałeś zastanawiać co wydarzy się w następnym kroku?
  • Czy strona zapobiega nieoczekiwanym błędom?
  • Czy strona ładowała się szybko?
  • Czy Twoje potrzeby zostały spełnione?
  • Czy odwiedziłbyś tę stronę ponownie?

Jeśli odpowiedź na więcej niż dwa z tych pytań brzmi „nie”, prawdopodobnie występują problemy z ogólnym komfortem korzystania z Twojego sklepu. Warto wtedy wykorzystać mierniki UX, aby otrzymać bardziej konkretne wskazówki.

infografika: z dziennika UX designerki - na luzie o user experience
Infografika: Z dziennika UX designerki – na luzie o user experience.
pobierz pdf

Mówiąc najprościej, sposób, w jaki Twoja strona internetowa sprawi, że osoba będzie z niej korzystać, będzie absolutnie decydować o sukcesie lub porażce, a zwykle masz tylko jeden strzał. Jeśli UX na stronie, na której robię zakupy, jest zły, odejdę i nigdy nie wrócę, kupię u konkurencji. To samo dotyczy proszenia mnie o informacje, których nie potrzebujesz, zmuszania mnie do rejestrowania kont, których nie chcę, lub zgłaszania mnie do biuletynów e-mail, o które nie prosiłam. Mogą one i często są momentem decydującym dla użytkowników, a przede wszystkim są częścią sposobu, w jaki warto myśleć o UX.

Podsumowując – nie każ mi myśleć!

User experience czerpie z wielu dziedzin życia: psychologii, statystyki, projektowania graficznego, informatyki, strategii i wielu innych. Jeśli UX jest udany, daje ludziom proste, przyjemne doświadczenia, wolne od kłopotów i stresów dnia codziennego.

Pijąc poranną kawę, zastanów się czy Twój klient spija właśnie śmietankę czy błądzi w poszukiwaniu mleka.

Jak poprawić użyteczność (UX) strony głównej?

Strona główna jako ważny element zakupów

Strona główna sklepu internetowego jest wizytówką, na której powinny pojawić się najważniejsze informacje, które zachęcą użytkownika do dalszych akcji. Pamiętaj, co jest Twoim celem i staraj się, żeby użytkownik się na nim skupił i nic go nie rozpraszało.

Przedstaw swoją ofertę bez owijania w bawełnę! Nie pozwól, aby klient domyślał się, co jest najważniejszym elementem strony głównej i gdzie ma kliknąć. Za dużo informacji na raz, długie nagłówki i teksty mogą sprawić, że klient poczuje się przytłoczony i nie dojdzie do zakupu. Z badań wynika, że bardzo mała część odwiedzających przewinie stronę główną do samego dołu. Z tego powodu informacje, które chcesz przekazać najbardziej powinny być na samej górze. Kawa na ławę!

CTA (Call to action)

Wyraźny przycisk, który wzywa użytkownika do akcji powinien być nieodłącznym elementem strony głównej. To właśnie CTA łączy klienta z docelowym produktem lub usługą. Co chcesz, żeby użytkownik najpierw zrobił? Przeszedł do promocji? Zobaczył najnowszą kolekcję a może od razu dodał coś do koszyka? Pamiętaj, że bez względu na to, jaki jest twój cel i dokąd prowadzi przycisk, powinien on być łatwy do zauważenia i wyróżniony na przykład kolorem lub wielkością.

Tekst na CTA nie powinien być zbyt ogólny jak na przykład „Wyślij”. Dobrymi przykładami Call To Action są m.in. „Zacznij kompletować swoją szafę”, „Zobacz nasze produkty”, „Przejdź do promocji”. Można również pobawić się formą i zamiast w formie rozkazującej napisać coś w stylu „Wchodzę w to!” lub „Pokaż mi więcej XYZ”.

infografika: jak poprawić użyteczność strony głównej

Infografika: Jak poprawić użyteczność strony głównej.

pobierz pdf

Adekwatność

Pierwsze wrażenie jest bardzo ważne. Wystarczy dosłownie chwila, aby użytkownicy wyrobili sobie zdanie na temat Twojej marki, nawet jeśli nie zdają sobie z tego sprawy. Dlatego ważne jest, aby dostosować stronę do Twojej grupy docelowej. Kolory, treści, które zamieszczasz muszą być adekwatne do odbiorców i pasować do oferowanych produktów lub usług. Jeśli oferujesz usługi dla biznesu, postaraj się o bardziej stonowane kolory i profesjonalny język. Jeżeli natomiast sprzedajesz zabawki dla dzieci, możesz pozwolić sobie na wesołe i wyraźne kolory oraz nieszablonowy font.

Czytelność strony głównej

Postaraj się, aby na stronie głównej wszystkie napisy były łatwo widoczne. Zadbaj o kontrast oraz o odpowiedni rozmiar czcionki. Pamiętaj, że nie wszyscy są w stanie przeczytać bardzo małe napisy, szczególnie, jeśli nie za bardzo odróżniają się w porównaniu z tłem. Zadbaj również o dobrą jakość zdjęć. Często można także zauważyć, że na głównym banerze wykorzystano zdjęcie niedostosowane do rozmiarów strony. To wszystko wpływa na odbiór e-sklepu przez użytkowników i jego wiarygodność.

Podkreśl korzyści

Rozważ poświęcenie jednej sekcji na stronie głównej na wypunktowanie korzyści dla klienta płynących z oferty. Powinny być przedstawione w krótki i zwięzły sposób, najlepiej w formie graficznej, np. przy użyciu ikon. Pamiętaj, że jeden z możliwych sposobów na wyróżnienie się spośród wielu innych firm oferujących te same usługi/produkty to uwzględnienie statystyk dotyczących tego, jak Twój produkt lub usługa może poprawić pracę lub styl życia klientów. Będzie to dla nich przekonująca zachęta.

Rozwiej niepewność

Użytkownik przeczytał już o korzyściach wynikających z zakupu oferowanych w sklepie produktów. Ale na jakiej podstawie ma Ci zaufać? Upewnij się, że na głównej stronie zawarte będą argumenty nie do podważenia takie jak testimoniale lub opinie klientów, którzy korzystali już wcześniej z Twoich usług. Wzbudzi to zaufanie do Twojej marki i sprawi, że nikt nie będzie zastanawiał się dwa razy nad zakupem.

Potrzebujesz nowej strony internetowej?

Zamów projekt i wdrożenie

Wypełnij formularz, skontaktujemy się z Tobą

Strona główna – responsywność

Badania wykazują, że ludzie używają częściej smartfona do robienia zakupów przez internet. Nawet zamówienia związane z biznesem wykonywane są coraz częściej przez urządzenia mobilne. Znaczenie wersji responsywnej strony lub sklepu staje się z dnia na dzień większe.

Ważne, aby twoja strona była przygotowana nie tylko do rozdzielczości laptopa. Upewnij się, że w wersji mobilnej Twoja oferta nadal prezentuje się odpowiednio dobrze i że strona nie jest za długa. Podczas gdy na laptopie może to nie być problem, przeglądanie strony-tasiemca na telefonie stanie się bardzo uciążliwe i sprawi, że użytkownik nadwyręży palec do tego stopnia, że nie będzie miał już siły na zakupy ;).

Podsumowanie – strona główna wizytówką Twojego sklepu

Strona główna jest pierwszą i ostatnią szansą na to, aby zaciekawić potencjalnego klienta Twoją ofertą i sprawić, aby na niej został i przeszedł dalej do zakupu. Pamiętaj, aby poświęcić jej szczególną uwagę.

Oczywiście nie wszystkie wymienione wskazówki są odpowiednie dla każdego projektu. Podejścia mogą się różnić, a także odbiorcy i cele tworzonych stron internetowych. Powyższe porady mogą jednak służyć jako lista kontrolna osobom, które chcą zaprojektować użyteczną stronę główną.

Dlaczego nie istnieje jedna, uniwersalna checklista UX

Sprawdź aktualność przed każdym projektem.

10 rzeczy, które warto zrobić przed podróżą, 7 kroków do sukcesu w e-commerce czy 5 wskazówek jak skutecznie zarządzać czasem – każdy z nas trafia na tego typu artykuły. Tylko czy rzeczywiście stosujemy się do wskazówek właśnie z tego jednego artykułu? Oczywiście, że nie, nie zawsze odpowiada on naszym celom lub brakuje odpowiedzi na jedno z ważnych dla nas pytań. W takiej sytuacji szukamy dalej, kończąc z własną spersonalizowaną listą.

Pozostaw miejsce na kreatywność

Lista kontrolna jest jak przewodnik dla audytora, powinna prowadzić, wskazywać drogę, a nie zamykać drzwi. Na pewno spotkaliście się z listami tak długimi, że czas potrzebny na przepracowanie wszystkich punktów był dłuższy niż czas, który mieliśmy na wykonanie zadania. Jednocześnie świadomość, że lista zawiera wszystkie niezbędne punkty hamowała w nas kreatywność, pomijaliśmy ważne aspekty projektu, ponieważ nie znaleźliśmy punktu, który by im odpowiadał, a czas na wykonanie zadania zbliżał się ku końcowi.

Skupiając się na przejściu wszystkich pozycji zapominamy o przemyśleniach, które towarzyszyły nam podczas pracy. Co gorsza zgłaszając uwagi nasza lista kontrolna będzie rosła i rosła. Z biegiem czasu dodatkowe wymagania (a więc nowe pytania) są identyfikowane i dodawane. W niektórych sytuacjach pewne pytania są po prostu nieistotne. Nie mają zastosowania i nie są potrzebne. Istnieje duże prawdopodobieństwo, że regularne przeglądanie tej samej listy wpłynie na spadek skuteczności audytorów. Mówiąc prościej, audytorzy będą prawie pewni, że już znają odpowiedzi, więc istnieje tendencja do wpadania w rutynę i pisania dokładnie tej samej odpowiedzi, co ostatnio.

Skoncentruj się na procesie, a nie na ukończeniu.

Większość audytorów jest świadoma, że kolejnym etapem będzie analiza odpowiedzi i budowa raportu, co sprawia, że niepotrzebnie skupiają się na odpowiedzi na wszystkie pytania z listy kontrolnej, a nie na właściwym rozpatrywaniu projektu. Obawiają się, że ich praca zostanie odrzucona, jeśli nie będzie zawierała wszystkich odpowiedzi. Podczas tworzenia checklisty skoncentruj się na procesie. Pozostaw miejsce na wolne myśli, mieszaj pytania otwarte z zamkniętymi. Pamiętaj o kolejności, tak aby odhaczanie kolejnych pozycji było możliwie wygodne i nie wprowadzało bałaganu. Po ukończeniu przetestuj ją na sobie, pozwoli Ci to nie tylko na ocenę jakości, ale też czasu, który był potrzebny do ukończenia pracy. Poniżej kilka ważnych punktów, które powinieneś znać zanim zaczniesz tworzyć listę.

infografika: dlaczego nie istnieje jedna, uniwersalna checklista
Infografika: Dlaczego nie istnieje jedna, uniwersalna checklista?
pobierz pdf

Dobra lista kontrolna

  • Pozwala szybciej wdrażać nowych pracowników lub nowe pomysły.
  • Pomaga wykonać zadania prawidłowo, pomimo stresu i zmęczenia.
  • Ułatwia oddelegowanie zadań.
  • Ułatwia śledzenie postępów oraz oszacowanie czasu potrzebnego na ukończenie zadania.
  • Łączy kolejne etapy procesu.
  • Ułatwia komunikację.
  • Kładzie nacisk na pracę zespołową.
  • Zmniejsza ryzyko utraty ważnych informacji.
  • Systematyzuje działania, dyscyplinuje.

Warto pamiętać, że doświadczony audytor może posłużyć się listą kontrolną o skróconym zakresie, a nawet tematyczną. Audyt UX w pewnym stopniu bazuje na skomputeryzowanych procedurach, dlatego lista kontrolna może być tworzona w popularnych programach do tworzenia list. Ułatwi to jej modyfikację i przeniesienie odpowiedzi z listy kontrolnej do raportu końcowego bez konieczności przepisywania. Jak napisał Atul Gawande w 'Potędze checklisty’: „Dobre listy kontrolne charakteryzuje precyzja. Są krótkie, zwięzłe, na temat i łatwo je zastosować nawet w najtrudniejszych sytuacjach. Nie zastępują instrukcji obsługi.”

Podsumowując – zostaw otwarte drzwi.

Krótko mówiąc, listy kontrolne nie powinny być jedynym zasobem wykorzystywanym podczas audytu. Należy dołożyć wszelkich starań, aby w razie potrzeby zmienić strategię i mieć pewność, że audyt strony internetowej będzie kompletny. Checklista jest przydatna jako narzędzie zapewniające, że żaden punkt krytyczny nie zostanie pominięty, ale jej aktualność powinna być stawiana priorytetowo.

UX w e-commerce sposobem na zwiększenie konwersji

Dowiedz się dla kogo projektujesz

Persona to profil Twojego klienta zbudowany na podstawie analizy wcześniej zebranych danych od użytkowników (np. za pomocą ankiety satysfakcji klientów). Zaczynając od poznania swojego klienta, dowiesz się kim jest, jakie ma nawyki, potrzeby, co go motywuje, poznasz jego cele i hobby. Poznanie użytkownika, nie tylko pozwoli Ci znaleźć wspólny język z klientem, ale też dostosować ścieżkę zakupową do jego potrzeb. Dowiesz się w jaki sposób dokonuje zakupów, na co zwraca uwagę czy gdzie można go spotkać.

Pamiętaj, że nie da się stworzyć projektu, który zadowoli wszystkich, projektowanie dla wszystkich można równie dobrze uznać za projektowanie dla nikogo. Poznanie grupy docelowej to pierwszy krok do sukcesu.

Zadbaj o dostępność strony na różnych urządzeniach – Responsive web design

Brak projektu odpowiednio dostosowanego do różnych rozdzielczości ekranów to jeden z głównych błędów w sklepie internetowym. Badania jednoznacznie wskazują, że laptop jest najczęściej wykorzystywanym urządzeniem przenośnym do zakupów online (80%). Zaraz za nim, z równie wysokim wynikiem (69%), znajduje się smartfon. Zwiększa się świadomość użytkowników, rosną ich oczekiwania, a szeroki wybór sprawia, że z łatwością wybierają ofertę konkurencji. Dlatego zadbaj, aby Twoja oferta była w pełni dostępna z każdego urządzenia.

Responsywny projekt strony internetowej to nie tylko skalowanie obrazów, to stworzenie odrębnej ścieżki zakupowej dla różnych urządzeń. Intuicyjna i wygodna budowa nawigacji, dostępność i widoczność przycisków oraz łatwość poruszania się między produktami to konieczność w sklepie internetowym. A jednocześnie sprawdzona metoda na zwiększenie sprzedaży.

infografika: ux w e-commerce sposobem na zwiększenie konwersji
Infografika: Elementy UX wpływające na zwiększenie sprzedaży.
pobierz pdf

Uporządkowana i intuicyjna nawigacja

Zadaniem głównej nawigacji jest przeprowadzenie użytkownika przez ofertę w taki sposób, aby nie potrzebował pomocy w trakcie przeglądania produktów. Nazewnictwo i zastosowane ikony powinny być na tyle intuicyjne, aby klient nie zastanawiał się co zobaczy po kliknięciu. Twoim celem jest przecież zwiększenie sprzedaży, a nie samo wejście na stronę sklepu.

Projekt menu

Trudno wyobrazić sobie stronę internetową bez menu. Wydawać by się mogło, że powszechność użycia powinna przekładać się na efektywność stosowanych w praktyce rozwiązań. Niestety wiele projektów stawia na atrakcyjny, bądź nietypowy wygląd, kosztem użyteczności. Poniżej przedstawiam kilka podstawowych zasad projektowych, których spełnienie pozwala odbiorcom na wygodne korzystanie z interfejsu.

Projektując menu zwróć uwagę na:

  • Podział strony – nie przesadzaj z liczbą elementów, nawigacja powinna być możliwie jak najprostsza.
  • Odpowiedni obszar klikania – pamiętaj, aby wielkość obszaru klikanego nie była zbyt mała.
  • Hover – podkreślenie przycisku funkcją hover zachęci dodatkowo klientów do przejścia dalej.
  • Informuj – wskaż użytkownikowi, gdzie się znajduje, używaj okruszków.
  • Korzystaj ze standardów – bierz pod uwagę rozwiązania, które już zostały przetestowane. Wpływają na zwiększenie konwersji i są pozytywnie odbierane przez użytkowników.

Dobrze zaprojektowane menu sprawi, że Twój klient nie tylko znajdzie interesujące go informacje, ale wpłynie też na współczynnik odrzuceń (bounce rate). Nie broń nawigacji, która prezentuje się estetycznie i ciekawie, jeżeli nie prowadzi ona użytkownika. Szata graficzna oraz wysoka jakość produktów nie zatrzymają klienta, jeżeli nie może on dotrzeć do ważnych informacji czy nawet produktu. Trudności w odnalezieniu informacji to jeden z najczęstszych powodów rezygnacji z zakupów i przeszkoda na ścieżce do zwiększenia sprzedaży.

Jeśli chcesz zgłębić wiedzę na temat projektowania intuicyjnej i efektywnej nawigacji na stronie www, koniecznie przeczytaj nasz artykuł UX Design nawigacji na stronie www – jak zrobić to poprawnie. Ten tekst dostarczy Ci niezbędnych narzędzi i wskazówek. Dowiesz się jak stworzyć nawigację, która przyciągnie i zatrzyma użytkowników na Twojej stronie.

Estetyczny i klarowny projekt

Estetyczny i przejrzysty projekt zapewni stronie oddech, którego potrzebuje, aby zaoferować przekonujące wezwanie do działania. Odpowiedni kontrast kolorów podkreśli wcześniej zaplanowaną nawigację, stworzy hierarchię przycisków i podkreśli ścieżkę sprzedażową.

Kolory, położenie i rozmiar elementów na stronie mają ogromny wpływ na odbiorcę. Kupujemy oczami, 95% użytkowników nie dokona zakupu, jeżeli nie podoba mu się to co widzi, dlatego zwróć uwagę na prezentację produktu, przedstawienie oferty oraz unikaj zbędnych ozdobników.

Stawiaj na wysoką jakość zdjęć i video, udostępnij jak najwięcej informacji o produkcie, podziel je na logiczne sekcje tak aby podczas skanowania wzrokiem karty produktu było oczywiste, gdzie znajdują się szczegóły produktu.

Chcesz poprawić działanie swojego e-sklepu?

Zamów przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Rejestracja konta, metody płatności i metody dostawy

Faktem jest, że nie każdy z klientów będzie chciał zostać stałym klientem, dlatego ważne jest, żeby samo dokonanie zakupu było łatwe i możliwie jak najszybsze. Najlepszym rozwiązaniem jest dać wybór na każdym etapie. Pozwól użytkownikom zdecydować, czy chcą zakładać konto, w jaki sposób dokonają płatności i jaka metoda dostawy jest dla nich najwygodniejsza. Tak naprawdę każdy z tych etapów jest krytyczny, a najmniejsza niedogodność może spowodować porzucenie koszyka.

Poza udostępnieniem wyboru, bardzo ważne jest też informowanie. Informowanie nie tylko na jakim etapie się znajduje i ile kroków pozostało do zamknięcia zakupu, ale też o wszelkich możliwych kosztach. Nie zaskakuj – informuj na bieżąco.

Równie ważna jest obsługa posprzedażowa. Wyślij informacje o statusie zamówienia i numerze przesyłki, a po dostarczeniu produktu zapytaj, czy dostawa przebiegła prawidłowo oraz co klient myśli o produkcie. Pokażesz w ten sposób, że zadowolenie klienta jest dla Ciebie priorytetem.

Pomoc, bezpieczeństwo i dokumentacja.

Ostatnim, ale wcale nie mniej ważnym punktem jest bezpieczeństwo, udostępnienie pomocy i dokumentacji. Wszyscy zgodzimy się, że kwestii bezpieczeństwa sklepu nie należy lekceważyć. Klient chce mieć pewność, że udostępnione dane nie trafią w niepowołane ręce. Aby zabezpieczyć wymianę danych zainwestuj w certyfikat SSL dla strony. SSL to technologia służąca do bezpiecznego szyfrowania przesyłanych danych, chroni przed podszywaniem, podsłuchiwaniem czy modyfikacją informacji.

Ale poza odpowiednimi zabezpieczeniami, klient może chcieć wiedzieć, jak przechowujesz jego dane, gdzie znajduje się siedziba firmy i w jaki sposób może się z Tobą kontaktować. W tym celu udostępnij regulamin sklepu, informacje o procedurze zwrotu i wymiany produktów, a także politykę prywatności i bezpieczeństwa.

Podsumowanie

W tym artykule opisałam podstawowe zasady, którymi powinieneś się kierować tworząc sklep internetowy, pamiętaj, że jest to ogólny zarys i jedynie wstęp do UX w sklepie internetowym.

Na naszym blogu znajdziesz więcej artykułów o tym czym jest UX i dlaczego jest ważny dla Twojego sklepu. Dowiesz się więcej o jego wpływie na zwiększenie konwersji, spadek współczynnika odrzuceń i wizerunek marki. Rynek zmienia się bardzo szybko, pojawiają się nowe rozwiązania, zmieniają się trendy i potrzeby użytkowników. Dlatego właśnie ważne jest, aby śledzić nowości, dobre praktyki i aktualizować witrynę możliwie często.

Opinie Klientów – dlaczego warto pytać?

Trudny klient jako źródło informacji.

Badania wykazują, że zadowolony klient podzieli się swoją opinią maksymalnie z trzema kolejnymi osobami, a niezadowolony klient przekaże swoją opinię kolejnym dziesięciu osobom. Dlatego, to właśnie niezadowolony klient, będzie miał największy wpływ na rozwój Twojego sklepu. Dowiesz się od niego co i gdzie warto poprawić, odbudujesz zaufanie do marki i podtrzymasz relację. Ankieta satysfakcji klienta to najtańszy, najszybszy i najbardziej wiarygodny sposób, aby zrozumieć dlaczego sklep nie sprzedaje. Skuteczny formularz kontaktowy zawierający kilka prostych pytań, pozwali nam zdobyć informację nie tylko dlaczego klienci wybrali nasz produkt, ale też dowiedzieć się kim są, jak oceniają naszą ofertę lub funkcjonalność strony internetowej i dlaczego rezygnują z zakupów?

Ankieta – od czego zacząć?

Zaczynamy od ustalenia celu. Takim celem może być np. informacja o tym w jaki sposób klienci trafiają na stronę, poznanie klienta i jego oczekiwań, zbadanie jakości produktu lub usługi, poprawa użyteczności naszego serwisu internetowego (web usability) i wiele innych.

Warto zaznaczyć, że w ankiecie możemy zapytać dosłownie o każdy aspekt naszej oferty, ale pamiętając, aby ankieta trzymała się jednego wyznaczonego celu. Stawiając sobie cel zwróćmy więc uwagę, aby jego zakres nie był zbyt szeroki. Uzyskanie satysfakcjonujących odpowiedzi powinno być możliwe przy zadaniu jak najmniejszej liczby pytań.

Jedna ankieta – jeden cel!

Zbyt rozbudowana ankieta, pokrywająca kilka tematów i wymagająca dużego zaangażowania, może zniechęcić użytkownika do jej wypełnia. Wypełnianie ankiety w pośpiechu może spowodować, że odpowiedzi będą mało spontaniczne i nie odzwierciedlające prawdziwych odczuć.

Cechy dobrej ankiety zadowolenia klienta

Mamy już cel, skupmy się na formie. Użytkownicy chętniej odpowiedzą na 3 -5 pytań zamkniętych niż taką samą liczbę pytań otwartych. Zdecydowanie łatwiej będzie nam też wykonać analizę odpowiedzi uzyskanych z pytań zamkniętych niż z pytań otwartych.

Biorąc to pod uwagę, formując pytania starajmy się, aby ich forma była zamknięta, a zakres odpowiedzi był neutralny i pozwalał na wybranie odpowiedniej opcji każdemu z użytkowników. Istnieje kilka form odpowiedzi, o których warto pamiętać.

Przykłady pytań zamkniętych:

  • Wielokrotny wybór – odpowiedzi w formie checkbox’ów
  • Skala – użytkownik zaznacza na skali, która teza jest mu bardziej bliższa
  • Odpowiedzi typu Tak / Nie

Nie oznacza to, że w razie potrzeby nie możemy zadać pytania otwartego, starajmy się jednak, aby było ich jak najmniej. Najczęściej pytania otwarte w ankietach pojawiają, aby dać użytkownikowi możliwość swobodnego wyrażenia myśli dotyczących danego tematu. Takie pytania to np. „Co sądzisz o nowej stronie?” „Dlaczego zrezygnowałeś z zakupu?”

Odpowiedzi uzyskane za pomocą pytań otwartych mogą być dla nas inspirujące i pokazać nam zupełnie nowe aspekty danego tematu. Pomogą nam poprawić jakość produktów i serwisu, wpływając na rozwój firmy.

Bardzo ważne jest też udostępnienie możliwości pominięcia pytania. Unikniemy w ten sposób niewiarygodnych odpowiedzi wymuszonych koniecznością wybrania jakiekolwiek odpowiedzi mimo tego, że żadna opcja nie odpowiadała odczuciom użytkownika.

infografika: opinie klientów dlaczego warto pytać
Infografika: Opinie klientów dlaczego warto pytać.
pobierz pdf

Gdzie i kiedy udostępnić ankietę?

Mamy już cel i gotowe pytania, pozostaje nam zaprosić użytkowników do wypełnienia ankiety. W zależności od naszego celu mamy do wyboru kilka możliwości udostępnienia ankiety:

  • Najlepszy wybór – Strona www
  • Drugie miejsce – Social media
  • Trzecie miejsce – Mailing

Strona www

Użytkownicy najchętniej wypełniają ankietę podczas przeglądania strony. Wyskakujący pop-up z odpowiednio sformułowanym zaproszeniem do wypełnienia ankiety zdecydowanie chętniej spotyka się z odpowiedzią użytkowników. Dzieje się tak ze względu na fakt, że pojawiające się okno wymaga od użytkownika natychmiastowej reakcji, a podając konkretną przyczynę trudniej będzie mu odmówić.

Pamiętaj, aby nie przerywać użytkownikowi, który jest w trakcie procesu zakupowego, może to go jednocześnie zniechęcić do wykonaniu obu tych czynności. Porzuci on proces zakupowy i zrezygnuje z wypełnienia ankiety. W zależności od celu, ankieta powinna pojawić się po wejściu na stronę, w trakcie przeglądania oferty lub dopiero po zakończeniu działań np. po zakończonym zakupie lub wysłanej wiadomości.

Social media

Facebook czy Instagram, też jest dobrym miejscem, aby zapytać użytkowników o opinie, ale nie na każdy temat. W tym miejscu warto zadawać pytania odnośnie poszerzenia oferty, jakie zmiany byłyby dla nich pomocne lub jak ogólnie oceniają firmę.

Zadając pytania odnośnie konkretnej podstrony bądź funkcjonalności naszego sklepu, możemy otrzymać odpowiedzi, które nie będą odzwierciedlały faktycznego stanu. Nie jesteśmy w stanie zweryfikować, czy użytkownik był na danej podstronie lub skorzystał z danej funkcji, nie wiemy więc czy jest w stanie obiektywnie się wypowiedzieć.

Mailing

Z badań wynika, że zdecydowanie rzadziej nasi klienci odpowiadają na ankiety wysłane mailowo. Powodami są przede wszystkim obawy związane z otwieraniem linków zawartych w wiadomości oraz sam fakt, że otrzymują możliwość odłożenia w czasie wykonania zadania po czym nigdy nie wracają do danej wiadomości.

Niemniej jednak warto skorzystać z mailingu, aby otrzymać opinię dotyczącą zakończonego procesu zakupowego, otrzymanego towaru lub kontaktu z biurem obsługi.

Tworząc ankietę skupiamy się na poprawieniu jakości naszych usług i produktów, a więc nieoceniony wkład będą miały właśnie opinie po zakończonym procesie czy informacji o jakości otrzymanego produktu.

Analiza odpowiedzi – jak zrobić to z głową.

Ostatni krok to analiza otrzymanych odpowiedzi. Dzięki niej dowiemy się, gdzie popełniamy błędy albo nasze działania są niewystarczające.

W zależności od rodzaju zadanych pytań analiza będzie przebiegała inaczej. Pytania zamknięte są policzalne, otwarte trzeba będzie pojedynczo przeanalizować i posortować na kategorie. Pomocne mogą być podstawy statystyki czy tabele porównawcze i krzyżowe. Dobrą formą do odczytywania wyników jest też tworzenie wykresów, dzięki którym łatwiej będzie nam odczytać i przeanalizować proces.

Podsumowanie

Ankieta to kopalnia informacji. Prosta budowa i łatwość dotarcia do dużej liczby użytkowników w krótkim czasie polecana jest dla każdego rodzaju biznesu. Nieważne czy dopiero wchodzisz na rynek, czy może od lat prowadzisz serwis lub sklep, ankiety zawsze się sprawdzają. Rynek zmienia się szybko, zmieniają się potrzeby i oczekiwania, zapytajmy więc o nie naszych klientów.

Alarm: spadek sprzedaży w sklepie internetowym

Cudowne środki

Mój dziadek miał jeden cudowny środek na wszelkie dolegliwości. Przynajmniej te fizyczne, typu stłuczenie, zadrapanie, zwichnięcie, opuchnięcie itp. Cudownym środkiem była maść ichtiolowa. Prawdę powiedziawszy nadal nie do końca wiem co to dokładnie jest i na co ma szansę zadziałać, ale dziadkowi maść pomagała na wszystko.

Dlaczego przypomniał mi się dziadek? Trochę dlatego, że w tytule napisałem „spadek” – żart. Dziadek przypomniał mi się, bo często spotykam ludzi odpowiedzialnych za sprzedaż w e-sklepach, którzy działają, jakby wierzyli w cudowne maści leczące wszelkie dolegliwości.

Spada sprzedaż w sklepie – trzeba użyć maści. Trzeba zwiększyć sprzedaż sklepu internetowego – potrzeba maści. Klienci porzucają masowo koszyki tuż przed płatnością – maść.

Co jest najczęściej maścią? Według moich obserwacji na rynku królują dwie. Pierwsza z nich to SEO. Druga: UX.

Jak zwiększyć sprzedaż w sklepie internetowym? Zwolennik maści nr 1 odpowie bez zająknięcia: popracować nad pozycjonowaniem, zwiększyć budżet na Google Ads itp.

Wyznawca maści nr 2 będzie recytował: poprawić ścieżkę zakupową, przebudować koszyk, dodać CTA na każdej podstronie itd.

Ja powiem: to zależy. Najpewniej trzeba zrobić wszystkiego po trochu.

infografika: Jak zwiększyć sprzedaż w sklepie internetowym.
Infografika: Jak zwiększyć sprzedaż w sklepie internetowym.
pobierz pdf

Dlaczego sklep nie sprzedaje?

Odpowiedź nie jest ani oczywista, ani prosta. Nawet jeśli do pracy zostały zaprzężone SEO/SEM i UX. Mimo reklamowania i pozycjonowania strony, mimo dużego zaangażowania w stworzenie projektu e‑sklepu, całość może nie działać optymalnie.

SEO / SEM odpowiada za doprowadzenie klientów do drzwi wirtualnego sklepu. Część działań prowadzi dosłownie do odpowiednika drzwi, albo witryny wystawowej, czyli strony głównej. Część działań SEO / SEM, skojarzonych mocno z konkretnymi produktami, doprowadza kupujących bezpośrednio do docelowej półki.

Tyle, że wejście do sklepu, w którym nie wiadomo jak otworzyć drzwi, jak znaleźć odpowiednią półkę, jak od półki trafić do kasy, nie zakończy się sprzedażą. Klient po prostu ze sklepu wyjdzie. Z e-sklepu kilkadziesiąt razy łatwiej, niż ze sklepu tradycyjnego.

Sprzedażą nie zakończy się również sytuacja, w której mamy doskonale zorganizowany sklep, o którym klienci nie wiedzą. W świecie wirtualnym jest to doskonale zaprojektowany, zgodnie z zasadami UX, użyteczny dla kupujących sklep, który nie jest zoptymalizowany pod kątem SEO i nie prowadzi działań SEM.

Jakie jest więc rozwiązanie? Jak zwiększyć sprzedaż w sklepie internetowym?

Teoretycznie recepta jest prosta: zwiększać liczbę użytkowników odwiedzających sklep i zapewniać im najlepszą możliwą obsługę. Czyli po prostu prowadzić zrównoważone działanie proklienckie.

Problem w tym, że codzienne prowadzenie sklepu to nie jest teoria. Zwiększanie liczby odwiedzających to budżety i czas. Każde działanie marketingowe ma swoją inercję i czasem trudno doczekać się na widoczne wyniki, które „dawno powinny być”. Najlepsza możliwa obsługa może okazać się niewystarczająca dla naszych klientów. Albo co gorsza, mimo całego wysiłku, może być czymś co działa na kupującego odstraszająco.

W praktyce jedną z lepszych strategii jest prowadzenie wielotorowych działań, w równym stopniu skierowanych na ofertę, sposób jej promocji i możliwości zakupu.

Twój sklep generuje zbyt niskie przychody?

Zamów przeprowadzenie audytu UX

Wypełnij formularz, skontaktujemy się z Tobą

Jak podnieść sprzedaż w sklepie internetowym – kluczowe czynniki sukcesu.

Dobry produkt

Produkt dobrej jakości i w akceptowalnej dla klienta cenie. Dobrze przedstawiony i opisany, adekwatnie do rzeczywistych cech. Dostarczony na czas, w idealnym stanie.

Optymalizacja strony

Stosowanie fraz kluczowych, strukturalna budowa tekstu (z wykorzystaniem nagłówków), tworzenie artykułów i wpisów zawierających unikalne i wartościowe treści, czyli działania z obszaru content marketing.

Konsekwentna realizacja strategii pozyskiwania ruchu

Pozycjonowanie strony (zarówno SEO dla e-commerce, jak i reklamy płatne, czyli SEM), aktywność w mediach społecznościowych, współpraca z influencerami, link building.

Wygląd strony

Design adekwatny do oczekiwań grupy docelowej, zgodny z aktualnymi trendami. A przede wszystkim projekt możliwie lekki, ułatwiający korzystanie z serwisu, nie odciągający formą od funkcjonalności.

Funkcjonalność strony

Intuicyjny proces wyszukiwania, porównywania i wyboru produktu. Optymalizacja procesu pod kątem liczby realizowanych kroków. Elementy ułatwiające rozwiewanie wątpliwości klientów: informacje o nas, opinie klientów, czytelne i zrozumiałe regulaminy.

Wybór konkretnych działań, ich natężenie i harmonogram prowadzenia zależy od możliwości e-sklepu. Możliwości określonych wolnym budżetem, czasem pracy ludzi, dostępnością specjalistów. Jednak niezależnie od skali, zrównoważone działania w wymienionych wyżej obszarach budują potencjał pozwalający utrzymać i zwiększać sprzedaż e-sklepu.

Podsumowanie

Jak zwiększyć sprzedaż w sklepie internetowym? Zachowywać równowagę między działaniami marketingowymi i poprawianiem użyteczności serwisu. Cudowne środki „na dobrą sprzedaż” w e-commerce nie istnieją.
Nie sprawdzają się strategie działania skierowane jedynie na sklep ani wyłącznie na resztę świata.
Receptą na sukces jest zapewnienie jak najlepszej obsługi jak największej liczbie klientów. Czyli jednoczesne myślenie w kategoriach UX i SEO/SEM.