Что не так с любительским подходом к созданию дизайна коммерческого сайта: примеры из опыта диджитал арт-директора

.

• Ошибка 1: Игнорирование основ эстетики

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

Наш эксперт: Михаил Питерский

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

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

Без этого обеспечить гармоничное взаимодействие элементов дизайна не получится.

• Ошибка 2: Айдентика — работа бренд-дизайнера 

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

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

Другой пример грамотной работы над айдентикой и брендингом — сайт Moscow Art Magazine. Отсылкой к физическому происхождению продукта стали баннеры по наведению, вращающиеся в пространстве. Характерные элементы минимализма и строгая антиква в наборе получили развитие в интерфейсных элементах диджитал-каталога. 

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

• Ошибка 3: Отсутствие работы с аудиторией

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

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

Legion-Media

В качестве примера работы над ЦА и ее запросами могу привести проект с Flacon Magazine. Форматы медиа больше не привязаны к классической схеме потребления контента — социальные сети привнесли множество новых паттернов взаимодействия и форм. Поэтому идеальным решением для нового диджитал-журнала Flacon стала адаптация популярных механик социальных сетей под нужды редакции и его читателей. На платформе можно подписываться на авторов или самому стать автором, отправив материал на модерацию редакторам, персонализировать ленту публикаций по интересам, ставить лайки, комментировать посты и просматривать stories, публикуемые в режиме онлайн.

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

• Ошибка 4: Пользовательский опыт не изучается

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

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

Legion-Media

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

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

* тех, кто только изучает модельный ряд;

* желающих приобрести автомобиль;

* непосредственно владельцев KIA.

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

• Ошибка 5: Доступность интерфейса и контента — не первостепенная задача

Инклюзивному подходу к дизайну посвящено множество достойных исследований, они есть и у IBM, и у Microsoft, и куча классной литературы об этом написано (загляните в абсолютный список инклюзивного дизайна в школе BBE, где я как-то читал лекцию, там действительно много полезного на этот счет). Принципы доступности интерфейсов направлены на то, чтобы улучшить доступ к информации и функциям продукта людям с особенностями (зрения, слуха, движения, психики), а также более широкой категории людей — тем, у кого нет достаточного опыта в диджитале или доступа к технологиям (уже не говоря о том, что какие-то сайты могут плохо грузиться на определенных девайсах). Да и жизненный опыт говорит о том, что любой из нас может оказаться в ситуации, когда нам требуется особый подход: от плохой связи в метро, когда у тебя не грузится сайт с картинками, до повышенного уровня стресса вечером, когда способность сосредоточиться на малоконтрастном и мелком тексте становится минимальной. Так что, вопреки расхожему мнению, вопрос инклюзии касается буквально каждого, поэтому работа над доступностью дизайна сайта должна быть по возможности обязательной.

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

Legion-Media

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

Так, например, издание «Медуза»* (*признано иностранным агентом), разработало понятный визуальный язык продукта, обеспечило UX-дизайн и дизайн пользовательского интерфейса для ПК и приложений. А дизайнеры сайта Парка Горького провели несколько радикальных изменений: улучшили интерфейс, сделали его интерактивным (утром на сайте можно увидеть утренние панорамы парка, вечером — в соответствующее время суток). Также удалось создать свою страницу для каждой территории парка, сделать интерактивную карту более удобной, добавить новые разделы, которые интуитивно понятны пользователю. 

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

• Ошибка 6: Сторителлинг в веб-дизайне не нужен

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

Нагляднее всего этот принцип прослеживается в журнале INC. INC публикует статьи о том, как создать и развивать успешный бизнес, а также новости и аналитику о технологиях, финансах и экономике. Журнал известен своими рейтингами, такими как «Inc. 5000», который представляет собой список наиболее быстрорастущих частных компаний в США. В свое время он первым написал о Стиве Джобсе, и мне выпала честь работать над его адаптацией для Российской аудитории. Вовремя был правильно выстроен сторителлинг главной страницы сайта, чтобы визуально провести пользователя по ней так, чтобы он не заскучал, получил ответы на свои вопросы и заинтересовался тем, о чём он даже не подозревал. Работа с сеткой и типографикой играла в этом особую роль, так как именно эти инструменты помогают расставлять акценты, паузы и выстраивать ритм в визуальном повествовании. Кроме того, в данном проекте большую роль играла и навигация: расширенное меню, которое кроме базового рубрикатора включало в себя анонс одного важного материала. Таким образом у пользователя всегда была простая альтернатива выбора, а у редакции — способ подсветить важный контекст.

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

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

Автор статьи: Кирилл Игнатов

.