Этот пост ни в коем случае не претендует на объективность, но здесь есть некоторые здравые мысли по поводу необходимости веб-слайдеров на современных сайтах.

Почему? Давайте я расскажу:

1. Скорость

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

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

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

2. Слайдеры не подходят для действия

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

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

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

3. Слайдеры не для мобильных устройств

Мы уделяем такое внимание заточке наших сайтов под мобильных посетителей, но мы остаемся привязанными к слайдерам. Почему? Слайдер замедлит загрузку мобильных сайтов (только представьте себе скорость загрузки с 3G или того хуже) и еще менее удобен для использования на телефоне.

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

4. Отвлечение внимания

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

Почему мы до сих пор используем слайдеры?

Ну-у, здесь есть несколько причин:

  • Потому что это простой выход из дизайнерского кризиса.
  • Клиенты просят...
  • Ух ты, оно двигается!

Если вам действительно необходим слайдер

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

Почему?

Потому что вам нужно, чтобы главная страница грузилась быстро. Реально быстро. Это нравится Google. Это нравится людям.

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

Подходящие примеры для использования слайдеров:

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

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

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

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

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

И никогда, никогда не делайте слайдер единственным содержимым страницы. Люди (и Google) любят слова. Дайте им слова и текст описания. Только одного слайдера недостаточно.

Так что да...

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

Источник: Кrogsgard.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

28 комментариев

сначала новые
по рейтингу сначала новые по хронологии
ostap.javabit.ru

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

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

Сережка

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

Господа профессионалы!
Помогите начинающем админу сайта с выбором слайдера.
Нужен стильный контент- слайдер для демонстрации 4-7 фото картин (сайт посвящен творчеству) с возможностью перехода на страницу с соответствующим изображением. На главной странице в шапке уже есть слайдер, предусмотренный платной темой WP. Возможно, стоит продублировать его на все страницы, чтобы не нагружать сайт, но как?где и что надо дописать?спасибо!

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

Желание заказчика - превыше всего. К художественному творчеству как раз отлично подходят слайдеры! Вот, например, отличная бесплатная тема с очень крутым слайдером: http://themes.wpbusinessbundle.com/digifoto/

Antonov Igor

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

2. Действие. Слайдер - это не только статичная картинка. Полно примеров комбинаций текст (с ссылками) + картинка или видеоролик. В современных слайдерпх гибко настраивается навигация по ним - можно в один клик перейти на нужный.

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

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

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

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

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

Вот несколько "неудобств", которые вынуждены терпеть пользователи, "присевшие" на ресурс. Часто это соцсети
1. Отсутствие якорей по тексту.

2. Пустой подвал

3. Страница подтверждения перехода по внешней ссылке.

Что дает:

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

2. Повышение конвертации перехода по рекламе или брендинг (пользователи вынуждены скролингом прокручивать страници)

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

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

Таак, посмотрите сюда: (три слайдера в топе недельных продаж для WP: http://codecanyon.net/popular_item/by_category?category=wordpress&ref=sAlex) и сюда (2 слайдера в топе всех продаж для WP: http://codecanyon.net/category/wordpress?utf8=%E2%9C%93&sort_by=sales_count&ref=sAlex&categories=wordpress )

Респект авторам, которые вовремя сделали качественный "Отстой" и полуают по $4000 в неделю ;) Как девелопер для запада скажу, что там о скорости думают после картинки. Я к тому, что статья-оригинал из Америки

я вообще думаю слайдеры не нужны, мне на пример раздражают слайдеры

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

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

В чем-то автор может быть и прав.

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

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

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

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

-оптимизированные статичные картинки+текст загрузятся быстрее

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

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

- указанный минус в мобильных устройствах( как вариант, решается заменой блока со слайдами на блок с обычным текстом и картинками)

Слайдер экономит место? Но может потратить время пользователя, что часто важнее.

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

Константин

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

Автор абсолютно прав, что касается скорости загрузки и кризиса дизайнерства. Слайдер это как мин 2 -3 скрипта и 8 - 10 фото/изображений., т.е. больше 10 дополнительных файлов к загрузке. Но проблему скорости можно будет решить, если делать слайдеры с помощью CSS3 (transition properties). Остается дождаться, когда все браузеры будут это поддерживать

Мне кажется вы сильно отстали от жизни. 2-3 скрипта? Скрипт jQuery в учет вообще можно не брать, поскольку он подключается в любом случае (не видела сайтов абсолютно без скриптов). В итоге подключается один-единственный скрипт слайдера, в зависимости от функционала может быть довольно легким.

8-10 картинок? Обычно 3 или 5. слайдеры с 10 картинками встречаются ну очень редко. На счет веса - кто вам мешает оптимизировать картинки для слайдера? У меня изображение для слайдера весит до 100 кб. Это смешные цифры, учитывая современные скорости интрернета. Поверьте мне, картинка или свечение, цепляемое на фон, весит больше, чем все картинки слайдера вместе взятые, но никто же не возмущается, зачем их использовать. Это же так красиво? Красиво! Поэтому на скорость загрузки сайта мы забиваем. Вот и слайдер во многих случаях тоже довольно красиво, а если дизайнер с мозгами, то еще и информативно (порой благодаря слайдеру видишь информацию, о существовании которой на сайте даже не догадываешься, ведь не все сайты состоят всего из 5-6 страниц).

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

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

По мне, так автору главное плюнуть в колодец, авось отзовется.

Я уже делаю слайдеры для новых браузеров без скриптов, пример http://w2buy.ru/ на CSS3

10 Фото -? От 3 до 5 обычно.

Максимум надо загрузить 2 скрипта(один из них дефакто jQuery). Ужать можно все в 1 файл.

Мне кажется что вы просто читать не умеете. 3-5 фото это обычно у вас. Вы смотрите только со своей колокольни. Как же без скриптов вы делаете, если загружаете максимум два. Это тоже скрипты или вы думаете 2 это не показатель.

Скрипты нужны только для IE8-IE-9 браузеров. IE-10 уже нормально понимает CSS3 анимацию.
Вы про упаковку скриптов слышали или просто здесь изгаляетесь?
Может вы свои работы покажете?

По-моему, слайдер без навигации - это наихудший вариант. И что юзеру с ним делать? Наибелее удобный с точки зрения юзера - навигация табами. В таком случае кол-во картинок умножается на 2. Вот вам и будет 8 (как в примере в начале статьи), если картинок 5 , соответсветнно 10. Лишний скрипт и 8-10 картинок - это тоже существенно. Браузер ведь больше 2 фалов одновременно не загружает, правильно? (поэтому в вашем примере можно слепить кнопки соц сетей и лого в CSS спрайт) На десктопе это может не так заметно юзерам (но не гугулу). А вот на мобильных устройствах это существенно.

Кроме того часто глядя на слайдеры в самом видимом месте сайта (как опять же в вашем примере) возникает вопрос - а зачем?

Слайдеры придумали чтобы на одном месте можно было показать больше инфы. Им подобавляли эфектов, и сделали их красивыми. Так и забыли про их первоначальную роль, и часто используют просто "для красоты". A viewport ведь не резиновый :)

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

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

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

Я не понял о навигации в слайдере табами, поясните.

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

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

Дмитрий

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

Журавлев Андрей

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