Strona główna / Wiedza / Projektowanie / Projektowanie UX / UI – jak zacząć? Kompletny poradnik
BlogProjektowanie

Projektowanie UX / UI – jak zacząć? Kompletny poradnik

Wpis powstał w 100% w umyśle naszego eksperta. AI nie wspierało procesu twórczego.

Projektowanie UX / UI – jak zacząć? Kompletny poradnik

Każdy zorientowany na użytkownika produkt cyfrowy potrzebuje dwóch warstw projektowania: User Experience oraz User Interface. Jeśli chcemy zacząć projektować na obydwu warstwach, musimy wypracować dwie różne perspektywy, a następnie kompromis pomiędzy ich priorytetami. Dużo łatwiej o ten kompromis, kiedy UX oraz UI skupione jest w jednych rękach – UX/UI Designera.

Projektowanie UX mocno opiera się na psychologii. Pomimo że nazwa stanowiska to „Designer”, potrzebne są kompetencje badawcze. Zanim ruszy projektowanie, należy przygotować grunt w postaci analizy:

Klienta

  • Jak finalny produkt ma wpłynąć na jego biznes, strategię, procesy oraz/lub jaką rolę odegra w jego ofercie?
  • Jakie są wymagania; czy są jasne, konkretne, stałe? A jeśli nie, to czy są przewidziane środki na zmiany w trakcie projektowania?
  • Na ile elastyczny jest budżet?

Produktu

  • Jakie będą jego cele i zadania oraz w jaki sposób ma zintegrować się z celami i zadaniami strategicznymi firmy klienta?
  • W jakie środowisko będzie wdrażany – z jakiej technologii obecnie korzysta klient w otoczeniu pozostałych produktów
  • Które priorytety są warte doinwestowania, a na czym można zaoszczędzić?

Konkurencji – także mniej bezpośredniej

  • Jakie luki na rynku są do zagospodarowania? Czym można się wyróżnić?
  • Czy ktoś wcześniej poniósł porażkę w starciu z problemem, który chcemy rozwiązać? Jeśli tak, to dlaczego?
  • Jakie unikalne drogi rozwiązania problemów użytkownika proponują konkurenci?
  • Jakie cechy wspólne mają najlepsze interfejsy na rynku?
  • Które elementy warto zaadaptować do swojego projektu?

Grupy docelowej

  • Jaki jest ich poziom obycia użytkowników z technologią?
  • Jakie mają wzory postępowania w produktach cyfrowych i skąd się one biorą?
  • Jakie są ich obawy, problemy i motywacje?
  • Jakie doświadczenia mają z produktami konkurencji?

W czasie pracy pomagają wyniki badań przeprowadzone przez UX Researchera, jednak takie samodzielne stanowisko nie funkcjonuje wszędzie i najczęściej można polegać tylko na analizach powyższych punktów oraz na swojej wiedzy.

Na podstawie zebranych wniosków, można rozpocząć projektowanie pozytywnych doświadczeń użytkownika.

Pierwsze prace odbywają się na prostych makietach. Należy skupić się na priorytetach charakterystycznych dla tego etapu. Projekt ma zawierać strukturę każdej podstrony, wyostrzać hierarchię wizualną elementów, zarządzać obciążeniem poznawczym i wskazywać ścieżki interakcji. Dużo ważniejsza od estetyki tych makiet jest ich elastyczność, a więc możliwość szybkiej edycji i mnożenia wersji do późniejszego porównywania użyteczności. Proste projekty, złożone z luźnych elementów (na przykład plansze papieru z głównym oknem i poukładanymi na tym tle oddzielnymi papierowymi elementami interfejsu, które można przesuwać), pozwalają na szybkie tworzenie wielu różnych konfiguracji.

Prędzej czy później, dla każdego UX Designera staje się jasne, że jego produkty nie mogą być idealne. Grupy nawet podobnych użytkowników mają odmienne podejścia do interfejsów. Zdarza się, że nie warto proponować nic ciekawego, ponieważ starsze rozwiązania nawigacyjne są na tyle zakorzenione w nawykach odbiorców, że wygrywają z nawet najbardziej dopracowaną innowacją. Aby rozwiać wątpliwości i zainwestować czas w najlepsze rozwiązania, przeprowadza się cykliczne testy proponowanych wersji interfejsu. Makiety low-fi są zastępowane przez ich wersje high-fi.

Projektowanie UI wychodzi o krok dalej

Interfejs musi nabrać estetyki i spójnego design systemu. Projektowanie na tym etapie odbywa się na podstawie makiety high-fi. Ostateczny projekt może nieznacznie różnić się od nich, ale musi odwzorowywać założoną konwencję użycia i rozmieszczenia elementów, hierarchię i sposób działania. Na etapie projektowania interfejsu należy opracować warstwę graficzną wszystkich komponentów w taki sposób, aby ich wygląd i sposób działania był spójny, a cały produkt naśladował konwencję ich użycia, tym samym był intuicyjny.

