User Experience: Błąd 404 – można i tak :)

Błąd 404 to jeden z najczęściej występujących problemów w Internecie. Od dłuższego już czasu dużo pisze się i mówi o obsłudze tego błędu. Wśród zalecanych elementów na tej stronie można znaleźć:

  • wytłumaczenie problemu „ludzkim językiem”, czyli unikamy teksu automatycznego, niezrozumiałego dla zwykłego śmiertelnika,
  • możliwość ponowienia lub podjęcia jakiejś akcji – przykładowo możemy zamieścić przykłady podobnych produktów, link do innej podstrony,
  • zabawny obrazek – który w jakiś sposób rozładuje negatywne emocje użytkownika, a nawet obróci je na pozytywne.

Właśnie na tym ostatnim elemencie bardzo mocno skoncentrowała się firma Cropp. Dużo by o tym pisać, ale najlepiej, zobaczyć samemu na poniższym rysunku lub na żywo.

Jedyne co można zarzucić firmie, to że nie ma analizy behawioralnej – Panie chętnie by pewnie zobaczyły inny obrazek 🙂

Obrazek

Usability: automatyczne ładowanie treści – pozwólcie użytkownikom kontrolować sytuację

Ostatnio w kilku serwisach trafiłem na narzędzie, które automatycznie doładowuje treść serwisu. Bardzo mi się to rozwiązanie podobało, aż do momentu, gdy mój cel odwiedzin polegał na dotarciu do stopki. Oj działo się działo …. Okazuje się, że również w tym elemencie można popełnić błąd, albo najzwyczajniej dzięki niemu coś ukryć 🙂

Jak to działa?

Mechanizm doładowywania treści jest bardzo prosty. W momencie, gdy użytkownik dotrze do końca strony, automatycznie doładowuje się treść i strona się wydłuża. Dzięki temu użytkownik nie musi nic klikać, aby zapoznać się z dodatkową treścią. Takie rozwiązanie jest stosowane np. przez Facebook, Okazik.pl, Google.

Stosowanie tego rozwiązania ma wiele zalet:

  • użytkownik nie musi przechodzić pomiędzy stronami,
  • widać bogactwo oferty serwisu,
  • ograniczenie czasu ładowania serwisu,

ale …

… są też i minusy tego rozwiązania. W tym jeden bardzo dotkliwy.

Zabawa w ciuciubabkę – czyli jak odkryłem minus tego rozwiązania

Rozwiązanie, o którym wspomniałem wcześniej stosuje m.in. Okazik.pl. Pewnego pięknego dnia dokonałem tam zakupu, ale w trakcie realizacji płatności pojawił się j
akiś problem. Tak czasem bywa, więc nie bardzo przestraszony postanowiłem odszukać na stronie danych kontaktowych. W jej górnej części jest tylko telefon do nawiązania współpracy (tak przynajmniej zrozumiałem opis). Zgodnie z konwencjami postanowiłem poszukać kontaktu w stopce. I tutaj zaczęły się schody …

Zauważyłem, że w stopce jest link „Kontakt” (Rysunek pkt 2), ale za każdym razem, gdy do niego docierałem (rysunek pkt 1) strona ładowała nową treść i przesuwała się w dół. „Niestety” 🙂 Okazik.pl ma dużo ofert, więc … przewijałem, przewijałem, przewijałem …. W pewnym momencie próbowałem nawet klikąć link (ładowanie się chwilowo zawiesiło), ale niestety – znowu uciekło.

Po ładnych kilkudziesięciu sekundach udało mi się wyświetlić wszystkie oferty i dotrzeć do odpowiedniego linka – uffff

Nie mniej – było to mocno denerwujące i irytujące, tym bardziej, że chciałem wyjaśnić sprawę drażliwą – gdzie są moje pieniądze 🙂

Strona Okazik.pl

Automatyczne ładowanie się elementów na stronie Okazik.pl

Dobre przykłady z życia wzięte

Przyjąłem założenie w tym poście, że opisana przeze mnie sytuacja jest efektem pomyłki lub nie dość dokładnej weryfikacji serwisu. Odrzucam myśl, jakoby ktoś stosował takie rozwiązanie jako tzw. black pattern – np. w celu ukrycia polityki serwisu lub uniemożliwienia skontaktowania się z serwisem. (w końcu było nie było kiedyś oferty się skończą. Większy problem może być na Facebooku – szczególnie, jak ktoś jest aktywny 🙂 ).

Idąc dalej moim tokiem myślenia, jak sobie mianowicie z tym problemem poradzić. Rekomendacje mam następujące:

1. Doładowanie po kliknięciu

Takie rozwiązanie stosuje np. serwis Godealla. Użytkownik widzi 50 ofert i jak już je obejrzy to może sobie kliknąć w przycisk „Doczytaj więcej ofert” (wówczas wczyta kolejne 50 ofert) lub „Doczytaj wszystkie oferty”. Korzyść jest taka, że użytkownik ma kontrolę nad tym co się dzieje i może spokojnie dotrzeć do stopki (która zawiera wiele ciekawych elementów).

