User experience – jak zaprojektować stronę www?

Wyobraź sobie, że szukasz jakiejś informacji w internecie. Dzień jak co dzień – myślisz. Wpisujesz frazę w wyszukiwarkę, klikasz pierwszy link, przechodzisz do strony. Przewijasz, czytasz i chcesz więcej informacji. Zaczynasz rozglądać się po ekranie w poszukiwaniu nawigacji. Szukasz menu, ale nie ma go ani na górze strony, ani po bokach, ani nawet skrótu na dole. Pozostaje Ci tylko podziwiać piękną grafikę i przekonujące teksty. Co robisz? 

Większość z nas szybko się podda i przejdzie dalej. Nawet najpiękniejsza grafika czy najlepsze teksty nie wystarczą, by strona internetowa spełniała swoje zadanie. Strona musi być „po coś” i „dla kogoś”.

Z tego tekstu dowiesz się: 

• czym jest User experience i kim jest UX designer,
• jakie praktyki User experience możesz wykorzystać na swojej stronie www,
• gdzie szukać informacji i skąd uczyć się o User experience.

Grafik czy User experience Designer?

UX to skrót od User Experience, czyli doświadczenia użytkownika. UX designer zajmuje się projektowaniem tych doświadczeń. Samo słowo „projektowanie” może być tutaj mylące, ponieważ nie oznacza wcale tworzenia layoutu czy grafiki. Co zatem robi UX designer? 

Bada potrzeby przyszłego użytkownika strony i proponuje takie rozwiązania, które czynią ją użyteczną i łatwą w obsłudze. 

To tak w skrócie. Praca UX Designera opiera się głównie na badaniach, wiedzy z psychologii i socjologii. Warto wiedzieć, że UX Designer nie pracuje sam. Co rusz pojawiają się nowe role, które są istotne dla projektowania doświadczenia użytkownika. Mamy więc UX Researchera, UX Writera, programistów i oczywiście UI Designera, czyli tego odpowiedzialnego za grafikę (z ang. User Interface). Bardzo fajnie poszczególne role przedstawił Bartosz Jurkowski podczas konferencji Element Talks w 2017 roku: 

Niektóre serwisy budują całe zespoły, tak się dzieje w przypadku Facebooka, Canvy czy naszego rodzimego Allegro. Jak widzisz, sam wygląd strony jest w tym procesie niczym wisienka na torcie. 

Zanim zajmiesz się wyglądem, zadbaj o solidną konstrukcję

Jak podejść do projektowania doświadczeń użytkownika nie będąc UX Designerem? Nie będę Cię oszukiwać, to nie jest łatwe zadanie. Mimo to są rzeczy, które możesz zrobić samodzielnie. 

1. Określ cel, jaki ma Twoja strona – może to być sprzedaż produktów, budowanie społeczności, budowanie marki itp. 
2. Opisz swojego idealnego odbiorcę, stwórz tzw. „personę”, dzięki temu łatwiej dobierzesz odpowiedni język, kolory, zdjęcia. 
3. Dokładnie zbadaj, jak prezentuje się konkurencja i ułóż strategię, dzięki której się wyróżnisz, lub znajdź swoją niszę.
4. Uporządkuj wszystkie dane, które będziesz prezentować na stronie, uprość to, co możesz i dobierz odpowiednie CTA (call to action – wezwania do działania). 
5. Zrób listę wszystkich narzędzi, których potrzebujesz (np. hosting, domena, integracje z mediami społecznościowymi, systemami płatności, certyfikaty oraz zabezpieczenia itp.).
6. Wybierz najlepszą platformę (np. gotowy system zarządzania treścią lub rozwiązanie zaprojektowane tylko dla Ciebie), upewnij się, że Twoja strona będzie responsywna i szybka.
7. Stwórz mapę, po której będzie się poruszał Twój odbiorca. Zaplanuj ją tak, by ścieżki do celu były krótkie (maksymalnie 2-3 kliknięcia) i na każdym etapie było wiadomo, gdzie się znajdujemy i jak stąd wrócić.

Pamiętaj, że wszystkie te czynności mają charakter zestawień i schematów. Dopiero kiedy wypracujesz te wszystkie elementy, sprawdzisz słabe strony i je dopracujesz, czas zająć się stroną wizualną. Kreatywność jest tutaj pożądana, ale musisz pamiętać o kilku niezbędnych elementach, które sprawią, że użytkownik poczuje się u Ciebie jak w domu i zrobi to, czego oczekujesz. 

6 dobrych praktyk User experience, z którymi zadbasz o pozytywne doświadczenia

Projektowanie strony to oczywiście okazja do wykazania się fantazją, ale dla dobra doświadczeń użytkownika zastosuj się do kilku prostych wytycznych. 

1. Ogranicz kolory na stronie – wystarczy 2-3 kolory bazowe. Jeśli masz wątpliwości co do tego, jak zestawiać kolory, zajrzyj na stronę UXPRO. Znajdziesz na niej zbiór narzędzi do dobierania kolorów. 
2. Zapewnij szybki powrót na stronę główną – internauci są przyzwyczajeni do tego, że kliknięcie logo pozwoli przenieść się na stronę główną. Dodatkowo nie zaszkodzi, by odpowiedni odnośnik znalazł się również w menu głównym.  
3. Wyszukiwarka dla leniwych i nie tylko – możliwość przeszukania zawartości strony to wymóg, który nie dotyczy już tylko dużych serwisów czy sklepów internetowych. Wyszukiwarka uratuje Cię, jeśli użytkownik nie będzie miał ochotę na przeklikiwanie się przez kolejne poziomy treści.  
4. Śledź użytkownika – a w zasadzie: pozwól mu śledzić siebie. Tzw. breadcrumbs to zapis poszczególnych etapów, które przeszedł do konkretnego miejsca. Są jak drogowskazy, które umożliwiają cofnięcie się do poprzedniej decyzji. 
5. Zadbaj o odpowiedni kontrast tekstu i kolorów – czytanie na ekranie męczy, dlatego twórcy stron robią wszystko, by treści były łatwe do odczytania. Dotyczy to zarówno wielkości tekstu, jak i kontrastu między poszczególnymi elementami. Możesz pokusić się też o dostosowanie projektu do wytycznych dla dostępności internetowej (WCAG). 
6. Testuj swoje rozwiązania i nie bierz niczego za pewnik – zrób to choćby w najprostszy sposób. Możesz pokazać stronę osobie, która nie  brała udziału w jej projektowaniu. Obserwuj wszystkie kliknięcia, decyzje, staraj się wyłapać miejsca, w których dana osoba się gubi. Taki prosty test pozwoli ci wyeliminować błędy, zanim będą Cię one słono kosztować.    

Ucz się i wprowadzaj zmiany 

Projektowanie doświadczeń użytkownika wymaga ciągłego uczenia się. Na szczęście strony internetowe są takimi produktami, które pozwalają na ciągłe wprowadzanie zmian i ulepszanie. Większość nowinek pojawia się w internecie dość szybko, wystarczy wiedzieć, gdzie szukać. Jeśli interesuje Cię tematyka user experience oto miejsca, w które warto zaglądać: 

Grafmag.pl – magazyn dla projektantów 

Zebza.net – blog projektantki Natalii Bienias, gdzie znajdziesz mnóstwo wiedzy

Theawwwesomes.org – projekt prowadzony przez Agę Naplochę, gdzie znajdziesz świetne materiały teoretyczne i praktyczne kursy z kodowania.

Tworzenie stron www – katogoria na naszym blogu, która pomoże Ci nie tylko w UX 🙂