Сложные прототипы — зачем использовать Axure

«Дизайн — это не только то, как он выглядит и на что он похож. Дизайн — это то, как это работает». - Стив Джобс

Было доказано, что прототипы бесценны для принятия лучших дизайнерских решений. В качестве артефактов прототипы являются одним из основных результатов в UX-дизайне и прототипировании, а как деятельность лежат в основе процесса проектирования, ориентированного на пользователя. Прототип — это объединение всех предыдущих работ по дизайну UX, объединенных в единый, визуальный, функционирующий продукт, который используется для проверки гипотез и тестирования дизайна.

Звучит достаточно просто, но в мире, насыщенном множеством инструментов проектирования, выбор правильного инструмента для создания прототипов — непростая задача, требующая тщательного рассмотрения. Дизайнеры должны учитывать затраты, функции, интеграцию с другими инструментами проектирования, кривую обучения, функции совместной работы и платформу воспроизведения для просмотра и пользовательского тестирования.

Ситуация усложняется тем, что в последнее время на сцену ворвались многие новички. Существуют только онлайн-инструменты, например, Figma, InVision, UXPin, Framer, Marvel, Principle, Origami, а некоторые представляют собой традиционные настольные программы, такие как Sketch и Adobe XD, со встроенным прототипированием в качестве расширения их функциональности. Все они имеют свои плюсы и минусы, функции и интеграции.

Но новое не всегда лучше. На поле боя все еще есть несколько старых боевых коней: Axure — один из них. Когда дизайнеры хотят создавать многофункциональные детализированные прототипы, Axure достоин внимания. Axure существует уже некоторое время, за много лет до того, как появились упомянутые выше недавно созданные инструменты, и многие дизайнеры считают его дедушкой инструментов для создания каркасов и прототипов, наделенных широкими возможностями.

Зачем использовать Axure?

В настоящее время, по большей части, дизайнеры используют инструменты прототипирования на основе горячих точек, с помощью которых они связывают экраны и, возможно, добавляют несколько экранных переходов. Проблема в том, что этот метод не включает в себя небольшие взаимодействия, которые дополняют общий пользовательский опыт во время тестирования. Напротив, Axure может легко обрабатывать тонкие детали и микровзаимодействия, которые оживляют прототип.

Для более глубокого изучения того, как люди будут взаимодействовать с конкретным дизайном, дизайнеры могут создавать прототипы с логикой условий, различными пользовательскими данными и динамической анимацией, которые делают прототип более реалистичным. Это отличный способ получить ценную информацию о том, что работает, а что нет.

Необходимость использовать слишком много неинтегрированных приложений для проектирования также представляет собой проблему неэффективности. Типичный рабочий процесс проектирования включает в себя создание дизайнером пользовательских интерфейсов в Sketch и создание прототипов в другом инструменте, таком как InVision или Marvel. После этого дизайн передается разработчикам с помощью еще одного инструмента, такого как Zeplin.

Axure — это полностью интегрированное приложение, которое избавляет от необходимости использовать различные инструменты проектирования. Например, после создания пользовательских потоков, карт пути клиента, персон, раскадровок, карт сайта, информационной архитектуры и каркасов дизайнеры могут легко перейти к сложным прототипам — прямо в Axure. Когда дизайнеры передают проекты разработчикам, они могут лучше понять, как что-то должно быть реализовано, и могут более эффективно работать с менеджерами по продукту, чтобы оценить объем и оценить техническую осуществимость.

Самым большим препятствием для предоставления хорошо продуманных продуктов и услуг является отсутствие понимания наших пользователей. Джаред Спул, UIE (разработка пользовательского интерфейса)

Подобно другим инструментам дизайна, Axure можно быстро освоить и быстро начать использовать. Встроенные виджеты, с помощью которых можно создавать динамические взаимодействия, понятные даже непрограммистам, можно сразу же использовать для впечатляющих взаимодействий. Дизайнеры, которые хотят углубиться и потратить время на изучение приложения, могут создавать сложные, реалистичные веб-сайты и приложения со сложными взаимодействиями.

Реальные примеры прототипирования Axure

