Ланч-тайм 197: краткий перевод свежих статей о digital

Содержание

• Визуализация данных — лучшие инструменты и практики
• Чекбокс vs Переключатель: 7 примеров использования в формах
• Красочный шрифт из брендовых логотипов

#727. Визуализация данных — лучшие инструменты и практики

Data Visualization — Best Practices and Foundations

По данным IBM, каждый день создается 2,5 квинтиллиона байтов данных — сейчас каждую секунду циркулирует больше данных, чем всего их хранилось 20 лет.

Чем больше электронных устройств, тем больше объём данных, и он будет продолжать расти экспоненциально. Есть предположения, что к 2025 году будет получено 163 зеттабайтов (163 триллиона гигабайтов) данных.

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

Но для человеческого мозга это всего лишь какие-то цифры — чтобы понять любое число, большее пяти, нужны абстракции и аналогии. Большие данные бесполезны, если их невозможно понять и сделать удобными. Вот тут-то и пригодится визуализация.

Когда использовать визуализацию

Заморочиться с визуализацией стоит тогда, когда понимание больших наборов данных жизненно необходимо для принятия обоснованного решения — будь то в бизнесе, технологии, науке или в любой другой области.

Графически представленные данные особенно полезны для лиц, принимающих решения, — они оперируют большим объёмом информации, и без визуализации её очень сложно воспринимать и использовать.

Принципы

Визуализация данных должна отвечать жизненно важным стратегическим вопросам, обеспечивать реальную ценность и помогать решать реальные проблемы.

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

Знайте аудиторию

Визуализация данных бесполезна, если ориентирована на непонятную аудиторию. Она должна учитывать предыдущий опыт аудитории и быть лёгкой и быстрой для восприятия и обработки данных. Стоит учитывать, насколько аудитория хорошо знакома с основными принципами показанных данных и есть ли у неё за плечами опыт STEM (наука, технология, инженерия и математика — термин, используемый для объединения этих академических дисциплин), где диаграммы и графики — обычное дело.

Правильные инструменты для правильного отображения данных

Типов диаграмм существует множество — выбор зависит от предпочтений и формата самих данных. Правильный график не только облегчит их понимание, но и преподнесет информацию наиболее точно. Чтобы сделать правильный выбор, подумайте, какой тип данных нужно отразить, и кому вы его адресуете.

Наиболее популярные типы диаграмм:

1. Линейные графики. Используются для сравнения значений в течение времени и отлично подходят для отображения больших и малых изменений. Они также могут использоваться для сравнения изменений с более чем одной группой данных.

2. Столбчатые диаграммы. Подходят для сравнения количественных данных из нескольких категорий. Также могут использоваться для отслеживания изменений с течением времени, но лучше всё-таки использовать их, только если эти изменения значительны.

3. Диаграммы рассеяния. Подходят для отображения значений для двух переменных для набора данных и для изучения отношений между двумя массивами.

4. Круговые диаграммы. Используются для отображения частей целого. Для изменений во времени не подходят.

Организованность и согласованность

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

Иерархия данных показывает различные уровни информации, помогая принимать решения. Если отсортировать значения от наибольших к наименьшим, можно подчеркнуть наибольшие значения или отобразить самую важную категорию.

Даже порядок отображения данных, используемые цвета (например, яркие цвета для наиболее важных точек и серые для базовых) и размер различных элементов диаграммы (например, расширение определённых фрагментов круговой диаграммы за пределы графика) может помочь пользователям легче интерпретировать данные. Осторожнее: выпячивая данные, можно случайно достичь предвзятости к ним.

Содержательность

Цвет широко используется для представления и дифференциации информации. А как говорят недавние исследования, он также является ключевым фактором в пользовательских решениях. В них рассматривалось, как люди реагируют на различные цветовые схемы, и предполагалось, что диаграммы в нежных цветах будут более привлекательными.

Оказалось, что такие палитры сделали диаграммы более сложными для анализа и получения информации — а это противоречит самой цели визуализации. И если диаграммы со схожими цветами и небольшим контрастом трудно воспринимать обычному человеку, для людей с неидеальным ви́дением (а таких большинство) это ещё большая проблема. По данным ВОЗ, около 253 миллионов человек живут с ухудшением зрения.

