Jak rozpocząć tworzenie prototypów strony internetowej nowej generacji
Ostatnio coraz bardziej jestem sfrustrowany obecnym zestawem narzędzi i przyjętymi praktykami tworzenia elementów interfejsu użytkownika i UX.
Z mojego doświadczenia wynika, że budowanie statycznych makiet w Photoshopie i programie Illustrator nie oddaje już istoty obecnego projektu interfejsu użytkownika. Podobnie, tworzenie wireframe i dokumentacji UX w takich narzędziach, jak Axure wydaje się bardzo mało informować o tym, w jaki sposób strona lub aplikacja rzeczywiście jest w użyciu.
Narzędzia te mają charakter redukcyjny, ograniczając projekt do serii statycznych "stanów", a nie komunikując bogate, dynamiczne, wciągające doświadczenie, które mamy nadzieję zbudować.
Na przykład rozważ kliknięcie elementu w widoku listy, aby wyświetlić ekran z informacjami. W jaki sposób jest usuwany element listy? Jak buduje się nowy ekran? Co się stanie, gdy kliknę, aby powrócić do widoku listy? W jaki sposób dodawane są nowe elementy do widoku listy?
Niezależnie od tego, ile tworzysz "migawek stanu ekranu", istotną cechą nowoczesnego projektowania ekranów jest to, w jaki sposób elementy interfejsu użytkownika przechodzą z jednego stanu do drugiego oraz w jaki sposób nowe elementy ekranu są włączane / wyłączane na ekranie.
Animacje i przejścia wydają mi się tam, gdzie leży istota projektowania interfejsu użytkownika, gdy przechodzimy do bardziej przestrzennych wzorców projektowych.
To jest przestrzeń, a nie strona
Częściowo dlatego, że media interaktywne stają się wszechobecne, nie musimy już odwoływać się do papierowych metafor wizualnych, takich jak "strona", aby nasze interfejsy były łatwe w użyciu. Teraz bardziej przydatne są przestrzenne metafory nawigacji treści na ekranie oraz przejścia opisane w języku animacji.
Pasquale d'Silva nazywa ten obszar projektowania interfejsu użytkownika Przejściowe interfejsy, i myślę, że zidentyfikował kluczowy obszar badań dla nowoczesnego projektowania stron internetowych i aplikacji.
Jednak większość obecnych zestawów narzędzi interaktywnych projektantów jest niewystarczająca do eksploracji, projektowania i budowy tych interfejsów.
Oprogramowanie do animacji może być wykorzystywane do tworzenia makiet i prototypów interakcji. After Effects, Adobe Edge Animate, a nawet Flash, można wykorzystać do zademonstrowania efektów przejścia, które mogą być wyświetlane jako animowane gify, filmy lub pliki Flash. Jednak ich zbudowanie może być czasochłonne i chociaż mogą być one dobre w pokazywaniu konkretnego efektu przejścia interfejsu, modyfikowanie parametrów może być również bardzo pracochłonnym ćwiczeniem. Oczywiście po zbudowaniu interaktywnej demonstracji interfejsu użytkownika musisz przetłumaczyć wszystkie przejścia i interfejsy na działający kod aplikacji lub witryny.
Narzędzia do kompozycji wizualnych
Nic dziwnego, że wiele narzędzi, do których kierują się interaktywni projektanci, to wizualne narzędzia do komponowania multimediów, używane przez programistów VJ i programów do efektów wideo.
Najbardziej znanym z nich jest własne narzędzie do programowania wizualnego firmy Apple, Quartz Composer, które - jeśli masz komputer Mac - możesz już mieć na swoim komputerze, zakładając, że masz zainstalowany Xcode. (Znajdziesz go w folderze Developer> Applications lub można go pobrać jako część Xcode).
Quartz Composer został wprowadzony w centrum uwagi jako interaktywne narzędzie do prototypowania dzięki artykułowi Go Big by Going Home, gdzie Julie Zhuo, projektantka na Facebooku, ujawniła, że zespół projektowy nowego portalu Facebook Home użył intensywnie QC do testowania i demonstrowania interfejsu użytkownika Home:
"Coś takiego jak Facebook Home jest całkowicie poza możliwościami Photoshopa jako narzędzia do projektowania. Jak możemy porozmawiać o opartych na fizyce interfejsach użytkownika i panelach oraz baniek, które mogą być rzucane na ekran, jeśli siedzimy i patrzymy na statyczne kpiny?
"Kiedy zobaczysz na żywo, wypolerowane, interaktywne demo, możesz od razu zrozumieć, jak coś ma działać i jak się czuć, w taki sposób, że słowa lub długie opisy lub szkielety nigdy nie będą w stanie osiągnąć. A to prowadzi do lepszych informacji zwrotnych i lepszych powtórzeń, a ostatecznie lepszego produktu końcowego ".
Na koniec Forum QC w oddziale, projektanci zaczęli odtwarzać pracę zespołu Facebooka.
Facebook kontynuował wydawanie Origami na Facebooku, zestaw narzędzi do Quartz Composer specjalnie przeznaczony dla interaktywnych projektantów.
Nauka Quartz Composer może zająć trochę czasu, ale jego podejście oparte na węzłach (gdzie przewody łączą wejścia do węzłów przetwarzania (łaty), a następnie do wyjścia) jest logiczne. Wizualna reprezentacja procesu obliczeniowego może sprawić, że będzie on bardziej zrozumiały dla projektantów i łatwo będzie manipulować parametrami i zmieniać okablowanie kompozycji.
Z Origami tworzenie interaktywnych makiet na telefony komórkowe i przeglądarki jest dość proste. Oferuje on gotowe do użycia elementy interfejsu, które zwiększają funkcjonalność i interaktywność aplikacji, takie jak przyciski, przejścia, warstwy tekstowe itd. Łatwo jest dostosować parametry np. Przejścia, aby eksperymentować z różnymi efektami.
Inne narzędzia do programowania wizualnego oparte na węzłach również znajdują uznanie u interaktywnych projektantów, w tym Max przez Kolarstwo 74 i otwarte źródło Vvvv.
Kolejnym nowym narzędziem, które wygląda interesująco, jest Vuo, aktualnie w wersji beta.
Makieta i prototypowanie następnej generacji
Wydawane są nowe narzędzia, które mają na celu umożliwienie interaktywnym projektantom prototypowanie aplikacji i stron internetowych.
Jednym z najlepszych z nich jest Majtki. Briefs to narzędzie przeznaczone wyłącznie dla komputerów Mac, które jest bardzo zorientowane na tworzenie aplikacji na iPhone'a i iPada, choć możliwe jest również kpiny z aplikacji na komputery. Oprócz głównej aplikacji Briefs na komputery Mac, dostępna jest również aplikacja Briefscase na iOS, która umożliwia publikowanie projektu Briefs na iPadzie lub iPhonie w celu demo i udostępnienia swoich makiet na prawdziwym urządzeniu.
Praca z briefami jest bardzo logiczna. Możesz importować obrazy ekranowe i dodawać do nich prostą interaktywność lub bogatsze wrażenia interaktywne, budować układy ekranu z biblioteki standardowych elementów interfejsu użytkownika, takich jak paski kart, pola wyszukiwania, elementy listy itp. Istnieją biblioteki dla iOS, Androida , Desktop i agnostyczny styl "Blueprint". Następnie zastosuj interaktywność do elementów, które chcesz demonstrować, na przykład, aby pokazać, jak wyświetlane są wyniki wyszukiwania lub jak przejście działa z jednego ekranu na drugi.
Pod wieloma względami wygląda to tak, jak praca z aplikacją do prezentacji, np. Keynote, ale zamiast liniowej osi czasu można tworzyć złożone rozgałęzienia, które stają się przydatne, gdy zdolność wyświetlania ekranów jako węzłów połączonych przez ich interakcje staje się użyteczna.
Najlepszym aspektem Briefs jest to, że nie jest to tylko narzędzie do funkcji demonstracyjnej, jest to naprawdę świetne narzędzie do projektowania, które pomaga budować dobre interfejsy użytkownika w ciasnej przestrzeni ekranu telefonu lub tabletu.
199 dolarów za główne oprogramowanie Briefs, nie jest to tani produkt, ale bardzo dobrze zaprojektowany i robi to, co ma bardzo dobrze. (Ograniczone wersje demonstracyjne są dostępne do oceny).
W przypadku rozwiązania typu open source sprawdź Framer.js, Interaktywna struktura prototypowania do szybkiego budowania makiet interfejsu użytkownika. Jest tam również produkt Framer Studio, zbudowany na framer.js, w celu zapewnienia gotowego narzędzia do prototypowania.
W Framer Studio wszystkie elementy ekranu muszą być najpierw utworzone w Photoshopie jako grupy warstw, zanim zostaną zaimportowane do Framer, aby dodać przejścia i funkcjonalność. Framer używa Coffeescript, "małego języka, który kompiluje się w JavaScript", aby kod wyglądał na czysty i prosty. Jednak budowany kod nie ma prawdziwej wartości poza narzędziem do prototypowania.
Jeśli jesteś ekspertem w korzystaniu z Photoshopa w swoich makietach na stronach internetowych lub aplikacjach, Framer Studio to świetny sposób na łatwe dodawanie interaktywności do projektów ekranów, aby stworzyć demo.
Przyszłe narzędzia do projektowania i rozwoju
Jak wspomniano powyżej, wszystkie dotychczasowe narzędzia mogą pomóc w wizualizacji i prezentacji interfejsu użytkownika aplikacji lub strony, którą budujesz, ale nadal masz do czynienia z zadaniem wdrożenia projektu.
Być może jest to jeszcze większy problem podczas korzystania z tych narzędzi niż tworzenie statycznych makiet i makiet: teraz nie tylko musisz odtworzyć układ, ale musisz również wdrożyć tę samą funkcjonalność i przejścia.
Jest taki argument projektowanie w przeglądarce to najlepszy sposób, aby upewnić się, że twoje kompy nie piszą sprawdzeń, których twoje umiejętności z kodem nie są w stanie zarobić.
Istnieją jednak aplikacje, które pomagają wypełnić lukę między wizualizacją a gotowym kodem.
Studio RealTime przez Outracks, jest dobrze zaimplementowanym IDE do wizualizacji, prawie mieszaniną narzędzi opartych na węzłach, takich jak Quartz Composer, oraz narzędziem opartym na osi czasu, takim jak Edge Animate.
Ponieważ w RealTime Studio widać zarówno kod i jego wizualną reprezentację, zarówno projektanci, jak i programiści mogą go używać i rozumieć. Outracks używa własnego języka o nazwie Uno, który jest bardzo podobny do języka Java lub Actionscript. Co najważniejsze, ponieważ kod można wyeksportować na wiele różnych platform docelowych, jest to praktyczne narzędzie programistyczne, a nie tylko aplikacja do wizualizacji.
Przy tak wielu wydarzeniach nie jest zaskoczeniem, że ekran jest raczej zagracony. Istnieje widok węzła, widok osi czasu i widok kodu, a także okno podglądu. Pewne ulepszenia interfejsu użytkownika byłyby mile widziane, aby ułatwić minimalizowanie widoków, których nie potrzebujesz, w celu rozszerzenia tych, w których pracujesz. Przeglądarka węzła jest szczególnie słaba w porównaniu z czymś takim, jak Quartz Composer. Jednak jestem naprawdę podekscytowany tym produktem. Obecnie w wersji beta jest to tylko komputer, a na stronie Outracks dostępna jest wersja demo.
Kolejny ekscytujący nowy produkt NoFlo, oparte na przepływie narzędzie do programowania Javascript. Opracowany w wyniku udanej kampanii Kickstarter (ujawnienie: byłem zwolennikiem), podkreśla zarówno niezadowolenie z obecnie dostępnych narzędzi, jak i niewykorzystany potencjał dla narzędzi programistycznych opartych na przepływach, które mogą być łatwiej zrozumiane przez nieprogramistów . NoFlo opiera się na Node.js, aby dostarczać funkcjonalne aplikacje do przeglądarki. Natywne wyjście na Androida i iOS jest w toku.
Silnik NoFlo jest open source i można go pobrać za darmo. Istnieje również wersja hostowana pod adresem Flowhub.io. Flowhub można uruchomić w przeglądarce lub jako aplikację Chrome.
Jednak Flowhub tak naprawdę nie spełnia obietnicy, ale jako intuicyjne środowisko programistyczne, wydaje się raczej powolny, niestabilny i trudny w użyciu. Węzły, które tworzysz na wykresie źródłowym, reprezentują funkcje (lub metody używania właściwej terminologii), których aktualny kod JavaScript znajduje się gdzie indziej.
W tej chwili korzystanie z Flowhub jest przeszkodą, a nie pomocą. Podejrzewam, że większość programistów wolałaby używać kodu crank niż używać Flowhub. Są to jednak wczesne dni,
W związku z tym Flowhub i NoFlo dają potężny wgląd w to, gdzie programowanie oparte na przepływach może zająć zarówno wizualizację, jak i rozwój, i mam nadzieję, że rozwinie się w intuicyjne narzędzie do szybkiego tworzenia aplikacji, które ma stać się.
Uważam, że przyszłość projektowania interakcji leży w narzędziach opartych na przepływach.