Wszystko, co kiedykolwiek chciałeś wiedzieć o prototypowaniu (ale bałeś się zapytać)

Prototypy to moje ramy do nauki nowych narzędzi, platform i technik. Prototyp jest twardym dowodem na to, że pomysł zadziała lub nie. Ma kluczowe znaczenie dla całego mojego procesu twórczego i jest medium, którego używam do nawiązywania relacji z ludźmi i firmami, z którymi współpracuję.

Jestem entuzjastycznie nastawiony do prototypów, ponieważ myślę, że mogą zdziałać cuda , ale myślę też, że nie rozumieją, że są należne. Prototypowanie zwykle nie jest w ogóle włączone do harmonogramu projektu lub, jeśli tak jest, zwykle jako styczna część wyników dla większego projektu. Może być więcej, jeśli chcesz!

Chcę Cię przekonać do głębszego wbudowania prototypowania w swój przepływ pracy. Ten sposób podejścia do projektów może zmienić sposób, w jaki współpracujesz, uczysz się i rozwijasz jako osoba kreatywna. Oto umowa: spróbuję uzyskać dobrą definicję na papierze, a następnie zagłębię się w to, jak sprawić, by prototypowanie było równie ważne dla twojej praktyki, jak dla mojej . Aby osłodzić garnek, przedstawię kilka prototypów, które stworzyłem do gry, którą stworzyłem, Melody Jams, która została zaprezentowana przez Apple w 130 krajach i była przez krótki czas numerem jeden wśród aplikacji dla dzieci w sklepie.

Co to jest prototyp?

Klasyczna definicja prototypu jest taka, że ​​jest to demonstracja pełnowymiarowej rzeczy, którą chcesz wykonać. Prototyp może być częściowo zbudowany lub zaprojektowany w celu zaprezentowania określonej funkcji większego systemu. To całkiem dobra definicja, ale lubię myśleć o prototypach jako o czymś jeszcze szerszym. Moja definicja prototypu? To namacalny artefakt, który bada pomysł .

To może być tak proste, jak niektóre szkice narysowane na papierze. Może jest czysto zaprojektowany, jak animowany przewodnik pokazujący, jak działa interfejs w programie After Effects. Może to szorstkie demo rzucone na Codepen. Albo może to być coś o wiele wyższej wierności. Gdy ktoś widzi prototyp, w jego odpowiedzi nie powinno być żadnych dwuznaczności. Innymi słowy, gdyby osoba zapytała: „A co, jeśli aplikacja była niebieska?”, to nie jest prototyp. Jeśli pokażesz, jak wyglądałaby aplikacja, gdyby była niebieska, to jest.

Istnieją również różne rodzaje prototypów, każdy o innym przeznaczeniu: wewnętrznym, zewnętrznym i publicznym .

Prototyp wewnętrzny

Wewnętrzny prototyp niekoniecznie przekazuje natychmiastową wartość nikomu spoza mnie lub mojego zespołu. Może być tak szorstki i szybki, jak tylko chcę. W świecie stron internetowych mógłbym zbudować prosty komponent za pomocą waniliowego CSS, HTML i JavaScript, React, Angular lub Vue, aby zrozumieć, jak to działa i rozważyć wady i zalety. Tego typu prototypy pojawiają się zwykle na bardzo wczesnym etapie mojego procesu — właściwie już od pierwszego dnia projektu. Mając te prototypy nie muszę się obawiać, że ktoś tego „nie zrozumie” lub że przyniesie więcej szkody niż pożytku. Mogę zdecydować się na pokazanie wewnętrznych prototypów klientowi lub interesariuszowi, aby wedle własnego uznania wzmocnić wartość procesu prototypowania, ale nie o to jeszcze chodzi — w tej chwili chcę szybko, szybko i szybko pokazywać pomysły.

Prototyp zewnętrzny

Zewnętrzny prototyp przedstawia kierunek, w którym próbujesz iść, pokazać postęp lub zademonstrować, jak coś działa. Kiedy klient potrzebuje narzędzia administracyjnego, mogę otworzyć szybki blog w Craft, WordPress i Contentful (tak, wszystkie trzy!), aby pokazać im, jak działa każde narzędzie, aby mogli podjąć bardziej świadomą decyzję o tym, co jest najlepsze dla nich. Te prototypy świetnie sprawdzają się w środkowej i późniejszej fazie projektu. Przypominam sobie jeden projekt, w którym klient rozważał wprowadzenie nowego API dostawcy usług. Łączenie prototypu pokazało klientowi, co może zrobić dostawca, jak szybko możemy go zintegrować i jaki będzie wpływ na resztę projektu.

