![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3730-6437-4830-a535-353064663161__-__empty__727-3.jpg)
Чем больше электронных устройств, тем больше объем данных, и он будет продолжать расти экспоненциально. Есть предположения, что к 2025 году будет получено 163 зеттабайтов (163 триллиона гигабайтов) данных.
Но для человеческого мозга это всего лишь какие-то цифры — чтобы понять любое число, большее пяти, нужны абстракции и аналогии. Большие данные бесполезны, если их невозможно понять и сделать удобными. Вот тут-то и пригодится визуализация.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3832-6564-4538-b662-306537623832__-__empty__727-2.png)
Графически представленные данные особенно полезны для лиц, принимающих решения, — они оперируют большим объемом информации, и без визуализации её очень сложно воспринимать и использовать.
Она поможет отслеживать производительность, проводить мониторинг поведения клиентов и, например, измерять эффективность процессов. А если заложить время на определение цели и приоритетов графического представления информации перед стартом визуализации, конечный результат будет более полезным и сэкономит время на создании ненужных визуальных эффектов.
Наиболее популярные типы диаграмм:
Линейные графики
Используются для сравнения значений в течение времени и отлично подходят для отображения больших и малых изменений. Они также могут использоваться для сравнения изменений с более чем одной группой данных.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild6130-6331-4533-b138-393037626163__-__empty__727-4.png)
Подходят для сравнения количественных данных из нескольких категорий. Также могут использоваться для отслеживания изменений с течением времени, но лучше всё-таки использовать их, только если эти изменения значительны.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3936-3065-4963-a238-616335383963__-__empty__727-5.png)
Подходят для отображения значений для двух переменных для набора данных и для изучения отношений между двумя массивами.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3638-3761-4662-b737-353336646332__-__empty__727-6.png)
Используются для отображения частей целого. Для изменений во времени не подходят.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3866-6537-4763-b564-626636343463__-__empty__727-7.png)
Иерархия данных показывает различные уровни информации, помогая принимать решения. Если отсортировать значения от наибольших к наименьшим, можно подчеркнуть наибольшие значения или отобразить самую важную категорию.
Даже порядок отображения данных, используемые цвета (например, яркие цвета для наиболее важных точек и серые для базовых) и размер различных элементов диаграммы (например, расширение определенных фрагментов круговой диаграммы за пределы графика) может помочь пользователям легче интерпретировать данные. Осторожнее: выпячивая данные, можно случайно достичь предвзятости к ним.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild6465-6435-4561-b837-393363303663__-__empty__727-8.png)
Оказалось, что такие палитры сделали диаграммы более сложными для анализа и получения информации — а это противоречит самой цели визуализации. И если диаграммы со схожими цветами и небольшим контрастом трудно воспринимать обычному человеку, для людей с неидеальным видением (а таких большинство) это ещё большая проблема. По данным ВОЗ, около 253 миллионов человек живут с ухудшением зрения.
К счастью, есть инструменты для проверки того, как изображения будут восприниматься такими людьми: например, коррекция цветовой слепоты в Photoshop и Illustrator.
Чтобы улучшить читабельность диаграмм:
- Используйте цвета с высокой контрастностью.
- Дополните цвет текстурой или узором для передачи различных типов информации.
- Используйте текст или значки для элементов ярлыков.
- Используйте крупные шрифты (минимум 16 пикселей) и увеличьте контраст между текстом и фоном.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3463-3739-4238-b039-316661373163__-__empty__727-9.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3464-3165-4039-b536-316232356134__-__empty__727-10.png)
Примеры плохой визуализации:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild6439-3935-4361-b635-623665666537__-__empty__728-0.png)
Формы предоставляют несколько элементов управления, которые облегчают сбор данных от пользователей. Использование правильного управления в правильном месте — проблема при их разработке.
Чекбокс (флажок или русская галочка) имеет три состояния: «не выбрано», «выбрано» и «не определено». Последнее состояние — ситуация, когда список подпараметров сгруппирован по родительскому параметру, а подпараметры находятся в выбранных и невыбранных состояниях.
Переключатель (или тумблер) похож на физический переключатель (вроде переключателя света), который позволяет пользователям что-то включить или выключить. Использование тумблера — двухступенчатое действие: выбор и выполнение, тогда как чекбокс — это просто выбор опции, а ее выполнение обычно требует другого элемента управления.
Чтобы понять, какой элемент интерфейса нужно использовать, лучше сконцентрироваться на контексте использования вместо их функции.
Случай 1: Мгновенный ответ
Используйте переключатель, если:
- Требуется мгновенный ответ прикладных настроек без явного действия.
- Для отображения результата требуется настройка вкл/выкл или показать/скрыть.
- Пользователю нужно выполнить мгновенные действия, которые не нуждаются в проверке или подтверждении.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3932-3736-4564-a363-326566633136__-__empty__728-1.png)
Случай 2: подтверждение настроек
Используйте чекбокс, если:
- Прикладные настройки должны быть подтверждены и проверены пользователем до их отправки.
- Определенные параметры требуют действия вроде «Отправить», «ОК», «Далее», «Применить» перед отображением результатов.
- Пользователь должен выполнить дополнительные шаги, чтобы изменения вступили в силу.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3839-3266-4865-a338-333230336565__-__empty__728-2.png)
Случай 3: множественный выбор
Используйте чекбокс, если:
- Доступны несколько опций, и пользователю необходимо выбрать один или несколько параметров.
- Нажатие нескольких тумблеров по очереди и просмотр результатов после каждого щелчка занимает дополнительное время.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3562-3664-4631-b236-306233393966__-__empty__728-3.png)
Случай 4: неопределенное состояние
Используйте чекбокс, если:
- При промежуточном выборе, если несколько подпараметров сгруппированы под родительским параметром. Промежуточное состояние будет отражать, что в списке выбрано несколько подпараметров (но не все).
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3130-3335-4565-b063-616663643664__-__empty__728-4.png)
Случай 5: Ясное визуальное состояние
Используйте чекбокс, если:
- Есть вероятность путаницы с состоянием вкл/выкл для тумблера. Иногда становится трудно понять, что отображает переключатель: состояние или действие.
- Должно быть четкое выбранное или невыбранное состояние.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3064-3365-4761-a364-363830653238__-__empty__728-5.png)
- Предоставляется несколько одиночных выборов да/нет.
- Только один вариант может быть выбран или отменен, и его смысл очевиден.
- Требуется выбрать один параметр, и вы хотите предложить два варианта решения (например, вкл/выкл).
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild6462-6135-4362-b165-343666383230__-__empty__729-0.jpg)
Лукас Бэнтель, партнер и креативный директор Hello Velocity, рассказал, что идея создания Brand New Roman была простой: «Текущая стадия капитализма довольно странная. Кажется, это подходящее время, чтобы попенить над ней!»
Шрифт довольно вырвиглазный, поскольку используются все оригинальные цвета логотипов.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3734-3138-4065-a138-353032383534__-__empty__729-1.jpg)
В одном цвете это смотрится более читабельно. Ниже — несколько примеров названий крупных компаний, написанных этим шрифтом, своеобразный пользовательский Уроборос (змей, поедающий свой хвост).
Было несколько ограничений:
1. Использовать только буквы, которые используются как отдельные элементы брендинга — нельзя было просто вырезать какую-то одну буковку из лого.
2. Сделать шрифт настолько разборчивым, насколько это возможно: в агентстве смешивали и сопоставляли логотипы, чтобы найти набор, который лучше всего коннектился друг с другом.
3. Использовать наиболее узнаваемые текущие логотипы.
4. Сделать потрясающие лигатуры. Попробуйте набрать «Cool cooool cooool».
«Мы нарушили эти правила несколько раз, когда стало почти невозможно им следовать» — признается Бентель. — «Мы искали по всему миру и не могли найти какой-либо узнаваемый, удобочитаемый логотип, где была бы единственная „I“ — в итоге решили вытащить её из классического логотипа IBM из от предшественника iomega от Lenovo».
Результат восхищает. «В конце концов, я думаю, что Brand New Roman получился довольно привлекательным, так что потраченное время и деньги на его разработку имели смысл», — говорит он. «С Brand New Roman мы заставляем работать бренды вместе».
А вот свежие дизайнерские изыски с новым шрифтом:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild6431-3233-4134-b061-643930396265__-__empty__729-10.jpg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3138-6439-4465-b838-623539356532__-__empty__729-15.jpg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild6461-3366-4934-a536-343434383331__-__empty__729-16.jpg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild6562-6436-4233-a364-393236653230__-__empty__729-11.jpg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3135-6365-4533-a638-643038306335__-__empty__729-12.jpg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1710237618/tild3865-3237-4064-b166-633538396631__-__empty__729-13.jpg)