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

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

Что важнее: дизайн или текстовый контент

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Установки связи между дизайном и текстовым контентом

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

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

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

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

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

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

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

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

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

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

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

5 распространённых ошибок

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

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

Отсутствие иерархии

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

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

Нарушение последовательности

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

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

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

Перегруженность

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

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

Отсутствие персонализации

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

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

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

Размытие фокуса

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

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

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