Дизайн прототип продукта
Как создать пользовательский сценарий в виде дизайн-прототипа
Содержание:
Что такое дизайн прототип
Пример дизайн прототипа (Источник)
Дизайн-прототипы – это оживлённые макеты, в которых уже можно покликать и посмотреть, как пользователь будет взаимодействовать с интерфейсом.
Если макеты это статичный экран с цветами и шрифтами, то прототипы позволяют переходить с экрана на экран, нажимать кнопки и проверять логику.
Например, если на макете видна кнопка «Заказать», то в прототипе можно нажать на неё и посмотреть, куда пользователь попадёт дальше – на экран оформления заказа или в корзину.
Прототипы нужны чтобы проверить все ли понятно пользователям.
Нет ли каких-то провалов по логике.
Все ли экраны подготовил дизайнер.
Все ли состояния экранов учтены.
И с помощью прототипов можно закрыть несколько целей:
Если макеты это статичный экран с цветами и шрифтами, то прототипы позволяют переходить с экрана на экран, нажимать кнопки и проверять логику.
Например, если на макете видна кнопка «Заказать», то в прототипе можно нажать на неё и посмотреть, куда пользователь попадёт дальше – на экран оформления заказа или в корзину.
Прототипы нужны чтобы проверить все ли понятно пользователям.
Нет ли каких-то провалов по логике.
Все ли экраны подготовил дизайнер.
Все ли состояния экранов учтены.
И с помощью прототипов можно закрыть несколько целей:
- проверить дизайн на пользователях
- провести презентацию (для тех кто не из IT прототипы даже выдают как тестовую версию продукта)
- объяснить логику работы продукта для команды разработки
Как создать дизайн прототип
Дизайн-прототип обычно создаётся на основе уже готовых макетов.
Сначала берётся каждый экран с детальными цветами, шрифтами и элементами.
Затем в Figma или InVision к этим экранам привязываются клики и переходы.
Иногда переходы могут быть со всплыванием, с выставленной задержкой по времени, со сдвигом - все для того чтобы наиболее точно передать реальную работу продукта.
Когда прототип готов, его дают коллегам, стейкхолдерам и готовят тесты для пользователей.
В таком виде уже видно, где интерфейс сбивает с толку, какие кнопки лучше передвинуть, или где надо придется пересобирать весь пользовательский сценарий потому что вообще ничего не понятно.
Сначала берётся каждый экран с детальными цветами, шрифтами и элементами.
Затем в Figma или InVision к этим экранам привязываются клики и переходы.
Иногда переходы могут быть со всплыванием, с выставленной задержкой по времени, со сдвигом - все для того чтобы наиболее точно передать реальную работу продукта.
Когда прототип готов, его дают коллегам, стейкхолдерам и готовят тесты для пользователей.
В таком виде уже видно, где интерфейс сбивает с толку, какие кнопки лучше передвинуть, или где надо придется пересобирать весь пользовательский сценарий потому что вообще ничего не понятно.
Как тестировать дизайн прототип
Тестировать дизайн-прототип лучше всего на реальных пользователях, которые раньше его не видели.
Подготовка
Сначала определим контекст.
Какую задачу решает прототип и что именно хочется узнать в ходе тестирования.
Например, может быть важно проверить, легко ли пользователи находят кнопку «Купить» или понимают, как оплатить заказ.
При этом надо задать критерии успешности.
Мы считаем, что если 70% участников справятся со сценарием «Купить» то прототип будет считаться удачным.
Когда цель ясна, подбираются несколько сценариев, которые пользователь должен выполнить в прототипе.
Это могут быть простые действия вроде «зайти в каталог и выбрать товар», «настроить фильтр», «оформить доставку».
Сценарии важно сформулировать так, чтобы человек понимал задачу, но не получал подсказки вроде «нажми на кнопку в правом верхнем углу».
Лучше сказать: «Представьте, что вы хотите заказать себе пиццу на ужин», и пусть пользователь сам ищет, как это сделать.
Исследование
Далее приглашаются участники.
Обычно стараются подобрать людей, которые похожи на будущих пользователей вашего продукта.
С каждым пользователям проводят короткий брифинг: объясняют, что это пока не настоящая программа, а прототип, и что очень важно делиться своими мыслями вслух.
Это помогает понять, почему человек кликает именно туда, а не сюда, и где возникают затруднения. С этим у многих пользователей возникают трудности, так что можно несколько раз в ходе тестирования напомнить о том что нужно делиться мыслями.
Во время теста участник пытается выполнить подготовленные сценарии, а исследователь внимательно смотрит и слушает.
Ни в коем случае нельзя подсказывать. Только фиксировать, где пользователь застрял или что его смутило.
Иногда полезно спрашивать: «Что вы сейчас ищете?» или «Что, по-вашему, должно произойти, если нажать сюда?». Такие вопросы помогают понять логику мышления.
Сбор результатов
После завершения теста с каждым участником обычно делают короткое интервью: узнают общее впечатление, спрашивают, что было непонятно или неудобно, что понравилось, а что показалось лишним.
Иногда такой разговор даёт не меньше инсайтов, чем само наблюдение за действиями.
Когда все тесты проведены, вся команда (продакт, дизайнер, разработчики) собираются и разбирают самые важные наблюдения.
Например, может оказаться, что люди не видят поле для промокодов или путают кнопку «Добавить в корзину» с кнопкой «Избранное».
Все эти проблемы и улучшения фиксируются, а потом вносятся правки в прототип.
Иногда бывает, что нужно полностью пересмотреть логику целого блока, если большинство людей не смогли разобраться, как им воспользоваться.
Если на этом этапе выявляются проблемы, их легче и дешевле решить, чем после полноценной разработки.
Когда все критерии успеха были достигнуты можно зафиксировать прототипы и начать описывать их для разработки.
Подготовка
Сначала определим контекст.
Какую задачу решает прототип и что именно хочется узнать в ходе тестирования.
Например, может быть важно проверить, легко ли пользователи находят кнопку «Купить» или понимают, как оплатить заказ.
При этом надо задать критерии успешности.
Мы считаем, что если 70% участников справятся со сценарием «Купить» то прототип будет считаться удачным.
Когда цель ясна, подбираются несколько сценариев, которые пользователь должен выполнить в прототипе.
Это могут быть простые действия вроде «зайти в каталог и выбрать товар», «настроить фильтр», «оформить доставку».
Сценарии важно сформулировать так, чтобы человек понимал задачу, но не получал подсказки вроде «нажми на кнопку в правом верхнем углу».
Лучше сказать: «Представьте, что вы хотите заказать себе пиццу на ужин», и пусть пользователь сам ищет, как это сделать.
Исследование
Далее приглашаются участники.
Обычно стараются подобрать людей, которые похожи на будущих пользователей вашего продукта.
С каждым пользователям проводят короткий брифинг: объясняют, что это пока не настоящая программа, а прототип, и что очень важно делиться своими мыслями вслух.
Это помогает понять, почему человек кликает именно туда, а не сюда, и где возникают затруднения. С этим у многих пользователей возникают трудности, так что можно несколько раз в ходе тестирования напомнить о том что нужно делиться мыслями.
Во время теста участник пытается выполнить подготовленные сценарии, а исследователь внимательно смотрит и слушает.
Ни в коем случае нельзя подсказывать. Только фиксировать, где пользователь застрял или что его смутило.
Иногда полезно спрашивать: «Что вы сейчас ищете?» или «Что, по-вашему, должно произойти, если нажать сюда?». Такие вопросы помогают понять логику мышления.
Сбор результатов
После завершения теста с каждым участником обычно делают короткое интервью: узнают общее впечатление, спрашивают, что было непонятно или неудобно, что понравилось, а что показалось лишним.
Иногда такой разговор даёт не меньше инсайтов, чем само наблюдение за действиями.
Когда все тесты проведены, вся команда (продакт, дизайнер, разработчики) собираются и разбирают самые важные наблюдения.
Например, может оказаться, что люди не видят поле для промокодов или путают кнопку «Добавить в корзину» с кнопкой «Избранное».
Все эти проблемы и улучшения фиксируются, а потом вносятся правки в прототип.
Иногда бывает, что нужно полностью пересмотреть логику целого блока, если большинство людей не смогли разобраться, как им воспользоваться.
Если на этом этапе выявляются проблемы, их легче и дешевле решить, чем после полноценной разработки.
Когда все критерии успеха были достигнуты можно зафиксировать прототипы и начать описывать их для разработки.
Примеры прототипов
Самые популярные инструменты для прототипирования сейчас это Figma, InVision, Sketch.
Но принцип у всех плюс минус одинаковый.
Выделяете элемент на экране который должен вызывать какое то действие.
Выбираете какое именно действие он должен вызывать (переход, всплывание другого экрана и т.д.)
Выбираете следующий экран/окно которое должно отобразиться.
Вот несколько примеров такой логики.
Но принцип у всех плюс минус одинаковый.
Выделяете элемент на экране который должен вызывать какое то действие.
Выбираете какое именно действие он должен вызывать (переход, всплывание другого экрана и т.д.)
Выбираете следующий экран/окно которое должно отобразиться.
Вот несколько примеров такой логики.
Как вам материалы?
Об авторе:
Еще материалы по теме продакт менеджмента: