- Статьи
- 3 мин на чтение
- 5
Список в столбик — лучший шаблон дизайна для отображения таблиц в мобильных интерфейсах
Оптимальный дизайн таблиц на мобильных экранах
Просмотр таблиц на мобильном экране вызывает дискомфорт. Пользователю приходится прокручивать данные вертикально и горизонтально, чтобы увидеть все строки и столбцы. Такая двойная прокрутка по осям вызывает путаницу и увеличивает время выполнения задачи.
Необходим другой шаблон дизайна для отображения таблицы в мобильном интерфейсе. Список в столбик — лучший, потому что он экономит время и усилия пользователей, и позволяет избежать чрезмерной прокрутки и путаницы в контексте.
Чтобы продемонстрировать эффективность списка в столбик, рассмотрим таблицу из десктопной версии с пятью категориями данных и заголовками для столбцов. Список в столбик вмещает все пять категорий в ограниченном пространстве. Пользователям не нужны заголовки для столбцов, чтобы понять, что представляют собой данные. Это связано с их визуальной обработкой и размещением в столбик. В результате люди могут интуитивно интерпретировать категории данных без заголовков.
Иерархия списка в столбик
Анатомия списка в столбик обладает визуальной иерархией. Она начинается с визуального идентификатора на крайней левой стороне, такого как иконка или логотип основного элемента. Основной элемент находится в левой верхней части, за ним следует вторичный элемент в правой верхней части. Поскольку у этих двух элементов наибольший приоритет, их выделяют жирным шрифтом.
Элемент в правом нижнем углу — третичный по значимости. За ним следует четвёртый по значимости элемент, он находится в левом нижнем углу. Если места достаточно, можно разместить несколько четвёртых по значимости элементов горизонтально в области левого нижнего угла. В данном примере дату и тип данных объединяют в одну область, потому что у них одинаковый приоритет.
Расположение элементов согласно этой иерархии позволит создать интуитивно понятную структуру, которую легко сканировать и обрабатывать. Более того, в ограниченном пространстве вы сможете делать так, чтобы ваша таблица выглядела эффективно и содержательно.
Прогрессивное раскрытие для больших таблиц
Пример ниже демонстрирует, как можно разместить пять категорий данных в списке в столбик. Но что, если таблица содержит больше пяти категорий? В этом случае отобразите любые дополнительные элементы с помощью прогрессивного раскрытия.
Для обозначения прогрессивного раскрытия отображайте стрелки раскрытия справа в виде визуальных подсказок. Когда пользователи прикоснутся к строке, они перейдут на другой экран с дополнительными элементами. В данном примере список в столбик представляет собой страницу, которая называется «Транзакции» («Transactions»), а последующая страница называется «Детали транзакции» («Transaction Details»).
Страница с детализацией отображает гораздо больше данных и раскрывает первичные и вторичные элементы (продавца и сумму). Кроме того, она включает необходимые кнопки действий и кнопку «Назад», чтобы пользователь мог вернуться на предыдущую страницу.
Избегайте аккордеонов
Аккордеон — шаблон, который некоторые дизайнеры выбирают для отображения таблиц в мобильных интерфейсах. Однако такой подход увеличивает количество вертикального скроллинга со стороны пользователей, потому что дополнительные элементы накладываются на предварительно просматриваемые. По мере того как пользователь открывает несколько аккордеонов, структура экспоненциально растёт.
Кроме того, контекст может запутать пользователей, если они просматривают несколько записей данных на одном экране. Они могут прочитать детали одного элемента, думая, что они связаны с другим, который они прочитали ранее. Легко потеряться в контексте, если пользователи просматривают несколько записей данных одновременно.
Применяя список в столбик и прогрессивное раскрытие, вы можете отобразить всю вашу таблицу на мобильном экране, независимо от размера данных. Это поможет эффективно использовать пространство и наглядно представить данные без лишней прокрутки или путаницы в контексте. Именно по этой причине список в столбик — лучший шаблон дизайна для отображения таблиц в мобильных интерфейсах.
Перевод статьи Stacked Lists: The Best Pattern to Display Mobile Tables из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
