Użyteczność strony internetowej jak tego nie robić.

W poprzednim odcinku gdzie argumentowłem jakie formaty plików używać na stronach internetowych i dlaczego to nie jest docx, bohatersko walczyłem z przebrnięciem przez jedną stronę. Stronę na której użycie złego (w niektórych miejscach) formatu pliku powodowało u mnie niechęć dalszej eksploracji. 

Cała przygoda rozpoczęła się od magazynu samolotowego gdzie opis miejsca spowodował dodanie do do listy a sposób w jaki opowieść wciąga do wnętrza zmieniła zdanie na temat wizyty w Mołdawii. 

Opisywana przygoda z plikiem to jednak był początek historii - zanim do niego dotarłem walczyłem z topornym UXem, który skutecznie zmniejszał mój poziom ekscytacji jaki czułem po przeczytaniu (zakładam nie taniej) reklamy, wrzucając mnie w czeluści wyzwań i testując moją cierpliwość.

Gdyby nie chęć podzielenia się tym teraz pewnie bym zrezygnował dużo wcześniej, jednak oto gotów zrobić wszystko dla Ciebie drogi czytelniku z zawziętością mangusty wyklikałem elementy strony odnajdując (to co powinno w mojej opinii być na froncie) w głębinach architektury informacji oraz technicznego bałaganu. 

Jak poprawić użyteczność strony internetowej?

To, co uderzyło mnie (i kilka innych osób, którym pokazałem zdjęcie reklamy), to jak bardzo strona potrafiła zabić pozytywne emocje, jakie czuliśmy po jej przeczytaniu.

Kiszyniów był na naszej liście „do odwiedzenia”, ale mieliśmy jeden problem - wszyscy powtarzali, że „nie ma tam co robić dłużej niż jeden dzień”.
A więc znalezienie miejsca, które daje powód, by mimo wszystko tam polecieć, było jak objawienie.

Asconi Winery miało być tym powodem: lokalny folklor, tradycje, jedzenie, a do tego cztery baseny z widokiem na góry - brzmi jak spełnienie marzeń o idealnym weekendzie w Mołdawii.

Jeśli to brzmi dla Ciebie jak dobrze zrobiona reklama, to właśnie tak było.
Problem w tym, że ta historia kończy się w momencie, w którym klikniesz w link.

Zamiast kontynuacji doświadczenia, czeka na Ciebie zimny prysznic UX-u.
Strona główna, choć estetyczna, jest jak pięknie zaprojektowany labirynt: wszystko wygląda dobrze, dopóki nie próbujesz znaleźć wyjścia.

Zamiast płynnej ścieżki odkrywania, przypadkowe przekierowania.
Zamiast „Discover Winery” - kontakt.
Zamiast wina i relaksu - wkurzenie i ctrl+W.

I to jest właśnie sedno problemu:  Nie wystarczy mieć ładną stronę internetową.
Potrzebny jest plan architektury informacji, testowanie z prawdziwymi użytkownikami i logika podróży, która nie kończy się ślepą uliczką.

Bo inaczej cały budżet reklamowy, cała kreatywna narracja, całe zbudowane emocje - kończą się dokładnie tak, jak większość odwiedzin na tej stronie czyli przez zamknięcie karty.

Czy wiesz że?

Co nie zagrało a powinno i dlaczego dobrze wyglądająca strona to nie wszystko?

Najgorsze w tym wszystkim jest to, że nie miałem wygórowanych oczekiwań.
Nie chciałem wirtualnej wycieczki po winnicy w 3D ani historii rodu właścicieli sięgającej XIII wieku.
Chciałem tylko jednej rzeczy: sprawdzić dostępność i ceny.
Proste.

Żeby zaplanować budżet, urlop i przekonać się, czy warto się tam wybrać.
Nie sądzę, żeby to było zbyt odmienne od intencji innych osób, które zobaczyły reklamę w magazynie pokładowym - szczególnie biorąc pod uwagę ekstrawagancję linii lotniczych, które tę reklamę umieściły ;)

Strona wita mnie filmem: ładnym, klimatycznym, profesjonalnym.
Widać wino, jedzenie, uśmiechniętych ludzi, noclegi. Czyli dokładnie to, co już wiem z reklamy.

