Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Инфографика

Позднее Ctrl + ↑

Эксперимент с размытием внутренностей гистограммы

Вот график ежедневной посещаемости моего сайта за год по версии Яндекс.Метрики:

Эксперимент с размытием внутренностей гистограммы

В правой стороне как будто бы в среднем столбики повыше стали, но может это только так кажется из-за парочки отдельных высоких столбиков? Яндекс даёт смотреть посещаемость не только по дням, но и по неделям или месяцам, но с ними получается примерно такая же рваная картина — трудно увидеть, наметилась ли какая-нибудь тенденция, скажем.

Иногда поверх гистограмм рисуют кривую, изображающую «тренд», но непонятно, как она построена, это напоминает шарлатанство. Трендов в природе не существует, это всегда некая интерпретация фактических данных. И когда нарисована кривая, посчитанная по невидимой формуле, получается, что интерпретацию за тебя сделал кто-то другой. Хотелось что-то сделать с графиком такое, чтобы он остался честным, но тенденцию стало видно без введения вымышленных чисел.

Сначала я попробовал покрасить каждый столбик цветом в зависимости от его собственной высоты. Идея была в том, что если в какой-то части будет больше цветных столбиков, то там вся зона станет «горячее»:

Эксперимент с размытием внутренностей гистограммы

Теперь всю картину под графиком можно размывать с любым радиусом, чтобы увидеть менее или более долгосрочные тенденции:

Эксперимент с размытием внутренностей гистограммы

Если размыть побольше, видно, что правая часть всё равно остаётся заметно более тёплой, чем центральная:

Эксперимент с размытием внутренностей гистограммы

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

Как же избавиться от этой прозрачности, не сочиняя ничего? Слева легко — нужно просто взять несколько ещё более ранних чисел:

Эксперимент с размытием внутренностей гистограммы

Но справа это сделать невозможно, ведь никто не знает, какая будет посещаемость в будущем. Получается, этот уход в прозрачность — это и есть правда, ничего с ней делать не нужно. Она показывает, что чем ближе к настоящему, тем меньше у нас данных, чтобы говорить о каком-либо «тренде». Если размыть ещё сильнее, эта неопределённость становится больше:

Эксперимент с размытием внутренностей гистограммы

Разумеется, я понятия не имею, что там произошло в районе левого пика, потому что Яндекс.Метрика тупо графики рисует, а какой там за ними смысл — ей по-барабану.

 35   2015   дизайн   инфографика

Курс о пользовательском интерфейсе и представлении информации 7—11 февраля

Приглашаю на четырёхдневный курс «Пользовательский интерфейс и представление информации», который пройдёт в Москве, в нашем «Коворкафе» на Флаконе с 7 по 11 февраля. Это наиболее крутой курс из всех дизайнерских курсов: спросите или почитайте отзывы наших участников.

Курс о пользовательском интерфейсе и представлении информации 7—11 февраля

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

Запись открыта до этого воскресенья, 1 февраля.

 9   2015   Бюро   дизайн   инфографика   курсы   пользовательский интерфейс

Биатлонтайм теперь показывает ход гонки

В новом сезоне мы с Александром Банкиным сделали на Биатлонтайме новую фишку. Теперь на сайте есть не только результаты гонок, но и ход (пока без эстафет).

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

Биатлонтайм теперь показывает ход гонки

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

Конечно, участники подсвечиваются и при наведении:

Биатлонтайм теперь показывает ход гонки

Если ваши кумиры не попали в группу «стрелочников» — можно их нащёлкать, чтобы они светились и без наведения:

Биатлонтайм теперь показывает ход гонки

Обычно в экран всё не влезает в ширину — работает и скролинг, и таскание, кому как удобнее. Но у кого влезает — тем вообще песня:

Биатлонтайм теперь показывает ход гонки

На сайте есть результаты с 2005 года, со всем этим мясом.

Расширенный курс о пользовательском интерфейсе и представлении информации 29 ноября — 3 декабря

Наш классический курс «Пользовательский интерфейс и представление информации» в сентябре из трёхдневного стал четырёхдневным. Потому что мы всё время дополняем его темами и примерами.

