Роман Чигирёв

Язык взаимодействия пользователя и интерфейса

Что полезного мы можем извлечь из объектов, которые нас повсеместно окружают? Какие внезапные идеи они могут нам подарить? Люди окружены технологиями. Продуктами, которые мы создаем — и для каждого из них есть свои инструменты взаимодействия: будь то физические интерфейсы гаджетов или «виртуальные» интерфейсы веб-приложений. А задача пользователей — понять, как ими пользоваться. Как они во всём этом разбираются?

Статья написана по мотивам еще одной презентации Bill DeRouchey.

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

Пользователи бессознательно ищут язык. А нам нужно научиться видеть их глазами. И искать вдохновение — среди того, что нас окружает: окружающих предметов, того, что нас направляет, удивляет, отпугивает…

За что у нас пока не научились платить — так это за проектирование хороших интерфейсов для платежных терминалов

Вдохновение может прийти даже из «народных лайфхаков»:

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

Языки всегда развиваются

Символы начинаются с одного значения…

Затем развиваются и расширяют его:

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

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

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

Людям необходимо расшифровывать коммуникацию

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

Элементы:

  • Слова
  • Иконки
  • Цвета
  • Формы
  • Звуки
  • Движения
  • Жесты
  • Размеры
  • Контуры

Взаимосвязи:

  • Зонирование
  • Расположение
  • Изоляция
  • Приоритет
  • Близость
  • Повторение
  • Выравнивание
  • Последовательность

Принципы:

  • Ясность
  • Перспектива
  • Цель
  • Восторг
  • Неожиданность

Начнем с самого простого и поясним некоторые пункты.

Элементы

Слова. Они могут выполнять роль универсальных меток абсолютно на всём.

Например, быть инструкцией для новых пользователей.

Слова могут быть командой или просто выполнять информирующую функцию.

При умелом использовании слова привносят простоты в интерфейс, при неумелом — только смущают пользователя.

Наслоение похожих, но неодинаковых по смыслу слов друг на друга тоже ведет к путанице. Для интерфейса это порой смертельно.

Марья Ивановна, угадайте, где настоящая ссылка, а где обман и разорение

Назначение слов в интерфейсе — создавать простоту и ясность.

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

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

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

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

Цвета. Самая цепкая метафора — всё тот же светофор. Расшифровка цветов соответствующая:

  • Красный — отказ, ошибка, стоп, удаление, сброс, опасность.
  • Желтый — ожидание, модерация, пауза, норма.
  • Зеленый — одобрение, ОК, подтверждение, прием, безопасность.

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

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

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

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

В тач-устройствах вся поверхность экрана — одна большая «кнопка», что еще больше сводит на нет тот вид кнопки, к которому так привыкли пользователи «нулевых».

Звуки. Здесь, в отличие от иконок, нет четкой системы: звуки разделяются по принципу «приятный/неприятный». Пользователи Windows без труда вспомнят каждый звук из стандартной звуковой схемы:

Звуки очень часто становятся предметом брендирования. Каждый пользователь Apple узнает «своих» в толпе по «стандартной» мелодии звонка.

Вспомните, какой звук издает ваш телефон, когда садится аккумулятор? Какой звук предшествует объявлению в салоне самолета? Объявлению рейса на автовокзале? Звук нового сообщения в Skype?

Назначение звуков в интерфейсах — привлечь внимание либо сопроводить действие пользователя.

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

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

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

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

Взаимосвязи

Зонирование. Фактически — это разделение элементов управления либо контента на «семейства». Как в предыдущем примере с контроллером или как здесь:

Если рассмотреть конкретный веб-интерфейс, тоже можно заметить те же принципы зонирования.

Приоритет. Одного взгляда на интерфейс обычно достаточно для того, чтобы понять, на что следует обратить пристальное внимание, а где находится второстепенное.

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

Акцентирование с помощью цвета особенно широко применяется в вебе для обозначения желаемого действия.

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

Принципы

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

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

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

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

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

И еще один пункт поясним.

Неожиданность. Создавайте интерфейсы, вызывающие восторг. Учитесь предвидеть разочарование пользователя.

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

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

Всех с наступающим! Оригинальные интерфейсные решения — в каждый дом! ;)

Комментарии

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

Заказать клёвый проект
Заявка отправлена
Спасибо, ваша заявка отправлена. Эксперт студии Сибирикс свяжется с вами в ближайшее время для уточнения подробностей.