О том, как через графику и анимацию выстроить диалог с миллионами пользователей.

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

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

Как интерфейс превращается в визуальный шум

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

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

Как и в примере выше, диалог человека и интерфейса тоже может стать хаотичным. Это происходит, когда каждый элемент в графике разговаривает на каком-то своём языке.

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

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

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

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

Что мы используем вместо правил

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

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

Консистентность

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

Софья Кузина
ведущий графический дизайнер ВКонтакте

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

_{Консистентность — когда все графические элементы существуют в единой логике}

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

Логика построения графики. Как она соотносится с контекстом экрана, с текстом, с другими элементами. Где приём уместен, а где начинает ломать общее ощущение.
Масштабируемость через уровни S, M, L, XL. Благодаря ей графика может существовать в разных сценариях: от мелкого фонового элемента до акцентного промоэкрана.

_{Благодаря масштабируемости один и тот же графический элемент консистентно существует в разных сценариях — от иконки до полноразмерного баннера}

Единый стиль, который легко адаптируется под суббренды.

_{Например, разные продукты могут использовать свои акцентные цвета, но общая визуальная система сохраняется}

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

_{Мы намеренно упрощаем экран до «скелета», чтобы графика не конкурировала с деталями, важными в реальном интерфейсе, но не важными для донесения сути сообщения}

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

Своевременность

Если консистентность отвечает за то, на каком языке говорит продукт, то своевременность определяет, когда именно он вступает в разговор.

Даже полезное сообщение превращается в шум, если появляется не вовремя или мешает дальнейшим действиям. Любые дополнительные сообщения должны:

иметь связь c действием, которое пользователь совершает прямо сейчас;
появляться в момент взаимодействия, а не заранее или постфактум;
дополнять сценарий, а не прерывать его.

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

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

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

Эмоциональность

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

Александр Марьин
ведущий моушен-дизайнер ВКонтакте

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

Чтобы создавать эмоциональность, мы используем анимации. У нас они решают три типа задач.

Функциональные анимации снимают тревогу. Когда непонятно, сработало действие или нет, появляется раздражение: «А что-то произошло вообще?» Функциональная анимация даёт быструю обратную связь. Например, достаточно мельком взглянуть на иконку верификации, чтобы понять: данные успешно подтверждены.

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

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

_{Анимации в интерфейсе ВКонтакте делятся на функциональные, структурные и дофаминовые}

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

Что единый визуальный язык даёт пользователям

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

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

Живой отклик. Интерфейс реагирует на действия пользователя короткой и понятной анимацией. Функциональная подтверждает, что действие совершено. Структурная показывает, откуда пришёл экран и куда уйдёт. Дофаминовая добавляет удовольствия. Всё вместе создаёт ощущение, что продукт отвечает человеку взаимностью.

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