Расширенный курс о пользовательском интерфейсе и представлении информации 29 ноября —3 декабря

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

Приглашаю на четырёхдневный курс «Пользовательский интерфейс и представление информации», который пройдёт в Москве, в нашем «Коворкафе» на Флаконе с 29 ноября по 3 декабря. Это наиболее крутой курс из всех дизайнерских курсов: спросите или почитайте отзывы наших участников.

Запись открыта до этого воскресенья, 23 ноября.

 8   2014   Бюро   дизайн   инфографика   курсы   пользовательский интерфейс
 11   2014   дизайн   инфографика   проекты   релиз   снукер

Оптимальный вертикальный масштаб графика

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

Оптимальный вертикальный масштаб графика

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

Когда я показываю это на курсе, иногда звучит кажущееся логичным возражение, что, сжимая график по вертикали, мы теряем данные, снижаем разрешение.

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

Левый график лишает читателя возможности сравнивать характер колебаний: все они выглядят резкими, нет ни одного пологого участка. Да, в нём больше разрешение по вертикали, но диапазон возможных углов наклона к горизонту используется неоптимально — почти все они превышают 60°.

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

 138   2014   дизайн   инфографика

Расширенный курс о пользовательском интерфейсе и представлении информации 6—10 сентября

Классический трёхдневный курс Артёма Горбунова «Пользовательский интерфейс и представление информации» я веду больше двух лет. Мы всё это время постепенно расширяем его.

Расширенный курс о пользовательском интерфейсе и представлении информации 6—10 сентября

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

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

Приглашаю на расширенный, четырёхдневный курс «Пользовательский интерфейс и представление информации», который пройдёт в Москве, в нашем «Коворкафе» на Флаконе 6, 7, 8 и 10 сентября. Это наиболее крутой курс из всех дизайнерских курсов: спросите или почитайте отзывы наших участников. Запись открыта до воскресенья, 31 августа (осталось четыре дня).

 9   2014   Бюро   дизайн   инфографика   курсы   пользовательский интерфейс

Что почитать на выходных — 98

Вот:

  1. An interactive exploration of Boston’s subway system. Обалденные интерактивные визуализации работы бостонского метро, интегрированные в текст, объясняющий их и рассказывающий о выводах из них. Дизайнерская журналистика такая.
  2. Visualizing Algorithms. А тут крутейшие визуализации алгоритмов, тоже с текстом. Прям ах.
  3. Относительно лёгкий способ определить качество кириллицы в шрифте.
  4. A Closer Look at the Photos «Adjustments» Bar. Чувак взял эпловский скриншот будущего приложения «Фотос» для Мака и разобрал по косточкам.

Однажды в Википедии: Диаграмма Вороного

 71   2014   Википедия   инфографика   метро   программирование   софт   чтиво   шрифты   Эпл

Что почитать на выходных — 87

Вот:

  1. The Arsenal. Офигенная страница «Нью-Йорк-Таймса» со всем олимпийским снаряжением. Вообще, смотрите всю их серию про Сочи, хотя там скорее не почитать, а поглазеть. Ну да пофиг.
  2. 74,476 Reasons You Should Always Get The Bigger Pizza. Чувак сравнил удельную цену 74 тысяч кусков пиццы и пришёл к неутешительным выводам.
  3. Про Украину. Кац всё правильно говорит.

Однажды в Википедии: Feynman point

 15   2014   Википедия   инфографика   политика   чтиво

Приложение про девятую симфонию Бетховена

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

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

Симфония записана в исполнении четырёх оркестров. Между исполнениями можно переключаться прямо во время воспроизведения (слева). На схеме сцены в центре динамически отображается, какие инструменты играют в какой момент. На полосе под схемой — короткий текстовый комментарий к играющему фрагменту (меняется каждые 2-3 секунды). Видите, слово фуга подчёркнуто пунктирчиком? По тапу появляется объяснение термина. В левом нижнем углу схемы — переключалка между ней и более подробным текстовым описанием. Справа — переключение в видеозапись играющего оркестра (музыка не прекращает играть).

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

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

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

Это просто чудо, обязательно установите себе.

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

 40   2013   Айпад   дизайн   инфографика   классика   музыка   софт
Ранее Ctrl + ↓