К счастью, есть инструменты для проверки того, как изображения будут восприниматься такими людьми: например, коррекция цветовой слепоты в Photoshop и Illustrator.

Чтобы улучшить читабельность диаграмм:

• Используйте цвета с высокой контрастностью.
• Дополните цвет текстурой или узором для передачи различных типов информации.
• Используйте текст или значки для элементов ярлыков.
• Используйте крупные шрифты (минимум 16 пикселей) и увеличьте контраст между текстом и фоном.

Выбор шрифта может повлиять на разборчивость текста, усиливая или снижая восприятие мысли. Из-за этого лучше использовать стандартные основные шрифты с засечками или без.

Не искажайте данные

Избегайте сомнительных визуализаций, которые отражают данные неточно, — например, круговых 3D-диаграмм.

Визуализация данных может привести зрителей к определённым выводам, не искажая самих данных. Она особенно полезна при создании инфографики, используемой для поддержки конкретного вывода, а не просто для передачи данных. В этом случае можно использовать выбор цвета и обращение к конкретным точкам данных, не создавая графики, которая может вводить в заблуждение.

Примеры плохой визуализации:

Примеры отличной визуализации:

Вывод: вместо отчётов на 100500 страниц лучше нарисуйте график или диаграмму (или даже объедините их в крутую инфографику) — и не придётся ничего рассказывать и доказывать, читатели сделают выводы самостоятельно.
Вы сэкономили 6 минут.

#728. Чекбокс vs Переключатель: 7 примеров использования в формах

Checkbox vs Toggle Switch: 7 Use-Cases of Forms Design

Формы предоставляют несколько элементов управления, которые облегчают сбор данных от пользователей. Использование правильного управления в правильном месте — проблема при их разработке.

Чекбокс (флажок или русская галочка) имеет три состояния: «не выбрано», «выбрано» и «не определено». Последнее состояние — ситуация, когда список подпараметров сгруппирован по родительскому параметру, а подпараметры находятся в выбранных и невыбранных состояниях. 

Переключатель (или тумблер) похож на физический переключатель (вроде переключателя света), который позволяет пользователям что-то включить или выключить. Использование тумблера — двухступенчатое действие: выбор и выполнение, тогда как чекбокс — это просто выбор опции, а её выполнение обычно требует другого элемента управления.

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

Случай 1: Мгновенный ответ

Используйте переключатель, если:

• Требуется мгновенный ответ прикладных настроек без явного действия.
  
• Для отображения результата требуется настройка вкл/выкл или показать/скрыть.
  
• Пользователю нужно выполнить мгновенные действия, которые не нуждаются в проверке или подтверждении.
  

Параметры, требующие мгновенного ответа, лучше всего выбирать с помощью тумблера

Случай 2: подтверждение настроек

Используйте чекбокс, если:

• Прикладные настройки должны быть подтверждены и проверены пользователем до их отправки.
  
• Определённые параметры требуют действия вроде «Отправить», «ОК», «Далее», «Применить» перед отображением результатов.
  
• Пользователь должен выполнить дополнительные шаги, чтобы изменения вступили в силу.
  

Чекбоксы предпочтительны, если для применения настроек требуется явное действие

Случай 3: множественный выбор

Используйте чекбокс, если:

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

Выбор нескольких опций в списке удобнее делать с помощью флажков

Случай 4: неопределённое состояние

Используйте чекбокс, если:

• При промежуточном выборе, если несколько подпараметров сгруппированы под родительским параметром. Промежуточное состояние будет отражать, что в списке выбрано несколько подпараметров (но не все).

Определённое состояние лучше всего показывать с помощью флажка

Случай 5: ясное визуальное состояние

Используйте чекбокс, если:

• Есть вероятность путаницы с состоянием вкл/выкл для тумблера. Иногда становится трудно понять, что отображает переключатель: состояние или действие.
  
• Должно быть чёткое выбранное или невыбранное состояние.
  

Иногда переключатель тумблера чётко не указывает, является ли это состоянием или действием

Случай 6: Связанные предметы