GoDealla.pl

Przyciski, które pozwalają doładować treść na stronie

2. Stopka na warstwie – zawsze widoczna

Stopka powinna być umieszczona jako warstwa, która jest zawsze widoczna w serwisie. Można być w skróconej formie, ale zawsze jest przyklejona do dołu ekranu. Dzięki temu użytkownik może w nią w dowolnej chwili kliknąć i rozwinąć (Uwaga: Poniższy rysunek to tylko symulacja rozwiązania).

Symulacja ruchomego menu

Przyklad ruchomego menu, które można by zrobić w Okazik.pl

3. Przeniesienie ważnych informacji w inne miejsce

W ostatecznej sytuacji, jeżeli nie mamy możliwości innego rozwiązania – najważniejsze elementy przenieśmy w obszar łatwo dostępny (np. górną część strony, wysuwany obszar kontaktu).

Podsumowanie: wskazany problem jest równie ważny dla serwisu jak i użytkownika

Opisany wyżej problem „potraktowałem” z punktu widzenia użytkownika. Właściciele serwisu powinni jednak pamiętać, że ta zmiana może być rownie ważna dla nich i rozwoju ich serwisu. Przykład … W stopce serwisu Okazik.pl jest np. odnośnik „wypromuj Twój biznes z okazikiem”. No jak mam coś wypromować skoro ciągle mi ucieka ten link … 🙂

User Experience: dlaczego nie warto oszczędzać na grafice?

W trakcie swojej pracy wielokrotnie spotykam (i spotykałem) się ze stwierdzeniem: „Ile za tą grafikę? Ja to za połowę ceny zrobiłem/am.” albo „Grafik to tylko koloruje makiety”. Czy jednak w rzeczywistości ktoś taki odniósł sukces? W kategorii minimalizacji kosztu z pewnością, ale co się stanie jak weźmiemy pod lupę liczbę transakcji, obroty, itp? A może jednak warto patrzeć na grafikę jak na inwestycję, a nie na koszt? Spróbuję Wam powiedzieć, dlaczego grafika jest aż tak ważna.

Na wstępie od razu wyjaśniam jedną rzecz – nie jestem przeciwnikiem cięcia kosztów 🙂 Nie mniej w mojej ocenie nie zawsze pryzmat kosztu powinien być jedynym uzasadnieniem wyboru grafika, czy też agencji do przygotowania grafiki.

Zagadka

Ile czasu potrzebuje człowiek na wyrobienie sobie opinii o drugim człowieku?

100 milisekund.

Ile czasu potrzebuje człowiek na wyrobienie sobie zdania o stronie WWW?

50 milisekund.

Wiecie co to oznacza, że jeżeli nie zrobicie wrażenia na użytkowniku w ciągu 0,05 sekundy to „po Was”. (UWAGA: mrugnięcie okiem zajmuje od 0,1 do 0,4 sekundy)

Oczywiście to tak do końca nie działa, bo większość stron WWW już by nie istniała. Nie mniej pokazuje, że pierwsze wrażenie jest nad wyraz istotne. Jeżeli nie przyłożymy się do naszej grafiki, zrobimy ją brzydką, nieestetyczną, to mamy małe szanse na przyciągnięcie uwagi nowych użytkowników.

A co jak powiem Wam, że decyzja zapada w 0,02 sekundy?

Podbijamy poprzeczkę 🙂

Google potwierdza teorię 0,05 sekundy, ale wskazuje, że taka decyzja może zapadać znacznie wcześniej – nawet w 17 milisekund (!!!)

Z badań Google wynikają jeszcze inne ważne kwestie. Pokazują one, że na ocenę mają wpływ 2 istotne czynniki:

  • złożoność wizualna – jak bardzo złożona i skomplikowana jest strona wizualna, 
  • podobieństwo – na ile podobny jest wygląd do innych stron w danej grupie.

Szczegółowe wyniki prezentują poniższe wykresy:

Wykres prezentujący zależność między postrzeganiem piękna strony a jej złożonością i podobieństwem do segmentu

WNIOSEK: strona powinna stosunkowo mało skomplikowana oraz podobna do innych stron w danej branży/grupie. Pamiętajmy, że rozmawiamy tutaj o odczuciach użytkowników. Oznacza to, że muszą oni czuć podobieństwo i prostotę, a nie, że nasza strona musi być 1 do 1 jak bezpośrednia konkurencja.

SUGESTIA: Nie starajcie się zrobić za wszelką cenę czegoś nowego/odmiennego/odjazdowego. Szanujcie wiedzę i doświadczenia Waszych użytkowników. Jeżeli chcecie wprowadzić jakąś rewolucję – dobrze ją przetestujcie.

Kilka dodatkowych faktów

