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

дизайн

Редизайн страницы про миграцию птиц

Исходная статья:
https://www.nationalgeographic.com/magazine/2018/03/bird-migration-interactive-maps/?beta=true

Редизайнил блок с картой на странице про миграцию птиц:

В новом варианте:
— сгруппировал заголовки по смыслу,
— добавил количество птиц,
— сделал более аккуратную легенду,
— текст поставил в правую колонку,
— переделал листалку периодов.
Компактнее, информативнее.

Было-стало:

9 июля   National Geographic   верстка   дизайн   карта

Визуализация миграции птиц

Великолепная статья Нэшнл Географик с картографической визуализацией миграции птиц в Северной и Южной Америках:

https://www.nationalgeographic.com/magazine/2018/03/bird-migration-interactive-maps/?beta=true

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

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

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

Там же: сбивает с толку, что в листалке периодов первый период — вовсе не период, а анимация всех периодов. Для бета-версии норм, но вообще вот это надо сделать получше:

Любопытный ролик: подготовка ко взлету Миг-15

Несколько наблюдений на тему пользовательского взаимодействия.

Три параллельных системы:
— Самолет и его органы управления;
— Чек-лист: что нужно проверить перед взлетом;
— Пилот: знания, опыт, текущее физико-психическое состояние.

Самолет мог бы сам подсказывать, что проверить перед взлетом. Но процесс проверки приборов вынесен в отдельный материальный объект — чек-лист.

В процессе проверки чек-лист подключает пилота к процессу анализа. Человек проверяет пункты. Включается мозг. Человек помещается в контекст пилотирования.

Самолет: сложная электроника,
Чек-лист: лист бумаги.

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

Самолет: сложно модифицируемая система, замкнутая.
Чек-лист: легко обновить, поменять, переделать.

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

25 июня   авиация   дизайн   интерфейс   чек-лист

Как изучать трехмерные данные МРТ-сканирования

Планшет с определением положения в пространстве (по описанию я не уверен, что они используют акселерометр) помогает изучать трехмерные данные МРТ-сканирования:

Хорошо, что экранов два:
на одном — текущее сечение,
на другом — общий вид с отображением плоскости сечения.

25 июня   визуализация   дизайн   МРТ

Интересная визуализация футбольных голов на чемпионатах в «Экономисте»

https://www.economist.com/graphic-detail/2018/06/18/every-world-cup-goal-ever-scored

Опубликована в рубрике Daily Chart. Хорошо сделано для повседневной графики. Но если закрыть глаза на оперативность подготовки, можно немного покритиковать интерфейс.

При наведении курсора подсказка всплывает не у кружочка гола, а где-то непонятно в стороне:

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

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

25 июня   визуализация   график   дизайн   футбол

Симуляция и визуализация человеческого тела

Суперкомпьютерный центр в Барселоне выпустил короткий фильм о программной симуляции и визуализации человеческого тела:
http://www.bsc.es/viz/virtualhumans/

Видео:

О фильме:
https://www.bsc.es/news/bsc-news/release-virtual-humans-film

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

Фантастика и рядом не стояла.

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

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

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

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

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

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

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

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

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

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

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

Страница:
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 апреля   дизайн   Пауэрпоинт   политика   презентация   Тафти
Ctrl + ↓ Ранее