6 заметок с тегом

разбор

Разбор приложения с задачами по математике для умственного счёта

Лет 5-6 назад, я узнал о приложении «Въ умѣ», которое советую, как тренировку для мозга.

Это набор из 1001 задачи для умственного счёта, которые составил Сергей Рачинский. Впервые задачи вышли в виде книги «1001 задача для умственного счёта. Пособие для учителей сельских школ» в 1891 году. Эти задачи решали крестьянские дети начальной и средней школы. При жизни автора книга переиздавалась три раза и стала известна по всей России.

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

Счёт в уме требует неслабой концентрации и тренирует её. Заметил, что 5 лет назад фокусировался лучше и решал быстрее. Сейчас часто сбиваюсь, забываю значения из условия задачи и отвлекаюсь.

Теперь поругаю и переделаю дизайн. Авторы не следуют гайдлайнам, из-за этого ломаются пользовательские привычки. Навигация не очевидна, а кликабельные элементы маленькие.

Каждый раз при запуске пользователю показывают две заставки, экран с единственной кнопкой и экран с выбором из 4 вариантов. Напомню, что главное в приложении — задачи.

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

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

У приложения только горизонтальная ориентация и клавиатура на всю длину экрана, из-за этого неудобно вводить ответы одной рукой, а на телефонах с диагональю больше 4,5 дюймов — невозможно. Основной сценарий у приложения такой: прочитал задачу, решил, ввёл. Для первых двух действий держать телефон двумя руками не нужно, а для третьего из-за горизонтальной ориентации — обязательно. Чтобы помногу раз не опускать и поднимать вторую руку, телефон проще держать двумя руками. А такой хват явно избыточный для этого приложения.

В разделе «О приложении» — бардак с вёрсткой:

В списке задачи разбиты по 70 на экран — не самое удобное число, чтобы на него делить, когда хочешь добраться к 495 задаче.

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

Отдельная проблема — кнопка «ѣ». Понять, что за ней невозможно. А там живёт встроенная покупка:

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

Теперь — моя версия ключевых экранов. Ей, конечно, не хватает тестирования. Предлагайте улучшения.

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

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

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

Рассказ о приложении уместил на один экран с прокруткой:

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

Собрал всё это в 2-минутный ролик:

Если хотите, чтобы помог с этим или другим приложением, пишите на почту kirill@kipo.name. Если интересны детали, задавайте вопросы (лучше тоже на почту).

P. S. Разбор визуализаций пока на паузе, вместо них планирую писать разборы похожие на этот.

15 сентября   задача   математика   приложение   разбор

Разбор визуализации о смертности от огнестрела

Сегодня разберу работу Бена Кассельмана, Метью Козлина и Рубена Фишера-Баума для Файв Тсёти Эйт о смертности от огнестрельного оружия в США.

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

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

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

«Смертность от огнестрельного оружия» получила золотую медаль крупнейшего международного конкурса инфографики «Малофей». По-моему, оценка завышена.

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

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

Моя версия — вариация на тему, потому что я не знаю задачи авторов. Свою сформулировал так: «как сделать сравнение выборок интересным и увлечь больше зрителей?»

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

Потом меняю работу фильтров так, чтобы всегда было видно причины смерти в выборке и состав оставшейся части. Использую силу каркаса: как не настраивай выборки, число погибших останется, поменяются только цвета. Так почему бы не покрасить точки антивыборки, повысив информативность? Например, 1) разделили по полу, 2) потом выбрали «белых» старше 35 лет, 3) убрали деление по полу:

Получается, один жест настаивает несколько выборок, которые интереснее сравнивать.

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

2017   визуализация данных   разбор

Разбор графиков с реальными объектами

В этот раз снова посмотрим на приём.

Работа Кевина Квили и Марго Сенгер-Кац для Нью-Йорк Таймс о пользе продуктов с точки зрения американцев и диетологов

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

Теперь, когда хлопья нас увлекли, интересно разобрать каркас — основу графика.
У него две оси:

  • по иксу отложен процент всех американцев, которые считают, что продукт полезен,
  • по игреку — процент диетологов, которые считают, что продукт полезен.

