Design Better And Faster With Rapid Prototyping

• About The Author
• Dalsze czytanie na SmashingMag:
• Proces szybkiego prototypowania
• Scoping A Prototype
• Co wymaga prototypowania?
• Jak dużo powinno być prototypowane?
• Znajdź historię
• Planuj swoje iteracje
• Wybierz odpowiednią wierność
• Spektrum prototypowania
• Niska wierność
• Średnia wierność
• High Fidelity
• Wybór poziomu wierności
• Wybieranie narzędzi
• Dos And Don’ts
• Do…
• Nie…
• Dalsze zasoby

About The Author

Lyndon Cerejo jest certyfikowanym strategiem user experience w Capgemini’s Rapid Design & Visualization practice, z sukcesami w …Więcej oLyndon↬

Stare porzekadło „obraz mówi tysiąc słów” oddaje to, o co chodzi w prototypowaniu interfejsu użytkownika: używanie wizualizacji do opisania tysięcy słów specyfikacji projektowych i rozwojowych, które szczegółowo opisują, jak system powinien się zachowywać i wyglądać. W iteracyjnym podejściu do projektowania interfejsu użytkownika, szybkie prototypowanie jest procesem szybkiego tworzenia makiet przyszłego stanu systemu, czy to strony internetowej czy aplikacji, i walidacji go z szerszym zespołem użytkowników, interesariuszy, programistów i projektantów.

Robienie tego szybko i iteracyjnie generuje informacje zwrotne na wczesnym i częstym etapie procesu, poprawiając ostateczny projekt i zmniejszając potrzebę zmian podczas rozwoju.

Dalsze czytanie na SmashingMag:

• Optimizing Your Design For Rapid Prototype Testing
• Choosing The Right Prototyping Tool
• Content Prototyping In Responsive Web Design
• Resurrecting User Interface Prototypes (Without Creating Zombies)

Prototypy obejmują zakres od szorstkich papierowych szkiców do interaktywnych symulacji, które wyglądają i funkcjonują jak produkt końcowy. Kluczem do sukcesu szybkiego prototypowania jest szybka rewizja w oparciu o informacje zwrotne oraz zastosowanie odpowiedniego podejścia do prototypowania. Szybkie prototypowanie pomaga zespołom eksperymentować z wieloma podejściami i pomysłami, ułatwia dyskusję poprzez wizualizacje zamiast słów, zapewnia, że wszyscy podzielają wspólne zrozumienie, a także zmniejsza ryzyko i pozwala uniknąć pominiętych wymagań, prowadząc do lepszego projektu w krótszym czasie.

Proces szybkiego prototypowania

Szybkie prototypowanie obejmuje wiele iteracji trzyetapowego procesu:

1. Prototyp Przekształć opis rozwiązania przez użytkowników w makiety, uwzględniając standardy doświadczenia użytkownika i najlepsze praktyki.
2. Recenzja Udostępnij prototyp użytkownikom i oceń, czy spełnia ich potrzeby i oczekiwania.
3. Dopracowanie Na podstawie informacji zwrotnych zidentyfikuj obszary, które wymagają dopracowania lub dalszego zdefiniowania i wyjaśnienia.

Prototyp zwykle zaczyna się od niewielkiej liczby makiet kilku kluczowych obszarów, a następnie zwiększa swoją objętość i głębokość w wielu iteracjach w miarę rozbudowywania wymaganych obszarów, aż do ukończenia prototypu i przekazania go do opracowania produktu końcowego. Szybkość procesu jest najbardziej widoczna w iteracjach, które wahają się od zmian w czasie rzeczywistym do cykli iteracji trwających kilka dni, w zależności od zakresu prototypu.

Scoping A Prototype

Słowo prototyp często przywołuje obrazy zakodowanej, w pełni funkcjonującej wersji aplikacji lub interfejsu. Szybkie prototypy nie mają na celu ewoluować w pełni funkcjonalne rozwiązania, ale mają pomóc użytkownikom w wizualizacji i tworzeniu doświadczeń użytkownika produktu końcowego. Mając to na uwadze, podczas ustalania zakresu prototypu należy zdecydować się na kilka kluczowych kwestii przed rozpoczęciem jakichkolwiek prac prototypowych.

