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

33. Информация в форме рассказа или истории лучше воспринимается

Однажды, много лет назад, я обнаружила, что нахожусь в аудитории, заполненной недовольными дизайнерами пользовательских интерфейсов, которым в приказном порядке велели присутствовать на моих занятиях. Я знала, что многие из них или даже большинство считали это пустой тратой времени. Разумеется, подобная ситуация никоим образом не добавляла мне уверенности, но я решила набраться храбрости и все преодолеть. Моя прекрасно подготовленная и глубоко содержательная лекции не должна остаться без внимания, не правда ли? Я глубоко вздохнула, улыбнулась и уверенным голосом начала свою речь: «Здравствуйте. Я рада, что нахожусь здесь». Больше половины аудитории даже не посмотрели в мою сторону. Они продолжали заниматься своими делами – беседовали, читали сообщения или записывали что-то в ежедневниках. Один молодой человек читал утреннюю газету. Это было полным провалом.

В панике я подумала: «Что же делать?». И тут меня осенило, и я произнесла: «Я хочу рассказать вам историю». При слове «история» все подняли головы и глаза устремились на меня. Я знала, что у меня всего несколько секунд для того, чтобы начать рассказывать, пока я удерживаю их внимание.

«Это было в 1988 году. Команда офицеров военно-морского флота в изумлении смотрела на экран компьютера. Радар что-то засек в закрытом воздушном пространстве. Был ли это военный самолет? Или коммерческий лайнер? У них было две минуты, чтобы решить этот вопрос». Я сделала это! Аудитория была заинтригована. Я закончила свое повествование, которое самым лучшим образом проиллюстрировало мысль о том, как важно позаботиться о создании удобного пользовательского интерфейса, не допускающего неопределенности, и начало было положено. Остаток дня пролетел незаметно, все были заинтересованы и вовлечены в процесс, и я заслужила одну из лучших оценок как преподаватель. Теперь я убеждена, что магическую фразу «Я расскажу вам историю» нужно применять хотя бы один раз на каждом занятии, которое я провожу.

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

Классическая форма рассказа

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

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

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

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

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

Популярные сюжеты

Существует множество историй, чей сюжет снова и снова находит свое отражение в литературе и кино. Вот некоторые популярные темы, которые можно встретить:

• великое путешествие;

• жертва;

• грехопадение;

• ненависть;

• обман;

• достижение совершеннолетия;

• эпическая битва;

• любовь;

• месть;

• тайна.

Причинно-следственная связь

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

«Старший брат Джоуи ударил его снова и снова. На следующий день его тело было покрыто синяками».

«Сумасшедшая мать Джоуи безумно разозлилась на него. На следующий день его тело было покрыто синяками».

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

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

Рассказы полезны при любом взаимодействии

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