Nie jest moim celem wydłużanie postów w nieskończoność, dlatego pozwolę sobie przytoczyć tutaj kilka dodatkowych faktów, które mogą Was zainteresować:

  • pierwsze wrażenie na temat strony WWW w 94% procentach buduje się na layoucie (reszta to treść. A gdzie użyteczność? A użyteczność to się pojawi, jak zaczniemy ze strony korzystać 🙂 ),
  • pierwsze wrażenie buduje zaufanie (brzydkie strony powodują, że czujemy się na nich niepewnie i nie chcemy z nich korzystać w obawie o bezpieczeństwo),
  • pozytywne pierwsze wrażenie nastraja użytkowników pozytywnie, dzięki temu są oni nam więcej skłonni wybaczyć, chętniej kupują i odczuwają wyższą satysfakcję
  • pierwsze wrażenie pozostaje na długo – pozytywny obraz odciśnięty na naszych użytkownikach znajdzie oddźwięk w powrotach i rekomendacji u znajomych.

Linia zanurzenia NADAL JEST WAŻNA

Jak zaczynał się temat użyteczności to bardzo istotnym elementem oceny była tzw. linia zanurzenia. Linia zanurzenia to linia, która odcina część serwisu widoczną bez przewijania strony w dół (tzw. skrolowania). Od dłuższego czasu badania pokazują, że użytkownicy nauczyli się przewijania i linia zanurzenia straciła na znaczeniu. Jeżeli jednak przyjmiemy, że użytkownik wyrabia sobie opinię na podstawie 0,05 sekundy obecności na naszej stronie to nie ma szansy, żeby przewinął w tym czasie stronę w dół. Oznacza to, że linia zanurzenia nadal jest ważna w tym sensie, że część strony powyżej powinna być jak najlepsza.

Podsumowanie

Użytkownik wyrabia sobie opinię bardzo bardzo szybko. Ważne jest abyśmy zbudowali stronę atrakcyjną wizualnie (szczególnie powyżej linii zanurzenia), relatywnie prostą i podobną do innych stron w danym segmencie. Wówczas mamy dużą szansę na pozyskanie zaufania użytkownika, przekazanie dobrego słowa o serwisie znajomym, a co najważniejsze konwersję. Jedno jest pewne – by to wszystko osiągnąć potrzebujemy dobrego grafika, który nie tylko pokoloruje makiety, ale wniesie wiele swojego doświadczenia zawodowego. Zapewne jego koszt nie będzie niski, ale zwrot z inwestycji dużo dużo większy.

Źródła

  1. http://www.tandfonline.com/doi/abs/10.1080/01449290500330448
  2. http://www.guardian.co.uk/science/2006/aug/23/usnews.internationalnews
  3. http://googleresearch.blogspot.com/2012/08/users-love-simple-and-familiar-designs.html

Usability: ciekawa książka (i nie tylko) za darmo

Przeglądając różnego rodzaju wydarzenia dotyczące WUD 2012 trafiłem na bardzo ciekawy projekt „Design for usability”. Zacznę od końca – czyli od jego efektu, jakim jest bardzo przyjemna lektura „Design for Usability” – dostępna w całości za darmo. Lektura na temat użyteczności, ale rozumianej bardziej jako pewien proces w firmie, służący do stworzenia dobrego produktu i jego rozwoju, a nie regułka ze standardu ISO (choć ta również się przewija 🙂 ).

Kilka słów o książce

Książka jest efektem pracy nad projektem o tym samym tytule. Jest dostępna za darmo i można ją czytać online lub pobrać jako PDF.

Książka „Design for Usability” jest w mojej ocenie „bombą witaminową” usability dla osób, które nie miały zbyt wiele do czynienia z tym tematem, a są praktykami, którzy myślą o wprowadzeniu pojęcia usability do firmy. Porusza ona bardzo dużo zagadnień (od samego wyjaśnienia pojęć usability czy user experience, aż po zestaw konkretnych narzędzi do analizy), które można wykorzystać w praktyce. Autorzy zastosowali zmyślną konstrukcję – do każdego tematu jest zamieszczony odnośnik, który przenosi nas do strony WWW z rozbudowaną informacją lub dodatkowymi materiałami na dany temat. Dzięki temu cała książka ma około 100 stron treści (stosunkowo niewiele) + niezliczoną liczbę materiałów dodatkowych i odnośników, do których sięgamy w razie potrzeby. Wiele materiałów jest praktycznie gotowych do wykorzystania. Szczegółowy spis treści poniżej.

Spis treści książki Design for Usability

Spis treści książki Design for Usability

Kilka słów o projekcie

Oprócz zachęty do zapoznania się z samą książką polecam stronę WWW projektu. Zawiera ona bardzo dużo materiałów i odnośników, w których można kopać i kopać i kopać …

Sam projekt DuF rozpoczął się w 2007 roku. Od tamtej pory brało w nim udział ponad 15 osób. Każda pracowała nad wybranym obszarem, a efekty tych działań można obserwować w książce. Celem projektu było wypracowanie metodologii tworzenia/projektowania produktów oraz narzędzi umożliwiających przewidywanie potrzeb i oczekiwań użytkowników. Myślę, że jest to wystarczająca rekomendacja, aby co najmniej pochylić się przez krótką chwilę nad tą pozycją i stroną projektu.