Перестаньте бороться с вашими таблицами

10 min readJun 5, 2022

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

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

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

Некоторый контекст данных и таблиц

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

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

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

Обеспечение потребностей клиентов

Как UI/UX-дизайнер, вы должны сосредоточиться на удовлетворении потребностей и намерений клиента. Данные — это жизненный факт в современном деловом мире. У ваших клиентов их много, и им нужен способ понять их, не обязательно привлекая команду специалистов по обработке и анализу данных. Таблицы облегчают нам выполнение этой потребности.

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

Итак, проектируете ли вы систему инвентаризации, дашборд для управления интеграциями SaaS, глобальной логистикой или распределением рабочей нагрузки, вы хотите сделать свои таблицы максимально удобными для пользователя, иначе они не будут служить своей цели. С точки зрения дизайна это может быть сложной задачей, особенно если вам нужно разобраться с огромными объемами данных и ячеек, которые должны «разговаривать» друг с другом.

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

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

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

Стиль таблицы

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

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

Чего хочет клиент?

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

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

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

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

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

Рекомендации по дизайну таблиц

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

Вот несколько советов, которые нужно держать про запас:

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

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

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

Выберите функции, которые люди действительно будут использовать. Как только вы освоитесь с дизайном таблиц, возникает соблазн добавить в него всевозможные функции. Но если необходимости в них нет, в какой-то момент это может привести к проблемам. Спросите себя: «Это полезно?» «Это имеет смысл?» и «Добавляет ли это ценность?» и действуйте соответственно. Именно здесь пригодится четкое понимание бизнес-процессов и организационных рабочих процессов. Вы можете принимать дизайн решение, зная, что оно будет использовано и оценено по достоинству, и избегать «Что это, черт возьми?» разговоров.

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

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

Функции отображения таблиц

Вот некоторые из наиболее распространенных / ожидаемых функций отображения, которые вам необходимо учитывать:

Основные стили таблиц

Фиксированные заголовки. Фиксированные заголовки придают контекст данным и устраняют необходимость прокрутки назад, чтобы подтвердить заголовки столбцов.
Стили строк. Вы можете разработать стили строк, чтобы сделать данные более удобными для сканирования. Вы хотите, чтобы ваша таблица выглядела как можно более чистой, тогда удалите линии строк и добавьте полосы зебры (в чередующихся строках), это хорошо работает для ограниченного количества данных. Однако, если у вас длинный список строк, разделительные линии помогают пользователю понять, где он находится, в то время как полоски зебры могут сбивать с толку.
Плотность строк. Если у вас большое количество данных для анализа, вы можете подумать о добавлении опции управления плотностью строк. Некоторые пользователи могут захотеть просмотреть больше данных без прокрутки, а другие предпочли бы немного больше места, поэтому предоставление им контроля идеально.
Горизонтальная прокрутка. Это очень важно при проектировании таблиц с большим количеством данных. Вы можете поместить идентифицирующие данные в первый столбец и привязать их, чтобы при прокрутке пользователю их было легко просматривать.
Пагинация. Вы можете развернуть нумерацию страниц в своих таблицах, чтобы помочь пользователю определить, сколько строк или столбцов они хотят видеть в своем отображении. Альтернативой является бесконечная прокрутка, которая постепенно загружает данные во время прокрутки. Опять же, один метод может быть предпочтительнее другого, в зависимости от типа сайта и рассматриваемых данных.

Отображение таблиц

Возможность расширения строки. Разрешите пользователю просматривать дополнительные данные строки, не теряя контекста в общей картине.

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

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

Фильтрация, Сортировка и Поиск

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

Настройка таблицы

Включить встроенное редактирование. Эта функция позволяет пользователям изменять или редактировать данные, не открывая данные в отдельном окне. Это полезно, например, если вам нужно быстро изменить цену товара или добавить примечание.
Добавить столбцы. Разрешите пользователю добавлять столбцы на основе соответствующих данных.

Свернутая таблица

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

Подвижная таблица

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

Укороченная таблица

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

Трансформированная таблица

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

Сравнительная таблица

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

Финальные мысли

И последнее, но не менее важное: рассмотрите возможность того, что ваши пользователи могут захотеть экспортировать свои табличные данные, чтобы они могли делиться ими с другими или загружать их в другие программы. Добавление кнопки «Экспорт в CSV» в верхней части окна решает проблемы, с которыми не может справиться pdf.

Спасибо за внимание!

Источник: Stop struggling with your data tables | by Denislav Jeliazkov | UX Collective (uxdesign.cc)