Co wymaga prototypowania?

Dobrzy kandydaci do prototypowania obejmują złożone interakcje, nowe funkcjonalności i zmiany w przepływie pracy, technologii lub projekcie. Na przykład, prototypowanie wyników wyszukiwania jest przydatne, gdy chcesz znacznie odejść od standardowego doświadczenia wyszukiwania; powiedzmy, aby wprowadzić wyszukiwanie fasetowe lub możliwość podglądu dokumentu bez opuszczania wyników wyszukiwania.

Jak dużo powinno być prototypowane?

Dobrą zasadą jest skupienie się na 20% funkcjonalności, która będzie używana przez 80% czasu; tj. kluczowa funkcjonalność, która będzie używana najczęściej. Pamiętaj, że celem szybkiego prototypowania jest pokazanie, jak coś będzie działać lub, w późniejszych etapach, jak będzie wyglądać projekt, bez prototypowania całego produktu.

Znajdź historię

Po zidentyfikowaniu obszarów do prototypowania, spleć je razem w jeden lub więcej scenariuszy: zidentyfikuj spójne ścieżki przez doświadczenie użytkownika, które prototyp symuluje. Dla witryny sprzedającej buty, jednym scenariuszem może być „Nudny Joe” kupujący dokładnie te same buty do biegania Nike, które kupił sześć miesięcy temu, podczas gdy innym scenariuszem może być „Odkrywczy Sam” przeglądający rozmiar 10, aby znaleźć parę Oxfordów i parę loafersów, które go interesują.

Planuj swoje iteracje

Cały prototyp zazwyczaj nie jest budowany w jednej iteracji, ale raczej kawałek po kawałku. Dobrym podejściem jest rozpoczęcie prototypowania szeroko i szeroko, a następnie zanurzenie się głęboko w wybranych obszarach rozwiązania. W przypadku strony internetowej oznacza to zbudowanie strony głównej i stron docelowych dla głównych sekcji w pierwszej iteracji (czasami nazywanej prototypem horyzontalnym), a następnie przejrzenie i zweryfikowanie tych ram. Kolejne iteracje mogą zagłębić się w jedną lub więcej sekcji witryny (prototyp pionowy); dla witryny do pobierania mediów, mogą to być kroki, które użytkownik podejmie, aby znaleźć wideo i pobrać je, lub jak będzie zarządzać mediami w swojej bibliotece online.

Wybierz odpowiednią wierność

Wierność odnosi się do tego, jak blisko prototyp przypomina ostateczne rozwiązanie. Istnieje wiele wymiarów wierności, a prototypy mogą znajdować się w dowolnym miejscu spektrum dla każdego z tych wymiarów. W zależności od etapu procesu projektowania i celów prototypu, należy wybrać odpowiednią wierność dla każdego z poniższych wymiarów:

• Wierność wizualna (szkic ↔ stylizacja) Wygląd i odczucia są najbardziej zauważalnym wymiarem wierności prototypu i, jeśli nie są właściwie dobrane, mogą przeszkadzać w recenzowaniu prototypu. Zbyt wczesne przejście na hi-fi spowoduje, że użytkownicy skupią się na projekcie wizualnym, co nie jest wskazane na wczesnych etapach. Z wizualnego punktu widzenia, prototypy nie muszą być idealne pod względem pikseli, ale powinny być proporcjonalne; na przykład, jeśli lewy obszar nawigacji ma zajmować jedną piątą ekranu o rozdzielczości 1024 pikseli, nie musi mieć dokładnie 204 pikseli szerokości, o ile jest proporcjonalnie przedstawiony w prototypie. W miarę postępów prototypowania w cyklu projektowym, zwiększaj wierność wizualną w miarę potrzeb, wprowadzając elementy stylu, koloru, brandingu i grafiki.
• Wierność funkcjonalna (statyczna ↔ interaktywna) Czy prototyp pokazuje, jak rozwiązanie będzie działać (statyczne), czy też sprawia wrażenie w pełni funkcjonalnego i reagującego na dane wprowadzane przez użytkownika (interaktywne)? Ten wymiar jest mniej rozpraszający dla użytkowników, ale dodanie interaktywności w kolejnych iteracjach zwiększa wierność funkcjonalną i pozwala na wykorzystanie prototypu do testów użyteczności, szkoleń i komunikacji.
• Wierność treści (lorem ipsum ↔ real content) Innym wymiarem, który często rozprasza użytkowników jest treść, która jest wyświetlana w prototypie. Na wczesnych etapach prototypowania warto unikać falistych linii i tekstu pozornego, takiego jak lorem ipsum. Ale w miarę dopracowywania prototypu oceń potrzebę zastąpienia tekstu pozornego prawdziwą treścią, aby zorientować się, jak wpływa on na ogólny projekt.