Problem zaczyna się po pierwszych dziesięciu sekundach.
Film zajmuje cały ekran - co na desktopie tworzy efekt tzw. fałszywej podłogi (false floor), wizualną iluzję, że to już koniec strony. Nie masz żadnej wskazówki, że pod spodem kryje się więcej treści.

Gdyby nie moja determinacja, nie wiem czy przesunąłbym dalej odkrywając coraz to mniej ekscytujące sekcje.

Pod filmem jest ich kilka:

• jedna o winiarni krótki opis,
• druga o rodzinnej pasji, trzecia... z jakiegoś powodu znów o winiarni,
• a następna o domach gościnnych, która kończy się ślepą uliczką.

Zero możliwości przejścia dalej. Nie wiadomo, czy można zarezerwować, obejrzeć pokoje, czy to tylko dekoracja.

Na deser: linki na stronie głównej przenoszą do sekcji „kontakt” - jakby ktoś uznał, że nic tak nie motywuje użytkownika jak telefon na numer z Mołdawii.

Okej… entuzjazm już mocno przygasł, ale nie poddaję się.
Wchodzę w menu główne, w którym odnajduję to czego szukałem od początku.
Czyli wszystko to, co powinno być na wierzchu, schowane jest dwa kliknięcia głębiej.

I to właśnie sedno problemu:
Nie wystarczy, że strona dobrze wygląda.
Jeśli nawigacja jest myląca, informacja rozproszona, a ścieżka użytkownika prowadzi w kółko, to nawet najpiękniejszy layout nie uratuje konwersji.

Bo design bez logiki to tylko ładne tło dla frustracji. A użytkownik, który nie znalazł tego, czego szukał, nie dokona rezerwacji tylko zostawi Cię z przepalonymi pieniędzmi za reklamę i artykułem blogowym, o tym jak ciężko się rezerwuje.

Czas na rezerwację czyli zamieszania i błędy UX w nowej odsłonie.

Jeśli myślisz, że teraz kiedy poczułem się na równi z Kolumbem jak dotarł do Ameryki, bo przecież mam sekcję o noclegach to nic bardziej mylnego. Po pół radosnym wejściu do opcji “Guesthouse” zaczynam czytać o domkach, pokojach i tym co za ile…

Poczytałem o tym mołdawskim stylu, architekturze, tradycyjnym wyglądzie - znów poniekąd to wszystko co było w reklamie, więc jest to o co mi chodziło. 

 Zaraz pod opisem czeka na mnie wybór… 

• Suite / Family Room
• Twin Room
• King Room

Możliwość dokupienia pakietu dla… pupila, jednak bez wyjaśnienia, która wersja jest dla kogo. Dzięki mojemu potężnemu umysłowi wywnioskowałem, że odpada Family Room jeśli nie zabiorę całej rodziny, natomiast nawet mój przepalający się mózg nie zrozumiał co to king room (może muszę przyjechać w koronie?).

Ale dobra - klikam “check availability” w twin room - ten wybór wydaje się najbardziej logiczny przechodzę na stronę - “Double Room”! Na stronie dostaję te same zdjęcia, które już widziałem + kilka informacji odnośnie samego pokoju, informacji, które spokojnie można by było zmieścić na poprzedniej stronie (ta sekcja wyglądała jak zaprojektowana w duchu mobile first).

Czego się spodziewam? Strony z formularzem rezerwacji potwierdzającej, że rezerwuję właściwy obiekt. Co dostaję? Stronę z obiektem, gdzie do formularza muszę się dostać przewijając znowu witrynę. Wiem, wiem, książę nie lubi przewijać - ale pomyśl sobie: czy w tym momencie, po tylu przejściach tobie by to nie przeszkadzało? 

Formularz - jest, dobra check in check out, standardowe następnie zarezerwuj 1 lub z 2 dostępnych zakwaterowań… eee zakładam, że 1? Bo teraz znów nie wiem co rezerwuję, czy ten 2 to osobny pokój? Ktoś będzie z nami spał jak w hostelu? Nieważne jestem tak blisko - book dammit. 

Boss final level - formularz danych osobowych... Ile osób - k…wa teraz się pytacie? PO CO?! Skoro cena jest za pokój, czy o czymś nie wiem? Dobra cena - podana w MDL. Znów pierwsze (nie tylko moje) co zrobiłem po jej ujrzeniu to przeskoczenie i wyszukanie “xxx MDL na PLN” bo skąd mam wiedzieć ile to. 