Сырые данные в таблице пришли бы в трёх колонках: продукты, мнение всех, мнение диетологов. В строках 1-й колонки — продукт, во 2-й и 3-й — оценки. И глядя на эту таблицу не всегда приходит в голову, что один и тот же параметр — оценки — можно разместить на перпендикулярных осях. Кажется, что их нужно ставить столбиками рядом.

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

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

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

График соотношения массы мозга и тела, который переоформил Эдвард Тафти для своей книги «Beautiful Evidence»

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

Визуализация характеристик танков из игры «Ворлд оф тенкс», которую сделали в Лабораторнии данных

В этом примере как раз соблюдены пропорции танков. Ещё примечательно, что информацию могут нести не только сами объекты, но и их части:

«Истории флагов» датского агентства «Фердио»

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

Диаграмма длиннейших рек и высочайших гор 1854 года

Тут автор идёт дальше и собирает из объектов столбчатые диаграммы, подчёркивая их природу:

Работа Тима Меко, Денисе Лу, Лазаро Гамио и Криса Алкантары для Вашингтон Пост о олимпийском инвентаре

Чтобы показать соотношения объектов, авторы используют прокрутку. Периодически напоминая о масштабе шкалами и объектами из повседневной жизни — коробкой с пиццей или самолётом:

Концентрирую: изображения реальных объектов делают визуализации увлекательнее и информативнее.

Предлагаю собрать в комментариях объекты и их свойства, которым под силу представлять самих себя. Я начну:

  • техника (размер, размер и форма видимых деталей),
  • деревья (высота, форма кроны, размер и форма листьев),
  • мебель (размер и форма),
  • смартфоны (размер, диагональ экрана),
  • здания (высота, форма, площадь фундамента, площадь остекления фасада)...

Следующий разбор — в мае, если успею.

P. S. Читайте Таню Бибикову о визуальных атомах: 1-я часть, 2-я и 3-я.

2017   визуализация данных   разбор

Разбор изохронов

В этот раз разберу нe отдельную работу, а прием.

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

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

Одно из применений хороплета — обозначить цветом время. Шаги получившейся шкалы называют изохронами. 1-м применением изохронов считают карту Френсиса Гальтона 1881 года:

Следующие примеры показывают возможности изохронов.

Рик Ноак и Лазаро Гамио визуализировали развитость сети пассажирских железных дорог в Европе для Вашингтон Пост:

В этом примере минимумом выразительных средств (6 оттенков одного цвета на контурной карте), которые легко считать. Видно, что в западной Европе и Скандинавии сообщение лучше, чем на востоке. А в Прибалтике и на востоке бывшей Югославии ситуация особенно грустная.

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

Работа Бетси Мейсона для Нешинал Джиографик о плотности автодорог на Земле:

Тут много цветов:

  • отдельный бордовый цвет для зон с дорогами, между которыми по 1 км.
  • и градиент от оранжевого к синему для зон с 1-й дорогой на площадь от 0,01 до 4 816 087,1 км².

Судя по промежуточным значениям, шкала у градиента логарифмическая шкала. Про шкалы лучше написать отдельно, а пока — страничка со сравнением шкал.

На карте хорошо видно, что высокая плотность дорог в Европе, Японии и на востоке США. На фоне базового бездорожья отчётливо выделяются города в Африке, Южной Америке, Австралии и Канаде. Интересно, что при сравнимом климате, в Скандинавии дорог намного больше, чем в России, Канаде и на Аляске.

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

Проект московской студии «Урбика» о пешей и автомобильной доступность в мегаполисах, названный в честь Гальтона:

Эта работа похожа на 1-й пример, но гораздо функциональнее благодаря интерактивности. Два оттенка голубого показывают, куда можно дойти за 10 и 20 минут из текущего положения. Ещё есть автомобильный режим, который, увы, не учитывает пробки.

Следующий разбор — в апреле.

Разбор визуализации о партиях, доминирующих в разных штатах

