Wyrafinowane prototypy – dlaczego warto korzystać z Axure

„Projekt to nie tylko to, jak wygląda i jak się czuje. Design to sposób, w jaki to działa”. – Steve Jobs

Prototypy okazały się nieocenione w podejmowaniu lepszych decyzji projektowych. Jako artefakty, prototypy są jednym z podstawowych produktów w projektowaniu i prototypowaniu UX, a jako działanie są sercem procesu projektowania skoncentrowanego na użytkowniku. Prototyp to połączenie wszystkich wcześniejszych prac projektowych UX w jeden, wizualny, działający produkt, który służy do weryfikacji hipotez i projektów testowych.

Brzmi dość łatwo, ale w świecie przesyconym mnóstwem narzędzi projektowych wybór odpowiedniego narzędzia do prototypowania to nie lada zadanie, które wymaga starannego rozważenia. Projektanci muszą wziąć pod uwagę koszty, funkcje, integrację z innymi narzędziami projektowymi, krzywą uczenia się, funkcje współpracy oraz platformę odtwarzania do przeglądania i testowania użytkowników.

Aby skomplikować sprawy, ostatnio na scenę wkroczyło wielu przybyszów. Istnieją narzędzia tylko online, na przykład Figma, InVision, UXPin, Framer, Marvel, Principle, Origami, a niektóre to tradycyjne oprogramowanie komputerowe, takie jak Sketch i Adobe XD, z wbudowanym prototypowaniem jako rozszerzeniem ich funkcjonalności. Wszystkie mają swoje zalety i wady, funkcje i integracje.

Ale nowe nie zawsze jest lepsze. Na polu bitwy wciąż są stare konie bojowe: jednym z nich jest Axure . Gdy projektanci chcą dostarczać bogate w funkcje, szczegółowe prototypy, Axure zasługuje na inny wygląd. Axure istnieje już od jakiegoś czasu, lata przed narodzinami nowo wybitych narzędzi, o których mowa powyżej, a wielu projektantów uważa go za dziadka narzędzi do tworzenia szkieletów i prototypowania, obdarzonych głębokimi możliwościami.

Dlaczego warto korzystać z Axure?

Obecnie projektanci w większości używają narzędzi do prototypowania opartych na hotspotach, za pomocą których łączą ekrany i być może dodają kilka przejść między ekranami. Problem polega na tym, że ta metoda nie obejmuje małych interakcji, które uzupełniają ogólne wrażenia użytkownika podczas testowania. W przeciwieństwie do tego, Axure z łatwością radzi sobie z subtelnymi szczegółami i mikrointerakcjami, które ożywiają prototyp.

Aby głębiej zbadać, w jaki sposób ludzie będą wchodzić w interakcje z określonym projektem, projektanci mogą budować prototypy z logiką warunków, różnymi danymi wejściowymi użytkownika i dynamicznymi animacjami, które sprawiają, że prototyp wygląda bardziej realistycznie. To doskonały sposób na uzyskanie cennych informacji na temat tego, co działa, a co nie.

Konieczność przeskakiwania zbyt wielu niezintegrowanych aplikacji projektowych również stanowi problem z nieefektywnością. Typowy przepływ pracy projektowej obejmuje projektanta tworzącego interfejsy użytkownika w programie Sketch i tworzącego prototypy w innym narzędziu, takim jak InVision lub Marvel. Następnie projekt jest przekazywany programistom za pomocą jeszcze jednego narzędzia, takiego jak Zeplin.

Axure to w pełni zintegrowana aplikacja, która eliminuje potrzebę korzystania z różnych narzędzi projektowych. Na przykład po utworzeniu przepływów użytkowników, map podróży klienta, person, scenorysów, map witryn, architektury informacji i makiety projektanci mogą z łatwością przejść do złożonych prototypów — bezpośrednio w Axure. Kiedy projektanci przekazują projekty programistom, mogą lepiej zrozumieć, jak coś powinno zostać zaimplementowane, i mogą efektywniej współpracować z menedżerami produktu, aby oszacować zakres i ocenić techniczną wykonalność.

Największą przeszkodą w dostarczaniu dobrze zaprojektowanych produktów i usług jest brak zrozumienia naszych użytkowników. Jared Spool, UIE (inżynieria interfejsu użytkownika)

Podobnie jak w przypadku innych narzędzi do projektowania, Axure można szybko odebrać i szybko uruchomić. Wbudowane widżety, za pomocą których można budować dynamiczne interakcje, które mogą zrozumieć nawet osoby nie będące programistami, można od razu wykorzystać do imponujących interakcji. Projektanci, którzy chcą zagłębić się i poświęcić czas na naukę aplikacji, mogą tworzyć złożone, realistyczne witryny i aplikacje ze skomplikowanymi interakcjami.

Przykłady rzeczywistych prototypów Axure

Projektanci zawsze mają mało czasu i muszą zademonstrować, jak poszczególne przepływy użytkowników będą działać w recenzjach i na wczesnym etapie testować projekty produktów z użytkownikami. Podstawowe możliwości Axure mogą zabłysnąć w tych scenariuszach, ponieważ projektanci mogą szybko przekształcić obrazy z innych narzędzi projektowych w interaktywne prototypy.