Do tego z jakiegoś powodu miejsce na kupon… Bo… nie chce się usunąć? Więc gdyby rezerwacji dokonywała moja druga połowa, to założę się, że w tym momencie wyszukała by “nazwa firmy kupon rabatowy”. Dodatkowe opcje - spoko, dane, regulamin i book. Po to aby następnie przejść…

Na stronę z formularzem!! Standardowy formularz woocommerce - oni mnie tam nie chcą! Założę się, że wyprawa do mordoru była mniej skomplikowana niż ten proces.

Jak poprawić UX oraz proces rezerwacji?

Dobra, gorzkie żale wylane, czas przestać być tylko krytykiem i zaproponować coś konstruktywnego. Dlaczego? Bo po prostu szkoda.
Miejsce wygląda naprawdę dobrze, widać, że ktoś włożył serce i budżet w zdjęcia, film i całą estetykę. Problem nie leży w braku treści, tylko w braku struktury i logiki użytkownika.

Strona jest.
Informacje są.
Formularz też jest.
Tylko, że nic z tego nie działa razem.

Zacznij od zrozumienia, dla kogo to wszystko jest

Strona wygląda, jakby miała trafić do wszystkich a więc, jak to zwykle bywa, nie trafia do nikogo. Zamiast projektować „dla wszystkich odwiedzających”, trzeba zaprojektować dla konkretnej grupy. Jak może wyglądać grupa docelowa bazując na tym doświadczeniu - skoro reklama jest na pokładzie linii lotniczych to można założyć pewne kwestie.

1. Grupa docelowa:
   Turyści, podróżujący liniami lotniczymi, czytający magazyn pokładowy.
   Znający angielski, ciekawi świata, chcący spędzić kilka dni w jednym miejscu.
   Często podróżujący parami lub rodzinnie.
2. Stan emocjonalny:
   Podekscytowanie, ciekawość, chęć „zanurzenia się w lokalności”.
3. Cel użytkownika:
   • dowiedzieć się więcej o miejscu,
   • sprawdzić dostępność i ceny,
   • zarezerwować nocleg (najlepiej bez dzwonienia gdzieś w Mołdawii o 22:00).

Uporządkuj architekturę informacji

Zanim ktokolwiek ruszy z nowym designem, trzeba zrobić mapę treści i ścieżkę użytkownika (user journey).Nie ma sensu poprawiać tego, co już nie działa, jeśli nie wiadomo, dla kogo i po co.

Przykładowa struktura strony głównej mogłaby wyglądać tak:

1. Intro / Hero
   emocjonalny wstęp – film lub zdjęcie, ale z jasnym CTA „Discover Winery” prowadzącym do faktycznej podstrony z opisem, a nie kontaktu.
2. O winiarni
   krótka historia, tradycja, klimat.
3. Doświadczenie
   jedzenie, degustacje, wydarzenia, „mołdawski wieczór”.
4. Noclegi
   opcje pokoi, krótkie porównanie, CTA do rezerwacji.
5. Cennik / Pakiety
   prosty przegląd cen + możliwość dodania atrakcji.
6. Rezerwacja
   formularz z jednym, czytelnym flow.
7. Kontakt / lokalizacja
   na końcu, a nie po środku emocji.

Takie ułożenie odwzorowuje emocjonalną podróż użytkownika: od zaintrygowania → zainteresowania → decyzji → działania.

Popraw proces rezerwacji (czyli przestań testować cierpliwość użytkownika)

Tutaj warto zastosować zasadę: „im mniej myślenia, tym lepiej”.
Użytkownik nie ma zgadywać, który pokój jest „dla króla”, a który „dla rodziny”.
Każda opcja powinna mieć:

• zdjęcie,
• krótki opis (dla kogo, ile osób),
• cenę,
  przycisk „Rezerwuj teraz”,
• opcjonalne dodatki (pakiety, kolacje, „mołdawski wieczór”, wino na powitanie na tym etapie).

Nie odkrywaj koła na nowo! Wykorzystaj efekt znajomości (familiarity effect) czyli użytkownik będzie chętniej korzystał z tego co już kojarzy np. rezerwacje na stronie Booking, Kayak czy ITAKA. Wybór ilości osób i termin - a dopiero po tym sugestia pokoju. 

Dodaj upsell / cross-sell na etapie zamówienia

Skoro już użytkownik chce zapłacić, to daj mu coś więcej niż tylko „pusty koszyk”.
Można to zrobić elegancko:

• Dodaj sekcję „Uczyń swój pobyt wyjątkowym”:
  • Kolacja degustacyjna w piwniczce
  • Mołdawski wieczór z muzyką na żywo
  • Wino powitalne w pokoju
  • Wycieczka po winnicy

Niech te dodatki są emocjonalnym domknięciem podróży - tak jak w reklamie.
To nie tylko zwiększa przychód, ale też buduje doświadczenie.

Formularz rezerwacji prosty, czytelny, bez dramatów

Obecny proces wygląda jak próba odporności psychicznej odwiedzającego na kolejne poziomy utrudnień. Tutaj powinien być łatwiejszy, przejrzysty przepływ:

1. Ilość osób.
   Do tego powinien być dostosowany wybór pokoju a nie na odwrót,
2. Wybierz termin.
   Proste - ale nie łatwe nich kalendarz nie będzie kolejnym elementem walki.
3. Dodaj opcję.
   Zaproponuj coś więcej aby użytkownik mógł skorzystać z unikatowych opcji, w tym wypadku są restauracje ( o ich podstronach nie będę się rozpisywał) można zaproponować kolację z Mołdawskimi przysmakami i kieliszkiem wina z winiarni.
4. Podaj dane.
   Im mniej tym lepiej bo nie chcesz przecież zniechęcić użytkownika tak bliskiego celu.
5. Potwierdź.
   Podziękuj i pokaż, że wszystko poszło jak należy, dodatkowe informacje tutaj możesz dać oraz pomyśleć nad większym upsellem.

Bez teleportowania się między stronami i bez przeskakiwania w nieznane. Wszystko na jednej stronie, z podsumowaniem (cena, termin, liczba osób).

Waluty, języki, lokalizacja.

To drobiazg, ale ważny jeśli reklama jest po angielsku i kierowana do zagranicznych turystów, to strona musi rozumieć ich kontekst. Dlatego zamiast zmuszać do wyjścia i szukania przeliczników gdzieś poza formularzem warto dodać automatyczne (nawet przybliżone) ceny w EUR/. Podróżujący zazwyczaj znają średni kurs EUR i mogą sobie przybliżyć cenę, nawet jeśli nie jest w ich walucie rodzinnej. 

Testy, testy, testy.

Zanim wyślesz stronę w świat, daj ją kilku osobom, które nie mają pojęcia o projekcie.
Niech spróbują coś zarezerwować.
Jeśli się uda - świetnie. Jeśli nie, to masz listę poprawek, zanim zaczniesz tracić klientów.

Zanim wydasz na reklamę - sprawdź, czy Twoja strona nie działa przeciwko Tobie.

Bo piękne zdjęcia, wino w kieliszkach i romantyczny ton reklamy w magazynie samolotowym to jedno. Ale jeśli po kliknięciu w link użytkownik dostaje UX-owy labirynt z walką finałową w formularzu rezerwacyjnym, to Twoja inwestycja w marketing kończy się dokładnie tam, gdzie zaczyna się jego frustracja.

Ładna strona to nie cel sam w sobie. To narzędzie sprzedaży, komunikacji i emocji i jeśli jedno z tych ogniw zawiedzie, to cały łańcuch traci sens.

Nie musisz mieć strony, która wygląda jak dzieło sztuki. Wystarczy, że działa jak dobrze naoliwiona maszyna:

• logiczna nawigacja,
• klarowna ścieżka zakupu,
• przyjazny formularz,
• i trochę empatii wobec użytkownika, który po prostu chce kupić, a nie rozwiązywać zagadkę UX.

O autorze.

Od lat związany z szeroko rozumianą informatyką. Pierwszą stronę stworzyłem w liceum, za co otrzymałem wyróżnienie.

Ciągle uczę się, aby dorównać tempu rozwoju nowoczesnych technologii łącząc je z wiedzą o psychologii aby zwiększać skuteczność stron i aplikacji internetowych.