Меньше значит больше, или как красиво и наглядно оформить данные28.11.2016 15:03

Работая над оформлением и визуализацией данных (таблиц, графиков, диаграмм и т.п.), главное — не перестараться. В противном случае информация будет восприниматься с трудом. Анимированные GIF-иллюстрации Джоуи Чердачака (Joey Cherdarchuk) об упрощении и преображении таблицы и столбчатой диаграммы вдохновили нас на перевод их на русский язык.

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

Меньше значит больше

Именно такой подход к оформлению данных (и не только) позволит достичь максимальной наглядности и простоты восприятия.

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

Перейдем к примерам.

Брюки превращаются…

Оригинал: 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

В заключение, несколько общих советов по оформлению данных:

1. Избегайте дополнительных эффектов: теней, объема, 3D и т. п.

2. Не используйте цвет и жирный шрифт без необходимости. Акцент следует делать на каком-то определенном элементе, который действительно имеет информативную ценность.

3. Отдайте предпочтение зрительным отступам вместо линий границ.

4. В таблицах следите за выравниванием: текст -— по левому краю, цифры — по правому.

5. Ширину столбцов устанавливайте по их содержимому, а не заголовкам.

6. Используйте только безопасные шрифты, которые по умолчанию установлены на операционных системах. Например, шрифт Calibri (в примере с таблицей) является встроенным на Windows, но у пользователя на Mac возникнут проблемы при просмотре документа из-за отсутствия этого шрифта.

   Список безопасных шрифтов на Windows, Mac и большинства Unix/Linux систем:

   Arial
   Arial Black
   Comic Sans MS
   Courier New
   Georgia
   Impact
   Times New Roman
   Trebuchet MS
   Verdana

7. Сократите количество подписей.

Удачных вам визуализаций!

Перевод GIF-иллюcтраций: Екатерина Заволокина

Полный текст статьи читайте на CMS Magazine