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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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