У дизайнеров всегда мало времени, и им нужно продемонстрировать, как будут работать конкретные пользовательские потоки, в обзорах и на раннем этапе протестировать дизайн продукта с пользователями. Базовые возможности Axure могут проявить себя в этих сценариях, потому что дизайнеры могут быстро превращать изображения из других инструментов дизайна в интерактивные прототипы.

В приведенном ниже примере продукта B2B ряд экранов был экспортирован из OmniGraffle в формате PNG. Изображения были обрезаны, замаскированы и помещены в слои в Axure. Затем из библиотеки виджетов Axure были добавлены активные области и интерактивные компоненты, такие как выпадающие меню и поля формы, для создания многофункционального прототипа. Затем функции и функциональные возможности продукта были протестированы с помощью удаленного модерируемого пользовательского тестирования, что привело к быстрым итерациям дизайна на основе отзывов пользователей.

В другом примере команды дизайнеров и инженеров смогли разработать лучший способ разработки двух особенно сложных виджетов для сложного продукта B2B. Цель состояла в том, чтобы разработать расширенные фильтры и настраиваемый селектор столбцов для таблицы с большим объемом данных, которые повысят удобство использования и будут технически осуществимы.

В этом сценарии изображения различных состояний были экспортированы из Sketch, а быстрые взаимодействия добавлены и анимированы в Axure. Были добавлены компоненты пользовательского интерфейса, такие как кнопки и флажки, для демонстрации взаимодействий и их эффектов. Команды прошли несколько итераций, которые были рассмотрены и протестированы. С другими инструментами прототипирования эта попытка могла занять гораздо больше времени.

Возможности и преимущества Axure

Недавно я работал в компании, которая использовала только базовые прототипы экранного изображения, созданные с помощью InVision, и никогда не проводила большого пользовательского тестирования. Чтобы протестировать грядущую важную функцию продукта, мне поручили создать подробный прототип продукта. Многое зависело от этой новой функции, и заинтересованные стороны хотели, чтобы она была правильной.

Мне потребовалось чуть менее двух дней, чтобы создать подробный прототип в Axure с различными состояниями и множеством микровзаимодействий, которые демонстрировали, как продукт будет вести себя в разных сценариях. В качестве неожиданного преимущества обнаружилось множество крайних случаев, с которыми команда разработчиков смогла справиться.

При тестировании мы могли видеть, где пользователи боролись с дизайном и почему , что было бы невозможно с менее подробным прототипом, построенным со статическими экранами. В результате мы смогли быстро решить обнаруженные проблемы.

Я также передал прототип разработчикам, чтобы показать им, где находятся контрольные точки адаптивного дизайна, как должны выглядеть состояния фокуса или ошибки и как должен работать прогнозирующий поиск.

Когда фронтенд-разработчики смогли заполучить прототип, это также значительно облегчило их жизнь. Даже бэкенд-разработчики оценили прототип, потому что они могли видеть, как должен работать конечный продукт.

Такое быстрое прототипирование, тестирование и внедрение новой функции продукта было намного быстрее, чем разработка любой другой функции, которой они занимались ранее, и на этапе контроля качества возникало меньше проблем.

Когда все было сказано и сделано, все в команде отметили, насколько полезным был подробный прототип, и попросили проводить такой процесс прототипирования чаще. Вывод заключается в том, что создание, просмотр и тестирование подробного прототипа может иметь огромное значение. Вся команда могла видеть важные, всесторонние взаимодействия, которые были значимы для пользователей.

Axure позволяет нам тестировать все, даже самые сложные варианты использования. Наши прототипы выглядят и действуют как настоящие. Джули, Лаборатория пользовательского опыта

Особенности и сильные стороны Axure

Дизайнерам не нужно уметь программировать, чтобы создавать сложные, динамичные, многофункциональные прототипы в Axure. Сложные и запутанные взаимодействия можно настроить с помощью панели « Взаимодействия » с простыми утверждениями «если это, то это». Ниже приведен список некоторых дополнительных функций Axure:

Базовое и расширенное прототипирование

• Встроенные виджеты для быстрого создания каркасов и прототипов
• Среда перетаскивания
• Создание прототипов на основе браузера без программирования
• Создание взаимодействий из ресурсов Sketch
• Мобильная эмуляция и просмотр мобильных устройств
• Поля рабочей формы, обеспечивающие ввод данных пользователем
• Добавление условной логики, переменных и выражений
• Работа с динамическим контентом и адаптивными представлениями
• Добавление анимационных эффектов
• Оффлайн просмотр прототипа
• Пользовательские библиотеки виджетов
• Интеграция с Adobe XD и плагины
• Совместное использование прототипов в Axure Cloud, которые можно просматривать в браузере

