UX Design, czyli User Experience Design jest koncepcją projektowania doświadczeń użytkownika, których doświadcza on podczas korzystania z produktu. Jest to wielowymiarowy proces, obejmujący różne zagadnienia – projektowanie interakcji, architekturę informacji oraz projektowanie wizualne.

Jest to dziedzina, o której nie można zapomnieć podczas tworzenia stron internetowych. Od tego zależy, z jakim odczuciem użytkownik opuści naszą stronę, jakie wywoła ona na nim wrażenie oraz jak chętnie będzie z niej korzystał i wracał w przyszłości. Jeśli nawigacja nie jest intuicyjna, teksty mało czytelne lub zrozumiałe, a przyciski słabo widoczne, osoba ta szybko się pogubi i prawdopodobnie nie wróci. Dlatego UX jest wyjątkowo istotny.

Spis treści:

User Experience, User Interface, Web Design - czym się różnią?
Zasady projektowania
Kierunki i trendy w ux
Najczęściej popełniane błędy
Streszczenie
Podsumowanie

User Experience, User Interface, Web Design - czym się różnią?

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

10 heurystyk Nielsena - 10 ogólnych zasad projektowania interakcji stworzonych przez jednego z najbardziej uznanych specjalistów UX Jakoba Nielsena. Zbiór podstawowych zasad, którymi powinien się kierować każdy projektant.

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.

Zapisz się na newsletter i bądź na bieżąco z naszymi artykułami z bloga. Nie przegap najciekawszych naszych wpisów.

Administratorem udostępnionych przez Ciebie danych osobowych jest Ideo Force Sp. z o.o. Podanie danych osobowych jest dobrowolne, jednak ich niepodanie uniemożliwi świadczenie usług na Twoją rzecz. Dowiedz się więcej o zasadach przetwarzania Twoich danych osobowych oraz przysługujących Ci uprawnieniach w Polityce prywatności.

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.

Streszczenie

User Experience (UX) to inaczej doświadczenia użytkownika.
UI czyli User Interface, oznacza „Interface użytkownika”. Jest to nic innego jak aspekt graficzny strony.
Web Design to inaczej projektowanie stron internetowych. Jest to określenie, które obejmuje całość zagadnień związanych z projektowaniem, wliczając w to UX i UI.
Przy projektowaniu stron internetowych warto korzystać z 10 heurestyk Nielsena. To zbiór zasad, który pomaga w tworzeniu witryn, w pełni dopasowanych do potrzeb użytkowników.
Trzeba dbać m.in. o to, aby treści znajdujące się na stronie były w pełni zrozumiałe dla użytkownika. Warto dać mu także poczucie kontroli nad systemem. Ważna jest również kwestia jasnej komunikacji błędów w witrynie.
Obsługa strony musi być łatwa dla internauty i nie powinna wymagać od niego zapamiętywania informacji.
Do trendów w UX zalicza się m.in. storytelling oraz projektowanie interakcji emocjonalnych.
Przy tworzeniu stron internetowych mogą zdarzać się błędy. Należy do nich np. myląca nawigacja lub brak wdrożenia do witryny potrzebnych funkcjonalności. Błędem jest także pomijanie istotnych etapów w procesie projektowania, takich jak np. research.

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!

Magdalena Pasterz

Magdalena Pasterz

O mnie.

Wszystkie wpisy autora.