Projektowanie UI na podstawie danych

Z biznesowego punktu widzenia, User Interface to potężne narzędzie do budowania konwersji. Kiedy spełnia swoją rolę, użytkownik jest w stanie zrozumieć produkt, przekonać się do niego i realizować w nim swoje cele. A idealnie jest wtedy, kiedy zaakceptuje produkt jako część normalnego stylu funkcjonowania w pracy czy w życiu prywatnym.

Wiele elementów interfejsu wpływa na konwersję.  Między innymi:

• Szata graficzna,
• architektura informacji,
• układ sekcji / elementów,
• elementy interaktywne i nawigacyjne,
• widżety,
• okienka,
• pola tekstowe,
• zdjęcia i inne elementy graficzne.

Tworzą one język komunikacji produktu z odbiorcą końcowym. Osobą, która powinna czuć się na stronie czy w aplikacji jak „u siebie”. Pozytywne doświadczenia, badane przez ekspertów od User Experience, są kluczowym celem projektowania UI.

Za takim efektem końcowym stoi połączenie estetyki i funkcjonalności, które odpowiada na potrzeby klientów. Aby zaprojektować skuteczny interfejs, konieczne jest poznanie warunków, które trzeba spełnić. Informacje mają sami użytkownicy, ze swoimi przyzwyczajeniami, doświadczeniami, intuicją, wiedzą, językiem. Jeśli UI designer stworzy produkt pod ich charakterystykę, można mówić o sukcesie. Dobry design nie jest — i nie powinien — być jednak dziełem przypadku.

Projektowanie UI – na czym polega i jak różni się od pracy grafika?

Różnica opiera się na materii, nad którą się pracuje. Grafik komputerowy tworzy różnego rodzaju projekty graficzne (logotypy, okładki, plakaty, ulotki czy opakowania). Z kolei designer UI koncentruje się wyłącznie na interfejsach. Ich projektowanie to krok dalej, niż grafika użytkowa.
Efekty pracy projektanta interfejsu oceniane są nie tylko na podstawie estetyki i spójności z marką. Produkt ma być jednocześnie użyteczny i funkcjonalny. Do tego stopnia, aby skutecznie zawalczył o przychylność użytkownika. Kompozycje elementów wizualnych, interaktywnych i statycznych muszą być użyteczne w scenariuszach użytkowania specyficznych dla danego typu odbiorcy.

Sukces interfejsu zależy od tego, jak zostanie odebrany przez grupę docelową. Dobry projektant musi wiedzieć, jakich informacji o tych osobach potrzebuje, a następnie je zrozumieć, aby przełożyć oczekiwania rynkowe na proces projektowania.

Jest to zadanie skomplikowane. Wymagające znajomości UI guides, zestawów dobrych praktyk i wzorców UI. W tym typografii, zasad doboru kolorów, używania kontrastów, hierarchizowania dostępu do informacji, budowania intuicyjnych kompozycji.

Należy także pamiętać o spójności estetyki i użyteczności. Zaniedbanie w sferze graficznej grozi osłabieniem pozytywnego oddziaływania na emocje użytkownika od pierwszych sekund styczności z interfejsem. Z kolei niedostateczny nacisk na użyteczność wywoła rozczarowanie odbiorcy produktem, nawet jeśli wygląda atrakcyjnie i ma potencjał od strony technicznej. Ten potencjał nie zostanie uwolniony bez użyteczności.

Cechy dobrego UI

Różnią się w zależności od branży, w której działa produkt. Dokładnie tak, jak różnią się grupy użytkowników. Mimo wszystko można wyszczególnić kilka uniwersalnych cech dobrego projektu interfejsu:

1. Estetyka dopasowana do grupy docelowej. Początkiem konwersji jest pozytywna emocja. A tę, zwłaszcza przy pierwszym kontakcie, można wywołać tylko za pomocą grafiki. Użytkownik powinien zobaczyć design z jednej strony znajomy, a z drugiej interesujący.
2. Intuicyjność w obsłudze dla debiutantów i osób obeznanych z produktem. Wymaga to kompromisu. Najczęściej da się go uzyskać za pomocą tutoriala — na przykład nakładki z objaśnieniami. Po wdrożeniu się w obsługę interfejsu można wskazówki wyłączyć i działać szybciej.
3. Responsywność. Użytkownicy lubią mieć dostęp do narzędzi zarówno z poziomu kanapy przed laptopem z dużym ekranem, jak i w ruchu, przez smartfona. Aplikacje webowe powinny mieć zatem responsywny design. Ewentualnie produkt można wesprzeć aplikacjami mobilnymi, które synchronizują się z platformą.
4. „Niewidzialność”. Dobry UI nie zwraca na siebie uwagi, nie zmusza też do szukania elementów nawigacyjnych. Służy użytkownikowi, pozostawiając go w centrum.
5. Czytelność elementów klikalnych. Od strony graficznej powinny być wyraźnie i w konsekwentny sposób wyszczególnione. Od strony językowej — opisane tak, aby nie było wątpliwości, co następuje po danym kliknięciu.
6. Minimalizm w kwestii liczby ekranów. Ergonomia i sprawność zależą od liczby kliknięć potrzebnych do przejścia przez dany proces. Jeśli jest ich zbyt dużo, po pewnym czasie będą męczyć. Szczególnie w sytuacji słabego połączenia internetowego.
7. Łatwy dostęp do pomocy. Jeśli pojawi się problem, użytkownik powinien szybko zrozumieć jego istotę.
8. Ergonomia skalowalności. Pojedyncze wykonanie operacji ma być tak samo proste, jak wielokrotne jej wykonanie. Jeśli, na przykład, użytkownik będzie często wprowadzał dane, warto zredukować proces do minimum. Na przykład poprzez auto-zapis, czy podręczną bazę najczęściej wpisywanych danych. Jeśli jest to sklep internetowy, przechowywanie danych użytkownika i stanu jego koszyka zostanie docenione.
9. „Czytanie w myślach”. Dobry interfejs podzielony jest na scenariusze. Kiedy użytkownik wejdzie na ścieżkę danego procesu, ma być przez UI prowadzony do celu jak po sznurku. Służą do tego inteligentne podpowiedzi, przyciski w odpowiednich miejscach, intuicyjna hierarchia wyszukiwania, czytelnie opisane etapy procesu. Tych elementów może być więcej, w zależności od charakterystyki produktu. Dalsze przykłady, to np. intuicyjnie przedstawione pola tekstowe, checkboksy, listy.
10. Dostępność treści cyfrowych. Szereg funkcji, które potrafią zupełnie odmienić interakcję z interfejsem. Jak zmiana wielkości tekstu, czy wzmocnienie kontrastu. Jest szereg zmian pozwalających użytkować UI przez osoby z niepełnosprawnościami. Dostępność reguluje WCAG (Web Content Accessibility Guidelines) i jego użycie jest wymagane np. przez instytucje Państwowe.

Aby dany produkt posiadał te cechy, potrzebne są  bardzo specyficzne dane. Ich pozyskiwaniem, między innymi na potrzeby projektantów UI, zajmują się eksperci od User Experience. W środowisku agencji UX zrzeszającej zespół doświadczonych badaczy i projektantów możliwe jest sprawne opracowanie dokumentacji dla nawet największych projektów. 

Jakie dane decydują o zaprojektowaniu dobrego UI?

Przede wszystkim są to informacje potrzebne do stworzenia persony użytkownika, jej ról w aplikacji i wzorów użytkowania. Wymaga to realistycznego i zarazem gruntownego podejścia.

Zanim UI designer zacznie pracę, należy dla niego pozyskać dane na temat użytkowników:

• Cele oraz intencje względem produktu,
• silne strony i aspiracje,
• potrzeby i oczekiwania,
• język, którym posługują się na co dzień,
• style graficzne i palety kolorów, które kojarzą pozytywnie,
• nawyki związane z poruszaniem się po podobnych stronach, sklepach, aplikacjach,
• problemy z podobnymi produktami.