Сегодня разберу работу Ренди Йеипа, Стюарта Томпсона и Вилла Уэлша из Уолл Стрит Джорнал. Посмотрим, как менялось отношение жителей США к партиям с 1980 по 2012:

Визуализация состоит из 51 мини-графика, расположенные на регулярной сетке. Каждый график отражает ситуацию в одном штате. Вместе они образуют «регулярную» карту США. Авторы используют особенность данных — равномерную нарезку штатов. Из России или Европы такую карту сделать гораздо сложнее. Этот приём Дональд Норман назвал естественным соответствием. Он ускоряет поиск. Сначала считывается общая форма карты страны. А где какие штаты читатели Уолл Стрит Джорнала более-менее знают. Когда понятно, что перед глазами карта, интересующий штат легко найти в предсказуемом месте.

Реальная карта для сравнения. Смотрите, как «регулярная» карта помогает сохранить компактность, оставив Аляску и Гавайи на местах:

Посмотрим на сами графики. У них — одинаковые оси с одинаковыми шагами, что позволяет сравнивать штаты:

Индекс считают немного замысловато. Берут данные последней пары президентских выборов. И сравнивают среднюю долю голосов за кандидата от той партии, которая набрала больше голосов в штате, и долю голосов той же партии для всей страны. Получаются значения от 0 до 20-30 с буквой D или R. Ноль говорит, что штат голосует, как страна в целом. А D+15, что доля голосов за Демократов на 15% больше, чем в среднем по стране.

У оси игрек нет шкалы, что затрудняет точное сравнение. Это приемлемо, когда задача — сравнить общие векторы. Положительные значения игрека (выше ноля) показывают доминирование Республиканцев, отрицательные — Демократов. Об этом говорят цвета традиционные для партий. Ниже в статье есть легенда, но интересующимся политикой цвета понятны и без неё:

Ещё заметил, что авторы используют не привычные мне сокращения названий штатов. Гугл и другие пишут аббревиатуры штатов по стандарту ИСО. Здесь же — Стайлбук Ассошиейтед Пресс. По-моему, такой формат понятнее 2-буквенного ИСО.

Теперь о визуальной части. Крупный заголовок и карта вместе выглядят эффектно — 1-е впечатление от статьи приятное:

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

Переделываю, округляя столбики до пикселей и уменьшая площадь белого. Умещаю почти полные названия. Легенду селю в Мэне. Добавляю максимальные значения игрека и точные значения при наведении на столбик:

Следующий разбор — в марте.

Разбор визуализации о росте и весе игроков в американский футбол

В Лаборатории данных мы визуализируем данные: работаем над проектами, создаём методологию, проводим курс. Для вдохновения изучаем чужие визуализации, а лучшие публикуем в рубрике #Δλlikes.

Раньше я плохо отличал стоящие работы от проходных. И пропускал изящные решения, потому что не знал, куда смотреть. За полтора года в лаборатории подучился видеть важное. В 2017-м буду разбирать примеры и рассказывать о их плюсах и минусах. Формат намечаю максимально свободный, развлекательный.

Сегодня — работа Ноя Вельтмана о росте и весе игроков НФЛ США:

Тут график с двумя осями:

  • по иксу — вес в фунтах (примерно от 73 до 154 кг),
  • по игреку — рост в футах и дюймах (примерно от 1,6 до 2 м).

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

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

Если взять крайние 1920-й и 2014-й, видно, что игроки в целом подросли и потяжелели. Видно, что распределение стало «размазанное» — стало больше игроков с разными параметрами. Ещё появились группы, скорее всего, это специализация (защита, нападение и пр.).

Но как это происходило по двум кадрам не видно. Анимация проявляет скорость изменений. С 1935 по 1945 — нет больших изменений, предположу, что мешала война. Группировка начинается около 75-го. А с 1990 начинается «размазывание».

Внешне график простой. И это плюс: меньше деталей ускоряют погружение. Неподготовленному зрителю проще понять суть, и тогда появляется шанс, что его заинтересуют детали.

Графическая составляющая у проекта слабая, поэтому переработал её на свой вкус. Убрал шумящую сетку, добавил информативность шкале времени.

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