Выразительный Javascript. Руководство для тех, кто плохо знаком с uxисследованиями и хочет лучше понять их роль в создании продукта
 Скачать 6.02 Mb.
|
|
РИС. 3.1. тунисский муравей в пустыне Точка старта Кормушка Гнездо Поворотный момент 1 м навигация: где я? | 45 Муравей, по-прежнему желая принести домой хорошие новости, пытается найти прямой путь (или «муравьиную тропу») к своему гнезду. Он устремляется на юго-восток, почти точно в том направ- лении, где находилось бы гнездо, если бы кормушку не переме- стили. Он проходит примерно такое же расстояние, какое отделяло гнездо от первоначального местоположения кормушки, а затем начинает двигаться кругами, пытаясь его обнаружить (вполне разумная стратегия, если помнить о том, что видимых ориентиров на песке нет). К сожалению, муравей не учел, что его вместе с кор- мушкой перенесли на некоторое расстояние от первоначального места, поэтому ошибся на такое же расстояние. Как бы то ни было, такая модель поведения демонстрирует, что муравьи-бегунки способны правильно определять направле- ние и расстояние в Евклидовом пространстве (как минимум ори- ентируясь по солнцу). Это прекрасный пример расчетов, которые способны производить и теменные доли человеческого мозга. Определение местонахождения в физическом и виртуальном пространстве Как и муравью, нам постоянно приходится определять, в какой точке пространства мы находимся, куда нам следует двигаться и что надо предпринять, чтобы добраться до места назначения. Мы делаем это, опираясь на систему ориентирования, занима- ющую один из наибольших участков в коре головного мозга млекопитающих. Если в наш организм встроена такая потрясающая способность ориентироваться в физическом пространстве, то разве не есте- ственно попытаться использовать ее потенциал для ориентирова- ния в виртуальном мире? Именно дизайнеры продуктов и услуг должны решить эту задачу. Когда я пишу о навигации или ориентировании, следует иметь в виду, что я увязываю вместе два понятия, которые близки по смыслу, но не обязательно означают один и тот же когнитив- ный процесс. 46 | глава 3 [ ЗАМЕТКА НА ПОЛЯХ ] если вы считаете, что «не слишком хорошо ориентируетесь на местности», то наверняка приятно удивитесь, когда обнаружите, что на самом деле вам это удается совсем не плохо. например, вспомните, как утром, едва встав с кровати, вы бредете в ванную, не прилагая никаких сознательных усилий к поиску пути. и если это вас утешит, подумайте о том, что мы, как и муравьи, не были созданы для того, чтобы, будучи доставленными на машине в супермаркет и высаженными посреди парковки, легко находить эту машину на обратном пути, при том что парковка не отличается обилием визуальных ориентиров. Это, во-первых, навыки ориентирования человека в физическом мире с использованием трехмерного пространства и движения во времени, а во-вторых — навыки ориентирования и перемеще- ния в виртуальном мире. Эти понятия частично пересекаются, но если изучить вопрос более внимательно, то мы увидим, что они не тождественны. Виртуальный мир в большинстве своих современных воплоще- ний в смартфонах и веб-браузерах лишен многих меток и ори- ентиров. Нам не всегда легко понять, где именно мы находимся внутри виртуальной среды веб-страницы, приложения или голо- сового помощника (Alexa, Siri и т. п.), и не всегда легко понять, как добраться туда, куда мы хотим (даже вообразить себе карту пространства, в котором мы находимся, бывает непросто). В любом случае возможность понять, где вы находитесь, и сори- ентироваться в пространстве — реальном или виртуальном, — несомненно, критически важна для формирования положитель- ного пользовательского опыта. Куда мне идти? И как туда попасть? В физическом мире трудно попасть куда бы то ни было без надеж- ных ориентиров. Номера выходов в аэропортах, указатели на шоссе или на туристическом маршруте — это лишь некоторые примеры материальных «хлебных крошек», которые значительно облегчают нам жизнь. навигация: где я? | 47 Навигация по новому цифровому интерфейсу напоминает блужда- ния по огромному торгово-развлекательному комплексу без карты: легко потеряться, поскольку очевидных ориентиров слишком мало. На рис. 3.2 приведена фотография торгово-развлекательного ком- плекса неподалеку от моего дома. В нем около восьми вестибюлей, и они почти не отличаются от того, что показан на фотографии. Просто представьте, что ваш друг говорит: «Я жду возле столиков и стульев прямо под люстрой», а теперь попытайтесь найти его по таким ориентирам. РИС. 3.2. молл Westfield Montgomery В физическом мире у нас есть преимущество: мы, по крайней мере, знаем, как передвигаться с помощью ног. В виртуальном мире ситуация намного сложнее, поскольку действия, необходимые для того, чтобы добраться в пункт назначения, радикально отли- чаются в зависимости от продукта (приложение или операционная система). Чтобы добиться желаемого результата, вам, возможно, потребуется набрать что-то на своем смартфоне, потрясти его, 48 | глава 3 нажать на центральную кнопку, дважды нажать на какую-нибудь другую кнопку, нажать клавишу Ctrl и щелкнуть мышкой в опреде- ленном месте, провести по экрану пальцем вправо и т. п. Интерфейсы некоторых приложений устроены так, что найти в них что-то — непростая задача. Например, многие люди (осо- бенно старшего возраста) считают, что ориентироваться в Snapchat просто-таки невероятно сложно. Вполне возможно, и вы так счи- таете! Далеко не всегда вы видите ссылку или кнопку с понятным обозначением, поэтому нужно просто знать, на что именно нажать и как провести пальцем по экрану для достижения желаемого результата. Это приложение переполнено скрытыми «пасхальными яйцами» * , причем большинство людей (за исключением поколений Y и Z) просто не знает, где их искать (рис. 3.3). РИС. 3.3. навигация в Snapchat * «Пасхальные яйца» — это секреты в компьютерных играх и приложе- ниях, заложенные создателями и не связанные с общим сюжетом игры, играют роль своеобразных шуток. навигация: где я? | 49 В 2017 году была выпущена новая версия Snapchat, и это вызвало массовое недовольство тинейджеров, которым, как оказалось, нравилась предыдущая версия. (Не верите мне? Тогда погуглите!) Почему? Потому что исчезли привычные способы навигации. Пока я писал эту книгу, разработчики Snapchat упорно трудились над тем, чтобы откатить эти изменения назад и вернуть интерфейс, который соответствовал бы ожиданиям аудитории. Возьмите эту историю на заметку и учтите ее, когда будете разрабатывать и совершенство- вать дизайн своих продуктов и услуг: соответствие ожиданиям кли- ентов формирует положительный пользовательский опыт, а неспо- собность их оправдать его разрушает. Чем больше виртуальное пространство соответствует некоторому физическому эквиваленту, тем более совершенным оно станет. Мы уже начали двигаться в этом направлении, создав дополнен- ную реальность (augmented reality — AG) и виртуальную реаль- ность (virtual reality — VR). Немалую пользу приносят и подсказки, например края картинок, выскакивающие сбоку монитора и ука- зывающие на наличие горизонтальной прокрутки. Но существует еще столько способов усовершенствовать современный интер- фейс! Даже такие банальные, как виртуальные «хлебные крош- ки» * или визуальные подсказки — выделение слегка отличаю- щимся фоновым цветом каждого раздела новостного сайта, — могут вполне служить навигационными ориентирами (торговому центру Westfield Montgomery тоже такие не помешали бы!). Когнитивные психологи (и я в том числе) считают, что одним из неоправданно редко используемых навигационных ориен- тиров является наше чувство трехмерного пространства. Хотя в виртуальной среде мы не ходим (в привычном понимании этого слова), существуют интересные способы использовать ориентиры, которые помогают нам в трехмерном мире (один из них показан на рис. 3.4). Мы распознаем перспективу в изображенной сцене, поскольку размеры машин и ширина улицы изменяются по мере * «Хлебные крошки» (англ. breadcrumbs) — термин из области веб- разработки, цепочка элементов навигации, позволяющая пользовате- лю попасть с главной страницы сайта на ту, которая ему нужна. 50 | глава 3 удаления от зрителя. Так работает автоматическая когнитивная обработка и переработка, которую мы (как дизайнеры и просто люди), по сути, получили бесплатно: она есть у каждого. Более того, эта часть быстрого мышления работает автоматически, не замедляя при этом ментальные процессы, протекающие в сознании. А зна- чит, существует бесчисленное множество интересных и до сих пор не открытых возможностей! РИС. 3.4. визуальная перспектива навигация: где я? | 51 Тестирование интерфейсов для поиска метафор взаимодействия На сегодняшний день мы точно знаем одну вещь: критически важно тестировать интерфейс для того, чтобы удостовериться, что разра- ботанные нами схемы (определения местонахождения пользовате- лей и их взаимодействия с продуктом) интуитивно понятны. Одно из первых исследований, проводившихся с использованием ноут- буков с сенсорным экраном, наглядно показало, насколько важно тестировать интерфейсы, чтобы понять представления пользовате- лей о том, как они могут перемещаться в виртуальном пространстве приложения или сайта. Впервые увидев эти ноутбуки, пользователи инстинктивно прибегали к метафорам взаимодействия из физи- ческого мира, как показано на рис. 3.5. Участники эксперимента касались того, что хотели выбрать (верхний правый кадр), пыта- лись прокрутить веб-страницу вверх или вниз, как будто это можно было сделать физически (нижний левый кадр), касались экрана в том месте, в котором хотели набрать текст (верхний левый кадр). РИС. 3.5. Первые реакции на ноутбук с сенсорным экраном В большинстве случаев пользователи совершали именно те дей- ствия, которых я от них ожидал, как это бывало во множестве 52 | глава 3 тестов, которые я проводил ранее, но некоторые результаты нас удивили (рис. 3.6). На фотографии вы видите, как участник исследования пытался управлять сенсорным экраном (прокручивать его вверх и вниз) двумя большими пальцами, в то время как остальные пальцы располагались на боковых сторонах монитора. Кто мог такое предвидеть? РИС. 3.6. управление сенсорным экраном при помощи больших пальцев Тестирование сенсорного экрана позволило сделать два вывода. — Никогда нельзя абсолютно точно спрогнозировать, как пользо- ватели будут взаимодействовать с новым продуктом, и именно поэтому так важно привлекать к его тестированию реальных пользователей и внимательно наблюдать за их поведением. — Критически важно выяснить, как люди представляют себе виртуальное пространство и какие способы взаимодействия позволят, по их мнению, перемещаться в этом пространстве. навигация: где я? | 53 Действуя в соответствии с этими выводами, вы видите работу теменных долей мозга! Наблюдая за взаимодействием пользователей с относительно «плос кими», то есть не имеющими трехмерных ориентиров, при- ложениями вроде Netflix или Amazon Fire, мы установили не только как они это делают, но и каковы их ожидания относительно вир- туального пространства. В физическом мире перемещение чего-либо происходит без задержки. Разумеется, пользователи ожидают, что и в виртуаль- ном мире при выборе какой-либо опции система отреагирует мгно- венно. Если ничего не происходит в течение нескольких секунд после того, как вы (виртуально) кликнули по объекту (как в ситу- ации, показанной на рис. 3.7), то это вас, конечно, озадачивает. В результате вы фокусируетесь на этой странности и перестаете получать надлежащий пользовательский опыт. РИС. 3.7. интерфейс экрана телевизора с функцией трекинга глаз 54 | глава 3 Думая о будущем: существует ли понятие «где?» в речевом интерфейсе? Активируемые голосом помощники вроде Google Home, Amazon Alexa, Siri от Apple, Microsoft Cortana и прочих обладают огромным потенци- алом. Однако в процессе их тестирования мы обнаружили, что новые пользователи часто выражают обеспокоенность, поскольку им не хва- тает физических систем управления этими системами. В то же время голосовое взаимодействие с ними слишком отличается от взаимо- действия человека с человеком. Тестируя использование устройств в деловых и личных целях при помощи попарных сравнений, мы выя- вили несколько ключевых проблем, которые препятствуют более активному развитию голосовых помощников. Во-первых, в отличие от реального мира или от разработан- ных для мониторов интерфейсов, здесь отсутствуют какие бы то ни было ориентиры вашего местонахождения. Допустим, вы обсуждаете погоду в Париже c голосовым помощником. Вдогонку вы задаете вопрос: «Сколько времени понадобится, чтобы добраться до Монако?» Вы продолжаете думать о Париже, но непонятно, понимает ли это голосовой помощник. На сегодняш- ний день (за немногими исключениями) помощники восприни- мают каждую реплику вне связи с предыдущими и редко следят за нитью разговора, то есть не понимают, что вы все еще говорите о Париже, когда спрашиваете о времени пути до Монако. Во-вторых, если система переключается на определенную тему или «область» (например, функции Spotify в голосовом помощ- нике Alexa), то у вас нет никаких ориентиров, показывающих, что вы находитесь в этой «области», или указывающих, что вам делать или как взаимодействовать с системой. Я ничем не могу здесь помочь, но надеюсь, что эксперты по голосовым помощни- кам и доступной среде спасут положение и помогут нам усовершен- ствовать впечатляющие, но все же далекие от оптимальных способ- ности голосовых помощников. Как дизайнеры продуктов и услуг, мы видим свою основную задачу в том, чтобы решать проблемы пользователей, а не соз- давать им новые. Мы должны учитывать восприятие аудиторией виртуального пространства (каким бы оно ни было) и согласо- вывать способы навигации в наших продуктах и услугах с тем, как наши пользователи привыкли взаимодействовать с реальным миром и другими людьми. Давайте заставим работать теменные доли мозга! Рекомендованная литература Gallistel C. R. The Organization of Learning. Cambridge, MA: MIT Press, 1990. Müller M., Wehner R. Path Integration in Desert Ants, Cataglyphis Fortis // Proceedings of the National Academy of Sciences. 1988. Vol. 85. N. 14. P. 5287–5290. Память и Представления | 57 Глава 4 Память и представления Абстрагирование от деталей Мало кто это замечает, но, когда мы погружены в некую ситуа- цию или разговор, мы на самом деле не воспринимаем бóльшую часть деталей, получая весьма общее, абстрактное представле- ние о происходящем. Возможно, вы считаете, что это не про вас, что вы обладаете наглядно-образным мышлением и замечаете все подробности. Отлично! Тогда скажите, пожалуйста, какая из представленных на рис. 4.1 монет — настоящий американ- ский пенни. РИС. 4.1. найдите на рисунке настоящий американский пенни 58 | глава 4 Если вы американец, то за свою жизнь тысячи раз видели эти монет ки. Конечно, такая задача не покажется сложной людям с развитым наглядно-образным мышлением! Хорошо, возможно, предложенный тест покажется вам не совсем честным, если вы не американец или редко пользуетесь наличными. В таком случае давайте поговорим о букве, которую вы видели мил- лионы раз, — букве G. Как выглядит ее строчной вариант (рис. 4.2)? Не такой уж и простой вопрос, правда? В большинстве случаев мы смо- трим на какой-нибудь предмет и чувствуем, что сделали его мгновен- ный снимок, будто в голове есть своего рода фотоаппарат. Однако менее чем через секунду мозг отбрасывает все реальные детали и воз- вращается к стереотипному или абстрактному представлению об этом предмете, а также ко всем связанным с ним предположениям. Помните: далеко не всегда стереотип — это плохо. В словаре Merriam-Webster приводится следующее его определение: «…это нечто, соответствующее устоявшимся или обобщенным пред- ставлениям». У нас есть стереотипы практически всего: телефона (рис. 4.3), чашки кофе, птицы, дерева и т. д. Когда мы думаем об этих вещах, в памяти всплывают их отдельные ключевые характеристики. Эти понятия постоянно развиваются (например, от стационарного телефона к мобильному). Только представители старшего поколения выберут картинку справа в качестве стереотипного изображения телефона. РИС. 4.2. где настоящая буква G? Память и Представления | 59 С точки зрения когнитивной экономии вполне логично не хра- нить в памяти виды с разных ракурсов, цвета и игру светотени всех когда- либо виденных телефонов. Мы довольно быстро переходим от конкретного телефона к обобщенному концептуальному пред- ставлению о нем. Оно проникает во все детали наших воспомина- ний о конкретных телефонах — например, об их обратной стороне, которую никто обычно не рассматривает. РИС. 4.3. стереотипные представления о телефоне [ ЗАМЕТКА НА ПОЛЯХ ] эту причуду когнитивных способностей человека мы можем использовать и в дизайне продукта. активируя абстрактную концепцию, уже имеющуюся в чьей-либо голове (например, этапы совершения покупки в интернет-магазине), мы можем эффективно управлять ожиданиями, соответствовать им и вызывать у клиента доверие. 60 | глава 4 Поговорим о мусоре Позвольте предложить вам эксперимент для демонстрации того, насколько абстрактной может быть наша память. Возьмите лист бумаги и карандаш, затем нарисуйте пустой квадрат на листе или воспользуйтесь свободным местом, оставленным на рис. 4.4. Затем, прочитав этот параграф, откройте рис. 4.5 и смотрите на приведенное на нем изображение в течение 20 секунд (но пока не трогайте приготовленный карандаш). Через 20 секунд закройте рисунок, чтобы больше не видеть его. Теперь возьмите карандаш и нарисуйте все, что вы видели. Необязательно при этом демон- стрировать талант Рембрандта или абстрактный гений Пикассо, просто сделайте быстрый набросок предметов, которые вы видели на рисунке, постаравшись сохранить их взаимное расположение. Наброска будет достаточно — на это вам отводится 2 минуты. РИС. 4.4. сделайте ваш набросок здесь Итак, начали! Помните: 20 секунд вы смотрите на рисунок (не при- ступая к рисованию), затем 2 минуты рисуете (не подглядывая). Память и Представления | 61 Поскольку я не могу видеть ваш рисунок (хотя уверен, что он пре- восходно получился!), вам придется оценить его самостоятельно. Посмотрите на оригинальное изображение и сравните со своим наброском. Может быть, вы что-то упустили? Два мусорных бака, одна крышка от мусорного бака, смятый пакет с мусором и забор? Отлично! Теперь сделаем следующий шаг. Уловили ли вы, что вер- хушка одного из мусорных баков и забора не попала на картинку? А также то, что на картинке не видно дно мусорных баков и ниж- нюю часть крышки? Не думаю. Когда люди смотрят на это или подобные изображения, они бес- сознательно «увеличивают» их масштаб и рисуют изображенные объекты в соответствии с представлениями об аналогичных объ- ектах, хранящихся в их памяти. В данном примере большинство зрителей выходят за рамки фотографии и дорисовывают верх- нюю часть забора и невидимую нижнюю часть мусорных баков, а крышку от мусорного бака изображают в виде полного круга. Все это имеет прекрасное логическое объяснение, если исходить из того, что вы используете стереотипные представления и пред- положения о мусорных баках, однако плохо согласуется с содер- жанием данной конкретной картинки. Строго говоря, мы не знаем, что находится за прямоугольной рамкой картины. Мы не знаем наверняка, что крышка от бака действительно имеет идеально круглую форму и что доски забора продолжаются за пределами видимого изображения. Не исключено, что на самом деле над ними высится десяток статуй Давида (см. рис. 4.6). |