5 уровней UX: как создавать удобные интерфейсы18.04.2017 15:07

Денис Нарижный, руководитель «Студия F1» и создатель сервиса AskUsers.ru, написал специально для «Нетологии» колонку о том, как разрабатывать понятные продукты и интерфейсы и проверять свои идеи на каждом отдельном этапе.

Это история не про вдохновение и видение. А о методе, который помогает разрабатывать эффективные системы и понятный дизайн. Просто, понятно, пошагово.

Модель была создана в начале 2000-х Джесси Гарреттом и получила название »5 уровней UX». Простая для понимания и предельно наглядная, она прекрасно иллюстрирует процесс разработки любой системы и помогает определиться с тем, что именно нужно вашим пользователям.

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

Диаграмма Гарретта

Базой для модели стала диаграмма, при помощи которой Гарретт сумел показать связь между разными подходами к дизайну в рамках проектирования пользовательского опыта.

Двигаясь от абстрактного к конкретному и от концепции к реализации, Гарретт выделил пять уровней.

В зависимости от назначения системы: ориентации на действие или на предоставление информации — основные задачи могут описываться по-разному. Но общий смысл от этого не меняется.

В оригинале диаграмма выглядит так (кликабельно):

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

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

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

Продуктом может быть что угодно: новый сайт, приложение, информационная или навигационная система, интерфейс.

Отвечаем на вопросы:

• Для чего мы создаем продукт?
• Какие цели мы перед собой ставим?
• Кто наши пользователи? Для кого мы делаем продукт?
• Какие задачи мы поможем решить пользователям?
• Почему они будут пользоваться именно нашим решением?

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

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

Какие тесты проводить:

• исследование этнографии,
• интервью, онлайн-опросы и фокус-группы,
• концепт-тесты.

Результат проработки уровня стратегии — четко сформулированная миссия, цели и задачи проекта, понимание, что и для кого делается, выделение основных конкурентных преимуществ.

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

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

Отвечаем на вопросы:

• Какие функции нужны для решения пользовательских задач?
• Какую функциональность предлагают конкуренты?
• Какой контент нужен пользователям?

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

Какие тесты проводить:

• концепт-тесты,
• тест «Сортировка карточек»,
• интервью, онлайн-опросы и фокус-группы.

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

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

Проработка опыта взаимодействия пользователя с продуктом. Разработка информационной архитектуры и проектирование пользовательского опыта.

Отвечаем на вопросы:

• Как помочь пользователю решить задачу за минимальное время и количество шагов?
• Понятна ли архитектура проекта пользователям?
• Соответствует ли дизайн ожиданиям пользователей?
• Можно ли безболезненно изменять архитектуру при необходимости?

Основная задача — создать архитектуру, которая соответствует ожиданиям пользователей и при этом действительно помогает решать пользовательские задачи.

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

Какие тесты проводить:

• юзабилити-исследование,
• A/B и Side by Side тесты,
• тест привлекательности,
• тестирование методом совместного дизайна,
• интервью, онлайн-опросы, фокус-группы,
• сортировка карточек.

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

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

Создание прототипов на основе информации, полученной в ходе прохождения предыдущих уровней. Переход от абстрактного видения продукта к его конкретному воплощению.

Отвечаем на вопросы:

• Соответствует ли прототип нужному функционалу и требованиям информационной архитектуры?
• Удобно ли расположены контентные блоки?
• Удобна ли для пользователей система навигации?
• Соответствует ли прототип требованиям и стандартам отрасли?
• Действительно ли это оптимальное решение, или можно что-то оптимизировать и улучшить прототип?

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

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

• юзабилити-исследование,
• A/B тестирование,
• Side by Side тесты,
• тест привлекательности,
• совместный дизайн,
• интервью, онлайн-опросы, фокус-группы,
• сортировка карточек.

Результат — проверенный на реальных пользователей прототип продукта.

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

Финальный уровень — визуальное оформление прототипа: дизайн, типографика, верстка. На этом уровне вся абстракция конкретизируется до уровня готового продукта.

В ходе работы над визуальной составляющей мы задаем себе много вопросов, среди которых наиболее значимые:

• Удобен ли наш интерфейс для пользователей?
• Решает ли он задачи, описанные на первых уровнях?
• Соответствует ли он тем функциям, которые в него должны быть заложены?
• Помогает ли дизайн пользователю?
• Решает ли визуальное оформление задачи, которые были заложены при проектировании пользовательского опыта?

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

Результат работы на этом уровне — полностью готовый к дальнейшей работе продукт: интерфейс, сайт, приложение, веб-сервис или любая другая система.

Но это еще не конец

Потому что самое интересное только начинается. После релиза продукта и получения обратной связи от настоящих клиентов наступает следующий этап — непрерывная доработка и оптимизация проекта.

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Полный текст статьи читайте на Нетология