Фирменный стиль и UX: где проходит граница в интерфейсе

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

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

Обе ситуации возникают не потому, что брендинг и UX плохо сочетаются. Скорее потому, что у них разные задачи, а команда заранее не решила, где приоритетнее одна, а где другая.

Интерфейс не работает как рекламный макет

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

В интерфейсе пользователь часто движется в обратном направлении. Он уже пришел с конкретной задачей.

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

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

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

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

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

Бренд не обязан находиться на каждом сантиметре экрана

Одна из типичных проблем при переносе айдентики в digital – страх, что без постоянного присутствия фирменных элементов интерфейс станет слишком обычным.

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

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

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

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

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

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

Один и тот же прием ведет себя по-разному в разных сценариях

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

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

Но дальше начинается реальная жизнь продукта.

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

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

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

Так айдентика не становится слабее. Наоборот, фирменный элемент не успевает превратиться в рутину.

Узнаваемость не требует постоянной демонстрации логотипа

Когда интерфейс становится спокойнее, возникает другой страх: а будет ли пользователь вообще чувствовать бренд?

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

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

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

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

Человек вряд ли скажет: «я отличаю этот бренд по системе отступов». Но повторяющиеся решения постепенно создают знакомое ощущение.

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

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

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

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

Бренд может влиять не только на внешний вид интерфейса

На этом месте заканчивается разговор только о фирменном стиле и начинается более интересная зона.

Стратегия бренда действительно может помогать принимать продуктовые решения.

Представим две компании, которые продают похожую услугу.

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

Вторая делает ставку на сопровождение и персональный сервис.

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

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

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

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

Пожалуй, именно в этой точке фирменный стиль заканчивается, а бренд – еще нет.

Привычные интерфейсные паттерны не обязательно нужно делать «своими»

Еще один распространенный способ добавить фирменности – переделать то, что пользователи уже знают.

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

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

В небольшом промосайте такой прием вполне может работать. Человек пришел исследовать страницу и готов немного поиграть с интерфейсом.

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

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

У интерфейса нет задачи быть оригинальным во всех деталях.

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

У разных экранов разный запас для фирменности

Внутри одного продукта есть места с совершенно разной плотностью задачи.

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

То же самое работает на уровне отдельных состояний.

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

А форма с десятью полями – уже другое дело.

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

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

Получается, что продукту вообще не обязательно иметь единый уровень «брендированности».

На одном экране бренд может говорить громко, на другом – почти исчезать. Система от этого становится не менее цельной, а более естественной.

Типографика первой сталкивается с реальностью продукта

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

А потом открыть интерфейс и обнаружить, что в размере 14 пикселей он читается заметно хуже.

В этом нет ничего необычного.

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

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

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

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

Фирменная типографика становится двухуровневой.

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

Пользователь не должен расплачиваться читаемостью за возможность сказать, что во всех материалах использован один и тот же шрифт.

С цветом происходит примерно то же самое

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

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

Поэтому буквальный перенос палитры часто заканчивается конфликтами.

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

Это не означает, что компании нужно отказаться от фирменного красного.

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

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

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

Это не разрушение системы. Скорее момент, когда система встретилась с реальным носителем.

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

На рекламной кампании можно довольно долго жить за счет одного эффектного приема.

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

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

Сначала нужна главная. Потом каталог. Карточка продукта. Авторизация. Корзина. Личный кабинет. Форма. Ошибка. Мобильная версия. Системное уведомление.

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

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

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

Хорошая айдентика обычно переживает упрощение.

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

Один из главных источников проблем – брендбук, в котором нет digital

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

При этом основной контакт клиента с компанией может происходить именно на сайте или в приложении.

Тогда продуктовой команде приходится самостоятельно переводить систему в digital.

Каждое решение само по себе кажется небольшим.

Но за два-три года их становится несколько сотен.

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

Поэтому digital лучше проверять намного раньше.

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

UX сам становится частью бренда

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

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

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

Бренд может обещать заботу, а сообщение об ошибке формулировать так, будто пользователь сам виноват в том, что что-то не сработало.

И никакая фирменная графика уже не исправит это ощущение.

Представим два одинаковых сообщения об ошибке оплаты.

Первое: «Ошибка. Неверные данные. Повторите попытку».

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

С точки зрения визуальной айдентики эти окна могут выглядеть совершенно одинаково. Но впечатление от компании они создают разное.

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

Любой сценарий тоже что-то говорит о бренде.

Все это постепенно становится частью идентичности не меньше, чем цвет или логотип.

Но стратегия бренда не должна оправдывать неудобство

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

До определенной степени – да. Но у этого подхода есть очевидная граница.

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

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

Нельзя заставить пользователя читать длинный эмоциональный текст перед критическим действием только ради tone of voice.

В такой момент стратегия превращается в оправдание неудобства.

У UX остаются собственные критерии: понятность, доступность, скорость и предсказуемость. Если фирменная идея начинает им мешать, чаще всего уступить должна не сама идея, а форма ее проявления.

Для нее просто нужно найти другое место.

Иногда самый брендовый интерфейс выглядит почти нейтрально

Особенно хорошо это видно у сложных сервисов.

Представим продукт, в котором человек работает по несколько часов в день: CRM, систему аналитики, внутренний кабинет или профессиональный сервис с большим количеством данных.

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

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

Где тогда остается бренд?

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

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

Но пользователь воспринимает его не как один скриншот.

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

Со временем эта предсказуемость сама становится частью узнаваемости.

Граница проходит там, где форма начинает мешать действию

Пожалуй, это самый простой ориентир для работы с брендом в интерфейсе.

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

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

Это не означает, что удобный интерфейс обязательно должен быть безликим.

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

На первом экране сайта запас для эксперимента довольно большой. У кнопки «Оплатить заказ» – гораздо меньше.

У пустого состояния можно придумать характерную иллюстрацию. У поля для номера карты важнее сразу дать человеку понять, что в него вводить.

Как только принять эту разницу, брендинг и UX перестают бороться за один и тот же экран.

Хорошая цифровая система не копирует брендбук – она его продолжает

Удачный перенос бренда в интерфейс почти никогда не выглядит как механическое использование всех фирменных элементов.

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

Это нормально.

Сайт или приложение – не уменьшенная версия рекламной коммуникации. У них свои сценарии, состояния и ограничения.

Поэтому зрелая digital-система обычно строится не вокруг вопроса «как использовать здесь больше элементов бренда?», а вокруг другого: «что мы можем убрать и все равно остаться собой?»

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

И интерфейс в этом смысле становится довольно жесткой проверкой качества айдентики.

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

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

Пожалуй, здесь и проходит полезная граница между брендингом и UX.

Брендинг отвечает за то, какой компанией пользователь должен почувствовать продукт.

UX – за то, сможет ли он этим продуктом нормально воспользоваться.

В хорошем интерфейсе эти две задачи не спорят друг с другом. Просто в разных точках одна из них становится немного важнее другой.