Projektowanie UI / UX

Wiele osób myli te dwa pojęcia, stosując je zamiennie. Choć obie dziedziny są ze sobą ściśle związane, projektowanie UX nie jest tym samym co projektowanie UI. Co powinieneś wiedzieć na temat tworzenia stron z zasadami UX i UI?

Różnice między UX (User Experience) a UI (User Interface)

Zanim zaczniemy omawiać różnice pomiędzy jednym a drugim, powinniśmy wyjaśnić, czym jest UX a czym UI. UX to skrót od słów User Experience, czyli doznań użytkownika podczas korzystania ze strony internetowej lub aplikacji mobilnej. Projektowanie UX polega więc na usprawnieniu użyteczności produktu końcowego tak, by był on przyjemniejszy w odbiorze oraz bardziej intuicyjny w obsłudze dla osoby będącej przedstawicielem grupy docelowej.

UI z kolei to skrót od User Interface, co oznacza interfejs użytkownika. UI odpowiada więc za rozmieszczenie wszystkich elementów wizualnych na stronie internetowej lub w aplikacji. Oznacza to, że UI design jest odpowiedzialny za wygląd i ma za zadanie ułatwić korzystanie z produktu, zapewniając mu atrakcyjny wizualnie i funkcjonalny interfejs.

Czym różni się UI designer od specjalisty UX?

Pierwszą znaczącą różnicą pomiędzy jednym specjalistą a drugim są kompetencje, które powinna posiadać osoba na danym stanowisku. Projektowanie User Interface wymaga wysokiego poczucia estetyki, kreatywności, znajomości trendów w dziedzinie designu oraz obsługi programów graficznych.

Zadaniem specjalisty UX jest za to bliska współpraca z użytkownikiem i przekazywanie informacji do designera. Musi więc on cechować się przede wszystkim wysoką empatią, mieć zdolności interpersonalne oraz wysoko rozwinięte umiejętności analizy. Podczas gdy UI designer pracuje niemal wyłącznie na programach graficznych, specjalista UX zajmuje się rysowaniem diagramów, tworzeniem prototypów aplikacji, pracą na narzędziach analitycznych oraz aplikacjach do przeprowadzania testów zdalnych, a także wywiadami z testerami.

Specjalista UX i współpraca z designerem/grafikiem

Na pierwszy rzut oka widać, że mimo istotnych różnic obydwie te dziedziny się przenikają. Sukces efektu końcowego zależy od ścisłej współpracy między specjalistą od UX a projektantem UI. Podczas gdy designer tworzy projekt, specjalista UX sprawdza aspekt użytkowy, obserwując reakcję użytkowników i ich zachowanie na stronie. Przekazuje wyniki swoich obserwacji i konsultuje je z projektantem UI. Ten wprowadza poprawki na makiety i na nowo oddaje prototyp do weryfikacji przez specjalistę UX.

Zasady UX i proces tworzenia

Zadaniem specjalisty UX jest projektowanie prototypu witryny lub aplikacji, zakładającego poruszanie się po stronie przeciętnego użytkownika oraz opcje, które powinny być dostępne na każdym z ekranów. Odpowiedzialny jest za surowy zarys tego, jak mają wyglądać strony internetowe i aplikacje, a także za późniejszą kontrolę i testy nad projektem graficznym od UI designera.

Responsywność stron

Z roku na rok nieustannie rośnie ilość urządzeń, na których możesz przeglądać strony internetowe. To już nie tylko komputery stacjonarne i laptopy, ale także tablety, telefony, a nawet zegarki. Nic więc dziwnego, że jedną z podstawowych zasad pracy UX designera stała się konieczność zapewnienia responsywności.

Oznacza to, że jego zadaniem jest takie projektowanie witryn, by możliwe było korzystanie z nich na każdym urządzeniu w prosty i przyjemny sposób. Wiąże się to nie tylko z dostosowaniem serwisu do prawidłowego wyświetlania się na mniejszych ekranach urządzeń mobilnych, ale także optymalizacją użyteczności strony w taki sposób, by nie przytłoczyć użytkownika nadmiarem informacji. Z tego powodu ważne jest, by tworząc wersję responsywną witryny zacząć projektowanie od najmniejszego ekranu. Wówczas łatwiej będzie zadbać o prawidłowe rozmieszczenie wszystkich elementów na stronie.

Intuicyjna nawigacja

Kolejnym elementem przy tworzeniu intuicyjnych aplikacji internetowych oraz stron WWW jest dbałość o prawidłową nawigację. Użytkownicy korzystają z twojego produktu w jakimś konkretnym celu. Najczęściej robią to w poszukiwaniu informacji lub treści, które są im potrzebne. Dlatego bardzo ważne jest, by dać im to, czego pragną w sposób łatwy, przejrzysty i szybki.

Liczy się tu nie tylko dobrze skonfigurowane menu, ale także widoczne i wygodne w użyciu przyciski, pozwalające na dostanie się do konkretnej podstrony przy minimalnej ilości kliknięć lub ruchów palcem, a także łatwy powrót do poprzedniego ekranu. Ma to znaczenie nie tylko w przypadku tradycyjnych stron, ale zwłaszcza w sklepach internetowych, gdzie bardzo istotne jest maksymalne uproszczenie wszystkich kroków ścieżki zakupowej, a także ułatwienie znalezienia prawidłowej kategorii lub produktu.

Projektowanie User Experience – współpraca z użytkownikami

