Проектирование IT продукта
Как создавать новые продукты и сценарии
Содержание:
Общий процесс проектирования
Для проектирования продуктов есть понятный алгоритм.
Работает он словно у вас прогружается картинка.
Сначала она нечеткая и покрывает только общие элементы, а по мере времени начинает обрастать деталями.
Работает он словно у вас прогружается картинка.
Сначала она нечеткая и покрывает только общие элементы, а по мере времени начинает обрастать деталями.
Вы начинаете с определения персоны, и ключевых задач с которыми она будет сталкиваться.
Потом для каждой задачи вы проставляете сущности с которыми будет взаимодействовать ваш пользователь. Например управлять профилем, обновлять задачи и т.д.
Затем выстраиваете это в виде user flow в виде последовательности действий и условий.
Готовите на основе этого Wireframes (черновой вариант дизайна, максимально упрощенный).
Уже на их основе собираете дизайн макет, который уже похож на настоящий продукт.
И на готовый макет накидываете логику перехода между экранами и превращаете в прототип.
Прототип тестируем на пользователях.
А теперь каждый из этих шагов разберем подробнее.
Ниже вводные материалы в тему проектирования.
Потом для каждой задачи вы проставляете сущности с которыми будет взаимодействовать ваш пользователь. Например управлять профилем, обновлять задачи и т.д.
Затем выстраиваете это в виде user flow в виде последовательности действий и условий.
Готовите на основе этого Wireframes (черновой вариант дизайна, максимально упрощенный).
Уже на их основе собираете дизайн макет, который уже похож на настоящий продукт.
И на готовый макет накидываете логику перехода между экранами и превращаете в прототип.
Прототип тестируем на пользователях.
А теперь каждый из этих шагов разберем подробнее.
Ниже вводные материалы в тему проектирования.
Персона
Персона – это собирательный образ пользователя.
Она отражает реальные потребности, привычки и мотивацию.
Возьмем в пример Алекса.
Он офисный работник, всегда спешит и не любит стоять в очередях.
Он хочет быстро заказать кофе и не тратить время на сложные экраны.
Она отражает реальные потребности, привычки и мотивацию.
Возьмем в пример Алекса.
Он офисный работник, всегда спешит и не любит стоять в очередях.
Он хочет быстро заказать кофе и не тратить время на сложные экраны.
Информационная архитектура
Это план, по которому устроены разделы и функции в продукте.
ИА помогает пользователю переходить между разделами и делать
это с первой попытки.
В приложении для Алекса это означает чёткую структуру:
экран выбора кофе, экран добавок и экран оплаты.
Всё связано так, чтобы он просто не мог потеряться и смог оформить заказ за пару нажатий.
ИА помогает пользователю переходить между разделами и делать
это с первой попытки.
В приложении для Алекса это означает чёткую структуру:
экран выбора кофе, экран добавок и экран оплаты.
Всё связано так, чтобы он просто не мог потеряться и смог оформить заказ за пару нажатий.
User flow
User flow – это маршрут пользователя между экранами.
Куда надо нажать, какое условие должно выполниться чтобы пользователь достиг цели.
User flow показывает каждый шаг и переход.
Для Алекса этот маршрут:
открыть приложение,
выбрать кофе,
добавить добавки,
оплатить
получить подтверждение.
Здесь важно убрать всё лишнее, чтобы он успел сделать заказ одной рукой находу.
Куда надо нажать, какое условие должно выполниться чтобы пользователь достиг цели.
User flow показывает каждый шаг и переход.
Для Алекса этот маршрут:
открыть приложение,
выбрать кофе,
добавить добавки,
оплатить
получить подтверждение.
Здесь важно убрать всё лишнее, чтобы он успел сделать заказ одной рукой находу.
Wireframes
Wireframes – это наброски экранов без детального дизайна.
Они показывают, где будут основные элементы, кнопки и поля.
В нашем случае - квадрат вместо картинки кофе, прямоугольник вместо кнопки «Оплатить».
Мы проверяем, удобно ли Алексу нажимать эти блоки, прежде чем добавлять цвета и иконки.
И сможет ли он справиться с интерфейсом держа в одной руке ноутбук.
Они показывают, где будут основные элементы, кнопки и поля.
В нашем случае - квадрат вместо картинки кофе, прямоугольник вместо кнопки «Оплатить».
Мы проверяем, удобно ли Алексу нажимать эти блоки, прежде чем добавлять цвета и иконки.
И сможет ли он справиться с интерфейсом держа в одной руке ноутбук.
Дизайн макет
Это статичное, но уже реалистичное отображение экранов.
Здесь появляются цвета, шрифты и картинки.
Для Алекса мы добавляем фото кофе, аккуратные кнопки и фирменный стиль.
Он видит, как будет выглядеть приложение, но пока не может ничего нажать.
Здесь появляются цвета, шрифты и картинки.
Для Алекса мы добавляем фото кофе, аккуратные кнопки и фирменный стиль.
Он видит, как будет выглядеть приложение, но пока не может ничего нажать.
Дизайн прототип
Дизайн прототип – это интерактивная версия макета.
Экран «Выбор кофе» переходит к экрану «Оплата» одним нажатием.
Алекс кликает на кнопки и понимает, будет ли ему удобно.
Через прототип мы проверяем логику и юзабилити до настоящей разработки. Потому что потом что то менять будет кратно дороже.
Экран «Выбор кофе» переходит к экрану «Оплата» одним нажатием.
Алекс кликает на кнопки и понимает, будет ли ему удобно.
Через прототип мы проверяем логику и юзабилити до настоящей разработки. Потому что потом что то менять будет кратно дороже.
UX исследования
Это сбор отзывов и наблюдений за реальными пользователями.
Мы приглашаем людей вроде Алекса и просим сделать заказ в прототипе.
Смотрим, где они путаются, что ищут, какие вопросы задают.
После этого меняем дизайн или упрощаем шаги, чтобы всё стало логичным и быстрым.
Мы приглашаем людей вроде Алекса и просим сделать заказ в прототипе.
Смотрим, где они путаются, что ищут, какие вопросы задают.
После этого меняем дизайн или упрощаем шаги, чтобы всё стало логичным и быстрым.
Как вам материалы?
Об авторе:
Еще материалы по теме продакт менеджмента: