SygnITy Expert
Kiedy strona ułatwia życie, a kiedy utrudnia – zasady dobrego UX Design
Byliście kiedyś w sytuacji, w której nie mogliście znaleźć na stronie jakiegoś przycisku? Albo nie wiedzieliście co trzeba poprawić na formularzu, aby go wysłać? A może przycisk, który nacisnęliście spowodował otwarcie strony, której się nie spodziewaliście? A może nie wiedzieliście jak wrócić na poprzednią stronę? Ja tak miałam. I nie przepadam za tym poczuciem zagubienia, frustracji, które pojawiają się zwłaszcza wtedy, gdy chcemy coś szybko „przeklikakać”, znaleźć, a strona nie współpracuje.
To, w jaki sposób odbieramy daną stronę, jak ją postrzegamy, czy chcemy z niej korzystać nazywamy Doświadczeniem użytkownika (z ang. User experience, w skrócie UX). Doświadczenie to obejmuje takie aspekty jak:
- użyteczność – czy łatwo osiągamy swój cel
- funkcjonalność – czy strona / aplikacja robi to, czego od niej oczekujemy
- dostępność – czy strona jest dostępna dla różnych użytkowników (np. osób z niepełnosprawnościami)
- architektura informacji – jak uporządkowane są treści i funkcje
- interakcje – jak wchodzimy w interakcję z systemem
Oczywiście nikt korzystający ze strony czy aplikacji nie mówi, że jest wspaniała, bo dzięki niej łatwo osiągamy swój cel czy jest beznadziejna, bo ma nieuporządkowane treści. Czasami nie potrafimy precyzyjnie określić dlaczego korzystanie ze strony jest frustrujące czy satysfakcjonujące, a jednak wywołuje w nas pozytywne lub negatywne odczucia, dlatego również emocje są ważnym aspektem doświadczenia użytkownika.
W związku z tym, zanim zaczniemy projektować musimy zrozumieć użytkownika, który będzie korzystał z danej strony czy aplikacji. Jakie są jego oczekiwania wobec projektowanego systemu, jakie problemy będzie chciał rozwiązać za pomocą naszej strony / aplikacji. Istnieje szereg czynności wspierających proces badania potrzeb i zachowań użytkownika, np. definiowanie celów użytkowych strony, analiza ról użytkowników, czy opisywanie ścieżek poruszania się po stronie (user flows).
Czynności te prowadzą zazwyczaj do stworzenia prototypu interfejsu, który jest rozwijany przez projektantów UI (User Interface – interfejs użytkownika). Na etapie projektowania interfejsu powstają elementy wizualne i interaktywne takie jak przyciski, ikony, nagłówki, sekcje, kolory, typografia.
Wiemy już, że UX design to proces projektowy, który polega na badaniu potrzeb użytkowników oraz tworzeniu rozwiązań w celu zapewnienia jak najlepszego doświadczenia podczas korzystania z produktu.
Zastanówmy się teraz jak osiągnąć te „najlepsze doświadczenia” , czyli co sprawia, że strona ułatwia nam życie. Poniżej wymieniłam kilka zasad dobrego UX/UI:
Prostota i intuicyjność
Założę się o czapkę śliwek, że najczęstszą odpowiedzią użytkowników na pytanie jaka powinna być aplikacja / strona jest: „prosta i intuicyjna”. Dlaczego? Dlatego, że nie chcemy na każdej stronie analizować interfejsu i zastanawiać się co trzeba kliknąć. Traktujemy strony / aplikacje jako narzędzia do realizacji celu – nie musimy znać wszystkich funkcji, ale chcemy szybko i bez wysiłku odnaleźć tę funkcję, która jest nam potrzebna. Dlatego interfejs nie może być przeładowany i chaotyczny. Jeśli jest czytelny i przewidywalny sprawia wrażenie profesjonalnego i wiarygodnego. A co zrobić, aby interfejs był intuicyjny? Można np. korzystać z przyjętych konwencji i znanych schematów.
Jako użytkownicy przyzwyczailiśmy się do pewnych rzeczy, np. jak rozlokowane są elementy na stronie (gdzie znajduje się menu, gdzie logo strony), jak wyglądają poszczególne elementy i jak działają (ikona kosza, koperty, lupka). Jeśli widzimy rozwiązania znane z innych stron i aplikacji, intuicyjnie wiemy jak, co działa i czego możemy się spodziewać. A to z kolei daje nam poczucie kontroli sytuacji.
Kontrola sytuacji
Nie lubimy skomplikowanych i niejasnych rozwiązań nie tylko dlatego, że ich poznanie zabiera czas, ale również dlatego, że prowadzą do pomyłek i poczucia braku kontroli. A co sprzyja poczuciu panowania nad sytuacją? Informowania użytkownika co dzieje się w procesie i jakie są skutki jego działań, tak aby mógł świadomie podejmować decyzje. Do tego służy np. stepper, który pokazuje użytkownikowi na jakim etapie się znajduje, ile kroków jeszcze zostało, co już zostało wykonane. Jest to szczególnie ważne przy dłuższych formularzach, zakupach czy rejestracji. Wpływ na poczucie kontroli oraz zapobieganie błędom ma również możliwość weryfikacji formularza przed wysłaniem, co pozwala użytkownikowi upewnić się, czy wszystko jest poprawne i ewentualnie wprowadzić korektę. Po wykonaniu akcji użytkownik powinien otrzymać jasny komunikat, że operacja zakończyła się sukcesem, np.: „Formularz został wysłany”, „Zamówienie zostało przyjęte”, „Zmiany zapisano”.
Bez takiego komunikatu użytkownik może nie wiedzieć, czy system zadziałał poprawnie. I tu przechodzimy do kolejnej zasady dobrego UX, czyli informacji zwrotnych.
Informacje zwrotne
Informacje zwrotne w UX to komunikaty i reakcje systemu, które informują użytkownika o rezultacie jego działania lub aktualnym stanie procesu. Dzięki nim użytkownik wie, że system zareagował na jego akcję lub wykonuje jakiś proces, np. podświetlenie przycisku po kliknięciu, animacja pokazująca ładowanie się danych lub przesyłanie pliku. Informacją zwrotną jest również komunikat o błędzie. Brak reakcji systemu powoduje, że powtarzamy kolejny raz daną czynność, bo podejrzewamy, że coś nie działa.
Tracimy czas i frustrujemy się, podobnie jak wtedy, gdy nie rozumiemy dlaczego ten sam przycisk w różnych miejscach robi różne rzeczy lub dlaczego różne przyciski robią te same rzeczy, np. wysyłanie formularza za pomocą przycisków [Zapisz] i [Zatwierdź]. Wszystko to może dezorientować użytkownika. Dlatego tak ważna w UX jest spójność.
Spójność
Spójność w UX oznacza, że elementy interfejsu działają i wyglądają w przewidywalny sposób. Dzięki temu użytkownik nie musi za każdym razem uczyć się interfejsu od nowa. Korzysta z wyuczonych schematów. Spójny design to również budowanie wiarygodności strony / aplikacji. Wymaga jednak konsekwencji projektowej, zwłaszcza przy tworzeniu kolejnych komponentów – nowe elementy nie mogą „odstawać” od reszty. Najlepiej więc jeśli istnieje zestaw zasad, komponentów i stylów, które są używane w całym produkcie.
Dostępność
Dostępność w UX jest definiowana jako projektowanie produktów cyfrowych w taki sposób, aby mogły z nich korzystać jak największe grupy użytkowników – także osoby z niepełnosprawnościami, ograniczeniami lub różnymi potrzebami. Chodzi o to, aby zaprojektowany system nie wykluczał użytkowników z powodu ich ograniczeń. Trzeba jednak zauważyć, że rozwiązania „dostępnościowe” często zwiększają komfort wszystkich użytkowników, np. czytelna hierarchia nagłówków pomaga skanować stronę i odnajdywać najważniejsze treści, komunikaty o błędach z instrukcją rozwiązania ułatwiają wypełnianie formularzy, tryb ciemny przydaje się do korzystania wieczorami, a napisy do oglądania filmów przy usypianiu dziecka.
Estetyka
Last but not least – estetyka, czyli sposób, w jaki produkt wygląda i jakie wywołuje wrażenia wizualne. Obejmuje m.in. kolory, typografię, układ elementów, zdjęcia, animacje i ogólny styl interfejsu. Nie chodzi tu jednak tylko o przyjemność obcowania z ładnym produktem, ale zasadę, która mówi o tym, że użytkownicy często postrzegają atrakcyjne wizualnie urządzenia, przedmioty jako łatwiejsze w użyciu. Tak już po prostu jest, że oceniamy jakość na podstawie wyglądu. Warto więc w projektowaniu interfejsu pamiętać o ogólnych zasadach estetyki, takich jak: harmonia, uporządkowanie, przejrzystość, spójność. W praktyce sprowadza się to świadomego rozmieszczania elementów na stronie, ustanowienia hierarchii wizualnych, wyróżniania kolorem, różnicowania wielkości i proporcji. Tak, aby można było spojrzeć z dystansu i powiedzieć: „ładnie to wygląda.”
Dobry UX design to przede wszystkim projektowanie z myślą o człowieku – jego potrzebach, przyzwyczajeniach, emocjach i ograniczeniach. Strona czy aplikacja ma pomagać użytkownikowi osiągnąć cel szybko, intuicyjnie i bez frustracji. Kiedy działa przewidywalnie, komunikuje się jasno i prowadzi użytkownika krok po kroku, staje się narzędziem, które rzeczywiście ułatwia życie. Zły UX często zauważamy dopiero wtedy, gdy coś przestaje działać tak, jak oczekujemy – gdy gubimy się w nawigacji, nie rozumiemy komunikatów albo nie wiemy, co wydarzy się po kliknięciu przycisku. Dobry UX działa odwrotnie: pozostaje niemal niewidoczny. Nie wymaga zastanawiania się nad interfejsem, bo wszystko wydaje się naturalne i oczywiste. Dlatego projektowanie doświadczeń użytkownika nie powinno zaczynać się od pytania „jak to ma wyglądać?”, ale „dla kogo to tworzymy i jak możemy mu pomóc?”. Bo ostatecznie najlepsze projekty to nie te najbardziej efektowne, lecz te, które sprawiają, że chcemy z nich korzystać.
- https://webmetric.com/slownik/user-experience/
- https://fluostudio.pl/ux-design-twoj-klucz-do-sukcesu-w-cyfrowej-przestrzeni/
- https://interactivesystems.pl/blog/ux-design-projektowanie-doswiadczenia-uzytkownika-cz-1/
- https://firmbee.com/pl/kryteria-uzytecznosci-w-ux
- https://inpost.pl/aktualnosci-co-oznacza-user-experience-i-dlaczego-jest-tak-wazny
- https://thestory.is/pl/journal/projektowanie-interfejsow-czesc-2/
- Steve Krug „Nie każ mi myśleć”, wyd. Helion.
- Rysunki: Canva.