UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Визуализация данных с помощь таблиц. Делаем удобные юзабельные таблицы
Редакція
Редакція

Опубліковано

Визуализация данных с помощь таблиц. Делаем удобные юзабельные таблицы

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

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

Эта статья является частью серии, посвященной различным аспектам проектирования удобных таблиц:

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

Таблицы и карточки или модули для представления данных

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

Основные преимущества таблицы по сравнению с другими вариантами представления данных:

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

Карточное представление многомерных данных

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

Основные задачи пользователя в таблицах

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

  • Найти записи, которые соответствуют определенным критериям
  • Сравнить данные
  • Просмотреть, редактировать или добавить данные в одной строке
  • Работать с записями

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

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

Этот процесс может включать фильтрацию, сортировку, использование функции поиска (или использование встроенной функции браузера поиска по странице CTRL-F) или просто визуальное сканирование таблицы. Причины, по которым пользователи выберут одно из этих взаимодействий, трудно предсказать, и они основаны на специфике таблицы данных, а также на их ожиданиях относительно того, что окажется самым легким способом поиска нужной информации.

Поиск данных в таблице

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

Проектирование для поддержки этой задачи включает в себя несколько разных аспектов:

  1. Первый столбец (по умолчанию) должен быть удобочитаемым идентификатором записи. Это позволит пользователям сканировать и находить интересующую их запись.
  2. Порядок столбцов по умолчанию должен отражать важность данных для пользователя, а связанные столбцы должны располагаться рядом. Другими словами, как только пользователь обнаружил потенциально интересующую его запись, не заставляйте его перемещать взгляд туда-сюда между 1 и 20 столбцами, потому что они наиболее релевантны.
  3. Фильтры должны быть легко обнаруживаемыми, быстрыми и эффективными. Синтаксис фильтра должен быть прозрачным для пользователей. Более того, пользователи должны иметь возможность легко понять, что они просматривают отфильтрованные данные (то есть должна быть четкая визуальная индикация, что фильтры активны).

Сравнение данных

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

Есть две распространенные проблемы, с которыми сталкиваются пользователи при выполнении сравнений в сложных больших таблицах:

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

Основные дизайн-решения обеспечивают, что:

  1. Пользователи всегда будут знать, на что они смотрят.
  2. Точки интереса данных могут быть перенесены в непосредственную близость.

Вот ряд конкретных рекомендаций, связанных с этими двумя принципами.

1. Поиск релевантной информации

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

2. Сопоставление информации для сравнения

  • Скрытие и изменение порядка столбцов должно быть простым (низкая стоимость взаимодействия и доступность для тех, кто не использует перетаскивание). Эти функции должно быть легко найти, а четкие визуальные индикаторы состояния должны сигнализировать пользователям о том, что часть столбцов скрыта.
  • Скрытие или изменение порядка записей и сортировка по определенной переменной также должны быть простыми. (Эта функция часто связана с фильтрацией, но это не совсем то же самое — пользователь должен иметь возможность вручную скрыть одну или несколько записей).

Закрепленная строка заголовка и первый столбец в таблице

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

Легко заметное меню для скрытия столбцов в таблице

Легко заметное меню для скрытия столбцов, в котором четко указано текущее состояние (на данный момент скрыто 15 столбцов). Переупорядочить столбцы можно двумя способами: (1) перетаскиванием самих заголовков столбцов (что имеет относительно низкую обнаруживаемость и плохую доступность, но является эффективным _ __ средством __ __ после изучения) или (2) перетаскиванием_ в списке столбцов этого видимого меню.

Просмотр, редактирование или добавление одной строки

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

Существует множество способов представить одну запись как единое целое, оптимизированное для удобства чтения и редактирования. У каждого есть свои недостатки, которые следует учитывать:

Модальное всплывающее окно для редактирования скрывает информацию в таблице

Модальное всплывающее окно для редактирования скрывает информацию в таблице.

  • Редактировать на месте (когда строка таблицы становится редактируемой). Это решение работает, только если таблица узкая. Убедитесь, что строка выглядит иначе в режиме редактирования, чтобы пользователь мог четко видеть, что можно изменить ее содержимое, и предотвратить случайное редактирование.
  • Модальное всплывающее окно. Большой недостаток модального окна(и почему мы обычно не рекомендуем использовать его для глубокого редактирования) в том, что оно будет перекрывать соседние записи в таблице, и пользователь не сможет ссылаться или копировать данные из аналогичной записи. При тестировании мы регулярно наблюдаем, что пользователи во время редактирования записи обращаются к данным в других записях (поскольку это помогает им распознавать, а не вспоминать разумные диапазоны значений).
  • Немодальная панель или отдельное окно. Любой из этих вариантов будет перекрывать часть таблицы, но по-прежнему даст пользователям доступ к данным таблицы.
  • Открытие строки в виде** ***аккордеона*. Хотя этот вариант не перекрывает другие части таблицы, недостатком является то, что пользователи не склонны убирать за собой (т. е. закрывать аккордеоны, когда закончили работать с ними), и они могут получить загроможденные дисплеи, неподходящие для других основных задач таблицы. Что еще более важно, пользователям будет трудно обращаться к записям, которые не находятся в непосредственной близости от редактируемой.

Немодальная боковая панель в таблице

Немодальная боковая панель дает возможность полностью отображать (и редактировать) одну запись, при этом позволяя пользователю просматривать остальные данные таблицы.

Действия с записями

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

Традиционно существует два способа реализации этой задачи: действия с одной записью и пакетные действия.

Действия с одной записью

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

  • Слишком много , поэтому на них трудно нажимать, а также их трудно различать.
  • Они скрыты под жестом наведения или общим меню «Actions», поэтому его трудно обнаружить (и, возможно, ограниченный доступ, если используется жест наведения).

Пакетные действия

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

Вывод

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

Таблицы данных должны поддерживать следующие распространенные пользовательские задачи:

  • Поиск записей, соответствующих определенным критериям
  • Сравнение данных
  • Просмотр, изменение или добавление одной строки
  • Действия с записями

Перевод статьи nngroup.com

Топ коментарі (0)