Уровень современных цифровых технологий позволяет дизайнерам и веб-разработчикам смело экспериментировать при создании интерфейсов для различных устройств. Современные интерфейсы становятся все более интерактивными и это трудно не заметить. Сегодня многие дизайнеры начинают думать об опыте взаимодействия задолго до создания первых прототипов, так как цена возможной ошибки очень высока, а рисковать никто не хочет. Отсюда и столько разговоров о UX – прежний веб уходит в прошлое и в интернете начинают доминировать новые тренды. И одним из основных трендов является интерактивный дизайн. Но это глобальная тенденция, своеобразный тектонический сдвиг, который чувствуют все, но пока мало кто представляет, как будут выглядеть интерфейсы ближайшего будущего. Однако уже сейчас можно отметить 6 тенденций в интерактивном дизайне, которые мы, несомненно, увидим в 2016 году.

СИНЕМАГРАФИКА

Синемаграфика – это нечто среднее между фотографиями и видео. Зацикленные GIF-изображения объединяют статику и динамику и выглядят очень эффектно. Тренд появился в 2011 году и быстро набрал популярность. Использование синемаграфики в интерактивном дизайне позволит привлечь внимание пользователей к интересному графическому контенту, так что дизайнерам стоит задуматься о присутствии зацикленных гифок в их проектах.

ЛЕНДИНГИ С ДЛИННОЙ ПРОКРУТКОЙ

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

MATERIAL DESIGN

Материальный дизайн, созданный разработчиками Google, появился в результате усилий по унификации интерфейсов для Android-приложений. Стремясь сделать интерфейсы более интерактивными, дизайнеры отталкивались от идеи quantum paper – «квантовой бумаги». Расположенная в трехмерном пространстве плоская бумага подчиняется законам физики, а дизайне активно используется анимация. Элементы имеют тени, свечения, они могут двигаться, ускоряться или замедляться. Данный стиль позволяет привнести в дизайн дополнительную глубину и реализм, а анимация используется не только для «оживления» интерфейса – пользователь всегда остается в курсе того, что происходит. В материальном дизайне приложение реагирует на действия пользователя, что позволяет упростить визуальные связи при просмотре разных видов контента. Использование принципов Material Design дает возможность проектирования эффектных интерактивных сайтов и приложений.

АНИМИРОВАННАЯ ТИПОГРФИКА

Добавить сайту интерактива можно и с помощью типографики. Главное – не переусердствовать в этом. Лучше всего в дизайне смотрятся анимированные заголовки, при этом вовсе не обязательно, чтобы текст крутился, вертелся или вел себя не очень понятным для пользователя образом. Если заголовок будет реагировать на наведение курсора, к примеру, изменением цвета, это сделает взаимодействие с интерфейсом более интересным.

СЛОЖНАЯ ВИЗУАЛИЗАЦИЯ

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

ORGANIC LAYOUTS

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

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

Приведенное выше – это базисное определение интерактивного дизайна (Interaction Design - IxD), соединяющее вместе общие тенденции определений, данных известными дизайнерами Денном Саффером (Dan Saffer 1 ) и Робертом Рейнманном (Robert Reimann 2 ), а также Ассоциацией Интерактивного Дизайна (Interaction Design Association 3 ).

Также очень важно отметить, что интерактивный дизайн – это понятие, совершенно отличное от других видов дизайна. Это не информационная архитектура, или промышленный дизайн. Это также не разновидность пользовательского интерфейса. Интерактивный дизайн – это не какая-либо форма или структура, а что-то более эфемерное – это, скорее, понятие того «почему» и «когда», а не «что» и «как».

Для любой разновидности дизайна первоочередная задача – сформулировать то, что называется основами или базисными элементами. Создание таких семантических понятий обеспечивает:

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

Эти, а также и другие причины, которые в данный момент несущественны – это повод поговорить об основах.

Что такое основания?

