Ten tekst przeczytasz w 7 minut

Jeden komentarz

UX UI – co to jest i jakie są różnice?

UX UI – co to jest i jakie są różnice? - zdjęcie nr 1

ux ui

Stawiając kolejne kroki w świecie marketingu internetowego, prędzej czy później natkniemy się na pojęcia takie jak user interface (UI) oraz user experience (UX). Obydwa terminy są kluczowe w projektowaniu i modyfikowaniu stron internetowych – w dużej mierze od nich zależy, czy na stronie pojawi się wartościowy ruch z wyszukiwarek (sic!) oraz to, czy klienci będą opuszczać stronę tuż po wejściu, a może jednak zdecydują się na dokonanie transakcji lub przesłanie formularza kontaktowego.

User Interface i User Experience – co to jest?

Interfejs użytkownika możemy nazwać reprezentacją sposobu, w który użytkownik wydaje programowi polecenia, a ten wypełnia określone zadania. Interfejs komunikuje użytkownika z programem. To przede wszystkim aspekty techniczne – szybki dostęp do potrzebnych funkcji, prawidłowy opis, rozłożenie treści, hierarchia informacji, ale również wizualia – kolorystyka czy typografia. To samo menu na stronie może przecież być przejrzyste lub mało intuicyjne w zależności od użytego fontu, kolorów, ikon, kontrastu czy obramowania. W przypadku stron internetowych częścią UI będzie więc każdy interaktywny element, który po wykonaniu akcji (np. kliknięcie) spowoduje określoną odpowiedź. Przy tworzeniu lub przebudowie strony www oraz aplikacji, mówiąc o UI, mamy na myśli zwykle GUI, czyli graficzną reprezentację relacji HCI (interakcja człowiek-komputer).

UX to termin znacznie szerszy. Obejmuje całość doświadczeń użytkownika w kontakcie z danym produktem. Choć często to pojęcie odnosi się do stron internetowych czy aplikacji, można je zastosować w zasadzie do każdego towaru czy usługi. Nawet korzystając z długopisu, portfela, pilota do TV albo kubka do herbaty, czujemy określone emocje, które wynikają z funkcjonalności, wygody użytkowania, przydatności czy estetycznej oprawy produktu. Zadaniem specjalisty od user experience jest sprawienie, by cały proces kontaktu z produktem był jak najprostszy i najbardziej przyjemny dla klienta – wymaga to ciągłego testowania zastosowanych rozwiązań. 

Według badań serwisu Forrester odpowiedni UI na stronie potrafi podnieść współczynnik konwersji o 200%, natomiast odpowiedni UX nawet o 400%. Oczywiście w większości przypadków rezultat nie będzie aż tak spektakularny, nie ma jednak wątpliwości, że kwestie te mają ogromne znaczenie pod względem zdolności danej strony do generowania zysku.

(Dalszą część artykułu znajdziesz pod formularzem)

Wypełnij formularz i odbierz wycenę

Zapoznamy się z Twoim biznesem i przygotujemy indywidualną ofertę cenową na optymalny dla Ciebie mix marketingowy. Zupełnie za darmo.

Twoje dane są bezpieczne. Więcej o ochronie danych osobowych

Administratorem Twoich danych osobowych jest Verseo spółka z ograniczoną odpowiedzialnością z siedzibą w Poznaniu, przy ul. Węglowej 1/3.

O Verseo

Siedziba Spółki znajduje się w Poznaniu. Spółka jest wpisana do rejestru przedsiębiorców prowadzonego przez Sąd Rejonowy Poznań – Nowe Miasto i Wilda w Poznaniu, Wydział VIII Gospodarczy Krajowego Rejestru Sądowego pod numerem KRS: 0000910174, NIP: 7773257986. Możesz skontaktować się z nami listownie na podany wyżej adres lub e-mailem na adres: ochronadanych@verseo.pl

Masz prawo do:

  1. dostępu do swoich danych,
  2. sprostowania swoich danych,
  3. żądania usunięcia danych,
  4. ograniczenia przetwarzania,
  5. wniesienia sprzeciwu co do przetwarzania danych osobowych,
  6. przenoszenia danych osobowych,
  7. cofnięcia zgody.

Jeśli uważasz, że przetwarzamy Twoje dane niezgodnie z wymogami prawnymi masz prawo wnieść skargę do organu nadzorczego – Prezesa Urzędu Ochrony Danych Osobowych.

