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

Jak zrobić stronę internetową?

Obierz zniżkę - 30%

w WebWave

Najnowsze artykuły:

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!

Koniecznie przeczytaj inne artykuły z tej serii:

• Część 1. Podstawy projektowania graficznego

• Część 2. Pojęcia, pomysły, podstawy UX

• Część 3. UX - badania, makiety, programy - tu jesteś

• Część 4. UX. Jak zrobić makietę? Budowa strony www. Wstęp do UI 

• Część 5. Tworzymy prototyp strony, czyli UI! 

• Część 6. Publikacja strony www i pozycjonowanie (SEO)

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

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

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 

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!