Советы по визуализации данных с примерами и видео-инструкциями.
Дата публикации: 28.11.2016
Работая над оформлением и визуализацией данных (таблиц, графиков, диаграмм и т.п.), главное — не перестараться. В противном случае информация будет восприниматься с трудом. Анимированные GIF-иллюстрации Джоуи Чердачака (Joey Cherdarchuk) об упрощении и преображении таблицы и столбчатой диаграммы вдохновили нас на перевод их на русский язык.
Давайте на примерах этих элегантных трансформаций разберем основные ошибки оформления данных, и научимся делать простые, но красивые и наглядные таблицы и диаграммы с помощью видео-инструкций, которые мы записали для вас.
Меньше значит больше
Именно такой подход к оформлению данных (и не только) позволит достичь максимальной наглядности и простоты восприятия.
Чем меньше стилей и эффектов вы используете, тем большую информативную ценность получает конечный продукт.
Перейдем к примерам.
Необходим сайт, мобильное приложение, услуги по SEO или контекстной рекламе? Тендерная площадка WORKSPACE поможет выбрать оптимального исполнителя. База проекта насчитывает более 10 500 агентств. Сервис работает БЕСПЛАТНО как для заказчиков, так и для исполнителей.
Брюки превращаются…
Оригинал: https://www.darkhorseanalytics.com/portfolio/2016/1/7/data-looks-better-naked-clear-off-the-table
Что мы видим вначале? Цветную картинку: яркий фон, границы и жирный шрифт отвлекают от цифр и самой сути представленных данных. Но стоит лишь отказаться от заливки и цвета как таблица сразу же преображается. Ошибкой здесь было и использование шрифта Calibri (об этом дальше).
Пример верстки таблицы
See the Pen YGAWXX by olga (@olga-abanova) on CodePen.
Видео-инструкция по редактированию таблицы в Google Docs
Еще один пример с преображением данных — столбчатые диаграммы.
Оригинал: http://www.darkhorseanalytics.com/portfolio/data-looks-better-naked-bar-charts
Здесь принцип «меньше значит больше» сработал на все 100%. Отказавшись от всех эффектов, уменьшив количество цветов и подписей, мы получили простую и легко считываемую диаграмму. Жирный шрифт не придавал акцента заголовкам, а лишь увеличивал общую массу эффектов.
Видео-инструкция по оформлению столбчатой диаграммы в MS Excel
В заключение, несколько общих советов по оформлению данных:
Избегайте дополнительных эффектов: теней, объема, 3D и т. п.
Не используйте цвет и жирный шрифт без необходимости. Акцент следует делать на каком-то определенном элементе, который действительно имеет информативную ценность.
Отдайте предпочтение зрительным отступам вместо линий границ.
В таблицах следите за выравниванием: текст -— по левому краю, цифры — по правому.
Ширину столбцов устанавливайте по их содержимому, а не заголовкам.
Используйте только безопасные шрифты, которые по умолчанию установлены на операционных системах. Например, шрифт Calibri (в примере с таблицей) является встроенным на Windows, но у пользователя на Mac возникнут проблемы при просмотре документа из-за отсутствия этого шрифта.
Список безопасных шрифтов на Windows, Mac и большинства Unix/Linux систем:
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Сократите количество подписей.
Удачных вам визуализаций!
Перевод GIF-иллюcтраций: Екатерина Заволокина