Co zrobić, aby nasza strona internetowa była w pełni funkcjonalna? Jak nauczyć się webdesignu? Postanowiliśmy odpowiedzieć na te pytania! To trzeci artykuł z cyklu Nauka webdesignu. W tym wpisie zajmiemy się UX, czyli doświadczeniem użytkownika na stronie. Dowiesz się, jak przeprowadzać badania i tworzyć makiety oraz jakich programów używać w tym celu. Miłej lektury!

 

 

Co to jest UX

 

UX, jak już wcześniej wspomnieliśmy, to User Experience, czyli doświadczenia użytkownika. O czym właściwie mowa? To wszystkie działania, które użytkownik wykonuje na stronie i jego odczucia z nimi związane. Chodzi tu przede wszystkim o to, żeby użytkownik wiedział, co musi zrobić, aby osiągnąć swój cel na stronie. Więcej na temat podstaw UX przeczytasz w naszym poprzednim artykule z tej serii. Dziś zajmiemy się rozwinięciem tego tematu. 

 

 

Makiety i prototypy UX

 

makieta UX

 

Czym jest makieta strony, a czym jej prototyp? Często te pojęcia są używane zamiennie, jednak jeśli bliżej się temu przyjrzeć, są między nimi różnice.

 

 

Makieta strony internetowej

 

Makieta to graficzne, bardzo uproszczone przedstawienie interfejsu i funkcjonalności strony internetowej. Jest to zatem rysunek strony, w którym nie skupiamy się na jej wyglądzie, a raczej na rozmieszczeniu elementów i przemyśleniu, w jaki sposób zaplanować jej funkcje i interakcje dla dobrego user-flow (przepływu zachowań użytkowników). Jest to zatem szkielet strony, który nie jest klikalny. Do jej stworzenia można użyć programów graficznych lub po prostu kartki papieru i ołówka.

 

 

Prototyp strony www

 

Prototyp jest interaktywną makietą. Oznacza to, że pokazuje w pełni wygląd i funkcjonalność strony, którą planujemy uzyskać w ostatecznej wersji. Prototypy są tworzone w specjalnych programach graficznych i najczęściej są klikalne. 

 

 

Programy do makietowania i prototypowania

 

programy do UX

 

Najpopularniejszymi programami do prototypowania i makietowania projektów stron www są Figma (dostępna zarówno na Windowsie, jak i na Macach) i Sketch (na komputery Apple i system MacOS). 

 

Są jednak programy (dostępne na każdym komputerze), które umożliwiają pracę nad stroną, projektowanie jej i publikowanie gotowej, w jednej aplikacji. Oznacza to, że za pomocą jednego narzędzia możesz stworzyć stronę od podstaw, przechodząc przez każdy etap - od pomysłu do opublikowania. W dodatku, możesz wdrożyć swoją stronę internetową bez posiadania umiejętności kodowania. To narzędzie możesz przetestować tutaj

 

 

Metody projektowe User Experience

 

Tak naprawdę, każda osoba ma własny model projektowy, z którym czuje się najlepiej. Przedstawimy dziś jednak 3 propozycje, z których warto korzystać.

 

 

Metoda 1:

 

  • analiza,
  • projekt,
  • ocena,
  • wdrożenie.

 

Jest to bardzo prosta metoda projektowania UX. W pierwszym etapie podchodzimy do analizy, w co można zawrzeć research i badania. Następnie należy przystąpić do tworzenia pierwszej wersji projektu, którą trzeba jeszcze przetestować i ocenić. Te dwa etapy tak powielają się tworząc “koło działań” (projekt - ocena - projekt - ocena itd.), aż do uzyskania zadowalającego efektu. Wtedy projekt można uznać za gotowy i przystąpić do jego wdrożenia.

 

 

Metoda 2:

 

  • mapowanie,
  • wybór,
  • prototypowanie,
  • testowanie,
  • wdrożenie.

 

W tej metodzie rozpoczynamy od stworzenia mapy witryny. Przygotowujemy szkice i wybieramy najlepsze rozwiązania, które następnie prototypujemy i testujemy. Po wprowadzeniu poprawek projekt jest gotowy do wdrożenia. 

 

 

Metoda 3:

 

  • odkrywanie,
  • definiowanie,
  • rozwijanie,
  • dostarczanie.

 

W tej metodzie początkowo skupiamy się na użytkownikach i ich potrzebach oraz na funkcjonalności strony internetowej. Następnie przychodzi czas na rozwijanie projektu, czyli dopracowanie go i ulepszenie, a następnie wdrożenie. 

 

 

Badania UX 

 

badania UX

 

Jeśli chodzi o User Experience, podstawą są badania. Przedstawimy kilka metod, którymi można się posłużyć, badając UX na stronie internetowej. Oczywiście, nie ma możliwości, żeby wykorzystać je wszystkie, dlatego warto wybrać te, które najlepiej sprawdzą się w danym projekcie. O ile część z nich, takie jak research, bench­marking i analiza konkurencji, należy zrobić przed przystąpieniem do robienia makiet, większość przeprowadza się już na gotowych prototypach strony, wraz z testującymi.

 

 

Research 

 

Jak zawsze - na początku czeka nas research. Na tym etapie warto poszukać inspiracji i pomysłów, a także zastanowić się nad działaniami konkurencji i tym, jak wyglądają jej strony internetowe, a zatem przeprowadzić analizę konkurencji i bench­marking.

 

 

Analiza konkurencji

 

Planując funkcjonalności naszej witryny, nie możemy zapomnieć o jej przeznaczeniu i zastosowaniu. Warto zatem przyjrzeć się działaniom konkurencji i zastanowić się, w jaki sposób możemy się wyróżnić na jej tle.

 

 

Bench­marking 

 

Jeśli o konkurencji mowa, warto pamiętać o tym, że nie powinniśmy wymyślać koła na nowo i korzystać z rozwiązań, które pojawiają się na ich stronach www. To, co jest znane użytkownikom, jest dla nich intuicyjne. Warto zatem prześledzić konkurencję także pod kątem ich stron internetowych, np. elementów interfejsu, które się powtarzają.

 

 

Testy AB 

 

W tym momencie przechodzimy do badań, które należy wykonać po utworzeniu makiet lub prototypów.

 

Testy AB, to jedna z najpopularniejszych metod badawczych w UX. Polega ona na przygotowaniu dwóch wersji strony i obserwowaniu zachowań użytkowników oraz konwersji na pożądane działanie. 

 

 

Google Analytics 

 

Jest to potężne narzędzie od Google, które służy do analizy strony internetowej. Można dzięki niemu zaobserwować np. ilość sesji na konkretnych podstronach i porównać dane. Warto z niego korzystać nie tylko ze względu na UX, ale także na pozycjonowanie strony, o czym w kolejnych częściach cyklu. 

 

 

Paper prototyping

 

Jest to badanie polegające na stworzeniu papierowej makiety strony internetowej i przetestowaniu jej na użytkowniku. W tym wypadku zamiast myszką posługuje się on dłonią, wskazując palcem elementy, w które kolejno chciałby kliknąć. 

 

 

Card sorting 

 

To badanie pomaga głównie w przetestowaniu hierarchii elementów. Bierze w nim udział od 5 do 15 osób, które mają za zadanie intuicyjnie pogrupować elementy strony w kategorie. Wyróżniamy 3 rodzaje takiego sortowania - otwarte (open sort), zamknięte (closed sort) i wolne, nazywane też wolną listą (free list). 

 

 

Pogłębione wywiady indywidualne (IDI) 

 

Jest to rozmowa dwóch osób, gdzie jedna z nich jest badaną, a druga badającym. Opiera się ona na wcześniej przygotowanym zestawie pytań. 

 

 

Grupy fokusowe

 

