Zasady projektowania interfejsu użytkownika

Interfejs użytkownika – definicja od strony projektanta

UI to zintegrowana przestrzeń interakcji, w której użytkownik wykonuje działania. Za pomocą graficznych, łatwych do zrozumienia elementów, porusza się po oprogramowaniu. Wydaje polecenia i odbiera ich wyniki. Sekwencja takich interakcji prowadzi do osiągnięcia celów z puli rozwiązań oferowanych przez oprogramowanie.

Sukces interfejsu zależy od tego, czy owa przestrzeń jest dopasowana do oczekiwań danego typu użytkownika. Zadaniem designera jest zaprojektowanie estetycznej, czytelnej, pasującej do marki i spójnej szaty graficznej, a przy tym umieszczanie poszczególnych elementów w miejscach zgodnych ze sposobem myślenia i nawykami grupy docelowej. Tak, żeby interfejs od pierwszego zetknięcia budził zaufanie znajomym układem, a jednocześnie był atrakcyjny wizualnie i skłaniał do używania oprogramowania.

Jeśli tak się stanie, UI będzie nie tylko pośrednikiem pomiędzy użytkownikiem a oprogramowaniem, ale także pomiędzy problemami użytkownika, a rozwiązaniami oferowanymi przez biznesowego właściciela produktu.
Projektowanie skutecznego interfejsu użytkownika wymaga zatem zoptymalizowanego, uporządkowanego podejścia.

Etapy projektowania UI

1. Pozyskiwanie wymagań funkcjonalnych

Aby stworzyć i dopasować interfejs do użytkownika, trzeba znać zakres w jakim się to ma odbyć. Oczekiwania biznesowe interesariuszy powinny się przełożyć na konkretne funkcjonalności, które dany interfejs powinien posiadać, aby realizować cele biznesowe.

Należy zatem sprecyzować:

• jakie usługi ma świadczyć produkt,
• jakie działania ma podejmować użytkownik, aby z nich skorzystać,
• jakie operacje będą konieczne od strony technicznej, aby system spełniał swoje zadanie.

2.  Analiza użytkownika

Ten etap wymaga czujności i metodycznego podejścia. Analiza sprowadza się do poznania nawyków, oczekiwań, problemów i wyzwań użytkownika w kontekście działania przyszłego produktu. Zespół cech osobowości wpłynie na sposób funkcjonowania interfejsu.

Można przy tym śmiało stwierdzić, że najczęściej użytkownicy sami nie znają się na swoich potrzebach i oczekiwaniach. Gdyby zapytać statystycznego przedstawiciela grupy docelowej, jaki powinien być idealny dla niego samego interfejs oprogramowania z danej dziedziny, jakie zadania realizować i w jaki sposób, oparłby swoje sugestie o doświadczenia z innymi interfejsami, luźne obserwacje, domysły i założenia na temat działania różnych funkcji w produktach, których techniczne zawiłości, zależności i ograniczenia są mu obce.

Mówił o tym już Henry Ford:

„Gdybyśmy zapytali klientów czego potrzebują, to powiedzieliby, że szybszego konia, ponieważ nie wiedzieli czym właściwie jest samochód”

Dlatego do kompetentnego zbadania oczekiwań i potrzeb użytkownika interfejsu niezbędne są badania UX. Specjaliści na tym etapie stosują najczęściej:

• Wywiady pogłębione (IDI = Individual in-Depth Interview) – rozmowy z jednym użytkownikiem na raz, prowadzone według określonego scenariusza pytań zmierzających do odkrycia rzeczywistych problemów i potrzeb. Te pytania są często otwarte, aby zebrać pełne odpowiedzi i dynamicznie sterować rozmową.
• Grupy fokusowe – przeciwieństwo wywiadów IDI. W jednym miejscu spotyka się kilku przedstawicieli grupy docelowej i zadaje pytania na temat ich wspólnych problemów. Dynamika dyskusji pozwala obserwować reakcje na samo pytanie oraz wzajemne reakcje na punkty widzenia uczestników.
• Sortowanie kart – stosowane, kiedy chodzi o poznanie optymalnej drogi wyszukiwania produktów lub funkcji w menu, a także hierarchii przeglądania treści. Praca na zbiorze kart pozwala także poznać skojarzenia grupy docelowej z różnymi kategoriami i dobrać najbardziej intuicyjne nazwy.

3. Architektura informacji

IA stanowi kręgosłup interfejsu. Produkt funkcjonuje według specjalnie zaprojektowanej struktury informacyjnej. Zawiera ona system organizacji, powiązań informacji – który kształtuje relacje między treścią a funkcjonalnościami. Ta architektura nie jest pokazywana użytkownikowi, lecz stanowi mapę działania całego interfejsu i wymusza ścieżki interakcji dostępne dla użytkownika.

Wpływa tym samym na UX, ponieważ użytkownik intuicyjnie wyczuwa i ocenia sposób, w jaki dostarczane są mu treści. Z tego powodu architektura musi uwzględniać takie podziały i połączenia pomiędzy informacjami, które pasują do potrzeb i oczekiwań użytkownika.

Definiowanie architektury informacji odbywa się w formie diagramów i arkuszy kalkulacyjnych etapami:

• projektowanie zakresu zasobów informacyjnych odpowiadających potrzebom użytkownika i realizujących cele biznesowe,
• grupowanie informacji w taki sposób, żeby treść była zorientowana na użytkownika,
• ustalenie standardów terminologii do użycia spójnie w całym interfejsie,
• stworzenie metadanych, które posłużą do generowania list „powiązanych odnośników” oraz innych elementów nawigacyjnych ułatwiających wyszukiwanie.

4. Prototypowanie

Proces przekształcania koncepcji, wiedzy o użytkownikach oraz ustaleń biznesowo-technicznych w symulację rzeczywistego interfejsu, zdatną do testowania z użytkownikami. Mowa tu przede wszytkim o interaktywnych prototypach high-fidelity, które w przeciwieństwie do low-fi, pozwalają na wszechstronne i efektywne badanie użyteczności oraz funkcjonalności interfejsu.

Projektowanie prototypów przeprowadza się w programach takich, jak UXPin, Marvel, Origami Studio czy Adobe XD. Wybór narzędzia zależy od specyfiki interakcji, które mają się złożyć na UX docelowego interfejsu. Im bardziej zasoby i funkcje wybranego oprogramowania odzwierciedlają charakterystykę użytkowania produktu, tym szybciej i w bardziej zautomatyzowany sposób można projektować kolejne, coraz lepsze prototypy – a to oszczędza czas i budżet.

5. Testy użyteczności

Gotowe prototypy są weryfikowane w celu poznania słabych stron user experience oraz interfejsu w ogóle. Testy użyteczności to wydajna metoda badawcza odnosząca się do całej grupy docelowej, pomimo że nie wymaga dużej grupy badanych (wystarczy pięciu) ani wielu dni testowych (sesja trwa do 90 minut), żeby poznać rzeczywiste problemy z interfejsem oraz ich przyczyny.

Skuteczne testy przeprowadza się stacjonarnie lub zdalnie. W drugim przypadku można wyeliminować wyzwania organizacyjne związane z wynajęciem sali, zgromadzeniem sprzętu i dotarciem uczestników na miejsce w tym samym czasie.

Dzisiejsze oprogramowanie pozwala na wszechstronne i kompleksowe testy zdalne:

• na każdym rodzaju platformy mobilnej oraz na komputerze użytkownika,
• w oparciu o listę zadań roboczych, dla których można mierzyć parametry wykonywania,
• w zróżnicowanym zakresie – od interakcji z elementem interfejsu, po przejście całej ścieżki danego procesu,
• z możliwością kompleksowego nagrywania interakcji użytkownika: ekranu, głosu, reakcji, mimiki,
• z opcją moderacji, żeby zadawać pytania pogłębiające wiedzę o celach, motywacjach i niejasnościach na bieżąco.

Po testach sporządzany jest raport z listą niedociągnięć w UI oraz rekomendacjami dla zespołu projektowego. Dokument ma pozwalać zrozumieć, które elementy interfejsu i w jaki sposób odpowiadają za problemy z użytecznością oraz co należy zrobić, żeby poprawić sytuację użytkownika.

6. Projekt interfejsu użytkownika

Na podstawie finalnej wersji prototypu (również przetestowanej) tworzy się projekt interfejsu użytkownika. Niezależnie od informacji pozyskanych w trakcie wcześniejszych etapów i usprawnień wdrożonych w imię poprawy UX, warto pamiętać o kilku uniwersalnych zasadach projektowania UI:

1. Interfejs powinien nawiązywać do tych znanych u konkurencji na tyle, żeby użytkownik mógł zapoznawać się z nim z pomocą starych nawyków. A zarazem być na tyle świeży, aby obiecywał konkretne korzyści w zamian za nauczenie się kilku nowych funkcji czy rozwiązań problemów. Jeśli produkt będzie należał do katalogu danej firmy, jego wygląd i działanie musi także wpasowywać się w standardy reszty oferty. Ułatwi to przy okazji onboarding lojalnych klientów.
2. Użytkownik musi być na bieżąco informowany o statusie swojego procesu.
3. Odpowiedzi na interakcje powinny być dostarczane tak szybko, jak to możliwe.
4. Informacyjne elementy interfejsu powinny być czytelne, umieszczone w intuicyjnych miejscach i służyć podpowiedzią w razie zagubienia lub wątpliwości. Szczególnie istotne są mechanizmy szybkiego powrotu do poprzedniego etapu w razie pomyłki oraz ponawiania akcji, gdyby z kolei powrót był przypadkowy.
5. Język komunikacji UI z użytkownikiem powinien przypominać ten, którego używa on na co dzień. Żadne słowo nie powinno brzmieć obco.

Wszystkie powyższe wskazówki pochodzą od Jakoba Nielsena – autora heurystyk stosowanych powszechnie w dziedzinie UX.

Podsumowanie

Zasady projektowania UI to temat na wiele artykułów, książek i serię kompleksowych szkoleń. Na początek warto znać ogólne priorytety, choćby dla przyspieszenia dalszego wyszukiwania informacji.

Ostatecznie jedna, zamknięta lista zasad, gwarantująca sukces każdego interfejsu, nie istnieje. To raczej budowany w toku doświadczenia katalog, do którego sięga zespół projektowy, dopasowując metody, rozwiązania i elementy z zakresu UX do charakteru nowo tworzonego UI – serca produktu cyfrowego.

Rolą każdego projektanta UI jest powiększanie swojego katalogu, co przyspiesza testy i budowę każdego nowego interfejsu, projektowanie doświadczenia (UX) spełniającego potrzeby użytkownika, a także rozwiązywanie problemów z użytecznością.