x
 
Роман Кирьяков
22 апреля 2013

Здравствуйте!

Как вы относитесь к элементам интерфейса с динамическим контентом в рамках фиксированного пространства, например каруселям или слайдерам?



В 2009-м году в бюро придумали интерфейс универсальной фотогалереи, отвечающей нашим представлениям о прекрасном: о масштабировании, перетаскивании, подстановке превьюшек строго под курсор мыши при смене кадров — кликай в своё удовольствие.

Но когда Артём Поликарпов превратил этот интерфейс в доступный всем продукт — «Фотораму», он поддержал малый бизнес эффективнее любой госпрограммы. Начинающий предприниматель может поставить фотографии товаров в галерею на свою страничку и сразу начать торговать. Не дожидаясь, пока появятся деньги на полноценный сайт.

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

Это не Народ.ру, это настоящая демократизация сайтостроения.

Вместе с тем, ничто так не бесит, как рекламные карусели и слайдеры, управляемые кликом.

Вершину горы идиотизма занимают банеры, переключаемые круглыми точками:

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

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

Банеры и каталог там же: клик по стрелкам часто путается с кликом по объекту

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

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

Сравните с обычной прокруткой. Колесо или тачпад всегда под рукой и тратят минимум энергии и внимания.

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

Однако вопросы и ответы на той же странице управляются обычной прокруткой. Залипающая левая колонка для навигации по списку синхронизированна с прокруткой страницы:

Итак, чем же фоторама с товарами лучше листалки банеров?

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

Поделиться
Отправить

Комментарии

Тимофей Магрин
22 апреля 2013

Чем остальные плагины хуже? Такую галерею, как на ваших картинках можно сделать ещё многими плагинами, например:
http://flexslider.woothemes.com/

http://galleria.io/

Захар Кириллов
22 апреля 2013

Январское исследование Нильсен-Норман Груп наглядно показывает вред каруселей для бизнес-сайтов: размещённые таким образом предложения остаются незамененными, даже если текст в них набран 98-м размером шрифта: http://www.nngroup.com/articles/auto-forwarding/

Стасис Чепулис
22 апреля 2013

Кстати, исследование об эффективности каруселей. Точнее, об их неэффективности:
http://weedygarden.net/2013/01/carousel-stats/

Дмитрий Кравчик
22 апреля 2013

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

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

А перелистывание обычно делается стрелками и кликами по боковым областям самого баннера (правая и левая треть/половина всей площади картинки).

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

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

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


22 апреля 2013

Дмитрий!

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

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

О прокрутке перетаскиванием (это, кстати, вовсе не дрег-энд-дроп) вы рассуждаете примерно как Стив Балмер после презентации первого Айфона.

Юрий Ломоносов
22 апреля 2013

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

Светлана Гукасян
22 апреля 2013

Почему на сайте Фоторамы используется переключение круглыми точками? В некоторых случаях это всё-таки допустимо?

Сергей Красильник
22 апреля 2013

Дмитрий, а как с кружочками наперёд узнать, что галерея состоит из однотипных или не однотипных товаров?

Валерий Сибиковский
29 мая 2013

> а также подставляет превьюшки под курсор при листании кликом.

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

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

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

В результате получаем обмен шила на мыло.

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

Александр Невский
12 сентября 2017

А почему бы не показывать картинку при наведении курсора на превьюшку? Зачем ещё кликать?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

Как лучше всего решить эту задачу, если текст нужно разделить на анонс и основной текст? 2 5 8 Хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора» 3 2