Используйте чекбокс, если пользователь должен выбрать опцию (и) из списка связанных элементов.

Чтобы выбрать связанные элементы в списке, используйте чекбоксы

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

Независимые элементы используют переключатели для выбора

Случай 7: Одиночный вариант

Используйте чекбокс, если:

• Предоставляется несколько одиночных выборов да/нет.
  
• Только один вариант может быть выбран или отменен, и его смысл очевиден.

Независимые элементы используют переключатели для выбора

Используйте тумблер, если:

• Требуется выбрать один параметр, и вы хотите предложить два варианта решения (например, вкл/выкл).

Одиночное решение о вкл/выкл понятнее с помощью тумблера

Вывод: длинные формы могут быть утомительны для пользователей, особенно если дизайнер напутал с флажками и тумблерами. Думайте о контексте, потому что по смыслу пойди разберись, что там нужно поставить :–)
Вы сэкономили 5 минут.

#729. Красочный шрифт из брендовых логотипов

This Colorful New Font Is Made Entirely of Brand Logos

Если вы полностью, безвозвратно перевернуты на брендах, ловите — в диджитал-агентстве Hello Velocity разработали Brand New Roman, шрифт из 76 логотипов фирменных брендов. Проект в стиле идиократии отчасти пародия, но шрифт можно скачать и использовать, как хочется. Дизайнеры уже позабавились.

Лукас Бэнтель, партнер и креативный директор Hello Velocity, рассказал, что идея создания Brand New Roman была простой: «Текущая стадия капитализма довольно странная. Кажется, это подходящее время, чтобы попенить над ней!»

Шрифт довольно вырвиглазный, поскольку используются все оригинальные цвета логотипов.

«Сейчас бренды очень вездесущи и жадны до внимания. Brand New Roman интересен тем, что если смешать все бренды, те сразу теряют всю свою мощь. Гипербрендовость скрадывает тонкие смыслы каждого бренда, которые каждый символ несет по отдельности» — говорит Лукас Бэнтель.

В одном цвете это смотрится более читабельно. Ниже — несколько примеров названий крупных компаний, написанных этим шрифтом, своеобразный пользовательский Уроборос (змей, поедающий свой хвост).

По словам Бэнтеля, создание шрифта было трудоемким процессом: «Основная работа заключалась в поиске высококачественных векторных цветных и монохромных логотипов для каждого из брендов. Некоторые из них легко дают доступ к своим лого и брендингу, но большинство — нет».

Было несколько ограничений:

1. Использовать только буквы, которые используются как отдельные элементы брендинга — нельзя было просто вырезать какую-то одну буковку из лого.

2. Сделать шрифт настолько разборчивым, насколько это возможно: в агентстве смешивали и сопоставляли логотипы, чтобы найти набор, который лучше всего коннектился друг с другом.

3. Использовать наиболее узнаваемые текущие логотипы.

4. Сделать потрясающие лигатуры. Попробуйте набрать «Cool cooool cooool».

«Мы нарушили эти правила несколько раз, когда стало почти невозможно им следовать» — признается Бентель. — «Мы искали по всему миру и не могли найти какой-либо узнаваемый, удобочитаемый логотип, где была бы единственная “i” — в итоге решили вытащить её из классического логотипа IBM от предшественника iomega от Lenovo».

Результат восхищает. «В конце концов, я думаю, что Brand New Roman получился довольно привлекательным, так что потраченное время и деньги на его разработку имели смысл», — говорит он. «С Brand New Roman мы заставляем работать бренды вместе».

А вот свежие дизайнерские изыски с новым шрифтом:

Вывод: ещё какие-то выводы нужны?! Скачивайте шрифт и стряпайте открытки своим друзьям, ведь это прикольно :–)
Вы сэкономили 3 минуты.

Кажется, благодаря этому ланчу у вас появилось сразу несколько забав на эти выходные: потренироваться строить диаграммы, включать и выключать всё подряд, чтобы понять принцип тумблеров и чекбоксов и, конечно, скачать ну очень брендовый шрифт :–) Энджой!

Читать по теме: Ланч-тайм: краткий перевод свежих статей о Digital (все выпуски)