Twoje dane przetwarzamy w celu:

  1. obsługi Twojego zapytania, na podstawie art. 6 ust. 1 lit. b ogólnego rozporządzenia o ochronie danych osobowych (RODO);
  2. marketingowym polegającym na promocji naszych towarów i usług oraz nas samych w związku z udzieloną przez Ciebie zgodą, na podstawie art. 6 ust. 1 lit. a RODO;
  3. zabezpieczenia lub dochodzenia ewentualnych roszczeń w związku z naszym uzasadnionym interesem, na podstawie art. 6 ust. 1 lit. f. RODO.

Podanie przez Ciebie danych jest dobrowolne. Przy czym, bez ich podania nie będziesz mógł wysłać wiadomości do nas, a my nie będziemy mogli Tobie udzielić odpowiedzieć.

Twoje dane możemy przekazywać zaufanym odbiorcom:

  1. dostawcom narzędzi do: analityki ruchu na stronie, wysyłki informacji marketingowych.
  2. podmiotom zajmującym się hostingiem (przechowywaniem) strony oraz danych osobowych.

Twoje dane będziemy przetwarzać przez czas:

  1. niezbędny do zrealizowania określonego celu, w którym zostały zebrane, a po jego upływie przez okres niezbędny do zabezpieczenia lub dochodzenia ewentualnych roszczeń
  2. w przypadku przetwarzanie danych na podstawie zgody do czasu jej odwołania. Odwołanie przez Ciebie zgody nie wpływa na zgodność z prawem przetwarzania przed wycofaniem zgody.

Nie przetwarzamy danych osobowych w sposób, który wiązałby się z podejmowaniem wyłącznie zautomatyzowanych decyzji co do Twojej osoby. Więcej informacji dotyczących przetwarzania danych osobowych zawarliśmy w Polityce prywatności.

UI i UX – różnice

UX UI – co to jest i jakie są różnice? - zdjęcie nr 4
ux ui różnice

Nie istnieje biznes w internecie, dla którego interfejs użytkownika i doświadczenie użytkownika nie będą istotne. Za każdą stroną www, portalem, e-sklepem i aplikacją kryją się przecież cele biznesowe, które poprawny UI i UX będą realizować. Co więcej, niepoprawny interfejs czy user experience mogą pogłębiać spadki i obniżać współczynnik konwersji, o czym nigdy się nie dowiemy bez audytu, testów i eksperckiego poszukiwania błędów. 

Specjalista od interfejsu projektuje i implementuje rozwiązania, natomiast specjalista UX planuje i analizuje całą strukturę doświadczeń użytkownika – prowadzi badania przed i w trakcie tworzenia produktu, testuje zachowania na już istniejącym produkcie, sprawdza, jak z pewnymi aspektami poradziła sobie konkurencja, przeprowadza audyt i wykrywa błędy, z którymi zmagają się użytkownicy w trakcie obsługi.

UI to jeden z elementów składających się na UX – tak samo jak UX jest jednym z elementów składających się na web development.

Najlepiej obrazującym przykładem czym jest UI a czym UX, może być design wielu ścieżek w miejskich parkach. Zaprojektowane są często w taki sposób, który wymaga od spacerowicza (użytkownika) skręcania wyłącznie pod kątem 90 stopni – niczym bohaterowie gier z czasów 8-bitowych konsol. Jest to estetyczne, teoretycznie sensowne, jednak praktyka pokazuje, że niemal natychmiast pojawiają się wydeptane przez pieszych ścieżki w miejscach, których nie przewidział projektant. Spacerowicze wybierają sposób, który zapewni im krótszą drogę do wybranego celu – tworzą swoje własne, UX-owe rozwiązanie, na przekór oryginalnemu UI. I może nie jest najładniejsze, jednak taka wydeptana w trawie ścieżka jest wygodniejsza od pięknych, brukowanych i przemyślanych alejek.

Jeśli chodzi o UX/UI stron internetowych i aplikacji, wielokrotnie zdarza się, że właściciel strony inwestuje w nową wersję witryny – ładniejszą i nowocześniejszą. Liczba odwiedzających utrzymuje się na tym samym poziomie, jednak sprzedaż spada – bardzo często jest to wynikiem błędów w designie UX. Przeprowadzając testy i analizując mapy ciepła (heat maps) czasem okazuje się na przykład, że użytkownicy próbują klikać w grafiki lub inne miejsca na stronie, które nie są interaktywne. Zastosowany design okazuje się mylący, a w efekcie odwiedzający opuszczają stronę. Mimo że UI został zaprojektowany poprawnie, zawiódł UX i modelowanie ścieżek przepływu użytkownika.

Dlaczego UX/UI są takie ważne?

