Дизайн и контент: эффективность взаимодействия 8 Дизайн и контент: эффективность взаимодействия 9 Дизайн и контент: эффективность взаимодействия 10

Дизайн vs контент: как плохим контентом испортить крутой дизайн

#UI/UX дизайн

Любой продукт, приложение, вебсайт/портал/лендинг можно разбить на составляющие. Часть из них (разработка, прототипирование) остается невидимой для глаз пользователей. А другая – что нарисовано и написано – заметна каждому. Именно эта часть работы определяет будущее проекта и какой результат принесут усилия, приложенные ранее.

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

Как связаны дизайн и контент

Контент – это смысл, дизайн – это форма, в которой этот смысл воплощен.

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

Контент предлагает решение проблемы. Дизайн мотивирует поскорее нажать «волшебную кнопку», которая ускорит решение.

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

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

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

Начинать со слова или образа?

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

Пример образного дизайна

Изображение взято с ресурса: https://jacquico.com

Однако контент первичен. И вот почему: UX-проектирование опирается на сообщения, которые нужно донести. Сначала оно определяет что нужно показать пользователю: какие блоки будут на сайте, что нужно донести на первом, втором, третьем экране, а только потом “как” это донести. Таким образом “что” первично, а “как” вторично.

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

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

Пример хорошего минималистичного UI

Изображение взято с ресурса: https://woodwork.nl

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

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

Рекомендуем:UI/UX персонализация

Как плохой контент портит хороший дизайн

Если лучше всего, когда дизайнер и копирайтер работают в паре, то хуже всего, когда они вообще не пересекаются. Тогда случается следующее:

Как лажает дизайн

Бывают кейсы, когда вначале всё прекрасно – вместе с клиентом ведем прототип, разрабатываем хороший дизайн. Но потом наступает этап внесения наполнения. И вдруг оказывается, что дизайн гуд, но не соответствует размеру контента.

Например, в дизайне заголовок состоит из максимум 5 слов, а клиент хочет 2 предложения. Или мы показали в дизайне на странице “О нас” 1 абзац текста, а в результате их оказывается 10. Или мы разместили на странице “рыбный” текст (не настоящий, просто для заполнения места), а в итоге оказалось, что финального текста нет и писать его некому, и копирайтера у клиентов нет, а сайт запускать надо. Приходится всё переделывать “по-живому”, страдает верстка, срываются сроки.

Для клиента эта ситуация обычно оказывается полной неожиданностью: дизайн утвердили красивый, тексты написали хорошие, объединили одно с другим – получилось говно. Как так-то? В худших случаях такая ситуация вообще может поставить крест на проекте. На нашем опыте был случай, когда сайт создавали под руководством отдела маркетинга, потом пришел собственник, посмотрел на результат, сказал: “Что за фигня? Мы ЭТО не запустим”. И проект закрыли на стадии готовности 95%.


Как лажают с контентом клиенты :

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

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

Как избежать подобных фейлов

1. На этапе прототипирования проверять блоки на реальном контенте

Лучше вставлять в заголовки и тело страницы контент со старого сайта (если ничего не будет менятся) или продумывать количество контента, которое будет идеально смотреться/восприниматься пользователям.

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

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

3. Проводить презентации гайдлайнов

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

Контент и дизайн должны дружить

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

Материалы по теме:Как UХ-копирайтинг помогает в общении с пользователем

Взаимодействие дизайна и контента –  также процесс

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

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

Хотите дополнительного подтверждения того, насколько влияет на ваш бизнес всё, описанное в этой статье? Обращайтесь к нам!

28.05.2019
Используемые в статье картинки взяты из открытых источников и используются как иллюстрации.
Хотите обсудить ваш проект или заказать разработку?
Отправить
Цей сайт є українською мовою. Ви можете переключити мову у меню, або зробити це зараз.