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

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

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

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

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

Инфографика

Позднее Ctrl + ↑

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

Месяц назад я вас звал на курс, который проходил с 7 по 11 февраля. Теперь позову на точно такой же, только в марте — вдруг вы на тот не успели записаться.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот:

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

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

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

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

Вот:

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

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

 26   2014   Википедия   инфографика   политика   чтиво
Ранее Ctrl + ↓