10 elementów UX, z których korzystają najlepsi projektanci

Posłuchaj wersji audio tego artykułu

Praca projektanta UX odbywa się w wielu różnych środowiskach — od szczupłych start-upów i środowisk Agile, w których zespoły pracują z niewielką ilością dokumentacji, po zadania konsultingowe dla stron trzecich lub dużych przedsiębiorstw i instytucji rządowych o ścisłych wymaganiach dotyczących dokumentacji. Niezależnie od charakteru zaangażowania lub środowiska (i tego, co je łączy), profesjonaliści UX muszą skutecznie komunikować swoje pomysły projektowe, wyniki badań i kontekst projektów szerokiemu gronu odbiorców.

Podczas procesu projektowania UX projektanci będą tworzyć szeroką gamę „artefaktów” i rezultatów projektu w ramach swojej metodologii projektowania UX. Mogą one przybierać różne formy: produkty dostarczalne pomagają projektantom UX komunikować się z różnymi interesariuszami i zespołami, dokumentować pracę i dostarczać artefakty na spotkania i sesje pomysłów. Pomagają również w tworzeniu „pojedynczego źródła prawdy” — przewodników i specyfikacji dotyczących wdrożenia i odniesienia.

Oto 10 efektów UX, które projektant UX zwykle tworzy podczas zaangażowania. (Ta lista w żadnym wypadku nie jest wyczerpująca i potencjalnie może być dłuższa w zależności od charakteru zlecenia).

1. Cele biznesowe i specyfikacje techniczne

To jest podstawowy krok. Dla profesjonalisty UX wszystko zaczyna się od zrozumienia wizji produktu, czyli przyczyny istnienia produktu z perspektywy biznesowej. Napisane w prosty sposób oświadczenie powinno zawierać adresowany problem, proponowane rozwiązanie oraz ogólny opis rynku docelowego. Powinna również opisywać platformy dostawy i lekko dotykać środków technicznych, za pomocą których produkt zostanie dostarczony.

Nie musi być dłuższa niż jedna strona, ale powinna opisywać sedno tego, co, dlaczego i jak. Oto przykład: „The Fantastic App Co. zidentyfikował lukę w aplikacjach do wręczania prezentów na platformach mobilnych dla rynku Millenialsów (iOS i Android). Wielu milenialsów ma problemy z zapamiętaniem specjalnych dat, określeniem najlepszego prezentu, a następnie znalezieniem i zakupem tych prezentów. Nasze rozwiązanie ma na celu złagodzenie tego stresu. Dzięki przewidującemu projektowi i najnowszym technologiom sztucznej inteligencji aplikacja zapewnia przydatne i niemal magiczne wrażenia użytkownika”.

2. Raport z analizy konkurencji

Dla każdego, kto zaczyna projektować nowy produkt, ważne jest, aby upewnić się, że jest on dobrze dopasowany do rynku. Co najważniejsze, jako część strategii UX, produkt musi mieć również przekonującą przewagę konkurencyjną i UX, który jest lepszy od innych na rynku.

Analiza konkurencji oznacza: „Identyfikację konkurentów i ocenę ich strategii w celu określenia ich mocnych i słabych stron w porównaniu z własnym produktem lub usługą ”.

Jednym z początkowych zadań projektanta UX jest zbadanie, jakich produktów lub usług docelowi klienci obecnie używają w celu rozwiązania problemu. Czy istnieje równoważny produkt lub usługa? Czy istnieje alternatywne rozwiązanie, które ludzie używają, które jest wystarczająco dobre, ale nie idealne? Plaster – witamina, ale nie środek przeciwbólowy? Jak lepszy UX może coś zmienić?

Część badania doświadczeń użytkowników, raport z analizy konkurencyjności, identyfikuje pięciu największych konkurentów i analizuje, co robią dobrze, a co robią źle. Ten krok pomoże określić kierunek projektowania, w którym zdefiniowane zostaną jasne cele i określone elementy, na których należy się skoncentrować.

3. Persony i raporty z badań UX

Projektanci UX muszą upewnić się, że interesariusze rozumieją potrzeby klientów produktu. Tworzenie person w celu enkapsulacji i przekazywania wzorców zachowań użytkowników oraz przeprowadzanie badań użytkowników to wypróbowane sposoby na zrobienie tego. Persony są reprezentatywne dla typowych użytkowników produktu — poprzez uwzględnienie ich celów, potrzeb i zainteresowań pomagają zespołowi pracującemu nad projektem rozwinąć empatię wobec użytkownika.