W poniższym przykładzie produktu B2B seria ekranów została wyeksportowana z OmniGraffle jako pliki PNG. Obrazy zostały przycięte, zamaskowane i nałożone na warstwy w Axure. Następnie dodano hotspoty i interaktywne komponenty z biblioteki widżetów Axure, takie jak rozwijane menu i pola formularzy, aby stworzyć bogaty, funkcjonalny prototyp. Cechy i funkcjonalności produktu zostały następnie przetestowane za pomocą zdalnych, moderowanych testów użytkowników, które doprowadziły do ​​szybkich iteracji projektowych w oparciu o opinie użytkowników.

W innym przykładzie zespoły projektowe i inżynierskie były w stanie wypracować najlepszy sposób zaprojektowania dwóch szczególnie skomplikowanych widżetów dla złożonego produktu B2B. Celem było zaprojektowanie zaawansowanych filtrów i niestandardowego selektora kolumn dla tabeli z dużą ilością danych, która poprawiłaby użyteczność i byłaby technicznie wykonalna.

W tym scenariuszu obrazy różnych stanów zostały wyeksportowane ze Sketch, a szybkie interakcje zostały dodane i animowane w Axure. Dodano komponenty interfejsu użytkownika, takie jak przyciski i pola wyboru, aby zademonstrować interakcje i ich efekty. Zespoły przeszły kilka iteracji, które zostały sprawdzone i przetestowane. W przypadku innych narzędzi do prototypowania to przedsięwzięcie mogło trwać znacznie dłużej.

Funkcje i zalety Axure

Niedawno pracowałem w firmie, która używała tylko podstawowych prototypów ekran-ekran stworzonych w InVision i nigdy nie przeprowadzała wielu testów z użytkownikami. Aby przetestować nadchodzącą ważną funkcję produktu, otrzymałem zadanie stworzenia szczegółowego prototypu produktu. Wiele wiązało się z tą nową funkcją, a interesariusze chcieli zrobić to dobrze.

Niecałe dwa dni zajęło mi stworzenie szczegółowego prototypu w Axure z różnymi stanami i wieloma mikrointerakcjami, które pokazały, jak produkt będzie się zachowywał w różnych scenariuszach. Nieoczekiwaną korzyścią było pojawienie się wielu skrajnych przypadków, które zespół projektowy był w stanie rozwiązać.

Podczas testów mogliśmy zobaczyć , gdzie użytkownicy zmagają się z projektem i dlaczego , co nie byłoby możliwe w przypadku mniej szczegółowego prototypu zbudowanego ze statycznych ekranów. W rezultacie byliśmy w stanie szybko rozwiązać wykryte problemy.

Przekazałem również prototyp programistom, aby pokazać im, gdzie znajdują się responsywne punkty przerwania projektu, jak powinny wyglądać stany skupienia lub błędu i jak ma działać wyszukiwanie predykcyjne.

Kiedy deweloperzy front-endu zdołali zdobyć prototyp, znacznie ułatwiło to również ich życie. Nawet programiści back-end docenili prototyp, ponieważ mogli zobaczyć, jak ma działać produkt końcowy.

Ten rodzaj szybkiego prototypowania, testowania i wdrażania nowej funkcji produktu był znacznie szybszy niż jakikolwiek inny rozwój funkcji, w który angażowali się wcześniej, a w fazie kontroli jakości pojawiało się mniej problemów.

Kiedy wszystko zostało powiedziane i zrobione, wszyscy w zespole wspomnieli, jak pomocny był szczegółowy prototyp i poprosili o częstsze wykonywanie tego rodzaju procesu prototypowania. Wniosek jest taki, że tworzenie, przeglądanie i testowanie szczegółowego prototypu może mieć ogromne znaczenie. Cały zespół mógł zobaczyć niezbędne, kompleksowe interakcje, które były znaczące dla użytkowników.

Axure pozwala nam przetestować wszystko, nawet najbardziej skomplikowane przypadki użycia. Nasze prototypy wyglądają i zachowują się jak prawdziwe. Julie, Laboratorium Doświadczeń Użytkownika

Cechy i mocne strony Axure

Projektanci nie muszą umieć kodować, aby tworzyć złożone, dynamiczne i bogate w funkcje prototypy w Axure. Wyrafinowane i skomplikowane interakcje można skonfigurować za pomocą panelu Interakcje z prostymi stwierdzeniami „jeśli to, to tamto”. Poniżej znajduje się lista niektórych dodatkowych funkcji Axure:

Podstawowe i zaawansowane prototypowanie

