UX Russia

Как передать свои идеи через диаграммы

Диаграмма

Диаграмма на слайде должна наглядно показывать соотношение количественных величин…

Слайды с цифрами говорят не о цифрах. Они говорят о смысле, который стоит за ними.

Nancy Duarte, «Slide:ology»

Вольный пересказ статьи «Словаря»

иколай рем

В 1350 году создалпервую диаграмму

Из истории

Когда вам придется рисовать диаграммы, больше доверяйте интуиции. Разбудите в себе 6-летнего ребенка. Старайтесь изображать основную идею.

К кому приходит муза диаграмм

Джин Желязны, «Бизнес Презентация»

Придерживайтесь 6 принципов

1. Говорите правду.2. Доходите до самой сути.3. Выбирайте правильный инструмент.4. Выделяйте то, что важно.5. Не усложняйте.

Nancy Duarte, «Slide:ology»

Три шага к построению диаграммы

ДанныеДанные

1. Идея определяет заголовок

Используйте основную идею в качестве заголовка диаграммы.

Плохо: «Распределение прибыли по регионам»Хорошо:«На долю Западного региона приходится половина совокупной прибыли»

Джин Желязны, «Говорите на языке диаграмм»

1. Покомпонентное - % от целого

2. Позиционное – соотношение объектов

3. Временное – изменения во времени

4. Частотное – число объектов в интервалах

5. Корреляционное – зависимость между переменными

2. Определение типа сравнения данных

Джин Желязны, «Говорите на языке диаграмм»

5 типов сравнения данных:

2.1 Покомпонентное сравнение

Покомпонентное сравнение – показываем % каждого компонента от целого.

Пример: «В октябре птицы уничтожили 20% урожая рябины»

2.2 Позиционное сравнение

Позиционное сравнение – выявляем как объекты соотносятся друг с другом: одинаковы они, больше или меньше.

Пример: «Задания А и Б выполнило меньше всего пользователей»

2.3 Временное сравнение

Временное сравнение – выявляем как изменяются показатели во времени.

Пример: «Посещаемость сайта выросла с начала года»

2.4 Частотное сравнение

Частотное сравнение – сколько объектов попадает в определенные последовательные области числовых значений.

Пример: «Большая часть проектов была выполнена за 5-8 дней»

2.5 Корреляционное сравнение

Корреляционное сравнение – показывает наличие или отсутствие зависимости между двумя переменными.

Пример: «Зарплата уборщиц не зависит от площади уборки»

3. Выбор типа диаграммы

3.1 Круговая диаграмма

Круговая диаграмма для покомпонентного сравнения.

•Не более 6 компонентов•Самый важный компонент на линии 12 часов•Если нет необходимости выделять один компонент, то располагать их от большего к меньшему по часовой стрелке

1. Круговая диаграмма

Хорошо

Плохо

The great pie chart battleДизайнеры давно спорят об эффективности круговой диаграммы.

The great pie chart battle

Вы видели как 6-летний ребенок безошибочно выбирает самый большой кусок пиццы?

Ну, что? Круговая или столбиковая пицца?

или

Dan Roam, «The back of the Napkin»

Линейчатая диаграмма для позиционного сравнения

•Контрастный цвет для выделения важного компонента

•Избегать дробей при отображении цифр

•Располагать компоненты по убыванию или возрастанию

•Отображать либо шкалу, либо цифры напротив компонентов

2. Линейчатая диаграмма

2. Линейчатая диаграмма

Линейчатая диаграмма для корреляционного сравнения

•Независимые переменные обычно обозначают слева

•Не более 15 показателей

•Значения независимых переменных упорядочить по возрастанию или убыванию

2. Линейчатая диаграмма

2. Линейчатая диаграмма

Хорошо

Плохо

3. Гистограмма

Гистограмма для временного сравнения

•Входные данные дискретные

•Показывать не более 8 значений

•Выделяйте цветом нужный момент времени

•Гистограмму можно совмещать с графиком

3. Гистограмма

Хорошо

Плохо

3. Ступенчатая гистограмма

Ступенчатая гистограмма для частотного сравнения

•Чтобы показать риск, вероятность, возможность

•Используется не более 5-7 областей значений

•Вертикальная ось для значений, горизонтальная для диапазонов

3. Ступенчатая гистограмма

Большинство грузов доставляется за 7-8 дней

Количествозаказов

4. График

График для частотного сравнения

•Чтобы показать риск, вероятность, возможность

•Используется для большого количества значений

•Вертикальная ось для значений, горизонтальная для диапазонов

4. График

Нормальное распределение Гаусса

4. График

График для временного сравнения

•Чтобы показать риск, вероятность, возможность

•Используется много значений

•Для отображения классической статистической информации

4. График

5. Точечная диаграмма

Точечная диаграмма для корреляционного сравнения

•Для большого количества показателей

•Необходимо отображать линию ожидаемой зависимости

Практикум. Банановое исследование

Этот пример взят с замечательного блога, посвященного диаграммам и презентациям: http://blog.powerlexis.ru/

Наблюдаем покомпонентное и позиционное сравнение

Практикум. Банановое исследование

Наблюдаем покомпонентное и позиционное сравнение

Практикум. Банановое исследование

Наблюдаем корреляционное сравнение

Тут я немного изменила данные, для наглядности

Эдавард Тафти рекомендует убирать с диаграмм визуальный шум и делать их аскетичными.

Оформление. Аскетизм против роскоши

Гарр Рейнольдс, напротив, предлагает дополнять диаграммы визуальным рядом.

Выбирать вам…

В социальных сетях больше женщин

Женщины65%

Мужчины

НЛО

Пример аскетичного дизайна диаграммы

Женщины65%

Мужчины

НЛО

В социальных сетях больше женщин

Пример насыщенного дизайна диаграммы

Скажи «Нет» 3D диаграммам

Когда диаграмма не нужна

Иногда лучшая диаграмма – это отсутствие диаграммы.

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

Картинка + текст = нужный эффект

55% тропических лесов Амазонии могут погибнуть к 2030 году

Концептуальные диаграммы

Концептуальные диаграммы предназначены для качественной информации.

О них рассказывать некогда, но можно привести один пример…

Пример: как отобразить отделы компании

Задача: отобразить отделы компании Usability Love:

•Коммерция•Управление•Проектирование•Тестирование•Редакция и обучение

Пример 1

Мы работаем вместеради общей цели…

Будьте креативными!

Пример 2

Книги в порядке желательном для чтения

1. Джин Желязны «Говори на языке диаграмм»

2. Джин Желязны «Бизнес презентация»

3. Блог про презентации и диаграммы http://blog.powerlexis.ru/

4. Dan Roam «The back of the napkin»

5. Nancy Duarte «Slide:ology»

6. Garr Reynolds «Presentation Zen»

7. Edward Tufte «The visual display of quantitative information» (ни в коем случае не читать первой :)

Успехов в диаграммотворчестве

С вами была Мария Чайкинаm.chaikina@usabilitylab.ru