Дэн Олсен – MVP. Как выводить на рынок товары и услуги, которые нравятся покупателям (страница 30)

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

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

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

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

Информационная инфраструктура

Следующим (вторым снизу) слоем айсберга UX-дизайна является информационная архитектура. Этот термин часто используется в сокращении – IA. Это составляющая проектирования, ответственная за определение того, как должны быть структурированы информационная и функциональная части программного продукта. Обычно в состав продукта входят несколько страниц или экранов, поэтому существует множество способов их организации. Клиент получает доступ к различным экранам, используя встроенную в приложение навигационную систему. При поиске определенной страницы пользователь полагается на навигационные метки, чтобы понять, как организован продукт и где находится нужная ему страница. С целью выяснить мнение пользователей о взаимной связанности различных компонентов продукта и определить предпочитаемую ими схему организации часто используется метод, который называется «Сортировка карточек». Хорошо продуманная информационная архитектура организует внутренние компоненты продукта интуитивно понятным пользователям образом, снабжает их легко понятными указателями, что в совокупности обеспечивает высокий уровень юзабилити и результативности поиска.

Под результативностью поиска следует понимать, насколько легко пользователям продукта удается найти предмет своих поисков. Чтобы измерить этот показатель, вы могли бы попросить группу участников тестирования найти внутри вашего продукта определенную страницу или экран, после чего высчитать процент успешных попыток. Вы также можете оценить результативность поиска, просмотрев шаблоны навигации с использованием аналитических инструментов. Это позволит получить ответы на такие вопросы, как «Всегда ли пользователи выбирали кратчайший путь, чтобы попасть на нужную страницу? Или они добирались до цели обходными путями и часто нажимали кнопку “Назад” в своем браузере?»

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

Карты сайтов

Карта сайта используется для описания структуры продукта. Несмотря на то что термин «карта сайта» происходит от слова «сайт» (как в «веб-сайте»), под ним следует понимать результат проектирования структуры любого программного продукта, включая мобильные приложения. Карта сайта показывает все страницы или экраны, входящие в состав продукта, то, как они распределены по разделам, а также высокоуровневые шаблоны навигации. Кроме этого, карта сайта содержит заголовки страниц и метки, используемые для обозначения разделов продукта. Сформированную карту сайта необходимо протестировать на пользователях, чтобы убедиться, что метки действительно передают смысловое содержание страниц и что пользователи легко ориентируются в предложенной структуре продукта. На Рисунке 8.2 приведен пример карты сайта для веб-приложения, позволяющего проводить рекламные кампании с использованием видеороликов.

Каждый прямоугольник на этой карте обозначает определенную страницу. Соединительные линии показывают пути навигации между страницами. В некоторых случаях навигация предполагается односторонней, что обозначено стрелкой (см. условные обозначения на левой стороне). Элементы глобальной навигации – страницы, на которые пользователь может перейти из любого места, – четко определены. Уровень элементов глобальной навигации, расположенный в верхней части карты, включает в себя основные разделы продукта. Ниже показаны страницы, на которые попадают пользователи, когда переходят по ссылкам с верхнего уровня. Для каждого раздела сайта, входящие в него страницы показаны в иерархическом порядке. Кроме этого, на карте обозначено, какие страницы ведут себя нестандартным образом – открываются во всплывающем окне либо в новой вкладке браузера.

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

Рисунок 8.2. Пример карты сайта

Интерактивный дизайн

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

Предположим, что у вашего продукта есть регистрационная форма. Решения о том, какую именно информацию вы хотите получить от пользователя, как должны быть оформлены поля для заполнения, какие при этом используются шаблоны, – все это часть интерактивного дизайна. Так же как и решение о том, что должно происходить после того, как пользователь нажмет кнопку «Зарегистрироваться». Любая пользовательская задача, состоящая из нескольких страниц или шагов, требует применения интерактивного дизайна. Навигация, отвечающая за обеспечение возможности переходов между страницами или экранами приложения, также является широко используемым инструментом интерактивного взаимодействия, связанного с информационной архитектурой.

Если продукт предлагает пользователю помимо обычных какие-либо особые «операционные режимы» – например, режим редактирования или предварительного просмотра, – это также относится к дизайну взаимодействия пользователя с продуктом. Аналогично, если приложение предусматривает отслеживание различных состояний (признаков) объекта, которые влияют на то, какие действия с этим объектом может или не может совершать пользователь, это также являются частью интерактивного дизайна. Например, на сайте интернет-магазина имеется выставленный на продажу товар. Он может находиться в различных состояниях: быть в наличии, или отсутствовать, лежать в корзине покупок или в составе уже сделанного заказа. Все переходы между этими состояниями определяются решениями, принимаемыми в области интерактивного дизайна: для того чтобы пользователь имел возможность положить товар в корзину и перейти к его оплате, он должен быть в наличии, чтобы оформить заказ. Хорошо продуманный интерактивный дизайн обеспечивает видимость текущего состояния объекта на каждом шаге пользовательского потока. Часто эти состояния могут быть тесно связаны с концептуальным дизайном продукта (нижний слой айсберга). В приведенном выше примере концептуальный дизайн подразумевает наличие виртуальной корзины для покупок, похожей на реальную корзину, которой пользуются покупатели в супермаркете. В приложении Uber также имеется фундаментальная связь между концептуальным дизайном и текущим состоянием поездки пользователя. Прежде чем вы закажете такси, приложение показывает на экране все ближайшие доступные для заказа автомобили; но как только вы сделаете свой заказ, вы будете видеть текущее положение только заказанного такси.