Текст книги "Дизайн пользовательского опыта. Как создать продукт, который ждут"

Текст добавлен: 18 апреля 2022, 08:58

Автор книги: Джон Уэлен

Жанр: Изобразительное искусство и фотография, Искусство

Возрастные ограничения: +16

сообщить о неприемлемом содержимом

Авторские права соблюдены

Текущая страница: 2 (всего у книги 13 страниц) [доступный отрывок для чтения: 4 страниц]

Скачать книгу

Шрифт:

- 100% +

Глава 1. Шесть составляющих пользовательского опыта

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

Что это за процессы и какие функции они выполняют? Объясним это на конкретном примере. Представьте, что вам нужно купить кресло для вашего дома, построенного в стиле mid-century. Вероятно, вы предпочли бы классический дизайн, характерный для этого периода, – например, кресло Eames Lounge Chair (рис. 1.1). Вы хотите купить его онлайн и заходите на сайты мебельных интернет-магазинов.

РИС. 1.1. Кресло Eames Lounge Chair

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

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

РИС. 1.2. Панель навигации на сайте мебельного магазина Design Within Reach

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

Часто нам бывает сложно понять, где именно мы находимся на сайте, в приложении или в другом виртуальном пространстве, потому что законы навигации, действующие именно в этом месте, известны нам не всегда. В примере, приведенном на рис. 1.2, вы можете кликнуть по ссылке «Гостиная», которая в полной мере отражает содержание этого раздела, но в других случаях – например, в приложениях Snapchat или Instagram – многие люди старше 18 лет испытывают трудности с навигацией, беспорядочно нажимая на ссылки, стуча по телефону или даже тряся им. Понимание своего местонахождения как в реальном, так и в виртуальном пространстве и способов перемещения в нем критически важно для формирования первоклассного пользовательского опыта.

Язык

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

Память

Когда я захожу на сайт интернет-магазина, у меня есть определенные ожидания относительно того, как он должен функционировать. Так, я предполагаю, что там будет поисковик (выводящий результаты поиска), страницы разных категорий товаров (в том числе кресел), страницы товаров (кресла), а также описание процедур заказа и оплаты. У нас есть ожидания относительно практически любого понятия, и мы автоматически формируем их применительно к людям, местам, процессам и многому другому. Как дизайнеры продуктов, мы должны удостовериться, что понимаем ожидания наших потребителей и предвидим недоразумения, которые могут возникнуть, если их ожидания разойдутся с нашими (только представьте, до чего странно впервые покидать салон автомобиля компании Uber или Lyft, не рассчитавшись с водителем наличными!).

Принятие решений

В конечном счете вы стремитесь достичь своих целей и принять решение, и здесь нужно понять, будете ли вы покупать конкретное кресло (рис. 1.3). Пока вы принимаете это решение, вам может прийти в голову бесчисленное множество вопросов. Будет ли оно хорошо смотреться в моей гостиной? Могу ли я позволить себе такую покупку? Пройдет ли оно во входную дверь? А что если во время доставки его поцарапают или повредят, ведь оно стоит почти 5000 долларов? Нельзя ли найти его в другом магазине по более низкой цене? Не требует ли оно специального ухода?

РИС. 1.3. Страница продукта на сайте компании Design Within Reach

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

Эмоции

Возможно, нам нравится думать, что мы принимаем решения, руководствуясь исключительно логикой, подобно Споку из сериала Star Trek, но имеется масса свидетельств тому, что огромное количество разных эмоций влияет на наш пользовательский опыт и на наше мышление. Возможно, глядя на фотографию этого кресла, вы думаете, какое впечатление оно произведет на ваших друзей, как оно подчеркнет ваш статус и вообще о том, что вы таки «сделали это»! А может быть, вы думаете: «Боже, как претенциозно!» или «5000 долларов за кресло?! Как я собираюсь платить за него, да еще и за аренду и продукты?» – и при этом вас охватывает тихая паника. Выявление скрытых эмоций и убеждений критически важно для создания положительного пользовательского опыта.

Шесть составляющих опыта

Разные процессы, о которых говорилось в предыдущих пунктах, обычно протекают в специальных участках мозга (рис. 1.4).

РИС. 1.4. Шесть составляющих пользовательского опыта

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

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

Переходим к делу

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

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

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

Навигация

Знаете ли вы, на какой странице сайта находитесь и как на нем ориентироваться? Испытываете ли чувство неуверенности? Почему?

Язык

Какие термины вы ищете? Встречаются ли вам непонятные термины; не считаете ли вы, что категории товаров определены слишком широко?

Память

Оправдались ли ваши ожидания относительно того, как должен работать сайт?

Принятие решений

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

Эмоции

Что вас беспокоит во время визита в книжный интернет-магазин? Что может удержать вас от покупки (сомнения в безопасности, недостаток доверия и т. п.)?

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

Глава 2. В мгновение ока: визуальное восприятие, внимание и автоматизм

От ментальных образов к пользовательскому опыту

