Tips & Tricks UX – Cz. 2. Na własne oczy.

Cz. 2. Na własne oczy.

Naukowcy, Daniel Simons i Christopher Chabris, przeprowadzili eksperyment. Pokazali uczestnikom badania nagranie, w którym dwa zespoły graczy, w białych i czarnych koszulkach, wymieniały się w swoich grupach piłką. Naukowcy poprosili  uczestników badania o policzenie podań wykonanych tylko pomiędzy graczami w białych koszulkach.

Możesz wykonać to samo zadanie – po prostu uruchom nagranie i policz, ile podań wykona drużyna w białych koszulkach.

Źródło: YouTube

Czy zauważyłeś człowieka w przebraniu goryla? Jeśli nie obejrzyj materiał jeszcze raz. Zauważysz, że wspomniana postać przechadza się pomiędzy graczami. Mimo to około połowa badanych w ogóle tego nie zauważyła, ponieważ była skoncentrowana na wykonywaniu otrzymanego zadania.

W innym eksperymencie The Door Study (Daniel Simons, Daniel Levins), osoba badana była pytana przez nieznajomego przechodnia o drogę. W trakcie rozmowy zmieniał się rozmówca. W tym przypadku podobnie około połowa badanych, skupionych na tłumaczeniu drogi, nie zauważyła zmiany.

Badania pokazują, że nie zawsze jesteśmy świadomi rzeczy, które znajdują się w polu naszego widzenia. To co widzimy jest przetwarzane i interpretowane przez mózg, który filtruje napływające informacje. W przypadku, gdy nasza uwaga skupiona jest na wykonaniu wymagającego zadania, możemy nie zauważyć zmian w otoczeniu, nawet tak znacznych jak pojawienie się goryla. Efekt ten został nazwany ślepotą na zmiany albo ślepotą z nieuwagi.

Jak ta wiedza może być przydatna podczas projektowania interakcji z systemem?

Korzystając z produktu interaktywnego dążymy do osiągnięcia pożądanego w danym momencie celu. Takim celem może być np. zakupienie książki, biletu do kina, czy wysłanie zgłoszenia na szkolenie. Realizując swoje zadanie skupiamy uwagę na istotnych w danym momencie informacjach, a pomijamy te nieistotne. Dlatego przy projektowaniu systemu kluczowa jest informacja o tym, jakie cele użytkownicy będą w nim realizowali. Jeśli jest nim zakupienie na stronie produktu, jest duża szansa, że użytkownik pominie niezwiązane z realizacją zadania komunikaty.  Wg Chabris i Simons, jeżeli osoba skupia uwagę na jednej rzeczy i nie przewiduje zajścia żadnych zmian, wówczas z dużym prawdopodobieństwem ich nie zauważy.

Zobaczmy na podawany przez Norman Nielsen Group przykład. Czym różnią się te 2 ekrany poniżej?

Źródło: FollowBright

Osoba korzystająca z serwisu jest w trakcie wyboru butów. Różnica między ekranami dotyczy opisu znajdującego się na przycisku: na ekranie z lewej strony “Add to cart”, na ekranie z prawej strony “Out of stock”. Informacja, że butów w wybranym przez użytkownika kolorze i rozmiarze nie ma w magazynie zaprezentowana została w ten sam sposób, jak widoczna wcześniej opcja dodania produktu do koszyka. Zmieniona została tylko treść tekstu. Taka zmiana może zostać przeoczona, ponieważ obie opcje są zbyt podobne. Dodatkowo informacja umieszczona jest w dużej odległości od miejsca, w którym wykonywana jest aktywność, na której skupił się użytkownik, czyli wyborze koloru i rozmiaru butów.

Formularz ten został przeprojektowany i obecnie wygląda następująco.

Źródło: Vans

Informacja o braku danego rozmiaru butów dodana została też przy wyborze rozmiaru. Dzięki temu użytkownik już na tym etapie otrzymuje informację, że dany rozmiar buta jest niedostępny, a informacja jest bardziej widoczna. Dodatkowo przyciski “Add to cart” i “Out of stock” zostały wyraźnie rozróżnione kolorystycznie.

Oto kilka wskazówek, jak lepiej pokazać zmiany na ekranie, by użytkownik ich nie pominął:

• Miejsce umieszczenia elementu. Umieszczenie istotnej w danym momencie informacji blisko miejsca realizacji zadania, na które użytkownik kieruje w danym momencie wzrok i uwagę.
• Wyraźne zaakcentowanie zmiany na ekranie. W przypadku zbyt subtelnej, nieoczekiwanej przez użytkownika zmiany może zostać ona niezauważona. Dlatego warto zaakcentować zmianę poprzez zastosowanie odpowiedniej wizualizacji elementu np. poprzez kolor, rozmiar i wypełnienie elementu.
• Dodatkowe wskazówki wizualne – animacje. Animowane przejścia pozwalają uniknąć natychmiastowych zmian i przyciągają uwagę użytkownika. Przykład animacji po wykonaniu przez użytkownika działania na stronie:

Źródło: Dribbble

Autor: Aleksandra Szkup – Analityk, Dział Konsultingu, Altkom Software and Consulting

Bibliografia:

• 100 rzeczy, które każdy projektant powinien wiedzieć o potencjalnych klientach – Susan Weinschenk
• FollowBright
• Nngroup

Zobacz również:

Tips & Tricks UX – Jak projektować użyteczne produkty IT dla potencjalnego użytkownika? Cz. 1