Журнал Сергея Кашина

Канал в Телеграме: https://t.me/sergeykashin
Инстаграм: https://www.instagram.com/skashin/
Фейсбук: http://facebook.com/real.sergey.kashin
Твиттер: http://twitter.com/sergeykashin
Сайт: http://cashin.ru

Вакансия веб-технолога в Сбертехе

Приглашаем фронтенд-разработчика работать над внутренними системами Сбербанка. Создавать верстку под разные устройства и браузеры. Работать в команде с дизайнерами и разработчиками. Собирать решения на основе готовых интерфейсных компонентов, создавать новые компоненты, улучшать готовые. Пригодится знание Sass, Less, HTML5, ReactJS.

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

Пишите о себе и задавайте вопросы:
SIKashin.SBT@sberbank.ru
Пришлю тестовое задание. Оценить результат поможет технолог Александр Мядзель.

Передайте знакомым фронтендерам.

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

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

Страница:
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

Беседа о разборке Теслы Модели 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
Про синхронность автоматизированного производства. Тесла хочет, чтобы работали полностью синхронные конвейеры. Но мы видели на фабрике по производству ручек, как в случае неполадки пол заваливается сотнями тысяч шариковых ручек, и их убирают лопатами, это впечатляет.

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

Вторая вакансия редактора в Дизайн-центре Сбертеха

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

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

Например, в документообороте:
регистрационная карточка → документ
проект документа → тоже документ :-)
резолюция → поручение
кому → получатель
визирующее лицо → согласующий
расписать → поручить

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

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

Дизайнеры скажут: ба, да это же про дизайн! Конечно. Области пересекаются. Но и не только про дизайн. Чтобы «просто поменять надпись», редактору придется преодолеть препятствия: у руководителя свои идеи, дизайнер предлагает сократить, юрист требует изменить термины. А когда все договорились — текст вдруг кто-то не согласует.

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

Напишите о себе:
sikashin.sbt@sberbank.ru
Пришлю тестовое задание.

Передайте знакомым редакторам и дизайнерам.

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

В Лаборатории интерактивных данных (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

1. Не навреди

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

Для системы «Телеграм + аудитория» это проверка на хрупкость (для обеих частей системы). Если устоит — станет сильнее и вырастет.

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

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

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

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

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

Источник:
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.

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

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

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

Перейдите по ссылке и подвигайте мышью над графиком:
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

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

Веб-виар (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 апреля   авиация   риск   управление

Блокноты Обзёрвэбл

Тестирую новый инструмент Блокноты Обзёрвэбл (Observable) Майка Бостока. Интересная штука.

Посмотреть в Блокнотах:
https://beta.observablehq.com/@realsergeykashin/temperature-and-humidity-in-moscow-summer-2017

Пояснения Бостока, что это такое:
https://beta.observablehq.com/@mbostock/five-minute-introduction

Делал визуализацию температуры для исследования в Сбере. Решил параллельно попробовать запилить что-то похожее в Блокноте на открытых данных, чтобы сравнить с обычной связкой JS + D3 + HTML.

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

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

О влиянии начальных условий

Наглядно о влиянии начальных условий. 40 двухчастных маятников одинаково начинают движение и выглядят как один маятник. Но из-за крошечного расхождения начальных условий траектории расходятся, и…

https://bl.ocks.org/travisdoesmath/c0d08396a0bf8d5de8519ded00bb7866

Там по ссылке еще крутая демка с тройным маятником:

https://www.reddit.com/r/mathpics/comments/4nd5h1/41_triple_pendulums_with_very_slightly_different/

https://i.imgur.com/r6FZfxr.mp4

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

Ctrl + ↓ Ранее