Scott
Карусель показывает связанные элементы в ограниченной области и позволяет переходить от одного к другому. Она полезна, когда посетитель понимает, что доступно, может выбрать нужный элемент и рассматривать его столько, сколько требуется. Стрелки «Назад» и «Вперёд» решают лишь часть задачи: выбранный элемент, его место в наборе и пояснение к нему тоже должны оставаться понятными.
В среде прототипирования Pixso можно проверить эти решения в целостном сценарии просмотра. Начните с материалов, которые человек хочет изучить, а не с анимации, для которой нужно найти применение.
Решите, нужно ли вообще скрывать часть материалов
Карусель заставляет посетителя открывать то, что сетка могла бы показать одновременно. Такой компромисс оправдан для небольшой галереи, изображениям которой нужна крупная область просмотра. Он менее удачен, когда требуется сравнить несколько вариантов сразу или найти важную информацию, доступную только на одном из следующих слайдов.
Рассмотрим Oak Studio — портфолио дизайнера с четырьмя превью интерфейсных проектов. Каждому превью нужно достаточно места, чтобы была видна структура экрана. Галерея может выделить эту площадь выбранному проекту, а остальные показать миниатюрами. Представление студии и способ связаться с дизайнером остаются за пределами сменяющейся области.
Теперь изменим задачу: клиент хочет сравнить краткие описания всех четырёх проектов, прежде чем открыть подробный кейс. Для этого лучше может подойти сетка. Карусель сама по себе не делает страницу профессиональнее, а размещение всех важных сообщений на её слайдах не гарантирует, что посетители их увидят.
Определите, что представляет собой один слайд
Сохраняйте одинаковую единицу содержания. В галерее Oak Studio один элемент — это превью проекта с названием и ссылкой на кейс. Не смешивайте полноценный проект, отдельный отзыв и форму связи, представляя их как равнозначные варианты одного набора.
Второй проект называется «Сценарий бронирования». Когда он выбран, превью, заголовок, выделение миниатюры и указатель позиции должны совпадать. Подпись «2 из 4» сообщает место в наборе, а название объясняет, что именно открыто. Во время перехода эти сведения не должны меняться независимо от изображения.
Краткое описание лучше разместить рядом с превью или под ним, а не поверх насыщенного деталями интерфейса. Ссылка на кейс должна относиться к выбранному проекту. «Посмотреть кейс “Сценарий бронирования”» понятнее постоянной кнопки «Подробнее», назначение которой незаметно меняется.
Предложите два полезных способа просмотра
Кнопки перехода назад и вперёд подходят для последовательного просмотра. Миниатюры решают другую задачу: позволяют выбрать узнаваемый проект или вернуться к уже просмотренному. Oak Studio может использовать оба способа, поскольку проектов мало, а их превью заметно различаются.
Не перекрывайте элементами управления важные части изображения. Стрелка поверх яркой кнопки в макете может потеряться или выглядеть частью демонстрируемого проекта. У каждого элемента управления должно быть постоянное место, понятное название и достаточно пространства для удобного нажатия.
Одни точки в этом примере менее информативны. Они показывают позицию, но не объясняют, какой проект откроется. Если для миниатюр недостаточно места, сохраните понятные кнопки и название текущего проекта. Маленькая точка не должна быть единственным способом перейти к нужному элементу.
| Элемент галереи | На какой вопрос отвечает | Решение для Oak Studio |
|---|---|---|
| Текущее название | Что я сейчас смотрю? | Название «Сценарий бронирования» указано рядом с выбранным превью. |
| Позиция | Где я нахожусь в наборе? | «2 из 4» расположено рядом с кнопками перехода. |
| Кнопки «Назад» и «Вперёд» | Как продолжить последовательный просмотр? | Отдельные кнопки остаются на своих местах. |
| Миниатюры | Как выбрать проект или вернуться к нему? | Доступны все четыре превью, выбранное заметно выделено. |
| Ссылка на кейс | Как изучить проект подробнее? | Ссылка называет выбранный проект и открывает его описание. |
Определите поведение на первом и последнем элементах
Решите, что делает кнопка «Вперёд» на последнем элементе: становится недоступной или возвращает к началу. Оба варианта могут быть понятными, если управление и обратная связь им соответствуют. Не допускайте, чтобы прототип показывал циклический переход, а готовая реализация блокировала кнопку.
В Oak Studio остановим просмотр на границах. Портфолио содержит короткую последовательность, а миниатюры уже позволяют перейти к любому проекту. На первом проекте кнопка «Назад» явно недоступна, на последнем — «Вперёд». Сохраняйте их позиции: достижение границы не должно перемещать оставшуюся кнопку под указатель.
Циклическая галерея должна иначе объяснять переход своим поведением. Возврат с четвёртого проекта на первый не должен выглядеть как появление пятого. Проверьте это с человеком, который раньше не видел макет. Анимация полезна, только если помогает понять, куда он переместился.
Различайте выбор и клавиатурный фокус
Выделенная миниатюра обозначает отображаемый проект. Клавиатурный фокус показывает, какой элемент управления сработает при следующем нажатии. Это могут быть разные элементы: «Сценарий бронирования» остаётся выбранным, пока посетитель переводит фокус на кнопку «Вперёд».
Не меняйте слайд только потому, что человек проходит обычные элементы управления клавишей Tab. В этой галерее с ручным управлением нажатие «Вперёд» меняет превью, а фокус остаётся на кнопке, чтобы её можно было нажать снова. Активация миниатюры выбирает проект, но не переносит посетителя неожиданно на страницу кейса.
В руководстве W3C по каруселям на английском языке разобраны управление с клавиатуры, контроль движения и уведомление об изменениях. Согласуйте конкретную модель управления с разработчиками. Реализации нужны доступные названия и понятное обозначение текущего элемента: нарисованная вокруг миниатюры рамка сама по себе эту информацию не передаёт.
Добавляйте подписи и полезный альтернативный текст там, где они объясняют назначение изображения. Не повторяйте полное видимое описание проекта в доступном имени каждой миниатюры. Элемент навигации должен обозначать, куда ведёт, а крупному превью нужно описание, подходящее самому изображению.
Начните с ручного перелистывания
Превью Oak Studio содержат детали интерфейса. Посетитель может изучать композицию, читать описание или обдумывать, подходит ли проект его задаче. Ручное перелистывание позволяет потратить на это разное время, не заставляя сначала искать паузу.
Автоматическая смена усложняет и возвращение к понравившемуся материалу: проект, который человек собирался открыть, может исчезнуть. Если карусель меняет слайды, пока посетитель работает с её кнопками, она мешает собственному взаимодействию. В этом портфолио движение почти не помогает выбору, поэтому обойдёмся без него.
Если в другом продукте автоматическая смена действительно оправдана, шаблон карусели WAI-ARIA на английском языке описывает управление воспроизведением и остановку при получении клавиатурного фокуса или наведении указателя. После попадания фокуса внутрь карусели смена не возобновляется без явного действия пользователя. Задайте эти правила, а не только произвольную задержку между слайдами.
Адаптируйте всю галерею, а не только картинку
В узком окне сохраняйте связь превью, названия и управления. Уменьшенного изображения недостаточно, если навигация оказывается далеко под подписью или заголовок переносится под плавающую стрелку.
В Oak Studio кнопки «Назад» и «Вперёд» и указатель позиции можно оставить отдельной строкой под превью. Миниатюры могут превратиться в компактную полосу, если все остаются доступны. Свайп допустим как дополнительный способ просмотра, но не как единственный. Посетитель не должен угадывать жест, чтобы открыть третий проект.
По возможности выделите стабильную область для превью, чтобы смена изображений не сдвигала кнопки. Подберите масштабирование так, чтобы сохранялась важная для кейса часть макета. Если обрезать область навигации на превью интерфейса, можно убрать именно то, что посетитель хотел изучить. Прежде чем закреплять правило обрезки, проверьте вертикальные и широкие изображения.
Соберите конкретную галерею в Pixso
Разместите четыре превью проектов Oak Studio в файле Pixso и подготовьте состояния выбора с одинаковой структурой галереи. «Сценарий бронирования» должен оставаться вторым элементом в крупном превью, наборе миниатюр и указателе позиции. Свяжите действия так, чтобы проверяющий мог идти вперёд, возвращаться назад и выбирать другой проект напрямую.
Попросите участника проверки открыть «Сценарий бронирования», посмотреть другой проект, а затем вернуться. Обратите внимание, какое управление он выбирает и может ли назвать текущий проект, не пересчитывая миниатюры. Повторите задание в узком окне с более длинным названием.
Для передачи в разработку запишите рядом с фреймами поведение на границах, ожидаемый фокус и правило размещения изображения. Затем проверьте их в работающей галерее. Хорошая карусель отличается не самой эффектной анимацией, а тем, что следующий элемент легко найти, а текущий — спокойно изучить.