Kiedy jest się autorem zarówno prototypów UX-owych jak i warstwy graficznej, nie ma ryzyka nieporozumień i konfliktów. Skraca się czas docierania do ostatecznego kształtu interfejsu. Przyjmując jednocześnie perspektywę UX oraz UI, łatwiej postawić w centrum użytkownika i zrezygnować z graficznych ambicji tam, gdzie będą one zbędne lub szkodliwe dla user flow. Ponadto, wiele programów graficznych jest współdzielonych przez UX oraz UI designerów, dlatego łatwo przechodzi się do kolejnych etapów.

Bycie świadomym Użytkownikiem to duża część bycia Designerem

Pierwsze interfejsy, z którymi zawodowo styka się projektant, to programy, z których sam korzysta. Już na początku, przyswajając ich funkcje, można trafić na materiał do analiz. Napotyka się zarówno na wyzwania wynikające z budowy interfejsu, jak i kluczowe decyzje jakiegoś UX / UI designera, które sprawiają, że pewne funkcje można rozumieć niemal od pierwszego zetknięcia się z nimi.

Finalnie jednak chodzi o tę drugą stronę medalu. Uruchomienie własnych projektów. Na warsztat można wziąć interfejsy, które są dostępne publicznie. Ekrany znajomych aplikacji, screenshoty stron internetowych oraz inne przykłady interfejsów, które inspirują do zmiany.

Kiedy zbierze się potrzebne oprogramowanie i powyższy materiał, potrzeba spoiwa, które połączy te dwie wartości. Wiedzy.
Można ją zdobyć m.in. z książek (częściej o UX, niż UI), e-booków, artykułów online. Przy okazji researchu pod kątem wiedzy, projektant ponownie zetknie się z nowymi interfejsami stron internetowych, na które warto spojrzeć okiem „krytycznego użytkownika”, oprócz konsumowania treści.

Przy okazji zgłębiania wiedzy z różnych źródeł, warto rozszerzać jej zakres o dziedziny współzależne od interfejsu. Z dwóch powodów.

  1. Projektowanie UX jest dziedziną interdyscyplinarną. Na jakość badań z użytkownikami, skuteczność budowania ich doświadczeń i sprawność przechodzenia produktu przez różne fazy, wpływa wiele dziedzin. Psychologia. Design. Programowanie. Marketing. Obeznany w tych dziedzinach UX designer, potrafi spojrzeć na swój interfejs w kontekście całego, wielowymiarowego produktu, który musi być łatwo rozumiany przez użytkowników, ale i np. programistów, którzy będą musieli zmieścić się w czasie i budżecie z kodowaniem konkretnych rozwiązań, czy przez marketerów, których zadaniem będzie stworzenie języka korzyści na bazie pożądanych doświadczeń i funkcji. Mając tego świadomość już na etapie UX, łatwiej zrozumieć perspektywy różnych członków zespołu i tworzyć projekty kompatybilne z ich celami.
  2. Projektant UI to główna osoba odpowiedzialna za interfejs. Czasem musi obronić swoje rozwiązania przed sztabem ludzi: inwestorem, programistą, project managerem, czy UX writerem. Zrozumienie perspektyw tych osób decyduje o skutecznej komunikacji. Łatwiej rozwiać wątpliwości, załagodzić konflikty, zredukować nieporozumienia i zmieścić się w czasie z oddaniem finalnego, opłacalnego, akceptowanego przez wszystkich interfejsu.

Proces rozwoju od fazy przygody do projektanta UI/UX powinien przebiegać równolegle na 3 płaszczyznach. Można je zebrać w poniższej tabeli z przykładami: 

Narzędzia Inspiracje Teoria
  • Figma
  • Sketch
  • InVision
  • Craft
  • Adobe XD
  • Axure
  • Principle
  • Photoshop
  • Adobe Illustrator
  • Marvel
  • UXPin
  • Origami Studio
  • Maze
  • Balsamiq
  • Framer X
  • VisualSitemaps
Materiały

 

Pierwsze kroki w projektowaniu UI/UX szybko przyniosą pytania.

Jak pracować z kolorem i kontrastem?

Zadaniem palety kolorów jest budowanie hierarchii elementów oraz nadawanie im statusu. Relacje pomiędzy kolorami, a także kontrasty, pozwalają sterować uwagą użytkownika. Przyciągać jego uwagę do poszczególnych elementów zgodnie z hierarchią ich ważności. Przykład statusu podkreślonego kolorem, to poszarzały button wśród kolorowych, który sugeruje opcję niedostępną; lub znane wszystkim, niebieskie podkreślenie hiperłącza.

Aby sprawnie rozpocząć pracę z kolorem przy projektowaniu UX (szczególnie będąc początkującym), warto sięgnąć po dedykowane narzędzia, dzięki którym łatwiej dobrać kolory podstawowe. Na przykład:

  • Adobe Color służy do tworzenia własnej harmonijnej palety na bazie koła kolorów. Można tworzyć konfiguracje triad, monochromatyczne, komplementarnych itd. Paletę można również pobrać ze zdjęcia
  • Colorable pozwala testować kontrasty na bardzo prostym ekranie.
  • Brand Colors to zestawienia kolorów brandów z całego świata, które pokazuje sposoby na zbudowanie wyrazistego połączenia. Kody są gotowe do pobrania.