UX i UI mają ogromny wpływ na zdolność danej strony do generowania konwersji (e-commerce) czy zbierania leadów (branża usługowa). Pojęcia te dotykają także kwestii pozycjonowania stron internetowych – algorytm Google przy ustalaniu kolejności stron w wynikach wyszukiwania bierze pod uwagę to, czy obsługa strony jest intuicyjna, ergo czy użytkownik prawdopodobnie spędzi na niej więcej czasu i wykona interakcję.

  1. Perspektywa użytkownika

Osoba wchodząca na daną stronę – nieważne, z jakiego źródła – oczekuje od niej przejrzystości i wygody obsługi. Użytkownik chce, by ścieżka do zdobycia określonej informacji czy dokonania zakupu była możliwie bezproblemowa i jak najkrótsza. Badania dowodzą, że ogromna większość ludzi odwiedzających stronę nie wróci na nią, jeśli UX nie spełnia ich oczekiwań. Gdy sklep internetowy wymaga zbyt wielu kroków do sfinalizowania transakcji, współczynnik konwersji utrzymuje się na niskim poziomie. Jako internauci chętniej korzystamy ze stron, które zwyczajnie nie irytują podczas obsługi, działają szybko, nie marnują naszego czasu, a przy tym są estetyczne i “cieszą oko”.

  1. Perspektywa crawlerów Google

Roboty sieciowe, które odwiedzają strony w celu ich indeksowania, kiedyś zwracały uwagę jedynie na słowa kluczowe umieszczone w treści oraz liczbę linków. To już przeszłość – dzisiaj Google podczas pozycjonowania analizuje nie tylko content i linki, ale również szereg innych czynników. Jest ich kilkaset – oceniana jest m.in. szybkość ładowania czy to, jak strona wyświetla się na różnych rozdzielczościach (na przykład to, czy tekst nie wychodzi poza ramki). Robot sieciowy stara się wcielić w rolę użytkownika i promować te strony, których prawdopodobnie oczekuje internauta, wpisując daną frazę w wyszukiwarkę.  

  1. Perspektywa właściciela strony

Strony internetowe mają różne przeznaczenie w zależności od modelu biznesowego. Serwisy contentowe, które utrzymują się z wyświetleń reklam, stawiają przede wszystkim na zwiększenie ruchu. W przypadku stron sklepów czy firm z branży usługowej duża liczba odwiedzających nie ma aż tak wielkiego znaczenia – liczy się jakość ruchu. Ostatecznie właścicielowi strony zależy na użytkownikach, którzy przeglądają i kupują produkty czy wysyłają pytanie o wycenę usługi. Podobnie jak w punkcie drugim – pozyskanie użytkowników na stronie z pozycjonowania ma sens, jeśli pozycjonowane frazy i wygenerowany z nich ruch finalnie wiążą się z podniesieniem współczynnika konwersji. Niektóre słowa kluczowe powodują wyraźny wzrost ruchu, ale jeśli nie generują zysku, nie ma z nich wielkiego pożytku. UX strony czy aplikacji także powinien być tak zaprojektowany, by klienci szli jak po sznurku do celu zarówno osobistego jak i biznesowego. Win-win.

Wzięcie pod uwagę tych wszystkich trzech aspektów na raz, dla których projektowany jest UX i UI, nie jest łatwe. Z tego powodu ważne jest, by podczas projektowania lub przeprowadzania modyfikacji strony, w zespole znajdowali się specjaliści od UX i UI. Intuicja w przypadku web developmentu ustępuje analizie, danym i testom. To, że coś wydaje się funkcjonalne i estetyczne, wcale nie oznacza, że takie jest – diabeł tkwi w szczegółach, nawet tak pozornie błahych, jak wielkość czy kolor przycisku pozwalającego na dodanie produktu do koszyka. 

Zakres pracy specjalisty UI a obszary działania eksperta UX

UX UI – co to jest i jakie są różnice? - zdjęcie nr 5
ux ui zakres prac

UI i UX to aspekty, o które trzeba zadbać przy projektowaniu i/lub optymalizacji strony. Jakie będą zadania specjalistów?

Na co zwróci uwagę specjalista od UI?

  • Szeroko rozumiane dobre praktyki projektowania graficznego: światło międzyobiektowe, kolory dopełniające, kompozycja;
  • Modele umysłowe i użytkowość projektu, jak np. prawo Hicka czy Fittsa;
  • Typografię – dobór odpowiedniego fontu i jego wielkość;
  • Trendy w designie, technologii oraz branży;
  • Psychologię koloru – jakie kolory i ich zestawienia wywołują w ludziach określone odczucia;
  • Cele i ograniczenia wynikające z briefu, jak np. rozdzielczości, na które mają być projektowane widoki, dopasowanie do gridów dla ułatwienia pracy front-endowcom;
  • Uwagi od UX-owca i innych specjalistów.

