Udoskonal swój proces projektowania UX – przewodnik po projektowaniu prototypów

Proces prototypowania — od tworzenia prostych modeli szkieletowych po testowanie w pełni funkcjonalnych makiet — jest jednym z najpotężniejszych i najpotężniejszych zestawów umiejętności, jakie może opanować każdy projektant. Jest to również obarczone niebezpieczeństwem w miejscach pracy, w których proces jest pomijany, zamiast „projektowania prototypu” jako prostego produktu, który ma zostać przekazany następnemu działowi do zbudowania. Bez względu na to, jak pilnie Twoja firma wykonuje prototypy, rzeczywisty proces często może wytworzyć lub zepsuć produkt końcowy.

Jak i dlaczego właściwie zbudować prototyp, to często zagadka. Zapytaj wielu projektantów, a przechylą głowy jak zdezorientowane szczenięta. "Co masz na myśli? Po prostu to zrób”, powiedzą. I rzeczywiście: wszyscy wiemy, jak stworzyć prototyp. Po prostu nie wiemy, skąd wiemy.

Jest to szczególnie ważne, biorąc pod uwagę, że prototypy są często najcenniejszym produktem. Klienci i menedżerowie chcą zobaczyć , co zrobiłeś, niezależnie od tego, czy jest to strona internetowa, czy fizyczny produkt. Chcą to wypróbować, sprawdzić różne elementy i zrozumieć przepływ pracy. Chcą zobaczyć, „jak to działa”.

Zbudowanie prototypu nie wystarczy; musimy zrozumieć proces związany z konstruowaniem wstępnych szkiców produktu. W tym artykule szczegółowo omówię wszystko, co projektant musi wiedzieć i robić, aby to osiągnąć.

Projektowanie prototypów — do czego służą prototypy

Istoty ludzkie są bardzo wizualne. W rzeczywistości 30 procent naszej kory mózgowej jest przeznaczone wyłącznie na widzenie. Więc kiedy widzisz prototyp, najważniejszą rzeczą jest to, że go widzisz ! Kiedy klient może go zobaczyć i zrozumieć wszystkie procesy związane z produktem, zwłaszcza obszary sporne do przyszłych testów, prototyp ożywa.

Czym więc jest prototyp? Prototyp to narzędzie do wizualizacji stołu interaktywnych prac projektowych; w efekcie prototypy (na prawie każdym etapie) są połączeniem całej dotychczasowej pracy w jeden, widoczny, funkcjonalny kawałek. Ta wizualna reprezentacja pokazuje, co produkt robi w danym momencie, jakie są elementy interaktywne i jak produkt będzie działał w świecie rzeczywistym.

Chociaż istnieje wiele mechanizmów służących do różnych aspektów projektowania prototypów (takich jak tworzenie szkiców), łatwo jest przeoczyć pewne rzeczy i popełnić błędy.

To sprawia, że ​​praca nad budowaniem prototypu jest niezwykle cenna, ponieważ pod wieloma względami opisuje, w jaki sposób urzeczywistnia się cel produktu. Nie idealnie i zdecydowanie nie przez większość czasu dokładnie, ale jak sama nazwa wskazuje, prototypy nie są ostateczne.

Spowalniają nas, aby przyspieszyć. Poświęcając czas na prototypowanie naszych pomysłów, unikamy kosztownych błędów, takich jak zbyt wczesne zbytnie złożoność i zbyt długie trzymanie się słabego pomysłu.

Tim Brown, dyrektor generalny i prezes IDEO

Prostym sposobem myślenia o prototypach jest mechanizm demonstrowania funkcjonalności.

To praktyczne wyjaśnienie, jak coś działa, ma wiele zalet o dużej wartości, w tym:

