Dobre praktyki w projektowaniu UX/UI

Te 3 pojęcia są ze sobą blisko związane, ale nie powinno się ich stosować zamiennie, ponieważ odnoszą się do 3 różnych rzeczy. 

UX czyli User Experience to tak, jak już przedstawiliśmy wyżej, doświadczenia użytkownika. Wrażenie, jakie strona czy aplikacja pozostawi, mają duży wpływ na to, czy użytkownik dokona ponownych odwiedzin w witrynie.

UI czyli User Interface, oznacza „Interface użytkownika”. Jest to nic innego jak aspekt graficzny strony. Ogromnie ważne jest, aby wszystkie elementy, które użytkownik klika, czyta, przegląda czy wypełnia, były odpowiednio zaprojektowane. Każdy rodzaj elementu wizualnego, interakcji lub animacji musi być odpowiednio przygotowany.

Web Design, czyli projektowanie stron internetowych, to obszar obejmujący interfejsy cyfrowe, takie jak strony internetowe, aplikacje i usługi. Jest to określenie obejmujące całość zagadnień związanych z projektowaniem stron internetowych, wliczając w to UX i UI.

Zasady projektowania

1. Widoczność statusu systemu. Użytkownik powinien zawsze widzieć, na jakim etapie się znajduje, w którym jest miejscu na stronie i co się dzieje. Powinien  też być poinformowany o postępach oraz otrzymywać odpowiednie informacje zwrotne.

Wskazówki:

• Zadbaj o to, aby poinformować użytkownika o statusie systemu – nie należy podejmować żadnych działań, które będą miały konsekwencje dla użytkowników, bez poinformowania ich o tym.
• Przekaż użytkownikowi informację zwrotną tak szybko, jak to możliwe (najlepiej natychmiast).
• Budowanie zaufania poprzez otwartą i ciągłą komunikację.

2. Powiązanie pomiędzy systemem a światem rzeczywistym. Strona powinna posługiwać się metodami komunikacji znanymi użytkownikowi. W pierwszej kolejności należy skupić się na konkretnych użytkownikach, bo to oni będą korzystać z tej strony. Terminy czy pojęcia, które są dla Ciebie i Twoich współpracowników jasne, mogą sprawiać problem i być mylące dla innych. Wykorzystaj słowa, sposoby nawigacji i koncepty, które będą jasne, czytelne i intuicyjne dla każdego.

Wskazówki:

• Zadbaj o to, aby użytkownik mógł zrozumieć znaczenie słów, bez konieczności ich sprawdzania.
• Nigdy nie zakładaj, że Twoje rozumienie słów lub pojęć, jest tożsame z rozumieniem Twoich użytkowników.
• Zadbaj o badania użytkowników, które pomogą w uzyskaniu kluczowych pojęć.

3. Kontrola użytkownika nad systemem. Użytkownicy często popełniają błędy i przypadkowo wykonują rożne działania. Kiedy łatwo jest im się wycofać, zwiększa to ich poczucie pewności siebie. Możemy przez to uniknąć uczucia frustracji użytkownika i pozostawić mu „kontrolę” nad systemem.

Wskazówki:

• Zadbaj o obsługę cofania i przywracania.
• Wyświetlaj jasny sposób zakończenia bieżącej interakcji, na przykład przycisk Anuluj.
• Upewnij się, że odpowiedni przycisk np. „Zakończ” jest wyraźnie oznakowany i rozpoznawalny.

4. Zachowanie spójności i standardów. Użytkownik nie powinien się zastanawiać nad tym co oznacza dany komunikat, słowo czy sytuacja. Przekaz powinien być jasny i czytelny. Spójność strony można zachować, m.in. pilnując tego, aby poszczególne elementy pojawiały się na każdej z podstron, w tym samym miejscu. Spójność jest związana także z aspektami wizualnymi. W tym zakresie warto zadbać o to, aby np. linki w obrębie całej strony miały ten sam kolor. Ważne jest również zachowanie odpowiednich standardów.  W tym celu należy wykorzystywać przede wszystkim przyzwyczajenia użytkowników oraz rozwiązania, które stosuje się np. w obrębie podstron, takich jak „kontakt”, które zazwyczaj są ostatnim z elementów menu.

Wskazówki: 

• Zadbaj o utrzymanie spójności w obrębie pojedynczego produktu lub rodziny produktów.
• Przestrzegaj ogólnie przyjętych zasad branżowych (konsekwencja zewnętrzna).

5. Zapobieganie błędom. Strona powinna być zaprojektowana tak, aby nie stwarzać sytuacji, w których użytkownik w trakcie korzystania z witryny, będzie mógł spowodować powstanie różnego rodzaju błędów. Aby zapobiegać takim sytuacjom, należy zadbać o wdrożenie rozwiązań, takich jak m.in. maskowanie pól na kod pocztowy czy walidacja pola na numer telefonu (funkcjonalność sprawdzająca, czy użytkownik wprowadził odpowiednią liczbę cyfr) itd.