Badania użytkowników są również integralną częścią procesu projektowania UX. Obejmuje szereg technik wykorzystywanych do wyodrębniania wzorców zachowań, dodawania kontekstu i zapewniania wglądu w proces projektowania. Dostępnych jest wiele rodzajów narzędzi i technik badania użytkowników — wszystko sprowadza się do wyboru odpowiedniego „soczewki” do odpowiedniej sytuacji.

Przed rozpoczęciem badań użytkowników warto poświęcić trochę czasu na opracowanie planu badawczego . Jest to dokument, który pomoże komunikować cele i metody badań, a także uzyskać poparcie interesariuszy. Jest to również świetne narzędzie, które można wykorzystać, aby pomóc wszystkim na bieżąco podczas projektu badawczego.

Na zakończenie fazy badań użytkowników generowany jest raport, który przekłada wyniki badań na elementy, które można podjąć. Zespół UX jest następnie gotowy do zaprojektowania produktu wokół tych elementów.

4. Mapa strony i architektura informacji

Mapa witryny to wizualnie zorganizowany model wszystkich komponentów i informacji zawartych w produkcie cyfrowym. Reprezentuje organizację zawartości aplikacji lub witryny. Wraz z modelami szkieletowymi są one jednym z najbardziej podstawowych elementów dostarczanych UX i rzadko są pomijane w procesie projektowania UX.

Mapy witryn pomagają rozplanować architekturę informacji — sztukę i naukę organizowania i oznaczania składników produktu — w celu ułatwienia nawigacji, znajdowania i użyteczności; pomagają również zdefiniować taksonomię i interfejs użytkownika.

Mapy witryn to przydatne odniesienia, które można wykorzystać jako zasób i dostosować w miarę rozwoju produktu w oparciu o iteracyjne prototypowanie i testowanie użytkowników. Podczas przepływu pracy projektowej często stosuje się system numerowania, aby wszyscy byli na tej samej stronie podczas omawiania zawartości produktu.

5. Mapy doświadczeń, podróże użytkowników i przepływy użytkowników

Mapa doświadczeń to wizualna reprezentacja, która ilustruje przepływ użytkownika w ramach produktu lub usługi — jego cele, potrzeby, spędzony czas, myśli, uczucia, reakcje, lęki, oczekiwania — tj. ogólne wrażenia podczas interakcji z produktem. Zazwyczaj układa się go na liniowej osi czasu, pokazując punkty styczności między użytkownikiem a produktem.

Podróże użytkowników i przepływy użytkowników dotyczą bardziej serii kroków, które wykonuje użytkownik, i demonstrują sposób, w jaki użytkownicy obecnie wchodzą w interakcję — lub mogą potencjalnie wchodzić w interakcję z produktem. Demonstrują zachowanie, funkcjonalność i kluczowe zadania, które użytkownik może wykonać. Badając i rozumiejąc „przepływ” różnych zadań, które może podjąć użytkownik, możesz zacząć myśleć o tym, jakie treści i funkcje należy uwzględnić w interfejsie użytkownika i jakiego rodzaju interfejsu użytkownika będzie on potrzebował, aby je wykonać.

Znaczna część UX dotyczy rozwiązywania problemów użytkowników. Tworząc podróż użytkownika, projektant musi zrozumieć osobę, cele użytkownika, motywacje, aktualne problemy i główne zadania, które chce osiągnąć.

Jaka jest różnica między podróżą użytkownika a przepływem użytkownika ? Pomyśl o przepływie użytkowników jako użytkowniku pracującym nad jednym zadaniem lub celem za pośrednictwem twojego produktu lub usługi, np. rezerwując samochód w Lyft; podróż użytkownika ilustruje szerszy obraz. Podróż użytkownika wykracza poza zadania i sprawdza, jak konkretna interakcja z klientem pasuje do szerszego kontekstu.

6. Szkielety UX

Modele szkieletowe, będące podstawą metodologii projektowania UX, to dwuwymiarowe „planowe” ilustracje struktury projektu i elementów interfejsu, które pokazują, dokąd zmierza. Przede wszystkim narzędzie do tworzenia układu graficznego, pomaga zdefiniować architekturę informacji, rozmieszczenie treści, funkcjonalności, projekt interakcji i zamierzone zachowania użytkowników.

Modele szkieletowe to chleb powszedni dla projektantów UX i jeden z najczęstszych rezultatów projektu. „Pokaż mi swoje makiety” jest prawdopodobnie słyszane częściej niż cokolwiek innego podczas wywiadu z projektantem UX.