Medtronic – компания по производству медицинского оборудования. Взгляните на ее годовой отчет (интернет-версия не отличается от печатной версии: http://216.139.227.101/interactive/mdc2010/). На обложке отчета представлена прекрасная фотография Антуанетт Вальтерс, пациентки, которой помог один из продуктов Medtronic. Чуть дальше в отчете приведена короткая история Антуанетт:

«Антуанетт Вальтерс, которую вы можете видеть здесь и на обложке, страдала от поясничного сколиоза, боль не давала ей возможности что-либо делать, и деформация прогрессировала. Ей была сделана операция на позвоночнике с использованием продуктов Medtronic для устранения сколиоза. Теперь позвоночник Антуанетт стала гораздо прямее, боли практически ушли, и она даже стала на несколько сантиметров выше».

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

Выводы

• Истории и рассказы – естественный способ обработки информации.

• Используйте истории, если хотите, чтобы люди устанавливали причинные связи.

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

34. Человек учится на примерах

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

1. На Dashboard (Инструментальная панель) или на вкладке Campaign (Рассылка) щелкните на кнопке Create Campaign (Создать рассылку) и выберите тип рассылки, который вы хотите создать (начните с обычной онлайн-рассылки).

2. На шаге 1 Campaign Builder (Мастер создании рассылки) выберите список, который хотите послать. Как только вы выбрали список, выберите Next (Далее), чтобы двигаться дальше, или щелкните на кнопке Send to entirelist (Послать полный список).

3. На шаге 2 Campaign Builder вы будете настраивать параметры: название рассылки, тема сообщения, от кого и кому послано сообщение. Также вы сможете персонализировать свою рассылку при помощи специального поля *|MERGETAGS|*. Здесь вы найдете параметры для отслеживания, аутентификации, анализа результатов отслеживания и разделения на социальные группы.(Используйте кнопки Next (Далее) и Back (Назад), чтобы осуществлять навигацию на этом шаге (а не кнопку браузера Back (Назад)).

4. Вашим следующим шагом будет выбор шаблона письма. Для этого выберите Template (Шаблон) для вашего сообщения, щелкнув на Pre-designed (Ранее установленный), Autoconnect (Автоматическое соединение), Premium (Вознаграждение), Start from scratch (Начать с рабочей области) или на каком-либо другом пункте (чтобы получить базовый шаблон, который вы можете полностью переделать) под заголовком Templates (Шаблоны). Шаблоны, которые вы установили и сохранили, будут существовать под именем My templates (Мои шаблоны). Если вы хотите предусмотреть свой собственный код, используйте параметры Paste/import HTML (Вставка/ Импорт HTML) или Import from URL (Импорт из URL). Если вы хотите создать редактируемый (или нередактируемый) шаблон для клиентов, выберите Code custom templates (Кодировать клиентские шаблоны).

5. Когда вы выбрали шаблон, вы находитесь на шаге 3 Campaign Builder. Вам нужен редактор, с помощью которого вы будете редактировать ваши стили и содержание. Щелкните на Show style editor (Показать редактор стилей), чтобы выбрать параметры стилей.

6. Style Editor (Редактор стилей) позволит вам использовать параметры для редактирования стилей каждого раздела. Здесь выбрана вкладка Body (Содержание) и нажата кнопка подзаголовка Title style (Стиль заголовка). Это позволяет установить высоту строки, размер шрифта и другие параметры для данного раздела.

7. Щелкните где-нибудь внутри красной рамки, обозначенной штрихами, чтобы вызвать окно редактора содержания.

8. После того как вы сохранили изменения, подождите, пока содержание обновится, затем щелкните на Next (Далее). Генератор обычного текста автоматически превратит текст HTML в обычный текст. Посмотрите на эту версию текста, чтобы убедиться, что она выглядит так, как вы хотели, нажмите Next (Далее), чтобы перейти к последнему шагу Campaign Builder.

9. Шаг 5 позволяет проверить настройки. Если обнаружится, что вы что-то упустили во время создания рассылки, появится предупреждение на красном фоне. Щелкните Edit (Редактировать), чтобы вернуться назад в любое место, на которое вы хотите обратить внимание.

10. Вы можете снова осуществить предварительный просмотр настроек, щелкнув на кнопке Pop up preview (Вызвать предварительный просмотр).

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

Слишком длинно и трудно для понимания, не так ли? К счастью, на самом деле информация на MailChimp представлена не так. Текст тот же самый, но он сочетается со снимками экранов, показывающих примеры, о которых говорится в тексте. На рис. 34.1 показано, как выглядит экран на самом деле, с текстом и картинками.

Рис. 34.1. MailChimp (mailchimp.com) использует картинки, чтобы на примере показать разные шаги

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

Рис. 34.2. MailChimp также использует видео для демонстрации примеров

Выводы

• Люди лучше учатся на примерах. Не говорите им, что делать, лучше покажите.

• Используйте картинки и снимки экранов, чтобы показать примеры.

• Еще лучше использовать короткие видеоролики.

35. Человек создает категории

Если вам от 5 до 60 и вы выросли на передачах телевидения США, вы, возможно, поймете, что я имею в виду, если я скажу: «Ни одна из этих вещей не похожа на другую».

Смотрите видео «Улица Сезам»

Если вы не знаете, о чем я говорю, вы можете посмотреть клип на YouTube, например http://bit.ly/eCSFKB.

Цель этого урока «Улицы Сезам» – научить малышей, как замечать различия и как начать учиться распределять вещи по категориям (классифицировать).

Интересно, что с научной точки зрения пытаться учить детей создавать категории почти бессмысленно или, по крайней мере, неэффективно, – по двум причинам:

• люди создают категории в силу своей природы. Так же естественно, как они обучаются родному языку, они обучаются и распределять по категориям явления окружающего мира;

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

Человеку свойственно раскладывать все по полочкам

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

Если не вы, то кто?

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

Не так важно, кто организовал, важно, как организовано

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

Выводы

• Людям нравится распределять вещи по категориям.

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

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

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

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

36. Время относительно

Такое когда-нибудь случалось с вами? Вы поехали в гости к друзьям. Два часа вы потратили на дорогу туда и два часа – на дорогу обратно, но вам кажется, что прошло гораздо больше времени.

В книге «Парадокс времени» (The Time Paradox, 2009) Филип Зимбардо и Джон Бойд обсуждают тему нашего ощущения времени: оно относительно, а не абсолютно. Существуют иллюзии времени, так же как иллюзии зрения. Зимбардо упоминает исследование, которое показало, что чем больше информации обрабатывает наш мозг, тем, как нам кажется, больше времени проходит. Если соотнести это утверждение с концепцией постепенного раскрытия, обсуждавшейся выше в этом разделе, можно сказать, что если человек задумывается на каждом шаге, то ощущения этого человека говорят, что на решение задачи уйдет слишком много времени. Такую иллюзию создают ментальные процессы.

Восприятие времени и реакция на него также сильно зависят от предсказуемости и ожиданий. Допустим, вы монтируете видеоролик на своем компьютере. Вы нажали кнопку, чтобы сформировать видеофайл. Будете ли вы разочарованы тем, сколько времени это займет? Если вы делаете это часто и обычно этот процесс занимает 3 минуты, тогда 3 минуты не покажутся вам долгими. Если на экране присутствует индикатор хода процесса, вы знаете, чего ожидать. Вы можете выпить чашечку кофе и вернуться. Но если этот процесс иногда занимает 30 секунд, а иногда – 5 минут и вы не знаете, как будет в этот раз, 3 минуты разочаруют вас и покажутся намного длиннее, чем обычно.

Спешащий человек редко останавливается, чтобы помочь

Джон Дарли и С. Бэтсон (John Darley, C. Batson, 1973) провели эксперимент «Добрый самаритянин». На его проведение исследователей натолкнула библейская притча о добром самаритянине: священник и левит (оба очень важные и занятые люди) проходят по дороге мимо больного странника, оставляя его заботам скромного (и, предположительно, менее занятого) самаритянина.

Итак, студенты духовной семинарии готовятся произнести свою первую в жизни проповедь. Для этого им нужно пройти в здание, находящееся в нескольких кварталах.

Экспериментаторы давали участникам различные инструкции в зависимости от имеющегося у них запаса времени: низкая, средняя и высокая степень спешки:

• Низкая степень спешки: «У вас в запасе некоторое время, но ничего не случится, если вы придете пораньше».

• Средняя степень спешки: «Чтобы успеть вовремя, вы должны выйти прямо сейчас».

• Высокая степень спешки: «Вы опаздываете, вас ждут уже несколько минут, так что лучше поторопиться».

Каждому студенту давалась карточка размером 3x5 с инструкцией, куда идти. По дороге семинаристы натыкались на человека, который полулежал на обочине, стонал и кашлял. Нужно было выяснить следующий вопрос: какое количество людей остановятся и предложат помощь? Зависит ли это от того, какое выступление они подготовили? Или это зависит от инструкций, которые они получили относительно запаса времени?

Сколько процентов людей остановилось, чтобы помочь?

• низкая степень спешки: 63 %;

• средняя степень спешки: 45 %;

• высокая степень спешки: 10 %.

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

Ожидания со временем меняются

Лет десять назад, если сайт загружался 20 секунд, это никого не удивляло. Но в наши дни, если он грузится 3 секунды, мы проявляем нетерпение. Есть один сайт, который я посещаю регулярно, – он грузится 12 секунд. Это подобно вечности.

Механизмы времени в нашем теле

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

Выводы

• Всегда используйте индикаторы хода процесса, это поможет пользователям понять, сколько осталось времени до завершения.

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

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