MVP. Как выводить на рынок товары и услуги, которые нравятся покупателям - Дэн Олсен Страница 38

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

Карты сайтов

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

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

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

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

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

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

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

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

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

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

Если для выполнения задачи продукту требуется достаточно продолжительное время, важно дать пользователю представление о достигнутом прогрессе и