Po szybkim przeszukaniu często aktualizowanych serwisów i blogów na temat projektowania stron, można odnieść wrażenie, że UX to nadal temat na fali. Z wszystkich artykułów można wywnioskować wprost lub doszukać się między wierszami stwierdzenia, że najcenniejszą umiejętnością projektantów stron internetowych jest właśnie projektowanie dobrej funkcjonalności i w pełni się z tym zgadzam.
Zamiast jednak powtarzać w kółko jedno i to samo, przepisywać książki i wspomniane branżowe blogi pokażę na konkretnych przykładach na czym polega dobra funkcjonalność.
Każdą cechę spróbuję krótko scharakteryzować aby jednak nie wytykać palcem kto robi dobrze a kto źle, dla potrzeb tego artykułu przygotowałem przykładowe projekty stron internetowych lub zrobiłem zrzut znalezionych szablonów.
Dla przypomnienia: czym jest UX?
O tym na czym polega UX próbowałem krótko wyjaśnić w artykule jakość strony internetowej. Przypomnę, że User Experience jest to ogół wrażeń jaki użytkownik doświadcza podczas używana produktu (najczęściej cyfrowego). Dostarczanie dobrego UX polega na dopasowywaniu projektu do potrzeb odbiorców poprzez projektowanie skutecznej interakcji i zwrócenie uwagi na niezawodność działania i weryfikacji czy dzięki temu użytkownik osiąga cel.
Dyscyplina User Experience łączy zarówno część techniczną i użytkową (jak coś działa?) jak i tą psychologiczną/filozoficzną (po co to w ogóle powstało?). Z terminem UX spotkamy się najczęściej w programach komputerowych, aplikacjach mobilnych i właśnie na stronach www.
UX dotyczy takich obszarów jak:
- Interakcja (animacje, reagowanie na wprowadzanie)
- Architektura Informacji (linki, teksty)
- Wygląd (design, kolory, proporcje)
- Funkcjonalność (działanie, procesy)
- Użyteczność (czytelność, dostępność)
- Typografia (font, wielkość, wysokość linii, tracking)
- Interfejs użytkownika (przyciski, zakładki, harmonijki)
- Treść (strategia, przekaz, marketing)
1. Hierarchia
Zobacz, jesteś na stronie z tekstem na temat UX. Funkcjonalnością jest między innymi to, że tytuł poprzedzający ma numer, został pogrubiony i jest wyróżniony większym krojem tekstu ale nie większym niż tytuł całego artykułu. Jest to tzw. hierarchia dokumentu. Ktoś powie: „takie banały, wiem to od podstawówki” – no to przyjrzyj się niektórym stronom internetowym. Celem stosowania hierarchii jest ułatwienie użytkownikowi w znalezieniu tego czego szuka.
2. Konwencje
Dobry projekt strony, trzyma się pewnych konwencji. Wszystko dla dobra użytkownika i tego aby czuł się komfortowo. Logo z lewej albo na środku, pierwsza pozycja z menu to strona główna, a informacje o polityce prywatności pewnie znajdziemy na samym dole – no właśnie.
Bardzo lubię kreatywność na stronach internetowych, ale zwykle dzielę strony na te „łał!”, którymi można się pochwalić na AWWWARDS i na te, które będą wygodne dla użytkowników (co nie znaczy że nie można mieć i jednego i drugiego – wręcz przeciwnie). Menu w dolnej lewej części strony głównej to już według mnie przesada.
3. Czytelność interfejsu
Projekt musi dawać do zrozumienia co można kliknąć, co można rozwinąć, przewinąć. Jeżeli po najechaniu danego elementu w menu rozwija się pod-menu warto to zaznaczyć dziubkiem w dół. Dobrym patentem jest przyklejone menu na stronach gdzie mamy dużo przewijania. Szczegóły – ktoś powie – a no szczegóły, które kumulując się wywierają dobre albo złe wrażenie.
Czytelny interfejs minimalizuje błędy użytkownika, ułatwia decyzje związane z poruszaniem się po stronie a odpowiedni projekt wręcz kieruje użytkowników zgodnie z ich zamierzeniami.
4. Porządek
Każdą ilość informacji da się dobrze zorganizować na potrzeby Internetu – nie ważne czy mamy do czynienia z portalem internetowym, blogiem czy stroną firmową. Narzędzia przydatne w organizacji to między innymi podstrony, kategorie, filtry i oczywiście odpowiedni design.
5. Jak najmniej słów, bez których można się obejść
Jest to jedna z ważniejszych zasad. Jeżeli mamy coś do przekazania na stronie, zróbmy to w najprostszy możliwy sposób oczywiście nie obcinając sensu. Unikajmy utartych schematów polegających na pisaniu kilkunastu zdań „o firmie”, pokazywaniu zdjęć budynków z każdej strony. Pokaż produkt, podkreśl jego korzyści, podaje cenę i daj możliwość zakupu przez internet, ewentualnie zostaw kontakt.
Wszystko po to aby zaoszczędzić czas użytkownikom a tym samym zwiększyć ich satysfakcję z używania stron i sklepów internetowych. Minimalizm na stronach internetowych est kluczowy.
6. Szybkie działanie
Nie trzeba szukać dowodów ani skrupulatnie studiować tematyki UX by dojść do wniosku, że szybkość działania to chyba jedna z najbardziej istotnych kwestii wpływających na poziom satysfakcji użytkownika podczas korzystania z aplikacji, stron i sklepów internetowych.
Warto tutaj wspomnieć, że chodzi zarówno o szybkie wczytywanie się całej strony z serwera jak i sposób dostarczania kolejnych fragmentów strony i sposób interakcji. Przejścia i animacje powinny być szybkie, należy tutaj ważyć dosłownie każde setne sekundy. Czytaj więcej o tym co składa się na szybkość strony internetowej.
7. Proste wybory
Zwykle jest tak, że lubimy mieć wielki wybór, tym bardziej jeżeli te wybory dotyczą tego jak będzie wyglądać nasze mieszkanie lub jakie wyposażenie będzie miał nasz nowy samochód. W interfejsach użytkownika idea szerokiego wyboru zwykle się nie sprawdza. Im prościej tym lepiej.
8. Proste zadania
Nie ma lepszego sposobu na pogorszenie wyników sprzedaży jak skomplikowanie procesu zakupu lub… formularza rejestracji. Nawet jedno pole za dużo może obniżyć konwersje o 50%. Tym polem może być pole do wpisania kuponu promocyjnego kiedy większość klientów po prostu nim nie dysponuje – no bo po co mają przepłacać? Lepiej kupić tam gdzie się nie przepłaca.
Na podanie adresu dostawy będzie czas przy wyborze sposobu dostawy. To samo tyczy się danych do faktury, przecież system może o nie pytać dopiero w momencie finalizacji pierwszego zakupu.
A jeśli chodzi o rejestrację to radzę wykorzystać zewnętrzne i bezpieczne systemy uwierzytelniające takie jakie udostępnia Google czy Facebook:
9. Skuteczna nawigacja
Należy mieć na uwadze, że nie wszyscy użytkownicy trafiają najpierw na naszą stronę główną. Często jest to konkretny produkt wyszukany w wyszukiwarce Google. Dobra nawigacja realizuje zatem kilka podstawowych i ogromnie istotnych z punktu widzenia użytkownika funkcji:
- Wskazywanie użytkownikowi gdzie się znajduje – np. za pomocą dobrego tytułu strony, wskazaniu aktualnej kategorii i zaznaczeniu tego w nawigacji
- Udostępnienie drogi którą użytkownik może podążać czyli umożliwienie eksploracji bardziej wgłąb lub obok (poprzedni, następny artykuł, podobne produkty)
- Często pomijana funkcja – umożliwienie powrotu o jeden stopień wyżej np. za pomocą tzw. okruszków lub przycisku wstecz bezpośrednio na stronie.
Niezastąpionymi dodatkami do udoskonalenia nawigacji są systemy zakładek, harmonijki, wspomniane okruszki oraz logiczna hierarchia wszystkich elementów nawigacyjnych.
10. Wygoda przeglądania list
Kiedy przeglądamy oferty lub zdjęcia, nikt nie lubi zmieniać stron. Aby usprawnić poruszanie się twoich klientów po listingach artykułów, produktów czy zdjęć warto skorzystać z funkcji
- nieskończonego przewijania (infinite-scroll). Z takim przewijaniem masz do czynienia na Facebooku i w Instagramie.
- filtrowania wyników
Takie podejście spowoduje, że dociekliwi i analizujący parametry produktów klienci, dokładniej sprawdzą twoją ofertę a osoby które szybko chcą czegoś znaleźć po prostu znajdą to szybciej i sprawniej.
Warto wspomnieć, że nieskończone przewijanie ma dodatkowe zalety dla obu stron. Rozwiązania typu infinite-scroll oszczędzają baterię w urządzeniach mobilnych (przeładowanie strony jest bardziej kosztowne obliczeniowo w porównaniu do załadowania dodatkowych elementów) ładowanie mniejszych porcji danych odciąża serwer z powtarzalnych zapytań HTTP i obniżają obciążenie bazy danych (ponieważ zazwyczaj zwracane są mniejsze porcje danych w porównaniu do listingu na jednej stronie).
11. Wyraźne i ostre zdjęcia w widoku mobilnym
Korzystając z nowoczesnego smartfona, często mamy do czynienia ze zdjęciami, które wyglądają niewyraźnie z powodu skalowania ze zbyt małego oryginału. Skorzystaj z funkcji elastycznych zdjęć, które za pomocą atrybutu srcset i zapytaniom medialnym są w stanie serwować rozmiar dopasowany do konkretnego urządzenia.
Jeżeli nasz CMS nie obsługuje takiego skalowania zdjęć, istotne z punktu wizerunkowego elementy graficzne (takie jak np. logo) warto dodać do strony w wymiarze podwójnym. np. zamiast 320x320px dajemy 640x640px.
12. Spełnianie obietnic
Pod pojęciem spełniania obietnic w kontekście web designu i UX mam na myśli konsekwentne nazewnictwo i używanie podobnych (ale niekoniecznie identycznych) fraz kluczowych. Jest to obszar gdzie UX ściera się z optymalizacją pod kątem wyszukiwarek. Przykładem może być tutaj nezewnictwo i frazy kluczowe użyte w kotwicach linków, tytule strony w nagłówku (h1), title tag i adres URL – powinny być charakterystyczne dla danej podstrony i nie wprowadzać zbędnego zamieszania.
Jeżeli w menu mamy pozycję o nazwie „Cennik” to na stronie powinna pojawić się tabela z cennikiem a nie informacja dotycząca sposobu wyceny czy formularz do wysłania zapytania ofertowego. Jeżeli chcemy zachęcić do skorzystania z takiego formularza nazwijmy podstronę „Wycena”. Jest to o wiele mniej clickbaitowe i, no właśnie, dotrzymujemy obietnicy.
13. Design zgodny z obowiązującymi trendami
Design sklepu internetowego, który był wzorem do naśladowania w poprzednich latach, dziś jest coś co najwyżej wystarczająco dobry. Należy mieć na uwadze najnowsze trendy w sferze tworzenia stron, interakcji i rozwoju technologii.
Jak to z trendami bywa, próba wpasowania się „na siłę” może spowodować efekt odwrotny do zamierzonego – niektóre trendy szybko przemijają a to powoduje że interfejs straci swoją świeżość. Grunt to wyselekcjonować z tych trendów elementy, które będą korespondować ze stylem i charakterem marki i które będą użyteczny przez długi czas.
14. Nieustanne badanie i dostrajanie
W przypadku UX nie można dojść na drodze teoretycznych rozważań, które rozwiązania są lepsze, a które gorsze. O ile zdobyte doświadczenia to jedno z fundamentów konstruowania dobrego UX i projektowania dobrego designu o tyle zawsze można wykorzystać testy A/B stron internetowych.
Dzięki testom A/B (które bazują na eksperymentach z użyciem faktycznych użytkowników naszych produktów cyfrowych) metodologicznie wysublimujemy, które rozwiązania sprawdzają się lepiej a które gorzej. W ten sposób możemy badać zarówno dobór słów jak i szczegóły w stylu kolor przycisku czy wielkość zdjęć.
Podsumowanie
Optymalizacja User Experience to świetna inwestycja, której rezultatem będzie wzrost sprzedaży bądź zmniejszenie kosztów reklamy dzięki temu, że osoby odwiedzające nasz sklep czy stronę internetową częściej będą stawać się naszymi klientami. Dyscyplina ta łączy psychologię, design i technologię.
Celem projektowania UX jest ułatwienie osiągania celów użytkownika poprzez odpowiednią optymalizację zarówno treści, estetyki oraz tego jak coś działa. Według mnie przemyślana organizacja treści, stosowanie sprawdzonych rozwiązań, przestrzeganie zasad dobrego designu i pozbywanie się wszystkiego bez czego można się obejść to sprawdzony sposób na projektowanie stron, który zawszę będzie działał niezależnie od branży czy grupy docelowej. Nie trzeba kosztownych analiz, stosu książek i dziesiątek artykułów – wystarczą sprawdzone narzędzia analityczne, trochę empatii, pokory i skupienie się na tym co jest najistotniejsze – zadowolenie użytkownika.
Źródła:
Krug S., Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron internetowych, Helion, 2014
Odpowiedz lub skomentuj