Глава 9

Визуальное восприятие: вы на меня смотрите?

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

Обсуждение этого вопроса хотелось бы начать с визуального восприятия и внимания (см. рис. 9.1). С точки зрения этого аспекта нам следует получить ответы на следующие вопросы.

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

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

Куда они смотрят? Айтрекинг может сказать многое, но не все

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

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

Но далеко не всегда стоит отслеживать направление взгляда, если можно применить старые добрые методы наблюдения вроде тех, о которых мы говорили в предыдущей главе. Проводя контекстное интервью, я стараюсь разместиться под углом примерно 90 градусов относительно участника (так, чтобы держаться слегка позади и не отвлекать его от работы, как показано на рис. 9.2). Для этого есть несколько причин:

Людям слегка неудобно разговаривать со мной, оглядываясь назад. Это означает, что главным образом они смотрят на монитор или на то, с чем работают, а не на меня (одновременно позволяя мне лучше рассмотреть, что они делают, по каким иконкам кликают и т. п.).

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

Чтобы проанализировать, к чему прикованы глаза участников, давайте посмотрим на рис. 9.3.

На картинке слева показаны четыре пары часов, и под каждой из них — две кнопки. Хотя вы с первого взгляда определяете, что это именно кнопки, их визуальные характеристики и масштабы не позволяют судить, какая из них — кнопка «Купить», а какая — «Сохранить для сравнения». Последняя должна быть второстепенной, но при таком дизайне страницы она привлекает столько же внимания, сколько и кнопка «Купить». Эту проблему следует решать совместно с графическим дизайнером.

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

Деловая ситуация: служба безопасности

Проблема. Хотя большинство моих примеров связано с цифровыми интерфейсами, дизайнерам продуктов и услуг стоит смотреть на вопросы привлечения внимания более широко. В этом случае я работал с группой сотрудников, на которых лежит колоссальная ответственность: они обеспечивают безопасность в крупном футбольном клубе (в том числе на большом стадионе). Я обнаружил, что их внимание рассеивается между большим количеством объектов. В клубе имеется множество различных систем и инструментов обеспечения безопасности (сигналов тревоги, звонков и прочих звуковых сигналов), и в обязанности службы безопасности входит их постоянный контроль.

• Сотни камер, количество которых постоянно растет.
• Специальные камеры, направленные на проблемные места (например, дверь, через которую люди просачиваются в задние ряды кресел).
• Рации, по которым пешие патрули постоянно передают информацию.
• Электронная почта.
• Текстовые сообщения.
• Переговоры местной полиции (обеспечивающие постоянную коммуникацию).
• Бесконтактные магнитные замки (которые постоянно пищат).
• Система радиовещания.
• Пожарная сигнализация.
• Тревожные системы в лифтах.
• Электрические сигнальные системы.
• Кабельная сеть передачи новостей.
• Телефонные узлы.

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

Рекомендации. При таком количестве визуальных и звуковых отвлекающих факторов важно выделять наиболее важный из них в каждый конкретный момент. Именно на этом факторе должно сосредоточиваться внимание сотрудников. Моя команда разработала систему, весьма похожую на ленту новостей Facebook, но снабженную сложной системой фильтров, гарантирующих попадание в ленту только действительно важной информации (никаких котиков!). Для каждой потенциальной проблемы (террористический акт, пожар, заклинивание двери и т. п.) разработана специальная последовательность действий, и персонал должен идентифицировать конкретное место, где возникает та или иная проблема. Система также включает перечень приоритетов на данный момент, чтобы помочь сотрудникам справиться с огромным количеством событий, требующих их внимания. Лента имеет механизм прокручивания и может быть настроена на выделение событий какого-либо одного типа или всех типов одновременно, но только после того, как они достигнут определенного уровня важности. В результате сотрудники знают, на что обращать внимание в первую очередь и как звучит настоящий сигнал тревоги.

Тепловые карты

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

Деловая ситуация: иерархия сайтов