• Wbudowane widżety do szybkiego tworzenia szkieletów i prototypowania
• Środowisko typu „przeciągnij i upuść”
• Budowanie prototypów opartych na przeglądarce bez kodowania
• Budowanie interakcji z zasobów szkicu
• Emulacja mobilna i przeglądanie urządzeń mobilnych
• Robocze pola formularza umożliwiające wprowadzanie danych przez użytkownika
• Dodawanie logiki warunkowej, zmiennych i wyrażeń
• Praca z treścią dynamiczną i widokami adaptacyjnymi
• Dodawanie efektów animacji
• Przeglądanie prototypów offline
• Niestandardowe biblioteki widżetów
• Integracja i wtyczki Adobe XD
• Udostępnianie prototypów w Axure Cloud, które można przeglądać w przeglądarce

Współtworzenie i współpraca

• Axure RP i Axure Cloud umożliwiają wielu osobom pracę nad tym samym projektem w tym samym czasie.

Aktywa wspólne

• Twórz i udostępniaj biblioteki komponentów interaktywnych oraz importuj zasoby z programu Sketch.

Przekazanie programisty

• Publikuj projekty z RP i Sketch do Axure Cloud, aby uzyskać automatyczne redlines oraz CSS i eksport obrazów.

Dokumentacja i specyfikacja

• Twórz przepływy procesów, demontaże produktów i specyfikacje wizualne.

Małe studium przypadku prototypowania Axure

Aby zaprezentować możliwości Axure, które wykraczają poza proste prototypy ekran-ekran, stworzyłem kilka ekranów z subtelnymi interakcjami dla Zalando — istniejącej witryny eCommerce. Po zakończeniu wszystkie te prototypowe sekwencje zostały wyeksportowane do HTML i mogły być przeglądane w przeglądarce przez każdego, w dowolnym miejscu za pomocą Axure Cloud.

Najpierw utworzyłem kilka interakcji w witrynie, które demonstrują mega menu, wyszukiwanie, przewijanie w poziomie produktów, dodawanie do ulubionych i zapisywanie się do newslettera.

Na stronie z listą produktów utworzyłem efekty najechania na miniatury pod głównym obrazem produktu, aby pokazać produkt w różnych kolorach (zamienianie obrazów po najechaniu). Dodałem również ponownie faworyzowanie produktu i rozwijany widżet do filtrowania strony z listą produktów poprzez ustawienie przedziału cenowego.

Następnie, w tym samym duchu, co na powyższym ekranie, chciałem zademonstrować zamianę różnych obrazów produktów po najechaniu kursorem na miniatury na stronie szczegółów produktu. Dodałem również kolejną funkcję najechania kursorem, aby kupujący mogli zobaczyć opis produktu, informacje o rozmiarze i dopasowaniu, dostawę i recenzje. Na koniec włączyłem selektor rozmiaru i dodałem produkt do koszyka.

Ilustrując następujący przepływ użytkownika, chciałem pokazać, jak działałoby zarządzanie koszykiem zakupów — na przykład usuwanie produktu z koszyka — za pomocą subtelnych slajdów, zanikania i animacji zastępowania elementów. Do stworzenia tych subtelnych mikrointerakcji nie użyto żadnego kodu.

Na koniec chciałem pokazać subtelne przekształcenia interfejsu użytkownika na ekranie logowania, gdy ludzie wprowadzą nieprawidłowe dane logowania i jaki komunikat o błędzie zostanie wyświetlony.

Te subtelne interakcje i transformacje interfejsu użytkownika są przydatne podczas testowania funkcji produktu, ponieważ projektanci i badacze użytkowników mogą przeprowadzać bardziej szczegółowe testy użytkowników i uzyskiwać głębszy wgląd w reakcje ludzi na witrynę eCommerce. Charakteryzują się specyficznym, wyrafinowanym wyglądem i odczuciami, które nie byłyby możliwe lub mogą okazać się bardzo trudne do stworzenia za pomocą innych narzędzi do prototypowania.

Streszczenie

Poszukując najnowszych i najlepszych narzędzi do tworzenia szkieletów i prototypowania, projektanci czasami przeoczają ugruntowane, wydajne narzędzia, które przetrwały próbę czasu.

Projektanci powinni nadać Axure inny wygląd. Ze względu na swoją głębię, zestaw funkcji i elastyczność, Axure jest wydajnym, solidnym narzędziem w porównaniu z innymi rozwiązaniami, a firma stale je aktualizuje, aby utrzymać jego znaczenie jako narzędzie projektowe.

Bezpłatna wersja próbna Axure jest dostępna do pobrania. Projektanci mogą eksportować interfejsy użytkownika ze Sketch, importować do Axure i tworzyć realistycznie wyglądające prototypy. Istnieje również wiele samouczków dostępnych dla każdego typu projektu (na YouTube i stronie Axure), a gotowe widżety Axure są również powszechnie dostępne do pobrania (bezpłatne i płatne).

• • •

Dalsza lektura na blogu Toptal Design:

• Udoskonal swój proces projektowania UX – przewodnik po projektowaniu prototypów
• 10 elementów UX, z których korzystają najlepsi projektanci
• Mity UX – prototypowanie, testowanie przez użytkowników i materiały dostarczające UX
• Samouczek framera: jak tworzyć oszałamiające interaktywne prototypy
• Opanuj swoje rzemiosło dzięki tym najlepszym narzędziom UX