Презентация к вебинару "Как передать свои идеи через диаграммы"

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

2. Диаграмма
Диаграмма на слайде должна наглядно
показывать соотношение количественных
величин…
Вольный пересказ статьи «Словаря»
Слайды с цифрами говорят не о цифрах.
Они говорят о смысле, который стоит за
ними.
Nancy Duarte, «Slide:ology»

3. Из истории
иколай рем
В 1350 году создал
первую диаграмму

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

5. Придерживайтесь 6 принципов
1. Говорите правду.
2. Доходите до самой сути.
3. Выбирайте правильный инструмент.
4. Выделяйте то, что важно.
5. Не усложняйте.
Nancy Duarte, «Slide:ology»

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

7. 1. Идея определяет заголовок
Используйте основную идею в качестве
заголовка диаграммы.
Джин Желязны, «Говорите на языке
диаграмм»
Плохо:
«Распределение прибыли по регионам»
Хорошо:
«На долю Западного региона приходится
половина совокупной прибыли»

8. 2. Определение типа сравнения данных
5 типов сравнения данных:
1. Покомпонентное - % от целого
2. Позиционное – соотношение объектов
3. Временное – изменения во времени
4. Частотное – число объектов в интервалах
5. Корреляционное – зависимость между
переменными
Джин Желязны, «Говорите на языке
диаграмм»

9. 2.1 Покомпонентное сравнение
Покомпонентное сравнение – показываем %
каждого компонента от целого.
Пример: «В октябре птицы уничтожили 20%
урожая рябины»

10. 2.2 Позиционное сравнение
Позиционное сравнение – выявляем как
объекты соотносятся друг с другом:
одинаковы они, больше или меньше.
Пример: «Задания А и Б выполнило меньше
всего пользователей»

11. 2.3 Временное сравнение
Временное сравнение – выявляем как
изменяются показатели во времени.
Пример: «Посещаемость сайта выросла с
начала года»

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

13. 2.5 Корреляционное сравнение
Корреляционное сравнение – показывает
наличие или отсутствие зависимости
между двумя переменными.
Пример: «Зарплата уборщиц не зависит от
площади уборки»

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

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

16. 1. Круговая диаграмма
Хорошо
Плохо

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

18. The great pie chart battle
Вы видели как 6-летний ребенок безошибочно
выбирает самый большой кусок пиццы?
Dan Roam, «The back of the Napkin»
или
Ну, что? Круговая или столбиковая пицца?

19. 2. Линейчатая диаграмма
Линейчатая диаграмма для позиционного
сравнения
•Контрастный цвет для выделения важного
компонента
•Избегать дробей при отображении цифр
•Располагать компоненты по убыванию или
возрастанию
•Отображать либо шкалу, либо цифры
напротив компонентов

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

21. 2. Линейчатая диаграмма
Линейчатая диаграмма для корреляционного
сравнения
•Независимые переменные обычно
обозначают слева
•Не более 15 показателей
•Значения независимых переменных
упорядочить по возрастанию или убыванию

22. 2. Линейчатая диаграмма
Хорошо
Плохо

23. 3. Гистограмма
Гистограмма для временного сравнения
•Входные данные дискретные
•Показывать не более 8 значений
•Выделяйте цветом нужный момент времени
•Гистограмму можно совмещать с графиком

24. 3. Гистограмма
Хорошо
Плохо

25. 3. Ступенчатая гистограмма
Ступенчатая гистограмма для частотного
сравнения
•Чтобы показать риск, вероятность,
возможность
•Используется не более 5-7 областей значений
•Вертикальная ось для значений,
горизонтальная для диапазонов

26. 3. Ступенчатая гистограмма
Большинство грузов доставляется за 7-8 дней
Количество
заказов

27. 4. График
График для частотного сравнения
•Чтобы показать риск, вероятность,
возможность
•Используется для большого количества
значений
•Вертикальная ось для значений,
горизонтальная для диапазонов

28. 4. График
Нормальное распределение Гаусса

29. 4. График
График для временного сравнения
•Чтобы показать риск, вероятность,
возможность
•Используется много значений
•Для отображения классической
статистической информации

30. 4. График

31. 5. Точечная диаграмма
Точечная диаграмма для корреляционного
сравнения
•Для большого количества показателей
•Необходимо отображать линию ожидаемой
зависимости

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

33. Практикум. Банановое исследование
Наблюдаем покомпонентное и позиционное сравнение

34. Практикум. Банановое исследование
Наблюдаем корреляционное сравнение
Тут я немного изменила данные, для наглядности

35. Оформление. Аскетизм против роскоши
Эдавард Тафти рекомендует убирать с
диаграмм визуальный шум и делать их
аскетичными.
Гарр Рейнольдс, напротив, предлагает
дополнять диаграммы визуальным
рядом.
Выбирать вам…

36. В социальных сетях больше женщин
НЛО
Мужчины
Женщины
65%
Пример аскетичного дизайна диаграммы

37. В социальных сетях больше женщин
НЛО
Мужчины
Женщины
65%
Пример насыщенного дизайна диаграммы

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

39. Когда диаграмма не нужна
Иногда лучшая диаграмма – это отсутствие
диаграммы.
Если вы хотите сообщить одно ключевое
послание, и вам не важно сравнение данных,
то используйте формулу:
Картинка + текст = нужный эффект

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

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

42. Пример: как отобразить отделы компании
Задача: отобразить отделы компании
Usability Love:
•Коммерция
•Управление
•Проектирование
•Тестирование
•Редакция и обучение

43. Пример 1

44. Пример 2
Мы работаем вместе
ради общей цели…
Будьте креативными!

45. Книги в порядке желательном для чтения
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» (ни в коем случае не читать первой :)

46. Успехов в диаграммотворчестве
С вами была Мария Чайкина
m.chaikina@usabilitylab.ru