Школа
Интерфейс

Карусели и слайдеры

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

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

Роман Кирьяков
21 апр 2013
👁 12246   🗩10
Интерфейс

Карусели и слайдеры

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

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

Роман Кирьяков
21 апр 2013
👁 12246   🗩10
А. Г.
Арт‑директор и автор учебных программ бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ФоторамаКарусели и слайдеры
Просмотр представляет для посетителя сайта самостоятельную ценность.Листание банеров ценности не представляет.
Фоторама использует жесты прокрутки и перетаскивания, а также подставляет превьюшки под курсор при листании кликом.Карусели не используют прокрутку, заставляют целиться в неинформативные кнопки — стрелки и кружки.
Используется по делу.Используются как костыль при нехватке места и воображения.
Закон ФиттсаПрокрутка и листалкаИнтерфейсНоситель: сайт
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

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

Рекомендуем другие советы