Сайт со слайдером: Виждет Слайдер | Примеры использования виджета Слайдер [2021]

Статьи по теме:

Слайдер в дизайне веб-сайтов — АЗБУКА

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

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

Сайты Слайдер : Основы

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

• Контейнер, коробка, которая охватывает все.
• Слайд, место, где сидит контент.
• Навигация, инструмент для навигации по слайдам. Это могут быть стрелки влево и вправо, обычные «prev» и «next», расположенные по бокам, или даже элементы управления в стиле классического музыкального проигрывателя, которые позволяют людям контролировать параметры автозапуска и паузы.
• Разбивка на страницы, ака дополнительная навигация. Это могут быть традиционные маркеры или цифры, размещенные на дне коробки, или некоторые современные решения, такие как набор коротких линий, расположенных в стопке.

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

Хорошие причины для использования слайдера в веб-дизайне

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

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

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

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

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

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

Хорошие причины для использования слайдера в веб-дизайне

Минусы слайдеров в веб-дизайне

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

Создавайте сайты с нашими онлайн-строителями

С помощью Startup App и Slides App вы можете создавать неограниченное количество веб-сайтов с помощью онлайн-редактора веб-сайтов, который включает готовые разработанные и закодированные элементы, шаблоны и темы.

• Плохо сделанный слайдер считается плохим в поисковых системах. Это может легко испортить ваши результаты SEO .
• Слайдер может замедлить работу сайта. Это не только негативно влияет на пользовательский опыт, но и плохо сказывается на поисковых системах, так как Google рассматривает скорость веб-сайта как веский критерий для ранжирования.
• Согласно статистике, люди не любят нажимать на карусели или СТА в слайдах. Поэтому они практическибесполезны для повышения конверсии .
• Слишком много вариантов могут запутать клиентов и сделать их еще более нерешительными.
• Слайдер может работать некорректно на маленьких экранах из-за плохой оптимизации. Это может отпугнуть мобильную аудиторию, которая преобладает в наши дни.
• На маленьком экране содержание в слайдере может быть сложным для взаимодействия. Поэтому карусель требует особых стилей и поведения для мобильных телефонов и планшетов.
• Некоторые люди считают слайдеры рекламными баннерами, игнорируя их полностью.
• Если браузер не поддерживает JavaScript или некоторые современные функции CSS, то слайдер может разрушить весь дизайн и структуру.
• Слайдеры большинства сайтов не отвечают требованиям доступности, что делает их слепыми зонами для людей с ограниченными возможностями.

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

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

На ходу

Как использовать слайдеры в веб-дизайне: советы

Интернет кишит примерами слайдеров, но не все из них приносят пользу проектам.

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

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

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

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

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

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

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

То же самое касается личного портфеля Рика Вандерса .

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

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

Рик Вандерс

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

• Всегда обеспечивайте навигацию. Не полагайтесь на инстинкты пользователя, чтобы выяснить, как обращаться с компонентом самостоятельно. Навигация обязательна – чем очевиднее, тем лучше. Боковые стрелки обычно используются для этой цели. Придерживайтесь этого соглашения, так как оно избавит вас от множества недоразумений и разочарований.
• Если это соответствует вашему дизайну, добавьте нумерацию страниц. Несмотря на то, что пагинация не критична, тем не менее, настоятельно рекомендуется иметь дополнительный тип навигации в банке.
• Навигация должна соответствовать устройствам с сенсорным экраном. В частности, ваши пользователи должны иметь возможность перетаскивать слайды или пролистывать слайды.
• Установите время задержки правильно. Если ваши пользователи не имеют достаточно времени, чтобы прочитать информацию на слайде, они будут потрошены и просто пропустят этот раздел или, что еще хуже, уйдут.
• Если вы хотите сказать что-то важное, скажите это на первом слайде. Из-за короткой концентрации внимания и слепоты баннера пользователи могут просто игнорировать взаимодействие со слайдером сайта. Тем не менее, одна вещь наверняка; они наверняка увидят первый слайд, так что, скорее всего, они получат его сообщение.
• Не переусердствуйте с эффектами. Если у вас впечатляющий эффект перехода, возможно, интерактивные функции на основе WebGL, встроенные в каждый слайд, будут слишком сложными. Используйте только одно сложное решение.
• С осторожностью используйте WebGL, Three.js и другие высокопроизводительные библиотеки. Помните, что не все пользователи смогут увидеть их в действии. Не только потому, что их браузеры могут не поддерживать их, но и потому, что эти решения могут замедлять работу их ПК или ноутбуков.
• Сделать слайдер доступным для всех групп людей. Например, установите alts для изображений, добавьте в HTML-блоки дополнительную информацию для устройств только для чтения и т. Д.
• Протестируйте ползунок на всех размерах экрана, в браузерах и на устройствах, чтобы обеспечить единообразие для пользователей.

Алан Менкен

Типы слайдеров в веб-дизайне

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

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

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

• слайдеры изображений;
• видео слайдеры;
• динамические ползунки;
• интерактивные слайдеры;
• 3D слайдеры и др.