Prototyp publiczny

Publiczny prototyp jest dostępny w szerszym świecie. Zasadniczo chodzi o wysłanie rzeczywistego procesu projektowania na wolność, uczenie się, co robią użytkownicy i iterację stamtąd. Może to być pełnoprawny produkt pilotażowy lub coś dostępnego dla małego podzbioru użytkowników. Jest to najbardziej dopracowany typ prototypu i najbardziej zbliża się do tej tradycyjnej definicji, o której wspomniałem wcześniej. Zwykle pasuje do większego projektu w ramach pewnego rodzaju fazy testowania.

Czy szybkie prototypy są dobrymi prototypami?

Krótka odpowiedź brzmi: tak. Prototypuj szybko i jak najszybciej w projekcie. Aby wyjaśnić, dlaczego, spróbujmy wykonać ćwiczenie.

Wyobraź sobie, jak wygląda krzesło. Masz na to dobry pomysł? Czy to było to krzesło?

Prawdopodobnie nie, prawda? Być może myślałeś o krześle zewnętrznym, fotelu, krześle biurowym lub stołku. Być może nawet nie myślałeś o fotorealistycznym krześle! Teraz, gdy masz zdjęcie tego krzesła, nie ma dwuznaczności. To krzesło, o którym mówię, i odtąd wszyscy o tym wiemy. Mamy teraz wspólny układ odniesienia.

Kiedy Twój klient mówi: „Potrzebuję, aby moja strona internetowa była nowoczesna”, skąd wiesz, co to oznacza? Bez namacalnego artefaktu, takiego jak moodboard, każdy będzie miał w głowie inną definicję „nowoczesności”, tak jak w przypadku krzesła powyżej. Problem nie dotyczy projektowania. Chodzi o sposób działania przepływu logowania lub wybór między środowiskami hostingowymi. Szybkie robienie rzeczy wymusza rozmowy i reakcje. Wszystkie mgliste rzeczy rozwiązują się szybciej.

Co ważne, prototyp nie musi rozwiązywać problemu, którego oczekujesz od niego . Zwykłe tworzenie i udostępnianie czasami odblokowuje pomysły, inspiracje, wyzwania lub obawy, o których ludzie nie byli świadomi. Im szybciej i częściej tworzysz prototypy, tym wcześniej wszystkie te dobre rzeczy wyjdą na powierzchnię.

To jest klucz. Prototypowanie odblokowuje możliwość eksperymentowania, ponoszenia porażek, uczenia się i rozwoju w piaskownicy. Jednocześnie doskonalisz siebie i produkt, nad którym pracujesz.

Kto powinien prototypować?

Każdy! Prototypowanie to okazja do przełamania murów między dyscyplinami. Projektanci powinni prototypować, aby mogli poznać ograniczenia, złożoność i możliwości projektu. Koderzy mogą oczywiście tworzyć prototypy, aby przetestować wykonalność, ale także aby bardziej zaangażować się w proces twórczy. Kierownicy projektów, producenci, copywriterzy, każdy, kto ma pomysł, może się zaangażować.

Ponownie, prototypowanie niekoniecznie polega na kodowaniu czegoś szalonego — a nawet kodowaniu w ogóle! Chodzi o generowanie i testowanie pomysłów za pomocą prawdziwych rzeczy do zabawy i odkrywania.

Ponieważ prototypowanie może być tak proste lub tak złożone, jak chcesz, zyskasz mnóstwo korzyści z przyjęcia go jako części swojej praktyki. Przyjrzyjmy się niektórym korzyściom.

Drapie kreatywne swędzenie

Czasami chcesz po prostu spróbować zbudować coś, czego nigdy wcześniej nie widziałeś, lub naśladować coś, co uważasz za fajne. Może to być zwariowany pomysł lub kolejny trend w interfejsie użytkownika — kto wie? Przynajmniej odkrywanie, jak działają rzeczy, jest jedną z najbardziej satysfakcjonujących części bycia projektantem, a prototypowanie zapewnia żyzny grunt.

Dodaje miejsce na odwagę i radykalne pomysły

Trudno jednocześnie próbować wysyłać coś, co użytkownicy zrozumieją i będą pomysłowi. Nawet jeśli zaczynasz projekt od „tygodnia prototypowania”, to jest to tydzień, w którym możliwości są nieograniczone.

Rośnie specjalistyczna wiedza merytoryczna

