10 лучших практик оформления блога на 2022 год — не позволяйте неудобным макетам испортить ваш UX

Один мудрый дизайнер пользовательского интерфейса сказал: «Хороший дизайн невидим». Другими словами, если вы или ваши пользователи замечаете макет вашего блога или взаимодействие с пользователем, скорее всего, это плохой дизайн.

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

Лучший пользовательский интерфейс (UI) и взаимодействие с пользователем (UX) — это тот, который не мешает нам достигать наших целей, будь то комментирование публикации в Instagram, навигация по длинному сообщению в блоге или ввод данных в веб-приложение.

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

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

«Среда — это сообщение». Это означает, что то, как вы доставляете свой контент, так же важно, как и качество самого контента.

Поскольку ваш блог является важной частью вашей маркетинговой воронки, хороший UI/UX, безусловно, повлияет на возврат посетителей и доход.

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

10 лучших практик макета блога для UX в 2022 году

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

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

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

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

Совет № 1: Используйте централизованный подход «Учебный центр»

Подробно писать на определенную тему — отличный способ завоевать авторитет в Google и завоевать доверие аудитории.

Однако то, как вы организуете этот контент в своем блоге, так же важно, как и сам контент.

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

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

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

Кроме того, подход учебного центра, вероятно, увеличит количество страниц за сеанс.

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

Совет № 2: Используйте «липкие» элементы

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

Использование «липких» элементов на странице — один из лучших способов облегчить это и увеличить вовлеченность в ваш блог.

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

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

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

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

• Кнопки социальных сетей
• Меню навигации
• Панели поиска
• Виджеты живого чата

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

Совет № 3: переходите к погоне

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

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

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

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

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

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

Совет № 4: Используйте дизайн карточки блога

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

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

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

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

Medium.com представляет собой отличный пример этого формата.

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

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

Однако макеты должны иметь разные размеры шрифта и изображения, чтобы четко различать наименее важные и наиболее важные элементы. Эта тактика делает дизайн более разборчивым для читателей.

Кроме того, вы можете включить в дизайн карты следующие элементы.

• Популярные изображения
• Автор блога (изображение)
• Категория
• Название блога
• Ссылки на социальные сети
• Дата публикации
• Выдержка из блога
• Кнопка «Подробнее»

Имея в виду этот список, давайте посмотрим на домашнюю страницу Medium:

Обратите внимание на каждую «карту» и всю связанную с ней информацию. Почти все сообщения в блогах содержат как минимум следующее:

• Название блога
• Популярные изображения
• Автор блога
• Изображение автора блога
• Дата публикации
• Время чтения
• Возможность добавить пост в закладки на потом

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

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

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

Совет № 5: учитывайте время чтения

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

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

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

Совет № 6: Используйте пробелы в своих интересах

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

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

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

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

Итак, когда дело доходит до макетов блога, пробелы — ваш друг. Это может помочь привлечь внимание к конкретному контенту и сделать макет более привлекательным.

Совет № 7: не загромождайте боковые панели

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

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

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

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

Совет № 8: Используйте типографику с умом

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

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

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

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

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

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

1. Используйте первый стиль шрифта для заголовка сообщений.
2. Используйте второй стиль шрифта для заголовков боковых панелей.
3. Используйте третий стиль шрифта для тела поста.

И последний совет: убедитесь, что ваши шрифты безопасны для Интернета. В противном случае они могут не загрузиться на некоторых устройствах. Google Fonts — это бесплатное хранилище веб-шрифтов, и это всегда беспроигрышный вариант.

Совет № 9: Включите связанные статьи

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

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

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

Или вы можете выполнить поиск вручную, зайдя в Google и введя в строке поиска «[ключевое слово темы] site:[yoursite.com]». Пока Google индексирует ваш сайт, он покажет все страницы и сообщения на вашем сайте, которые содержат это ключевое слово.

Например, если бы мы хотели увидеть все страницы, которые мы написали на тему ведения блога, я бы ввел в Google следующий запрос: «blogging site:skuvault.com».

Полученные страницы, вероятно, являются отличными кандидатами для перелинковки.

Совет № 10: Используйте качественные изображения

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

Фактически, исследования показали , что люди лучше запоминают информацию, если она представлена ​​рядом с изображением.

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

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

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

Другие способы повысить уровень UX вашего блога

Помимо десяти советов, которые мы перечислили, вот еще несколько способов улучшить UX/UI вашего блога:

• Выберите сканируемый дизайн . Ведение блога сильно отличается от написания книги или академической статьи. Вы можете сделать макет блога сканируемым, написав короткие и точные разделы, избегая длинных абзацев, разбивая текст заголовками и соответствующими изображениями, а также организуя разделы с помощью подзаголовков и заголовков.
• Брендируйте свой макет . Брендинг — это ключ к маркетингу успешного бизнеса, и он работает так же для макета вашего блога. Блог, который вы создаете, должен отражать стиль и внешний вид вашего бренда. Это означает, что если ваша домашняя страница имеет простую тему или дизайн, рекомендуется сохранить его таким же для макета вашего блога.
• Используйте вертикальное выравнивание . Плохо спроектированные элементы торчат, как больной палец. Например, когда изображения и текст выглядят неуместно на фоне остальной части столбца, это отвлекает внимание и выглядит непрофессионально. Кроме того, абзацы и фотографии должны быть одинаковой ширины для визуальной непрерывности.
• Включите строку поиска . Если на вашем сайте много контента, людям может быть трудно найти то, что они ищут. Важно включить панель поиска в макет вашего блога. Таким образом, люди могут быстро и легко найти нужную им информацию.
• Выделите авторов вашего контента . Если в вашем блоге несколько авторов, важно выделить их имена и добавить к их сообщениям высококачественные фотографии. Такой подход все очеловечивает и помогает завоевать доверие ваших читателей. Это также облегчает им поиск другого контента того же автора и помогает Google определить ваш EAT (опыт, авторитет, доверие).
• Сделайте свой сайт удобным для мобильных устройств: на дворе 2022 год. Непременно убедитесь, что макет вашего блога удобен для мобильных устройств. К счастью, все современные макеты блогов от авторитетных поставщиков (WordPress, Squarespace, Shopify) включают в себя удобный для мобильных устройств макет прямо из коробки. Если у вас нет удобного для мобильных устройств макета, у вас есть проблемы, выходящие за рамки этого поста.

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

Не забывайте об управлении запасами

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

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

SkuVault существует, чтобы помочь предприятиям всех форм и размеров оптимизировать и упростить утомительную работу, связанную с управлением запасами.

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