Однако в целом мы выделяем только два основных типа: горизонтальные ползунки и вертикальные ползунки.

Горизонтальные слайдеры в веб-дизайне

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

Примеры горизонтальных слайдеров в веб-дизайне

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

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

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

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

Вертикальные ползунки в веб-дизайне

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

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

Рассмотрим два примера репрезентативных вертикальных ползунков.

Примеры вертикальных слайдеров в веб-дизайне

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

Здесь вы можете увидеть 14 слайдов. Можете ли вы представить горизонтальный слайдер с таким же количеством? Могу поспорить, это убьет настроение мгновенно. Однако это не так. Вертикальный слайдер справляется с этой ситуацией без нареканий. Это рассказывает историю и, в то же время, держит людей вовлеченными.

Хотя официальный сайт Cloudforce не может похвастаться таким же впечатляющим количеством слайдов, у него всего 6; все же этого достаточно, чтобы создать впечатление.

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

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

Примеры современных слайдеров

Интерактивная презентация – это то, что делает заявление в эти дни. Все статично скучно. Поэтому веб-разработчики радуют онлайн-толпу разнообразием динамических решений.

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

Ползунки размером с укус

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

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

Навигация по колесу мыши

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

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

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

Взаимодействие с мышью

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

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

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

Прохладные эффекты перехода

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

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

Фантастика.

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

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

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

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

Другие примеры слайдеров в веб-дизайне

StackSlider: 3D-слайдер изображений

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

Расти Интерактивный

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

Марк Дирман

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

Bitfoundry

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

BigEye Creative

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

Büro Maisengasse

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

Матье Клаусс

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

Elless Design

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

Марко Ротоли

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

Banneton

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

инструмент

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

 Жером Детрас

Личное портфолио Jérôme Détraz не содержит ненужных вещей, и в результате огромный слайдер контента сразу бросается в глаза. Он имеет плоский стиль и красивую окраску, что позволяет компоненту естественным образом вписаться в композицию. Каждый слайд разделен на две части, чтобы продемонстрировать информацию простым способом.

Boerdam

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

DigitalConvulsions

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

HyperX Media

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

Doopsuiker Маки

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

Филадельфия

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

20 Основные требования к веб-сайту электронной коммерции

TravelBuzz

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

Wearesignals

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

Малкольм Рединг Консультанты

У Malcolm Reading Consultants есть слайдер контента, который разбит на 3 четные части. Такое решение позволяет нам использовать больше данных одновременно. Это также растянуто к вершине, чтобы действовать как фон для раздела заголовка. Красный фон для отображения описания – отличный выбор здесь.

Rottefella

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

Jax Vineyards

Слайдеру Jax Vineyards похвастаться нечем, но он выглядит элегантно и стильно. Прозрачный фон делает компонент неотъемлемой, почти встроенной деталью композиции. Ультра-узкие стрелки в верхней части могут выглядеть немного плавно; однако они подходят как перчатка.

relogik

Слайдер Relogik не отрывается от всей тематической линии. Сероватая окраска делает его более элегантным. Хотя CTA стиля градиента слишком мал для такой области, тем не менее, благодаря тонне пустого пространства, аккуратному расположению и недостаточному количеству текста, он не теряется.

 Дизайн Рояль

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

Фиолетовые каменные ножницы

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

Задний двор Бургеры

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

FOX Classics

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

обратный

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

Чайное приложение

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

Это вещи

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

Общество Маленького Черного Платья

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

Ла Маса Миматта

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

Вывод

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

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

Расскажите нам, что вы думаете о нашей коллекции примеров красивых слайдеров? Какое ваше любимое решение? Вы используете слайдеры в веб-дизайне?

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

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

Ваш помощник в в бизнесе рекламно-полиграфическая компания “АЗБУКА“

(050) 462-02-45

8 советов по созданию идеальных фонов для веб-сайтов

Замечательные примеры слайдеров изображений и контента в веб-дизайне – Dobrovoimaster

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

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

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

Present Plus

Gaillard Foundation

Eye Scream Design

Fastfender Hooks

Helen and Hard

Allure Graphic Design

Berkshire Salon and Day Spa

Indubitablee

Web Lounge

Big Eye Creative

Elevate

These are Things

Defyn Design

Cure

Red Tiki

Marie Catribs

Justalab

Andrew Reifman

Jason Bradbury

Four Seasons

2Fly

Osd Network

Qilayout

Down With Design

Off-Road Studios

Maisengasse

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

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

С Уважением, Андрей .

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

Как должен выглядеть слайдер на сайте

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

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

Преимущества слайдера:

• Представляет собой мини-презентацию, которая сразу же привлекает внимание пользователя и предоставляет ему всю важную информацию о вашей компании/продуктах/услугах и так далее.
• Обеспечивает визуальное представление данных, включая в себя одновременно иллюстрацию и текст. А, как известно, люди больше воспринимает именно графическую информацию, а не текст.
• Есть возможность постоянной смены изображений, которая всегда интересна пользователям. Так как используются разные слайды, становится больше шансов на привлечение внимания максимально большого количества людей. При этом процесс смены может происходить в разных режимах, что не ограничивает возможности разработчика.
• Имеет целый ряд настраиваемых параметров отображения и функционирования. В случае необходимости можно дополнительно внести кнопки для осуществления быстрого перехода к нужной информации или в определенный раздел.

