Датавиз в BI • Алиса Ручкина

Остановись, ещё рано!

Вдруг поступят новые правки, и документацию придётся переделывать😏

рубрика «Вредные советы»

#fun

В Китае здоровый, а в Японии болезнь? или Цвет имеет значение

В разных культурах мира цвета воспринимаются по-разному.

Автор книги «Инфографика» Дэвид Маккэндлесс составил визуализацию, в которой показал, что обозначают цвета в разных культурах.

Рассмотрим пример на картинке: жёлтый цвет в Китае ассоциируется со здоровьем, а в Японии с болезнью😲

Очень залипательно!👀

Кстати, ещё китайцы воспринимают красный цвет как «хороший», описала свои наблюдения в этом посте.

#dataviz #цвет

Где взять подсказки для дашборда

Дополню пост Анастасии Кузнецовой (см. выше) подборкой, где добыть иконки, UTF-символы и эмодзи:

1️⃣ icons8.ru
Можно выбрать стиль — лаконичный Forma Light, как на картинке, или модный глассморфизм, и покрасить в любой цвет перед скачиванием

2️⃣ symbl.cc

3️⃣ Скопировать прямо из Telegram, например: ▲ ● ▼ ■ — ⓘ ⚠️ 🔍

Эксперт по датавизу Aurelian Vautier писал: «Дашборды без вспомогательных элементов как рецепты без инструкций», но помним об уместности и соответствии правилам, принятым в компании.

Примеры использования таких символов:
🤩для графика «звёзды»
🤩для обозначения кликабельности графика
🤩для справочной информации по клику на картинку
🤩в кастомной легенде

#uxui

Лучшее время для новостей😁

#fun

Белое на чёрном, белое на сером, белое на белом...

(смотри в комментариях объяснение заголовка поста)

Казалось бы, цвет один. А вот контрастность разная!

Сегодня поговорим о ней.

❓ Что это такое?

Контрастность цвета (Contrast Ratio) — это отношение яркости самой светлой и тёмной точек в интерфейсе.

Помните, в одном из предыдущих постов мы говорили про data-ink ratio?

То было отношение данных к чернилам, а сегодня другой коэффициент и очередная формула.

Не такими уж гуманитарными оказываются визуализация и дизайн😁

❓Как считать?

Формула расчёта контрастности на первый взгляд кажется простой:

(L1 + 0,05) / (L2 + 0,05)

, но сами L1 и L2 рассчитать непросто, потому что на самом деле это не простая яркость, а относительная.

Относительной яркостью считается коэффициент от нуля до единицы, где 0 является чёрным цветом, а 1 белым цветом.

И для получения этого значения используется другая формула:

L = 0,2126 * R + 0,7152 * G + 0,0722 * B

Кто не боится занырнуть в детали, посмотрите эту статью с объяснением расчёта на русском языке.

❓Кто всё это придумал?

Все эти формулы берут своё начало в руководстве по доступности веб-контента (Web Content Accessibility Guidelines — WCAG).

Это руководство и другие технологические стандарты для Интернета разрабатывает международная организация W3C.

❓А сколько норма?

Согласно актуальной на данный момент версии WCAG 2.2, рекомендуемый коэффициент контрастности для текста должен быть 4,5:1. Простыми словами, это означает, что яркость текста должна быть как минимум в 4,5 раза больше яркости фона.

Для крупного текста (18 пикселей или больше) или жирного текста (14 пт или больше) и для компонентов интерфейса минимальный коэффициент контрастности составляет 3:1.

Именно 3:1 я часто встречаю в разных статьях и рекомендациях.

❓А можно не считать самому?

Конечно! Есть множество сервисов для проверки контрастности, а также специальные расширения для браузеров и приложения.

Вот примеры простых удобных сервисов:
🤩contrast checker от Coolors.co
🤩contract ratio от Siegemedia
🤩contrast checker на сайте Академии Веб-дизайна

❓Как применить это в BI?

В разработке дашбордов мы используем это знание, чтобы повысить читаемость графиков:

☝️Помним, что контрастность считается относительно фона, поэтому когда мы помещаем текст на цветную плашку, контрастность снижается (привет цветным фонам!)

☝️ Проверяем читаемость подписей данных на графиках

В книге Dashboards that deliver приведён хороший пример улучшения контрастности на графике, я использовала его на скриншоте.

Авторы сравнили три варианта подписи данных: серым цветом, синим цветом, соответствующим цвету столбца, и более тёмным синим. Из них по стандарту контрастности подошёл только третий вариант.

❓Что ещё почитать по теме?

🤩Подробнее о контрастности в этой статье
🤩В целом о цвете в визуализации данных в моей памятке

Лайк, если полезно/интересно😉

#цвет #uxui #dataviz

Дорогие подписчики, пора признаться...

... в том, что я очень ценю ваше внимание!♥️

А если вы захотите повторить и нарисовать такое же сердечко в FineBI, то инструкция есть в 10 дне Ретрита 😉