Как правильно разработать интерактивный прототип?

Привет! Меня зовут Московкина Наталия, я старший бизнес-аналитик. Эта статья будет полезна бизнес-аналитикам, которые работают c системами управления данными и часто сталкиваются с тем, что заказчику сложно принять решение по реализации системы на основании статичных макетов. Также бывают случаи, когда передача системы в разработку требует большого количества коммуникаций и уточнений с разработчиками для обсуждения функциональности. В таких ситуациях решить проблему поможет интерактивный прототип.

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

Совсем недавно мы в «КОРУС Консалтинг» работали над проектом, в котором интерактивные прототипы помогли нам и заказчику подобрать наиболее подходящий инструмент, не внедряя полную версию сложной системы, и определиться с конечной версией продукта.

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

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

Этап 1. Создание статичных макетов

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

Этап 2. Описание сценариев для различных ролей пользователей

На этапе проработки бизнес-сценариев мы выдвигали гипотезы о том какие показатели в каком объеме будут доступны и полезны пользователям разного уровня и соответственно с разными ролями. Каким может быть путь пользователя в системе, все ли возможные потребности мы учли. Здесь мы уже перешли к фиксированию этих сценариев в привязке к визуализации. В сценарии необходимо фиксировать цель пользователя, какие действия пользователю необходимо совершить для достижения цели и какой результат получит пользователь. Цели и сценарии должны быть расположены в порядке определенного логического сценария использования, это должна быть своего рода история действий пользователя в системе от логирования до получения необходимой информации. Затем дизайнер должен собрать необходимые по сценарию макеты в Figma, чтобы мы были уверены в том, что не забыли нужные для прототипа варианты экранов. Далее БА (бизнес-аналитик) собирает финальную презентацию по каждой из ролей, такая презентация может служить как артефактом для демонстрации визуального решения ролевой модели заказчику, так и инструкцией для дизайнера для сбора интерактивного прототипа.

Этап 3. Сборка прототипа

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

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

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

Этап 4. Запись обучающего видео о работе с прототипом

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

Что нужно изучить для создания прототипа

1. Работа в Figma.

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

2. Цели и задачи пользователя.

   Следует погрузиться в вопрос пользовательских целей и задач, и понять, в чем их отличие. Мы должны четко понимать какую мы решаем бизнес-проблему и какую бизнес-ценность несем заказчику через нашу новую систему. Не стоит добавлять элементы визуализации, если они не помогают в достижении целей пользователя или не решают какую-либо задачу. Перед добавлением элемента задайте себе следующие вопросы: Для чего этот элемент нужен? Он помогает в решении задачи? Если да, то какой? Эта задача приближает достижение какой-либо из целей пользователя? Также полезным будет отслеживать длину пути пользователя от входа в систему до достижения цели. Для комфортного использования системы этот путь не должен быть слишком длинным.

3. Пользовательские сценарии.

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

Плюсы и минусы использования интерактивного прототипа

Работая над этим проектом, мы четко выделили для себя преимущества использования интерактивного прототипа.

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

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

• Использование интерактивного прототипа позволяет снизить риски и затраты на разработку и внедрение системы, так как позволяет выявить и исправить ошибки на ранних этапах.

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

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

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

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