Прототипирование интерфейсов

Процесс прототипирования интерфейса

В Evergreen используется собственный UX-framework, который включает в себя ряд уровней, которые необходимы для создания успешного проекта. Это: уровень стратегии, набор возможностей, структура, компоновка и поверхность. Также в конце этапа прототипрования интерфейса мы проводим usability-тестирование на целевой аудитории, чтобы проверить гипотезы и скорректировать элементы прототипа. Подробнее о тестировании вы сможете прочитать в этой статье. Ниже мы опишем основные шаги прототипирования интерфейсов.

Стратегия, рынок и целевая аудитория

Мы проводим анализ конкурентов, аналогов и заменителей, чтобы понять рынок и его игроков, найти интересные идеи и решения, а также неудачные примеры, которые не стоит повторять. Определение целевой аудитории позволяет выделить необходимые сегменты и персоны из них. На основе этих документов мы можем классифицировать задачи пользователей, понять какие боли есть у пользователя, какие нужно закрывать в первую очередь.

Набор возможностей и структура

Следующим этапом является создание карты функций, где мы распределяем функции в ответ на задачи пользователей и составление структуры сайта/ приложения/ продукта. Мы составляем навигационную и информационную структуру, а позже тестируем навигацию, чтобы оценить насклько легко пользователь находит нужный раздел. Также на этом этапе возможно создание Customer Journey Map, чтобы визуализировать путь пользователя между точками контакта с бизнесом.

Создание прототипа и тестирование

После создания всех необходимых документов по проектированию начинается этап прототипирования интерфейсов. На первых итерациях мы используем мокапы - низкодетализированные прототипы, которые являются наброском, эскизом будещего интерфейса. На этапе мокапов принимаются решения, какой функционал внедрять, а какой убирать, тестируются идеи брейншторминга, общая логика. После прорабатываются высокодетализированный протип, на котором можно посмотреть на интерфейс “вживую” и проверить удобство всего сайта.

Проектирование архитектуры front-end

Благодаря прототипу можно точно выбрать небходимый стек технологий и сделать оценку работ по фронт-енду. Оценивается количество страниц, навигационная и информационная структура, все динамические элементы, сложность и типы анимаций, как будут предаваться данные, как они будут хранится. Одно из главных преимуществ протипирования интерфейсов - в экономии средств на разработку и дизайн, потому что в случае осутствия прототипа велика возможность, что интерфейс будет неудобен, не продуман, потребует множества переделок, затрат времени и ресурсов.

Подробнее об этапах прототипирования вы можете прочитать в этой статье.

Инструменты для прототипирования интерфейса

Основные инструменты, которые применяет команда Evergreen для прототипирования интерфейсов - это Axure RP, Figma и Invision.

Axure является универсальным интсрументом, в котором можно полностью воспроизвести весь функционал будущего сайта, продукта или сервиса. Благодаря данной программе можно сделать кликабельный прототип, адаптивную версию сайта, показать несколько разных кейсов использования (например, зарегистрированного и незарегистрированного пользователя). Для более простых решений мы используем Figma, в котором можно сделать не только прототип, но и дизайн проекта. Этот инструмент прост в использовании, позволяет делится результатами онлайн, комментировать и взаимодействовать с проектом всей командой. Сервис Invision мы используем для тестирования интерфейса приложений, адаптивной версии сайта или сервиса, он также позволяет коммуницировать со всей командой, делать пометки и оставлять обратную связь о каждом экране.

Детальнее про преимущества и недостатки этих инструментов читайте в статье.