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

Posted on by riasevastopol

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

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

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

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

В данной статье рассмотрены 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) из Гугл кроме того сделал бесплатный скрипт для этого, что именуется 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% мобильных пользователей сперва пролистывали основную страницу вниз, дабы узнать, на какой сайт они попали. Рекламирование нескольких главных дорог со намерено созданными изображениями делает основную более просматриваемой, чем карусельный слайдер (не имеет значение какой — ручной либо непроизвольный).

Случайные статьи:

WP Фрэймворк Alethemes #10. Слайдер на главной или в шапке на WordPress? Уроки WordPress


Подборка похожих статей:

riasevastopol

More Posts