Дизайн для эмоций и «потока».

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

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

Психолог Михай Чиксентмихайи (1990) описал сфокусированное внимание как «психическую энергию». Если рассмотреть обычное понятие "энергия", ни одна работа не выполняется без нее, и во время выполнения работы энергия расходуется. Многие из нас испытывали интеллектуальное/эмоциональное состояние, когда все наше внимание (или энергия) было полностью сфокусировано на какой-либо деятельности. Чиксентмихайи (1990) назвал это состояние «поток», основываясь на том, как участники его исследований описывают подобные ощущения.

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

Внимание и «поток»

Элементы, связанные с состоянием потока могут быть выделены в три области;
1. Причины «потока»
2. Характеристики «потока»
3. Последствия «потока»
(Новак, Хоффман и Юнг, 1999).

1. Причины «потока»

* Ясная цель

* Мгновенная обратная связь при успешной попытке добиться цели

* Уверенность в том, что вы обладаете необходимыми навыками для решения проблемы

2. Характеристики «потока»

* Полная концентрация и сфокусированное внимание

* Ощущение контроля над всеми действиями

* Открытость к новому

* Возрастающая исследовательская активность

* Повышенная обучаемость

* Позитивные ощущения

3. Последствия «потока»

* Утрата осознания себя

* Искаженное восприятие времени

* Деятельность ощущается как содержащая в самой себе вознаграждение

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

* Обеспечение мгновенной обратной связи

* Гармония между восприятием проблемы и способностями пользователя

Дизайн для «потока»

Нет нужды посещать курсы или изучать новое программное обеспечение для того, чтобы создавать дизайн для «потока». Скорее всего вы уже делаете это. Начнём с рассмотрения желаемого результата каждого взаимодействия, а затем удалим всё, что отвлекает пользователя от достижения этого результата.

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

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

«Поток» возникает на границе между тревогой и скукой. Думайте об этой границе как о границе между тревогой и скукой (рис. 1).

Понятие «потока»

Рис. 1: Тревога, скука и «поток» (Чиксентмихайи, 1990)

(подпись van Gorp'а, 2006)

Если задачи, с которыми мы сталкиваемся, усложняются, мы начинаем беспокоиться и теряем «поток». Для возвращения в него нужно повысить мастерство и успокоиться. Ситуация повторяется, когда мы становимся опытнее: простые задачи начинают нас утомлять и мы затеваем поиск новой достойной проблемы.

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

Причины «потока»

1. Ясная цель…

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

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

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

3. Представленная как проблема, для решения которой есть все необходимые навыки.

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

«Поток» и эмоции

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

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

Межличностная дистанция и возбуждение

Рис. 2: Межличностная дистанция и возбуждение

Как смотрится изображение справа по сравнению с тем, когда оно же расположено слева?

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

Целенаправленность против опытности

Разные мотивации для использования веб-сайта требуют разных дизайнов для способствования «потоку» (Novak, Hoffman and Yung 1996). Новички склонны рассматривать интернет как игровую площадку, в то время как более опытные пользователи рассматривают интернет с более практических позиций (King 2003). Это ведет к различию между целенаправленным или эмпирическим использованием. Вхождение в «поток» чаще возникает при целенаправленном использовании, в связи с решением более сложных задач.

Новички — эмпирическое использование

* Менее способные

* Больше исследуют

* Ориентированы на развлечения

Опытные пользователи — тенденция к целенаправленному использованию

* Более способные

* Меньше исследуют

* Связаны задачами (например, научные исследования, работа и покупки)

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

Сайт фильма «Disturbia»

Рис 3: сайт фильма «Disturbia»

Пример визуальной наполненности, ориентированности на развлечения совсем без или с небольшими трудностями.

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

Yahoo

Рисунок 4: Yahoo

Обычно, если задачи нам сильно не нравятся, мы не имеем должной мотивации для их выполнения. В таких случаях повышение уровня раздражения путём использования нарратива может повысить мотивацию пользователей. Сайт Tango Tax использует визуальные элементы, похожие на те, что рисуют на киноафишах: для них характерны высокая контрастность и кинематографический стиль, повыщающие раздражение. Программные продукты также используют классический нарративный элемент кинематографа - «us vs. them» - служащий для повышения мотивации пользователей.

Tango Tax

Рисунок 5: вебсайт Tango Tax

Заключение – Качества веб-сайтов, способствующие вовлечению в «поток»

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

Вот несколько основных качеств веб-сайтов, которые могут помочь вовлечь в «поток».

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

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

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

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

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

Список литературы:

Csikszentmihalyi, Mihaly. (1990). Flow – the Psychology of Optimal Experience. New York: Harper Perennial.

Csikszentmihalyi, M. (1977). Beyond Boredom and Anxiety, San Francisco: Jossey-Bass. Copyrights: Journal of E-Business (International Academy of E-Business). All rights reserved. Journal of E-Business, Vol. 1, Issue 2, December 2001.

King, Andrew B. “Chapter 2 – Flow in Web Design.” 2003. http://www.websiteoptimization.com/speed/2/ accessed on January 21/2007.

Fogg, B.J. (2003). Persuasive Technology – Using Computers to Change What We Think and Do. San Francisco: Morgan Kaufmann Publishers.

Hoffman, D.L, Novak, T (1996), “Marketing in hypermedia computer-mediated environments: conceptual foundations’”, Journal of Marketing, Vol. 60 pp. 50-68.

Norman, Donald A. (2004). Emotional Design – Why We Love (or Hate) Everyday Things. New York: Basic Books.

Novak, T.P, Hoffman, D.L (1997), “Measuring the flow experience among Web users,” Interval Research Corporation.

Novak, T, Hoffman, D, Young, Y (1998), “Measuring the flow construct in online environments: a structural modeling approach”, Owen Graduate School of Management, Vanderbilt University, working paper.

Novak, T. P., Hoffman, D. L., and Yung, Y. 2000. Measuring the Customer Experience in Online Environments: A Structural Modeling Approach. Marketing Science 19, 1 (Jan. 2000), 22-42

Rettie, R., (2001), An Exploration of Flow during Internet Use, Internet Research, 11(2), 103 – 113.

Simon, H. A. (1971), “Designing Organizations for an Information-Rich World”, in Martin Greenberger, Computers, Communication, and the Public Interest, Baltimore, MD: The Johns Hopkins Press, ISBN 0-8018-1135-X. pp. 40-41.

Simon, H. A. (1996), The Sciences of the Artificial (3rd ed.), Cambridge, MA: The MIT Press, ISBN 0-262-69191-4. pp. 143-144.

van Gorp, Trevor, J. (2006). Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Human-Computer Interaction. University of Calgary, Faculty of Environmental Design, Master’s Degree Project.