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