Na co zwróci uwagę specjalista od UX?

  • Cały zakres pracy specjalisty UI 🙂
  • Szeroko rozumiane dobre praktyki architektury informacji;
  • Rozwiązania zastosowane w branży i u najbliższych konkurentów;
  • Persony – profil, demografia, zachowanie, zwyczaje, oczekiwania;
  • Stopień biegłości cyfrowej użytkownika;
  • Limity techniczne (m.in. ograniczenia CMSa czy serwera);
  • Cele i ograniczenia wynikające z briefu;
  • Cele biznesowe i zasady wzorcowego modelowania lejków do celu (conversion funnels);
  • Modelowe lub wynikające z badań i analiz user stories i user flow;
  • Dostępną analitykę i wyniki testów A/B – w przypadku istniejących stron;
  • Uwagi od UI-owca i innych specjalistów;
  • Itd.

Jeżeli zastanawiasz się, czy należy zainwestować w poprawę obecnej strony firmy lub projektowanie całkowicie nowej, doskonałym pierwszym krokiem będzie zlecenie profesjonalnego audytu UX/UI. Audytorzy gruntownie przebadają m.in. strukturę lejków zakupowych i ścieżek przepływu użytkownika, zidentyfikują obecne i potencjalne problemy, przeprowadzą testy technologiczne oraz sprawdzą strukturę informacji na stronie. Rozpoznanie błędów to podstawa poprawy wyników.

Z jakich narzędzi korzysta Verseo podczas przeprowadzania audytu?

Wśród wielu narzędzi w zależności od pakietu nasi specjaliści przeprowadzają drobiazgowy audyt UX/UI za pomocą między innymi:

  • Map ciepła (heat maps) – pokazują elementy strony, w których najczęściej pojawia się kursor myszki, gdzie użytkownicy wykonują kliknięcia lub do jakiej części stronę scrollują;
  • Nagrywanie sesji użytkownika – pozwala zobaczyć, w jaki sposób użytkownicy przeglądają stronę i gdzie znajdują się elementy, które hamują proces zakupowy;
  • Badanie obszarów mylących i irytujących użytkowników na stronie jak dead click, rage clicks, misclicks i sygnały frustracji np. “thrashed cursor” (słowniczek tych pojęć znajdziesz poniżej); 
  • Badanie procesu zakupowego i podróży użytkownika – więcej na ten temat możesz przeczytać w osobnym artykule na naszym blogu;
  • Testy A/B – wybieramy dwie pozornie równoważne opcje i sprawdzamy, która z nich przynosi lepsze efekty w praktyce;
  • Badanie profilu użytkownika – sprawdzamy, jacy ludzie przeglądają stronę, którzy najlepiej konwertują, dlaczego porzucają koszyki i jak dopasować witrynę do ich potrzeb.

Mikrosłowniczek UI/UX:

  • Dead clicks – kliknięcia, które niczego nie aktywują;
  • Rage clicks – kliknięcia, które pojawiają się, gdy sfrustrowany użytkownik energicznie i wielokrotnie klikać w danym miejscu, ponieważ ma trudności z aktywowaniem przycisku czy linka;
  • Misclicks – nieintencjonalne kliknięcia w inny przycisk, niż zakładał użytkownik;
  • Thrashed cursor – takim mianem określamy sytuację, w której użytkownik zaczyna wykonywać chaotyczne, nieskoordynowane ruchy myszką – najczęściej w oczekiwaniu na załadowanie strony lub gdy strona/element strony nie działa tak, jak powinna.

User Interface oraz User Experience mają ogromne znaczenie zarówno dla użytkowników, którzy trafiają na stronę, jak i dla crawlerów wyszukiwarek – a co za tym idzie, wpływają na wyniki finansowe firmy. Jeżeli nie jesteś zadowolony z tych aspektów firmowej strony www lub zastanawiasz się, co można na niej poprawić, zapraszamy do kontaktu ze specjalistą od audytu UX w Verseo!

Komentarze (1)

Wymagany, ale nie będzie opublikowany
  • UX UI – co to jest i jakie są różnice? - zdjęcie nr 7

    Darek

    21 lip 2021, 11:30

    Kiedyś na szkoleniu usłyszałem takie tekst „goście od ux są jak projektanci mody, nikt ich nie rozumie, chociaż ich się chwali”. Wiem, że to spłaszczenie tematu, ale ux, ui itd… musi być zgodne i współmierne z analityką, wtedy ma sens.