Wskazówki:

• Zadbaj o wprowadzenie pomocnych ograniczeń i dobrych ustawień domyślnych.
• Staraj się unikać błędów, które obciążają pamięć, obsługując cofanie i ostrzegając użytkowników.

6. Możliwość wyboru zamiast zapamiętywania. Warto projektować rozwiązania, dzięki którym użytkownik nie będzie musiał zapamiętywać kroków, które wykonywał, w trakcie korzystania z witryny. W tym celu warto wdrożyć np. możliwość podświetlania w innym kolorze linków, które użytkownik już odwiedził. Dobrym przykładem tego typu rozwiązań jest także wprowadzenie na stronę sekcji „ostatnio przeglądane”. Dzięki niej użytkownik może szybko wrócić np. do produktów, z którymi miał styczność już wcześniej. 

Wskazówki:

• Daj użytkownikowi możliwość rozpoznania informacji na stronie (bez konieczności ich zapamiętywania).
• Zadbaj o pomoc w kontekście, zamiast zmuszać użytkowników do zapamiętywania poszczególnych kroków.
• Ogranicz do minimum informacje, które użytkownik musi zapamiętać.

7. Elastyczność i efektywność. Każdy z nas korzysta ze strony na swój indywidualny sposób. Jedna osoba będzie wolała skorzystać z wyszukiwarki, podczas gdy inna będzie szukać stron w menu. Użytkownik powinien mieć zapewnioną swobodę w działaniu i dostosowanie swoich nawyków do tego, co oferuje mu strona. Każdy powinien mieć możliwość wyboru takiej metody, która jest dla niego odpowiednia. 

Wskazówki:

• Zadbaj o to, aby pojawiły się skróty klawiaturowe i gesty dotykowe.
• Zadbaj o personalizację, czyli dostosowane treści i funkcji do potrzeb poszczególnych użytkowników.
• Zezwalaj użytkownikom na dokonanie wyboru metody poruszania się po stronie.

8. Estetyka i minimalizm. Elementy na stronie powinny być ograniczone do minimum, tak aby było tam jedynie to, co niezbędne. Stosowane elementy powinny obsługiwać podstawowe cele użytkownika,  koncentrując się na treści. Koncentracja może być wspomagana również przez odpowiedni projekt wizualny, przyciągający wzrok do najważniejszych kwestii.  Każda dodatkowa, niepotrzebna informacja zaburza swobodne korzystanie ze strony. 

Wskazówki:

• Zwróć uwagę na to, co najważniejsze w treści i w projektowaniu wizualnym.
• Zadbaj o to, aby niepotrzebne informacje nie zasłaniały tych, których potrzebujesz najbardziej.
• Zadbaj o priorytet treści i funkcji, aby łatwo obsługiwać podstawowe cele.

9. Jasna komunikacja w przypadku błędów. Komunikaty powinny być w jasny sposób przedstawione, tak aby użytkownik wiedział, jaki jest błąd i jakie jest rozwiązanie. Mogą być również przedstawiane za pomocą różnych zabiegów wizualnych. Takie działania mogą pomóc użytkownikowi w odnalezieniu błędu. 

Wskazówki:

• Zadbaj o tradycyjną wizualizację komunikatów o błędach, takich jak pogrubiony, czerwony tekst.
• Prostym i zrozumiałym językiem przedstaw użytkownikowi, gdzie znajduje się błąd.
• Zadbaj o to, aby zaproponować użytkownikowi rozwiązanie danego problemu.

10. Pomoc i dokumentacja. Są sytuacje, w których bez odpowiedniej wiedzy użytkownik nie będzie w stanie skorzystać ze strony. Użytkownik powinien mieć zapewniony łatwy dostęp do dokumentacji lub instrukcji, która przedstawi mu kolejne kroki. 

Wskazówki: 

• Zadbaj o to, żeby pomoc w postaci dokumentacji, jaką oferujesz użytkownikowi, była łatwa i konkretna, bez zbędnych informacji.
• Dokumentację przedstaw użytkownikowi wtedy, kiedy jest potrzebna.
• Zadbaj w dokumentacji o konkretne kroki, które należy wykonać.

Kierunki i trendy w ux

• Storytelling 

Przedstawienie historii, czy doświadczeń firmy pozwala na stworzenie więzi między użytkownikiem a przedsiębiorstwem. Łatwiej jest zaufać i nawiązać kontakt z firmą, o której użytkownik wie coś więcej. Ułatwia to również użytkownikowi zweryfikowanie tego, czy pasuje do wizji, produktu lub usługi.

• Eksperymentowanie z pozycjonowaniem nawigacji

Znajdowanie elementów nawigacyjnych jest równie ważne dla użytkowników, jak możliwość dotarcia do nich za pomocą kciuka. Urządzenia mobilne są wykorzystywane praktycznie w każdej sytuacji, a rozmiary ekranów wciąż rosną. Coraz częściej będziemy zauważać umieszczenie nawigacji bliżej dolnej części ekranu lub hybrydowo, gdzie  menu jest na górze, ale te najważniejsze opcje są dostępne na dole ekranu. 

• Bezproblemowe doświadczenie

Ten trend UX polega na tworzeniu doświadczenia użytkownika, które płynnie przepływa z jednego kroku do drugiego. Ważne jest, aby doświadczenie użytkownika było spójne i aby każdy element w danym doświadczeniu, był naturalną ewolucją od siebie. Płynny przepływ doświadczeń oznacza pozytywne wrażenia dla użytkownika. 

• Kreatywne doświadczenia Scroller

Trend, który powoli staje się coraz bardziej fantazyjny. Koncentruje się on na tym, co użytkownik może odkryć oraz co może go zaciekawić, gdy przewija kolejne części strony. Elementy poruszające się na stronie, wspólnie z użytkownikiem lub nie, przewijanie w tle, to wszystko sprawia, że doświadczenie odwiedzającego stronę jest jeszcze lepsze i jeszcze chętniej sprawdza on, co dana witryna może mu zaoferować. 

• Projektowanie interakcji emocjonalnych 

Inaczej projektowanie emocjonalne. Polega to na zaprojektowaniu strony w taki sposób, aby stworzyła ona więź z użytkownikiem, która z kolei wywołuje u niego reakcję emocjonalną. Dzięki temu możliwe jest nawiązanie głębszego połączenia ze stroną, która jest  odbierana bardziej pozytywnie i zapada w pamięć.

Najczęściej popełniane błędy

• Myląca nawigacja

W projekcie UX dla użytkownika wszystko powinno być intuicyjne. Internauta bez dodatkowej wiedzy, powinien wiedzieć, co i jak działa. Na przykład użytkownicy nie muszą myśleć o tym, które przyciski można kliknąć lub jak działa hover. W nawigacji chodzi bardziej o użyteczność niż o kreatywność.

• Niespójny i przeciążony projekt wizualny.

Zbyt duża ilość czcionek, kolorów, elementów, to wszystko sprawia wrażenie ciężkiej i trudnej w zrozumieniu strony. Użytkownik nie będzie chciał spędzić przy niej wiele czasu, jeżeli co chwile będzie atakowany nowym wyglądem.

• Funkcjonalność

Strona może posiadać super efekty wizualne, być spójna pod każdym względem, sprawiać wrażenie „świeżości” i w dalszym ciągu odstraszać użytkownika –  dlaczego? Należy skupić się na użytkownikach, na tym, po co przyszli na tę stronę, jakie mają cele,  potrzeby i na podstawie tego tworzyć funkcjonalność odpowiednią dla nich, skupić się na tym co najważniejsze i co jest faktycznie potrzebne, a co nie.

• Najważniejsza jest treść

Treść jest bardzo ważna przy tworzeniu projektu, kiedy nie mamy treści i nie mamy jeszcze pełnego obrazka. W takim wypadku kiedy zamienimy przykładową treść na makiecie na tą docelową, wszystko może wyglądać inaczej i będziemy zaczynać od nowa.

• Zbyt duża pewność siebie

Niestety, czasami zdarzają się sytuacje, gdzie pomijamy pewne etapy, które powinny zajść podczas projektowania UX. Jest to np. research, testy na użytkownikach, opinie innych, postrzeganie UX jako odpowiedzialności jednej osoby. Należy zwrócić uwagę na to, aby niczego nie pomijać podczas projektowania.

Podsumowanie

User Experience, czyli doświadczenia użytkownika to zagadnienie, o którym musimy pamiętać podczas całego procesu tworzenia nowego produktu. Od pierwszych ustaleń, przez badania, testy, makiety, wybór konkretnych rozwiązań, aż po bieżące utrzymanie i aktualizację.

Dobre strony UX dają użytkownikowi łatwość w obsłudze, swobodę i sprawiają, że ma on poczucie kontroli nad stroną. Przy odpowiednim zaprojektowaniu jesteśmy w stanie przekonać użytkownika, aby został na stronie dłużej i nawiązał kontakt. Nie utrudniamy, a pomagamy. Dajemy pewność użytkownikowi, że witryna spełnia jego oczekiwania.Pamiętajmy, to użytkownik jest najważniejszy i jego cele oraz potrzeby są dla projektanta UX priorytetowe!