Musimy powiedzieć sobie wprost - UX i UI to pojęcia powiązane ze sobą, ale jednak znacząco się różniące. W żadnym wypadku nie mogą być stosowane zamiennie! Warto zdawać sobie sprawę czym jest UI, a czym UX. Zapraszamy do lektury artykułu, w którym wyjaśnimy te pojęcia i różnice między nimi.

Milion definicji

Jakoś tak wyszło, że w temacie UI i UX możemy się natknąć na masę definicji, każdy kogo się zapyta może mieć swoją. Jest to spowodowane między innymi tym, że granice UI i UX nie zawsze są wyraźnie rysowane. Często definicje te skupiają się na bardzo ogólnym potraktowaniu tematu:

UI - jego profil na Tinderze,
UX - randka z nim.

Czy to coś złego?

Absolutnie nie! Nie ma niczego złego w dobrym i skrótowym ujęciu tematu, jednak w tym wpisie chcielibyśmy go bardziej rozwinąć, nakreślić wyraźniej granice UX i UI, ​oraz dokładnie wyjaśnić co jest czym.

Najprostsza definicja UX i UI

Podstawowa, prosta definicja wygląda następująco:

  • UI (User Interface) - wygląd i logika działania aplikacji
  • UX (User Experience) - sposób działania i obsługi aplikacji oraz ogólne wrażenia użytkownika wynikające z korzystania z niej
Humorystyczna różnica między UX i UI pokazana na przykładzie miski płatków, źródło: Centerline Digital – UX vs UI

Czyli UI nie ma związku z UX?

W żadnym wypadku! UI jest ściśle powiązane z UX. Tak właściwie to UI stanowi część składową UX. Dlaczego tak jest? Aby odpowiedzieć na to pytanie warto przybliżyć proces projektowania, tworzenia i wdrażania produktu. Pozwoli nam to określić dokładnie co wchodzi w zakres UX, a co w UI.

Proces powstawania projektu

Powstawanie każdego projektu można podzielić zasadniczo na 4 etapy.

1. Rozpoznanie rynku

Na samym początku należy przeprowadzić wywiad, który pozwoli poznać potrzeby i wymagania rynku, które miałby zaspokoić dany produkt. Powinno się również zapytać grupę docelową o jej oczekiwania, potrzeby, aktualne problemy, itp.

Mając te dane można utworzyć scenariusze, które będą opisywać w jaki sposób użytkownicy mogą chcieć korzystać z naszego projektu, do czego go wykorzystywać, jakich funkcji najbardziej potrzebować, itd. Pozwoli to na jak najlepsze dopasowanie produktu końcowego do potrzeb użytkownika.

2. Zarys projektu

Po zakończonym rozpoznaniu czas na przygotowanie schematów, które pomogą nam zilustrować z jakich funkcjonalności produktu użytkownik najczęściej będzie korzystał, między jakimi podstronami się poruszał. Pozwoli to na optymalne ułożenie struktury strony/aplikacji, aby wszystko co dla klienta najważniejsze było zawsze pod ręką, intuicyjne i wygodne.

Mając takie schematy można przygotować zarys wyglądu produktu. Nie mówimy tu jeszcze o projekcie graficznym, ale o zwykłym blokowym schemacie elementów (przykład poniżej).

Przykład blokowego schematu strony internetowej.

3. Implementacja

Dopiero w tym momencie do pracy wkraczają UI designerzy i programiści. Najpierw na bazie przygotowanych zarysów specjaliści UI przygotowują projekty graficzne i prototypy, a następnie po ich zaakceptowaniu programiści przekształcają je na działający produkt.

4. Monitorowanie

Mimo że produkt jest już gotowy i działa to cały proces jeszcze się nie zakończył! Teraz przyszedł czas na etap zbierania informacji zwrotnych i analizy statystyk, który pozwoli stwierdzić czy pierwotne założenia były prawidłowe. Eliminowane są wszelkie błędy, wprowadzane są zmiany, które pozwolą udoskonalić produkt aby jeszcze lepiej spełniał oczekiwania użytkowników.

To gdzie w końcu jest UI, a gdzie UX?

Cały proces przedstawiony powyżej jest kluczowy do zrozumienia zależności między UI a UX​. Pozwala łatwo zauważyć gdzie zaczynają się i kończą kompetencje jednego, a gdzie drugiego.

UX

Generalnie wszystkie wymienione etapy tworzenia projektu to UX. Tak! Cały proces należy do UX, ponieważ również cały projekt powinien się skupiać na UX. Na każdym etapie należy dążyć do tego, aby produkt był jak najprostszy w obsłudze, jak najbardziej intuicyjny i skrojony na miarę potrzeb użytkownika. 

Dlatego nawet jeżeli nad konkretnym zagadnieniem nie pracuje bezpośrednio specjalista UX, to zadania powinny być wykonywane według wcześniejszych założeń UX-owców i w ciągłej konsultacji z nimi.

UI

Gdzie tutaj jest więc UI? W etapie numer 3, czyli Implementacji, tam, gdzie do pracy włączają się graficy (UI designerzy). UI jest po prostu częścią całego procesu, a więc częścią składową UX. ​Przecież wszystko co zostanie zaprojektowane musi spełniać założenia UX!

Uff, podsumowanie proszę!

Mam nadzieję, że rozpisując cały proces powstawania projektu dobrze udało nam się ukazać istotę UX i UI. Krótko mówiąc UX jest obecne w całym procesie powstawania projektu i skupia przez cały czas uwagę na potrzebach użytkowników, ich wygodzie, zachowaniach i przyzwyczajeniach. Natomiast UI jest tylko małym elementem tego procesu i polega na przygotowaniu i dostarczeniu interfejsu graficznego poprzez który użytkownik będzie z naszego produktu korzystał.

Oczywiście, mimo że pojawiło się całkiem sporo informacji nadal jest to krótki opis całości tych bardzo szerokich zagadnień - nie bez powodu istnieją zawody UI, jak i UX designera :). Chcieliśmy tylko dać Wam możliwość szybkiego, ale porządnego dowiedzenia się co to za tajemnicze pojęcia.

Sami teraz widzicie, że definicje typu

UI to jak samochód wygląda, a UX to wrażenia z jego prowadzenia.

są jak najbardziej poprawne, ale bardzo powierzchowne :).