Лучшие практики слайдера: что вам нужно знать

Опубликовано: 2018-04-09

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

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

Сделайте свой слайдер визуально приятным

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

Будь проще

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

Не делайте это как рекламу

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

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

Сделайте свой слайдер полезным и актуальным

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

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

Тщательно выбирайте последовательность слайдов

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

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

Сделайте свой слайдер удобным для использования

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

Подумайте об отключении автозапуска

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

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

Увеличьте время между оборотами

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

Оптимизируйте параметры навигации

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

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

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

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

Избегайте повреждения SEO

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

Отзывчивость прежде всего

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

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

Дизайн для доступности

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

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

Создайте отличное изображение главного слайдера

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

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

Избегайте заголовков H1

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

Избегайте навигационных ссылок только для слайдера

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

Создание эффективных слайдеров

Одна из лучших практик, которой вы можете следовать, когда решите разместить карусель на своем веб-сайте, — рассмотреть возможность использования плагина, такого как Soliloquy. Особенно, если вы новичок в веб-разработке, попытка создать слайдер самостоятельно может привести к провалу SEO. С плагином намного проще работать, он специально оптимизирован для WordPress и поисковых систем.

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

Сохранить Сохранить