Zapisz się na szkolenie "Architektura informacji w UX/UI"
Zobacz
Mikroblog

Product Design okiem praktyków

Czy zdarzyło Wam się korzystając po raz pierwszy z nowej aplikacji po prostu przeklikać samouczek, by jak najszybciej zacząć z niej korzystać?

User onboarding to wbrew pozorom bardzo ważny proces, który ma na celu zaznajomienie się nowego użytkownika z aplikacją (interfejsem, nawigacją lub nową funkcjonalnością), dostarczenie mu odpowiednich informacji na temat produktu oraz wspieranie do momentu, aż stanie się aktywnym userem. Działanie to jest szczególnie istotne w rozbudowanych produktach cyfrowych, lecz często przydaje się też w prostych aplikacjach z kilkoma kluczowymi funkcjonalnościami.

Jedną z metod nauczenia użytkownika naszego rozwiązania, jest progresywny onboarding.

Czym się charakteryzuje?

  • Uczenie poprzez działanie
  • Wyświetlanie instrukcje na przykład w formie krótkich tooltipów (niekiedy w ramach tooltipu jest cała seria informacji)
  • Informacje odnoszą się wyłącznie do strony, na której aktualnie znajduje się użytkownik (nauka kontekstowa)
  • Krótkie, pisane „lekkim” językiem wskazówki

Przykład progresywnego onboardingu, na który można trafić rejestrując się w aplikacji Glovo:

Jak połączyć testy oprogramowania w modelu SaaS (software as a service) z pozyskaniem danych klienta, do dalszej obsługi handlowej? Live Chat znalazł na to sprytny sposób. Wersję demo można założyć samodzielnie i testować 14 dni. Jednak jeśli założymy demo, poprzez kontakt z handlowcem otrzymamy dodatkowy tydzień.

Daje to Live Chatowi niepowtarzalną okazję na rozmowę i poprowadzenie klienta, a docelowo zamknięcie transakcji zakupem pakietu. A wiadomo, że nikt tak nie sprzedaje usługi jak handlowiec właśnie. Prosty trik, ale „stawiam stówę”, że zoptymalizowali konwersję do płacącego klienta.

 

Jako fanka gier mobilnych, regularnie poświęcam im wolną chwilę, aby dać odpocząć głowie. Moim obecnym ulubieńcem jest kolejna produkcja inspirowana znanym i lubianym Candy Crushem, która tak jak i on, daje mi pewną pulę żyć do wykorzystania, abym mogła dzielnie powalczyć o przejście kolejnych poziomów.

Otrzymując 5 serduszek, roztrwaniam je oczywiście bez żalu, bardzo szybko docierając do momentu, w którym nie mam ich wcale. I co wtedy? Oczywiście gra okazuje mi troskę i oferuje dodatkowe życia, okupione nie złotem, a moim czasem, który mogę poświęcić na obejrzenie jednej z reklam.

Reklamy trwają od 10 do 30 sekund i mijają stosunkowo szybko… gdy widzę zegar informujący, ile czasu pozostało bądź pasek postępu. Gdy ich zabraknie, oczekiwanie na koniec wydaje się wiecznością, co skutkuje porzuceniem zabawy w poszukiwaniu innej rozrywki 🙂 Tak oto widoczna informacja wpływa na percepcję czasu.

Powyższy przykład z życia wzięty daje pogląd na to, jak ważne może okazać się zadbanie o pierwszą heurystykę Nielsena w projektowaniu User Experience — pokazuj status systemu. Użytkownik lubi wiedzieć, na jakim etapie obecnie się znajduje, co jeszcze go czeka. Nie uzyskując informacji na ten temat, często ucieka, gdy zabraknie mu cierpliwości. A o cierpliwość w interakcji z produktem cyfrowym w Sieci jest szczególnie trudno.

Don Norman, czyli znany na cały świat psycholog poznawczy specjalizujący się w komunikacji człowiek – komputer oraz autor książki “Dizajn na co dzień” (Pozycja obowiązkowa dla każdej osoby zajmującej się UX!) skupił się na pojęciu afordancji. Co się kryje za tą skomplikowaną nazwą?

Możliwość interakcji między człowiekiem a środowiskiem. Relacja między właściwościami, a tym co możemy z nim zrobić. Afordancje są wskazówkami, które podpowiadają jak możemy wejść w interakcję z przedmiotem fizycznym lub cyfrowym.

Kiedy widzimy klamkę, jest to wskazówka, że możemy użyć jej do otwarcia drzwi. Kiedy widzimy ikonę słuchawki na ekranie smartfona, wiemy, że możemy ją kliknąć, aby wykonać połączenie. Z kolei zebra na jezdni wskazuje, że możemy w tym miejscu przejść na drugą stronę.

