От стратегии до оформления: пять уровней UX-дизайна

В этой статье предлагаю углубиться в тему UX-дизайна и разобрать по шагам, как строится процесс проектирования интерфейса, с чего все начинается и как прийти к желаемому результату. Джесси Гарретт, информационный архитектор и автор книги «Элементы опыта взаимодействия», в 1999 году придумал модель пяти уровней UX. Эта модель поможет вам лучше понять пользователей и определиться с тем, какую ценность принесет им ваш сайт.

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

Уровень стратегии

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

Уровень возможностей

Уровень возможностей — это перечисление набора функций сайта, которые будут доступны для пользователей. Также на этом уровне определяем, какой контент увидят пользователи. Способ организации этих возможностей будет описан детальнее уже на уровне структуры.

Уровень структуры

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

Если уровень стратегии и уровень возможностей можно было описать текстом, то начиная с уровня структуры появляются графические артефакты. Артефакт – это профессиональное название оформленных результатов работы дизайнера. Например, артефакт работы UX-дизайнера – это диаграмма или вайрфрейм. Артефакт работы UI-дизайнера – это дизайн-макеты. На изображении ниже вы видите схему сайта: из нее можно понять, сколько будет страниц и какая там будет информация.

Уровень компоновки

На уровне компоновки решаются вопросы наиболее эффективного расположения различных элементов интерфейса. Мы размещаем меню сайта, кнопки, формы и контент на тех местах страницы, на которых их потом увидят пользователи. Также на этом уровне мы задаемся вопросами: «А удобно ли такое расположение пользователю?», «Можно ли его как-то улучшить?». В результате должен получиться эскиз (набросок) будущего сайта, который выглядит примерно так.

Уровень поверхности

Уровень поверхности представляет собой внешний вид сайта с точки зрения пользователя. Если на прошлом уровне мы размещали элементы сайта и контент в правильных местах, то на этом уровне важно то, как выглядят все элементы и как они сочетаются вместе. Главный вопрос, на который отвечает этот уровень – решает ли дизайн задачу пользователя. Всего через пять шагов от идеи мы добрались до финальной реализации сайта.

Заключение

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

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