Выбираем инструмент проектирования интерфейсов для аналитика
Всем привет! Меня зовут Бургомистренко Кристина и я — системный аналитик из компании Rubius. В этой статье я рассказываю про свой опыт проектирования и сравниваю несколько популярных инструментов для создания вайрфреймов, которые может использовать в своей работе бизнес/cистемный аналитик.
Зачем проектировать интерфейс аналитику, если есть дизайнер?
Переходя в новый проект я всегда подключаюсь к процессу проектирования интерфейса (в одиночку или в тандеме с дизайнером). Создание эскизов интерфейсов на раннем этапе проекта играет важную роль и позволяет визуализировать работу будущей функциональности, помогая Заказчику заранее «взглянуть» на нее. Эскизное проектирование является своеобразным мостиком между идеей и реализацией, который позволяет оперативно вносить коррективы и уточнять детали до того, как проект перейдет к этапу разработки.
Именно в этом контексте выбор инструмента для аналитика становится критически важным, поскольку правильно подобранные инструменты могут значительно упростить процесс согласования и обеспечить эффективное взаимодействие между всеми участниками проекта.
В случае, если проектирование начинается без дизайнера важно помнить, что аналитик — не дизайнер! Его задачей «минимум», как правило, является создание дизайна на уровне вайрфреймов, которые позволят концептуально продемонстрировать логику и решение проблемы с которой пришёл Заказчик.
Что такой вайрфрейм?
Различают 3 вида дизайн‑макетов: вайрфрейм, мокап и прототип. Ключевой различие между ними — разная стадия готовности/проработанности.
На стадии «аналитики» проекта, когда целевое решение ещё не ясно, разрабатываются «наброски» будущей системы, их называют «вайрфреймами/эскизами».
Вайрфрейм позволят отобразить:
информационную структуру будущей системы,
базовые группы контента,
базовую логику взаимодействия системы с пользователем (визуализация некоторых use cases).
После этого в работу подключается дизайнер/проектировщик интерфейсов/разработчики и детализируют его, прорабатывая вайрфрейм до деталей с учетом компонентов, цветов, колористики, формы кнопок, интерактива и т. п. В увеличением уровня детализации вайрфрейм плавно становится мокапом, а затем прототипом.
Виды дизайн-макетов
P.S Последовательность проектирования может отличаться в каждом проекте. Детализация вайрфеймов бывает разной в зависимости от задачи и возможностей в проекте. Нередко на первом этапе сразу разрабатывается мокап или прототип системы, после чего претерпевает регулярные коррективы, т.к на момент обсуждения точная логика работы не была определена.
Анализ и сравнение инструментов для создания вайрфреймов
Я провела анализ шести популярных инструментов для проектирования интерфейсов в контексте работы аналитика.
Важно отметить, что для меня эти инструменты незнакомые (ранее я всегда использовала в работе Figma), но в этот раз попробую их изучить «с нуля» и создать вайрфрейм для выдуманной задачи. При этом я зафиксирую время, которое мне понадобится для освоения каждого инструмента и проектирования одного экрана в виде вайрфрейма.
Список инструментов:
Инструмент | Описание | Тип | Год выхода |
Axure RP | Инструмент для создавания реалистичных функциональных прототипов. | Настольное приложение | 2004 |
Miro | Интерактивная онлайн‑доска с возможностью совместной работы над схемами и эскизами. | Онлайн‑сервис | 2006 |
Pencil Project | Инструмент с открытым исходным кодом от вьетнамской компании Evolus. | Настольное приложение | 2015 |
Balsamiq Mockups | Инструмент для создания вайрфреймов, интерфейсов для будущих сайтов, лендингов, мобильных приложений и программ. | Настольное приложение | 2017 |
Excalidraw | Инструмент виртуальной доски для совместной работы. Позволяет создавать эскизы диаграмм, напоминающие нарисованные от руки. | Онлайн‑сервис | 2020 |
Lunacy | Графический редактор нового поколения с искусственным интеллектом для UI/UX и Web дизайна. | Онлайн‑сервис | 2023 |
О тестовой задаче
Итак, представим, что мы работаем в Microsoft. К нам пришел Заказчик и просит создать некое окно «Параметры» для новой версии ОС — Windows 11. Мы провели серию интервью со стейкхолдерами и понимаем, что окно должно иметь следующий вид:
Окно «Параметры» Windows 11
Но есть небольшая проблема — данное представление есть пока только в нашей голове и мы, как аналитики, решаемся спроектировать вайрфрейм для обсуждения нюансов с Заказчиком, разработчиками и дизайнерами. На текущий момент мы точно знаем, что у окна должны быть следующий интерфейсные решения:
основное меню в виде списка c поисковой строкой,
вложенный плиточный список (tile) для навигации в рамках выбранного раздела,
акцент на информации о пользователе и его устройстве.
Итак, устанавливаем все софты и начинаем решать задачку.
На просторах интернета вы наверняка найдёте обзоры всех этих инструментов, но есть нюанс — все они написаны дизайнерами или проектировщиками интерфейса. В работе аналитика оперативность проектирования крайне важна. Поскольку большая часть моих задач имеет дедлайн «надо было вчера», наброски будущего дизайна быстро устаревают и/или переделываются. В связи с этим я выделила 4 основных критерия оценки (максимальный балл для каждого критерия — 5):
Время (на освоение инструмента и проектирования одного вайрфрейма);
Простота использования/интерфейса (на сколько легко «понимать» интерфейс инструмента, искать нужное действие без лишних сложностей, понятные инструкции или минимум шагов для выполнения определенных задач);
Удобство (комфортность, эффективность и удовлетворение от использования инструмента);
Библиотеки компонентов (количество элементов пользовательского интерфейса, библиотеки готовых компонентов, в том числе под разные ОС). Здесь будем разделять наличие базовых компонентов (кнопки, чекбоксы, селекты и т.п) и сложных/cоставных компонентов (таблицы, меню, датапикеры и т.п)
Результат в Axure RP
Вайрфрейм окна «Параметры» в Axure RP
Преимущества | Недостатки | Время на освоение и проектирование |
— низкий порог вхождения, | — нет бесплатной версии, для полноценной работы нужна подписка (от 25$), — нет веб-версии (только desktop), — функция комментирования доступна только для автора. | 24 мин. |
Результат в Miro
Вайрфрейм окна «Параметры» в Miro
Преимущества | Недостатки | Время освоения |
— низкий порог вхождения, | — экспорт с искажением изображения (для бесплатной версии), | 35 мин. |
Результат в Pencil
Вайрфрейм окна «Параметры» в Pencil
Преимущества | Недостатки | Время освоения |
— низкий порог вхождения, | — нет сложных элементов в рамках одной библиотеки, | 35 мин. |
Результат в Balsamiq Wireframes
Вайрфрейм окна «Параметры» в Balsamiq Wireframes
Преимущества | Недостатки | Время освоения |
— низкий порог вхождения, — есть поиск по элементам, — экспорт без искажения изображения, — есть базовые и сложные компоненты, — есть базовые иконки, — есть библиотеки с компонентами (iOS, Android). | — нельзя создать вайрфрейм высокой детализации (элементы только бумажного стиля), — нет возможности совместной работы (в бесплатной версии), — нет веб-версии (только desktop). | 24 мин. |
Результат в Excalidraw
Вайрфрейм окна «Параметры» в Excalidraw
Преимущества | Недостатки | Время освоения |
— низкий порог вхождения, — есть интеграция с искусственным интеллектом Mermaid, который позволяет создать по текстовому описанию диаграмму, рабочий процесс, блок‑схему, — экспорт без искажения изображения. | — нет базовых элементов интерфейса и иконок, — нет библиотек с компонентами (есть только стандартные геометрические фигуры), — нельзя создать вайрфрейм высокой детализации (элементы только бумажного стиля), — нестабильно работает многопользовательский режим (не всегда изменения другого пользователей отображаются в «онлайн режиме») . | 21 мин. |
Результат в Lunacy
Вайрфрейм окна «Параметры» в Lunacy
Преимущества | Недостатки | Время освоения |
— есть базовые компоненты и иконки, — есть базовые библиотеки (Apple, Windows и т.п), — экспорт без искажения изображения, — можно создать вайрфрейм высокой детализации. | — высокий порог вхождения (сложно понять с чего начать, приходится искать где находятся компоненты), — нет готовых шаблонов для сложных элементов, — сложный поиск по элементам. | 44 мин. |
Сводная таблица оценки
Инструмент | Время | Простота использования | Удобство | Библиотеки компонентов | Общий балл |
Axure RP | 24 мин. | 4 | 5 | 5 | 14 |
Pencil Project | 35 мин. | 5 | 4 | 4 | 13 |
Balsamiq Mockups | 24 мин. | 5 | 5 | 4 | 14 |
Miro | 35 мин. | 5 | 4 | 3 | 12 |
Excalidraw | 21 мин. | 5 | 5 | 2 | 12 |
Lunacy | 44 мин. | 3 | 4 | 5 | 12 |
Из анализа сделаю несколько основных выводов:
Все инструменты, кроме Lunacy имеют низкий порог входа и могут легко использоваться аналитиком для проектирования. Выбирайте в зависимости от того, какой визуальный результат хотите получить.
Обещанный «искусственный интеллект» в Lunacy генерирует только тексты, аватарки, помогает удалять фон из картинок (что, собственно, было всегда доступно в Figma через плагины). Какой-то «магии» с полуавтоматической генерацией вайрфреймов не произойдёт.
Самыми простыми к освоению оказались Balsamiq Mockups, Excalidraw и Axure RP, но используя первые 2 инструмента вы сможете максимум спроектировать низкодетализированные вайрфреймы в «бумажном стиле». Если вам понадобиться что-то помощнее, то лучше обратить внимание на другие инструменты.
В совокупности трех критериев (простота использования, удобство и разнообразие библиотек с компонентами) лучшими оказались Axure RP и Balsamiq Mockups. Тут стоит иметь ввиду, что Axure RP не имеет бесплатной версии для комфортной работы и нужно обязательно иметь подписку.
Освоить Pencil Project и Miro было несколько дольше, но в случае с Pencil Project это произошло от большого разнообразия имеющихся возможностей. Поэтому рекомендую потратить чуть больше времени на освоение, чтобы потом оперативно проектировать вайрфреймы разной детализации.