Каким должен быть качественный слайдер?

1. Располагается в первом экране главной страницы.
2. Содержит не больше трех-пяти изображений.
3. Изображения содержат такие кнопки, как «Узнать больше», «Получить консультацию», «Заказать сейчас» и подобные.
4. Все изображения содержат продающий текст, который не превышает одно предложение, выражает ясную и простую мысль.
5. При клике на изображение с текстом можно перейти в нужный раздел.
6. Все слайды содержат интересные предложения и знакомят с преимуществами таким образом, чтобы у посетителя появилось желание получить еще больше информации и заполучить ваш продукт/услугу.

Какими должны быть картинки?

• Соответствующего размера.
• Без водяных знаков и других неуместных пометок.
• Высокого качества.
• Соответствующими теме домена и слайда.

Каким должен быть текст?

1. С таким же шрифтом, что и другие материалы, что обеспечит максимальную гармоничность слайдера.
2. Подкреплять ассоциации, заданные картинкой.
3. Читабельным — приятным по размеру и цвету, не занимающим всю площадь слайдера.
4. С кнопкой, текст которой максимально соответствует вашей цели.

Примеры слайдеров

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

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

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

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

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

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

Назад в раздел

10 требований к слайдеру на главной странице вашего сайта

Действительно ли карусели (слайдеры) удобны для пользователей? Или они популярны просто потому, что стали привычным элементом дизайна, избавившим от необходимости выделять место под каждый баннер?

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

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

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

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

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

Правильная карусель на главной странице вашего сайта

Практическое применение каруселей

Карусели очень популярны на сайтах интернет-магазинов, особенно на главных страницах. Их тестирование Беймардским институтом (Baymard Institute), которое было проведено среди 50 лучших сайтов в области электронной коммерции в США, выявило, что 52% используют слайдеры на десктопах, а исследование мобильных версий интернет-магазинов показало, что они также популярны и там: не менее 56% мобильных сайтов используют карусель на главной.

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

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

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

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

1. Последовательность слайдов и направления
2. Логика авторотации на десктопе
3. Две функции управления каруселью
4. Отличия сенсорных устройств

Как слайдеры влияют на конверсию landing page?

1. Последовательность слайдов и направления

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

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

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

В мобильной версии сайта Toys’R’Us единственный способ получить доступ к опции «Поиск подарка» был через слайд карусели на главной странице. Из-за этого испытуемым было невероятно сложно найти данную функцию (особенно потому, что это был не первый слайд), несмотря на активные попытки. В конечном счете, в нескольких случаях карусель стала одной из основных причин прерывания сессий на сайте.

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

Выводы:

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

Почему использование слайдеров в хедере лендинг пейдж лишено смысла?

2. Логика авторотации на десктопах

Авторотация увеличивает воздействие контента через слайды и показывает пользователям, что этот элемент интерактивен. На самом деле, в то время как у «ручных» каруселей ничтожный показатель кликов — от 1 до 2%, автоматически вращающиеся слайдеры могут иметь достойную кликабельность — от 8 до 10%. Но будьте осторожны: как и любая анимированная графика, авторотация отвлекает внимание от статического контента, тем самым повышается требования к тому, насколько качественным и релевантным должно быть содержание карусели.

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

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

Рассмотрим подробнее каждое требование.

Слайды не должны переключаться слишком быстро

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

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

Объем текста на слайде должен в значительной степени определять продолжительность его демонстрации. Если это просто короткий заголовок, то, согласно тестированиям, 5-7 секунд хватит, в то время как для более загруженных текстом слайдов требовалось больше времени (Nielsen Norman Group рекомендует 1 секунду на 3 слова для авторотирующихся слайдов). Одно из следствий — вам может быть потребуется назначить уникальную продолжительность для отдельных слайдов, которые будут показываться дольше, чем другие.

Авторотация всегда должна останавливаться при наведении курсора (42% так не делают)

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

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

«Если курсор находится над слайдом, то слайдер должен остановиться, — объяснил испытуемый при просмотре сайта Blue Nile, — потому что в противном случае я рискую кликнуть на неправильный слайд в момент, когда он меняется — как он только что сделал — и попасть на другую страницу».

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

Чтобы не отправить пользователя «окольным путем» и потенциально не ввести в заблуждение, важно использовать приостановку авторотации при наведении курсора мыши. К сожалению, в сравнительном анализе главных страниц было обнаружено, что 42% десктопных версий интернет-магазинов, у которых есть карусель на главной, в настоящее время не прекращают автоматическое вращение, когда пользователь наводит курсор на слайд.

Автоматическое вращение можно возобновить, как только курсор покидает слайд (т.е. больше не парит над каруселью) при условии, что пользователь не взаимодействует с каруселью иным образом.