• Urzeczywistnianie – Zanim jakiekolwiek prototypy zostaną zbudowane, produkt jest całkowicie koncepcyjny! Przez chwilę jest to w porządku, ale w końcu musi stać się czymś, co interesariusze i użytkownicy w końcu zrozumieją i docenią. Prototyp to pierwszy krok w przejściu od koncepcji do rzeczywistości.
• Problem z pracą – Czasami mamy wyzwanie projektowe bez rozwiązania. Jako umiejętność, prototypowanie to świetny sposób na wizualizację problemu i szybkie wprowadzenie rozwiązań. Jeśli to nie zadziała, wyrzuć prototyp i spróbuj ponownie.
• Iteracja — tworzenie prototypów odbywa się etapami, ale rezultat jest taki sam: ewoluowanie pomysłów. Od szkiców po hi-fi, każda nowa iteracja oferuje mnóstwo zachowań i funkcji do przetestowania. A dzięki większej ilości danych możemy iterować zarówno szybciej, jak i mądrzej.
• Wykrywaj niezamierzone scenariusze — gdy coś jest widoczne, mamy do dyspozycji ograniczenia naszego produktu, co zapewnia również lepszy kontekst tego, co powinno tam być… a co nie!
• Wykrywaj problemy z użytecznością — tu mieszka wielu projektantów: gdy produkt ma już jakikolwiek prototyp, wyzwania związane z użytecznością stają się nagle łatwe do zauważenia i naprawienia.
• Prezentacja – Prototypy na każdym etapie to standard prezentacji. Niezależnie od tego, czy testujesz wersję strony, czy prezentujesz produkt klientowi, powinien tam być prototyp w jakiejś formie. A jeśli nie, możesz się założyć, że ktoś zapyta, gdzie to jest i dlaczego nie zostało uwzględnione.

Jak rozpocząć proces prototypowania

Po otrzymaniu od klienta 50-stronicowego dokumentu wymagań, patrzenie na puste płótno może być zniechęcające. Przeglądanie niezorganizowanych myśli ze spotkań z klientami, szkiców na serwetkach i brudnych zdjęć na tablicy rzadko pomaga.

Ponieważ prototypy są budowane na tak wielu innych informacjach, ważne jest, aby zebrać niezbędne szczegóły przed przełożeniem długopisu na papier. Rozważ poniższą listę kontrolną i przejrzyj szczegóły dostarczone przez klienta lub menedżera:

1. Jakie są cele projektu?

Zacznij od pełnego obrazu. Czy produkt zaspokaja rzeczywistą potrzebę? Jak to rozwiązuje tę potrzebę? Zrozumienie użyteczności produktu ma kluczowe znaczenie dla dostarczenia jakiegokolwiek realnego rozwiązania.

2. Z jakich konkurencyjnych produktów obecnie korzystają ludzie?

Silna analiza konkurencji zapewni jasny obraz stanu rynku dla danego typu produktu oraz tego, czego oczekują dzisiejsi użytkownicy.

3. Kim jest publiczność? Jakie są ich cele?

Zrozumienie demografii i potrzeb użytkowników zapewnia kontekst niezbędny do tworzenia produktów ukierunkowanych na zapewnienie tych konkretnych typów użytkowników i spełnianie ich potrzeb.

4. Jaki to rodzaj produktu i do czego (urządzenia) jest przeznaczony?

Przy tak wielu różnych technologiach i rozwiązaniach projektanci UX muszą wiedzieć, w jaki sposób produkt będzie używany (aplikacja internetowa, responsywna strona internetowa, aplikacja mobilna itp.), na jakim urządzeniu (urządzeniach) i jak różne wersje będą współistnieć (jeśli w ogóle ).

5. Czy są jakieś wizualne precedensy do naśladowania?

Jeśli produkt już istnieje, a projekt wymaga ulepszeń lub przeprojektowania, możliwe jest, że istnieją pewne wymagania, biorąc pod uwagę bieżące zachowanie użytkownika z produktem.

6. Jakie są rezultaty?

Ustalenie oczekiwań dotyczących wyników i procesu ma kluczowe znaczenie dla planowania i przepływu pracy. Każdy projekt jest inny, ale jeśli rezultaty są dobrze zdefiniowane, reszta procesu projektowania UX ma większą szansę na bezproblemowy przebieg.

Narysuj swoje prototypy

