Kolejna część naszego słowniczka będzie poruszała terminy związane z projektowaniem strony internetowej od etapu pomysłu, przez szkice, do prototypu. Nie będzie to wyczerpujące zestawienie, ponieważ na same terminy związane z UX można by poświęcić kilka wpisów. Przedstawiamy więc zestawienie najczęściej używanych terminów, z jakimi stykamy się w agencji, podczas projektowania stron.

UX / CX / UI

UX – User Experience – Doświadczenie Użytkownika. Terminu po raz pierwszy użył w 1993 roku Don Norman, kognitywista i badacz. Jednakże, choć inaczej nazywane, doświadczenie użytkownika możemy zauważyć na przestrzeni wieków – od chińskiego Feng Shui, przez greckie zasady ergonomii, organizację miejsc pracy, projekty ułatwiające życie – wszędzie możemy dostrzec wagę organizowania przestrzeni, by doświadczenie użytkownika było lepsze. Bo tym właśnie jest UX – to szerokie pojęcie obejmuje dyscypliny, które zajmują się badaniem zależności między projektowaniem, a łatwością użytkowania (co za tym idzie również poziomu zadowolenia i postrzegania marki przez użytkownika) strony internetowej, aplikacji czy systemu.

CX – Customer Experience – Doświadczenie Klienta – to całościowe postrzeganie oraz odczucia klienta, powstające podczas interakcji z systemem, kanałami sprzedaży lub produktami. Często oznacza reagowanie na zgłaszane przez klientów uwagi, obserwowanie ich doświadczeń i dostosowanie kanałów do ich oczekiwań. Nie zależy jedynie od tego, jak zbudujemy stronę czy aplikację, bo to tylko jeden z elementów. Na doświadczenie klienta wpływa również kontakt z biurem obsługi, sposobem pakowania zamówionych produktów czy satysfakcją z samego produktu.

UI – User Interface – Interfejs Użytkownika – czyli elementy strony, aplikacji, umożliwiające interakcję pomiędzy użytkownikiem, a systemem. Często stosuje się również termin GUI – Graphical User Interface. W skrócie – to, co widzi użytkownik, przestrzeń, w której dochodzi do interakcji, z wykorzystaniem i za pomocą, zaprojektowanych przez nas elementów graficznych – menu, rozkładu tekstów, przycisków, kolorystyki, animacji itp. Projektowanie interfejsu jest końcową fazą budowania doświadczenia użytkownika.

Wireframes, Mockup i Prototyp

To uproszczony szkic rozłożenia najważniejszych elementów, informacji na stronie. Często nazywany architekturą strony (nie treści), schematem lub planem strony. Jest to szkielet, w oparciu o który budujemy coraz bardziej rozbudowane widoki i powinien uwzględniać wszystkie najistotniejsze elementy, które końcowy projekt musi zawierać. Możemy takie makiety podzielić ze względu na ich wierność (fidelity):

LoFi wireframes – Low fidelity – to pierwszy etap projektowania doświadczenia użytkownika – bazowe rozmieszczenie elementów i funkcjonalności, które można przygotować nawet na kartce papieru lub przy pomocy programów do tego przeznaczonych, jak Adobe XD, Azure czy Figma. Na podstawie tych wstępnych szkiców już będziemy w stanie odpowiedzieć na pytania, czy nasz przekaz będzie zrozumiały dla użytkownika, czy będzie spełniał nasze założenia biznesowe, czy nawigacja będzie intuicyjna. Jednocześnie będziemy wiedzieli, czy taki projekt jest możliwy do wykonania w technologii, którą założyliśmy.

HiFi wireframes – High Fidelity – tutaj już bardziej szczegółowo przedstawimy poszczególne elementy, z wykorzystaniem docelowej kolorystyki, elementów graficznych, docelowych treści. Możemy również zaplanować kolejność wyświetlania poszczególnych treści czy ekranów. Na tym etapie możemy stwierdzić, czy całość odpowiada naszym oczekiwaniom pod względem funkcjonalności, jednocześnie widząc prawie docelową szatę graficzną (ta zostanie dopracowana na etapie tworzenia GUI).

Teraz w zasadzie jest dobry moment, żeby spróbować wyjaśnić różnicę między wireframes i mockup’em. W języku polskim często oba nazywane makietami, w języku angielskim są to różne byty. Definicje HiFi wireframes i mockup są bardzo zbliżone – niektórzy autorzy stosują termin wireframes tylko do makiet LoFi, a mockupem nazywają HiFi. Często też można się spotkać z użyciem słowa mockup dla określenia końcowej wersji graficznej interfejsu użytkownika…czyli czegoś, co my w Polsce często nazywamy layoutem.

Ja sama jednak przychylam się do takiego rozróżnienia, aby używać terminu wireframes dla makiet niskiej wierności, swoistego szkieletu, a terminu mockup dla makiet o wysokiej wierności. Jednakże używając terminu UI mockup mówimy już o layoucie strony – modelu wizualnym. We wszystkich przypadkach należy pamiętać, że mówimy o modelach statycznych, wizualizacji graficznej bez animacji, ruchu i klikalności.

Prototyp, często mylony jest z makietami czy szkicami, jednakże jest on najbardziej zbliżoną do ostatecznej wersją strony czy aplikacji. Może jeszcze nie wyglądać dokładnie tak samo, jak produkt końcowy, nie powstaje jednak na bazie szkiców czy makiet w odcieniach szarości. Różni się od makiet przede wszystkim tym, że symuluje interakcję użytkownika z interfejsem – jest klikalny, dzięki czemu możemy śledzić ścieżkę użytkownika. Umożliwia wybieranie pozycji menu, wciskanie przycisków, czy nawet wypełnienie formularza. Bez angażowania developerów możemy więc sprawdzić, jak ostateczny produkt będzie się zachowywał. Jest to przydatne zwłaszcza w przypadku, gdy planujemy testy z użytkownikami.

Podsumowując

Po raz kolejny, dopiero starając się przelać na papier informacje, z którymi stykamy się codziennie, w sposób jak najjaśniejszy i usystematyzowany, zdałam sobie sprawę z tego, jak bardzo nawet samo środowisko projektantów stosuje pewne terminy zamiennie, a pewne granice się są tak sztywne, jak mogłoby się wydawać. Nawet jeśli moje podejście do terminologii nie jest tym jedynym i ostatecznym, mam nadzieję, że z artykułu wybrzmiewa to, co jest naprawdę istotne, a mianowicie, że wszystkie etapy projektowania są ważne i każdy z nich pozwala na wychwycenie innych punktów, które mogą nam pomóc w stworzeniu produktu dostosowanego jak najlepiej dla naszych użytkowników.