Привет! Меня зовут Московкина Наталия, я старший бизнес-аналитик. Эта статья будет полезна бизнес-аналитикам, которые работают c системами управления данными и часто сталкиваются с тем, что заказчику сложно принять решение по реализации системы на основании статичных макетов. Также бывают случаи, когда передача системы в разработку требует большого количества коммуникаций и уточнений с разработчиками для обсуждения функциональности. В таких ситуациях решить проблему поможет интерактивный прототип.
Интерактивный прототип – это упрощенная версия реальной информационной системы, которая позволяет пользователям тестировать различные сценарии, оценивать возможные эффекты внедрения и принимать оптимальные решения. Прототип системы создает виртуальную среду, в которой пользователи могут взаимодействовать с различными элементами системы и видеть результаты своих действий.
Совсем недавно мы в «КОРУС Консалтинг» работали над проектом, в котором интерактивные прототипы помогли нам и заказчику подобрать наиболее подходящий инструмент, не внедряя полную версию сложной системы, и определиться с конечной версией продукта.
Заказчиком проекта выступал крупный транспортный холдинг, в аналитических системах которого используется более 1500 показателей, которые формируются на базе данных, полученных из 1500 источников. Основным ограничением было использование только российских технологий, что не влияет на этап макетирования и прототипирования, но значительно ограничивает в выборе стека технологий для реализации.
Мы провели большую подготовительную работу, включающую анализ документации и интерфейсов, интервью с пользователями и проработку бизнес-сценариев. После этого команда приступила к созданию интерактивных прототипов. Эта работа состоит из нескольких этапов, о которых я несколько подробнее расскажу ниже.
Этап 1. Создание статичных макетов
На основе собранной информации и требований заказчика специалисты создали статичные макеты, в которых с помощью специальных инструментов Figma отрисовали различные варианты для каждого виджета (элемент экрана). Такая отрисовка вариантов виджетов помогает зафиксировать как будет меняться тот или иной виджет в зависимости от остальных интерактивных элементов (фильтров, кнопок, переключателей). Именно для этого этапа мы анализировали документы и интерфейсы. Например, на скриншоте внизу представлены различные варианты виджетов одного экрана, в результате мы получаем легко настраиваемую функциональность для отображения множества вариантов экранов и виджетов. Кстати, не лишним будет собрать реальные данные по показателям, чтобы продемонстрировать в прототипе динамику реальных показателей хотя бы за один квартал или полугодие, а не абстрактные данные.





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


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

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

Конечный вид связей между экранами может пугать, но во-первых пользователь интерактивного прототипа этих связей не увидит, во вторых, все эти связи устанавливает дизайнер, т.е. профессионал своего дела, в-третьих, если появится интерес и желание самому создавать прототипы (или если все дизайнеры заняты другой деятельностью), то в интернете огромное множество как бесплатных так и платных курсов по Figma.
Этап 4. Запись обучающего видео о работе с прототипом
В заключение мы всегда записываем демонстрационное видео о работе с прототипом. Лучше заранее описать сценарий демонстрации прототипа для того, чтобы проще было записывать видео. Он не должен быть большим или сильно подробным, достаточно зафиксировать для себя основные моменты, которые необходимо озвучить, а также очередность этих моментов. Также важно использовать хороший микрофон и несколько раз прорепетировать.
Что нужно изучить для создания прототипа
-
Работа в Figma.
Figma очень интуитивно понятный инструмент для макетирования. К тому же иногда быстрее самому внести правки в макеты, чем писать техническое задание, ждать исполнения, а потом проверять. Да и прототипирование в Figma доступно даже новичку и с определенными навыками не будет занимать много времени, что сделает прототипирование более доступным этапом на проекте.
-
Цели и задачи пользователя.
Следует погрузиться в вопрос пользовательских целей и задач, и понять, в чем их отличие. Мы должны четко понимать какую мы решаем бизнес-проблему и какую бизнес-ценность несем заказчику через нашу новую систему. Не стоит добавлять элементы визуализации, если они не помогают в достижении целей пользователя или не решают какую-либо задачу. Перед добавлением элемента задайте себе следующие вопросы: Для чего этот элемент нужен? Он помогает в решении задачи? Если да, то какой? Эта задача приближает достижение какой-либо из целей пользователя? Также полезным будет отслеживать длину пути пользователя от входа в систему до достижения цели. Для комфортного использования системы этот путь не должен быть слишком длинным.
-
Пользовательские сценарии.
Выясните, какие бывают пользовательские сценарии и что они должны в себя включать.
Плюсы и минусы использования интерактивного прототипа
Работая над этим проектом, мы четко выделили для себя преимущества использования интерактивного прототипа.
-
Интерактивный прототип позволяет всем участникам проекта, от разработчиков до конечных пользователей, лучше понять, как будет работать система. Это помогает избежать недопонимания и снижает вероятность ошибок.
-
Интерактивный прототип упрощает и ускоряет процесс тестирования новых идей и гипотез, позволяя разработчикам быстро определять, какие из них работают, а какие нет.
-
Использование интерактивного прототипа позволяет снизить риски и затраты на разработку и внедрение системы, так как позволяет выявить и исправить ошибки на ранних этапах.
-
Интерактивный прототип помогает понять, как пользователи будут взаимодействовать с системой, и внести необходимые изменения до ее окончательного внедрения.
У работы с интерактивным прототипом есть и недостатки, которые следует учитывать перед принятием решения о его разработке. Это и трудоемкость создания и поддержки прототипа, и длительность подготовительной работы для создания, и высокий уровень детализации макетов для максимизации эффектов и, как следствие, увеличение стоимости проекта и сроков.
Но все эти минусы нивелируется, если мы внесем прототип в план работ по внедрению ИТ-проекта и наберемся опыта чтобы проходить все этапы быстрее. Например, первые сценарии у нас занимали дни работы, следующие мы писали за несколько часов. К тому же с помощью прототипа можно избежать ряд ошибок при разработке информационной системы.
Итак, если вы хотите помочь заказчику подобрать наиболее подходящий инструмент, не внедряя полную версию сложной системы, определиться с конечной версией продукта, или апробировать удобство разрабатываемой системы задолго до ее реализации, то использование интерактивного прототипа будет весьма эффективно. Это позволит получить представление, как будет выглядеть конечный продукт именно в тот период, когда интерфейс разрабатывается с нуля.
ссылка на оригинал статьи https://habr.com/ru/articles/828790/
Добавить комментарий