Gdy nasze dane są dostępne i uporządkowane, następnym krokiem jest rozpoczęcie rysowania. Wielu projektantów ma już pomysł na układ, strukturę, a nawet miejsce, w którym przynależą poszczególne elementy projektu wizualnego, zanim go rozrysują. To dobrze, ale celem wstępnych szkiców jest zbadanie dostępnej przestrzeni, aby podkreślić to, co jest możliwe – a co ważniejsze, co nie jest.

Zbierz wybrane przez siebie przybory do pisania, czy to ołówek i papier, czy tablicę i marker. Proces szkicowania jest podobny do swobodnego pisania pisarza lub brzdąkania muzyka; narysuj to, co czujesz, opierając się na całej pracy, którą wykonałeś wcześniej i biorąc pod uwagę poniższe elementy:

01 | Przepływy użytkownika — postępuj zgodnie z identyfikacją przepływów użytkownika. Zobacz, jak użytkownicy realizują swoje cele i jak wchodzą w interakcję w systemie.

02 | Encje informacyjne — każdy przepływ użytkownika pokaże pewne dane wejściowe i wyjściowe użytkownika. Określ, czym one są, w jaki sposób odnoszą się do zachowań i oczekiwań użytkowników, w jakie interakcje są zaangażowani i jak działają.

03 | Pierwsze szkice – Po zorientowaniu się, kto będzie korzystał z systemu, co będzie robił iz czym, czas zobaczyć, jak. Naszkicuj przepływy użytkownika — nie musisz jeszcze tworzyć układu, wystarczy rozwiązać problem z funkcjonalnością.

04 | Naszkicuj podstawową strukturę — ​​po naszkicowaniu przepływów użytkowników będziesz miał lepszy pomysł na najlepszy układ produktu. Obejmuje to treści (tekst, zdjęcia, wideo itp.), które będą wyświetlane jako podstawowe pola lub bazgroły. Napisane odręcznie nie będą pasować do rozmiaru, więc cała struktura i treść są przeznaczone tylko do wizualizacji, a nie do rzeczywistego użytku.

Dodatkową wskazówką jest użycie bloków szkicowania, specjalnie opracowanego papieru lub narzędzi do tworzenia wyraźniejszych modeli szkieletowych podczas szkicowania. Zapewniają one podstawowy układ dla danej rzutni, są dość tanie, a przy odpowiednim szablonie sprawiają, że szkice są czystsze. Są one niezwykle przydatne, jeśli masz brudną szufladę, ponieważ zapewniają prawidłowe proporcje i linie siatki dla smartfonów i przeglądarek internetowych.

Ten proces może trwać tak długo, jak chcesz, ale nadszedł czas, aby przejść do następnego kroku, gdy przepływ użytkownika zostanie zakończony, a proces ukończenia tego przepływu jest jasny. Dobrym pomysłem jest przeskakiwanie między szkicowaniem i budowaniem cyfrowych modeli szkieletowych, głównie po to, aby zachować kreatywność procesu. W miarę postępów w kolejnych procesach produkt będzie bardziej konkretny i w naturalny sposób odejdziesz od szkicowania.

Przejście na technologię cyfrową (prototypy od niskiej do wysokiej wierności)

Gdy będzie wystarczająca liczba kompletnych szkiców, aby przejść dalej, nadszedł czas na ich digitalizację. Niezależnie od tego, czy jest to Adobe XD, Sketch, Framer, Flinto, czy coś zupełnie innego, tworzenie cyfrowych wersji szkiców jest pierwszym krokiem do ich sformalizowania. W związku z tym nacisk przenosi się z kreatywnego dodawania niezbędnych elementów na organizowanie zasobów i struktury w projektach.

W miarę jak prototypy stają się bardziej praktyczne, a elementy bardziej ustrukturyzowane, produkt nabiera kształtów. Przechodząc na prototypy cyfrowe, wierność zależy od poziomu interaktywności , projektu wizualnego i treści . Prototyp może mieć niską lub wysoką wierność indywidualnie w tych obszarach, chociaż hi-fi zawiera wszystkie trzy na najwyższym poziomie.

