Ключ к созданию успешного сайта — дизайн взаимодействий!

1. Основы дизайна взаимодействий

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

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

Первая из них: “Введение в дизайн взаимодействий” —  до сих пор остается актуальной. В ней перечислены 5 составляющих отличного дизайна: 

• Коммуникация человека и техники — понимание взаимодействия между устройством и пользователем;
• Действие/реакция — каким образом начинается и развивается взаимодействие;
• Состояние – пользователь понимает, что и почему происходит на данный момент в приложении;
• Рабочий процесс – пользователь знает, как использовать тот или иной инструмент или приложение и что будет происходить дальше;
• Технический сбой — учитывает вероятные ошибки.

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

• Какие действия пользователь может совершить с помощью мыши, пальца или стилуса?
• Какие команды может применить пользователь для взаимодействия с интерфейсом?
• Какие визуальные элементы интерфейса дают пользователю подсказки о том, как он функционирует?
• Какую информацию вы сообщаете пользователю перед выполнением действия? Знает ли он, что произойдет дальше?
• Предусмотрены ли ограничения, чтобы минимизировать ошибки?
• Предлагают ли сообщения об ошибках способы решения проблемы?
• Какую обратную связь получает пользователь после выполнения какого-либо действия?
• Сколько времени проходит между действием пользователя и ответом системы?
• Имеют ли элементы интерфейса достаточный размер для удобного взаимодействия с ними?
• Используются ли края и углы интерфейса для размещения интерактивных элементов рационально?
• Следуете ли вы стандартам?
• Разбита ли информация на небольшие фрагменты для упрощения восприятия?
• Является ли интерфейс максимально простым для пользователя?
• Применяются ли паттерны, знакомые пользователю?

2. Роль дизайнера взаимодействий

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

Дизайнер взаимодействий — это член команды дизайнеров, разработчиков или маркетологов, который помогает:

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

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

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

• желание разобраться, каким образом все функционирует;
• отсутствие страха задавать вопросы;
• способность находить новые способы визуализации;
• не бояться работать с новыми элементами и концепциями.

3. Концепции дизайна взаимодействий

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

“Полное руководство по дизайну взаимодействий для начинающих”, опубликованное UX Booth в 2009 году, до сих пор является отличным источником информации в этой области. Концепции, лежащие в основе дизайна взаимодействий, остались прежними.

Рассмотрим каждую из них:

• Дизайн, ориентированный на достижение цели: для чего существует ваш сайт или конкретное взаимодействие? Ответьте на этот вопрос и убедитесь, что ваше приложение эффективно справляется с этой задачей;
• Интерфейс как волшебство: на самом деле, лучшие интерфейсы вы даже не замечаете. “Лучших интерфейсов как будто не существует, поскольку они работают настолько плавно и быстро, что пользователь не успевает даже задуматься о них, а тем более — разочароваться  во взаимодействии”;
• Юзабилити: “Предпочтение отдается интерфейсам, которые помогают пользователю понять состояние системы и определить дальнейшие действия”;
• Интуитивно понятный интерфейс: “Лучшие интерактивные дизайны говорят сами за себя — они безошибочно направляют людей к совершению необходимого действия”;
• Обучаемость: “Удобный интерфейс должен состоять из знакомых пользователю компонентов. Лучшие дизайнеры не изобретают велосипед каждый раз, когда сталкиваются с уже решенной дизайн-задачей. Вместо этого они используют известные паттерны”.

4. Примеры дизайна взаимодействий

Дополним рассказ о дизайне взаимодействий отличными примерами его реализации. Любой из приведенных ниже проектов раскрывает суть концепции дизайна взаимодействий.

Перемещение товаров в корзину, автор Бартелеми Чалвет (AgenceMe)

Приложение “Погода”, автор Сергей Валюх

Приложение “Fiche”, автор Бартелеми Чалвет 

Анимация материального дизайна

Мобильные анимации и взаимодействия

Приложение “Team Messages”, автор Ян Лозерт

Плавающие подписи для полей ввода в форме, автор Мэтт Д. Смит

Новые жесты для iOS, автор Хави Перес

Контактная форма “Quards”, автор Сергей Шмидт

“Nike”, автор Owi Sixseven

“Android Wear”, автор Ramotion

Apple Watch, автор Якуб Анталик

5. Ресурсы для изучения дизайна взаимодействий

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

• Основы дизайна взаимодействий
• Учебник “Дизайн взаимодействий: за пределами взаимодействия человека и компьютера”
• Ассоциация дизайна взаимодействий
• Чек-лист для дизайна взаимодействий

Заключение

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

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