Tutaj również występuje gotowy zestaw pytań, którym operuje badający. Takie badanie przebiega jednak w większej grupie osób, zwykle 5-10. Często jest ono nagrywane lub obserwowane przy użyciu lustra weneckiego. 

 

 

Clicktracking

 

Są to pomiary kliknięć użytkowników strony (co do piksela), co pozwala na ustalenie najlepszych miejsc i elementów strony (najczęściej klikanych), ale też tych, w których użytkownicy oczekują hiperłącza (a niekoniecznie się tam ono znajduje). 

 

 

Heatmapy 

 

To również mapy kliknięć, z tym, że pokazane w sposób map ciepła. Za pomocą odpowiednich plam kolorystycznych pokazane są najlepiej widoczne, najbardziej odwiedzane i najchętniej klikane elementy strony. 

 

 

Eye tracking

 

To metoda, która bada ruch gałek ocznych użytkowników. Pomaga ona w ustaleniu najlepszych pod względem widoczności miejsc na stronie internetowej, w których możemy umieścić najważniejsze informacje. 

 

 

Jak planować badania UX? Kanwy

 

Jedną z powszechnie znanych metod planowania badań UX, jest zastosowanie kanw, czyli mini-planerów, w których rozpisuje się najważniejsze założenia dotyczące projektu, metod projektowych, rodzaju badań itp. Szablony takich kanw są dostępne do pobrania za darmo w internecie. 

 

 

Podsumowanie

 

To trzecia z 6. części naszego mini cyklu poświęconego nauce webdesignu. Skupiliśmy się tu na projektowaniu doświadczeń użytkownika - UX. W kolejnych wpisach dowiesz się, jak robić makiety w praktyce i jak zbudowana jest strona www, jak stworzyć prototyp strony pod względem UI oraz jak wdrożyć witrynę i dbać o gotową stronę. Śledź nas na facebooku, aby nie przegapić żadnego wpisu!

 

 

 

 

 

 

 

Nauka webdesignu - cz. 3. UX - badania, makiety, programy

18 grudnia 2020
UX

Najnowsze artykuły:

Najnowsze artykuły:

Obierz zniżkę - 30% w WebWave
Jak zrobić stronę internetową?

ODBIERAM

SPRAWDŹ

Obierz zniżkę - 30% w WebWave
Jak zrobić stronę internetową?

ODBIERAM

SPRAWDŹ

29 grudnia 2020
Co zrobić, aby nasza strona internetowa była w pełni funkcjonalna? Jak nauczyć się webdesignu? Postanowiliśmy odpowiedzieć na te pytania! To piąty artykuł z cyklu Nauka webdesignu. Tym razem omówimy projektowanie
23 grudnia 2020
Co zrobić, aby nasza strona internetowa była w pełni funkcjonalna? Jak nauczyć się webdesignu? Postanowiliśmy odpowiedzieć na te pytania! To czwarty artykuł z cyklu Nauka webdesignu. Przedstawimy Wam dzisiaj praktyczne
29 grudnia 2020
Co zrobić, aby nasza strona internetowa była w pełni funkcjonalna? Jak nauczyć się webdesignu? Postanowiliśmy odpowiedzieć na te pytania! To piąty artykuł z cyklu Nauka webdesignu. Tym razem omówimy projektowanie
23 grudnia 2020
Co zrobić, aby nasza strona internetowa była w pełni funkcjonalna? Jak nauczyć się webdesignu? Postanowiliśmy odpowiedzieć na te pytania! To czwarty artykuł z cyklu Nauka webdesignu. Przedstawimy Wam dzisiaj praktyczne

UX I UI

TRENDY W

WEB DESIGNIE

SEO I POZYCJONOWANIE

GRAFIKA INTERNETOWA

PORADY

BEZ KODOWANIA

Jeśli chcesz przeczytać artykuły z innej kategorii, kliknij w wybrane przez siebie pole:

WRÓĆ DO BLOGA