Вспомните случаи, когда вам говорили: «Закрой глаза, сейчас будет сюрприз – только не подглядывай, – а теперь открой глаза, вот он!» В момент, когда вы открывали глаза, вас захлестывали самые разные впечатления: свет и темнота, цветовые пятна, объекты (торт и свечи?), лица (ваших родных и друзей), звуки, запахи, эмоции (радость?). Это прекрасный пример того, каким мгновенным, многомерным и сложным может быть пользовательский опыт.

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

Все эти автоматические процессы возможны благодаря нейронам на задней стенке глазного яблока, которые передают сигнал на мозолистое тело – участок в затылочной коре (задней части мозга), – а затем в теменную и височную доли мозга, в считаные доли секунды. В этой главе мы подробнее рассмотрим, что именно передается таким образом, а в следующей – куда передается (рис. 2.1).

РИС. 2.1. Что и куда передается в мозге

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

[Закрыть]) в единый пользовательский опыт. Вы не осознаете эти ментальные образы по отдельности, равно как и не контролируете процесс их связывания в единый опыт или влияние воспоминаний на восприятие в настоящем и на возникновение тех или иных эмоций. Это важный вывод. Невероятно сложно создать машину, способную в автоматическом режиме выявлять ключевые различия между объектами, имеющими одинаковый цвет и форму – например, между маффинами и чихуахуа, – хотя человек выявляет эти различия моментально и безошибочно (рис. 2.2).

РИС. 2.2. Маффины или чихуахуа?

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

1) в мозге одновременно протекает множество процессов, которые практически не поддаются осознанию или осознанному контролю;

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

В книге «Думай медленно… решай быстро» лауреат Нобелевской премии Даниэль Канеман[3]3
Канеман Д. Думай медленно… решай быстро. Москва: АСТ, 2019.

[Закрыть] рассказывает о двух принципиально разных способах функционирования нашего мозга. Вы осознаете и осознанно контролируете первый набор процессов, медленное мышление, и при этом почти или совсем не контролируете и не подвергаете анализу второй набор – те процессы, что происходят автоматически, быстрое мышление.

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

Бессознательное поведение: эти глаза напротив

Вспомним небольшую сценку, описанную в начале этой главы: вы открываете глаза в ожидании большого сюрприза. Если вы прямо сейчас попробуете закрыть глаза, а затем резко их открыть, то обнаружите, что ваш взгляд мечется от предмета к предмету. Именно так глазные яблоки обычно и двигаются – как правило, наш взгляд не перемещается плавно с одного предмета на другой. Скорее, он перескакивает с предмета на предмет (явление, которое мы называем саккадой). Эти движения можно измерить при помощи специальных инструментов наподобие инфракрасной системы айтрекинга[4]4
Айтрекинг (от англ. eye tracking) – технология, позволяющая отслеживать и записывать движения и реакции зрачка. Известна также под названиями окулография и трекинг глаз.

[Закрыть], которую в настоящее время можно встроить в специальные очки (рис. 2.3) или небольшую полоску, прикрепленную под монитором компьютера (рис. 2.4).

РИС. 2.3. Очки Tobii 2

РИС. 2.4. Устройство Tobii Х2–30 (размещено под монитором ноутбука)

При помощи этих инструментов удалось зафиксировать общепринятую в настоящее время модель движения глаз по веб-страницам и результатам поиска. Представьте, что вы ввели в Google интересующий вас термин и просматриваете результаты выдачи на ноутбуке. В среднем человек просматривает 5–10 слов в первой ссылке на результат поиска, от 5 до 7 слов в следующей ссылке и еще меньше в остальных. Таким образом, мы получаем классическую F-образную модель, сформированную движениями глазных яблок (саккадами). На рис. 2.5 показана тепловая карта движения глаз по строкам поисковой выдачи: чем больше красного цвета в той или иной части монитора, тем дольше задерживался на ней взгляд сидящего за компьютером человека.

РИС. 2.5. Тепловая карта F-образной формы (источник: bit.ly/2n6yQuw)

Визуальные аномалии

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

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

РИС. 2.6. Визуальные аномалии

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

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

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

Упс, вы это пропустили!

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

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

Как наша зрительная система обеспечивает ясность там, где ее нет

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

Не верите? Подойдите к ближайшей книжной полке. Сфокусируйте взгляд на обложке какой-нибудь книги и одновременно попытайтесь прочесть название той, что стоит над ней. Возможно, вы удивитесь, но вряд ли вам удастся это сделать. Попробуйте, я пока подожду!

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

Это не трубка: знать, как понимает слово кто-то другой, еще не значит знать, что оно в действительности обозначает

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

Особенно показательны в этом смысле иконки. Если спросить у человека, который никогда не пользовался Instagram, что означает каждая из них на рис. 2.7, то могу поспорить, что он не сможет проинтерпретировать все из них правильно. Каждая иконка для конкретного человека имеет лишь тот смысл, которым он сам ее наделил в данный момент (независимо от того, что она должна означать изначально). Группе дизайнеров важно протестировать все визуальные элементы и убедиться, что они по большей части воспринимаются правильно или, по крайней мере, их значение можно усвоить в процессе использования. Если возникают сомнения, не стоит разрушать каноны ради того, чтобы проявить креативность. Воспользуйтесь стандартной иконкой, а уникальности можно добиться иначе.

РИС. 2.7. Иконки Instagram