Первое мое знакомство с “основаниями” состоялась при подготовке программы для специалистов по промышленному дизайну в институте Пратта в Бруклине, Нью-Йорк. Программа создавалась Ровиной Рид Костеллоу (Roweena Reed Kostellow) на основе ее образовательной философии оснований (более детально см. «Элементы дизайна» от Гейл Грит Ханна - Elements of Design , Gail Greet Hannah 4 ).

По Костеллоу, существует шесть элементов, которые образуют основания промышленного дизайна: линия, освещение и цвет, пространство, объем (размеры), отрицательное пространство (задний план, фон) и текстура (поверхность, фактура). Смешивание этих элементов и эксперименты с ними – сердце дизайна в области 3D-форм. Студенты института Пратта осваивали эти основания в течение годичного курса. Они должны были определять границы и зависимости, обсуждая абстракции и реальные проекты.

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

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

Основания интерактивного дизайна

Время

«Время» отличает интерактивный дизайн от других видов. Это оболочка наших понятий об интерактивности.

Но время не единственное основание интерактивного дизайна. Есть очень много взаимосвязанных аспектов манипулирования временем. И как мы все знаем, время относительно, оно существует по множеству осей в один и тот же момент. Так что можно выделить три зависящих от времени оснований интерактивного дизайна:

Темп

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

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

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

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

Реакция

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

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

Контекст

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

Алан Купер (Alan Cooper) и Роберт Рейнман (Robert Reimann) в книге «About Face 2.0» 6 говорят о временном контексте как о принципе «позиции». Вот четыре позиции:

Метафора

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

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

Все метафоры не имеют обратного хода. Например, мы попытались использовать термин «удалить», для того, чтобы быстро объяснить, как добавить что-то в ведро или урну. Но, мы ведь не можем что-то удалить в реальное мусорное ведро или урну, не так ли?

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

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

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

Абстракция

Работая в тандеме с метафорой, абстракция соотносится больше с физической и ментальной активностью, которая исключительно необходима для того, чтобы интерактивность имела место. Я впервые начал думать об абстракции тогда, когда прочел статью Йонаса Лоугрена (Jonas Lowgren) 7 , о том, что он обозначил термином «пластичность». Прочитав эту статью и использовав этот термин несколько раз в разговорах и дискуссиях, я вдруг понял, что в действительности Йонас говорил о том, как абстракция в интерфейсе является отображением продукта.

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

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

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

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

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

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

Отрицательное пространство

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

Так что такое отрицание интерактивности?

Есть много мест, где «что-то» может отсутствовать, или, говоря точнее, есть много слоев. Мы можем только говорить о действиях продукта? О наших действиях? О пространстве между частями действий?

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

Остановиться и подумать – Что делать, если от системы нет реакции? Подумать, как сделал один студент Шведского института интерактивности и придумал «шар мысли». Если вы мало думаете, шар укатывается все дальше.

Неактивность – Ничего не делать, продукт не реагирует на действие, может быть из-за его неправильности. Это не то, что пауза, так как в этом случае неактивность – это реакция на действие, а не остановка в действии.

Смешивание в интерактивности

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

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

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

4 As captured in this recent book: Hannah, Gail Greet, Elements of Design: Rowena Reed Kostellow and the Structure of Visual Relationships , New York: Princeton Architectural Press, 2002.

8 Heller, David (NKA Malouf, David), “Aesthetics and Interaction Design: Some Preliminary Thoughts.” (ACM membership required) , Interactions 12:5 (September-October 2005): 48-50.

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

Приведенное выше – это базисное определение интерактивного дизайна (Interaction Design - IxD), соединяющее вместе общие тенденции определений, данных известными дизайнерами Денном Саффером (Dan Saffer 1 ) и Робертом Рейнманном (Robert Reimann 2 ), а также Ассоциацией Интерактивного Дизайна (Interaction Design Association 3 ).

