Как сделать таблицы данных более наглядными
Почти каждая таблица данных, которую вы когда-либо видели, выглядит одинаково. Они состоят из множества строк и столбцов, заполненных текстом. Такие таблицы, перегруженные текстом, не обеспечивают лучшего пользовательского опыта, потому что в них не хватает одного важного элемента — визуальных компонентов.
Ваша таблица данных должна быть более визуальной, чтобы упростить сканирование и распознавание различных данных. Она также должна выглядеть привлекательно, чтобы пользователям хотелось с ней взаимодействовать. Один из эффективных приёмов — добавление визуальных элементов к данным, основанным на идентичности.
Как видно в таблице ниже, визуальные элементы добавлены к категориям данных, обладающим уникальной идентичностью. Категории «Сотрудник», «Клиент», «Прогресс» и «Результат» выглядят приятнее, а конкретные данные легче найти.
Единственным недостатком визуальных таблиц данных является то, что добавление элементов расширяет макет. Однако это не проблема, если у вас всего несколько категорий данных и вы используете минимальный размер элементов.
Фотографии сотрудников
Один из способов применить этот приём — использовать его для отображения имён людей. Например, вы можете добавить фотографии (аватарки) в категорию «Сотрудник», чтобы пользователи могли быстрее идентифицировать человека.
Фотография помогает быстрее найти нужного человека и визуально подтвердить его личность, если есть сомнения. В некоторых случаях два человека могут иметь схожие имена — в такой ситуации фото поможет избежать путаницы.
Если в таблице отображаются группы людей, вместо перечисления всех имён можно использовать стопку (группу) фотографий. Перечисление имён увеличивает текст, а значит — требует больше пространства в ячейках.
Группировка фотографий экономит место и даёт возможность визуальной идентификации. Однако, если пользователям нужны имена, можно отобразить их во всплывающей подсказке при наведении курсора на фотографию.
Логотипы компаний
Ещё один способ сделать таблицы более визуальными — добавить логотипы рядом с названиями компаний. Многие компании узнаются именно по логотипам. Использование логотипов в категории «Компания» помогает пользователям быстрее распознавать нужную при беглом просмотре таблицы. Без логотипов все названия компаний выглядят одинаково на первый взгляд.
Логотипы работают не только для компаний, но и для любых категорий данных, связанных с брендами. Например, в категории «Оплата» можно отображать логотип платёжной системы или банка, использованного для оплаты, вместо (или вместе с) текстом. Это улучшает визуальное восприятие и облегчает идентификацию.
Названия расширений файлов
Пользователи часто путают файлы, особенно если у них одинаковое начало имени, но разные окончания. Иными словами, они игнорируют расширения и выбирают неверный тип файла.
Добавление иконок расширений файлов может помочь избежать таких ошибок. Пользователи смогут быстрее распознавать типы файлов визуально, не читая длинные имена полностью.
Индикаторы прогресса
В некоторых категориях данных может отображаться прогресс. Вместо того чтобы полагаться только на цифры и проценты, стоит добавить визуальные индикаторы прогресса. Это позволит пользователям быстрее оценить и сравнить уровень выполнения.
Флаги стран
Локации также можно сделать более наглядными, используя флаги стран. Пользователи легко узнают флаги, так как часто сталкиваются с ними в повседневной жизни. Дополнительная визуальная подсказка помогает быстрее различать страны.
Бейджи статуса
Самый простой и распространённый способ сделать таблицы более визуальными — использовать бейджи для обозначения статуса. Статусы важны, так как позволяют пользователям понять, на какие записи стоит обратить внимание. Текст сам по себе плохо справляется с этой задачей — лучше использовать бейджи разных цветов.
Важно, чтобы бейджи не выглядели как кнопки, иначе пользователи могут попытаться кликнуть на них. Поэтому не стоит использовать насыщенные цвета и сплошную заливку. Лучше выбрать нейтральный фон, цветной текст и маленькую цветную точку — это не создаст путаницы с интерактивными элементами.
Числовые тренды
Категории данных с числовыми значениями часто меняются со временем. Без анализа сложно быстро уловить тренд. Чтобы сделать его более очевидным, можно использовать индикаторы положительной и отрицательной динамики — отображая процент изменения между значениями.
