Всем привет! Меня зовут Бургомистренко Кристина и я — системный аналитик из компании Rubius. В этой статье я рассказываю про свой опыт проектирования и сравниваю несколько популярных инструментов для создания вайрфреймов, которые может использовать в своей работе бизнес/cистемный аналитик.

Зачем проектировать интерфейс аналитику, если есть дизайнер?

Переходя в новый проект я всегда подключаюсь к процессу проектирования интерфейса (в одиночку или в тандеме с дизайнером). Создание эскизов интерфейсов на раннем этапе проекта играет важную роль и позволяет визуализировать работу будущей функциональности, помогая Заказчику заранее «взглянуть» на нее. Эскизное проектирование является своеобразным мостиком между идеей и реализацией, который позволяет оперативно вносить коррективы и уточнять детали до того, как проект перейдет к этапу разработки.

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

В случае, если проектирование начинается без дизайнера важно помнить, что аналитик — не дизайнер! Его задачей «минимум», как правило, является создание дизайна на уровне вайрфреймов, которые позволят концептуально продемонстрировать логику и решение проблемы с которой пришёл Заказчик.

Что такой вайрфрейм?

Различают 3 вида дизайн‑макетов: вайрфрейм, мокап и прототип. Ключевой различие между ними — разная стадия готовности/проработанности.
На стадии "аналитики" проекта, когда целевое решение ещё не ясно, разрабатываются «наброски» будущей системы, их называют «вайрфреймами/эскизами».

Вайрфрейм позволят отобразить:

• информационную структуру будущей системы,

• базовые группы контента,

• базовую логику взаимодействия системы с пользователем (визуализация некоторых use cases).

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

P.S Последовательность проектирования может отличаться в каждом проекте. Детализация вайрфеймов бывает разной в зависимости от задачи и возможностей в проекте. Нередко на первом этапе сразу разрабатывается мокап или прототип системы, после чего претерпевает регулярные коррективы, т.к на момент обсуждения точная логика работы не была определена.

Анализ и сравнение инструментов для создания вайрфреймов

Я провела анализ шести популярных инструментов для проектирования интерфейсов в контексте работы аналитика.

Важно отметить, что для меня эти инструменты незнакомые (ранее я всегда использовала в работе Figma), но в этот раз попробую их изучить «с нуля» и создать вайрфрейм для выдуманной задачи. При этом я зафиксирую время, которое мне понадобится для освоения каждого инструмента и проектирования одного экрана в виде вайрфрейма.

Список инструментов:

О тестовой задаче

Итак, представим, что мы работаем в Microsoft. К нам пришел Заказчик и просит создать некое окно «Параметры» для новой версии ОС — Windows 11. Мы провели серию интервью со стейкхолдерами и понимаем, что окно должно иметь следующий вид:

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

• основное меню в виде списка c поисковой строкой,

• вложенный плиточный список (tile) для навигации в рамках выбранного раздела,

• акцент на информации о пользователе и его устройстве.

Итак, устанавливаем все софты и начинаем решать задачку.

На просторах интернета вы наверняка найдёте обзоры всех этих инструментов, но есть нюанс - все они написаны дизайнерами или проектировщиками интерфейса. В работе аналитика оперативность проектирования крайне важна. Поскольку большая часть моих задач имеет дедлайн «надо было вчера», наброски будущего дизайна быстро устаревают и/или переделываются. В связи с этим я выделила 4 основных критерия оценки (максимальный балл для каждого критерия — 5):

1. Время (на освоение инструмента и проектирования одного вайрфрейма);

2. Простота использования/интерфейса (на сколько легко "понимать" интерфейс инструмента, искать нужное действие без лишних сложностей, понятные инструкции или минимум шагов для выполнения определенных задач);

3. Удобство (комфортность, эффективность и удовлетворение от использования инструмента);

4. Библиотеки компонентов (количество элементов пользовательского интерфейса, библиотеки готовых компонентов, в том числе под разные ОС). Здесь будем разделять наличие базовых компонентов (кнопки, чекбоксы, селекты и т.п) и сложных/cоставных компонентов (таблицы, меню, датапикеры и т.п)

Результат в Axure RP

Результат в Miro

Результат в Pencil

Результат в Balsamiq Wireframes

Результат в Excalidraw

Результат в Lunacy

Сводная таблица оценки

Из анализа сделаю несколько основных выводов:

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

2. Обещанный "искусственный интеллект" в Lunacy генерирует только тексты, аватарки, помогает удалять фон из картинок (что, собственно, было всегда доступно в Figma через плагины). Какой-то "магии" с полуавтоматической генерацией вайрфреймов не произойдёт.

3. Самыми простыми к освоению оказались Balsamiq Mockups, Excalidraw и Axure RP, но используя первые 2 инструмента вы сможете максимум спроектировать низкодетализированные вайрфреймы в "бумажном стиле". Если вам понадобиться что-то помощнее, то лучше обратить внимание на другие инструменты.

4. В совокупности трех критериев (простота использования, удобство и разнообразие библиотек с компонентами) лучшими оказались Axure RP и Balsamiq Mockups. Тут стоит иметь ввиду, что Axure RP не имеет бесплатной версии для комфортной работы и нужно обязательно иметь подписку.

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