Я расскажу о наглядности на примере таблиц. Сейчас в интернете можно найти огромное количество таблиц, в которых сравнивают симптомы коронавируса, гриппа, простуды и аллергии.
Таблицы эти адресованы очень широкой аудитории, поэтому дизайнеры стараются сделать их максимально понятными и наглядными. Чаще всего в ход идут иконки, иллюстрации, цвет и условные обозначения. В одних случаях эти приемы действительно помогают быстрее разобраться в данных и ухватить суть, в других — только добавляют шума и отвлекают от информации.
Посмотрим, как это работает.
1. Иконки
Многие таблицы пестрят иконками, чаще всего их применяют для иллюстрации симптомов.
Проблема номер один: иконки сложно отличить друг от друга, на большей части изображена голова:
![](https://awdee.ru/wp-content/uploads/2020/05/coronavirus-covid-19-identifying-the-symptoms.jpg)
Здесь вообще десять одинаковых голов, а различия, то есть сами симптомы, скрыты в мелких деталях:
![](https://awdee.ru/wp-content/uploads/2020/05/20200321_5_032E1F7DE38374F0B9CADEAC9F0D37CE3-855x1024.jpg)
То же самое, только в другом стиле:
![](https://awdee.ru/wp-content/uploads/2020/05/Bez-nazvaniya-655x1024.jpeg)
Проблема номер два: расшифровать незнакомую пиктограмму сложнее, чем прочитать одно или два слова. Попробуйте сами:
![](https://awdee.ru/wp-content/uploads/2020/05/picture_c9957fbbfd710ff878c_65204_p0.png)
Получается, что иконки никак не упрощают и не ускоряют восприятие таблицы, поэтому здесь они просто не нужны.
2. Фоновые иллюстрации
Картинки на заднем плане наглядны лишь в том смысле, что могут подсказать тему сообщения. Увидев таблицу издалека, вы скорее всего догадаетесь, что она про коронавирус или хотя бы про что-то медицинское. При этом изображение не иллюстрирует конкретные данные: эту же картинку можно поставить и на другие таблицы, посвященные инфекциям. Следовательно, перед нами не информативная, а декоративная иллюстрация:
![](https://awdee.ru/wp-content/uploads/2020/05/otlichiya-koronavirus.png)
Часто картинками просто закрывают свободные места на макете, классика любительской верстки:
![](https://awdee.ru/wp-content/uploads/2020/05/unnamed.jpg)
3. Цвет
Одно дело — раскрасить макет «для красоты», другое — ввести цветовое кодирование, чтобы помочь читателю разобраться.
Шаг первый: определить, какой элемент или свойство элемента закодировать цветом. Ниже неудачные примеры:
Цветом выделен столбец коронавируса, но его и так нетрудно найти:
![](https://awdee.ru/wp-content/uploads/2020/05/d8645a87a511d97c2a576901323fc8b2.jpeg)
Цветом выделен каждый столбец:
![](https://awdee.ru/wp-content/uploads/2020/05/New-Coronavirus-vs.-flu_ver3-1-scaled-1-713x1024.jpg)
Цветом выделен каждый симптом:
![](https://awdee.ru/wp-content/uploads/2020/05/Bez-nazvaniya-919x1024.png)
Цветом выделена каждая вторая строка. Может показаться, что симптомы на плашках чем-то отличаются от симптомов без плашек. Чересполосица часто приводят к такому искажению смысла:
![](https://awdee.ru/wp-content/uploads/2020/05/Difference-between-cold-flu-COVID-ADD-Allergies1668x1217-1024x747.png)
Цветом выделено всё:
![](https://awdee.ru/wp-content/uploads/2020/05/covid-cold-flu-symptoms-bd24a5-859x1024.png)
Намного полезнее обозначить с помощью цвета частоту симптома. Это ключевое свойство и оно незаметно при беглом просмотре: слова часто, иногда, редко внешне похожи друг на друга.
![](https://awdee.ru/wp-content/uploads/2020/05/123.jpg)
Два акцентных цвета тоже работаю неплохо. Обратите внимание, что закрашено само слово, а не вся ячейка — этого вполне достаточно:
![](https://awdee.ru/wp-content/uploads/2020/05/w1200-916x1024.jpeg)
Шаг второй: подобрать правильную цветовую гамму. Здесь оранжевый Sometimes первым бросается в глаза, хотя по смыслу важнее синий Common:
![](https://awdee.ru/wp-content/uploads/2020/05/1_u869wT9gG7f2I4vk5Pspww.jpeg)
Сначала кажется, что чем темнее ячейка, тем чаще встречается симптом, на самом деле наоборот:
![](https://awdee.ru/wp-content/uploads/2020/05/04-uofuhealth_coronavirus-flu-cold_symptomsgraph_10x10_apr9-1024x1024.jpg)
Шаг третий: не переборщить. Если закрасить все ячейки, эффективность выделения резко упадет:
![](https://awdee.ru/wp-content/uploads/2020/05/16804_YHHHS_COVID19_Comparision_032220.png)
На следующем примере ячейки одного цвета начинают складываться в паттерн, но смысла в этом паттерне нет. Как и чересполосица, случайные связи искажают структуру данных:
![](https://awdee.ru/wp-content/uploads/2020/05/Snimok-ekrana-2020-04-23-v-23.26.19-931x1024.png)
4. Условные обозначения
В некоторых таблицах вместо слов часто, иногда, редко стоят условные обозначения. Дизайнеры любят так делать: придумать хитрый шифр, а подсказку написать внизу мелким текстом:
![](https://awdee.ru/wp-content/uploads/2020/05/ETCq-qlU0AMj4V6-1024x536.jpg)
Следующий макет выглядит очень мило, но запутывает читателя. Здесь и сложная система галочек и крестиков, и неочевидное цветовое кодирование. Тот случай, когда иллюстратору не стоит доверять дизайнерскую задачу:
Менее запутанно, но всё равно неудобно:
![](https://awdee.ru/wp-content/uploads/2020/05/covid-19-symptoms-1024x544.png)
Простые обозначения работают лучше сложных, но хуже текста:
![](https://awdee.ru/wp-content/uploads/2020/05/52738983_7-1024x1024.png)
Значки одновременно со словами — перебор:
![](https://awdee.ru/wp-content/uploads/2020/05/table-comparison-symptoms-969x1024.png)
Еще одно бесполезное дублирование:
![](https://awdee.ru/wp-content/uploads/2020/05/Upper-Respiratory-Symptoms-Chart-1024x819.jpg)
Ответ в конце статьи
Вот что имел в виду автор иконок:
![](https://awdee.ru/wp-content/uploads/2020/05/otvet.png)
Конкурс!
Предлагаю читателям нарисовать свою версию таблицы симптомов. Автор лучшего варианта получит билет на дистанционный мастер-класс «Большая переверстка». Подробности у меня в блоге.
Обсуждение
Похожее
11 заповедей тёмного дизайна Олега Пащенко
9 трендов в профессиональной жизни творческих людей
Why we skip Photoshop