Выразительный Javascript. Руководство для тех, кто плохо знаком с uxисследованиями и хочет лучше понять их роль в создании продукта
 Скачать 6.02 Mb.
|
|
РИС. 1.3. страница продукта на сайте компании Design Within Reach Кресло Eames Lounge Chair разработано чарльзом и рей эймс для фирмы Hermann Miller© $5295–7295 Шаг 1. выберите размер Шаг 2. выберите цвет шпона Шаг 3. выберите материал и цвет обивки СТАНДАРТНЫЙ ВЫСОКИЙ НАТУРАЛЬНАЯ КОЖА ИСКУССТВЕННАЯ КОЖА Шесть составляющих Пользовательского оПЫта | 29 Эмоции Возможно, нам нравится думать, что мы принимаем решения, руководствуясь исключительно логикой, подобно Споку из сери- ала Star Trek, но имеется масса свидетельств тому, что огром- ное количество разных эмоций влияет на наш пользовательский опыт и на наше мышление. Возможно, глядя на фотографию этого кресла, вы думаете, какое впечатление оно произведет на ваших друзей, как оно подчеркнет ваш статус и вообще о том, что вы таки «сделали это»! А может быть, вы думаете: «Боже, как претенци- озно!» или «5000 долларов за кресло?! Как я собираюсь платить за него, да еще и за аренду и продукты?» — и при этом вас охваты- вает тихая паника. Выявление скрытых эмоций и убеждений кри- тически важно для создания положительного пользовательского опыта. Шесть составляющих опыта Разные процессы, о которых говорилось в предыдущих пун- ктах, обычно протекают в специальных участках мозга (рис. 1.4). РИС. 1.4. Шесть составляющих пользовательского опыта Навигация Память Внимание и визуальное восприятие Принятие решений Язык Эмоции 30 | глава 1 Они взаимодействуют, создавая то, что каждый из нас восприни- мает как единый пользовательский опыт. Конечно, мои знакомые когнитивные нейропсихологи немедленно заявят, что это чрезвы- чайно упрощенный подход к устройству человеческого мозга и про- цессам, которые в нем происходят, но тем не менее существуют доказательства того, что именно на этом уровне мы можем объ- единить разработку дизайна продукта и нейропсихологию. Думаю, уже не остается сомнений в том, что пользовательский опыт вообще не является чем-то цельным. Скорее, он формиру- ется на основе многих процессов и представлений в мозге, а также имеет множество измерений и нюансов. Пользовательский опыт создается не на экране, а в нашей голове. Переходим к делу Позвольте порекомендовать вам отложить на некоторое время эту книгу, чтобы зайти на сайт книжного интернет-магазина — лучше всего на один из тех, на которые вы заходите относительно редко, — и поискать книги о пользовательском опыте. При этом держите в голове все прочитанное выше о его составляющих. Визуальное восприятие / внимание На что в первую очередь упал ваш взгляд после того, как вы откры- ли сайт? На что вы обращаете внимание (цвета, картинки, слова)? Навигация Знаете ли вы, на какой странице сайта находитесь и как на нем ориентироваться? Испытываете ли чувство неуверенности? Почему? Язык Какие термины вы ищете? Встречаются ли вам непонятные тер- мины; не считаете ли вы, что категории товаров определены слишком широко? Память Оправдались ли ваши ожидания относительно того, как должен работать сайт? Принятие решений Какие промежуточные решения вы принимали в процессе реа- лизации своей цели — купить книгу? Эмоции Что вас беспокоит во время визита в книжный интернет-мага- зин? Что может удержать вас от покупки (сомнения в безопас- ности, недостаток доверия и т. п.)? Теперь, получив некоторое представление о ментальных образах, о которых следует знать, задайте себе несколько вопросов: «Каким образом я, будучи менеджером по продукту, а вовсе не психологом, могу определить, на что обращает внимание клиент и что он ищет? Откуда мне знать, каковы ожидания потенциальных покупателей моего продукта? Как мне разобраться в скрытых эмоциях покупате- лей?» До этих вопросов мы еще дойдем во второй части этой книги, но прямо сейчас я хотел бы остановиться на том, что мы будем понимать под вниманием и визуальным восприятием, навигацией, памятью, речью, принятием решений и эмоциями. Мне хотелось бы рассказать об этих процессах, чтобы потом, в «полевых условиях», вы могли бы самостоятельно распознавать их в процессе интервью- ирования потребителей. в мгновение ока: визуальное восПриятие, внимание и автоматизм | 33 Глава 2 В мгновение ока: визуальное восприятие, внимание и автоматизм От ментальных образов к пользовательскому опыту Вспомните случаи, когда вам говорили: «Закрой глаза, сейчас будет сюрприз — только не подглядывай, — а теперь открой глаза, вот он!» В момент, когда вы открывали глаза, вас захлестывали самые разные впечатления: свет и темнота, цветовые пятна, объекты (торт и свечи?), лица (ваших родных и друзей), звуки, запахи, эмоции (радость?). Это прекрасный пример того, каким мгновенным, мно- гомерным и сложным может быть пользовательский опыт. Несмотря на огромное количество раздражителей, воздействующих на наши органы чувств, у нас есть удивительная способность прак- тически мгновенно воспринимать колоссальный объем информа- ции о том, что происходит вокруг. Это дано человеку от природы, но очень трудно научить этому машину. Просто поразительно, как легко, без малейших усилий нам это дается. Нам не прихо- дится задумываться, чтобы распознавать окружающие нас объекты или воспринимать физический мир в трех измерениях за исклю- чением очень редких случаев (например, когда мы находимся в густом тумане). Все эти автоматические процессы возможны благодаря нейронам на задней стенке глазного яблока, которые передают сигнал на мозо- листое тело — участок в затылочной коре (задней части мозга), — а затем в теменную и височную доли мозга, в считаные доли секунды. В этой главе мы подробнее рассмотрим, что именно пере- дается таким образом, а в следующей — куда передается (рис. 2.1). 34 | глава 2 РИС. 2.1. что и куда передается в мозге На подсознательном уровне мозг аккумулирует ментальные образы яркости, форм, линий, их направлений, цвета, движения, объек- тов и пространства (в дополнение к звукам, чувствам и проприо- цепции * ) в единый пользовательский опыт. Вы не осознаете эти ментальные образы по отдельности, равно как и не контролируете процесс их связывания в единый опыт или влияние воспоминаний на восприятие в настоящем и на возникновение тех или иных эмо- ций. Это важный вывод. Невероятно сложно создать машину, спо- собную в автоматическом режиме выявлять ключевые различия между объектами, имеющими одинаковый цвет и форму — напри- мер, между маффинами и чихуахуа, — хотя человек выявляет эти различия моментально и безошибочно (рис. 2.2). Я мог бы очень многое рассказать о зрении, распознавании объек- тов и восприятии, но для разработки дизайна нашего цифрового продукта наиболее важны следующие обстоятельства: * Проприоцепция, или суставно-мышечное чувство, — это ощущение положения частей собственного тела относительно друг друга и окру- жающего пространства. Направ ления пере дачи информации Виды пере даваемой информации в мгновение ока: визуальное восПриятие, внимание и автоматизм | 35 РИС. 2.2. маффины или чихуахуа? 1) в мозге одновременно протекает множество процессов, которые практически не поддаются осознанию или осоз- нанному контролю; 2) многие связанные с очень сложными вычислениями про- цессы протекают постоянно и при этом не требуют созна- тельных умственных усилий с вашей стороны. Альбомы Чихуахуа или маффин Выбрать 36 | глава 2 В книге «Думай медленно… решай быстро» лауреат Нобелевской премии Даниэль Канеман * рассказывает о двух принципиально разных способах функционирования нашего мозга. Вы осознаете и осознанно контролируете первый набор процессов, медленное мышление, и при этом почти или совсем не контролируете и не под- вергаете анализу второй набор — те процессы, что происходят авто- матически, быстрое мышление. Разрабатывая дизайн продуктов или услуг, мы как дизайнеры почти всегда сосредоточены на сознательных процессах, напри- мер принятии решений, однако мы крайне редко делаем это с намерением извлечь преимущества из нашего быстрого мышле- ния. Оно действительно протекает очень быстро, в автоматиче- ском режиме, доставаясь нам, по сути, «бесплатно» в том смысле, что мы и наши клиенты не прилагаем для этого никаких интеллек- туальных усилий. При этом автоматические процессы не оказы- вают существенного влияния на скорость протекания сознатель- ных процессов. Как дизайнеры продуктов, мы должны извлекать пользу как из медленного, так и из быстрого мышления, поскольку они относительно независимы друг от друга. В следующих главах мы подробно проанализируем, как этого добиться, а пока рассмо- трим пример автоматического зрительного процесса, который можем использовать в своей работе, — зрительное внимание. Бессознательное поведение: эти глаза напротив Вспомним небольшую сценку, описанную в начале этой главы: вы открываете глаза в ожидании большого сюрприза. Если вы прямо сейчас попробуете закрыть глаза, а затем резко их открыть, то обнаружите, что ваш взгляд мечется от предмета к предмету. Именно так глазные яблоки обычно и двигаются — как правило, наш взгляд не перемещается плавно с одного пред- мета на другой. Скорее, он перескакивает с предмета на предмет (явление, которое мы называем саккадой). Эти движения можно измерить при помощи специальных инструментов наподобие * Канеман Д. Думай медленно… решай быстро. Москва : АСТ, 2019. в мгновение ока: визуальное восПриятие, внимание и автоматизм | 37 инфракрасной системы айтрекинга * , которую в настоящее время можно встроить в специальные очки (рис. 2.3) или небольшую полоску, прикрепленную под монитором компьютера (рис. 2.4). РИС. 2.3. очки Tobii 2 РИС. 2.4. устройство Tobii х2–30 (размещено под монитором ноутбука) * Айтрекинг (от англ. eye tracking) — технология, позволяющая отсле- живать и записывать движения и реакции зрачка. Известна также под названиями окулография и трекинг глаз. 38 | глава 2 При помощи этих инструментов удалось зафиксировать общепри- нятую в настоящее время модель движения глаз по веб- страницам и результатам поиска. Представьте, что вы ввели в Google инте- ресующий вас термин и просматриваете результаты выдачи на ноутбуке. В среднем человек просматривает 5–10 слов в первой ссылке на результат поиска, от 5 до 7 слов в следующей ссылке и еще меньше в остальных. Таким образом, мы получаем класси- ческую F-образную модель, сформированную движениями глаз- ных яблок (саккадами). На рис. 2.5 показана тепловая карта дви- жения глаз по строкам поисковой выдачи: чем больше красного цвета в той или иной части монитора, тем дольше задерживался на ней взгляд сидящего за компьютером человека. Визуальные аномалии Хотя человек способен контролировать движения глаз, большую часть времени мы полагаемся на автоматически протекающие в мозге процессы. Отчасти движения глаз «на автопилоте» эффек- тивны, поскольку предметы в поле зрения привлекают наше вни- мание тогда, когда сильно выделяются на фоне окружающей обста- новки. Эти аномалии автоматически бросаются нам в глаза, вызы- вая их движение. РИС. 2.5. тепловая карта F-образной формы (источник: bit.ly/2n6yQuw) в мгновение ока: визуальное восПриятие, внимание и автоматизм | 39 Далеко не всегда нам как дизайнерам удается использовать этот важнейший автоматический процесс, а ведь существует отличный способ привлечь внимание к нужным объектам на мониторе — вспомните песенку из детской образовательной программы «Улица Сезам»: «Одна из этих вещей не такая, как все. Одна из этих вещей не отсюда». Некоторые способы создания визуальной аномалии на мониторе представлены на рис. 2.6. К прочим важным спосо- бам относятся визуальный контраст (между темными и яркими участками) и движение. Объекты в правом нижнем углу каждого рисунка бросаются в глаза благодаря тому, что обладают уни- кальной характеристикой — формой, размерами или ориентацией в пространстве — и уникальным визуальным контрастом, отлича- ющим их от остальных объектов в данной группе. ФОРМА ВЕС РАЗМЕР ПОЛОЖЕНИЕ ОРИЕНТАЦИЯ ЦВЕТ РИС. 2.6. визуальные аномалии Уникальный объект выделяется среди других независимо от их количества. В сложной ситуации (например, на приборной панели современного автомобиля) это обстоятельство позволяет напра- вить внимание пользователя именно туда, куда необходимо. 40 | глава 2 Если вы проницательный читатель, размышляющий о связи локуса контроля и движений глазных яблок, возможно, вам уже приходили в голову вопросы вроде «Кто решает, куда посмотреть в следующую секунду, если наше сознание в этом не участвует? и «Как именно при- влечь взгляд к конкретному участку визуального пространства?». Оказывается, что система зрительного внимания — именно она опре- деляет, куда будет направлен взгляд в следующий момент, — соз- дает несколько размытое (можно сказать, Гауссово — пользовате- лям Photoshop так будет понятнее) и преимущественно черно- белое представление того, что мы видим. Это представление постоянно обновляется, и на его основании система визуального внимания определяет, на что нам следует посмотреть, если мы не контроли- руем движение глазных яблок сознательно. Предмет для размышле- ния — «Делаете ли это вы, если это делается автоматически?». Как дизайнер вы можете спрогнозировать направление взгляда потребителя в визуальной среде, если отредактируете ее с помощью программы вроде Photoshop, убрав цвет и создав эффект расфоку- сировки (и/или применив более чем одно Гауссово размытие). Этот тест позволит с высокой степенью вероятности судить, к чему будет прикован взгляд, если не использовать для этого систему айтрекинга. Упс, вы это пропустили! Пожалуй, самое интересное, что можно узнать, изучая движе- ния глаз человека, — это то, на что его взгляд никогда не падает. Я видел веб-форму, в которой дизайнеры пытались разместить полезную дополнительную информацию в крайней колонке справа, то есть именно там, где обычно размещают рекламу. К несчастью, мы как потребители приучены к тому, что обычно информация в правой части монитора — это реклама, которую следует игнори- ровать. Зная об этом, мы могли бы прогнозировать, куда в первую очередь смотрят люди, и разработать дизайн веб-формы так, чтобы аккуратно направлять внимание к полезной информации. Если ваши потребители никогда не обращают внимания на какие-то части вашего продукта или веб-страницы, они никогда не узнают, что там находится. Конечно, можно вообще не размещать в таких местах информацию, но, если правильно ориентировать систему в мгновение ока: визуальное восПриятие, внимание и автоматизм | 41 зрительного внимания при помощи дизайна, разработанного с уче- том психологии клиентов, вы сможете привлечь их внимание в точ- ности к тому, в чем они нуждаются. Дизайнеры продуктов и услуг просто обязаны использовать такие возможности, чтобы сформи- ровать положительный пользовательский опыт. Как наша зрительная система обеспечивает ясность там, где ее нет Не могу удержаться от того, чтобы поделиться информацией о еще одной характеристике человеческого зрения — его остроте. Если окинуть общим взглядом визуальную сцену, то кажется, что все ее части видны одинаково отчетливо, в деталях, и находятся в фокусе. Но в действительности и острота зрения, и способность воспринимать цвета резко падают по мере удаления от фокаль- ной точки — точки, на которую направлен взгляд. Только около двух градусов угла зрения (эквивалент длины двух больших паль- цев на расстоянии вытянутой руки) насыщены нейронами и могут обеспечить высокую остроту зрения и точное восприятие цветов. Не верите? Подойдите к ближайшей книжной полке. Сфокусируйте взгляд на обложке какой-нибудь книги и одновременно попытайтесь прочесть название той, что стоит над ней. Возможно, вы удивитесь, но вряд ли вам удастся это сделать. Попробуйте, я пока подожду! Если сфокусировать взгляд в определенной точке и, не отрыва- ясь от нее, попытаться рассмотреть, что находится на несколько градусов выше или ниже (фовеация), то в мозге на этот счет рож- дается масса предположений и он не может их полностью обра- ботать. Это означает, что точка фокусировки взгляда становится критически важной для формирования пользовательского опыта. Размещение информации где-то рядом с ней уже ничего не дает. Это не трубка: знать, как понимает слово кто-то другой, еще не значит знать, что оно в действительности обозначает Надписи на странице, картинке или графике будут полезны лишь в том случае, если конечный пользователь правильно устанавли- вает связь между ними и размещенными на странице объектами. Особенно показательны в этом смысле иконки. Если спросить у человека, который никогда не пользовался Instagram, что озна- чает каждая из них на рис. 2.7, то могу поспорить, что он не смо- жет проинтерпретировать все из них правильно. Каждая иконка для конкретного человека имеет лишь тот смысл, которым он сам ее наделил в данный момент (независимо от того, что она должна означать изначально). Группе дизайнеров важно протестировать все визуальные элементы и убедиться, что они по большей части воспринимаются правильно или, по крайней мере, их значение можно усвоить в процессе использования. Если возникают сомне- ния, не стоит разрушать каноны ради того, чтобы проявить креа- тивность. Воспользуйтесь стандартной иконкой, а уникальности можно добиться иначе. РИС. 2.7. иконки Instagram Рекомендованная литература Канеман Д. Думай медленно… решай быстро. Москва : АСТ, 2019. 653 с. Evans J. S. B. T., Stanovich K. E. Dual-Process Theories of Higher Cognition: Advancing the Debate // Perspectives on Psychological Science. 2013. Vol. 8. N. 3. P. 23–241. Evans J. S. B. T. Dual-Processing Accounts of Reasoning, Judgment, and Social Cognition // Annual Review of Psychology. 2008. Vol. 59. P. 255–278. навигация: где я? | 43 Глава 3 Навигация: где я? Мы поговорили о том, на что мы смотрим, и теперь логично будет перейти к размышлениям о том, где мы находимся. Значительная часть человеческого мозга предназначена для обработки простран- ственной информации, а значит, нам следует разобраться, каким образом можно использовать этот когнитивный процесс в разра- ботке дизайна продуктов и услуг. Оценка своего положения в про- странстве имеет два аспекта: первый — знать, где мы находимся, второй — уметь ориентироваться в окружающем пространстве. Муравей в пустыне: расчеты в Евклидовом пространстве Чтобы помочь вам разобраться с концепцией ориентации в про- странстве, я хочу рассказать о муравьях-бегунках (Cataglyphis fortis), живущих в тунисской пустыне и обладающих весьма интересной спо- собностью, которая есть и у человека. Впервые я прочитал об этом и о многих других удивительных вещах в книге Чарльза Рэнсома Галлистела The Organization of Learning («Как устроено обучение»), в которой утверждается, что живые существа — маленькие и боль- шие — обладают куда большим количеством когнитивных способ- ностей, чем принято думать. Представления о времени, простран- стве, расстоянии, интенсивности света и звука, количестве пропита- ния в зависимости от географического региона — это лишь некото- рые примеры расчетов, которые способны делать многие животные. Представьте себя на месте тунисского муравья. Определить свое местоположение в пустыне — дьявольски сложная задача, ведь в ней нет ориентиров вроде деревьев, а ландшафт часто меняется, поскольку песчаные дюны перемещаются под действием ветра. Таким образом, муравьи, покинувшие свое гнездо, должны нахо- дить путь домой как-то иначе, не по ориентирам. Следы, метки и шлейф запахов на песке ненадежны, поскольку их может унич- тожить первый же легкий ветерок. 44 | глава 3 И тем не менее эти муравьи предпринимают далекие путеше- ствия по тунисской пустыне в поисках пищи (муравей на рис. 3.1 обычно двигается на северо-запад от своего гнезда). В одном из экспериментов ученый ставил на песке кормушку для птиц, наполненную сладким сиропом. Везучий муравей залезает в кор- мушку, находит сироп и понимает, что только что сорвал джек- пот. Продегустировав сироп, он спешит скорее «сообщить» своим товарищам отличную новость! Однако прежде чем он успевает это сделать, ученый поднимает кормушку (с муравьем внутри) и пере- двигает ее на 12 метров на восток (на рисунке это перемещение показано красной стрелкой). |