Руководство по улучшению пользовательского опыта (UX) сайта WordPress

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

В WordPress доступны тысячи инструментов, многие из которых даже бесплатны, которые помогут вам лучше понять свою аудиторию (отслеживание и аналитика), повысить производительность (плагины кеширования и оптимизации изображений), а также проверить и улучшить (A / B программное обеспечение для тестирования, такое как Nelio, OptimizePress и т. д.). Это руководство не о них.

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

Карусели

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

Вот почему наиболее желательные темы WordPress содержат как минимум один плагин слайдера (обычно Revolution Slider). Давайте посмотрим на плюсы и минусы такого подхода:

Плюсы:

• Показывает наиболее важные сообщения в одном месте.
• Сообщения могут быть расставлены по приоритету (самый важный получает первый слайд)
• Предполагается, что понравится всем сегментам посетителей («что-то для всех»)

Минусы:

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

Есть способы обойти эти минусы и улучшить UX карусели:

1. Количество слайдов / кадров не должно превышать 5.
2. Предоставьте пользователям возможность управления навигацией по карусели
3. НЕ автопересылка.

Иногда самое простое решение оказывается лучшим. Вместо того, чтобы полагаться на причудливые плагины слайдеров премиум-класса, вы можете использовать легкие плагины JavaScript (jQuery), такие как Slick, для создания удобных каруселей в WordPress.

Расширенная навигация

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

Вот почему нам нужны мегаменю. Но и у этой медали есть две стороны.

Плюсы:

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

Минусы:

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

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

После того, как ваша иерархия контента будет достаточно приручена и организована, вы можете использовать плагины WordPress, такие как Max Mega Menu, uberMenu и т. Д., Чтобы добавить мега раскрывающееся меню на веб-сайт. Расширения WooCommerce, такие как Ajax Layered Navigation, добавляют в магазин интерфейс фильтрации.

Представление

Независимо от того, во что вы ХОТИТЕ верить: вы НЕ эксклюзивны.

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

Оптимизируйте свой веб-сайт WordPress для повышения производительности с помощью:

CDN: приемлемый вариант для веб-сайтов, которые получают глобальную аудиторию и имеют средний или высокий трафик. Плагин MaxCDN и W3 Total Cache - это сочетание, сделанное на небесах с быстрой загрузкой.

Кэш: как упоминалось выше, W3 Total Cache - единственный плагин кеширования, который вам нужен (даже без поддержки CDN). Также спросите своих разработчиков о серверных решениях, таких как Redis и Memcached.

Внешняя оптимизация: плагины, такие как EWWW Image Optimizer, сжимают изображения (без ущерба для качества). Также убедитесь, что в ваших файлах темы как можно меньше встроенных CSS и JS. Сжимайте и минимизируйте таблицы стилей и файлы JavaScript.

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

Модальные всплывающие окна

Не будьте назойливыми во имя интерактивности и конверсии.

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

С этим так много плохого ... но мы вернемся к этому через мгновение.

Плюсы:

• Доказано, что повышает коэффициент конверсии

Минусы:

• Отвлекает: посетитель находится здесь за контентом, а всплывающее окно ему мешает.
• Всплывающие окна рассматриваются как белый шум (как и многие другие рекламные объявления), если они должным образом не соответствуют пути пользователя.
• ПЛОХО для доступности

Есть примеры использования всплывающих окон в контексте. BrainPickings.org понимает свою аудиторию и продвигает свою ссылку «пожертвовать» только тогда, когда пользователь неоднократно заходил на сайт и когда они закончили читать контент. Всплывающее окно Reebok Crossfit имеет плохое время, но немного компенсирует это скидкой на подписку на странице продуктов.

Источник: REEBOK

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

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

Попробуйте разумно использовать плагины WordPress для всплывающих окон. Есть некоторые (например, Popups от Supsystic), которые хороши. Работайте с ними, а не сосредотачивайтесь только на взаимодействии на одной странице.

Сноска

Чтобы улучшить пользовательский интерфейс, надейтесь, что вы обязательно прислушаетесь к этому совету и протестируете все (используйте Google Analytics, Nelio A / B-тестирование или любой другой инструмент: решать вам).

И пообещай себе продолжать совершенствоваться.

Подробнее Плагины WordPress | 5 быстрых исправлений для вашего сайта WordPress