Każdy sklep deweloperski, który znam, wydaje się mieć głęboką wiedzę na temat jednej platformy i potajemnie pragnie pracować poza nią (jestem pewien, że tak samo jest w przypadku projektantów). Budujesz wszystko w PHP i chcesz dostać się do Railsów? Zbuduj kilka prototypów na początku projektu, nawet jeśli nie są one związane z celem biznesowym.

Zmniejsza ryzyko

Robienie czegoś, czego nigdy wcześniej nie robiłeś, jest przerażające. Zorientowanie się w tym z grubsza i szybko usuwa bariery psychologiczne. Nagle niemożliwe zajmuje tylko dzień lub dwa.

Tworzy katalog pomysłów

W miarę powiększania się biblioteki prototypów z projektu na projekt, pomysły są ponownie analizowane. Czasami śmieci z jednego projektu stają się skarbem dla następnego.

Wzmacnia wszystkich

Kiedy dopiero zaczynasz się zastanawiać, tytuły, lata doświadczenia i umiejętności nie powinny mieć znaczenia. Dobre pomysły mogą pochodzić od każdego, ale trudno to zrobić, gdy starszy kreatywny taki a taki przychodzi z wysoka, by kierować myśleniem. Zaczynając od czystego procesu tworzenia, tytuły roztapiają się i wydobywają dobre pomysły od dołu.

Dostosowuje Twój proces

Pracowałem z wieloma projektantami i agencjami i wydaje się, że są zachwyceni tym, jak szybko zaczynam pracę. Nie czekam na wypełnienie wymagań, zatwierdzenie kierunku artystycznego czy cokolwiek innego. Uderzając w ziemię, mogę znacznie szybciej posunąć projekt do przodu.

Jak zacząć

Niewłaściwym sposobem tworzenia prototypów jest martwienie się, że robisz prototyp w niewłaściwy sposób. Jak powiedział Bruce Lee: „Staraj się nie starać”. Mając to na uwadze, oto kilka wskazówek, które pomogą Ci wesprzeć szybką praktykę prototypowania.

Pisz oświadczenia o problemach

Biorąc pod uwagę rzecz, której próbujesz się nauczyć lub rozwiązać, podziel to na jednostki atomowe i traktuj każdą z nich jako odrębne prototypy. „Jak załadować mapę w iOS?” „Jak ustawić mapę w określonej lokalizacji?” „Jak narysować kształt na mapie?” „Jak umieścić pinezkę na mapie?” Cztery stwierdzenia, cztery prototypy, cztery rzeczy, których można się szybko nauczyć.

Zacznij od czegoś, co wiesz, jak to zrobić

Podobnie jak rozciąganie przed treningiem, nie możesz wejść w rytm, zaczynając od pełnej prędkości. Jeśli jesteś programistą, który tworzy prototyp strony internetowej, być może chcesz zacząć od zbudowania własnego szablonu: statycznego pliku HTML, konfiguracji Gulpa, tego typu rzeczy. To sprawi, że twoje kreatywne soki popłyną, tak że zanim znajdziesz się na niezbadanym terytorium, twoje mojo już działa.

Zbuduj brzydki

Użyj dla swoich czcionek Comics Sans MS i jasnej limonkowej zieleni. Nie nazywaj swoich warstw. Złam wszystkie zasady. Teraz nie czas na doskonałość pikseli; nadszedł czas, aby przelać pomysły na papier.

Zachowaj początkowe prototypy do maksymalnie 60 minut

Prototypowanie i złożoność to śmiertelni wrogowie. Kiedy robisz to dobrze, powinieneś być w stanie wyprodukować co najmniej cztery prototypy do końca pierwszego dnia w projekcie.

Ustalaj priorytety według uczucia, a nie pilności

Na co dziś masz ochotę? Nie ma nic wspólnego z projektem? Nie walcz z tym. Zrób to. Kto wie? Może ma jeszcze nieodkrytą wartość!

Widelec

Nigdy nie nadpisuj prototypu. Zamiast tego utwórz kopię i wykonaj iterację od tego miejsca. W ten sposób Twoje prototypy zawsze będą najprostsze, jakie mogą być, mogą być rozwidlone w różnych kierunkach i będą łatwe do nauczenia.

Nadmierne udostępnianie

Pokaż wszystkim, co robisz! Bądź z tego dumny! Pozytywna energia, którą zbudujesz wokół praktyki, zasili cały cykl życia projektu. Sam ten krok może radykalnie poprawić kulturę projektu.

Dokumentuj, co tworzysz i wyniki

Może to być tak proste, jak plik README w katalogu lub wiadomość na Slacku. Zawsze wracaj, aby uczyć się z tego, co zrobiłeś.

