Wywołanie nawet jednego działania na stronie www wymaga szerszego spojrzenia na kontekst, odbiorcę i cel biznesowy. Wszystko zależy od zadawania właściwych pytań podczas projektowania. Jakich? Weźmy prosty przykład ekranu logowania się do WIFI w kawiarni Green Caffe Nero, które ostatnio odwiedziłam.
Lubię tę kawiarnię i często do niej zaglądam. Dobrze się tam czuję, bo jest fajny klimat i dobra kawa. Ostatnio korzystałam tam z internetu za pomocą laptopa. Oto moje obserwacje.
3 etapy procesu logowania.
Przypomnijmy najpierw jakie są etapy logowania, żeby mieć szerszy kontekst sytuacji.
1. Zapytanie o login i hasło;
2. Znalezienie loginu;
3. Logowanie się.
Okno logowania.
Po wybraniu nazwy sieci i kliknięciu „Połącz” pojawia się okno (zdj. 1). Na pierwszy rzut oka widać, że jest dużo informacji. Niestety jest sporo błędów (również wizualnych), które uniemożliwają przeczytanie. Skupmy się tym razem tylko na błędach UX.
Jak widać na dole jest miejsce na e-mail oraz ostatni widoczny element na dole ekranu „Zaloguj”. Wpisuję e-mail i klikam „Zaloguj”. Nic się nie dzieje. Domyślam się, że nie wykonałam jakiejś akcji, więc scrolluje w dół. Okazuje się, że poniżej znajduje się checkbox „Akceptuję regulamin” z walidacją (patrz zdj. 2). Co tu jest zatem nie tak?
3 błędy UX + rekomendacje dla rozwiązań.
1. Błąd: Główny komunikat nie jest widoczny w całości i uniemożliwia wykonanie akcji bez scrollowania ekranu.
Rekomendacja: Główna akcja powinna być widoczna na głównym widoku, jeśli technologia daje taką możliwość. Nie powinnam scrollować, by wykonać najważniejszą akcję, która prowadzi do celu. W kawiarni ludzie korzystają z laptopów, nie z monitorów full HD i do takiego ekranu powinien być dostosowany widok i rozdzielczość ekranu.
2. Błąd: Checkbox o regulaminie znajduje się poniżej głównego przycisku „Zaloguj” i nie widać go w pierwszym widoku.
Rekomendacja: Checkbox „Zaakceptuj regulamin” powinien znajdować się powyżej „Zaloguj” a cała sekcja powinna być widoczna w rozdzielczości 1366×768.
3. Błąd: Element logowania nie jest najważniejszy w hierarchii komunikacji.
Rekomendacja: Powinien być najbardziej widocznym elementem strony, zgodnie z jej przeznaczeniem.
Jeśli użytkownik ma wykonać więcej niż jedną akcję, to powinniśmy skorzystać z architektury informacji i podać ją zgodnie z jej wagą. Czyli innymi słowy ułożyć elementy w taki sposób, aby najbardziej widoczna była akcja na której najbardziej nam zależy, potem kolejne. Odradzam polecenie więcej niż dwóch akcji na jednym ekranie. Może to spowodować zagubienie i nie wykonanie żadnej akcji lub narażenie użytkownika na trudności. A trudności nikt nie lubi.
Jaka informacja powinna się pojawić po zalogowaniu?
Zaznaczyłam „Akceptuję regulamin” i otworzyło się nowe okno.
Po zalogowaniu pojawił się ekran, na którym zabrakło informacji o efektach, np. połączyłeś się z internetem. Dobrze gdyby oprócz małego przycisku (na dole po prawej stronie) pojawił się również komunikat w bardziej widocznym miejscu, np. Gotowe! Życzymy miłego korzystania z internetu, dobrej kawy i miłego dnia. Whatever works, ważne, żeby było wiadomo o co chodzi i przy okazji było miło :)
Pytania, które powinni zadać sobie projektanci.
Moim zdaniem nie byłoby tyle błędów, gdyby osoby projektujące rozwiązanie zadawali sobie najważniejsze pytania, takie jak:
1. Dla kogo jest ta strona i jaki jest cel?
Jedno z najważniejszych pytań. Raczej do kawiarni przychodzą ludzie z przenośnymi komputerami, nikt nie przychodzi z dużym monitorem full HD. Po odpowiedzi sobie na to pytanie, projektujemy dla realnych ekranów i odpowiedniej rozdzielczości (w tym przypadku laptop czy smartfon). Z jakich urządzeń i przeglądarek korzystają użytkownicy można się dowiedzieć z danych np. google analitycs.
2. Jakich informacji ma się dowiedzieć użytkownik z tej strony?
O tym, jakie informacje mają być przekazane użytkownikom powinny być uzgodnione z Klientem, czyli osobami odpowiedzialnymi po stronie kawiarni. Użytkownik mając kilka opcji do wyboru pozbywa nas szansy na wykonanie akcji, na których nam zależy. Dodatkowo chaos wizualny na ekranie powoduje, że są one nieczytelne a często i niewidoczne. Informacja musi być podana wprost i prowadzić użytkownika zgodnie z możliwościami i ograniczeniami przetwarzania informacji, jaką posiada.
3. Jakie akcje ma wykonać użytkownik?
Najlepiej, jak jest jedna akcja na jednym widoku. Nasz przykład dotyczy zalogowania się do internetu a jest to najmniej widoczna informacja, której w dodatku nie można przeczytać i wykonać bez scrollowania, co jest największym błędem w tym przypadku.
Podsumowanie
W projektowaniu doświadczeń nie chodzi o to, żeby jakoś to było. Chodzi o to, żeby ułatwić użytkownikom działania na stronie i żeby zadbać o estetykę doświadczeń, dając pozytywny odbiór obcowania z marką np. za pomocą urządzeń mobilnych.
A jakie są twoje doświadczenia jako konsumenta lub projektanta? Podziel się w komentarzu lub zapraszam do grupy na fb, której celem jest edukacja i zbudowanie społeczności świadomych konsumentów i dobrych projektantów :)