Rozważ hierarchię w odniesieniu do zaspokajania potrzeb użytkowników. Każdy szkic łączy się z przepływem użytkownika i historią, a szkice są pierwszym krokiem w kierunku określenia układu i struktury produktu. Dzisiejsze narzędzia cyfrowe mogą znacznie przyspieszyć ten proces — na przykład ustawianie elementów wzorcowych, które mają zastosowanie do wszystkich stron i szablonów typów stron.

Przy każdym nowym łączniku i iteracji zadaj dwa główne pytania: Czy ta strona spełnia swoje zadanie w większym przepływie użytkowników? I czy interakcja ma sens (czyli czy użytkownik zrozumiał, jak wykonać akcję)? Często zadajemy te pytania. Im więcej robimy, tym większe prawdopodobieństwo, że każda nowa iteracja przybliży prototypy do ostatecznej wersji roboczej.

Prototypy cyfrowe są również znacznie łatwiejsze do przetestowania, ponieważ są nie tylko bardziej czytelne, ale także szybsze w masowej reprodukcji i iteracji. W tym miejscu narzędzia do prototypowania UX, takie jak InVision i Proto.io, są bardzo przydatne do tworzenia klikalnych prototypów. Gdy jest klikalny, łatwo jest przetestować użyteczność różnych aspektów, od pojedynczych przycisków po całe przepływy.

Prototypowanie z możliwością klikania stało się szczególnie popularne w ciągu ostatnich kilku lat dzięki łatwości obsługi programów takich jak InVision. Jest to jeszcze bardziej wartościowe w przypadku urządzeń mobilnych, gdzie obecnie każde główne narzędzie do prototypowania zapewnia pewną możliwość obejrzenia lub przetestowania przewodów mobilnych bezpośrednio na urządzeniu testowym.

Dzięki pewnej wiedzy inżynierskiej lub potężniejszym narzędziom, takim jak Justinmind lub Axure, możliwe jest również budowanie funkcjonalnych prototypów, które są interaktywne i wykraczają poza zwykłe klikanie. Użytkownicy mogą testować takie rzeczy, jak wypełnianie formularzy, wykonywanie prostych lub złożonych zadań i faktyczne używanie aplikacji zgodnie z jej przeznaczeniem, a wszystko to bez faktycznego jej tworzenia. Projektanci przeszkoleni w zakresie projektowania interakcji człowiek-komputer (HCI), w tym wielu projektantów Toptal, regularnie budują i testują funkcjonalne prototypy.

Interaktywne prototypy doskonale nadają się do testowania animacji, operacji użytkownika w aplikacji i funkcji wyższego poziomu, których czasami nie można przetestować bez działania funkcjonalnego.

Prototyp z celem

Piękno — i wyzwanie — prototypowania jest w trakcie. To samo możemy powiedzieć o prawie wszystkim, ale prototypy zaczynają się i kończą w celu. Nie wiedząc, dlaczego dany ekran musi zachowywać się w określony sposób, jak powinna działać funkcja lub czy użytkownicy potrzebują lejka, czy nie, wykonany prototyp nie jest rozwijany; jest rysowany, a następnie tworzony ad hoc.

Jednak nawet jeśli każdy zbudowany szkielet jest wykonywany tak inteligentnie, pytania zadawane po drodze, z uwzględnieniem każdej powiązanej historyjki użytkownika i architektury informacji używanej jako mapa, nadal można coś przeoczyć. To jest wyzwanie projektowania prototypów: klienci, menedżerowie, a nawet projektanci zapominają, że prototypy nie są ostateczne . To tylko szkic, iteracja do następnej wersji. To wszystko jest częścią procesu projektowania UX.

Dlatego konstruując kolejny zestaw prototypów, pamiętaj, aby zadać przynajmniej jedno najważniejsze pytanie: czy przyniesie to pożądany rezultat? Jeśli nie, to jest kolejna okazja do napisania nowej wersji.

• • •

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