Авторотация должна полностью прекратиться после активного взаимодействия с пользователем

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

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

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

Как создать карусель, используя только HTML и CSS без Javascript

3. Управление каруселью должно выполнять две функции

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

Уточнение текущего слайда среди множества служит нескольким целям:

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

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

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

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

Отличный способ гарантировать контраст — выявить яркость области изображения, где будут показываться элементы управления, а затем в соответствии с этим подобрать цвета для стрелок. Кеннет Качиа (Kenneth Cachia) из Google даже сделал бесплатный скрипт для этого, который называется BackgroundCheck (только не копируйте остальную часть его карусели, потому что она нарушает несколько требований из десяти).

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

Один из них — «оглавление», представленное на примере магазина Amazon:

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

Сплит-тест: статический баннер Vs слайдер

4. На сенсорных устройствах все иначе

Во время многолетнего изучения юзабилити мобильных версий интернет-магазинов исследователи заметили, что требования к таким каруселям значительно отличаются от тех, что применяются к десктопным сайтам — они настолько разные, что вся логика взаимодействия, описанная для компьютеров в разделе №2 не действует на мобильных телефонах. Более того, у нее есть свои отдельные предписания: в частности, наблюдаются следующие особенности реализации для сенсорных устройств:

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

Рассмотрим подробнее каждую особенность.

Отсутствие зависания курсора на странице отменяет использование авторотации (31% понимает это неверно)

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

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

Здесь участник тестирования заметил интересный слайд в мобильной версии сайта Toys’R’Us’ — «Прыгни в летнюю мега распродажу» — и нажал на экран. К сожалению, карусель автоматически переключилась миллисекундой ранее и отправила его на другую распродажу.

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

Тестирование мобильных версий интернет-магазинов показало, что, в то время как 56% сайтов используют карусель на главной странице, 31% имеют авторотацию, а 25% — ручное переключение. Другими словами, почти у половины мобильных веб-сайтов карусель реализована приемлемо, поскольку они не применяют автовращение.

Всегда поддерживайте жесты перелистывания (12% не делают этого)

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

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

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

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

Одна вещь, которую часто можно наблюдать при просмотре мобильных сайтов с каруселью на главной, — использование дизайна, созданного для десктопного экрана. Это не будет проблемой до тех пор, пока есть гарантия, что любой текст на слайдах остается читаемым при уменьшении до крошечного мобильного экрана в вертикальном положении. Иногда, при тестировании мобильных сайтов (в частности, сайтов с отзывчивым веб-дизайном), включая интернет-магазины с продажами более чем на $ 100 000 000, можно увидеть, что макет, созданный для компьютера, просто уменьшается и используется на телефоне.

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

15 образцовых примеров мобильного веб-дизайна

10 требований к каруселям

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

1. Все платформы: аккуратно выбирайте последовательность слайдов, потому что первый будет показываться в несколько раз чаще других.
2. Все платформы: карусель не должна быть единственно возможным путем к опциям сайта и контенту.
3. Десктопы: используйте автоматическую ротацию, только когда приемлемо отвлекать внимание пользователя анимированной графикой от других элементов главной страницы.
4. Десктопы: переключайте слайды в умеренном темпе — обычно 5-7 секунд достаточно для слайда с заголовком. Если количество текстовой информации на слайдах отличается, то назначается уникальная продолжительность демонстрации для каждого (пункт, которого почти никогда не придерживаются).
5. Десктопы: останавливайте авторотацию во время движения курсора, чтобы избежать переключение слайда, который пользователь, скорее всего, читает или на который собирается кликнуть.
6. Десктопы: полностью останавливайте автоматическую ротацию после того, как пользователь кликнул на элементы управления каруселью.
7. Все платформы: всегда указывайте, какой слайд является текущим среди множества, и позволяйте пользователям перемещаться вперед и назад. Обычно это достигается с помощью достаточно крупных точек и стрелок и контраста с изображением. По крайней мере, на сайтах для десктопов, этого можно достигнуть другими способами, например, с помощью «оглавления».
8. Сенсорные устройства: никогда не используйте авторотацию на мобильных сайтах или сайтах для сенсорных устройств, потому что там невозможно движение курсора (и, следовательно, нельзя приостановить автоматическую ротацию).
9. Сенсорные устройства: поддерживайте жесты перелистывания в дополнение к другим элементам управления UI.
10.  Мобильные устройства: убедитесь в том, что текст на слайдах остается читаемым, если вы уменьшаете макет рабочего экрана.

Теперь, с этим длинным списком подводных камней, понятно, что большинство каруселей на главных страницах работают плохо просто потому, что они недостаточно хорошо реализованы. Например, на 42% сайтов авторотация не приостанавливается при наведении курсора. Кроме того, если рассмотреть наиболее убедительный пример, опубликованный на сайте Should I Use A Carousel?, то тестируемая карусель нарушает, по крайней мере, два важных правила: это единственный способ получить доступ к этому контента (нарушено правило №2), и она не останавливается при наведении курсора (правило №5), и, кроме того, находится выше основной навигации и заголовка.

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

7 ошибок в проектировании дизайна и пользовательского опыта

Альтернативы каруселям

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

Две версии домашней страницы магазина L.L. Bean: версия слева опирается на карусель (нарушение правила №7: авторотация на мобильном телефоне), в то время как новая версия (справа) использует хорошо функционирующую структуру простого отображения всех изображений непосредственно на главной.

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

1. Позволяет избавиться от автоматической ротации и карусельных элементов управления для смены слайдов, что особенно хорошо подходит для мобильных веб-сайтов.
2. Прекрасно соотносится с тем, как пользователи взаимодействуют с главными страницами. Во время тестирования 70% мобильных пользователей сначала пролистывали главную страницу вниз, чтобы выяснить, на какой веб-сайт они попали. Рекламирование нескольких ключевых путей со специально созданными изображениями делает главную более просматриваемой, чем карусельный слайдер (неважно какой — ручной или автоматический).
3. Это значительно дешевле, чем создать карусель, которая будет соответствовать всем 10 требованиям. Конечно, в зависимости от компании, обновление содержания главной страницы может оказаться более дорогим, чем замена карусельного слайдера.
4. Вам будет гораздо легче признать необходимость жестко курировать контент (по сравнению с тем, чтобы добавлять контент в карусель просто потому, что она может вместить его).

Высоких вам конверсий!

По материалам smashingmagazine.com

11-08-2016

Анализ использования слайдеров (каруселей) на сайтах

Обзоры

05:10:2015

7

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

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

Краткая характеристика сайтов и слайдеров. Первый сайт – крупный сайт являющийся интернет-магазином, слайдер используется на главной странице для анонсирования отдельных товаров и проводимых акций. Второй сайт – сайт продающий услуги, слайдер используется для размещения отзывов клиентов на страницах услуг.

Что такое слайдер или карусель. Это, как правило, набор из нескольких изображений, которые поочередно сменяются. Для управления слайдером используются такие элементы как кнопки прокрутки “влево” и “вправо”, а также набор элементов для перехода на любой из доступных элементов слайдера:

Пример слайдера от wowslider.com

Итак, анализ использования слайдера на первом сайте.

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

За день главная страница посетителями сайта просматривается более 20000 раз, взаимодействие со слайдером отслеживается с помощью двух событий: Слайдер на главной и Клик по баннеру в слайдере:

Использование слайдера на первом сайте

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

Количество посетителей, которые осуществили взаимодействие со слайдером составляет 5 тысяч из 60 всего посетивших сайт за день.

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

Статистика по элементам управления выглядит следующим образом:

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

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

Теперь посмотрим на статистику кликов по элементам в слайдере:

Статистика кликов по элементам в слайдере

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

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

Статистика слайдера с комментариями

Если мы посмотрим на количество просмотров страниц, на которых он расположен, то таких страниц было просмотрено чуть больше 2 тысяч. Здесь еще можно обратить внимание на тот факт, что блок со слайдером расположен практически в самой нижней части страницы перед “футером”.

Элементы управления используются следующим образом:

Элементы управления

Здесь как и на первом сайте чаще используется кнопка прокрутки “вправо”, также нужно учесть специфику слайдера, это отзывы. Маловероятно, что посетитель вернется назад, чтобы перечитать отзыв, скорее всего он будет двигаться вправо – к следующему отзыву.

Итак, подводя итог небольшого анализа, что можно сказать:

1. Слайдеры востребованный элемент в оформлении сайта, но нужно учитывать что в нем будет содержаться (изображения, отзывы, рекомендации и т.п.) , а также его местоположение на странице сайта;
2. Наиболее часто используемый элемент в управлении слайдером – кнопка перехода к элементу расположенному справа;
3. Для оценки эффективности слайдера на сайте, рекомендую настроить его отслеживание в Google Analytics или другой системе веб аналитики, которая используется вами.

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

Slider — отстой, и их следует запретить на вашем сайте • Yoast

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

Два года назад мы писали о том, почему мы действительно не любим слайдеры. Мы до сих пор не любим слайдеры. Если ваша тема вынуждает вас включать слайдер (также называемый каруселями) на главную страницу, имейте в виду, что это заставляет вас использовать функцию, которая не имеет ценности для SEO.Функция, которая, вероятно, замедляет работу вашего сайта из-за загрузки дополнительного кода JavaScript. И препятствует тому, чтобы ваш пользователь сразу же прочитал хороший материал (ваш контент). Скорее всего, это также приведет к меньшей конверсии.

Хотя и SEO-эксперты, и эксперты по конверсии согласны с тем, что слайдеры мало используются в 99% времени, разработчики веб-сайтов настаивают на добавлении слайдеров в свои темы.Некоторые клиенты называют темы без слайдеров «устаревшими», но мы категорически не согласны с ними. Давайте проясним одну вещь: ползунки — отстой. Конечно, я имею право на собственное мнение, а вы — на свое. Но позвольте мне еще раз объяснить , почему отстой.

Наука и эксперименты

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

Давайте посмотрим на некоторые выводы:

А вот таблица из Пособия Google по электронной торговле для розничной торговли:

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

Но… Мне

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

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

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

Фокус

С помощью слайдера вы в основном говорите: «Я действительно не знаю, какой продукт или изображение мне следует разместить на своей домашней странице, поэтому я просто возьму 10 из них!» В этом случае вам действительно нужно добавить фокус. Если вы, , не знаете, что выбрать, как поступят ваши посетители или клиенты?
Вы должны знать, чем занимается ваш собственный бизнес и какой продукт или изображение заслуживают внимания на первой полосе.

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

SEO и оптимизация коэффициента конверсии

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

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

Просто объедините два и поймите, какое чудовище на самом деле представляет собой слайдер. Это убивает ваш рейтинг и ваших конверсий!

Мобильные сайты и слайдеры

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

• Ползунки изображений, как правило, загружают изображения сайта для настольных компьютеров, не оптимизированные для мобильной скорости или фактически разрушающие его для телефонов с 3G или меньше.
• То же самое и со слайдерами, работающими на JavaScript. Зачем добавлять JavaScript для чего-то, что люди будут рассматривать как баннер или просто пропустить, чтобы перейти к вашему контенту?
• Если ваш слайдер не реагирует, он испортит ваш веб-сайт, который в остальном отзывчивый.К сожалению, это случается слишком часто.

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

Почему вы должны нам верить?

Если вы нам не верите, поверьте этим экспертам, которых мы спрашивали, их мнение и опыт работы со слайдерами:

Слайдеры никогда не конвертировались и никогда не будут

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

Но делать коллег счастливыми — не ваша работа. Ваша задача — сделать посетителей счастливыми. И продать.
И самая большая проблема ползунков: они не конвертируются. Никогда не делал и не будет ».

Карл Гилис , владелец AGConsult и известный эксперт по конверсии

Использовать статические изображения и копировать вместо

«Ползунки работают крайне редко.Лучше использовать статические изображения и копировать ».

Пип Лаха , владелец ConversionXL.com и Markitekt

Только для отображения портфолио

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

Роджер Дули , автор Brainfluence (также доступен на Kindle) и владелец Neurosciencemarketing.com

Слайдеры отвлекают

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

Хитен Шах , соучредитель Crazyegg и KISSMetrics

Слайдеры отстой в 99,8% случаев

«Ползунки — отстой в 99,8% случаев! Однажды мы провели тест с клиентом, в котором изменили его слайдер на статическое изображение с тремя основными преимуществами и значительно повысили конверсию ».

Брайан Айзенберг , автор книги «Будьте как амазонки: даже лимонадная стойка может это сделать и ждет, пока ваша кошка лает» (также доступно на Kindle)

Слайдеры злые

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

Ползунки — это абсолютное зло, и их следует немедленно удалить ».

Тим Эш , генеральный директор SiteTuners, автор оптимизации целевых страниц (также доступно на Kindle)

Использовать статическое изображение вместо

«В A / B тестах ползунки обычно проигрывают. Фактически, один из самых простых способов повысить коэффициент конверсии страницы — удалить ползунок и заменить его статическим изображением.Если вы хотите быть действительно ленивым, вы можете просто протестировать ползунок на статической версии каждого из вариантов ползунка. Статическая версия обычно выигрывает ».

Карл Бланкс , председатель и соучредитель компании Conversion Rate Experts

Слайдеры практически не представляют ценности для покупателя

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

Авинаш Кошик , евангелист цифрового маркетинга Google, автор веб-аналитики 2.0 (также доступно на Kindle)

Слайдеры труднодоступны

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

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

Андреа Ферсиа , эксперт по доступности в Yoast

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

Эпилог

Когда мы впервые опубликовали наше (неизменное) мнение о слайдерах еще в 2014 году, UX-дизайнер Ян Армстронг прокомментировал, что «в некоторых случаях слайдеры имеют смысл. Ползунок можно эффективно использовать, если он а) рассказывает историю и б) не поддерживает автоматическое продвижение вперед.Представьте себе страницу недвижимости, на которой есть слайдер с изображениями дома. Это не автоматическая переадресация, которая помогает получить представление обо всем доме — она ​​рассказывает эту историю.

Ян также заявляет, что «если вы правильно установите ожидания и действительно подчеркнете слайдер как механизм рассказа, вы, вероятно, увидите большой всплеск интереса». Вероятно, он прав, или, как Рич Пейдж сказал ниже в своей первоначальной публикации 2014 года: «Если сомневаетесь, ИСПЫТАЙТЕ ЭТО!» Большинство из нас привыкло к подобным слайдерам на сайтах недвижимости. Всегда есть исключения из правил, правда? Хотя в этом конкретном случае можно даже поспорить, если «слайдер» вообще квалифицируется как слайдер.

Ваши 2 цента приветствуются.

Подробнее: удобство использования в электронной коммерции: полное руководство »

Как создать слайдер домашней страницы в WordPress [2021]

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

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

Как всегда, вот видеогид:

Что такое слайдер в WordPress?

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

Они обычно используются на сайтах компаний и портфолио.

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

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

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

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

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

