Projektowanie stron internetowych opiera się na dwóch uzupełniających się dziedzinach, które w praktyce często się myli. UX design odpowiada za doświadczenie użytkownika, czyli sposób, w jaki człowiek osiąga swój cel na stronie, a UI design za warstwę wizualną i interaktywną interfejsu użytkownika. Rozdzielenie tych ról ma znaczenie praktyczne, ponieważ atrakcyjnego UI nie da się nałożyć na wadliwą architekturę informacji, a przemyślany UX bez czytelnej oprawy graficznej nie zbuduje zaufania. Jakość UX przekłada się przy tym na wymierne wskaźniki, w tym konwersję oraz współczynnik odrzuceń. Poniżej wyjaśniamy, czym różnią się oba obszary, kto za nie odpowiada w zespole projektowym i jakie kluczowe elementy decydują o skuteczności witryny.
Czym jest UX, a czym UI na stronie internetowej?
Skrót UX pochodzi od user experience i oznacza całość doświadczenia użytkownika w kontakcie z witryną, od pierwszego wejścia po zrealizowanie zamierzonego celu. Obejmuje strukturę treści, logikę nawigacji, kolejność kroków w formularzu oraz wszystko, co decyduje o tym, czy korzystanie ze strony jest intuicyjne. UI to skrót od user interface, czyli interfejs użytkownika, przez który człowiek komunikuje się z witryną. Warstwa wizualna obejmuje tu typografię, kolorystykę, ikony, przyciski oraz ich stany, na przykład zmianę wyglądu po najechaniu kursorem. Oba pojęcia dotyczą nie tylko stron internetowych, ale wszystkich produktów cyfrowych, w tym aplikacji mobilnych i systemów wewnętrznych. W praktyce projektowej rzadko występują osobno, ponieważ każda decyzja dotycząca układu ma konsekwencje wizualne, a każda decyzja graficzna wpływa na użyteczność. Dlatego mówi się zwykle o projektowaniu UX i UI jako o jednym procesie prowadzonym równolegle.
Jaka jest różnica między UX a UI?
Najkrócej różnicę między UX a UI można ująć tak, że pierwszy obszar określa, jak witryna działa, a drugi, jak wygląda i reaguje. UX odpowiada za użyteczność, czyli możliwość osiągnięcia celu bez zbędnego wysiłku, natomiast UI za estetykę i czytelność przekazu wizualnego. Różnica widoczna jest też w narzędziach pracy: warstwa doświadczenia opiera się na badaniach, mapach ścieżek i schematach, warstwa graficzna na systemach kolorów, siatkach i bibliotekach elementów interfejsu. Relacja pomiędzy UX i UI nie jest hierarchiczna, bo żadna z tych warstw nie zastąpi drugiej. Estetyczna strona z chaotyczną nawigacją zniechęca odwiedzających równie skutecznie jak logiczny serwis o nieczytelnej typografii. Zaprojektowana strona spełnia swoje zadanie wtedy, gdy dobre UX i dobry UI powstają razem, od pierwszego szkicu układu. Rozdzielanie tych etapów w czasie prowadzi zwykle do kosztownych poprawek na późniejszym etapie prac.
Czym zajmuje się UX designer, a czym UI designer?
UX designer zaczyna pracę od zrozumienia, kto wchodzi na stronę, po co i w jakim kontekście, a następnie przekłada te ustalenia na strukturę serwisu. Do jego zadań należą badania użytkowników, analiza zachowania użytkowników w narzędziach analitycznych, budowa architektury informacji oraz projektowanie ścieżek użytkownika prowadzących do konkretnych celów. UI designer przejmuje tę strukturę i nadaje jej formę: dobiera typografię, paletę kolorów, sposób rozmieszczenia przycisków oraz zasady spójności wizualnej całego serwisu. Efektem jego pracy jest zwykle system elementów interfejsu, który pozwala projektować interfejsy kolejnych podstron bez utraty jednolitego charakteru. W mniejszych zespołach obie role łączy jedna osoba, co przy prostszych serwisach bywa rozwiązaniem wystarczającym. Przy większych projektach rozdzielenie kompetencji jest korzystniejsze, ponieważ każda z tych dziedzin wymaga innego rodzaju wiedzy. Projektanci obu specjalności pracują przy tym w stałym kontakcie z osobami odpowiedzialnymi za treść, wdrożenia i widoczność serwisu w wyszukiwarce.
Jak wygląda projektowanie zorientowane na potrzeby użytkowników?
Punktem wyjścia są badania użytkowników, obejmujące wywiady, analizę danych z narzędzi analitycznych oraz obserwację zachowań na istniejącej witrynie. Profesjonalne projektowanie stron www zaczyna się właśnie od analizy potrzeb użytkowników, a nie od wyboru kolorów. Zebrane informacje pozwalają zbudować persony, czyli uogólnione profile odbiorców, oraz mapy ścieżek prowadzących do najważniejszych działań w serwisie. Na tej podstawie powstaje architektura informacji, która porządkuje treści w układ zrozumiały dla odwiedzającego, a nie odzwierciedlający strukturę organizacyjną firmy. Kolejnym krokiem są makiety, czyli uproszczone schematy podstron skupione wyłącznie na rozmieszczeniu elementów i hierarchii treści. Kolejność ma znaczenie praktyczne, ponieważ zmiana struktury na etapie makiety jest wielokrotnie tańsza niż przebudowa gotowego serwisu. Dopiero zatwierdzony układ otrzymuje oprawę graficzną, a projekt przechodzi do warstwy wizualnej.
Jakie kluczowe elementy decydują o dobrym UX?
Podstawą jest intuicyjna nawigacja, w której odwiedzający domyśla się położenia treści, zamiast szukać jej metodą prób i błędów. Równie istotna jest spójność, bo powtarzalny sposób działania przycisków i formularzy zmniejsza wysiłek poznawczy i buduje zaufanie do serwisu. Duże znaczenie ma szybkość ładowania strony, ponieważ opóźnienie liczone w sekundach wyraźnie podnosi współczynnik odrzuceń. Formularz krótki, jasno opisany i wyposażony w zrozumiałe komunikaty o błędach bezpośrednio wpływa na konwersję, zwłaszcza w sklepie internetowym. Czytelna typografia oraz odpowiedni kontrast między tekstem a tłem decydują o komforcie czytania i o dostępności serwisu dla osób słabowidzących. Znaczenie ma również przewidywalność interakcji, czyli to, czy element zachowuje się tak, jak odwiedzający się tego spodziewa. Wszystkie te elementy działają łącznie, dlatego pojedyncza poprawka rzadko zmienia jakość UX w sposób odczuwalny.
Jakie elementy UI budują pierwsze wrażenie?
Pierwsze wrażenie powstaje w ułamku sekundy i opiera się niemal wyłącznie na warstwie graficznej, zanim odwiedzający zdąży przeczytać choćby nagłówek. Decyduje o nim hierarchia wizualna, budowana różnicą rozmiaru, koloru i położenia, która wskazuje, co na stronie jest najważniejsze. Istotna jest ilość wolnej przestrzeni wokół treści, ponieważ zbyt gęsty układ utrudnia wyłowienie pojedynczej informacji i sprawia wrażenie chaosu. Przyciski i inne elementy interaktywne muszą wyglądać na klikalne oraz wyraźnie różnić się od treści statycznej, w tym poprzez stany po najechaniu i po kliknięciu. Estetyka nie jest tu celem samym w sobie, lecz narzędziem porządkującym odbiór i budującym wiarygodność firmy. Spójny język wizualny na wszystkich podstronach skraca czas potrzebny na orientację i wzmacnia rozpoznawalność marki. Elementy istotne z punktu widzenia celu witryny, w tym wezwania do działania, umieszcza się w miejscach zauważanych bez przewijania.
Czym różni się projekt wersji mobilnej od desktopowej?
Wersja desktopowa dysponuje szeroką przestrzenią, co pozwala pokazać rozbudowaną nawigację i większą liczbę treści jednocześnie. Na ekranie telefonu ta sama zawartość wymaga uproszczenia, przemyślanego zwijania sekcji i skrócenia ścieżki do najważniejszych działań. Zmienia się również sposób interakcji, ponieważ palec jest mniej precyzyjny niż kursor, a przyciski oraz odstępy między nimi muszą to uwzględniać. Inny jest także kontekst korzystania ze strony: odbiorca mobilny częściej szuka konkretnej informacji w pośpiechu, podczas gdy na komputerze łatwiej o dłuższą eksplorację serwisu. Z tego powodu wiele zespołów projektuje najpierw wersję mobilną, a dopiero potem rozbudowuje układ dla większych ekranów. Osobnej uwagi wymaga dostępność, obejmująca obsługę nawigacji z klawiatury, opisy alternatywne obrazów oraz odpowiedni kontrast, porządkowane przez wytyczne WCAG. Traktowanie wersji mobilnej jako zwykłego przeskalowania desktopowej należy do najczęstszych błędów w projektowaniu stron internetowych.
Jak testować i poprawiać UX po wdrożeniu?
Testy użyteczności polegają na obserwacji odbiorców wykonujących konkretne zadania i ujawniają miejsca, w których ścieżka użytkownika się rwie. Prowadzi się je na prototypie, czyli klikalnej wersji makiety, jeszcze przed rozpoczęciem prac programistycznych, a obserwacja kilku osób zwykle wystarcza, aby wychwycić najpoważniejsze przeszkody. Osobno przebiega kontrola techniczna, obejmująca działanie serwisu na różnych urządzeniach i przeglądarkach, szybkość ładowania oraz poprawność kodu. Weryfikacji wymagają wszystkie elementy interaktywne, ponieważ niedziałający formularz lub błędny odnośnik potrafią zniweczyć efekt całego projektu. Po wdrożeniu pracę przejmują dane: mapy kliknięć, nagrania sesji i wskaźniki konwersji pokazują rzeczywiste zachowanie użytkowników, a nie założenia projektowe. Na tej podstawie wprowadza się zmiany w UX małymi krokami, sprawdzając efekt każdej z nich osobno. Taki tryb pracy sprawia, że projektowanie UX i UI nie kończy się w dniu publikacji, lecz trwa przez cały okres życia serwisu.