Привет, читатель! В этой статье я хочу поделиться своим видением способов прототипирования для широкого спектра задач, которые стоят перед дизайнерами. Прототип позволяет на ранних этапах дизайна рассмотреть и «пощупать» часть продукта или продукт в целом, при этом не привлекая ресурсы разработки. Та же Figma позволяет собирать очень правдоподобные прототипы, которые помогают дизайнеру и команде в целом протестировать, проанализировать юзабилити. Важная миссия прототипов – наглядно демонстрировать пользовательский опыт и помогать его исследовать. Когда дизайнер делает макеты страниц сайта, проектирует навигацию по интерфейсу или формирует интерактивные взаимодействия – ему очень важно перепроверить себя и убедиться, что всё делается в нужном ключе. И очень часто тут помогают прототипы. В некоторых ситуациях можно обойтись минимальной детализацией, а иногда желательно приблизить прототип к реальному продукту. И тут возникает вопрос: как понять, когда и насколько подробным должен быть прототип? Чтобы на него ответить, нужно сначала определиться с целью прототипирования. Когда работаешь над оптимизацией пути пользователя в продукте, полезно ставить себя на его место: посмотреть его глазами и пройти самостоятельно путь до достижения цели. Для этого достаточно собрать простой кликабельный прототип экранов – он собирается быстро, но при этом он достаточно эффективен. Давай смоделируем такую ситуацию на сайте электронных книг: по данным системы аналитики только очень малая часть аудитории переходит в профиль для оформления абонемента. Для наглядности представим, что по сценарию пользователь видит возможность покупки абонемента только после перехода в раздел «Мои покупки» внутри профиля. У вас есть гипотеза, что можно сократить путь – перенести абонемент непосредственно в раздел профиля, без перехода на отдельную страницу. Можно быстро собрать прототип с новым сценарием пути пользователя и показать его в качестве решения. Для вышеописанной ситуации, дизайнеру не нужно углубляться в детали в прототипе. Вполне достаточно обозначить экраны с целевыми элементами на них, чтобы продемонстрировать работу пути пользователя по шагам. Иначе есть риск потерять много времени на прототипирование. Из-за обилия мелких деталей во время тестирования фокус внимания респондентов может смещаться не туда, куда нужно. Но есть и другие ситуации, когда без подробных прототипов не обойтись. Когда мы добавляем товары в корзину, выбираем на карте адрес и способ доставки или оставляем чаевые – всё это может происходить в рамках одного окна. Но для этого мы совершаем на экране несколько взаимодействий. Иногда можно заметить места, когда взаимодействия пользователя с интерфейсом можно считать проблемными. Часто вариантов решения по улучшению взаимодействия может быть несколько. Чтобы проще было выбрать подходящее решение, обычно делают несколько прототипов с микровзаимодействиями. Продолжим разбираться на примере сайта с электронными книгами. Представь ситуацию: по CJM видно, что пользователям сложно искать книги на сайте. В общих чертах эту проблему можно описать так: поиск неудобен и часто приходится перебирать ключевые слова, чтобы найти нужный вариант. Есть минимум три решения: Сделать поисковые подсказки по аналогии с поиском в браузере Google. Расширить поиск, чтобы он работал по любым параметрам книг: наименование книги, автор, жанр и так далее. Сделать и то и другое.  Исходя из примера, можно собрать целых три прототипа взаимодействия с поиском, каждый из которых можно (и нужно) тестировать отдельно.Конечно на это уйдёт больше времени, чем на создание простого кликабельного прототипа экранов. Но не стоит сильно переживать: даже если ни один из вариантов решения не подойдёт, такие прототипы собирать проще, чем прототип всего интерфейса целиком.  Важно детализировать только необходимые элементы и настраивать анимации в рамках взаимодействия с ними. В качестве примеров прототипа можно привести следующие действия: вызов диалоговых окон, анимацию изменений элемента или переходов между его состояниями, появление уведомлений. Когда вносите большие изменения в дизайн продукта или делаете интерфейс с нуля, важно увидеть всю картину целиком и проверить формируемый пользовательский опыт. Раннее тестирование на детализированном прототипе поможет увидеть узкие места: где-то не очень удобно получилось, где-то пользователь может запутаться. Детальный правдоподобный прототип всего интерфейса поможет увидеть работу будущего интерфейса целиком и выявить зоны риска юзабилити. Прототип должен работать так, чтобы с его помощью можно было пройти по всем ключевым точкам интерфейса — здесь полезно опираться на пользовательские сценарии (userflow). В большинстве случаев нужно ещё дополнительно добавить кликабельные анимированные взаимодействия на этих ключевых точках путей пользователя: показ модальных окон, тултипов, уведомлений и других элементов интерфейса. Простой кликабельный прототип экранов поможет быстро проанализировать и протестировать путь пользователя. Можно обойтись минимальной детализацией экранов. Детальный прототип микровзаимодействий поможет оценить удобство взаимодействия на отдельных этапах пути пользователя и найти эффективное решение или компромисс. Необходима высокая детализация прототипа в рамках взаимодействий. Правдоподобный прототип всего интерфейса поможет увидеть работу будущего интерфейса целиком и на ранних этапах выявлять зоны риска юзабилити. Необходима максимальная детализация и правдоподобность прототипа. Надеюсь, статья для тебя была познавательной. Напомню, что это лишь моё видение, моё понимание использования прототипов как инструмента решения задач дизайнера.  Продуктовый дизайнер