Как правильно разработать интерактивный прототип?
Привет! Меня зовут Московкина Наталия, я старший бизнес-аналитик. Эта статья будет полезна бизнес-аналитикам, которые работают c системами управления данными и часто сталкиваются с тем, что заказчику сложно принять решение по реализации системы на основании статичных макетов. Также бывают случаи, когда передача системы в разработку требует большого количества коммуникаций и уточнений с разработчиками для обсуждения функциональности. В таких ситуациях решить проблему поможет интерактивный прототип.
Интерактивный прототип — это упрощенная версия реальной информационной системы, которая позволяет пользователям тестировать различные сценарии, оценивать возможные эффекты внедрения и принимать оптимальные решения. Прототип системы создает виртуальную среду, в которой пользователи могут взаимодействовать с различными элементами системы и видеть результаты своих действий.
Совсем недавно мы в «КОРУС Консалтинг» работали над проектом, в котором интерактивные прототипы помогли нам и заказчику подобрать наиболее подходящий инструмент, не внедряя полную версию сложной системы, и определиться с конечной версией продукта.
Заказчиком проекта выступал крупный транспортный холдинг, в аналитических системах которого используется более 1500 показателей, которые формируются на базе данных, полученных из 1500 источников. Основным ограничением было использование только российских технологий, что не влияет на этап макетирования и прототипирования, но значительно ограничивает в выборе стека технологий для реализации.
Мы провели большую подготовительную работу, включающую анализ документации и интерфейсов, интервью с пользователями и проработку бизнес-сценариев. После этого команда приступила к созданию интерактивных прототипов. Эта работа состоит из нескольких этапов, о которых я несколько подробнее расскажу ниже.
Этап 1. Создание статичных макетов
На основе собранной информации и требований заказчика специалисты создали статичные макеты, в которых с помощью специальных инструментов Figma отрисовали различные варианты для каждого виджета (элемент экрана). Такая отрисовка вариантов виджетов помогает зафиксировать как будет меняться тот или иной виджет в зависимости от остальных интерактивных элементов (фильтров, кнопок, переключателей). Именно для этого этапа мы анализировали документы и интерфейсы. Например, на скриншоте внизу представлены различные варианты виджетов одного экрана, в результате мы получаем легко настраиваемую функциональность для отображения множества вариантов экранов и виджетов. Кстати, не лишним будет собрать реальные данные по показателям, чтобы продемонстрировать в прототипе динамику реальных показателей хотя бы за один квартал или полугодие, а не абстрактные данные.
Варианты виджета №1
Варианты виджета №2
Варианты виджета №3
Экран, на котором собраны виджеты с различными вариантами
Тот же экран с другими вариантами виджетов
Этап 2. Описание сценариев для различных ролей пользователей
На этапе проработки бизнес-сценариев мы выдвигали гипотезы о том какие показатели в каком объеме будут доступны и полезны пользователям разного уровня и соответственно с разными ролями. Каким может быть путь пользователя в системе, все ли возможные потребности мы учли. Здесь мы уже перешли к фиксированию этих сценариев в привязке к визуализации. В сценарии необходимо фиксировать цель пользователя, какие действия пользователю необходимо совершить для достижения цели и какой результат получит пользователь. Цели и сценарии должны быть расположены в порядке определенного логического сценария использования, это должна быть своего рода история действий пользователя в системе от логирования до получения необходимой информации. Затем дизайнер должен собрать необходимые по сценарию макеты в Figma, чтобы мы были уверены в том, что не забыли нужные для прототипа варианты экранов. Далее БА (бизнес-аналитик) собирает финальную презентацию по каждой из ролей, такая презентация может служить как артефактом для демонстрации визуального решения ролевой модели заказчику, так и инструкцией для дизайнера для сбора интерактивного прототипа.
Слайд презентации, созданной на основании сценариев и макетов
Сценарий пользователя для роли «Директор»
Этап 3. Сборка прототипа
На основе макетов и сценариев дизайнер формирует интерактивный прототип, добавляя недостающие макеты, если того требует сценарий, чтобы создать связи между макетами с учетом всех выпадающих меню и переходов. На скрине ниже можно видеть, как выглядит интерфейс Figma с добавленными между макетами связями.
Так выглядят макеты с установленными связями
Когда я первый раз увидела эту паутину связей, честно признаюсь мне пришла на ум картинка из интернета, вот она, кстати.
А это то, что приходит на ум, когда первый раз видишь все эти связи
Конечный вид связей между экранами может пугать, но во-первых пользователь интерактивного прототипа этих связей не увидит, во вторых, все эти связи устанавливает дизайнер, т.е. профессионал своего дела, в-третьих, если появится интерес и желание самому создавать прототипы (или если все дизайнеры заняты другой деятельностью), то в интернете огромное множество как бесплатных так и платных курсов по Figma.
Этап 4. Запись обучающего видео о работе с прототипом
В заключение мы всегда записываем демонстрационное видео о работе с прототипом. Лучше заранее описать сценарий демонстрации прототипа для того, чтобы проще было записывать видео. Он не должен быть большим или сильно подробным, достаточно зафиксировать для себя основные моменты, которые необходимо озвучить, а также очередность этих моментов. Также важно использовать хороший микрофон и несколько раз прорепетировать.
Что нужно изучить для создания прототипа
Работа в Figma.
Figma очень интуитивно понятный инструмент для макетирования. К тому же иногда быстрее самому внести правки в макеты, чем писать техническое задание, ждать исполнения, а потом проверять. Да и прототипирование в Figma доступно даже новичку и с определенными навыками не будет занимать много времени, что сделает прототипирование более доступным этапом на проекте.
Цели и задачи пользователя.
Следует погрузиться в вопрос пользовательских целей и задач, и понять, в чем их отличие. Мы должны четко понимать какую мы решаем бизнес-проблему и какую бизнес-ценность несем заказчику через нашу новую систему. Не стоит добавлять элементы визуализации, если они не помогают в достижении целей пользователя или не решают какую-либо задачу. Перед добавлением элемента задайте себе следующие вопросы: Для чего этот элемент нужен? Он помогает в решении задачи? Если да, то какой? Эта задача приближает достижение какой-либо из целей пользователя? Также полезным будет отслеживать длину пути пользователя от входа в систему до достижения цели. Для комфортного использования системы этот путь не должен быть слишком длинным.
Пользовательские сценарии.
Выясните, какие бывают пользовательские сценарии и что они должны в себя включать.
Плюсы и минусы использования интерактивного прототипа
Работая над этим проектом, мы четко выделили для себя преимущества использования интерактивного прототипа.
Интерактивный прототип позволяет всем участникам проекта, от разработчиков до конечных пользователей, лучше понять, как будет работать система. Это помогает избежать недопонимания и снижает вероятность ошибок.
Интерактивный прототип упрощает и ускоряет процесс тестирования новых идей и гипотез, позволяя разработчикам быстро определять, какие из них работают, а какие нет.
Использование интерактивного прототипа позволяет снизить риски и затраты на разработку и внедрение системы, так как позволяет выявить и исправить ошибки на ранних этапах.
Интерактивный прототип помогает понять, как пользователи будут взаимодействовать с системой, и внести необходимые изменения до ее окончательного внедрения.
У работы с интерактивным прототипом есть и недостатки, которые следует учитывать перед принятием решения о его разработке. Это и трудоемкость создания и поддержки прототипа, и длительность подготовительной работы для создания, и высокий уровень детализации макетов для максимизации эффектов и, как следствие, увеличение стоимости проекта и сроков.
Но все эти минусы нивелируется, если мы внесем прототип в план работ по внедрению ИТ-проекта и наберемся опыта чтобы проходить все этапы быстрее. Например, первые сценарии у нас занимали дни работы, следующие мы писали за несколько часов. К тому же с помощью прототипа можно избежать ряд ошибок при разработке информационной системы.
Итак, если вы хотите помочь заказчику подобрать наиболее подходящий инструмент, не внедряя полную версию сложной системы, определиться с конечной версией продукта, или апробировать удобство разрабатываемой системы задолго до ее реализации, то использование интерактивного прототипа будет весьма эффективно. Это позволит получить представление, как будет выглядеть конечный продукт именно в тот период, когда интерфейс разрабатывается с нуля.
