Слайдеры для сайта и факторы, влияющих на их юзабилити

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

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

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

Последовательность слайдов в «карусели»

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

Время демонстрации слайдов

Как правило, в «каруселях» слайды «перелистываются» автоматически – через определенный промежуток времени. Для правильной работы слайдера важно, чтобы посетители успевали увидеть содержимое каждого слайда, поэтому время демонстрации слайдов нужно настроить. Например, 5-7 секунд среднестатистическому пользователю может хватить на то. чтобы увидеть изображение на слайдере и прочесть заголовок. А вот если на слайде есть еще и текстовое описание, то время нужно увеличить — до 10 секунд или даже больше.

Навигация по слайдам

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

Автоматическое «перелистывание» слайдов

Автоматическая смена слайдов удобна, привлекает внимание, однако есть несколько случаев, когда ее важно приостанавливать. Речь идет о наведении курсора мыши на слайд или клике кнопкой мыши по слайду: очевидно, что в подобной ситуации посетитель сайта заинтересован слайдом, а значит ему нужно дать время на более подробнее изучение. Для этого и следует остановить автоматическое «перелистывание».

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

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

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

Теги:
слайдеры для сайта, карусель для сайта, создание сайта, редизайн сайта, юзабилити сайта, слайды на сайте

Источник