Czy pralka ma UI?

Spoiler alert: tak. Coś trzeba nacisnąć, coś ustawić, żeby wywołać pożądane zachowanie, czyli User Interface w najczystszej postaci! Czy pralka ma UX? Cóż, w UX chodzi o odczucia. Zastanówmy się, ile razy zirytowało cię, że nie wiesz, co to za ikonka i jak, do stu tysięcy zagubionych skarpetek, pominąć pranie wstępne?

Czym różni się pralka od aplikacji internetowej? Tym, jak szybko można wymienić ją na inną. Uwaga: to jest ostatni moment, kiedy możesz zamknąć ten tekst i zostać producentem pralek ze słabym UI/UX, których użytkownicy co najwyżej będą rzucać mięsem przy nastawianiu prania, aż w końcu nauczą się tej pokrętnej logiki, a pralkę innego producenta kupią dopiero za parę lat, po piątym zalaniu sąsiada z dołu. Jeśli jednak chcesz zanurzyć się z nami w świat aplikacji internetowych, wiedz jedno – tu za słabe UI/UX wylatuje się w mniej więcej 60 sekund. Recepta? Bardzo prosta. Robić dobre UI/UX. Tylko jak?

1. Jasna struktura aplikacji

Wyobraź sobie chłopaka, któremu uciekł autobus, obładowanego bagażami, niemal spóźnionego na samolot, który chce w twojej aplikacji zamówić taksówkę. Matkę z dzieckiem na ręku próbującą zamówić jedzenie przez twoją appkę. Oni w tym momencie nie mają zasobów na to, by rozpracowywać kolejne zagnieżdżenia w menu, błądzić po całym systemie i czytać instrukcję postępowania małym druczkiem. I nie będą tego robić. Masz jedną szansę.

Zrób to dobrze! Jasna struktura, proste menu z oznaczoną podstroną, na której aktualnie jesteśmy, przyciski „Cofnij” pod ręką. W przypadku niektórych aplikacji świetnie sprawdzają się odnośniki do szybkich akcji (np. „Zrób przelew”), dostępne ciągle na ekranie. Jak mówił Jakob Nielsen, autor 10 zasad interakcji człowieka z komputerem: nie każmy użytkownikowi pamiętać, pozwólmy wybierać. Jeśli jakieś działanie jest skomplikowane, zamiast serwowania długiej instrukcji wszystkich kroków, pokazujmy podpowiedzi w trakcie działania. Empatia dla usera może zdziałać cuda!

2. Dostępność

Kojarzy się z niedowidzącymi czy niedosłyszącymi użytkownikami internetu – i słusznie – ale nie tylko! Jeśli mamy na stronie player, niech „Play/Pause” odpala się po kliknięciu w dowolny obszar video, nie tylko w samą ikonę. Pomyśl o kimś, kto ogląda filmik podczas gotowania i, mając brudne ręce, chce zatrzymać player łokciem. Życie pisze przeróżne scenariusze, a twój klient będzie ci wdzięczny, że nie musi celować w mały punkt na tablecie. Podobnie przy checkboxach – warto reagować również na kliknięcie w tekst, nie tylko w sam niewielki kwadracik.

Warto zadbać także o użytkowników lubiących lub muszących używać klawiatury – tabowanie („przeskakiwanie” po kolejnych klikalnych elementach strony, naciskając klawisz „Tab”) powinno być dobrze obsłużone i przede wszystkim możliwe. Tymczasem, ileż to stron ma wysuwane menu, które w danym momencie jest ukryte, a user i tak musi po nim tabować, w efekcie nie widząc na ekranie żadnej reakcji? Ile stron ma ukryty tzw. focus ring, czyli czarną ramkę, która pokazuje, jaką pozycję ma użytkownik poruszający się po aplikacji z klawiatury? Jeśli focus ring zastępuje inny wygląd przycisku/linku – nie ma sprawy. Ale jeśli nie zastępuje go nic – niedobrze! To niuanse zależne nie od Designera, a Frontend Developera, które mogą uprzykrzyć korzystanie z najpiękniej zaprojektowanego interfejsu.

3. Nie taki error straszny, jak go malują

To, że pomyłki się pojawią, jest więcej niż pewne. Błędy ze strony użytkownika, chociażby przy wypełnianiu formularza, ale także błędy ze strony systemu, np. przy przerwaniu połączenia. Oto zdanie do wydrukowania i oprawienia w ramkę dla każdego Frontend Deva: użytkownik musi wiedzieć, co się dzieje. Czy strona się teraz ładuje? Czy jeszcze czekać, czy już wystąpił błąd i trzeba odświeżyć stronę? Jeśli o to nie zadbamy, możemy spodziewać się nerwowego klikania, które prowadzi prosto do przycisku „Zamknij” (a jeśli ktoś kiedyś zapyta o tę appkę – odradź).

Zrób to dobrze! Wystarczy ładne okienko z jasną i przyjazną informacją, co się stało i jaką akcję można teraz podjąć. Przeładować stronę, poprawić dane w formularzu, zmienić filtry wyszukiwania. Jeśli dobrze się postaramy (czyli zawsze), błąd może zjednać nam użytkownika, a nawet być początkiem mini-kampanii marketingu szeptanego, jeśli ten zrobi screenshota i pokaże go innym.

4. Mikrointerakcje

Często niezauważalne, wkomponowane w dobrze znany nam internetowy świat – dopiero, kiedy ich nie ma, czujemy, że czegoś brakuje. To, że po kliknięciu przycisk menu się animuje, płynne przejścia pomiędzy widokami, małe „smaczki”, które szalenie wpływają na UX. Znam masę stron, które są świetnie zaprojektowane graficznie, ale interakcja z nimi jest nijaka. Na stronie jednego z polskich banków brakuje efektu po najechaniu myszką na przycisk, który to efekt ma być przecież nie tylko estetycznym dodatkiem, ale informacją, że przycisk działa, że mogę spodziewać się wywołania jakiejś akcji po kliknięciu. W mojej opinii, w 2020 roku takie rzeczy to must-have. Aż chcę się wracać do aplikacji, które dbają o mikrointerakcje.

5. Powielanie schematów

…brzmi jak coś, czego wszyscy chcielibyśmy uniknąć, prawda? My chcemy przecież innowacyjnie budować nową jakość! Cóż, na tym potknął się już niejeden serwis. Ikony bez podpisów, w których nie wiadomo, o co chodzi, ale wyglądające ładnie i nowocześnie. I są inne niż wszystkie! Akcje odwrotne do tych, których się spodziewamy. Właśnie – bo przecież czegoś się spodziewamy, prawda?

Tu docieramy do clue – użytkownikowi dobrze używa się tego, co już zna z innych aplikacji. Jest użytkownikiem Androida lub iOSa, Google, Allegro i setek innych interfejsów, więc jest też nauczony pewnych ruchów, zachowań i schematów. Nie uciekniemy od tego, ale wcale nie musimy! Jeśli w naszej aplikacji wszystko będzie odwrotnie, klient szybko straci cierpliwość i zmieni ją na inną, w której będzie czuł się jak w domu, a zamiast myśleć, jak się z niej korzysta – będzie po prostu korzystać. Sprawdzone i dobrze działające schematy delikatnie personalizujmy i po prostu adaptujmy.