Zapisuj swoje obawy na bieżąco i przekształć je w sformułowania problemów

Więc właśnie wypchnąłeś swoją pierwszą witrynę do Heroku, ale martwisz się, jak skonfigurować certyfikat SSL? Żaden problem. Umieść go w kolejce do późniejszego prototypowania.

Jak zabudżetować to w swoim projekcie?

Oto rzecz: nie. To nie jest jakaś sprzedaż dodatkowa. Tak to robię. Ten artykuł ma w tytule słowo „proces” nie bez powodu: nie chodzi tylko o to, jak stworzyć prototyp. Jest to naczelna zasada tworzenia rzeczy.

Zacząłbyś prototypować w dniu rozpoczęcia projektu. Nie przestaniesz, dopóki nie zostanie nic do prototypowania. Prototyp to nie to samo, co główny kod lub pliki projektowe. Na początku Twoje prototypy powinny być zbyt surowe, aby były gotowe do produkcji. Później, jeśli wydaje się, że znalezienie sposobu na przejście ma sens, to w porządku. To decyzja projekt po projekcie. Prototypowanie jest zawsze czymś stałym. Kiedy jest skonfigurowany w ten sposób, nie ma czegoś takiego jak awaria prototypu lub pomyłka.

Kiedy rozmawiam z potencjalnym klientem, wyjaśniam mu, że ten proces ma tendencję do generowania dużo więcej wyników dużo szybciej niż oczekiwaliby od moich konkurentów (czytaj: Ty). Te dane wyjściowe mogą pomóc w zdefiniowaniu interfejsu API, udowodnieniu wykonalności technicznej lub sprawdzeniu przerażającego zadania. Szczególnie ważne jest to, jeśli chodzi o projektantów i wewnętrzne zespoły projektowe — uwielbiają pracować w ten sposób, ponieważ bardzo szybko jestem z nimi w chwastach, rozwiązując różne rzeczy. Wykonuję prace o wyższej jakości, bardziej niestandardowe, mniej podatne na błędy. Ponieważ wszyscy przyzwyczajają się do ciężkiej pracy, nie ma ryzyka, że ​​awaria prototypu zaalarmuje klienta — niektóre rzeczy, które nie działają, to tylko oczekiwana część procesu.

To również pozycjonuje mnie dobrze na dłuższą metę, ponieważ jestem w stanie bardzo szybko przyswajać nowe technologie. Moi klienci wiedzą, że mogą się ze mną skontaktować w sprawie instalacji, fizycznego projektu obliczeniowego, aplikacji lub strony internetowej o dowolnej skali, ponieważ wiedzą, że takie podejście gwarantuje pomyślne rezultaty.

Dla mnie nie chodzi o maksymalizację zysku. Chodzi o zarabianie na życie robiąc to, co chcę robić. Nigdy nie chciałem być dobry w witrynach ani aplikacjach — w rzeczywistości te rzeczy nie istniały, gdy zaczynałem! Postanowiłem uczyć się fajnych, interesujących rzeczy za pomocą kodu. Chcę, aby moja kariera była długa, satysfakcjonująca, ekscytująca i pełna nowych rzeczy do nauki. Proces oparty na prototypach jest do tego idealny.

Narzędzia

W dzisiejszych czasach wydaje się, że nie można wypowiedzieć słowa „prototyp” bez myślenia o InVision — to jak Kleenex prototypowania. Jeśli nie korzystałeś wcześniej z InVision, jest to świetne narzędzie dla projektantów do tworzenia przeklikiwania projektów bez konieczności posiadania kodera. To prawdziwa okazja: szybka, intuicyjna i łatwa do odebrania.

Wraz z rosnącą popularnością Sketch, pojawia się mnóstwo wtyczek, aby ułatwić korzystanie z prototypów. Framer to fantastyczny przykład; importuje pliki Sketch, a przy odrobinie wiedzy na temat kodowania możesz tworzyć niestandardowe prezentacje, takie jak animacje stukania. InVision ma również wtyczkę Sketch. Inne, w tym Marvel i Craft, są warte poznania. Jest mnóstwo narzędzi do wypróbowania.

Nie musisz być koderem ani nawet używać oprogramowania do prototypowania. Prototypowanie papieru to świetny sposób na eksperymentowanie z projektowaniem interfejsu użytkownika bez konieczności korzystania z komputera. Możesz również tablicę. Te techniki sprawdzają się nawet przy projektowaniu gier.

Nie wiesz od czego zacząć? Rozważ sprint prototypowania przy użyciu każdego z tych narzędzi!

