Позднее Ctrl + ↑

Ютюб за неделю 16—23 августа: вернулся домой, новые главы книги, поезда метро Чикаго, рукописные шрифты

Обзор моего блога и соцсетей за неделю 16—23 августа 2020 года:

00:00 Возвращение на родину
01:19 Инстаграм: аэропорт Бен-Гурион, Алое Поле в Челябинске, пельмени и шиномонтаж
04:02 Твиттер: в России очень быстрый интернет, в челябинском парке Гагарина очень красивые карьеры, лифтхололук
05:57 Новые главы книги «Дизайн транспортных схем»
07:11 ЦСС научится нормальным границам текстовых блоков
10:48 Телеграм: Пробел перед градусами цельсия, наклейки на эпл-сторах, тупой интерфейс Яндекс-входа
13:26 Безголовые стрелки на знаке советского времени,
14:15 Блог: Фотографии поездов метро в Чикаго
17:24 Телеграм: тракторный интерфейс, красивая клавиатура с цветными кнопками
18:21 Как не стоит использовать рукописные шрифты
19:13 Бета Эмси 3.0 и красивые кирпича
19:57 Дизайн-задачка на неделю. Ответы шлите в комментарии, разберём в следующие выходные

Поезда в метро Чикаго

Заканчиваем с метро Чикаго. Поезд с флагом и знаком транспортной системы, как в Нью-Йорке:

Это вроде бы динамик рядом с дверью:

На боку есть экран с направлением — конечной станцией:

Внутри тоже экран показывает конечную. Ховард:

Над одной дверью висит схема системы:

Над другой — этой линии:

Очень нравится формулировка «Название is next»:

Слово «станция», оказывается, необязательно:

Фотографии из поездки в октябре 2018. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Чикаго! (Когда дадут.)

Ещё Чикаго:

Главы «Пересадки», «Направления» и «Зоны оплаты» четвёртой части книги «Дизайн транспортных схем»

Продолжает выходить четвёртая часть книги «Дизайн транспортных схем» — «Детали». Вышли очередные три главы: «Пересадки», «Направления» и «Зоны оплаты».

Я снял видео с рассказом о новых главах:

Подписывайтесь сами и дарите подписку друзьям, знакомым и коллегам.

Из новости издательства о новых главах:

Пересадки

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

Направления

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

Зоны оплаты

В главе рассматриваются схемы транспортных систем Лондона, Берлина и Парижа, где цена проезда зависит от дальности поездки и поэтому введены зоны оплаты. Обычно зоны обозначают цветными или серыми «облаками», которые мешают считывать маршруты. Но просто сделать фон бледнее нельзя: зоны должны читаться независимо от освещения на станции или качества компьютерного экрана. Автор показывает примеры удачных и неудачных обозначений.

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

438

Как кривожопо нарисованы пересадки на официальной парижской схеме и как красиво у Кости Коновалова:

456

Как обозначать остановки на перекрёстках пучков линий (там дальше рабочие варианты тоже, конечно):

462

Экономные стрелочки:

477

В главу «Направления» затесался разворот с примерами обозначения ухода линии «за схему»:

481

Когда зоны оплаты слишком сложно выглядят:

487

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

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

Кстати, подписку можно подарить.

См. также:

Плитка в Амстердаме

Плитка в Амстердаме разнообразна и используется для зонирования улиц:

Как достигается такая идеальная укладка — неизвестно:

Бордюр и спуск к проезжей части слева:

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

Смотрите, как плиткой разных цветов обозначены места:

А тут — велодорожка:

Нидерландская разметка чёрточками переменной длины означает подъём проезжей части для выравнивания с тротуаром (у них есть смешное слово «дремпель»):

Островок безопасности:

Иногда проезжая часть от тротуара отделяется столбиками:

Им не обязательно быть высокими:

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

Фотографии из поездки в октябре 2017 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Амстердам! (Когда можно будет)

Ещё Амстердам:

Аудио по четвергам: музыка для ночёвки

Саундклауд случайно подсунул мне такое, вообще не мой жанр:

Głós: Music For Sleepovers

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

Саундклауд

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

Тормоза от «высокой производительности»

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

Вот с тех пор как я стал регулярно снимать всякое для Ютюба, я стал намного чаще рендерить и конвертировать видео. И меня просто бесит, что хоть стандартный Квиктайм, хоть Аймуви, хоть Хэндбрейк (графическая оболочка для ffmpeg) забирают все ресурсы компа на свою херню.

Если Хэндбрейку надо 20 минут на конвертацию видоса, то 20 минут мой комп греется как сковородка, пыхтит вентиляторами и почти не пригоден для работы, потому что всё дичайше тормозит. Нахрена мне это надо?

Я бы хотел, чтобы в любой ресурсоёмкой работе был режим «делать незаметно». То есть если я сижу и читаю буквы с экрана, окей, делай там на фоне. А если я сам пытаюсь делать что-то, встань на паузу и подожди. Да и даже если я ничё не делаю, но вот-вот от твоей работы уже заорёт вентилятор — встань на паузу, дай остыть!

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

Мне бы такой неспешный режим был удобен даже по умолчанию, а вот если вдруг всралось сделать быстро — ну тогда я нажму кнопку «убейся, но сделай быстро». Удивительно, что такую простую вещь вообще никто не понимает.

Дизайн-обзор статьи Джорджа Кейва про интерфейс на кубиках Лего

Снял видео по статье The UX of Lego Interface Panels, которую мне кто только не скинул за последнюю неделю.

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

00:00 О чём речь
03:14 Близость и Фиттс. Отличия элементов управления. Слишком похожие элементы рядом — проблема и с точки зрения близости, и с точки зрения Фиттса. Расположение «опасных» кнопок
06:39 Кодирование. Шесть способов кодирования по Кейву. Пять способов кодирования по Лебедеву. Что я думаю о кодировании и некодировании
10:43 Радость взаимодействия с разнообразными физическими элементами управления
12:33 Законы гештальта и графическая организация элементов. Группировка близостью лучше, чем группировка рамочкой, хотя Кейв вроде бы думает иначе
15:30 Консолидированные и неконсолидированные интерфейсы. Борьба с адским количеством кнопочек в современном автомобиле. Управление климат-контролем в Ауди ТТ. Обратная связь при настройке направления обдува
21:02 Проблема с гештальтом и близостью в дизайне самой статьи
21:55 Группировка элементов управления по фичами. Обсуждаем аппарат ИВЛ с крутейшим дизайном. Всё подписано словами. Инструкция — прямо в интерфейсе. Как наклейка на корпусе маскирует технозависимое расположение элементов
32:05 Группировка элементов управления по способу управления. Израильские вентили. Сомневаюсь, что кто-то специально их группировал по какому-либо «принципу»
33:05 Группировка элементов управления по технологии. У нас это называется «технозависимость». Отличная мысль о том, что тачскрин — это современная технозависимость. Игра на виниле против игры на айпаде. Тесла с огромным экраном против машины с нормальными элементами управления. Нет, тачскрины — это не «будущее». Но почему нам так кажется
37:17 Группировка элементов управления по задаче пользователя. Наконец-то. Переход от технозависимости к человечности
39:58 Выводы. Эпловская школа минимализма против интерфейсов с кучей ручек. Какое впечатление должен произвести наш интерфейс на пользователя? Интерфейсы с небольшим числом отличий элементов выглядят аккуратными. Некоторым людям важен внешний порядок, и это касается не только интерфейса

Моя книга об интерфейсе

Вакансия продакт-дизайнера в Хантфлоу

Реклама. Текст предоставлен клиентом

Меня зовут Михаил Танский, я сооснователь и руководитель Хантфлоу — лидирующей CRM для рекрутинга в СНГ. Мы делаем интернет-сервис, продающийся по модели SaaS.

Вакансия продакт-дизайнера в Хантфлоу

Хантфлоу — это продуктовая IT-компания

Хантфлоу помогает организовать работу отделов подбора Mail.Ru Group, Leroy Merlin, Ozon, Lamoda, ivi, United Colors Benetton, Invitro, IBM и многим другим любимым клиентам. У нас 600 клиентов с 10 000 пользователями.

В команде 40 человек, половина из которых разработчики. И всего 2 дизайнера — я (Михаил) и моя коллега Настя. Наш объём задач и скорость развития требуют ещё одного сильного продакт-дизайнера.

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

Задачи

В Хантфлоу десятки уникальных функций, которые решают проблемы объединения команды при работе над вакансиями и ускоряют работу рекрутеров над вакансиями.

В 2021 году мы сделаем следующий большой шаг и нам нужно продуктовое усиление. Мы хотим перепридумать и дать нашим клиентам инструменты настоящей автоматизации. Инструменты оценки кандидатов, элементы машинного обучения — у нас десятки идей и нерешенных жизненных сценариев и мы хотим сделать по-настоящему мировой продукт для рекрутеров. Наша амбиция — стать лидером среди рекрутинговых систем не только в России, но и в мире.

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

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

У нас есть библиотека компонентов (стандартные поля формы, стандартные дропдауны, стандартные попапы).

Мы думаем об экономии времени рекрутера, поэтому автоматически доскролливаем не уместившееся окошко, показываем полезную анимацию, запоминаем введенные данные и ставим автофокус в первое поле формы.

Мы придумываем как решить задачу с максимальной пользой, но затрачивая минимальные ресурсы.

Как мы приоритезируем задачи

При приоритезации мы оцениваем каждую задачу по трём параметрам:

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

Требования к кандидату и условия работы

Мы ищем человека со значимым опытом работы над большими массовыми интернет-сервисами.

Работа в Москве на станции метро Дмитровская, недалеко от Флакона. У нас фултайм. Торчать в офисе Хантфлоу целыми днями не нужно, но наша скорость развития и коммуникации не позволяет работать 100% удалённо, так что жить нужно в Москве и несколько раз в неделю приходить в офис.

Культура работы

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

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

Хантфлоу старается решать все задачи минимальными ресурсами, но с максимальным эффектом.

Мы уверены, что сами создаём мир, в котором мы живём.

Как будет происходить наём

Отправьте нашему HR Анастасии Василевской (nastasia@huntflow.ru) ваше резюме с опытом работы над большими сервисами, примеры ваших работ (я понимаю, что собранного портфолио может не быть) и рассказ о том, в доведении каких продуктов до продакшна вы участвовали. Дальше — собеседование со мной и оффер.

Приходите, вас ждёт большое приключение!

Иллюстрация с элементами интерфейса

Бывает, в интерфейсе для объяснения функции надо показать, как выглядит кусок интерфейса.

Неправильно: просто показать этот кусок интерфейса как есть.

Например, галочка в Алиэкспрессе:

Кажется, что прям тут можно нажать, но это не настоящая галочка, а просто иллюстрация.

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

Центр уведомлений в настройке уведомлений на Маке:

Кнопки в таблице синтаксиса интерфейса из книги «Пользовательский интерфейс»:

Ранее Ctrl + ↓