Дизайн

Наглядность в таблицах

Наглядность — это такое свойство верстки, которое помогает пользователю вникнуть в суть, не читая текст или читая по минимуму. Взглянул — и всё ясно: о чем идет речь, что самое важное, в каком порядке смотреть, какой из этого вывод.

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

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

Посмотрим, как это работает.

1. Иконки

Многие таблицы пестрят иконками, чаще всего их применяют для иллюстрации симптомов.

Проблема номер один: иконки сложно отличить друг от друга, на большей части изображена голова:

coronavirus-covid-19-identifying-the-symptoms

Здесь вообще десять одинаковых голов, а различия, то есть сами симптомы, скрыты в мелких деталях:

20200321_5_032E1F7DE38374F0B9CADEAC9F0D37CE3-scaled

То же самое, только в другом стиле:

Bez-nazvaniya

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

picture_c9957fbbfd710ff878c_65204_p0Ответ в конце статьи

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

2. Фоновые иллюстрации

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

otlichiya-koronavirus

Часто картинками просто закрывают свободные места на макете, классика любительской верстки:

unnamed

3. Цвет

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

Шаг первый: определить, какой элемент или свойство элемента закодировать цветом. Ниже неудачные примеры:

Цветом выделен столбец коронавируса, но его и так нетрудно найти:

d8645a87a511d97c2a576901323fc8b2

Цветом выделен каждый столбец:

New-Coronavirus-vs.-flu_ver3-1-scaled-1

Цветом выделен каждый симптом:

Bez-nazvaniya

Цветом выделена каждая вторая строка. Может показаться, что симптомы на плашках чем-то отличаются от симптомов без плашек. Чересполосица часто приводят к такому искажению смысла:

Difference-between-cold-flu-COVID-ADD-Allergies1668x1217

Цветом выделено всё:

covid-cold-flu-symptoms-bd24a5

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

123

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

w1200

Шаг второй: подобрать правильную цветовую гамму. Здесь оранжевый Sometimes первым бросается в глаза, хотя по смыслу важнее синий Common:

1_u869wT9gG7f2I4vk5Pspww

Сначала кажется, что чем темнее ячейка, тем чаще встречается симптом, на самом деле наоборот:

04-uofuhealth_coronavirus-flu-cold_symptomsgraph_10x10_apr9-scaled

Шаг третий: не переборщить. Если закрасить все ячейки, эффективность выделения резко упадет:

16804_YHHHS_COVID19_Comparision_032220

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

Snimok-ekrana-2020-04-23-v-23.26.19

4. Условные обозначения

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

ETCq-qlU0AMj4V6

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

Covid-19-Flu-Cold-Symptoms-v4-850x510-1

Менее запутанно, но всё равно неудобно:

covid-19-symptoms

Простые обозначения работают лучше сложных, но хуже текста:

52738983_7

Значки одновременно со словами — перебор:

table-comparison-symptoms

Еще одно бесполезное дублирование:

Upper-Respiratory-Symptoms-Chart-scaled

Ответ в конце статьи

Вот что имел в виду автор иконок:

otvet

Источник: Awdee