Najlepiej, jeśli te dane zostaną potem zaprezentowane w postaci makiet low-fi lub hi-fi oraz prototypów. Łatwiej wówczas projektantom interfejsu z nimi pracować i ubierać funkcjonalności w formę graficzną.

Jak niezawodnie pozyskać dane dla projektanta UI?

W branży najczęściej wymienia się akronim UI tuż obok UX. Nie bez powodu. Specjaliści z tych dwóch dziedzin pracują na dwóch sąsiednich odcinkach tworzenia produktów cyfrowych. UI designerzy doskonale projektują interfejsy pod wskazane osoby. Z kolei badacze User Experience potrafią te osoby scharakteryzować, bo wyróżniają się doświadczeniem w pracy z użytkownikiem.

Poza szybkim dostępem do właściwej grupy ludzi, badacze UX to także wachlarz metodologii badań, które odkrywają prawdę na temat realiów interakcji odbiorców produktów. Należą do nich:

• Interakcje obserwowane — często z wykorzystaniem map ciepła i oprogramowania do eyetrackingu. Kluczowa jest interpretacja tych wyników, do której potrzebna jest wiedza branżowa oraz empatia poznawcza.
• Indywidualne Wywiady pogłębione IDI — ich przebieg jest ułożony w kolejności od pytań ogólnych, do bardziej szczegółowych. Istotną rolę odgrywa doświadczenie badacza UX. Tylko trafny scenariusz rozmowy i wyczucie gwarantują dotarcie do sedna zjawisk i zachowań użytkownika.
• Testy użyteczności — Mogą się opierać na prostym oprogramowaniu do wideokonferencji, jak Google Meet, Skype, Microsoft Teams czy Zoom. Dzięki zdalnej formie testów, pozyskiwane informacje odzwierciedlają sytuacje możliwie najbliższe stylowi życia użytkownika.  W testach moderowanych UX Researcher przeprowadza uczestników przez proces interakcji z produktem online i zbiera dane jakościowe do późniejszych analiz. W testach niemoderowanych użytkownicy działają sami. Na podstawie krótkich opisów wprowadzających przed każdym zadaniem, przechodzą przez cały scenariusz badania. Nagrania wideo z takich testów zapewniają wielowymiarowy materiał do analiz.
• Spotkanie grupy fokusowej — burza mózgów, która wymaga profesjonalnej moderacji i umiejętnego doboru tematów. Przedstawiciele grupy docelowej mogą wspólnie przedyskutować wszystkie planowane rozwiązania techniczne i porównać nawyki. Wynikiem jest gruntowna lista oczekiwań, którą można przekazać projektantowi w formie surowej, albo wdrożoną w makietę lo-fi.
• Card sorting — kiedy chodzi o strukturę i hierarchię informacji, także warto zapytać respondentów. Specjalnie stworzona grupa kart z informacjami zostanie uporządkowana w kolejności, jakiej będą oczekiwać użytkownicy.

W powyższych badaniach bardzo istotne jest poprawne dobranie grupy docelowej. Jeśli zabraknie precyzji podczas rekrutacji, doprowadzi to do błędnych wniosków i rekomendacji na temat UX oraz UI. Odbije się to na słabym przyjęciu produktu przez rynek. Założona grupa docelowa nie będzie go potrzebować, a rzeczywista nie udźwignie obciążenia poznawczego. Aby tego uniknąć, w rekrutacji korzysta się z persony użytkownika oraz ankiet przesiewowych.

Jak wykorzystać dane zebrane przez ekspertów UX?

Kiedy już sami użytkownicy opowiedzą, jak stworzyć produkt idealny dla nich, można iść za ciosem.  Zaprojektować ich doświadczenia.

Z otrzymanej dokumentacji warto ułożyć kilka kluczowych profili użytkowników. Czasem wystarczają opisy zachowań, stylu życia i sfery zawodowej. Niektóre zespoły preferują bardziej kompleksowe podejście. Ze szkicami sylwetek, zachowań, storyboardami ścieżek interakcji, czy blueprintami jej etapów, w tym środowiska otaczające użytkownika podczas pracy z produktem. Celem jest uzmysłowienie sobie stanu mentalnego danej osoby w każdym momencie użytkowania. Reakcji na wszystkie rozwiązania w zakresie interfejsu.

