W poprzednim wydaniu podzieliłem się z Tobą zbiorem frustrujących elementów ux w interfejsach. Żeby nie było tak pesymistycznie, dzisiaj chcę Ci pokazać mój zestaw elementów, które umilają mi interakcję z interfejsami.
👉 Dane nie są wymazywane
Lubię, gdy formularze lub koszyki pamiętają dane, które zostały do nich wpisane. Mimo odświeżenia strony lub chwilowego zamknięcia przeglądarki, moje dane zostaną zapamiętane i nie muszę uzupełniać ich ponownie.
👉 Formularze wypełniają dane za użytkownika
Lubię jak formularz stara się za mnie wypełnić część danych. Przykładem może być wpisanie kodu pocztowego, gdzie automatycznie dobierane jest miasto, a następnie propozycje ulic w danym mieście.
Inny przykład to wpisanie NIP, gdzie dane firmy zostają automatycznie pobrane z bazy.
Dobrym przykładem takiego automatycznego wypełnienia wdrożył inpost. Wpisz pierwsze litery nazwy paczkomatu, a pole zawęża wyniki i zasugeruje paczkomaty. Podobnie z danymi do faktury.
👉 Interfejs pokazuje mi, gdzie byłem
Lubię, gdy linki oraz wszystkie odwiedzone miejsca, posiadają inny wyznacznik wizualny, który mówi mi, hej tutaj już byłeś. W przypadku linków może to być fioletowy kolor zamiast niebieskiego. W przypadku innych elementów może to być blado szary kolor zamiast ciemnego.
Dobrym przykładem może być Airnb i mapa noclegów. Przy odwiedzonych noclegach, zobaczysz szary kolor ceny, zamiast białego.
Inny przykład może dotyczyć sytuacji, gdy użytkownicy mają już produkt w swoim koszyku, to produkt ten jest podświetlony na liście produktów. Przykład https://www.freshdirect.com
👉 Mikrointerakcje
Lubię, gdy aktywne elementy posiadają różne, ruchome mikrointerkacje. To małe, animowane detale, które tworzą miłą atmosferę. Przykładem może być ikona “loading” po kliknięciu w przycisk wysyłania. Inny przykład, to ruchomy kosz, podczas usuwania pliku.
A jeśli chcesz przykładu na żywo, wejdź na YouTube i daj łapkę w górę pod dowolnym filmem. Zobaczysz ciekawą mikrointerakcję kciuka.
Świetne mikrointerakcje znajdziesz na stronie https://stripe.com/en-pl
👉 Prostota
Lubię, gdy interfejs posiada wyłącznie niezbędne funkcje oraz informacje. Nie lubię rozbudowanych stron, przytłaczających bloków tekstowych.
Można powiedzieć, że prostota jest warunkiem użyteczności. Prostota działa. To ważne zwłaszcza w czasach, gdzie na każdym kroku mamy przesyt informacyjny.
👉 Ułatwia kopiowanie
Lubię, gdy interfejs ułatwia mi kopiowanie tekstów np. kod Blik skopiuję jednym kliknięciem za pomocą małej ikony przy kodzie.
👉 Pokazuj mój obecny status
Lubię, gdy interfejs na bieżąco informuje mi gdzie jestem. Przykładów jest wiele, jak np. etapy w koszyku, etapy w długim formularzu, paginacja pokazująca gdzie jestem, czy proces ładowania.
Ostatnio w oko wpadł mi pasek postępu, wyświetlany na górze artykułu, który zmienia się w zależności ile już treści zostało przeczytane. Dzięki temu wiadomo, jak dużo tekstu do przeczytania jeszcze zostało.
Przykład wdrożenia znajdziesz tutaj:
https://geek.justjoin.it/tworzyc-wlasny-design-system-czy-uzyc-gotowego-czesc-1/
