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),
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ę.
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 (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.
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.
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.
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. 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ę.
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.
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 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ą.
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.
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.
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.
Struktura strony www to nic innego jak sposób, w jaki jej treść jest zorganizowana i prezentowana użytkownikom. Jest to fundament, na którym budujemy witrynę, a jego jakość bezpośrednio wpływa na doświadczenia użytkowników i widoczność strony w wyszukiwarkach.
Jakie elementy składają się na strukturę strony?
Struktura strony internetowej składa się z elementów, które razem tworzą spójne i użyteczne doświadczenie dla użytkownika. Główne składowe struktury to:
Menu i inne elementy systemu nawigacji pomagające użytkownikom poruszać się po stronie i znajdować potrzebne informacje.
Treść, czyli informacje, które chcesz przekazać swoim użytkownikom.
Nagłówki, pomagające w organizacji treści i ułatwiające użytkownikom zrozumienie, czego dotyczy dana sekcja strony.
Stopka, zawiera istotne informacje, które nie muszą być dostępne z poziomu menu głównego, np.: linki do polityki prywatności, dane kontaktowe, linki do mediów społecznościowych itp.
Multimedia, czyli obrazy, materiały wideo i inne elementy multimedialne, podnoszące atrakcyjność przekazu i ułatwiające użytkownikom odbiór informacji.
Jak projektować efektywną strukturę strony?
Projektowanie efektywnej struktury strony to nie tylko kwestia estetyki, ale przede wszystkim funkcjonalności i użyteczności dla odwiedzających witrynę. W tym rozdziale omówimy, jak zaplanować strukturę strony, aby była logiczna i intuicyjna.
Planowanie struktury strony
To pierwszy i najważniejszy krok w procesie jej tworzenia. Zaczyna się od zrozumienia celów strony i poznania jej odbiorców. Następnie, na podstawie zgromadzonych informacji, tworzy się szkic struktury strony, który pokazuje, jak poszczególne podstrony i sekcje będą wzajemnie powiązane.
Kluczowe jest, aby struktura była logiczna i intuicyjna, tak aby użytkownicy mogli łatwo znaleźć potrzebne informacje. Planowanie struktury strony obejmuje również decyzje dotyczące układu strony i projektu graficznego, takie jak umiejscowienie menu nawigacyjnego, układ treści czy wybór kolorów i czcionek.
Tworzenie intuicyjnej nawigacji
Nawigacja witryny powinna być prosta i łatwa do zrozumienia, aby użytkownicy mogli szybko i łatwo znaleźć to, czego szukają. Odwiedzający nie powinien zastanawiać się, gdzie kliknąć, aby dostać się do pożądanej treści. Dobrze zaprojektowana nawigacja nie tylko poprawia doświadczenie użytkownika, ale także pomaga wyszukiwarkom zrozumieć strukturę Twojej strony, co może poprawić jej ranking w wynikach wyszukiwania.
Na czytelność i intuicyjność nawigacji składają się: jasne i zrozumiałe etykiety menu, logiczne grupowanie podobnych stron oraz użycie standardowych ikon i terminologii.
Znaczenie mapy strony
Mapa strony to narzędzie, które pomaga zarówno użytkownikom, jak i wyszukiwarkom zrozumieć strukturę strony internetowej. Jest to rodzaj spisu treści, który pokazuje, jak strona jest zorganizowana, i linkuje do wszystkich jej głównych sekcji. Dla użytkowników, mapa strony może służyć jako pomocniczy środek nawigacji, szczególnie w dużych witrynach z wieloma podstronami.
Dla wyszukiwarek, mapa strony jest kluczowym elementem SEO, ponieważ pomaga robotom wyszukiwarek zrozumieć, jakie treści są dostępne na stronie, i jak są ze sobą powiązane.
Rola treści w strukturze strony
Treść jest sercem każdej strony internetowej. To, co oferujesz swoim użytkownikom w postaci treści, nie tylko definiuje, kim jesteś jako marka, ale także wpływa na to, jak użytkownicy i wyszukiwarki postrzegają Twoją stronę.
Jak treść wpływa na strukturę strony?
Treść odgrywa kluczową rolę w kształtowaniu struktury strony internetowej. To, co publikujesz na swojej stronie, nie tylko informuje użytkowników o tym, co oferujesz i kim jesteś, ale także wpływa na to, jak Twoja strona jest zorganizowana i jak jest postrzegana przez wyszukiwarki. Na przykład, struktura Twojej strony może być zorganizowana wokół różnych kategorii treści. Ponadto, jakość i ilość Twojej treści może wpływać na to, jaką pozycję witryna zajmie w pozycjach wyszukiwania.
Optymalizacja treści dla struktury strony
Optymalizacja treści dla struktury strony to proces dostosowywania i organizowania treści w taki sposób, aby poprawić doświadczenie użytkownika i wyniki SEO. Obejmuje to takie działania jak:
zachowanie uporządkowanej i łatwej do zrozumienia formy,
używanie odpowiednich nagłówków do wyróżnienia odrębnych sekcji,
zapewnienie, że treść jest zgodna z tematem i celami strony.
Optymalizacja treści może również obejmować użycie słów kluczowych i fraz, które są istotne dla Twojej branży i klientów, co może pomóc w poprawie widoczności strony w wynikach wyszukiwania.
Infografika: Poprawna struktura strony internetowej – krótki przewodnik.
Szybkość strony to jeden z kluczowych czynników, które wpływają na doświadczenie użytkownika i wyniki SEO. Użytkownicy oczekują szybkiego ładowania strony, a wyszukiwarki, takie jak Google, uwzględniają szybkość strony jako jeden z czynników rankingu.
Jak szybkość strony wpływa na SEO?
Szybkość strony ma bezpośredni wpływ na optymalizację pod kątem wyszukiwarek (SEO). Wyszukiwarki, takie jak Google, uwzględniają szybkość ładowania strony jako jeden z kluczowych czynników rankingowych. Dlaczego? Ponieważ szybkość strony ma bezpośredni wpływ na doświadczenie użytkownika. Strony, które ładują się wolno, mogą frustrować użytkowników i skłonić ich do opuszczenia strony, co zwiększa wskaźnik odrzuceń. Z drugiej strony, szybko ładujące się strony mogą poprawić doświadczenie użytkownika, zatrzymywać go na dłużej i zwiększać prawdopodobieństwo konwersji.
Więcej informacji na temat wpływu parametrów witryny na pozycję w wynikach wyszukiwania możesz znaleźć w naszym artykule poświęconym Core Web Vitals.
Optymalizacja strony pod kątem szybkości
Istnieje wiele technik optymalizacji, które mogą pomóc w poprawie szybkości strony. Do najważniejszych należą:
minimalizacja kodu CSS, JavaScript i HTML,
optymalizacja obrazów (poprzez kompresję, zmniejszanie rozmiaru i użycie odpowiednich formatów),
wykorzystanie buforowania przeglądarki,
ograniczenie liczby zapytań HTTP
korzystanie z sieci dostarczania treści (CDN).
Nawet niewielkie poprawki w szybkości ładowania strony mogą mieć duży wpływ na doświadczenie użytkowników i wyniki SEO.
Linkowanie wewnętrzne i jego znaczenie dla struktury strony
Linkowanie wewnętrzne to kolejny ważny element struktury strony, który pomaga użytkownikom i wyszukiwarkom nawigować po stronie i rozumieć jej treść.
Co to jest linkowanie wewnętrzne?
Linkowanie wewnętrzne jest procesem łączenia hiperłączami różnych miejsc znajdujących się w obrębie witryny. Linki wewnętrzne mogą prowadzić do różnych rodzajów stron, takich jak strony produktów, artykuły na blogu, strony kategorii i wiele innych.
Dobre linkowanie wewnętrzne pomaga w poprawie doświadczenia użytkownika, ponieważ ułatwia mu znalezienie potrzebnych informacji. Ponadto, wyszukiwarki premiują rozbudowane system linkowania wewnętrznego wyższą pozycją w wynikach odpowiedzi na zapytania Internautów.
Jak skutecznie tworzyć linki wewnętrzne?
Tworzenie dobrych linków nie jest trudne. Wystarczy zastosować się do kilku prostych zasad. Aby Twoje linki wewnętrzne były skuteczne:
Używaj naturalnych linków – zadbaj by łącza pasowały do kontekstu i były się naturalne dla czytelnika.
Linkuj do ważnych podstron – upewnij się, że do najważniejszych podstron w serwisie prowadzi wiele linków,
Używaj precyzyjnych anchor textów (tekstów-kotwic) – dopilnuj aby tekst, który jest linkiem, jasno opisywał, co użytkownik zobaczy po kliknięciu na łącze.
Nie przesadzaj z liczbą linków – zbyt wiele linków na jednej stronie może być mylące dla użytkowników i może zaszkodzić Twojemu SEO.
Utrzymuj aktualność linków – regularnie sprawdzaj swoje łącza wewnętrzne, aby upewnić się, że są aktualne i nie prowadzą do nieistniejących lokalizacji.
Przyjrzyjmy się teraz adresom URL z punktu widzenia poprawności struktury strony internetowej. Jak powinny być tworzone adresy, aby wspierać poruszanie się po witrynie i ułatwiać działanie robotom wyszukiwarek.
Jak wygląda idealny URL?
Idealny URL (Universal Resource Locator) jest prosty, zrozumiały i dobrze opisuje treść strony. Oto kilka cech optymalnego adresu wraz z praktycznymi wskazówkami:
Krótki i zwięzły – staraj się unikać w adresach słów i znaków, które nie są potrzebne do przekazania trafnej informacji o zawartości podstrony.
Opisowy – używaj słów kluczowych opisujących treść podstrony, aby dawać użytkownikom i wyszukiwarkom jasny obraz tego, co znajduje się na stronie
Łatwy do odczytania – unikaj skomplikowanych ciągów znaków i kodów. Adres powinien być łatwy do odczytania dla ludzi na pierwszy rzut oka.
Używa myślników do oddzielania słów – stosuj myślniki do oddzielania poszczególnych słów w adresach, aby poprawić ich czytelność dla ludzi.
Zgodny z treścią strony – zadbaj, by URL odpowiadał treści strony. Jeśli zmienisz treść strony, rozważ aktualizację adresu i zastosowanie przekierowań.
Zasady tworzenia URL dla SEO
Oprócz przytoczonych wyżej, uniwersalnych reguł tworzenia optymalnych adresów URL warto uwzględnić specyficzne zalecenia ważne z powodu wyszukiwarek.
Unikaj głębokiej struktury folderów – staraj się utrzymać strukturę URL jak najprostszą.
Utrzymuj spójność – stosuj konsekwentne konwencje nazewnictwa URL na całej stronie.
Znaczenie responsywności dla struktury strony
Systematycznie rośnie odsetek użytkowników posługujących się urządzeniami mobilnymi. Nie pozostaje to bez wpływu na to jaka powinna być struktura strony internetowej. Nic więc dziwnego, że responsywność jest dziś must-have każdej witryny, która ma ambicje być odwiedzana i wysoko oceniana przez wyszukiwarki.
Co to jest responsywność?
Responsywność to podejście do projektowania stron internetowych, które zapewnia, że strona poprawnie wyświetla się na różnych urządzeniach, niezależnie od rozmiaru ekranu. Czy to na komputerze stacjonarnym, laptopie, tablecie czy smartfonie, responsywna strona dostosowuje swoje rozmiary, układ i funkcje do ekranu, na którym jest wyświetlana. To oznacza, że elementy strony, takie jak obrazy, teksty i przyciski, automatycznie zmieniają swoje położenie i rozmiar, aby zapewnić optymalne doświadczenie użytkownika na każdym urządzeniu.
Responsywność ma bezpośredni wpływ na optymalizację pod kątem wyszukiwarek (SEO). Wyszukiwarki, takie jak Google, preferują strony responsywne, ponieważ zapewniają lepsze doświadczenie użytkownikom na różnych urządzeniach. Google stosuje tzw. „mobile-first indexing”, co oznacza, że indeksuje i ocenia strony na podstawie ich wersji mobilnej.
Warto zauważyć, że strony, które nie są responsywne, mogą być trudniejsze do nawigacji dla użytkowników na urządzeniach mobilnych, co prowadzi najczęściej do wyższych wskaźników odrzuceń i niższych czasów spędzonych na stronie. Z kolei oba te czynniki mogą negatywnie wpływać na rankingi w wynikach wyszukiwania.
Podsumowanie
Poprawna struktura strony internetowej jest kluczowa dla doświadczenia użytkownika i optymalizacji pod kątem wyszukiwarek (SEO). Ważne jest zrozumienie różnych elementów struktury strony, takich jak linkowanie wewnętrzne, struktura URL, responsywność i szybkość strony.
Każdy element strony, wpływa na to, jak jest postrzegana przez użytkowników i wyszukiwarki. Dlatego ważne jest, aby do projektowania struktury strony podchodzić w sposób strategiczny i przemyślany, zaczynając od ustalenia celu strony i poznania jej odbiorców.
„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 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.
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.
Od czego zależy koszt stworzenia strony internetowej?
Koszt stworzenia strony internetowej nie jest stałą wartością – zależy od wielu czynników, które mogą znacząco wpłynąć na ostateczną cenę. Dowiedz się więcej na temat tych czynników.
Prosta, czy rozbudowana struktura?
Pierwszym parametrem wpływającym na koszt stworzenia strony internetowej jest jej struktura. Prosta strona, składająca się z kilku podstron, będzie zdecydowanie tańsza od rozbudowanej witryny z wieloma sekcjami i podstronami. Dlaczego? Ponieważ tworzenie każdej dodatkowej podstrony wiąże się z dodatkowym czasem pracy nad projektem. Prosta strona może składać się z głównej strony, strony o nas, oferty i kontaktu. Rozbudowana strona może zawierać dodatkowo blog, sklep internetowy, galerię, forum dyskusyjne i wiele innych. Im więcej elementów, tym większy koszt.
Agencja, czy freelancer?
Kolejnym czynnikiem wpływającym na koszt stworzenia strony internetowej jest wybór wykonawcy. Zdecydowanie się na współpracę z agencją interaktywną czy freelancerem ma swoje plusy i minusy.
Agencje zazwyczaj oferują pełen zakres usług – od projektowania, przez kodowanie, po optymalizację SEO i wsparcie po uruchomieniu strony. Jednak za tę kompleksowość trzeba zapłacić. Freelancerzy zazwyczaj są tańsi, ale mogą nie oferować tak szerokiego zakresu usług. Ważne jest, aby dokładnie zrozumieć, co jest zawarte w ofercie, zanim podejmiesz decyzję. Pamiętaj, że najtańsza oferta nie zawsze jest najlepsza.
Gotowy szablon, czy indywidualny projekt graficzny
Wybór pomiędzy gotowym szablonem a indywidualnym projektem graficznym to kolejna decyzja, która wpływa na koszt stworzenia strony internetowej.
Gotowe szablony są zazwyczaj tańsze i szybsze do wdrożenia, ale mogą nie oferować takiej unikalności i elastyczności, jak indywidualny projekt. Z drugiej strony, indywidualny projekt graficzny pozwala na stworzenie strony dokładnie według Twoich potrzeb i oczekiwań. Trzeba jednak wspomnieć, że proces powstawania unikalnego projektu jest czasochłonny i kosztuje więcej.
Wybór pomiędzy tymi dwoma opcjami zależy od Twojego budżetu, oczekiwań co do wyglądu strony oraz czasu, jaki jesteś w stanie poświęcić na jej stworzenie.
Strona zaprojektowana zgodnie z zasadami UX/UI?
Projektowanie strony zgodnie z zasadami UX (User Experience) i UI (User Interface) to kolejny aspekt, który wpływa na koszt tworzenia strony internetowej. UX dotyczy optymalizacji strony pod kątem jej użyteczności i przyjazności dla użytkownika, podczas gdy UI skupia się na wizualnym aspekcie strony. Strony zaprojektowane z uwzględnieniem obu zbiorów zasad są zazwyczaj bardziej atrakcyjne dla użytkowników, co przekłada się na lepsze wyniki biznesowe.
Warto wiedzieć, że profesjonalne projektowanie UX/UI wymaga specjalistycznej wiedzy i doświadczenia, co może zwiększyć koszt stworzenia strony. Jednak inwestycja w UX design zdecydowanie przynosi znaczne korzyści w dłuższej perspektywie.
Infografika: Od czego zależy koszt zrobienia strony www.
Kolejnym czynnikiem wpływającym na koszt tworzenia strony internetowej jest sposób jej budowy.
Z jednej strony masz do wyboru zaangażowanie posiadającego wiedzę i umiejętności developera (lub całego zespołu), z drugiej zaś użycie narzędzia, które pozwala na tworzenie strony za pomocą mechanizmu przeciągnij i upuść.
Kodowanie strony od podstaw daje kontrolę nad jej wyglądem i funkcjonalnością, chociaż trwa dłużej i kosztuje więcej. Page builder ma ograniczone możliwości osadzania funkcjonalności i z reguły produkuje witryny technicznie nadmiarowe. W efekcie tańsze i szybsze działanie prowadzi do stworzenia uproszczonej strony, która ma gorsze parametry Web Core Vitals.
Wybór pomiędzy opcjami zależy od Twojego budżetu, umiejętności i oczekiwań co do funkcjonalności strony.
Indywidualna grafika lub zdjęcia
Innym istotnym czynnikiem wpływającym na koszt stworzenia strony internetowej jest wybór grafiki i zdjęć.
Indywidualna grafika i zdjęcia mogą znacznie podnieść atrakcyjność Twojej strony, nadając jej unikalny i profesjonalny wygląd. Jednak taka opcja wiąże się z dodatkowymi kosztami. Zatrudnienie grafika czy fotografa to wydatek, który rozpoczyna się od kilkuset złotych, sięgając do kilkunastu (lub więcej) tysięcy złotych. Wszystko zależy od zakresu prac i doświadczenia specjalisty.
Z drugiej strony, korzystanie z darmowych zasobów jest tańszą alternatywą, ale może ograniczać Twoje możliwości i nie zapewnić unikalności. Ważne jest, aby dokładnie przemyśleć swoje potrzeby i budżet przed podjęciem decyzji.
Dodatkowe funkcje
Ostatnim, ale nie mniej ważnym czynnikiem wpływającym na koszt tworzenia strony internetowej są dodatkowe funkcje. Czy strona ma zawierać sklep internetowy, formularz kontaktowy, system rezerwacji, blog, galerię zdjęć, czy może integrację z mediami społecznościowymi? Każdy z tych elementów może zwiększyć koszt tworzenia strony. Dodatkowo, niektóre z nich mogą wymagać regularnej aktualizacji i konserwacji, co również generuje dodatkowe koszty.
Przy planowaniu budżetu na witrynę www, warto uwzględnić nie tylko ile kosztuje zrobienie strony internetowej, ale także utrzymania. Warto też pamiętać, że strona internetowa to inwestycja, która powinna przynieść korzyści w dłuższej perspektywie.
Ile kosztuje zrobienie prostej strony internetowej One Page?
Prosta strona internetowa typu One Page to opcja, która cieszy się popularnością, szczególnie wśród małych firm i start-upów. Tego typu witryna składa się z jednej strony, na której umieszczone są wszystkie niezbędne informacje.
Ceny mogą zaczynać się już od kilkuset złotych za gotowy szablon, do kilku tysięcy złotych za indywidualny projekt. Pamiętaj jednak, że koszt może wzrosnąć, jeśli zdecydujesz się na dodatkowe funkcjonalności, takie jak formularz kontaktowy, galeria zdjęć czy integracja z mediami społecznościowymi.
Ile kosztuje stworzenie strony internetowej dla firmy z kilkoma podstronami?
Taki wariant to bardziej skomplikowane zadanie, które wiąże się z wyższymi kosztami. Ich ostateczna wysokość zależy głównie od złożoności projektu, osadzonej funkcjonalności i zastosowanej grafiki.
Ceny mogą zaczynać się od kilku tysięcy złotych za prostą stronę z gotowym szablonem, do kilkudziesięciu tysięcy złotych za rozbudowany projekt z indywidualnym designem i wieloma funkcjonalnościami.
Ile kosztuje zrobienie strony internetowej ze sklepem i blogiem?
Stworzenie strony internetowej ze sklepem online i blogiem to zadanie, które wymaga dużo pracy i specjalistycznej wiedzy. Witryna nie tylko musi być atrakcyjna wizualnie, ale także funkcjonalna i bezpieczna dla użytkowników. Koszt takiej strony zależy m.in. od liczby produktów w sklepie, złożoności systemu płatności oraz regularności aktualizacji bloga.
Ceny mogą zaczynać się od kilkunastu tysięcy złotych za prosty sklep z blogiem, do kilkudziesięciu tysięcy złotych za rozbudowany projekt z wieloma funkcjonalnościami.
Szukasz doświadczonego wykonawcy firmowej strony www?
Posiadanie strony internetowej wiąże się nie tylko z kosztem jej stworzenia, ale także z dalszymi wydatkami, które są niezbędne do jej utrzymania i aktualizacji.
Pierwszym z nich jest koszt hostingu, czyli usługi przechowywania danych strony na serwerze. Ceny mogą się różnić w zależności od dostawcy i pakietu usług, ale zazwyczaj wynoszą od kilkudziesięciu do kilkuset złotych rocznie.
Kolejnym kosztem jest opłata za domenę, czyli adres, pod którym Twoja strona jest dostępna w Internecie. Koszt domeny zależy od jej końcówki (.pl, .com, .eu itp.) i wynosi zazwyczaj od kilkudziesięciu do kilkuset złotych rocznie.
Jeśli Twoja strona zawiera sklep internetowy, musisz także uwzględnić koszty związane z systemem płatności. Mogą to być opłaty stałe lub procent od każdej transakcji.
Dodatkowo, strona internetowa wymaga regularnej aktualizacji i konserwacji. Może to obejmować aktualizację treści, dodawanie nowych produktów do sklepu, aktualizację oprogramowania, czy naprawę ewentualnych błędów. Koszt tych usług zależy od ich zakresu i częstotliwości.
Podsumowanie
Podsumowując, koszt stworzenia strony internetowej zależy od wielu czynników, takich jak jej złożoność, wybór wykonawcy, czy dodatkowe funkcjonalności. Może to być od kilkuset złotych za prostą stronę typu One Page, do kilkudziesięciu tysięcy złotych za rozbudowany projekt ze sklepem online i blogiem. Pamiętaj jednak, że strona internetowa to nie tylko koszt, ale przede wszystkim inwestycja, która ma przynieść korzyści dla Twojego biznesu. Dlatego warto zainwestować w profesjonalne usługi, które zapewnią Ci atrakcyjną i funkcjonalną stronę, dostosowaną do Twoich potrzeb.
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ą.
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.
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.
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.
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ń.
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:
Zidentyfikuj potencjalne błędy: Rozważ wszystkie możliwe błędy, które mogą wystąpić podczas interakcji użytkownika ze stroną.
Określ typ komunikatu: Zdecyduj, czy dany problem wymaga zastosowania błędu, ostrzeżenia, potwierdzenia, powiadomienia czy ich kombinacji przeplatanej akcjami użytkownika.
Napisz jasny komunikat: Używaj prostych, konkretnych sformułowań. Komunikat powinien być zrozumiały, precyzyjny i pomocny.
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?
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.
Wyraźna lokalizacja: Komunikat powinien być wyświetlany w miejscu, które jest łatwo zauważalne, ale nie przeszkadza w korzystaniu ze strony.
Czytelność: Komunikaty powinny być napisane jasnym, zrozumiałym językiem i wyróżniać się na tle strony.
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.
Interaktywność: Jeśli to możliwe, daj użytkownikowi możliwość interakcji z komunikatem, na przykład zamknięcia go po przeczytaniu.
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.
Rola procesów biznesowych w projektowaniu stron internetowych
W dobie cyfryzacji, projektowanie stron internetowych wymaga nie tylko umiejętności technicznych i artystycznych, ale także zrozumienia procesów biznesowych. Procesy biznesowe, od interakcji z klientem po logistykę, stanowią o unikalności firmy i decydują o jej sukcesie. Ich odzwierciedlenie na stronie internetowej jest kluczowe dla osiągnięcia skuteczności.
Strona internetowa, która nie jest zintegrowana z procesami biznesowymi firmy, która nie jest przedłużeniem działania przedsiębiorstwa w Internecie to poważny problem. Taka witryna może być nie tylko nieefektywna, ale może także zniechęcać do współpracy potencjalnych i obecnych partnerów.
Z drugiej strony, strona dobrze zaprojektowana z uwzględnieniem procesów biznesowych, może poprawić efektywność, przyczynić się do zwiększenia zadowolenia klientów i ostatecznie prowadzić do wzrostu biznesu.
Poznanie i zrozumienie procesów biznesowych klientów
Kluczowym elementem w projektowaniu strony internetowej, która uwzględnia procesy biznesowe, jest głębokie zrozumienie tych procesów. Przyjmuje się, że procesy biznesowe to zbiór powiązanych działań lub zadań, które są realizowane w celu osiągnięcia konkretnego rezultatu.
Aby efektywnie zrozumieć te procesy, projektanci muszą dogłębnie poznać działalność klienta. To wymaga od nich umiejętności analizy i empatii, by zrozumieć cele biznesowe, oczekiwania klientów firmy, a także sposób, w jaki firma działa na co dzień.
Dobrym narzędziem do poznania procesów jest brief strony interentowej. Najczęściej daje on jednak tylko dość ogólny pogląd na sposób realizacji np. działań sprzedażowych. Dlatego też typową praktyką są warsztaty lub cykle warsztatów, na których szczegółowo omawiane są poszczególne procesy.
Integracja stron internetowych z procesami biznesowymi
Integracja stron internetowych z procesami biznesowymi to kluczowy etap, który pozwala na wykorzystanie pełnego potencjału funkcjonowania w Sieci. W praktyce oznacza to zapewnienie, aby strona nie była tylko wizytówką firmy, ale aktywnie wspierała jej operacje biznesowe.
Na przykład, jeżeli firma sprzedaje produkty online, strona powinna być zoptymalizowana pod kątem procesu zakupowego – od wyszukiwania produktu po finalizację transakcji. Jeżeli natomiast firma oferuje usługi, strona powinna ułatwiać potencjalnym klientom zrozumienie oferty, skontaktowanie się i umówienie spotkania.
Integracja strony z procesami biznesowymi może przynieść wiele korzyści. Począwszy od automatyzacji czynności np. poprzez zmniejszenie obciążenia działu wsparcia klientów po poprawę skuteczności dzięki dopracowaniu użyteczności witryny, czyli poprawie user experience – UX. W każdym przypadku dobrze wykonana integracja prowadzi do zwiększenia zyskowności – czy to przez redukcję kosztów, czy przez zwiększenie przychodów.
Projektowanie strony internetowej jako narzędzia biznesowego
Strona internetowa, dobrze zaprojektowana z uwzględnieniem procesów biznesowych, może stać się cennym narzędziem wspierającym prowadzenie firmy. Począwszy od marketingu i sprzedaży, przez obsługę klienta, aż po zarządzanie zasobami, witryna może skutecznie wspierać różne obszary biznesu.
Wspomniałem o znaczeniu zrozumienia biznesu klienta przez projektantów. Należy jednak pamiętać, że wdrożenie i narzędziowe posługiwanie się witryną nie dzieje się raz na zawsze. Niezbędne jest ciągłe monitorowanie i optymalizacja strony, aby mogła ona efektywnie wspierać procesy biznesowe i pomagać osiągać zmienne w czasie cele.
Uwzględnianie funkcjonalności procesów biznesowych na stronach internetowych
Funkcjonalność strony internetowej jest kluczowa dla odzwierciedlenia i wspierania procesów biznesowych. W praktyce, uwzględnia ona integrację elementów strony, które umożliwiają efektywne wykonanie procesów online.
Przykładowo, jeśli firma realizuje sprzedaż online, kluczowe jest zapewnienie łatwego procesu zakupu. Oznacza to, że krytyczne znaczenie dla procesu mają funkcje wyszukiwania, filtrowania i sortowania produktów. Równie istotny jest sposób dodawania produktów do koszyka i samej finalizacji transakcji. Jeżeli natomiast proces biznesowy obejmuje obsługę klienta, strona powinna zawierać łatwo dostępne narzędzia komunikacji, takie jak np. formularze kontaktowe czy chat na żywo.
Każda funkcja strony powinna więc być zaprojektowana tak, aby jak efektywnie wspierać realizację procesów biznesowych. W praktyce dobrym sprawdzianem czy projekt strony internetowej spełnia te oczekiwania jest przeprowadzenie audytu UX lub przynajmniej samodzielna weryfikacja zgodności z heurystykami Nielsena.
Infografika: Tworzenie stron www z uwzględnieniem procesów biznesowych.
Tworzenie intuicyjnego interfejsu użytkownika (UI) dla procesów biznesowych
Intuicyjny interfejs użytkownika (UI) jest kluczowy dla efektywnego wspierania procesów na stronie internetowej. Dzięki niemu użytkownik może łatwo poruszać się po stronie i skutecznie realizować zadania związane z procesami biznesowymi.
Przy tworzeniu UI, warto zastosować zasady projektowania zorientowanego na użytkownika. Oznacza to, że interfejs powinien być zaprojektowany w taki sposób, aby był zrozumiały i łatwy w obsłudze. Ważne jest też, aby UI odzwierciedlał logikę procesów biznesowych, tak aby użytkownik mógł intuicyjnie przewidzieć kolejne kroki.
W praktyce może to oznaczać, na przykład, zaprojektowanie procesu zakupu, który krok po kroku prowadzi klienta do finalizacji transakcji, czy też stworzenie systemu wsparcia, który łatwo prowadzi do odpowiedzi na pytania klienta.
Dostosowywanie strony internetowej do specyficznych etapów procesów biznesowych
Każdy proces składa się z różnych etapów, które mają swoje specyficzne wymagania. Dostosowanie strony internetowej do tych etapów jest kluczowe dla jej efektywności.
Na przykład, w procesie sprzedaży online, istotne są etapy takie jak prezentacja produktu, dodawanie do koszyka, realizacja płatności i potwierdzenie zakupu. Każdy z tych etapów wymaga innego podejścia i różnych funkcji strony. Dobrze zaprojektowana strona będzie uwzględniać te różnice, dostarczając użytkownikowi optymalne doświadczenie na każdym etapie procesu biznesowego.
Wykorzystywanie technologii i narzędzi do optymalizacji procesów biznesowych online
Optymalizacja procesów biznesowych online jest kluczowa dla skuteczności strony internetowej. Można to osiągnąć dzięki wykorzystaniu odpowiednich technologii i narzędzi.
Na przykład, narzędzia analityczne, takie jak Google Analytics, pozwalają na śledzenie zachowań użytkowników na stronie i identyfikację obszarów do poprawy. CRM (Customer Relationship Management) pomaga natomiast w zarządzaniu relacjami z klientami i optymalizacji procesów sprzedaży.
Również technologie takie jak AI (sztuczna inteligencja) i ML (machine learning) mogą być wykorzystane do optymalizacji procesów realizowanych online. Mogą one pomóc w personalizacji doświadczeń użytkowników, prognozowaniu trendów czy automatyzacji rutynowych zadań.
Testowanie i mierzenie efektywności strony internetowej w kontekście procesów biznesowych
Po opracowaniu strony internetowej, kluczowe jest monitorowanie jej efektywności i regularne testowanie. Niezbędne jest to do zrozumienia, jak strona wspiera procesy biznesowe i jak można ją ulepszyć.
Analiza danych, takich jak ruch na stronie, czas spędzony na poszczególnych podstronach, czy współczynnik odrzuceń, może dostarczyć cennych informacji na temat skuteczności strony. Przeprowadzanie testów A/B może również pomóc zrozumieć, jakie elementy strony są najbardziej efektywne.
W kontekście procesów biznesowych, warto skupić się na miarach, które bezpośrednio odzwierciedlają ich efektywność. Może to być na przykład liczba zamówień dla procesu sprzedaży, czy czas reakcji na zapytania klientów w przypadku procesu obsługi klienta.
Potrzebujesz strony wspierającej Twój biznes?
Zaprojektujemy ją dla Ciebie – prześlij brief projektu
Doskonalenie strony internetowej w oparciu o analizę procesów biznesowych
Zrozumienie i monitorowanie procesów biznesowych są podstawą do doskonalenia firmowej strony internetowej. Właściwa analiza tych procesów umożliwia identyfikację obszarów, które mogą być ulepszone, aby strona była jeszcze bardziej efektywna. W praktyce może to oznaczać analizę danych o użytkownikach, ich zachowaniach i interakcjach z poszczególnymi elementami strony.
Na przykład, jeśli w trakcie analizy okaże się, że wraz ze wzrostem liczby odwiedzających sklep internetowy wzrasta współczynnik porzuconych koszyków warto przyjrzeć się checkoutowi. Z dużym prawdopodobieństwem można założyć, że proces sprzedażowy jest niezrozumiały lub niewygodny dla klientów. Usprawnienie procesu powinno w krótkim czasie przełożyć się na zauważalny efekt biznesowy.
Jeśli natomiast zauważysz, że obsługa klienta jest niewystarczająca, możesz dodać dodatkowe kanały komunikacji lub poprawić istniejące. W ten sposób analiza procesu biznesowego ulokowanego na stronie może być źródłem zmian wykraczających poza witrynę.
Podsumowanie
Projektowanie stron internetowych, które efektywnie wspierają procesy biznesowe, jest kluczowe dla sukcesu biznesowego. Poprzez dogłębne zrozumienie procesów biznesowych klientów, integrację strony internetowej z tymi procesami i tworzenie intuicyjnego interfejsu użytkownika, możemy stworzyć stronę, która jest nie tylko funkcjonalna, ale też użyteczna.
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: LoFi i HiFi.
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.
Dlaczego nie ma uniwersalnego przepisu na proces projektowania strony internetowej?
Czy istnieje uniwersalny przepis na projektowanie strony internetowej? Krótka odpowiedź brzmi: nie. Dlaczego? Ponieważ każda strona jest unikalna, tak jak cele jakie ma osiągać oraz jej użytkownicy.
Każdy projekt wymaga indywidualnego podejścia, dostosowanego do specyfiki marki, oczekiwań odbiorców, dynamicznie zmieniającego się rynku oraz postępu technologicznego. Elastyczność w procesie projektowania jest nie tylko pożądana, ale wręcz niezbędna. Uniwersalny przepis jest mitem. Projektanci witryn nie mają wyboru. Pozostaje im elastyczność, adaptacja i ciągłe uczenie się.
Proces projektowania stron internetowych – na czym polega elastyczność?
Elastyczność w projektowaniu stron internetowych to termin, który może wydawać się niejasny. Czym jest owa „elastyczność”? W kontekście procesu projektowania stron, elastyczność oznacza zdolność do dostosowywania się do różnych sytuacji, bez naruszania jakości końcowego produktu.
Inaczej mówiąc jest to strategia, która umożliwia uwzględnienie specyfiki klienta oraz branży w której działa, a także unikalnych cech oferowanego produktu, świadczonej usługi lub ogólniej: prowadzonej działalności.
Dostosowanie do potrzeb i specyfiki klienta
Każdy klient jest inny – ma swoje unikalne potrzeby, oczekiwania i cel, do którego dąży. Każdy działa w innej branży, co przekłada się zarówno na layout jak i na udostępniane przez witrynę funkcje. I wreszcie poszczególni klienci web designerów mają swój pomysł na prowadzenie biznesu. Elastyczny projektant potrafi zidentyfikować i spełnić te potrzeby tak, by gotowa witryna była zgodna z profilem i stylem klienta.
Specyfika i unikalność produktu, usługi lub marki
Elastyczność w projektowaniu stron internetowych wymaga również zrozumienia i podkreślenia unikalności produktu lub usługi. Każda marka ma swoje unikalne cechy, które powinny być wyeksponowane w celu wyróżnienia się na tle konkurencji. Wyjątkowe cechy produktu, innowacyjne elementy usługi czy charakterystyczny ton marki są czynnikami, które powinny znaleźć odpowiednie odzwierciedlenie w witrynie.
Znajomość branży przez projektantów
Pisząc o specyfice klienta, wspomniałem już o znaczeniu branży, w której działa. Znajomość branży przez projektantów jest kolejnym kluczowym elementem elastyczności w projektowaniu stron internetowych. Projektant, który rozumie specyfikę branży klienta, potrafi tak dostosować strukturę i funkcje strony, że użytkownicy odbierają witrynę jako profesjonalną.
Oczywiście nie sposób być jednocześnie ekspertem od e-commerce, edukacji, zdrowia, ubezpieczeń i technologii. Dlatego ogromne znaczenie ma faza researchu i przygotowań do projektu. Elastyczność polega tu głównie na zdolności do nauki i adaptacji do różnych środowisk.
Infografika: Na czym polega elastyczny proces projektowania strony www.
Z jakich etapów może składać się proces projektowania strony internetowej?
Projektowanie strony internetowej to skomplikowany proces, który składa się z wielu etapów. Każdy z nich ma wpływ na ostateczny efekt prac i wymaga zaangażowania ze strony designerów.
Warto pamiętać, że proces projektowy często jest dość dynamiczny i wymaga umiejętności reagowania na pojawiające się wyzwania. Często też kształt procesu zmienia się na skutek feedbacku od klienta i użytkowników strony.
Szczegółowa rozmowa z klientem
Pierwszym i kluczowym etapem procesu projektowania strony internetowej jest szczegółowa rozmowa z klientem. To w jej trakcie projektant dowiaduje się o oczekiwaniach zleceniodawcy, jego celach biznesowych, potrzebach i preferencjach.
Rozmowa może obejmować wiele aspektów, od funkcji, które powinna zawierać strona, po stylistykę, ton komunikacji i elementy marki, które należy uwzględnić.
Dobrą praktyką jest przygotowanie przez projektanta agendy lub scenariusza rozmowy, a przynajmniej checklisty z najważniejszymi tematami. W ramach elastycznego podejścia warto jednak pozwolić też na swobodne wypowiedzi klienta, które są bardzo często źródłem najcenniejszych informacji i wskazówek.
Badanie rynku i analiza konkurencji
To kolejna niezwykle ważna faza procesu tworzenia strony internetowej. Bardzo rzadko powstająca witryna oferuje tak unikalne treści, produkty lub rozwiązania, że designer nie ma rynkowego punktu odniesienia. Najczęściej firma i witryna klienta funkcjonuje w środowisku konkurencyjnym.
Dzięki badaniom i analizom możliwe jest zrozumienie do czego przyzwyczajeni są użytkownicy, jakiego typu architekturę informacji znają i akceptują. Z drugiej strony analiza konkurencji pozwala na zidentyfikowanie charakterystycznego języka i powszechnie stosowanych rozwiązań wzmacniających intuicyjność korzystania z serwisu. Paradoksalnie dobrze wykonana analiza podpowiada także jak wyróżnić ofertę klienta na tle konkurentów.
Budowa struktury
Budowa struktury, zwanej również architekturą informacji, to następny kluczowy etap procesu projektowania strony internetowej. Projektanci określają wtedy, jak strona będzie zorganizowana, gdzie będą umieszczone poszczególne elementy i jak będzie wyglądał system nawigacji.
Celem tej fazy jest stworzenie intuicyjnej i efektywnej ścieżki, po której użytkownicy będą poruszali się po witrynie w celu realizacji celów właściciela strony. Mówiąc inaczej, celem jest zwiększenie liczby konwersji realizowanych w serwisie – na przykład transakcji dokonanych w sklepie internetowym.
Tworzenie makiet stron
Następnym etapem po zdefiniowaniu struktury strony, jest tworzenie makiet (wireframes). Makiety UX są wstępnymi wizualizacjami strony. Pokazują, gdzie będą umieszczone poszczególne elementy takie jak nagłówki, teksty, obrazy, formularze itp. Pozwalają zrozumieć budowę witryny i mechanizmy nawigacji, ale nie mają ostylowania graficznego. Tworzenie makiet jest kluczowe dla zrozumienia, jak strona będzie wyglądać i funkcjonować, zanim zacznie się projektowanie warstwy graficznej.
Tworzenie koncepcji i szkiców
Po stworzeniu i udoskonaleniu makiet, następuje etap kreowania koncepcji graficznej strony spełniającej potrzeby klienta. W tej fazie powstają zarysy wariantów layoutu przyszłej witryny. Wersje, zbudowane na bazie wypracowanej wcześniej struktury i makiet, różnią się paletą kolorów, typografią i innymi elementami stylistycznymi. Odnoszą się zarówno do dominującego stylu branży, jak i do aktualnych trendów.
Gotowe szkice są prezentowane klientowi, aby uzyskać jego opinię i wybrać najlepszą koncepcję do dalszego rozwoju.
Etap projektowania graficznego strony to moment, kiedy witryna zaczyna nabierać ostatecznego kształtu.
Testowanie strony z udziałem użytkowników
Testowanie strony z udziałem użytkowników jest niezbędne do zapewnienia, że strona jest nie tylko atrakcyjna, ale przede wszystkim użyteczna. Ten etap skupia się na web usability, czyli na łatwości korzystania z strony. Projektant przeprowadza testy UX, które mogą obejmować obserwację, jak użytkownicy poruszają się po stronie, jak łatwo mogą znaleźć poszukiwane informacje i czy są w stanie łatwo wykonać pożądane działania.
Jednym z narzędzi, które mogą pomóc w tym procesie, jest Customer Journey Map, czyli mapa podróży klienta, która pokazuje, jak użytkownicy przechodzą przez różne etapy interakcji ze stroną.
Warto zaznaczyć, że opisane badania UX mogą być – i często są – prowadzone na etapie tworzenia makiet. Takie podejście pozwala uniknąć poprawek i modyfikacji stworzonej szaty graficznej.
Zamknięcie projektu
Zamknięcie projektu to ostatni etap procesu projektowania strony internetowej. Po zakończeniu wszystkich testów i wprowadzeniu ewentualnych poprawek, projekt jest gotowy do wdrożenia.
Mogłoby się wydawać, że rola projektanta jest zakończona. Jednak cechą elastycznych procesów projektowych jest to, że zamknięcie projektu jest początkiem kolejnej fazy życia witryny, czyli etapu monitorowania i udoskonalania. Bardzo często pierwszym zadaniem designera w tym obszarze jest nadzór autorski nad wdrożeniem projektu. W wielu przypadkach obserwacje uzyskane z monitoringu oraz opinie użytkowników strony dają wytyczne do zmian, poprawek i modyfikacji samego projektu.
Elastyczne projektowanie stron – jakie elementy procesu można pominąć?
Bazując na makietach i zaakceptowanych lub zaopiniowanych przez klienta szkicach, projektant „uzbraja stronę” w detale stylistyczne, kolory, czcionki, obrazy i teksty (docelowe lub częściej przykładowe, zwane potocznie Lorem ipsum lub Loremami).
Elastyczne projektowanie stron internetowych nie oznacza konieczności przechodzenia przez każdy możliwy etap w pełnym wymiarze. Czasami, w zależności od specyfiki projektu, pewne elementy mogą zostać skrócone lub zredukowane. Na przykład, jeśli strona jest projektowana dla istniejącej marki z dobrze zdefiniowaną tożsamością, niekonieczne może być przeprowadzanie pełnego procesu tworzenia koncepcji. W przypadku mniejszych projektów, testy UX mogą być uproszczone, choć nigdy nie powinny być całkowicie pominięte. Ważne jest, aby pamiętać, że elastyczność nie oznacza pomijania kluczowych etapów, ale dostosowywanie ich do konkretnych potrzeb i wymagań danego projektu.
Z czego nie wolno zrezygnować w procesie projektowania stron internetowych?
Elastyczność procesu nie daje jednak całkowitej swobody. Pominięcie niektórych kroków jest po prostu niemożliwe.
Niezbędne jest poznanie potrzeb klienta. Zaprojektowanie strony internetowej bez szczegółowej rozmowy z klientem zawsze skończy się niepowodzeniem. Nazwa firmy i dwuzdaniowy opis profilu działalności to stanowczo za mało, aby uruchomić proces projektowania.
Niezależnie od wielkości i skomplikowania projektu, kluczowe znaczenie ma projektowanie UX. Pominięcie faz budowy struktury i tworzenia makiet niezwykle często sprawia, że nie są uwzględnione potrzeby gości witryny. A nawet najpiękniej zaprojektowana strona nie przyniesie oczekiwanych efektów, jeśli nie będzie użyteczna.
Podsumowanie
Elastyczny proces projektowania strony internetowej to podejście, które pozwala dostosować proces do specyfiki klienta, produktu i branży.
W procesie projektowania strony ważne jest zrozumienie potrzeb klienta, unikalności produktu oraz specyfiki branży. Proces może składać się z różnych etapów, z których tylko niektóre można skrócić lub zredukować. Kluczowe fazy odpowiedzialne za kształt i użyteczność projektu nie mogą być pominięte.
Elastyczność w projektowaniu stron to nie tylko dostosowanie procesu, ale także gotowość do ciągłego uczenia się i adaptacji do zmieniających się trendów oraz potrzeb użytkowników.
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.
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:
Uproszczenie procesu zapisu na zabieg – persona korzysta z zabiegów często i zapisując się na zabiegi odczuwa dyskomfort fizyczny,
Dopracowana wersja responsywna – persona jest osobą aktywną zawodowo, pracuje w dużym mieście, korzysta na co dzień ze smartfona,
Dopasowany język i wzorce kulturowe – j.w. + pracuje w dużej firmie, jest przyzwyczajona do charakterystycznej komunikacji,
Opcja dla niezdecydowanych – persona ma problem z doborem zabiegów,
Krótkie jasne opisy zabiegów – j.w. + persona zapisując się na zabiegi często cierpi,
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?
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.
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?
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.
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.
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.
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.
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.
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.
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.
Ż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.
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.
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 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).
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.
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ć.
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.
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.
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.
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.
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.
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:
Wymagaj tylko o koniecznych danych – formularz danych oraz pozostałe sekcje muszą być skromne, dlatego proś tylko o informacje konieczne do realizacji zamówienia.
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.
Pamiętaj o pokazaniu podsumowania koszyka i oznaczeniu końcowego kosztu zamówienia wraz z kosztami dostawy.
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.
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.
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.
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.
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.
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ć.
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.
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.
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ść).
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:
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.
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.
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.
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.
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 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ć.
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.
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.
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:
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.
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ć.
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 przepisamiprzedsię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’.
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.
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.
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.
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.
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.
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ć.
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ę.
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.
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.
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.
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.
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ę
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.
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.
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.
Infografika: Różnice między UX Design i UI 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.
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
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 (footer)
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.
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?
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.
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.
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.
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.
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.
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?
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!
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.
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?
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.
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?
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.
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.
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.
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.
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.
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.
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.
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żą:
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.
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).
„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.
„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.
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.
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 poprawić użyteczność koszyka w e-sklepie.
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.
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ń.
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.
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.
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ą.
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: Elementy UX wpływające na zwiększenie sprzedaży.
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.
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.