Еще одна потенциальная проблема — мобильная готовность.

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

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

Но с учетом всего сказанного, ползунки имеют много преимуществ.

Преимущества слайдеров домашней страницы

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

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

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

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

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

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

Как добавить слайдер домашней страницы в WordPress

Шаг №1 — Установите плагин WordPress Homepage Slider

Мы собираемся использовать бесплатный плагин под названием smart slider 3, который очень прост в использовании.

Сначала войдите в панель управления WordPress, найдите вкладку «Плагины» в левом меню и нажмите «Добавить».”

Затем введите в строку поиска название ползунка Slider 3.

Когда вы его увидите, нажмите «Установить сейчас», а затем «Активировать».

Шаг № 2 — Создание нового слайдера

Теперь, когда вы установили Smart Slider 3, вы увидите его в левом меню на панели инструментов.

Прокрутите вниз и щелкните по нему.

Вам будет предложено 2 варианта:

1. Создайте новый слайдер с нуля
2. Используйте шаблон

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

Но, честно говоря, мы ЛЮБИМ шаблоны. Он обеспечивает прочную основу для создания чего-то удивительного, в котором ваш уникальный талант сочетается с проверенными рамками.

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

Итак, в этом руководстве мы нажмем «Библиотека шаблонов».

Вам будет предложено множество шаблонов на выбор.Точнее, больше 180.

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

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

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

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

После импорта вы увидите, что теперь у вас есть 3 слайда на панели инструментов: слайд 1, 2 и 3, которые в сумме составляют один слайдер.

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

Чтобы отредактировать их, наведите указатель мыши на любой из слайдов и нажмите кнопку «Редактировать».

Вы заметите, что находитесь в визуальном редакторе.

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

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

• Добавьте ссылку к тексту.
• Измените цвет текста.
• Изменить шрифт.
• Выберите размер и толщину шрифта.
• И т. Д.

Вы можете сделать то же самое с кнопкой под текстом, щелкнув по ней.

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

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

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

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

У вас есть много возможностей для настройки.

Далее мы собираемся изменить фоновое изображение для этого слайда.

Так что прокрутите вверх и нажмите «Фон».

Вы увидите, что кнопка изображения уже выбрана, поэтому все, что вам нужно сделать, это прокрутить вниз и найти строку с названием «Фон». Рядом с ним вы увидите «Изображение», и оно уже должно содержать изображение, которое вы можете заменить на нужное.

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

Затем просто добавьте новый, нажав зеленую кнопку. После этого перейдите к «Загрузить файлы» и нажмите «Выбрать файлы».

Теперь просто выберите изображение, которое вы ищете, и нажмите «Открыть», а затем нажмите «Выбрать».

Ваше новое изображение теперь там!

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

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

Прокрутите немного вниз, и вы увидите строку меню с вкладками, на которых написано «Опубликовать», «Общие», «Размер» и т. Д.

Щелкните «Общие».

Здесь вы найдете еще несколько вариантов настройки внешнего вида вашего слайдера.

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

Но мы оставим это для этого руководства.

Шаг № 3 — Отобразите слайдер на своем веб-сайте

Я собираюсь показать вам, как это сделать с помощью базового редактора WordPress, а также конструктора элементов или страниц.

Сначала займемся основным редактором WordPress.

Как создать слайдер домашней страницы с помощью редактора WordPress

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

Итак, мы перешли на панель инструментов в левом меню, щелкнули «Страницы» и добавили новую.Но вам может понадобиться слайдер домашней страницы, поэтому в этом случае просто перейдите на свою домашнюю страницу в панели управления WordPress.

Чтобы добавить этот слайдер вверху страницы, нажмите маленькую кнопку с плюсом в верхнем левом углу и найдите Smart Slider 3.

После того, как вы нажмете на Smart Slider 3, он появится в редакторе вашей страницы с большой синей кнопкой с надписью «Select Slider». Идите и щелкните по нему.

Затем выберите слайдер, который хотите использовать.

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

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

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

Как создать слайдер домашней страницы с помощью Element или Page Builder

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

Самый простой способ сделать это — навести курсор на свое имя в верхнем левом углу панели инструментов WordPress и нажать «Посетить сайт».”

Вы должны посмотреть на свою домашнюю страницу.

Отсюда нажмите «Редактировать с помощью Elementor» в маленькой строке меню на странице.

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

Затем найдите Smart Slider 3 в поле, которое появляется слева.

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

Вы увидите свой слайдер и сможете протестировать его прямо в самом редакторе.

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

Затем под «Margin» измените значение на отрицательное 10.Эти белые полосы на этом этапе должны полностью исчезнуть.

Щелкните «Обновить».

Итак, вот как сделать слайдер в WordPress!

Привет, меня зовут Дейл! С помощью этого сайта и нашего канала YouTube я помог десяткам тысяч людей создавать красивые веб-сайты по всему миру!

Лучшие практики дизайна каруселей / слайдеров (с примерами)

В жизни каждого дизайнера рано или поздно возникает вопрос: «Можно ли разместить карусель на нашей домашней странице?»

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

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