Соавторство и сотрудничество

• Axure RP и Axure Cloud позволяют нескольким людям одновременно работать над одним проектом.

Общие активы

• Создавайте и делитесь библиотеками интерактивных компонентов, а также импортируйте ресурсы из Sketch.

Передача разработчика

• Публикуйте дизайны из RP и Sketch в Axure Cloud для автоматических исправлений, а также экспорта CSS и изображений.

Документация и спецификация

• Создавайте технологические потоки, разборки продуктов и визуальные спецификации.

Мини-кейс Axure Prototyping

Чтобы продемонстрировать возможности Axure, выходящие за рамки упрощенных прототипов «экран-экран», я создал несколько экранов с тонким взаимодействием для Zalando — существующего сайта электронной коммерции. После завершения все эти последовательности прототипов были экспортированы в HTML и могли быть просмотрены в браузере кем угодно и где угодно с помощью Axure Cloud.

Во-первых, я создал несколько взаимодействий с сайтом, демонстрируя мегаменю, поиск, горизонтальную прокрутку продуктов, добавление в избранное и подписку на рассылку новостей.

На странице со списком продуктов я создал эффекты наведения на миниатюры под основным изображением продукта, чтобы показать продукт в разных цветах (замена изображений при наведении). Я также снова добавил избранное для продукта и выпадающий виджет для фильтрации страницы со списком продуктов, установив диапазон цен.

Затем, в том же духе, что и на экране выше, я хотел продемонстрировать замену разных изображений продукта при наведении курсора на миниатюры изображений на странице сведений о продукте. Я также добавил еще одну функцию наведения, чтобы покупатели могли видеть описание продукта, информацию о размере и посадке, доставке и отзывы. Наконец, я включил селектор размера и добавил товар в корзину.

Иллюстрируя следующий пользовательский процесс, я хотел показать, как будет работать управление корзиной покупок — например, удаление продукта из корзины — с помощью тонких слайдов, затухания и анимации замены элементов. Для создания этих тонких микровзаимодействий не использовался код.

И последнее, но не менее важное: я хотел показать тонкие преобразования пользовательского интерфейса на экране входа в систему, когда люди вводят неверную информацию для входа, и какое сообщение об ошибке будет отображаться.

Эти незаметные взаимодействия и преобразования пользовательского интерфейса полезны при тестировании функций продукта, поскольку дизайнеры и исследователи пользователей могут проводить более детальное пользовательское тестирование и получать более глубокое представление о реакции людей на сайт электронной коммерции. Они демонстрируют специфический, утонченный внешний вид, который невозможно или может оказаться очень сложно создать с помощью других инструментов прототипирования.

Резюме

В поисках новейших и лучших инструментов для создания каркасов и прототипов дизайнеры иногда упускают из виду уже зарекомендовавшие себя эффективные инструменты, выдержавшие испытание временем.

Дизайнеры должны по-новому взглянуть на Axure. Благодаря своей глубине, набору функций и гибкости Axure является мощным и надежным инструментом по сравнению с другими решениями, и компания продолжает обновлять его, чтобы поддерживать его актуальность в качестве инструмента проектирования.

Бесплатная пробная версия Axure доступна для скачивания. Дизайнеры могут экспортировать пользовательские интерфейсы из Sketch, импортировать их в Axure и создавать реалистичные прототипы. Также доступно множество руководств для каждого типа проектов (на YouTube и на сайте Axure), а готовые виджеты Axure также широко доступны для скачивания (бесплатно и платно).

• • •

Дальнейшее чтение в блоге Toptal Design:

• Совершенствуйте процесс проектирования UX — руководство по дизайну прототипов
• 10 UX-результатов, которые используют лучшие дизайнеры
• Мифы об UX — прототипирование, пользовательское тестирование и результаты UX
• Учебное пособие по Framer: как создавать потрясающие интерактивные прототипы
• Совершенствуйте свое мастерство с помощью этих лучших инструментов UX