Spektrum prototypowania

Niska wierność

Najszybszy sposób rozpoczęcia prototypowania jest również najprostszy: przykładanie pióra do papieru. Szkicowanie na papierze jest podejściem o niskiej wierności, które każdy może wykonać; nie są wymagane żadne specjalne narzędzia ani doświadczenie. Najczęściej stosowane we wczesnych fazach cyklu projektowego, szkicowanie jest szybkim sposobem tworzenia wstępnych makiet podejść projektowych i koncepcji oraz uzyskiwania informacji zwrotnych od użytkowników. Prototypowanie na papierze jest idealne podczas burzy mózgów i konceptualizacji i może być wykonywane samodzielnie w boksie ze szkicownikiem lub w grupie z flipchartem (lub tablicą) i markerami.

Leżąc na końcu spektrum prototypowania o niskiej wierności, prototypy papierowe są statyczne i zazwyczaj mają niską wierność wizualną i treściową. Zmusza to użytkowników do skupienia się na tym, jak będą korzystać z systemu, a nie na tym, jak będzie on wyglądał, i sprawia, że projektanci są bardziej otwarci na zmiany oparte na opiniach użytkowników.

Prototypowanie niskiej wierności nadaje się do szybkiego prototypowania. Nie wymaga nauki, ale pozwala łatwo i szybko wprowadzać zmiany.

Średnia wierność

Jak zaczynamy używać do prototypowania narzędzi komputerowych, takich jak Visio i Omnigraffle, wierność wzrasta na większości frontów, dając prototypy średniej wierności. Ramy druciane, przepływy zadań i scenariusze tworzone za pomocą tych narzędzi wymagają więcej czasu i wysiłku, ale wyglądają bardziej formalnie i dopracowanie. Podczas gdy wizualne elementy brandingu, kolory i styl mogą być wprowadzone, prototypujący często trzymają się od nich z daleka, skupiając się na demonstracji zachowania aplikacji. Interaktywność może być symulowana poprzez łączenie stron lub ekranów, ale wierność funkcjonalna jest tu w najlepszym wypadku średnia. Prototypy te najlepiej nadają się do określenia, czy potrzeby użytkownika są spełnione i czy doświadczenie użytkownika jest optymalne.

Istnieją dwa powody, dla których można celowo sprawić, aby prototyp średniej wierności nie wyglądał jak prototyp średniej wierności:

• Pierwszym z nich jest to, że używając Balsamiq lub szkicowych szablonów Visio, aby prototyp wyglądał na prototyp niskiej wierności, zmuszasz użytkowników do postrzegania go jako szkicu lub pracy w toku, a nie jako wypolerowanego i skończonego produktu.
• Po drugie, nadając prototypowi wysoką wierność wizualną (na przykład w kompleksowym układzie wykonanym w Photoshopie), zmuszasz użytkownika do skupienia się na projekcie wizualnym i wyglądzie, w tym na kolorach, czcionkach, układzie, logo i obrazach.

Szybkość prototypowania średniej wierności jest osiągana dzięki szablonom, szablonom i widżetom oraz elementom wielokrotnego użytku. Staje się szybsze, gdy stajesz się bardziej biegły z wybranymi narzędziami.

High Fidelity

