1. Проектирование
информационных панелей3
BI сходка 20113
3
Юра Кудрявцев, mail@ykud.com3
3

2. Что такое инфопанельдэшборд?3
Визуальное представление
информации, необходимой и
достаточной для решения одной
или нескольких задач, которое
можно охватить взглядом3

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

4. Как мы видим3
Изображение на сетчатке 3
3
Внимание:3 Свойства3
3
Обучение 3
поиск 3
известных 3 3 новым 3
паттернам3
объектов3
3
3 Паттерны3
3
Объекты3

5. Визуальный анализ данных3
Январь3 Февраль3Март3 Апрель3 Май3 Июнь3 Июль3 Август3 Сентябрь
Октябрь3Ноябрь3 Декабрь3
Россия3 1003 11531503 1103135314031303135315031003 9031203
Украина3 403 303 453 603 553 703 653 753 603 503 553 603
160
140
120
100
80
60
40
20
0
Январь
Февраль
Март
Апрель
Май
Июнь
Июль
Август
Сентябрь
Октябрь
Ноябрь
Декабрь
Россия
Украина

6. необходимой и достаточной для
решения одной или нескольких
задач3
• Определяйте задачи инфопанели
перед ее разработкой3
• Выбирайте уровень агрегирования
данных3
• Агрегаты + исключения3
• Инфопанель создается под
определенную рольгруппу
пользователей3

7. охватить взглядом3
• Нельзя допускать прокручивания3
• Данные внизу страницы = данные на
другом листе3
• Рационально расходуйте экранное
пространство3

8. Почему большая часть
визуализаций выглядит не так?3
• Большинство визуализаций пытается
привлечь наше внимание:
инфографика в прессе, презентации
вендоров. Для этого нужны необычные
формы подачи и цвета3
• Но этот же выбор свойств мешает
ежедневно работать с цифрами3
• Примеров использования визуального
анализа в работе намного меньше3

9. • Всегда помните про цель создания
инфопанели 3
• Если нужно привлечь и заставить его
запомнить простой вывод –
использовать инфотеймент3
• Но аналитиков BI системы не нужно
«привлекать», им нужно удобно
работать3

10. Какой график вам запомнится?3
А на каком вы бы хотели отслеживать
ежедневные изменения?3

11. Как сделать инфопанель для
ежедневной работы?3

12. Процесс разработки инфопанели3
1. Уменьшаем пиксели, не связанные с
данными3
– Убираем ненужные «украшения»3
– Стандартизируем и «приглушаем»
остальные3
2. Усиливаем пиксели, несущие
информацию3
– Убираем ненужные данные – агрегируем3
– Подчеркиваем наиболее важные
оставшиеся пиксели3

13. Уменьшаем пиксели, не
связанные с данными 3
1) Убираем3
1) Логотипы3
2) Ненужные цвета3
3) Клетки в графиках3
4) Уменьшаем отступы3
5) 3D3
2) Приглушаем3
1) Отступы3
2) Палитры для фонов3
3) Элементы управления3

14. Усиливаем пиксели, несущие
данные3
• Агрегирование3
• Исключения3
• Усиление восприятия ключевых
моментов3

15. Как мы оцениваем картинку3
• Расположение3
• Длина3
• Угол наклона3
• Площадь3
Точнее3
• Объём3
• Текстура и 3
• цвет3

16. Выбор представления
информации3
• Лучший вариант для решения данного
типа задачи (сравнение, поиск и пр)3
• Решает задачу даже при просмотре в
уменьшенном разрешении3

17. Юзабилити3
• Группируйте объекты по бизнес-смыслу3
• Используйте минимальные
разделители (например пустое место)3
• Добавляйте сравнения данных3
• Мягкие цветовые палитры3
• Единство графического «языка»:3
– Шрифты3
– Палитры3
– Типы графиков для задач3

18. Что дальше?3
• Блоги:3
- perceptualedge.com3
- eagereyes.org3
• Литература:3
- Stephen Few, Information Dashboard Design: The Effective
Visual Communication of Data3
- Stephen Few, Now You See It: Simple Visualization
Techniques for Quantitative Analysis3
- Edward Tufte, The Visual Display of Quantitative Information3
- Colin Ware, Visual Thinking for Design3
- Dan Roam, The Back of the Napkin: Solving Problems and
Selling Ideas with Pictures3
• Семинары и консалтинг3