Также очень важно отметить, что интерактивный дизайн – это понятие, совершенно отличное от других видов дизайна. Это не информационная архитектура, или промышленный дизайн. Это также не разновидность пользовательского интерфейса. Интерактивный дизайн – это не какая-либо форма или структура, а что-то более эфемерное – это, скорее, понятие того «почему» и «когда», а не «что» и «как».

Для любой разновидности дизайна первоочередная задача – сформулировать то, что называется основами или базисными элементами. Создание таких семантических понятий обеспечивает:

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

Эти, а также и другие причины, которые в данный момент несущественны – это повод поговорить об основах.

Что такое основания?

Первое мое знакомство с “основаниями” состоялась при подготовке программы для специалистов по промышленному дизайну в институте Пратта в Бруклине, Нью-Йорк. Программа создавалась Ровиной Рид Костеллоу (Roweena Reed Kostellow) на основе ее образовательной философии оснований (более детально см. «Элементы дизайна» от Гейл Грит Ханна - Elements of Design , Gail Greet Hannah 4 ).

По Костеллоу, существует шесть элементов, которые образуют основания промышленного дизайна: линия, освещение и цвет, пространство, объем (размеры), отрицательное пространство (задний план, фон) и текстура (поверхность, фактура). Смешивание этих элементов и эксперименты с ними – сердце дизайна в области 3D-форм. Студенты института Пратта осваивали эти основания в течение годичного курса. Они должны были определять границы и зависимости, обсуждая абстракции и реальные проекты.

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

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

Основания интерактивного дизайна

Время

«Время» отличает интерактивный дизайн от других видов. Это оболочка наших понятий об интерактивности.

Но время не единственное основание интерактивного дизайна. Есть очень много взаимосвязанных аспектов манипулирования временем. И как мы все знаем, время относительно, оно существует по множеству осей в один и тот же момент. Так что можно выделить три зависящих от времени оснований интерактивного дизайна:

Темп

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

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

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

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

Реакция

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

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

Контекст

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

Метафора

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

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

Все метафоры не имеют обратного хода. Например, мы попытались использовать термин «удалить», для того, чтобы быстро объяснить, как добавить что-то в ведро или урну. Но, мы ведь не можем что-то удалить в реальное мусорное ведро или урну, не так ли?

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

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

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

Абстракция

Работая в тандеме с метафорой, абстракция соотносится больше с физической и ментальной активностью, которая исключительно необходима для того, чтобы интерактивность имела место. Я впервые начал думать об абстракции тогда, когда прочел статью Йонаса Лоугрена (Jonas Lowgren) 7 , о том, что он обозначил термином «пластичность». Прочитав эту статью и использовав этот термин несколько раз в разговорах и дискуссиях, я вдруг понял, что в действительности Йонас говорил о том, как абстракция в интерфейсе является отображением продукта.

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

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

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

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

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

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

Отрицательное пространство

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

Так что такое отрицание интерактивности?

Есть много мест, где «что-то» может отсутствовать, или, говоря точнее, есть много слоев. Мы можем только говорить о действиях продукта? О наших действиях? О пространстве между частями действий?

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

Остановиться и подумать – Что делать, если от системы нет реакции? Подумать, как сделал один студент Шведского института интерактивности и придумал «шар мысли». Если вы мало думаете, шар укатывается все дальше.

Неактивность – Ничего не делать, продукт не реагирует на действие, может быть из-за его неправильности. Это не то, что пауза, так как в этом случае неактивность – это реакция на действие, а не остановка в действии.

Смешивание в интерактивности

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

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

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

4 As captured in this recent book: Hannah, Gail Greet, Elements of Design: Rowena Reed Kostellow and the Structure of Visual Relationships , New York: Princeton Architectural Press, 2002.

8 Heller, David (NKA Malouf, David), “Aesthetics and Interaction Design: Some Preliminary Thoughts.” (ACM membership required) , Interactions 12:5 (September-October 2005): 48-50.