Этап 5. Прототипирование #дизайнпроект
Меня зовут Юля, я продуктовый дизайнер в экосистеме Мир Привилегий.
В этом цикле статей я создам проект-концепцию мобильного приложения для портфолио, который пройдет все стадии формирования дизайн-проекта.
Тема “приложение для выбора мероприятий”.
Автор статьи — Юлия Слащилина
Связаться со мной — телеграм
Мой телеграм-канал “Другой дизайн”, где я делюсь опытом работы в продукте и пишу о дизайне.
В прошлой статье мы уже приступали к первому этапу прототипирования. Далее мы рассмотрим его более детально.
Разработка прототипа важная часть разработки проекта. Как мы уже выяснили, происходит это не в первую очередь, хотя иногда мыслительный процесс может начинаться и с набросков прототипа, так как часто нужно сразу иметь хотя бы приблизительное представление визуальной составляющей функционала. Обычно это происходит уже в реализованных сервисах, когда нужно внедрить новые фичи, скорректировать существующие или внести какие либо изменения в интерфейс.
В данном случае прототипирование следует после исследований и проработки полного представления о работе продукта.
Что важно знать и что собой представляет прототипирование?
Прототип — это упрощенный вид интерфейса, чаще всего с условными обозначениями элементов.
В зависимости от своего назначения он может быть и интерактивным. Прототип можно составлять от руки на бумаге (Low-fi prototype) или с помощью программ (high-fi prototype). У меня обычно два этапа прототипирования — наброски от руки параллельно с отрисовкой схем и после более конкретный и аккуратный в Фигме. Прототип позволяет понять состав интерфейса и то, как элементы будут между собой взаимосвязаны. Иногда он может и вовсе влиять на структуру приложения, но это индивидуально, в зависимости от гибкости технического задания.
В прототипе необходимо отобразить иерархию информации, которая будет отображаться на экране, принято отображать ее условно.
Что касается количества и перечня самих экранов, под которые необходим прототип, то обычно это несколько главных экранов из таббара и пару второстепенных, если в них заключается часть концепции сервиса. Тем не менее, в прототипировании нет универсальных правил, но важно грамотно отобразить ключевой сценарий работы продукта.
В своем проекте я отобразила следующие экраны в прототипе:
- Стартовый экран (первый экран онбординга)
- Экран с домашней страницей (лента популярных событий и подписок)
- Экран с выбором мероприятия по критериям
- Экран карты с прогулками, маршрутами и мероприятиями на карте
- Экран профиля
- Экран при новом входе в приложение с рейтингом удовольствия
Помимо этого я стараюсь визуализировать логику между экранами, обозначить переходы на общие экраны, понять, какие еще будут ключевые и какие необходимо отрисовать для проекта.
Для связывания экранов использую плагин autoflow для фигмы. Он тут.
Прототипов может быть всего несколько, как в моем случае, а может быть и гораздо больше. Иногда требуется предварительно отрисовать и вовсе все экраны, с полной логикой и взаимосвязью, если есть уже проработанная иерархия информации, которая как раз будет отображать сценарии. Такие прототипы делают интерактивными, чтобы можно было имитированно прощупать работу сервиса.
Выглядеть это может так. Тут прототипы более детализированные, как и описывала выше, с утверждённой иерархией, визуальным стилем и логикой.
Кейсы работы с прототипами бывают разные, многое зависит от того, какие процессы выстроены внутри компании. На прошлом месте работы я вела задачу от начала постановки и прописывала взаимодействие экранов и элементов интерфейса самостоятельно. На настоящем месте этот процесс выстроен по-другому. Наш аналитик, после того, как отработает задачу, пропишет постановку и набросает прототипы (чаще всего в Paint, а некоторые умеют пользоваться Balsamiq) отдает ее мне, я изучаю, корректирую прототипы, логику, затем следует обсуждение с аргументацией своих предположений, после корректировка постановки аналитиком и дальнейшая реализация. По сути каждый вкладывает свое видение работы функционала в зависимости от своих знаний и компетенций. Все это должно быть протестировано впоследствии.
Итого. Прототипирование — это мыслительный процесс, который позволяет свизуализировать данные, почувствовать всю работу, проделанную «до», на деле. На этом этапе важно помнить, что тут главное не детализация, UI и картинки, а отображение актуального сценария и информации для пользователя, а UI это уже следующая ступень)
Спасибо за внимание!