Znaczną część pracy specjalisty UX zajmuje kontakt z użytkownikami i analiza ich ruchów na stronie lub w aplikacji. Bada on potrzeby użytkowników, prowadzi testy użyteczności, przeprowadza ankiety oraz analizuje wyniki badań clicktrackingowych.

Oznacza to, że oprócz umiejętności technicznych potrzebnych to tworzenia wireframe’ów oraz interaktywnych prototypów, projektant UX musi mieć szeroko rozwinięte umiejętności interpersonalne, dzięki którym łatwiej będzie mu zrozumieć potrzeby użytkowników i przenieść je na aplikacje internetowe i projekty, które współtworzy.

Zasady projektowania UI

Po opracowaniu wstępnego prototypu przez specjalistę UX, projektant UI ma za zadanie przełożyć surowe wytyczne na bardziej stylowy i designerski format docelowy. Tworzy on graficzną strukturę, dzięki której projekt nabiera właściwego kształtu. Choć z pozoru może to wydawać się prostym zadaniem, w rzeczywistości wymaga sporego doświadczenia oraz wiedzy na temat wpływu, jaki ma kolor, typografia oraz struktura strony na konwersję.

Hierarchia wizualna

Aby stworzyć dobrą i funkcjonalną makietę, należy wiedzieć, w jaki sposób użytkownicy postrzegają treści na naszej stronie. Nadmiar informacji sprawia, że przeglądając witrynę, raczej skanuje się ją wzrokiem w poszukiwaniu konkretnych elementów, niż czyta jej zawartość od deski do deski. Dlatego, jeśli chcesz, by odwiedzający stronę mógł łatwo znaleźć to, czego potrzebuje, powinieneś zastosować się do zasad hierarchii wizualnej.

Oznacza to, że najbardziej istotny element powinien wyróżniać się spośród reszty i dominować na stronie. Te mniej ważne powinny zwracać na siebie uwagę w mniejszym stopniu. Doświadczeni designerzy doskonale wiedzą nie tylko w jaki sposób użytkownik przegląda stronę, ale również jakie kolory, kształty i elementy przykują jego wzrok w pierwszej kolejności, a na co zwróci uwagę w następnym momencie.

Czytelność strony i znaki graficzne

Większość użytkowników przegląda stronę w poszukiwaniu konkretnych treści. Ważne jest zatem, żeby inne elementy witryny nie przysłaniały tego, co najważniejsze. Tekst powinien być czytelny, tło nieprzeładowane, a kolory i struktura strony dobrane tak, by nie odwracać uwagi od tego, co najważniejsze. Projekt, w którym elementów jest zbyt dużo lub są one nieodpowiednio dopasowane, sprawia, że rośnie niezadowolenie osoby przeglądającej.

Istotne jest także umiejętne korzystanie ze znaków graficznych – wszystkie elementy graficzne, które rzucają się w oczy, mogą świetnie prowadzić użytkownika do miejsca, w które chce dotrzeć. Są to zarówno buttony, zdjęcia, grafiki, jak i przykuwające wzrok nagłówki – wszystko, co sprawia, że szybko znajdziesz odpowiednią informację.

Jaką przewagę daje projektowanie funkcjonalnych stron internetowych i aplikacji?

Dlaczego UX i UI design mogą dać ci przewagę nad konkurencją? Obecnie każdy użytkownik ceni sobie wygodę. O ile jeszcze kilkanaście lat temu nikt nie rezygnował z zakupu z powodu zbyt długiego czasu ładowania się strony czy nieintuicyjnej nawigacji, dziś nawet niewielki mankament może zrazić internautę do dokonania konwersji.

Wymagania rosną, a konkurencja jest na tyle duża, że jakikolwiek dyskomfort może przekonać użytkownika do rezygnacji z dalszego przeglądania strony i szukania rozwiązania gdzie indziej. Im witryna lub aplikacja są bardziej intuicyjne, tym chętniej użytkownicy z nich korzystają. To zwiększa zadowolenie klientów i jakość oraz rozpoznawalność marki, co bezpośrednio przekłada się na dalsze sukcesy w postaci polecenia, dobrych opinii oraz zwiększenia ilości konwersji przy zmniejszeniu współczynnika odrzuceń.

Doświadczenie i wyczucie – jak tworzymy nasze projekty?

Podejmując współpracę z naszymi klientami, liczy się dla nas profesjonalne podejście do tematu. Każda branża, a co za tym idzie również każdy projekt, wymaga od nas indywidualnego zaangażowania i odpowiedniej analizy potrzeb zarówno twoich, jako właściciela, jak i użytkowników będących w twojej grupie docelowej.

W tym celu na początku każdej współpracy przeprowadzamy audyt UX, który wykazuje, z jakimi problemami borykają się nasi klienci, jakie elementy wymagają modyfikacji oraz jakie błędy należy usunąć. Już na tym etapie korzystamy z różnorodnych metod: od podstawowej analizy heurystycznej, poprzez wędrówkę poznawczą, aż po testy A/B czy profesjonalne makiety.

Używamy także specjalistycznych narzędzi do badań clicktrackingowych, takich jak Hotjar, które analizują ruchy myszką, scrollowanie oraz kliknięcia użytkownika. Na tej podstawie nasi specjaliści wyciągają odpowiednie wnioski i wprowadzają zmiany, które mają na celu uproszczenie ścieżki konwersji i zwiększenie zadowolenia oraz wygody użytkownika.