Web Design Blog / Web:

Czym jest User Experience? – przykłady

Po próbie szybkiego przeszukania często aktualizowanych serwisów i blogów na temat projektowania stron, można odnieść wrażenie, że UX to obecnie 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.

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ł podkreślony bardzo cienką linią 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.

czym jest UX - hierarchia

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.

czym jest ux - konwencje

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.

czym jest ux - ui

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.

czym jest ux - mało słów

 

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.

user experience - szybkość

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 – ta zasada w projektowaniu interfejsu jest tutaj spotęgowana.

user-experience - proste wybory

 

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:

  1. Wskazywanie użytkownikowi gdzie się znajduje – np. za pomocą dobrego tytułu strony, wskazaniu aktualnej kategorii i zaznaczeniu tego w nawigacji
  2. 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)
  3. 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.

dobra nawigacja - ux

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).

User Experience - Infinite Scroll

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.

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 ż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

Czym jest User Experience? – przykłady
4.8 (95.41%) głosów: 61

Autor: (29 lat)

Służę pomocą w razie wykonania / odnowienia strony lub sklepu internetowego dla twojej firmy niezależnie od twojej lokalizacji czy skali przedsięwziecia.

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach usługi :-)

Zadaj pytanie lub skomentuj

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Brak komentarzy.
Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail