Более важные-интересные отмечены значком Highlight.  — видео.

Дизайн

Пример незамкнутости интерфейса Highlight
Илья Бирман пишет о важной штуке при дизайне интерфейса. Я редко пишу что-то про ссылки в дайджесте, но тут себе позволю.

В посте есть важный момент:

Тут дизайнер перестаёт писать описание и начинает латать дыры на лету.

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

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

Out of the box
Видео шестилетней давности про онбординг смартфона в реальном мире

Поиск новых форм
Известные дизайнеры переделывают ya.ru

HomePod — Beat — Apple
HomePod — Bass — Apple
HomePod — Distortion — Apple
HomePod — Equalizer — Apple
Типографическая реклама колонки Хоумпод

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

Как мы сократили трудовой договор в 5 раз
Вили показывает свой трудовой договор. Он примерно в 6 раз короче вашего

Исторический портал (примеры)
Подборка способов и форматов рассказа об истории, например, страны

Полюбить советскую архитектуру
Спецпроект «Стрелки» про советскую архитектуру. Не все здания заслуживают внимания, а вот министерство автомобильных дорог в Тбилиси — отличное

Технологии

Машинный перевод. От холодной войны до диплёрнинга
Вастрик подробно описал этапы развития машинного перевода

Видео: беспилотный автомобиль Яндекс.Такси в зимней Москве
Автомобиль выпустили с полигона в Хамовники

Разное

Автозаполнение поля в G.forms и mailchimp
Для всех, кто делает рассылки в мейлчимпе. Можно предзаполнить гугл.форму из письма

Цифровой этикет
Телеграм-канал о цифровом этикете. Хорошо, что можно все это не писать, а просто дать ссылку

Все выпуски по тегу что почитать.

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

Лато

Лато использует в своем интерфейсе Слак. Версия Гугла — без кириллицы:

На самом деле кириллица вышла в 2015 году:

Даже авторы Лато не знают, почему Гугл так себя ведет:

The older version (1.0) of the Lato font family is available on Google Fonts. We have no information when Lato 2.0 will be available on Google Fonts.

Эдоби Сериф Про

Версия Гугла — без кириллицы:

На самом деле кириллица есть (с начала 2017):

Эдоби Сорс Код

Версия Гугла (ну вы поняли):

Версия Эдоби:

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

Придумал закон и коэффициент, которым надо мерить коммуникации. Встречайте:

Закон и коэффициент СУД (Скорости упоминания договора)

Закон Годвина гласит, что любая достаточно продолжительная дискуссия в интернете приведет к упоминанию Гитлера.

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

— Можно отгул взять?
— Нет, трудовой договор не позволяет

Этот диалог — СУД = 2, на второй реплике — договор.

А вот так выглядит, например СУД = 1:

— Мой трудовой договор позволяет брать мне отгулы?

Хорошо, когда СУД в компании не удаётся посчитать.

Я делал коллеге подборку ссылок как по-человески писать то, что по-человечески быть ну никак не может. Решил дооформить в пост, пусть для всех будет.

Юридические документы: переписать и сократить

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

Попытайте вспомнить на скольких страницах ваш трудовой договор? Вот весь трудовой договор Вилли:

Трудовой договор Вилли

Юрист Владимир Беляев рассказывает, как добиться таких договоров:

• Часть первая
• Часть вторая
• Часть третья
• Часть четвертая
• Часть пятая
• Часть шестая

Вот ещё пример Ильяхова: instagram.com/p/BZQslBsA1ej/

Юридические документы: написать рядом по-человечески

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

Бюрошный договор

Соглашение 500 пикселей

Объявления: для учреждений культуры Москвы

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

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

Скачать:

Объявления: для госуслуг

Максим Ильяхов с командой готовил правила написания текстов для госуслуг. Например:

Руководство общедоступно:

• 0. Платформа бренда
• 2. Электронные письма
• 4. Объясняющие (учебные) статьи
• 6. Руководство по использованию формата и структуры новостных блоков

Все материалы перенесли в сайт рассказа о проекте: https://rocketmind.ru/cases/gosuslugi-promotion

Лекарства

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

Смотрите, так тоже можно: аккуратно, просто и понятно.

Картинка промелькивала в канале Ильи Бирмана

Объявления: для всех

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

• Как убеждать людей, что что-то делать нельзя?
• Как сделать более клиентоориентированное объявление вместо «Посторонним вход воспрещён!»?
• Как составить объявление для неплательщиков за ЖКХ?
• Насколько корректный текст? Как можно делать лучше?

Максим Ильяхов даже как-то делал сайт с шаблонами объявлений, но кажется временно его подзабросил, там тоже можно что-то подглядеть.

Если будете извиняться в объявлениях: Искренность в извинениях.

Напишите что-нибудь крутое, что я пропустил? В телеграм @mikeozornin или на почту mike.ozornin@gmail.com

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

Я подключился совсем рано, когда подписи скриншотов были совсем сырыми:

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

Общие правила

Про оформление подписей есть бюрошный совет: bureau.ru/bb/soviet/20140728. В нем Артём рассказывает о роли подписей, о том, как их ставить и как рисовать выноски. Подписчики учебника «Типографика и верстка» могут дополнительно посмотреть разворот 71.

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

Прием 1: УВЛ (убрать все лишнее)

Самое простое, с чего можно начать улучшение этой картинки — убрать очевидные сущности. Текста станет меньше, свободного места — больше, подписи станут компактней и аккуратней.

Слово button встречается 12 раз и все они используются, чтобы сказать «это — кнопка». Вообщем почти все элементы на этом скриншоте — кнопки, поэтому button безболезненно убирается:

Прием 2: вынести общее за скобки

Иногда от повторений нельзя избавиться совсем. В примере ниже повторяется не просто button, а filter button.

Убрать button можно, а вот от filter избавиться нельзя. Если убрать слово filter, то потеряется важный смысл. При этом filter button относится ко всем четырем действиям, все они — действия над сохраненными фильтрами. Нет необходимости писать про сохраненные фильтры 4 раза, можно написать один раз и больше не повторяться.

Например, так:

Фактически мы вынесли filter button за скобки, как в математическом выражении.

Прием 3: соблюдать теории близости

Нужно следить, чтобы при расположении подписей не нарушалась теория близости. Здесь надпись близка к чужой палочке, возникает путаница:

Прием 4: использовать естественное соответствие

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

На этом куске скриншота все 4 иконки стоят ровно в ряд с одинаковыми отступами:

По возможности лучше не подписывать что-то сбоку, что-то снизу, а расположить подписи в ряд, с одинаковыми интервалами, — это усилит взаимосвязь:

Прием 5: выравнивать текст осмысленно

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

Подпись периода расположение по центру и похожа на форме на отображаемый период: невысокая и широкая. Иконка Expand timeline расположена в правой части поля, поэтому выноску располагается с правой стороны текста. Дополнительно можно было бы использовать выравнивание текста Expand timeline по правому краю, а Apply filter по центру, но это не обязательно в данном случае.

За выравниваем всегда следят на транспортных схемах: правильное расположение названия станции помогает понять, где какая станция. Посмотрите, например, линейные схемы Московского метро: artlebedev.ru/metro/line-map.

Прием 6: убрать «почти, но не совсем»

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

Посмотрим на картинку:

Здесь много почти, но не совсем, всего 6 видов разного выравнивания:

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

Ещё примеры «почти, но не совсем» в посте Ильи Бирмана.

Прием 7: следить за типографикой

Подписи — неблагодарный для верстки формат: колонка узкая, а тут ещё могут появиться эти длинные русские слова. В узких колонках особенно важно следить за интерлиньяжем (межстрочным интервалом), лучше уменьшить его относительно базового. Filter и panel расположены так далеко друг относительно друга, что может показаться, что это две подписи. Если уменьшить интерлиньяж будет лучше:

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

Про интерлиньяж:
bureau.ru/bb/soviet/20140310/
bureau.ru/bb/soviet/20140310/

Прием 8: редактировать текст

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

Прием 9: рассказывать по частям

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

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

Про подписи есть ещё два поста Сергея Стеблины, он шарит сильно лучше меня, поэтому если дочитали досюда, то прочитайте и его, вам уже нечего терять:

• Размеры и линейки
• Коротко о выносках и подписях — на самом деле не коротко

Таблица по-моему — самый недооцененный формат представления информации. Я очень часто слышу «давай сделаем таблицу, а потом сделаем полноценную визуализацию». Почти всегда это полный бред.

На самом деле таблица достаточно удачный формат:

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

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

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

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

Расскраска по процентилям: 0,95 · 0,9 · 0,75 · 0,4 · 0,1

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

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

Такой способ часто называется скользящим окном:

Получилась такая таблица:

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

Аркадий отлично сдал вступительное, оно дало ему большой запаc. Я понемногу обгонял Андрея и Аркадия в тестах, но слил накопленное в курсовой. Леонид начал не с самых сильных позиций, но методичная работа подняла его в рейтинге. Евгений шел неравномерно: некоторые тесты лучше всех, а некоторые ощутимо хуже соседей.

От раскрашенной таблицы остается всего один шаг до теплокарты (heatmap) — графика, в котором области красятся в разные цвета. Вместо прямоугольных ячеек прямоугольной таблицы берутся ячейки другой формы и располагаются в каком-то естественном порядке: время, география, физическое положение.

Вот несколько примеров:

Даже график ниже — тоже таблица, хотя и не очень похоже, просто ячеек очень много и они очень мелкие:

Не стесняйтесь таблиц, это нормальный формат. Вот два совета бюро как сделать таблицы лучше:

• Как улучшить таблицу в угоду удобочитаемости и экономии места
• Расскажите про вёрстку больших таблиц

Посмотрите ещё визуализацию прогресса студентов у Михаила Капанаги: http://burostat.ru

Более важные-интересные отмечены значком Highlight.  — видео.

Дизайн

Создание навигации в подуличных переходах Московского метро Highlight
Студия рассказывает как делала один из самых больших недавних проектов

Артемий Лебедев — магистр мата и отец 10 детей Highlight
Лебедев у Дудя

Dive into the details of iOS 11: Is Apple still detail-oriented?
Чувак разбирает айОС 11 на предмет мелких нестыковок в интерфейсе

Whoever designed the Coke Christmas bottle deserves a pay rise
Новогодняя бутылка Колы

In Search Of The Perfect Writing Font
Компания iA (автор редактора iA Writer) рассказывает о своем двуширинном шрифте

Занимательная метеорология
На Яндекс.Погоде появились погодные карты. Какая красота

80-Year-Old Wooden Escalators Repurposed as Interlooping Ceiling Sculptures
Арт-инсталляция из старых эскалаторов. Завораживающе, но должно быть страшновато стоять внизу

Instagram удалил китайскую рекламу кроссовок с «волосом» на экране
Отличная история про рекламу в интаграме и психологию людей

Пять сотен агитматериалов без армии дизайнеров за три недели
Евгений Решетнёв рассказывать про оптимизация в Индизайне

https://www.odetothings.com/shop/
Невероятно красивые предметы

Разбитые окна в интерфейсе
Сергей Соловьев из Контура делится наблюдением

Догадливый интерфейс бета
Антон Жиянов делится подборкой библиотек и сервисов

Перспективлялка
Сергей Николаев сделал инструмент для тестирования навигации

Nintendo Labo Official Site
Сумашедшие из Нинтендо делают картонные аксессуары к Нинтендо Свитчу

Поиск по вопросам этноэкспов Артемия Лебедева
Чувак разобрал все вопросы-ответы Лебедева, сделал сайт с поиском

Создание логотипа компании «Эксклюзивная логистика» Highlight
Один из лучших процессов логотипа

Julius Tarng — Facebook
Интервью с дизайнером из Фейсбука — загляните посмотрите на инструменты, но больше ничего особенного

Организация работы

Корпоративно-культурный тур (1/3)
Алексей Каптерев рассказывает про компании. Интересно про Амазон и Безоса

Корпоративно-культурный тур (2/3)
А здесь клево про Morning Star

Корпоративно-культурный тур (3/3)
В третьей части — Оракл

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

Разработка