W ten sposób powstaje najbardziej naturalna dla danej grupy docelowej ścieżka budowania doświadczenia. User flow dziejący się we front-endzie zyskuje przyporządkowane procesy w back-endzie. Realizacja produktowych zadań proaktywnych jest wynagradzana zadaniami reaktywnymi. Te z kolei stają się nośnikiem obiecywanego Unique Value Proposition. UI designer zmierza w kierunku MVP — pierwszej testowej wersji produktu.

Przez cały ten czas użytkownik musi być w centrum uwagi. Z tego powodu najczęściej UI designerzy oraz badacze UX współpracują ze sobą i konsultują się przez cały czas powstawania interfejsu. Warto uzupełniać informacje o użytkownikach z pierwszej ręki.

Dobre zaplecze informacyjne a budżet

Wsparcie danych z badań UX w procesach projektowania UI ma silne uzasadnienie finansowe. Jedną drogą jest poniesienie ryzyka i kosztów poprawek programistycznych z powodu niedopasowania projektu. Drugą — zainwestowanie w profesjonalne badania UX, aby tych poprawek nie było. Koszt drugiej drogi jest zawsze kilkukrotnie niższy. Ponadto, badania zawsze da się zaplanować, a ich wyniki to pewne i kompletne źródło informacji. Natomiast poprawki programistyczne mogą trwać seriami i po żadnej serii nie wiadomo, ile jeszcze przed nami.

Drugą kwestią do wzięcia pod uwagę jest czas. Konkurencja na rynku produktów cyfrowych rośnie, szczególnie w czasie pandemii. W takim tempie rozwoju branży nie można sobie pozwolić na próby i niekończące się poprawki. Trzeba być pewnym swojego produktu, a tę pewność daje tylko odpowiednio przygotowany zasób informacji, używany przez wykwalifikowanych projektantów UI.

Podsumowanie

Presja na dobre jakościowo i dopasowane do użytkownika produkty nie jest spowodowana tylko wyścigiem z konkurencją. Także użytkownicy mają coraz większe wymagania. Są doświadczeni i bardziej świadomi technologii, której używają. Sprawniej porównują produkty. Szybciej decydują. Wiedzą, czego chcą i mogą oczekiwać. Są przebodźcowani. Sfrustrowani natłokiem informacji i produktów, które ich rozczarowały. Gotowi porzucić próby poznania nowej, a dla nich tylko „kolejnej” aplikacji, strony czy sklepu, jeśli wymaga to od nich wysiłku. Potrafią sprawdzić szereg funkcjonalności i odrzucić produkt, jeśli brakuje nawet pojedynczej. Dzielą się opiniami ze znajomymi, a jedna negatywna opinia ma siłę „rażenia” równą 100 pozytywnym.

W takich warunkach trzeba wyjątkowo dobrze poznać grupę docelową, zanim się jej coś zaproponuje. Nawet najlepsi UI designerzy niewiele zdziałają, jeśli pozostaną z projektem w zamkniętym środowisku. Mogą wykorzystać swoje kompetencje wyłącznie jeśli są zasilani wiarygodnymi i aktualnymi informacjami z niezawodnego źródła. Dlatego właśnie tandem UX + UI to połączenie decydujące o sukcesie produktu cyfrowego.

Twórca: Wojciech Popiela

Opis: Ekspert UX i optymalizacji konwersji metodami badawczymi. Co-Founder agencji CRO/UX Webmetric. Wykładowca Collegium Da Vinci. Ze swoim zespołem dostarcza wartość dla biznesu, zwiększając użyteczność i współczynnik konwersji stron www, sklepów oraz aplikacji. Prowadzi również kanał UX On the Way, gdzie w prosty sposób mówi o doświadczeniach użytkowników w biznesie oraz roli badań w procesie projektowym. W swoim ponad 10-letnim doświadczeniu współpracował z markami takimi jak Bauer Media, Komputronik, Neonail i Eurocash.