No dobrze, ale jak możemy wykorzystać wiedzę o afordancji w projektowaniu doświadczeń użytkownika?

Afordancje w UX/UI mogą mieć charakter jawny lub ukryty. Ich cel jednak pozostaje ten sam: takie wykorzystanie wcześniejszej wiedzy i doświadczeń użytkowników, by interakcja z produktem była dla nich jak najprostsza.

Przykłady zastosowania afordancji w projektowaniu:

#1 Afordancje graficzne – wizualizacje graficzne pomagają szybciej skanować i zapamiętywać treść i funkcjonalności. Wśród nich wyróżnić możemy:

  • Ikony
  • Ilustracje
  • Loga
  • Zdjęcia

#2 Przyciski (buttony) – już przed erą interfejsów graficznych, wszelkiego rodzaju przyciski pojawiały się w życiu ludzi: dajmy na to kalkulatory czy maszyny do pisania. Projektując przyciski, musimy pamiętać o tym, by były widoczne i postrzegane jako przycisk – zwracajmy tutaj uwagę na kontrast i kolory.

#3 Animacje UI – w doskonały sposób imitują interakcję z rzeczywistymi przedmiotami.

  • przełączanie toggle
  • animacja “przeciągnij, aby odświeżyć”
  • pulsujące ikonki zachęcające nas do kliknięcia

#4 Stosowanie Wzorców afordancyjnych – użytkownicy są przyzwyczajeni do tego, że gdy klikną logo na stronie, to przejdą do strony głównej. Informacje o kontaktach i polityce prywatności strony często znajdują się w stopce strony, a trzy pionowe punkty w układzie aplikacji oznaczają „więcej”, pokazując dodatkowe funkcje. Korzystanie z tych istniejących wzorców oznacza, że użytkownicy mają poczucie, że rozumieją interfejs.

Afordancje to kolejny przykład na to, jak bardzo UX łączy się z dziedziną psychologii poznawczej i jak ważne jest, by tę wiedzę na co dzień, wykorzystywać upraszczając korzystanie z produktów cyfrowych przez naszych użytkowników.

 

Źródła:

https://productvision.pl/2019/co-ja-pacze-czyli-swiat-oczami-ux/ 

https://www.interaction-design.org/literature/topics/affordances

 

Okruszki nigdy nie były problematyczne: czasami użytkownicy mogli przeoczyć ten drobny element strony, ale nigdy nie mieli problemu ze zrozumieniem lub interakcją

Jakub Nielsen

Breadscrumbs to drobny element, który powinien pojawić się na prawie każdej stronie. Drobne linki, pokazujące gdzie na stronie się znajdujesz, jaki produkt przeglądasz, w jakiej kategorii.

O czym pamiętać projektując breadscrumbs?

  • Najlepiej działają bezpośrednio obok tytułu strony. W porównaniu do umieszczeniu ich na szczycie strony, okruszki obok tytułu są klikalne 5-krotnie częściej.
  • Pokazuj tylko strony. Breadscrumbs powinien być głównie zbiorem klikalnych linków.
  • Strona na której aktualnie znajduje się user, powinna znaleść się w okruszkach, ale nie powinna być linkiem.
  • Okruszki powinny pokazywać hierarchię strony, a nie historię przeglądania użytkownika.
  • Jeżeli jest kilka poprawnych ścieżek do podstrony (np. do listy telefonów można dostać się poprzez stronę główną, stronę z ofertami na kartę, stronę z ofertami abonamentu) – wtedy okruszki powinny sugerować jeden kierunek.
  • Używaj strzałek skierowanych w lewo. Może to być nieintuicyjne przy projektowaniu, ale z punktu widzenia użytkownika, chce on wrócić do wyższego poziomu.
  • Na telefonie pokaż tylko jeden okruszek, pozwalający wrócić o poziom wyżej.W ten sposób nie zarzucamy użytkownika treścią.

Źródła:
https://medium.com/@jeffjimerson/breadcrumbs-for-desktop-ux-design-youre-doing-them-wrong-70fe62e6180e

https://www.nngroup.com/articles/breadcrumbs/

  1. z 7
UX w praktyce

Twitter dla UX-a, analityka, PM-a? Właśnie tak! Szybkie, ale merytoryczne wpisy o polskim i zagranicznym tworzeniu produktów cyfrowych.

Chcesz coś opublikować? Napisz: hello@webmetric.com

    Bądź na bieżąco z wiedzą o User Experience!