W świecie tworzenia stron internetowych i oprogramowania uwielbiam tworzyć repozytorium GitHub specjalnie dla prototypów. Dołączyłem plik README, który opisuje niektóre zasady, na których mi zależy podczas tworzenia prototypów, których możesz użyć lub rozwidlić, aby oddać strzał.

Studium przypadku: Melody Jams

Mniej więcej rok temu z kilkoma przyjaciółmi stworzyłem i uruchomiłem grę na iOS dla dzieci o nazwie Melody Jams (i napisałem o tym artykuł dla Smashing Magazine!). Ta gra została zakodowana jako zupa na orzechy w około trzy miesiące. Pojawiły się pewne wyzwania: projektant nigdy wcześniej nie tworzył aplikacji, mieszkał 3000 mil ode mnie i nigdy się nie spotkaliśmy. Poza tym od roku nie kodowałem aplikacji na iOS, więc moje kotlety znacznie się zanikły.

Gra polega na przeciąganiu potworów z dołu ekranu do wyznaczonych hotspotów na scenie. Z tego jednego projektu przeszło mi przez głowę wiele stwierdzeń problemowych:

• Jak stworzyć aplikację na iOS?
• Jak stworzyć grę na iOS?
• Jak stworzyć coś w grze?
• Jak mogę dotknąć tej rzeczy?
• Jak to przeciągnąć?
• Jak mogę mieć wiele rzeczy, które można przeciągać?
• Jak rozpoznać, że jedna rzecz jest blisko innej?

I tak dalej. Każdy z nich stał się indywidualnym prototypem na zamówienie — aplikacją na iOS dla każdego — dopóki wszystkie nie zostały rozwiązane. Każdy z nich rozwiązał problem, a niektóre wywołały nowe problemy — na przykład jak animować rzecz, gdy skończę ją przeciągać?

Odtworzyłem te prototypy w Swift 3, abyś mógł zobaczyć, jak mogłoby wyglądać repozytorium prototypów, gdyby zostało zbudowane dzisiaj. Jedną z rzeczy, które zauważysz, jest to, że dokumentacja na ten temat jest dość lekka — plik README i zrzut ekranu lub GIF w każdym katalogu, ale nie ma tony szczegółowej dokumentacji. Jeśli wydrukowanie naszych komentarzy pomoże, zrób to. Dla mnie chodzi o zobaczenie postępu. Nie ma tu teorii, nie ma wpisu na blogu ani samouczka. Prototyp 3 wypływa z prototypu 2, który wypływa z prototypu 1. Mając wystarczająco dużo praktyki, możesz szybko wychwycić niuanse języka programowania, nawet jeśli nigdy wcześniej go nie widziałeś.

Śledziliśmy ten przepływ przez pierwsze kilka tygodni projektu, w dużej mierze rozwijając prototypy bez pracy nad podstawową aplikacją. Pod koniec projektu mieliśmy ponad 50 różnych prototypów, które testowały różne rodzaje animacji, schematy ładowania, buforowanie, testy dźwięku i mechanikę interfejsu użytkownika.

W tym czasie projektant prototypował logo, testy ruchu, ikony aplikacji i tak dalej. Realizator dźwięku podał przykłady piosenek, o których myślał. I wszyscy kochali to, co robiliśmy przez cały czas, kiedy to robiliśmy.

Wniosek

Idąc zgodnie z moją szeroką definicją, prawdopodobnie już wykonujesz prototypy, nawet nie myśląc o tym jako takim. Być może następnym krokiem dla ciebie jest częstsze dzielenie się z kolegami lub zapewnienie, że prototypowanie będzie sposobem na rozpoczęcie następnego projektu.

Głęboka integracja prototypowania z procesem twórczym może być przełomowa . Może stworzyć bardziej pozytywną, wzbogacającą kulturę zespołową. Może to być mechanizm dla programistów do nauki nowych języków lub dla projektantów do nauki nowych narzędzi. Projekty są wykonywane szybciej, w wyższej jakości i są bardziej zabawne. Twoi klienci będą mieli większy wgląd w proces i będą przygotowani do oglądania rzeczy z mniejszą wiernością, co sprawia, że ​​dzielenie się z nimi rzeczami jest częstsze i mniej bolesne. Będziesz także wyglądał, jakbyś pracował dużo szybciej niż konkurenci i że możesz pracować nad większą różnorodnością projektów.

Przy tych wszystkich zaletach, czego nie lubić? Więc powiedz mi, czy jesteś przekonany? Natchniony? Jak wygląda Twój następny krok?