Интерактивный дизайн

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

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

Задачи интерактивного дизайна:

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

Вовлеченность

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

Коммуникация

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

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

• Информативность — сообщения, которые вы передаете, должны быть содержательными и уместными. Это про поток.
• Честность — информация, которую вы предоставляете, должна быть правдива и ожидаема. Это про отзывчивость.
• Релевантность — сообщение должно отвечать целям взаимодействия. Это про контекст.
• Ясность — сообщение не должно быть сформулировано в виде сложного, запутанного, нелогичного выражения, чтобы не возникло недопониманий и намеренного «затуманивания» мыслей. Это про уместность.

Дэвид Малуф — один из основателей Ассоциации дизайна взаимодействия и первый вице-президент. В настоящее время Малуф — профессор дизайна взаимодействия в Колледже искусств и дизайна в Саванне.

UX/UI-дизайн — это система, включающая в себя интерфейс и пользовательский опыт. Если UI-дизайн представляет визуальную составляющую: цветовые сочетания, типографику, иконки, то UX-дизайн уделяет внимание эмоциям, удовлетворенности пользователя на всем пути взаимодействия.

Дизайн взаимодействия или интерактивный дизайн, является частью широкой системы UX/UI-дизайна, которая охватывает функционал и интерактивную составляющую.

UX/UI-дизайн и интерактивный дизайн относятся друг к другу как целое и частное, где UX/UI придерживается более комплексного подхода, а интерактивный дизайн сосредоточен на аспектах взаимодействия.

Джиллиан Крэмптон Смит (исследователь дизайна взаимодействия) предложила концепцию четырех измерений интерактивного дизайна, которая дает понимание того, что включает в себя дизайн взаимодействия. Позднее Кевин Сильвер (приверженец дизайна, ориентированного на пользователя) включил еще одно:

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

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

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

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

Поведение. Поведение — это то, как именно пользователь взаимодействует с продуктом: как он выполняет действия, о чем он в этот момент думает. В это же измерение включены эмоциональные отклики, реакции и отзывы аудитории.

В книге Дизайн повседневных вещей (The Design of Everyday Things) Дон Норман предлагает принципы проектирования интерактивного дизайна:

Видимость

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

Ограничения

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

Согласованность

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

Создание карты

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

Когнитивная психология

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

Обратная связь

Обратная связь поддерживает коммуникацию интерфейса с пользователем несколькими способами: аудио, анимация, цвет.

Анимация

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

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

Самые распространенные виды анимации: изменение цвета, размера, формы, замедление объекта на экране.

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

Микровзаимодействия

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

Карусель и слайдеры

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

Экран загрузки

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

Проектирование интерактивного дизайна включает в себя несколько этапов:

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