О дизайне восприятия
Зачем мы придумываем новые слова для старых вещей
Я хотел бы поговорить о любознательности. Я считаю любознательность — и шире, любопытство, — одним из важнейших инструментов дизайнера и всегда это повторяю, когда заходит речь о том, что должен дизайнер уметь и чему непрестанно должен учиться.
Как научиться любознательности? Или, вернее, как её развить? — Эти вопросы занимают меня постоянно.
Впрочем, темой настоящей статьи заявлен «дизайн восприятия» и мне сейчас крайне любопытно, что вы думаете по поводу того, о чём же пойдёт речь. Что такое, по-вашему, дизайн восприятия?
Я сейчас расскажу о своих поисках ответа на этот вопрос и о каких-то открытиях, на которые я натолкнулся. Вероятно, вы сами уже задавались какими-то схожими вопросами в своей практике и потому некоторые мои «достижения» покажутся вам очевидными и даже немного детскими. Я буду рад, если вы где-нибудь пометите себе такие мои выводы и доводы, а на другую сторону всё же занесёте то, чего ранее не знали. Таким образом, в конце статьи мы сможем свести счёт.
Итак, о дизайне восприятия. Прежде, как я натолкнулся на эту тему.
Почему мы ограничиваем себя в выразительных средствах?
Меня всегда интересовало, почему мы с вами — я имею в виду сейчас веб-дизайнеров и дизайнеров приложений — в своих работах оперируем очень небольшим набором выразительных средств.
Почему наши с вами макеты в конце концов выглядят как замысловато организованные коллекции ссылок, кнопок, чекбоксов, попапов, радиогрупп и вот этого всего, что уже много раз нарисовано в различного рода гайдлайнах. Мы, конечно, любим приукрасить и нарисовать собственные версии всех этих «интерфейсных прецедентов», но и здесь не выходим за границы узнаваемости.
Почему мы всё время опираемся на этот набор и с большим трудом выходим за его пределы? А ведь, когда мы с вами видим, как кто-то другой удачно вышел и придумал какой-то совершенно свой, непохожий на остальные интерфейс, мы радуемся этому интерфейсу, как дети.
«вау-орального планировщика» Clear поразил многих и вызвал волну подражателей.
Мы стремимся побыстрей огайдлайнить поразительный интерфейс, превратить в прецеденты, которые затем использовать самим.
Почему? Потому ли, что так принято? А почему так принято? Я захотел посмотреть, как возникли интерфейсы и как мы пришли к текущему положению вещей.
Язык интерфейсов
Текущее положение вещей можно описать примерно следующим образом.
Вот у нас есть пользователь, он смотрит на некоторые символы — кнопки, иконки, подписи, — которые весьма похожи на буквы: их немного и значение их целиком определяется взаимным расположением и окружающим контекстом. Из этих «букв» пользователь складывает «слова» и понимает смысл происходящего: что же имеется в виду — что ему следует далее делать.
Расстояние между интерфейсными «словами» и смыслом очень большое: в интернет-магазине кнопка «корзина» очень непохожа на реальную корзину, каковой последняя бы ни была из множества существующих.
Как возникла эта практика?
Возникновение текстов в интерфейсах
Мы с Димой Неягловым однажды уже написали статью на тему возникновения текстов в интерфейсах, и я смело могу сказать, что наша с вами дизайнерская деятельность в информационной среде началась примерно тогда же, когда на инструментах появились первые тексты-подписи: в середине восемнадцатого века.
Позволю себе избыточную цитату.
На инструментах семнадцатого века и раньше не обнаруживается надписей, поясняющих их функцию. По всей видимости, до введения в обращение сложных составных механизмов, человек не испытывал нужды писать на предметах своего обихода — за исключением, разве что, нанесения собственного имени на резинку для трусов. Индустриальная революция изменила многое: машины стали сложнее, но главное — их стали продавать и покупать. На крупных агрегатах того времени — ткацких станках, паровых двигателях и т.п. — всё ещё нет подписей, если не считать таблички производителя. Зато часто можно было встретить схемы и иллюстрации, которые существовали отдельно от инструмента.
1875 год
Вместе с крупными механизмами в магазинах появились приборы поменьше, например арифмометры. Это, пожалуй, первый случай, когда элементы управления стали подписываться; ранние арифмометры семнадцатого века выпускались безо всяких пояснений. На самом первом арифмометре Паскаля была табличка, на ней можно было увидеть названия разных французских банкнот. В 1645 году Паскаль произвел около пятидесяти своих машин и продал чуть больше дюжины.
1652 год
Арифмометры конца восемнадцатого-начала девятнадцатого веков несколько отличаются по схематике, и значительно — по числу пояснений.
1822 года
Рассмотрев эволюцию других бытовых приборов с момента их появления до массового производства, мы сможем вывести закономерность: первое поколение получает распространение без надписей, а на следующие, пусть незначительно отличающиеся по конструкции, наносится множество табличек, пояснений и т.п.
Верхний ряд:
слева — 1912 г.,
справа—1947 г.
Нижний ряд:
слева—1930 г.,
без подписей, но с инструкцией;
справа—1985 г., содержит множество
подписей.
Стандартные рукоятки, различные подписи
Надписи на этих приборах нужны, чтобы отличать одну рукоятку от другой. Ручки приборов похожи друг на друга — это хорошо заметно на примерах. Уже в начале двадцатого века инженеры стараются облегчить жизнь свежеокрашенного владельца нового радиоприёмника, и, сделав две одинаковые ручки, тут же размещают рядом с ними подписи: «громкость» и «частота».
Изготовление разного рода управляющих элементов было сопряжено с техническими сложностями. Поэтому необходимое разнообразие функций выражалось через разнообразие подписей, которые скоро иконифицировались как из соображений глобализации рынков сбыта продукции, так и из соображений компактности (а приборы со временем становились всё более компактными).
Любая рукоятка на ваш вкус
Однако уже сегодня в наших интерфейсах нет проблемы с изготовлением тех инструментов управления, которые максимально отражали бы функцию.
а лишь устройство предыдущего инструмента.
Мы могли бы сделать такой интерфейс управления громкости, который бы больше говорил о смысле этого управления.
Сравним эти два интерфейса: в том, что справа, вы видите не только рычажок изменения громкости, но и визуальное представление того, «насколько стало громче».
Следует отметить, что линейный прирост воспринимаемой громкости соответствует экспоненциальному изменению мощности сигнала — и эта технологическая подробность полностью скрыта от пользователя (а также от некоторых разработчиков).
Почему же мы продолжаем держаться за простые символы, которые необходимо выучить прежде, чем браться за любой интерфейс? Ведь даже после выучивания символов необходимо разобраться, как устроены слова из этих символов, и как слова складываются в нужные нам функции.
Не потому ли с 1965 года изменилась и концепция подписей к приборам — теперь на приборах нас учат везде.
на большинстве стиральных машин можно найти пометки о том,
как стирать определенные
ткани.
И дизайнеры вынуждены писать разные пояснения и подсказки, а пользователи… пользователи всё стерпят, мы к этому привыкли.
Почему мы всё ещё наследуем старые языки интерфейсов?
Я бы выделил две причины, которые в сумме и удерживают нас в этой не слишком-то приятной позиции, мешают нам создавать более глубокие и более полные слова, что отражали бы логику нашей предметной области и, одновременно с этим, оставались бы понятными.
Во-первых, мы опасаемся того, что наши новопридуманные артефакты дизайна не будут восприняты пользователем в том смысле, который мы в них намереваемся вложить.
Во-вторых, зачастую прямой перенос значения из предметной области в плоскость дизайна представляется нам неподходящим уже в самый первый момент — как в примере с корзиной для покупок, что я приводил выше.
Мы предпочитаем объяснить все сложные понятия предметной области на словах, причём в прямом смысле: подписями, подсказками и инструкциями.
Дизайн восприятия
Каким мог бы быть дизайн, если бы он смог вырваться из этой петли?
Я назвал такой дизайн «дизайном восприятия», поскольку он, в отличие от многих привычных нам подходов, в большей степени ориентируется на восприятие человека, на его перцептивную систему; тогда как дизайн интерфейса через гайдлайны опирается на когнитивную систему — на способность человека распознавать символы и увязывать сложные значения с ними.
Когнитивный подход к дизайну предполагает, что человек умеет читать и считать. Поэтому нам достаточно будет описать нашу предметную область вербально, сделать соответствующие подписи к типовым рукояткам — и человек дальше разберётся сам. Прочитает, осознает и будет действовать из инструкции.
Предположим, что мы имеем дело с человеком, который ни читать, ни считать особенно не умеет.
Нам придётся строить интерфейсы, в которые нельзя поместить слова. Пиктограммы, которые приводятся к словам, мы тоже пока запретим. Ну и, наконец, запретим себе использование любых интерфейсных прецедентов из существующих гайдлайнов — представим себе, что человек наш ничего не знает о них, и «кнопка» пока ничем для него не отличается от «подписи».
На что нам опираться?
Прежде всего, на устройство восприятия человека.
В своём докладе про кривые Бернштейна-Безье я представил свою гипотезу об устройстве восприятия форм через восприятие кругов: простые для восприятия формы должны строиться на малом числе кругов. Как это знание будет для нас важно сейчас?
Фокус
Я хочу поговорить о фокусе. Не о том цирковом трюке, где искусный престидижитатор достаёт из очевидно пустого цилиндра сперва кролика, затем букет цветов и, наконец, прелестную ассистентку. Я хочу поговорить об управлении вниманием зрителя.
Множество задач, которые приходится решать в дизайне, отталкиваются от потребности управлять вниманием зрителя. Нам оказывается важным подчеркнуть одни аспекты продукта и сгладить другие. Помочь человеку пройти самой короткой дорожкой через все наши нагромождения форм. Выбрать «кнопку по-умолчанию». Много таких задач и все они в своём решении должны оттолкнуться от фокуса внимания.
Зрение человека устроено таким образом, что в каждый момент он только малую часть своего угла обзора видит чётко — что называется, «в фокусе».
Но некоторые объекты привлекают наше внимание надолго.
Ограниченная зона фокуса обусловлена тем, что в глазу человека «нервные окончания» распределены неравномерно.
Я взял «нервные окончания» в кавычки, поскольку на самом деле неравномерно распределены не только «окончания» и уж тем более «нервы», но и пигменты, реагирующие на разные части светового спектра.
Примерно напротив хрусталика размещено так называемое «жёлтое пятно», в котором нервных окончаний гораздо больше, нежели в среднем на остальной площади глазного дна. То место, куда мы смотрим нашим жёлтым пятном, мы видим несравненно более чётко, а остальное представляется нам размытыми кругами.
Более того, все остальное представляется нам ещё и гораздо менее цветным, поскольку большинство из упомянутых окончаний соединено с колбочками — пигментами, которые воспринимают отдельные участки спектра, преимущественно жёлто-красный и жёлто-зелёный.
В зоне фокуса мы гораздо лучше различаем цвета, чем на периферии, где основной эффект зрения мы получаем от палочек, которые острее реагируют на интенсивность света, чем на отдельный участок его спектра (конкретно, на синий).
Фокус в интерфейсах
Я хочу вам показать, что для того, чтобы управлять вниманием человека, нам нужно смоделировать принципы, которыми это внимание управляется.
Когда человек будет смотреть на наш интерфейс, он должен что-то увидеть как бы в фокусе, а что-то — размыто.
Если мы хотим что-то вынести на передний план, то нам следует добавить этому цветов, а всё заднеплановое притушить по цветности и постараться так отобразить, чтобы оно раскладывалось в небольшое количество кругов, не привлекая внимания зрителя.
Внимание зрителя же постоянно перемещается по картинке, ощупывая все её стороны.
Внимание зрителя привлекают лица, это довольно известный факт, — и потому любое лицо, которое вы поместите в интерфейс, станет его фокальной точкой.
Есть у вас комментарии с юзерпиками — придумайте способ не притягивать туда внимание вот прямо сразу — сделайте эти юзерпики менее броскими. Например, чёрно-белыми.
В некоторых случаях мы можем знать, что человек смотрит — направляет своё внимание — в отдельные места интерфейса.
Давайте поддержим это — так мы нашли применение тому, что называется ‘hover’: при наведении на отдельные объекты, которые находятся на периферии нашего внимания, мы будем эти объекты детализировать, оцветнять и всячески приближать к фокусу.
И постараемся не делать более одного фокуса на экране. Глаз у человека немного и они не стремятся разбежаться.
Сетки
Сетки, о которых Дима Неяглов рассказывал в Воронеже, — такой же инструмент работы с восприятием. Сетки нет в итоговом продукте, хотя в процессе работы дизайнер постоянно на сетку опирается, рисует её в фотошопе, выравнивает по ней объекты…
Но потом дизайнер сетку выключает, скрывает и в таком виде отдаёт макет дальше, и в продукте сетки нет. Однако в восприятии эта сетка выстраивается и организует вокруг себя всё, что необходимо.
Кнопки и пиктограммы
Все эти приёмы недостаточно говорят нам о том, как нам избежать, скажем, кнопок. Или пиктограмм. Давайте попробуем разобраться и в этом — в том, как нам перцептивными средствами передать некоторый смысл, который либо вовсе не регистрируется когнитивной системой, либо же обрабатывается ею слишком долго.
Про такие задачи мы можем сказать: перед нами довольно сложная информационная система, в которой человек что-то должен делать. А что именно делать, куда нажимать — с первого взгляда непонятно. Мы могли бы объяснить это человеку инструкцией и подписями, да вот только читать он не умеет. А что умеет?
Всякий человек способен к впечатлениям.
Соответственно, дизайн наших «иконок» и «кнопок» должен работать с впечатлениями. Дизайн, я думаю, призван решать подобные задачи и хорошо с этим справляется.
Я хочу вам рассказать про одну штуку, которой уже много лет. Эта штука называется оригами: фигурки, складываемые из бумаги.
折り紙, букв.: «сложенная бумага»
Оригами появилось, как и (почти) всё японское, в Китае; в первых веках новой западной эры.
Оригами возникло из церемонии жертвоприношения, где богатства передавались из мира реального в мир виртуальный, то есть в мир духов. Передавались они через сожжение и, поскольку золото горит не очень хорошо, предприимчивые китайцы начали складывать «золотые» свитки из бумаги.
Бумага тогда тоже была недёшева, потому складывали их не в пачки подобному тому, как мы сейчас сдаём макулатуру, а так, чтобы при форме слитка внутри было пусто. Чтобы создавалось впечатление цельного слитка, но внутреннее устройство от этого впечатления отличалось.
Оригами сегодня — это открытка: нечто эмоциональное, что используется для передачи отношения, впечатления — того, что словами не выразишь. Оригами — это инструмент коммуникации, который работает не в информационном, не в когнитивном поле.
Аллегория восприятия
Результат оригами — это аллегория восприятия. Это иносказательно, художественно переданное впечатление: у автора оно есть, у зрителя оно появляется, но в реальности всё, что передаётся — это скомканный квадрат бумаги.
Вот кролик.
Но он не кролик ни в одном смысле, который нам мог бы прийти в голову: у него нет шерсти, он очень условен. Более того, если мы возьмём этого «кролика» в руки, то увидим, что он на кролика-то похож только одной стороной, обращённой ко зрителю.
Этот листок бумаги — не модель кролика, а ракурс, точка зрения автора на что-то. Что хочет сказать автор этого произведения, — что,иными словами, мы должны увидеть в этой фигурке?
Морковку жуёт
Маленький друг. Намокли
Мои рукава.
Мы должны почувствовать то, что художник оригами заключил в этот образ, тогда смысл оригами не потеряется.
Автор хочет передать нам некоторое чувство. На кролика автор смотрит не как робот, которого интересуют там длина или вес кролика, а как чувствующее существо, которого что-то глубоко трогает, что-то глубоко интересует.
Впечатления от кнопок
Вооружимся этим наблюдением и посмотрим теперь на такую кнопку:
Что значат эти цифры? Что изменится, если там будет «124»? Без знания сложной символьной системы, придуманной авторами кнопки, нам этого не понять. Оторвав кнопку от контекста, мы лишили эту часть кнопки своей функции.
Хотя, наверное, эти иконки с цифрами всё же будут чем-то различаться — размером, масштабом, заметностью.
Но всё ещё непонятно, что они означают для нас в эмоциональном смысле: тревожность? радость? назойливость?
Я считаю, что мы должны на каждый наш кусочек дизайна смотреть таким взглядом, запрещающим читать; спрашивать себя, какое тут впечатление.
Интерфейс должен стать оригами того объекта, который он представляет зрителю. Интерфейс должен передавать зрителю то, что глубоко волнует создателя объекта (или того, кто наполнил интерфейс содержанием).
Дизайнер же не просто так рисует кнопку или даже целый экран интерфейса. Нас интересует деятельность, которая с помощью этого интерфейса возможна, и мы хотим, чтобы человек понял эту деятельность и включился в неё. Эта деятельность нам почему-то важна.
Почему-то важно нам в этом примере, чтобы человек зашёл внутрь, ведь уже 123!
Нам нужно создать такое впечатление, которое бы показало, развернуло человеку эту важность. Например, «нам важно, чтобы вы зашли в ваш инбокс, ведь там Цукерберг!»
Анти-инфографика
Наша задача в разработке оригами — максимизировать отношение впечатления к информации.
Нам нужно сообщать человеку как можно меньше «информации» — того, что он может прочитать или додумать, пользуясь инструкциями. При этом минимуме нам придётся выжать по максимуму впечатления.
Какое впечатление мы хотим получить у человека, который заходит в свой почтовый ящик? Там ведь очень и очень много информации сразу на него вываливается. А впечатление только одно — «всё ли ок? не нужно ли мне сейчас с этим разбираться?»
И если мы на Gmail повлиять не можем, то мы можем повлиять на что-то другое. Например, поймать человека до того, как он попадёт в свой почтовый ящик и показать ему, что, в целом-то «всё ок, не нужно никуда ходить».
Почему впечатление подталкивает нас к действию?
Действия приходят из желаний, желания приходят из чувств, а чувства мы берём в восприятии, так сказал бы буддист.
Но разбираться нам следует с другой стороны — почему мы до сих пор не действуем. Зачем нам нужна очередная «кнопка» или пояснение, зачем мы подталкиваем человека?
Для избавления от всякой кнопки нам придётся разобраться в том, какое действие скрывается за ней, какова роль этого действия в общей деятельности и что там мешает этому действию проистекать естественным путём.
Кнопка — это препятствие между человеком и результатом его труда.
Представим себе, что мы разрабатываем текстовый редактор, в котором люди пишут на карточках, как Набоков.
И мы хотим, чтобы человек свой длинный лист в любой момент мог нарезать на части, сделать карточки из уже написанного и переставить их местами.
Мы могли бы сделать кнопку, но вместе этого мы делаем следующее: мы представляем, что разрезание уже проделано и думаем, когда бы показать это человеку — тогда, когда это будет в фокусе его внимания. Мы думаем, какое действие тут будет наиболее естественным, чтобы показать человеку только намёк на то, что это действие уже начинает происходить, чтобы человеку осталось только продолжать.
к руке.
И потом, когда человек научится, он перестанет замечать все наши подсказки, потому что они будут естественно ложиться в те действия, которые он совершает.
Вместо кнопок мы использовали результаты всех действий, которые совершает человек. Мы показали ему, как действие совершается и какой будет результат, это и стало нашей «кнопкой».
Назначение дизайна восприятия
Задача дизайнера при разработке подобных интерфейсов — так преобразовать деятельность, которой предлагает заняться продукт, чтобы эта деятельность стала более доступной для человека. Чтобы человеку не приходилось «обучаться продукту» специальными инструкциями и годами тренировки, проходить сертификации.
Сверхзадача — сделать такую деятельность в принципе возможной для тех, кто раньше и не думал, что он на это способен.
Романы писать очень сложно, например. Нужно много всего уметь и иметь, чтобы писать романы. Кучу книжек, карт, словарей; специальные программы для отслеживания веток сюжета, судеб персонажей…
Мы же должны задуматься: как нам так видоизменить написание романа, чтобы человек стал способен его писать. Что для нас важно в написании романов — быть может, дело не в романе самом как многостраничном томе, а в том, как роман влияет на людей? Как нам в интерфейс положить то впечатление, которое подвигнет автора написать что-то, способное на читателя повлиять?
Такими вопросами и озадачен дизайн восприятия, о котором, я надеюсь, у вас сегодня составилось некоторое впечатление.
