Полностраничные и компактные окна

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

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

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

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

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

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

Компонент “Slideover”

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

В большинстве приложений обзор данных на странице начинается с отображения дашборда в виде таблицы или карточек. Когда пользователи нажимают кнопку «Просмотреть детали» (“View Details”), с правой стороны страницы выезжает окно.

Страница обзора

Как ускорить просмотр данных

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

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

Окно, выезжающее в режиме slideover, без оверлея

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

Окно, выезжающее в режиме slideover, с оверлеем

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

Поэтому в окне, выезжающем в режиме slideover, рядом с кнопкой «X» должны быть стрелки пагинации. При нажатии на стрелку «вперёд» следует отображать следующий элемент по порядку, а при нажатии на стрелку «назад» пользователь будет возвращаться к предыдущему. Эти кнопки позволят людям последовательно просматривать детали, не закрывая каждый раз окно, выезжающее в режиме slideover.

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

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

Будущее за окнами, выезжающими в режиме slideover

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

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

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

Перевод статьи Why Users View Details Better with Compact Slideovers из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Почему пользователи лучше воспринимают детали через компактные окна, выезжающие в режиме slideover was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.