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

дизайн

Выбор школы в Чикаго

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

https://gabriellelamarrlemee.github.io/thesis-simulation/

Если ребенок «белый», то у него могут быть сложности со сверстниками в школе: только 17 % детей в Чикаго — белые, 35 % темнокожие, и 43 % — латиноамериканцы.

Час назад   визуализация   дизайн   интерфейс   Чикаго

Визуализация головного мозга для исследований

Инструмент для визуализации головного мозга для исследований:
http://andrewgelman.com/2018/05/18/awesome-data-visualization-tool-brain-research/

Обалденно. Трехмерная схема нервных волокон с подсветкой групп и настройкой прозрачности, и еще куча крутых штук:
https://yeatmanlab.github.io/AFQBrowser-demo/

Час назад   визуализация   дизайн   мозг   нейроны

Тач-интерфейс и временные ряды

Несколько подходов для организации пользовательского взаимодействия с графиками на тач-интерфейсе опубликовали на сайте Университета Баухауза в Веймаре.

Страница:
https://www.uni-weimar.de/de/medien/professuren/medieninformatik/vr/research/infovis/touch-the-time/

Видео:
https://www.uni-weimar.de/projekte/vr-scratch/videos/TTT.mp4

Подходы не новые, но хуже они от этого не становятся.

Синхронизация разных панелей. при уточнении времени на одной из панелей выбранное время подсвечивается и на остальных:

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

А вот кое-что поинтереснее.
Выделение диапазона для просмотра на отдельной панели:

В видеоролике перетаскивают кусок графика с одной панели на другую, круто:

Пересечение строк данных и диапазона:

Еще несколько технически интересных штук, но сомнительных с точки зрения визуализации.

Растягивание панели. Бывает полезно при сборке панели, но для пользователей сомнительно — искажает привычный масштаб:

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

Не очень универсальная штука, есть же нормальный зум. Но выглядит интересно.
Гляньте там видео:
https://www.uni-weimar.de/projekte/vr-scratch/videos/TTT.mp4

15 мая   визуализация   график   дизайн   интерфейс   тач
15 мая   визуализация   дизайн   Лондон   мониторинг

Беседа о разборке Теслы Модели 3

В компании Манро (Munro) разобрали Теслу Модель 3 и написали отчет о качестве сборки. Разобрали всё до деталей. Изучили каждую деталь. Сколько стоит деталь. Качество детали. Качество сборки. Общее качество механики и электроники.

Собрали информацию в огромную схему:

По каждому пункту схемы:
— материал,
— поставщик,
— вес детали,
— цена,
— качество.

Сэнди Манро (Sandy Munro) говорит, что с точки зрения механики качество автомобиля ниже среднего. Зазоры пляшут.

Но самое интересное дальше. Электроника в Тесле по плотности и качеству на уровне военной техники. Превосходная. Чуваки в шоке от плотности элементов и качества.

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

Обсуждают роботизацию. Робот — это однорукий слепой идиот! Blind one-handed Idiot, BOB :-)

Интересные моменты.

1:08:00
— Что вы делаете с разобранными деталями?
— Думали продавать, но в итоге решили, что проще просто выбрасывать! Собирать обратно не хотелось: критически важна надежность сборки.

Сложно задизайнить деталь для производства одноруким слепым идиотом. К цене добавляются: + цена робота, + цена настройки, + обслуживание. Так цена может дорасти до 10Х. Это цена роботизации. Нужно многое продумать, прежде чем ставить роботов. Дженерал Моторс прошла через это: у них было дофига роботов, которые затем оказались на складе в упаковке. Почему? Просто потому что автомобиль не был задизайнен для роботов!

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

1:09:00
Хотя с механикой есть проблемы, электроника — ВАУ! А механика подтянется. У конкурентов будут проблемы с достижением такого уровня электроники. Потому что вы не можете просто отправить своих ребят и сказать, давайте, закатайте рукава и сделайте. Это не так просто!

1:11:00
Вопрос по телефону про автоматизацию.
Ответ: если вы хотите автоматизировать, нужно дизайнить на другом уровне.

Вокруг робота нужно обеспечить пространство.

Роботы годятся для 3Д:
dirty, dangerous, drudgery (грязно, опасно, нудно).

1:15:00
— Как вы бы сравнили качество Теслы М3 с другими автомобилями?
— Я бы сравнил с машинами Киа 90-х годов. Дешевая машина, торопились на рынок, кривые щели в кузовах. Но затем Киа хорошо рванули вперед.

1:17:00
— Как добиться качества на автоматизации?
— Когда вы планируете производство, вы смотрите, какие погрешности есть на этапах. Контролируете каждый этап.

1:27:00
Про синхронность автоматизированного производства. Тесла хочет, чтобы работали полностью синхронные конвейеры. Но мы видели на фабрике по производству ручек, как в случае неполадки пол заваливается сотнями тысяч шариковых ручек, и их убирают лопатами, это впечатляет.

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

15 мая   автоматизация   дизайн   Манро   роботы   Тесла

Графический интерфейс для задач марсохода

В Лаборатории интерактивных данных (Interactive Data Lab) рассказали, как делали графический интерфейс для марсохода для определения оптимальных условий передачи данных по радиосвязи. Заказчик — Лаборатория реактивного движения НАСА (NASA Jet Propulsion Laboratory).

https://idl.cs.washington.edu/papers/meridian/

ПДФ публикации:
https://idl.cs.washington.edu/files/2018-Meridian-CHI.pdf

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

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

Было бы интересно посмотреть кликабельный прототип, но опубликовали только пару скриншотов.

Редкий случай, когда оправдано применение круговой диаграммы, полярных координат:

Из телеграм-канала https://t.me/sergeykashin
19 апреля 2018

22 апреля   визуализация   дизайн   иллюстратор данных

Повернули систему координат

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

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

В таком ракурсе наверху оказываются «бедные, но счастливые»:

Источник:
http://www.visualcapitalist.com/relationship-money-happiness/#comment-3830619155

В конце страницы смешной комментарий:

ag303 • 12 hours ago
I find the angled presentation of this graphic confusing. It implies that the variables represented on the x and y axes are not the usual vertical and horizontal, but in fact they are, right? X is wealth and Y is happiness? Seems to me the More satisfied arrow should really point up, and the Richer arrow should point to the right.

Люди думают, что нужно показывать данные так как они думают, а не как-то иначе. На самом деле данные можно показывать как угодно. Вообще всё можно показывать как угодно. Исходя из цели и кучи разных причин. Автор исходит из того, какая у него цель. Это может быть просто желание.

22 апреля   визуализация   дизайн   цель

Параллельное отображение относительно одной даты

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

Перейдите по ссылке и подвигайте мышью над графиком:
https://beta.observablehq.com/@mbostock/d3-index-chart

22 апреля   D3   Observable   визуализация   дизайн

О дизайне презентации МИДа Британии

На сайте «Коммерсанта»:
https://www.kommersant.ru/doc/3586195

В презентации всего 6 страниц.
https://www.kommersant.ru/docs/2018/UK_Briefing.pdf

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

Вот такой слайд, например:

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

Форма шестиугольников ничего не обозначает.

Попытались этим показать «паттерн», но вписали совершенно разные ситуации разной степени давности с разной степенью определенности и доказанности.

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

Другие слайды тоже выглядят сомнительно. Например, вот перечислены события по порядку, но не указаны запросы со стороны России. Это выборочное отображение фактов:

Ответы Лаврова на вопросы СМИ:
http://www.mid.ru/ru/foreign_policy/news/-/asset_publisher/cKNonkJE02Bw/content/id/3118300
в том числе, о запросах со стороны России.

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

По такому случаю вспоминаем классику!
Cognitive Style of PowerPoint: Pitching Out Corrupts Within
(Edward Tufte)
https://www.edwardtufte.com/tufte/books_pp

Из телеграм-канала https://t.me/sergeykashin
28 марта 2018

22 апреля   дизайн   Пауэрпоинт   политика   презентация   Тафти

Визуализация бросков в баскетболе

Веб-виар (Web VR):
https://bball.surge.sh/golden-state-warriors/anderson-varejao

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

Сходу непонятно значение цвета. Красные — мимо, синие — попали, но в начале сбивает с толку плавное повышение яркости от белого.

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

Ну, так себе.

Двухмерное отображение мест бросков, количества попыток и успешности давно хорошо сделали в Нью-Йорк Таймс:
http://www.nytimes.com/interactive/2012/06/11/sports/basketball/nba-shot-analysis.html

Но на этой прекрасной графике не отражалось время броска.
Забивали равномерно?
Отжигали в конце игры?

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

Из телеграм-канала https://t.me/sergeykashin
17 марта 2018

22 апреля   3d   баскетбол   виар   визуализация   дизайн
22 апреля   Observable   анимация   визуализация   дизайн   обзёрвэбл

Карта голосов на выборах

Поправил отображение данных о выборах 2016 года на карте США.

Исходная карта выглядит так:
https://xkcd.com/1939/
https://t.co/ahI3BCJvjn

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

Типографика прежняя. Поменял только карту.

22 апреля   визуализация   дизайн   карта
20 апреля   дизайн   интерфейс   рулевой   шлюпка

Реальные данные — неидеальные

Запись из телеграм-канала.
18 декабря 2017, https://t.me/sergeykashin

Компания Блумлайф (Bloomlife) делает портативные датчики схваток для беременных. Опубликовали статью о том, как важно понимать качество данных. Данные от неидеальных источников. Заслуживает внимания:

Real Life is Messy. We Should Design For It.
On sensor data and the need for more transparency on signal quality.
https://medium.com/40-weeks/real-life-is-messy-we-should-design-for-it-d1d5f14270d3

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

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

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

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

20 апреля   визуализация   дизайн   качество данных

О визуализации забега

Запись из телеграм-канала.
12 декабря 2017, https://t.me/sergeykashin

Красивая, любопытная, но не очень понятная, на мой взгляд, визуализация: https://smallmultiples.com.au/articles/visualising-sydneys-city2surf-2017/

Heartbreak Hill — буквально, холм. Но на диаграмме при взгляде на слово Hill легко перепутать по вертикали количество бегунов и высоту над уровнем моря.

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

20 апреля   визуализация   дизайн

Как менялась продолжительность жизни

Запись из телеграм-канала.
28 ноября 2017, https://t.me/sergeykashin

В «Гардиане» (The Guardian) изучили и показали, как менялась продолжительность жизни в Великобритании в течение 100 лет.

https://www.theguardian.com/lifeandstyle/ng-interactive/2017/sep/18/how-death-has-changed-over-100-years-in-britain

На графике: желтый — 1915 год, синий — 2015. Обратите внимание на большой график: изменение во времени показано на одном графике с помощью изменения цвета. Видно, как график продолжительности жизни переползает слева направо — люди стали жить дольше.

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

Очень интересно изучить распределение по возрастам и по причинам смерти:

В 1915 большинство детских смертей — от кори. Почти все взрослые возрасты равномерно покосило туберкулезом. Пожилые — от бронхита. И дальше интересные данные по 2015.

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

Неочевидная подсказка в клеточной графике ниже: одна клетка — 5 лет.

Ctrl + ↓ Ранее