Проблема. Когда участникам эксперимента предъявили оригинальную версию сайта, изображенного на рис. 9.4 слева ( — предшественник Xfinity), те, к нашему удивлению, уставились всего лишь на один элемент интерфейса в верхнем левом углу, игнорируя при этом нижнюю и правую часть страницы. Это подтверждал и айтрекинг, и тот факт, что по ссылкам на сайт нашего партнера, расположенным внизу страницы, никто не кликал (нельзя сказать, чтобы партнера это радовало). Проблема заключалась в визуальном контрасте. Верхний левый угол предыдущей версии интерфейса не только отличался более темным цветом, но и был более интересным: здесь располагалось больше видео и картинок, на которые реагировали системы визуального восприятия участников.

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

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

Чтобы разобраться в этом, мы должны…

Двигаться вместе с потоком

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

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

Деловая ситуация: сайт для проведения аукционов

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

Результаты айтрекинга подтвердили информацию об ожиданиях и причинах растерянности пользователей: они пристально смотрели на пустое пространство под изображением товара, разыскивая там кнопку «Разместить ставку», поскольку именно там они привыкли ее видеть на eBay. И хотя эта кнопка была на странице, пользователи ее не замечали, поскольку ожидали, что она будет расположена так же, как на eBay.

Рекомендация. Это был единственный случай, когда я не уговаривал своего клиента «мыслить нешаблонно», а посоветовал ему принять тот факт, что такие платформы, как eBay, уже сформировали у своих пользователей устоявшиеся представления о том, где должна находиться та или иная кнопка. Мы перенесли кнопку «Разместить ставку» и некоторые другие элементы интерфейса так, чтобы это соответствовало ожиданиям пользователей. Это немедленно повысило эффективность работы с сайтом. Мы знали, где пользователи ищут тот или иной элемент интерфейса, и знали, что там они его не найдут, — не по причине слишком сложной терминологии или перегруженного оформления, а потому, что полученный при работе с другими сайтами пользовательский опыт порождал не соответствующие случаю ожидания.

Примеры из практики

Не знаю, довелось ли вам уже применить на практике мой метод группировки находок на стикерах, но хочу поделиться несколькими примерами, о которых упоминалось в предыдущих главах. Эти замечания получены от пользователей при работе с интернет-магазином и видеостриминговым сервисом (рис. 9.5-9.8). Они дадут вам представление о том, что мы ищем, когда группируем данные по шести составляющим пользовательского опыта; в данном случае речь идет о составляющей визуального восприятия и внимания. Если помните, довольно часто одна и та же находка дублируется в двух или более категориях. Но в этом разделе я сосредоточился на главной проблеме, которую выявляет каждый из комментариев, разобранных далее.

Участник не может найти опцию «Сохранить»

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

Главная страница перегружена и выглядит устрашающе. «Это уж слишком!»

Судя по всему, находка имеет отношение к визуальному восприятию и вниманию. Следует расположить информацию на странице менее плотно.

Просмотрел результаты поиска, но не нашел «Ла-Ла Ленд»

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

Не заметил опцию «Вернуться к результатам поиска». Ищет кнопку «Назад»

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

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

Практические рекомендации

• Сядьте под углом 90 градусов по отношению к участникам — наблюдайте, в какую точку интерфейса или монитора они смотрят, готовясь сделать следующий шаг.
• Определите, что именно они ищут и почему: что больше всего интересует участников в данный момент и какие инструменты поиска они считают эффективными для решения этой задачи?
• Какие предположения о системе, оправдывающей эти ожидания, у них имеются (например, «Я ищу меню, поскольку хочу выделить это слово жирным шрифтом, но не вижу никакого меню в верхней части экрана; я вижу только все слова»)?
• Какие еще выводы по поводу их предположений и подразумеваемых стратегий по отношению к системе позволяет сделать их модель взаимодействия с ней?
• Постройте ментальную модель мыслительного процесса участников с их точки зрения, наблюдая за движениями их глаз и поведением.

Отправить

Inga

кубани фото и описание