Następnie tworzy się pełną paletę i tu przydaje się wiedza o kolorach.

Jak używać kroju pisma?

Od czytelności zależy szybkość przeglądania, przyswajania treści, a także motywacja użytkownika do interakcji. Celem jest implementacja tekstu łatwego do skanowania i nawigacji. To wymagające zadanie, ponieważ czcionki są wszędzie i w wielu miejscach nie da się ich zastąpić obrazami. Czytający musi mieć przed oczami przyjemne w odbiorze kategorie menu, banery, wskazówki, opisy, czy artykuły. Obok doboru słów, którym zajmuje się UX writer, ich graficzne przedstawienie gra kluczową rolę.

Jedną z podstawowych zasad jest konserwatywne podejście. Najwygodniejszy kontrast to czarne litery na białym tle. Krój powinien być prosty, nawet zbliżony do najpopularniejszych, najbardziej domyślnych czcionek spotykanych w internecie. W nagłówkach używa się jednej czcionki. W dłuższych blokach tekstowych można dodać jeszcze jedną, ale nie więcej. Parametry, na które zwraca się uwagę, to interlinia, odstęp pomiędzy literami i długość wiersza. Jeśli projekt dotyczy aplikacji mobilnej, używa się węższego kroju, aby zmieścić więcej tekstu w linii. Teksty lane nie powinny mieć mniejszych czcionek, niż 16pt.

 

Jak wprowadzić i utrzymać harmonię?

Kluczem do przyjemnego odbioru interfejsu jako całości jest balans kompozycji. Balans oznacza równowagę roli. Nie powinny przeważać ani elementy interaktywne, ani przestrzeń negatywna. Obszary nie mogą konkurować ze sobą o uwagę użytkownika.

Waga wizualna elementów po obu stronach powinna być zachowana. Można osiągnąć 4 rodzaje balansu:

  • Symetryczny – obiekty po obu stronach są takiej samej wielkości.
  • Asymetryczny – wielkość obiektów z jednej strony zrównoważona większą liczbą mniejszych elementów po drugiej.
  • Promienisty – kiedy układ wychodzi ze spójnego centrum. Szczególnie przydatny, jeśli jedna informacja bądź funkcja interfejsu jest najważniejsza.
  • Mozaikowy – pozorny chaos wielu elementów jest zbilansowany przez równe ich rozmieszczenie w przestrzeni. Brakuje hierarchii i punktów odniesienia, jednak balans jest zachowany.

Projektowanie UX – jak zachować spójność?

Interfejs to projekt bardzo elastyczny, ale przez to najeżony pułapkami. Większość z nich pojawia się z powodu przeoczenia wskazówek z dziedziny UX. Druga strona to zbyt wielka ambicja graficzna. Chęć wykazania się znajomością dziedziny, kreatywnością, podbudowana przywiązaniem do własnych pomysłów.

W projektowaniu interfejsu nie ma na to miejsca. Zasady są zdefiniowane przez ograniczenia techniczne, a oczekiwania użytkowników są precyzowane po każdym nowym teście. Spójność można zachować tylko poprzez konsekwencję i minimalizm. Komponenty produktu muszą być do siebie zbliżone stylem, kolorystyką i fontem. Proporcje pomiędzy nimi należy utrzymać na wszystkich ekranach. Użytkownik ma poruszać się w przewidywalnym dla niego środowisku. Spójność musi być zachowana także w stylu budowania przekazu. Produkt powinien mówić tym samym językiem na każdym ekranie, nawet jeśli treść pisały różne osoby.

Zdarza się, że właściciel projektu ma już inne produkty cyfrowe w portfolio. Wtedy łatwiej można przeanalizować gotowe rozwiązania z jego portfolio i dopasować nowy interfejs, aby docelowy klient czuł się tak samo wygodnie w świeżym produkcie, jak w tych dobrze poznanych.

 

Projektowanie UX – Na koniec…

Warto wspomnieć, że w świecie UI designerów budowane są kompleksowe źródła rozwiązań UX/UI, charakterystyczne dla danej marki — Design Systemy. Zawierają komplet zasad projektowania interfejsów idealnie zgodnych z aktualną polityką brandu. Dla przykładu swoje systemy publicznie udostępnia Apple, Google, Microsoft, IBM, czy Audi. Warto czerpać z nich inspiracje.

Przeglądanie Design Systemów pozwala odkryć wiele sposobów na budowanie dobrych interfejsów, które jednocześnie stają się kompleksowym, wciągającym oraz intuicyjnym środowiskiem pracy użytkownika.

Budowa takiego systemu z reguły nigdy się nie kończy. Sprawdzone rozwiązania są do niego dodawane, a dawne – udoskonalane. Projektowanie każdego nowego interfejsu to z jednej strony okazja do czerpania z takiego źródła, a z drugiej, do wzbogacania go.

Tagi
Komentarze
Dodaj komentarz
Spis treści

    Darmowy raport z badań UX

    Artykuły powiązane

    Co sądzisz o artykule?
    Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

    Wysyłając wiadomość wyrażasz zgodę na przetwarzanie danych osobowych.