Głównym etapem procesu projektowania UX, wireframing jest opłacalny sposób na badanie pomysłów i generowanie innowacyjnych koncepcji, które odpowiadają celom klientów. Są świetnymi narzędziami do szybkiego tworzenia pomysłów poza szkicowaniem i są dostępne w wielu różnych wariantach — od niskiej wierności (brak stylizacji, czarno-białe pola, grecki tekst) po wysoką wierność (w pełni stylizowany, kolorowy, bardzo szczegółowy).

Czasami określane jako „przewody” w skrócie w miejscu pracy, szkielety mogą zaoszczędzić mnóstwo czasu i pieniędzy, ponieważ są tak giętkie i szybkie w produkcji. Służą jako centralny punkt, wokół którego można prowadzić rozmowy z interesariuszami i członkami zespołu podczas określania kierunku projektowania.

Modele szkieletowe mają fundamentalne znaczenie i jako takie odgrywają zasadniczą rolę w definiowaniu struktury projektu i sposobie działania przepływu użytkownika w aplikacji lub witrynie w różnych scenariuszach przypadków użycia. Istnieje kilka interesujących zmian w modelach szkieletowych, takich jak „mapy szkieletowe” omówione w poprzednim artykule tutaj na blogu Toptal Design i „wireflows”: dostarczany UX dla przepływów pracy i aplikacji z NNGroup.

7. Interaktywne prototypy

Kolejny dominujący rezultat w procesie projektowania skoncentrowanego na użytkowniku, interaktywne prototypy, które tchną życie w produkt. Podstawowe prototypy pozwalają zaoszczędzić mnóstwo czasu i pieniędzy — pokazują, jak rzeczy będą działać w rzeczywistym scenariuszu przypadku użycia i pozwalają na szybką iterację projektu i testowanie użytkowników. Pomagają również projektantowi skutecznie komunikować swój projekt na różnych etapach procesu projektowania UX.

Prototypowanie może nastąpić w dowolnym momencie podróży odkrywczej poprzez iterację. Od prototypów papierowych po wysoce dopracowane projekty, wewnętrzny przegląd prototypu produktu pozwala każdemu w zespole zobaczyć, jak wszystko będzie działać, gdy rzeczywisty użytkownik wejdzie z nim w interakcję.

Statyczne szkice i makiety nie ożywiają produktu w sposób, w jaki może to zrobić interaktywny prototyp. Niemal w magiczny sposób można zobaczyć i poczuć, jak będzie się zachowywał produkt — jak wszystko się łączy. Można badać różne projekty i funkcje; mogą pojawić się nowe pomysły. Miejsca, w których występują problemy, można wykryć i odkryć niezręczne interakcje.

Interaktywne prototypy ogromnie pomagają użytkownikom w testowaniu. Zamiast prowadzić ludzi po statycznych stronach, potencjalni użytkownicy mogą testować produkt, który wydaje się w 100% prawdziwy, dostarczać pomysłów i dostarczać cennych informacji zwrotnych.

Obecnie narzędzia do prototypowania dla projektantów mają różne kształty i rozmiary. Oto 21 interaktywnych narzędzi do prototypowania do projektowania UX.

8. Projekt wizualny

Projekt wizualny to „ostateczna warstwa farby” na produkcie. Jednak nie chodzi tylko o to: projektowanie wizualne może znacznie wpłynąć na UX produktu i dlatego należy do niego podchodzić bardzo ostrożnie. Mamy nadzieję, że wiele heurystyk projektowania interakcji i użyteczności zostało opracowanych na wcześniejszych etapach procesu projektowania UX, aby projektanci mogli skupić się na wizualizacjach. To ostatnia okazja, aby przenieść produkt na wyższy poziom.

Projekt graficzny jest ostatnim krokiem przed przekazaniem go programistom i etapem tworzenia przewodnika po stylu i ostatecznej specyfikacji. Nie chodzi tylko o „uczynienie rzeczy ładnymi”, ale o możliwość zdefiniowania lub zaimplementowania schematu kolorów marki i wpłynięcie na użyteczność układu, kontrastu i hierarchii wizualnej.

9. Przewodnik po stylach i specyfikacje dla programistów

Ostatnim krokiem w procesie projektowania UX jest zestawienie specyfikacji i przewodnika po stylach dla programistów. Przewodniki po stylu są niezbędne, jeśli projekt produktu ma odnieść sukces na dłuższą metę.

Przewodnik po stylach ma na celu zapewnienie spójnego wdrażania projektów w zakresie brandingu, stylów wizualnych, kolorów, czcionek i typografii. Jest również używany do wzorców projektowych, języka, reguł (takich jak skróty klawiaturowe i reguły wyświetlania danych) oraz określania zachowań interfejsu użytkownika (takich jak obsługa błędów).