Но не бойтесь! У нас есть несколько советов, как:

1. Убедить ваших клиентов забыть, что у них когда-либо была такая идея
2. Если это не удается, как создать карусель, которая не испортит ваш тщательно созданный UX

Итак, давайте пойдем, ладно?

Как убедить ваших клиентов не использовать карусель

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

Но они не могут обвинить вас в том, что вы указали, что:

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

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

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

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

Что можно и чего нельзя делать для каруселей

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

Начнем с не !

Не используйте карусель …

В разделе героев вашей домашней страницы

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

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

В статьях

Многие сайты clickbait-y используют дизайн, похожий на карусель, чтобы «разбить» свои «статьи» на небольшие кусочки, которые вы должны щелкнуть, чтобы прочитать их целиком.

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

Не надо. Только. Не надо.

Когда дело касается компании, а не «пользователя»

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

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

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

Пусть это станет свалкой

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

Этот карусельный контент редко добавляется с явным намерением удовлетворить потребности пользователя и поэтому привлекает мало кликов со стороны читателей — и слишком часто он просто остается намного дольше, чем предполагалось. Потому что, по иронии судьбы, никто не помнит, это . (Я не буду называть компанию, в которой я испытал это, но будьте уверены, я говорю об этом на собственном опыте.) ерунда о каруселях, на самом деле — это раз, когда они являются правильным выбором.И одна из самых ярких из них — «когда люди этого ожидают».

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

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

Еще один сайт, который ловко использует дизайн карусели, — это (справедливо) популярный UserOnboard. Здесь дизайн имеет смысл благодаря пошаговому процессу изучения и критики процесса адаптации. Это помогает нам почувствовать, что мы идем по течению вместе с комментатором Сэмюэлем Халиком. Плюс — много , чтобы прояснить, о чем и когда говорит Сэмюэл.

Когда карусель экономит время и количество кликов

Дизайн карусели может также избавить людей от лишних хлопот при правильном использовании. Торговая площадка шаблонов Webflow предоставляет хороший пример этого с помощью своих галерей шаблонов:

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

Также стоит отметить, что этот дизайн работает, потому что:

• Он не похож на рекламу
• Он не продвигается автоматически, поэтому вы сохраняете над ним контроль

Когда контент визуальный (и простой)

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

Когда карусель помогает людям сравнивать вещи

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

Когда это помогает спасти место человека

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

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

Следуя этим рекомендациям:

5 лучших практик дизайна веб-сайтов с каруселью

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

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

1. Не использовать автовоспроизведение

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

Как люди будут видеть другие слайды, спросите вы? Это просто…

2. Поместите людей в управление ползунком

Как упоминалось ранее, люди привыкли иметь хоть какой-то контроль над своими интерфейсами (и да, они их , а не наши).Так что не забирайте это у них.

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

1. Стрелки , которые при нажатии переходят к следующему слайду или возвращаются назад. Вы можете разместить их визуально на слайдах, над или под ними. Просто убедитесь, что они размещены и указывают направление, в котором они движутся. То есть поместите стрелку продвижения справа, указывающую вправо, и обратную стрелку влево, указывающую влево.(Если ваша карусель не движется в другом направлении, что может иметь смысл для сайтов, использующих языки с письмом справа налево, такие как иврит или арабский).
2. «Точечная навигация». Это либо заполненные, либо полые круги (часто полые по умолчанию, но заполненные для «текущего» слайда), которые показывают количество «слайдов» и позволяют людям щелкнуть мышью, чтобы перейти к соответствующему слайду.

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

3. Делайте текст коротким и четким.

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

Еще лучше: см. Передовой метод 1 выше.

4. Не дублируйте теги h2

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

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

Так что не делай этого.

5. Убедитесь, что ваша карусель удобна для касания.

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

Причины, по которым вашему клиенту может понадобиться карусель

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

Они не уверены в своей цели / сообщении

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

У них есть сайт электронной торговли.

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

4 примера отличных дизайнов каруселей / слайдеров

1. Пользовательский слайдер CMS

Нам нравится этот слайдер, созданный Джонатаном Харингом, отчасти из-за прекрасного дизайна, но, что более важно, потому, что он динамически передает изображения через Webflow CMS.Хотя CMS изначально не поддерживает этот , но , Сидни воспользовался возможностями пользовательского кода Webflow, чтобы извлечь эти изображения прямо из Коллекции. Это делает его довольно мощным инструментом для клиентов и маркетинговых команд, которые хотят управлять своим собственным содержимым слайдера.

2. Ползунок стиля карточки

Это отличный пример полностью адаптивного ползунка с несколькими столбцами. У дизайнера Кори Моэна есть все компоненты хорошего слайдера для карточек, как указано выше: точка и стрелка, не запускается автоматически, а контент (в основном) простой и очень наглядный.Браво, Кори!

3. Слайдер товаров для электронной торговли

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

4. Слайдер цифровой коммерции

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

Создание каруселей / слайдеров в Webflow

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

Просто перетащите компонент на страницу и вуаля: