- Статьи
- 3 мин на чтение
- 11
Более эффективный способ представления данных вместо формата «Поле: Значение»
Как организовать данные с позиции визуального восприятия
Насколько хорошо вы представляете информацию пользователям? Если вы просто отображаете её в формате «Поле: Значение», то вы не создаёте для них приятный визуальный опыт. Вместо этого вы добавляете им работу, которая может привести к неправильному восприятию информации.
Для наглядности приведенный ниже пример показывает данные в формате «Поле: Значение». Не только каждая единица информации выглядит одинаково, но и несколько адресов и данных о времени выглядят также. В результате пользователи могут с лёгкостью ошибочно их интерпретировать, если не будут внимательны.
Разница между данными «Текущее местоположение» (“Current Location”) и «Пункт назначения» (“Destination”) ничтожна. Везде адреса отображены в одном и том же формате и находятся рядом друг с другом. Более того, между данными «Время отправления» (“Departure Time”) и «Время прибытия» (“Arrival Time”) разница также незначительна. Неудивительно, что пользователи часто неправильно воспринимают информацию.
Рассматривайте данные с позиции визуального восприятия
Человек — визуальное существо, которое способно распознавать формы и символы всего за 13 миллисекунд (источник). Половина человеческого мозга служит для обработки визуальной информации (источник). Поэтому необходимо подходить к данным с позиции визуального восприятия, чтобы создать для пользователей более приятный опыт просмотра.
Пользователи – люди, а не базы данных, поэтому не отображайте данные в формате «Поле: Значение». Вместо этого ищите способы внедрения цветов, форм и иконок, чтобы улучшить восприятие полей и значений.
Например, вот как выглядят данные из предыдущего примера в визуальном формате. Обратите внимание, насколько уникально и по-разному выглядит каждая единица информации. В результате у пользователей меньше шансов неправильно воспринять какие-либо данные.
Этот дизайн содержит гораздо меньше текста, потому что в нём нет названий полей. Обратите внимание, что названия «Номер заказа» (“Order ID”), «Статус» (“Status”), «Текущее местоположение» (“Current Location”), «Пункт назначения» (“Destination”), «Имя клиента» (“Client Name”), «Время отправления» (”Departure Time”), «Время прибытия» (“Arrival Time”) и «Общее время в пути» (“Total Elapsed Time”) удалены. Они излишни. Поскольку их заменили на визуальные элементы, теперь они выполняют свою функцию.
Каждое значение, за исключением «Номера заказа» (“Order ID”), сопровождается визуальным элементом, который улучшает восприятие данных. Теперь вы больше не читаете текст, а обрабатываете информацию на более глубоком уровне, через визуальные элементы. Это не только приятно для глаз, но и для мозга.
Визуальные элементы динамичны, потому что они отражают обновленные данные. Статус меняется с «В пути» (“In Transit”) на «Доставлено» (“Delivered”). Вы также можете видеть, как «двигаются» стрелки времени и местоположения, и линии маршрута заполняются цветом.
Ниже есть ещё один пример формата «Поле: Значение». Как видите, здесь всего три значения, но информацию все равно трудно обработать. Однако, когда вы отображаете данные в визуальном формате, они становятся более лёгкими для восприятия.
Пользователи могут быстро оценить заполненность склада с помощью индикатора прогресса. Они также могут быстрее просканировать доступное пространство для хранения и увидеть предупреждение о низком уровне запасов с помощью иконок. Опять же, визуальные элементы улучшают восприятие информации.
Визуальные элементы отражают обновленные данные, когда заполненность склада достигает критического уровня. Индикатор прогресса и соответствующее текстовое название становятся красными, а в конце индикатора появляется иконка предупреждения. Без визуальных элементов пользователям было бы труднее обрабатывать данные о запасах товаров.
Обратите внимание на значительную разницу между форматом «Поле: Значение» и визуальным отображением данных. Первый требует больше усилий для когнитивной обработки, в то время как второй справляется с этой задачей гораздо лучше. Кроме того, визуальный формат выглядит привлекательнее.
Ваша цель — перевести часть «Поле» из формата «Поле: Значение» в визуальный формат. Когда пользователи могут обрабатывать значения данных без названий полей, это означает, что вы всё точно визуально отобразили.
Пора перестать относиться к пользователям как к базе данных, показывая им информацию в формате «Поле: Значение». Пользователи — люди, которые обладают врожденной способностью визуально обрабатывать информацию. По возможности воспользуйтесь этим — выбирайте цвета, формы и иконки, чтобы представлять данные.
Перевод статьи A Better Way to Display Data Than “Field: Value” из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
