Инструмент для проектирования интерфейсов — Axure
В этом месяце ко мне обратился клиент с идеей сделать интерфейс для планшетов. Планшеты будут повешены в магазинах и помогут покупателям подбирать товары, которые подойдут именно для их случаев. Так можно будет узнать наличие подходящих товаров, а также их расположение в залах и на полках.
Но одно дело — идея, а другое — её реализация. Чтобы проверить, насколько это вообще интересно магазинам, нужно им что-то показать. А разрабатывать для этих целей mvp — займёт какое-то время.
Тогда я предложил сделать интерактивный прототип интерфейса. Только не как обычно, а именно демонстрационный. Где упор будет сделан не на глубоком продумывании всей логики, которую потом описываем в функциональной спецификации и отдаём в разработку, а на дизайне и динамических элементах.
Почти что прототип для пользовательского тестирования, только в этот раз для демонстрации идеи и усиления коммерческого предложения.
Клиенту моё предложение понравилось, по времени это заняло чуть больше недели — и так я впервые за пятнадцать лет сам сделал то, чему обучал тысячи людей в статьях и видеороликах на Ютубе и одновременно отговаривал применять это на практике: демонстрационный интерактивный прототип, напичканный динамическими элементами.
Там были якорные ссылки в основном меню навигации. Они постоянно торчали в верхней части экрана на полупрозрачной плашке, скролили до нужной части каталога и меняли свой цвет в зависимости от активности. И встроенный ролик с видеоинструкцией из Ютуба, появляющийся в модальном окне. И галерея, которую можно полистать. В общем, вот это всё. Клиент остался доволен и отправился решать куда как более сложную задачу: искать контакты представителей магазинов, которым это можно показать и предложить.
Кажется, уже подросло поколение UX-дизайнеров, которое могло даже не слышать об Axure. А я всё ещё считаю её лучшим инструментом для быстрого создания динамических прототипов. Впрочем, сразу отмечу, что сам я из динамики использую только перелинковку (чтобы все ссылки в интерфейсе куда-то вели), да глобальные переменные для разных ролей (чтобы шапки для аутентифицированных пользователей отличались от шапок для неаутентифицированных).
Я начал пользоваться Axure в 2009 году. Тогда это была версия 5.6. На сегодняшний день последняя версия программы — 10-я.
Сегодня у меня спрашивают: «Почему ты не перешёл на Фигму?». Во-первых, потому что запрос на интерактивные прототипы в Axure никуда не исчез. Он просто стал меньше раз в десять :) А если есть спрос, то зачем мне переходить на что-то ещё? Во-вторых, у меня появился опыт запуска собственных стартапов, благодаря которому я очень хорошо понял, что и Axure, и Фигма — это просто инструменты. Каждый со своими сильными и слабыми сторонами. И на практике убедился, что Axure всё ещё уделывает Фигму в прототипировании. А Фигма всё так же уделывает Axure в вопросах дизайна и передачи макетов в вёрстку.
Поэтому я проектирую и прототипирую в Axure. А UI прорабатываю в Фигме (впрочем, освоив Фигму, я всё же предпочитаю обращаться к дизайнерам за этой частью работы, а сам продолжаю не отвлекаться от создания проектной документации). Получается, я с удовольствием использую оба инструмента в зависимости от обстоятельств.
Когда проект начинается с идеи — можно очень быстро сделать интерактивный прототип в Axure, не отвлекаясь на дизайн. И уже потом переносить это дело в Фигму. А когда у проекта уже есть дизайн и UI-кит в Фигме, то имеет смысл прототипировать уже в самой Фигме, а не плодить сущности.
Бывает и так, что в Фигме уже всё есть, но нам надо протестировать на пользователях какую-то новую неразработанную функцию, которая включает в себя много динамики. Тексты в поля вводить, работать с выпадающими списками, содержимое которых зависит друг от друга, запоминать выбранные на предыдущих шагах варианты и подстраивать под них следующие. В таких случаях проще будет всё-таки перенести это в Axure, чем пытаться заставить работать в Фигме с помощью костылей.
В общем, разные инструменты для разных целей.
Несмотря на то, что уже давно вышла десятая версия Axure, я чаще использую восьмую. Потому что, начиная с девятой, Axure, как мне кажется, просто пытается двигаться в сторону Фигмы. Больше удобств для работы с дизайном. Стили, эффекты, вот это всё. Даже «мастера», которые в Axure всю дорогу играли роль «компонентов» взяли и переименовали в «компоненты».
Впрочем, я здесь немного лукавлю. Ведь лицензию восьмой версии программы я купил за несколько сотен баксов — и теперь она принадлежит мне. А за десятую придётся платить ежемесячно по 25 долларов. Возможности приобрести её в собственность больше нет. А нет лицензии — нет работающей программы. Даже если нужно будет подвинуть что-нибудь на пиксель влево — оплачивай месяц.
Ну и обратная совместимость. Прототип, сделанный в восьмёрке, я смогу открыть в десятке. А наоборот — не получится.
Итак, что умеет Axure?
Создавать древовидную структуру страниц, в том числе раскладывать их по папкам
Работать с каждой из этих страниц. Это как работать с отдельным фреймом в Фигме
Работать с адаптивными состояниями каждой из страниц. Показывать, как они ведут себя на разных вьюпортах
Создавать компоненты
Управлять стилями чего угодно
Программировать логику работы элементов на страницах. В том числе, с использованием глобальных переменных. В том числе, с использованием репитеров (например, можно без проблем показать логику фильтрации и сортировки каталога товаров из десятка-другого элементов)
Смотреть, как будет выглядеть результат, в браузере. Можно подсвечивать интерактивные элементы. Можно переключать отображение для разных вьюпортов
Генерировать получившийся прототип в виде набора html-страниц. Его можно смотреть как локально, так и выложить к себе на сервер
Публиковать получившиеся прототипы в облаке Axure
Есть командная работа и генерация проектной документации, но я их протестировал разок — и больше к ним не возвращался :)
И ещё сто пятьсот функций, присущих любому подобному инструменту. Сетки, линейки, работа с векторами, динамическими панелями, масками, вот это всё. Но, конечно, на сегодняшний день мы привыкли всё сравнивать с Фигмой. И если посмотреть на список, то основных различий будет два: работа с адаптивкой и программирование логики. Это то, чего в Фигме пока нет.
Для себя из плюсов также считаю возможность выложить получившийся прототип на своём сервере. Это кажется более надёжным, чем публикация в облаке. Но всё равно облако удобнее.
Когда я проектирую в Фигме, то не могу не отвлекаться на дизайн. Иногда, вместо того, чтобы быстро набрасывать необходимые элементы на страницу и прорабатывать пользовательские сценарии, я сижу и подгоняю отступы, размеры и цвета. А Axure с этим проще. Плюс в Axure я никогда не увижу «ёжика» из огромного количества связей между перелинкованными элементами в режиме прототипирования, потому что там работа организована в виде «папок», а не «полотна». Но опять же: это просто инструменты и я их использую в зависимости от контекста.
Полезные ссылки:
Пример прототипа. Он из кейса — сайта торгового бота.
Группа по Axure Вконтакте. Вместе с падением популярности Axure упала и актуальность группы. Но нет-нет — да придёт кто-нибудь с вопросом по работе в программе, и я делаю очередной обучающий ролик.
Уроки по Axure в базе знаний Проектората.
Ну и мой Телеграм-канал. Он про проектирование интерфейсов и работу на фрилансе.
