«Сделайте поярче»: почему заметность и акцент — не одно и то же

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

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

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

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

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

Веб-интерфейс обычно состоит не только из основного меню. Есть ещё служебная навигация — utility navigation. Туда попадают функции, которые важны в определённом сценарии, но не являются основным содержанием или главным маршрутом пользователя.

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

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

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

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

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

Обычно это не техническое задание на конкретный оттенок. Это сообщение о проблеме: человек не заметил элемент достаточно быстро. И вот здесь начинается работа дизайнера.

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

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

Обнаруживаемость можно улучшать не только насыщенностью цвета. Иногда достаточно чуть увеличить контраст, дать элементу больше воздуха, использовать знакомую иконку глобуса, аккуратно усилить начертание или сделать цвет выраженнее только в hover, focus и active-состояниях.

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

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