Prototypy wysokiej wierności są najbardziej realistyczne i często mylone z produktem końcowym, ale są zazwyczaj czasochłonne. Kilka lat temu jedynym sposobem na tworzenie prototypów wysokiej wierności było rzeczywiste kodowanie przy użyciu języka programowania, co często wymagało współpracy projektanta i programisty. Obecnie jednak narzędzia do symulacji aplikacji pozwalają użytkownikom nietechnicznym przeciągać i upuszczać widżety UI, aby tworzyć prototypy o wysokiej wierności, które symulują funkcjonalność produktu końcowego, nawet w przypadku logiki biznesowej i interakcji z bazą danych. Axure i iRise to niektóre przykłady narzędzi do symulacji aplikacji, które mogą być używane do tworzenia prototypów wysokiej wierności.

Te prototypy są odpowiednie, gdy wymagana jest wysoka wierność wizualna i funkcjonalna; na przykład przy wprowadzaniu nowej technologii (powiedzmy, przy przechodzeniu z aplikacji mainframe – tak, one nadal istnieją! – do rozwiązania opartego na sieci Web. Większość z tych prototypów nie może być przekształcona w kod użytkowy, ale służą one jako doskonały punkt odniesienia dla programistów. Są one również przydatne do przeprowadzania testów użyteczności i szkolenia użytkowników.

Prototypowanie wysokiej wierności jest stosunkowo szybkie, biorąc pod uwagę poziom interaktywności i wierności, i może być przyspieszone przez użycie narzędzi symulacyjnych typu „przeciągnij i upuść”. Ponadto, niektóre z tych narzędzi ułatwiają zbieranie informacji zwrotnych od użytkowników i dokumentowanie wymagań, co jeszcze bardziej przyspiesza proces projektowania. Nawet jeśli nie musisz uczyć się nowego języka programowania, narzędzia te mają krzywą uczenia się.

Wybór poziomu wierności

W wyborze wierności prototypu nie ma jednego poprawnego podejścia. Większość projektów nowych produktów najlepiej rozpocząć od szkiców, a następnie przejść do prototypów o średniej lub wysokiej wierności, w zależności od złożoności systemu i wymagań dotyczących wymiarów wierności.

Pracując z jednym konkretnym klientem z branży farmaceutycznej, przeszliśmy od tablic do interaktywnych prototypów, które miały wysoką wierność funkcjonalną i treściową, ale niską wierność wizualną. Mniej zależało im na wyglądzie i działaniu, niż na przestrzeganiu wytycznych korporacyjnych.

Dla innego klienta, tym razem z branży detalicznej, nasz interaktywny prototyp musiał mieć wysoką wierność wizualną i funkcjonalną. Wierność treści nie miała znaczenia, ponieważ klient miał ponownie wykorzystywać treści i był już z nimi zaznajomiony. Dla nich wygląd i odczucia oraz interaktywne doświadczenie miały większe znaczenie, ponieważ było to ich pierwsze wdrożenie SharePoint i chcieli, aby portal wyglądał „nie-SharePointy”!

Wybieranie narzędzi

W zależności od Twojego podejścia, masz do wyboru szeroką gamę narzędzi. Dan Harrelson zebrał listę popularnych narzędzi do prototypowania na blogu Adaptive Path.

Każde narzędzie ma swój własny zestaw funkcji i mocne strony. W oparciu o swoje potrzeby i wymagania projektów, nad którymi pracujesz, oceń, które narzędzie będzie najbardziej odpowiednie. Oto kilka pytań do rozważenia podczas oceny narzędzi:

• Jak łatwo jest się nauczyć i korzystać z narzędzia?
• Czy jest ono elastyczne, aby obsługiwać prototypy dla aplikacji internetowych, pakietowych i niestandardowych, a także aplikacji desktopowych i mobilnych?
• Czy dostępne jest repozytorium szablonów, szablonów lub widżetów wielokrotnego użytku?
• Jak łatwo jest udostępnić prototyp innym osobom do przeglądu? Czy ich opinie mogą być przechwycone za pomocą narzędzia?
• Jak łatwo jest wprowadzać zmiany w locie lub uwzględniać opinie?
• Czy posiada ono jakiekolwiek funkcje współpracy, takie jak umożliwienie pracy nad nim wielu osobom w tym samym czasie?
• Jakie są warunki licencji i koszty?

Dos And Don’ts

Jak zacząć, oto kilka punktów na temat skutecznego szybkiego prototypowania, o których należy pamiętać:

Do…

• Współpracuj z użytkownikami, interesariuszami biznesowymi i informatycznymi podczas szybkiego prototypowania. Oprócz przekazywania cennych informacji zwrotnych zyskują oni również poczucie własności produktu końcowego.
• Unikaj „pełzania prototypu”, ustalając oczekiwania wobec procesu, w tym te dotyczące celu, wierności, zakresu i czasu trwania. Przypominaj wszystkim, w tym sobie, że szybkie prototypowanie jest środkiem do celu, a nie celem samym w sobie.
• Podczas tworzenia interaktywnych prototypów i symulacji o wysokiej wierności, uwzględnij realistyczne opóźnienia (na przykład w przypadku odświeżania ekranu lub przechodzenia przez kolejne etapy transakcji), aby użytkownicy nie oczekiwali natychmiastowych czasów reakcji od produktu końcowego.
• Używaj, używaj, używaj ponownie. W przypadku prototypowania z wykorzystaniem komputera oznacza to zapisywanie szablonów, szablonów, wzorów i widżetów wielokrotnego użytku na potrzeby przyszłych projektów.
• Najważniejsze, rozpocznij każdą sesję przeglądu prototypu od zastrzeżenia, że jest to tylko prototyp, makieta, a nie rzeczywiste rozwiązanie. Przypomina to użytkownikom, że jest to praca w toku, zachęca do przekazywania informacji zwrotnych, a w przypadku prototypów o wysokiej wierności zapobiega myleniu ich z działającym rozwiązaniem.

Nie…

• Nie prototypuj cech lub funkcjonalności, które nie mogą być wdrożone – często jest to problem z implementacjami pakietów oprogramowania. W razie wątpliwości należy potwierdzić to z programistami przed rozpoczęciem pracy.
• Nie traktuj każdej zmiany lub żądania, które wynikają z przeglądu prototypu, jako nowego wymagania. Szybkie prototypowanie pomaga uchwycić pominięte wymagania, ale te nowe wymagania powinny być ostrożnie oceniane. Niektóre mogą zostać wdrożone, podczas gdy inne są przesuwane do przyszłego wydania.
• Nie zaczynaj sesji przeglądu prototypu bez jasnych wytycznych dotyczących informacji zwrotnej. Bądź bardzo konkretny co do rodzaju informacji zwrotnej, której oczekujesz. (Czy kroki są logicznie ułożone? Czy nawigacja jest jasna i intuicyjna?) Jeśli nie, bądź przygotowany na: „Nie podoba mi się niebieski kolor w nagłówku” lub „Czy nie możemy użyć tej czcionki?” lub „Czy możesz zrobić to większe, odważniejsze, w kolorze czerwonym i migające?”
• Nie bądź perfekcjonistą. W większości przypadków, szybkie prototypowanie nie musi być w 100% doskonałe, wystarczy, że będzie wystarczająco dobre, aby wszyscy mogli się porozumieć.
• Nie prototypuj wszystkiego. Przez większość czasu nie powinieneś być zmuszony.

Dalsze zasoby

• Jeśli potrzebujesz zachęty, aby zacząć szkicować, wypróbuj książkę Dana Roama The Back of the Napkin.
• Dowiedz się więcej o prototypowaniu na papierze w książce Carolyn Snyder Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, technika eksploracji i udoskonalania koncepcji.
• Potrzebujesz treści o niskiej wierności? Wygeneruj tekst Lorem Ipsum dla swojego prototypu.
• Chcesz, aby Twój papierowy szkic wyglądał jak najbardziej realistycznie? Wypróbuj te szablony na strony WWW, iPada i iPhone’a.
• Narzędzia do szkicowania i prototypowania aplikacji na iPhone’a
• Łatwe szkicowanie i prototypowanie w Firefoksie dzięki dodatkowi Pencil.
• Darmowe drukowalne szablony PDF do szkicowania, tworzenia makiet i robienia notatek
• 50 darmowych zestawów do tworzenia makiet UI i Web Design, zasobów i plików źródłowych

(al)

.