Niektóre przewodniki stylów i specyfikacje są składane ręcznie, a inne są generowane automatycznie. Ręczne składanie przewodnika po stylu jest żmudnym procesem i często może zająć sześć miesięcy, więc każde narzędzie do automatyzacji jest mile widzianą oszczędnością czasu.

Zautomatyzowane sposoby różnią się w zależności od używanego narzędzia. Są bardziej zwinnym, przyrostowym sposobem przekazywania projektów w porównaniu z przewodnikami stylu tworzonymi przez długi czas. Można je traktować bardziej jak „biblie stylu” na półce, do której może się odwołać każdy w zespole.

Jeśli pracujesz w Sketchu, są takie dary boskie, jak Zeplin. Zeplin to narzędzie do współpracy dla projektantów interfejsu użytkownika i programistów front-end. Wykracza poza przepływ pracy projektowej i pomaga zespołom w przekazywaniu projektu.

Ponadto przewodnik po stylu projektu można wygenerować w ciągu kilku sekund ze Sketch z wtyczką Craft lub pomiarów i CSS pobranych z projektu, generując plik HTML z wtyczką Marketch, jak opisano w tym artykule.

Oto 50 świetnych przykładów stylu. Również jeden z BBC i jeden od IBM, które udostępniają swoje przewodniki online, co ułatwia każdemu przeglądanie.

10. Testowanie użyteczności i raporty analizy użytkowania

Praca projektanta UX nigdy się nie kończy. Nawet po wydaniu produktu istnieje możliwość zebrania opinii, zebrania danych o użytkowaniu, udoskonalenia, wydania i rozpoczęcia cyklu od nowa.

Test użyteczności powie Ci, czy Twoi docelowi użytkownicy mogą korzystać z Twojego produktu. Pomaga zidentyfikować problemy, które ludzie mają z określonym interfejsem użytkownika i ujawnia trudne do wykonania zadania i mylący język.

Raporty z testów użyteczności są zazwyczaj dostarczane w fazie prototypowania, ale nie jest niczym niezwykłym testowanie istniejących produktów z użytkownikami, aby zobaczyć, gdzie może być miejsce na ulepszenia.

Zrozumienie danych gromadzonych podczas testów użyteczności — zbieranie, sortowanie i generowanie raportów, staje się coraz bardziej powszechnym zadaniem wśród praktyków UX — w rzeczywistości staje się krytyczną umiejętnością UX. Oto szablon raportu z testów użyteczności.

Po wypuszczeniu produktu na wolność kolejny zestaw danych — metoda ilościowa — powie zespołowi projektowemu, jak produkt radzi sobie z użytkownikami na masową skalę.

Istnieje niezliczona ilość narzędzi i sposobów przechwytywania zachowań użytkowników i ich analizy. Od śledzenia wzroku po śledzenie kliknięć i mapy popularności (które pokazują kliknięcia, stuknięcia i zachowanie podczas przewijania) po tagowanie elementów interfejsu użytkownika, które śledzi cyfrowy ślad każdego użytkownika na urządzeniach mobilnych i internetowych.

Raporty Analytics pokazują, z jakich funkcji korzystają klienci, ile czasu spędzają w Twojej aplikacji mobilnej lub witrynie, trendy w czasie, a także agregują wyniki w różnych lokalizacjach geograficznych, kontach, użytkownikach i segmentach niestandardowych. Zapewniają pełny wgląd w to, jak funkcje są używane i przez kogo.

Firmy analityczne zazwyczaj automatycznie generują niestandardowe raporty na żądanie. Raporty te są bardzo przydatne i mogą dostarczyć zaskakujących informacji na temat wykorzystania Twojego produktu. Ta niesamowita funkcja, o której myślałeś, że przekona wszystkich Twoich klientów, może okazać się rzadko używana. Z drugiej strony mała, nieistotna funkcja w interfejsie użytkownika może okazać się bardzo przydatna i możesz zdecydować, że nadszedł czas, aby skupić się na rozszerzeniu tej konkretnej funkcjonalności.

Misją projektanta UX jest umożliwienie firmom tworzenia produktów i usług opartych na głębokim zrozumieniu ludzkich zachowań, celów i motywacji. Powyższe 10 wyników UX to jedne z najczęściej opracowywanych przez projektantów UX, ponieważ tworzą oni wspaniałe doświadczenia dla użytkowników w ramach „myślenia projektowego” i procesu projektowania skoncentrowanego na użytkowniku.

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika