Блог Михаила Озорнина

Отвечать туда же — правило переписки

Главное правило деловой (и не только) переписки:
Отвечать туда, где спросили.

 

Причем речь не просто про канал (спросили в почте, ответил в почту), но и про способ (ответить на письмо, а не написать новое письмо).

Написать новое письмо вместо ответа — сделать неудобно собеседнику:

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

Про чаты у меня есть ещё пунктик: зареплаили — отвечу реплаем, заменшенили меня — меншеню в ответ, если написали просто так, то и я отвечу просто сообщением.

Шпаргалка:

Куда мне написали Куда мне надо ответить Куда мне не надо отвечать
Эл. письмо Ответ на эл. письмо Новое эл. письмо
Телеграм
Позвонить
Прийти лично
Общий чат в телеграме Ответить в чате просто так,
или через reply
Лично в телеграме
Письмо
Позвонить
Прийти лично
Лично в телеграме Ответить лично Письмо
Найти общий чат в телеграме и написать туда
Позвонить
Прийти лично
Комментарий в фейсбуке Ответить там же Написать в фейсбук-мессенджер
Найти адрес эл. почты и написать письмо

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

Иконки на обложке из набора 365 Сергея Чикина. Очень удобно: взял иконку, написал текст и обложка готова.

Подписаться на блог…

Как включить темную тему на сайте

Темная тема — модно, все включают её себе в макоси (на следующий день, конечно, выключают обратно). Часто выключают потому, что сама тема темная, а весь контент вокруг (письма, сайты) — светлые. Светлый контент бьет по глазам своей яркостью.

Некоторые сайты включают темную тему исходя из времени суток. Например, Авиасейлз:

Скоро наступит будущее

В самой новой версии Сафари (Safari Technologies Preview) уже появился детект темной темы внутри браузера.

Можно узнать установлена ли темная тема у посетителя и сделать немного магии. Светлая:

Темная:

Тем, у кого есть новый Сафари 71+ можно попробовать здесь:

mikeozornin.ru

Как включить детект

Чтобы включить темную тему используется медиа-запрос prefers-color-scheme:

@media (prefers-color-scheme: dark) {
    //какие-то отличия темной темы, от светлой
}

Чтобы отлаживать, не включая-выключая системную тему, в Сафари (в той самой Technologies Preview) есть кнопка включения темной темы локально в браузере:

Если кому-то интересно как сделана темная тема, то кроме css-файла на сайте есть less-файл на гитхабе. Но осторожно, там очень много быдлокода и костылей.

13 декабря   темная тема   фронтенд
Подписаться на блог…

Дизайн-вопрос: как выбрать шрифт

У меня на главной странице давно висит такой текст:

Веду рубрику «Дизайн-вопрос». Отвечаю на вопросы о дизайне и смежных областях. Не халтурю, не пишу отписки и отвечаю на совесть: частенько для ответа приходится найти, прочитать и изучить исследования, рекомендации, набрать и подобрать иллюстрации или примеры. Вопросы пишите на mike.ozornin@gmail.com.

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

Матвей Правосудов спрашивает:

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

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

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

Матвей!

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

Системный шрифт

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

Системный — разный везде

Первый — системный шрифт означает разный внешний вид на разных платформах.

Для получения некоего «системного шрифта» недостаточно просто вписать Ариал. Ариала нет на маке, компьютерах с линуксом и мобильных. Если на этих платформах есть целевые пользователи, то кроме Ариала для них понадобится другой шрифт: Робото для андроида, Сан-Франциско для макос и айос, какой-нибудь sans-serif для линуксов (Опенсанс, Либерейшен или какой-нибудь Дежавю).

По своей идее на «системный шрифт» похож native font stack. По сути это самый родной шрифт на каждой из платформ. Вот как это выглядит в виде CSS-кода:

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

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

Сегой и Робото

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

Каждая поддерживаемая платформа это дополнительный системный шрифт, который нужно перепроверить и при необходимости адаптировать. Лишний код на адаптацию: компенсация пиксельных отступов, размеров глифов, — это лишнее визуальное тестирование. Можно обойтись и без тестирования, но тогда будет выглядеть «как получится». Общий шрифт снимает бо́льшую часть этих вопросов. Такие аргументы особенно понятны разработчикам и инженерам по качеству. Им бы вообще лишь бы что-то везде сделать одинаковым, чтобы не ломалось в будущем :—)

Системный — без своего «Я»

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

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

Конкретно Ариал — не очень

Третий минус конкретно у ариала. Он не очень хороший (но это мало кто заметит) и у него может быть не хватить начертаний. Если вы захотите тонкое начертание, то ариал вам не помощник.

Вместо вывода

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

Как выбрать свой шрифт

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

1. Формулирую требования

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

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

Функция

  1. Начертания
    Минимум: Обычное, полужирное, тонкое (все с курсивом), хорошо если больше.
  1. Набор цифр
    Есть маюскульные цифры, минускульные опциональны. Есть пропорциональные и моноширинные цифры (скорей всего это есть у всех), моноширинные дефолт.
  1. Хорошая читаемость
    Лучше открытый или полуоткрытый шрифт с высоким x-height. Хорошо бы иметь форму 6 и 9 как в Авенире и Лато, а не как в Гельветике (иногда доступны Opentype-фичей Straight-sided six and nine). Должен хорошо читаться даже на плохих экранах с TN-матрицей.
  1. Универсальный
    Было бы хорошо, чтобы он хорошо работал и в печатной продукции (руководства, отчеты, маркетинговые материалы). Вдруг мы сможем использовать его и там.
  1. Высокая емкость
    В наших продуктах много данных, поэтому хорошо бы, чтобы шрифт не был слишком широким.

Эстетика

  1. Чистый.
  1. Простой, но не упрощенный.
  1. Выглядит технологично.
    Создаёт ощущение технологий и хай-тека, а не теплой ламповости или стимпанка (как Текстбук, Гилл или 20 копеек).
  1. Нормальная кириллица.
  1. Не должен казаться очень чужеродным, создавать из-за непривычности ощущение халтуры.

Доступность

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

У вас требования могут быть другие.

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

У кого-то будут другие требования к функции: кто-то предпочтет узнаваемость и уникальность в угоду считываемости. У кого-то будут очень строгие требования к емкости шрифта. Именно из-за особых требований к емкости шрифта родились шрифты PT Astra.

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

  1. Шрифт должен иметь своё лицо, отличаться от конкурентов.
  2. И в то же время быть спокойным, нейтральным, не слишком характерным.
  3. Выражающим наши ценности:
    открытый,
    современный,
    умный,
    нейтральный,
    локальный,
    технологичный, но с человеческим лицом.
  4. Сделанным в первую очередь для кириллического набора.
  5. Очень хорошо читаемым, разборчивым и применимым во всех современных средах.
  6. Совпадающим по основным метрикам и пропорциям с Ариалом.
  7. Имеющим несколько степеней насыщенности.

Отсюда: https://medium.com/@k00/шрифт-яндекса-yandex-sans-1c2ab7dfd537

Или вот требования от которых отталкивались при разработке шрифта для интерфейса государственных систем России (ещё не вышел):

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

  • Высокие прописные;
  • Очень крупные строчные;
  • Большая ёмкость, т. е. знаки скорее узкие, чем широкие;
  • Просторные межбуквенные расстояния с расчётом на экран не слишком высокого разрешения;
  • Короткие выносные элементы, чтобы экономить место на служебных панелях и кнопках;
  • Скорее гротеск, чем антиква;
  • Скорее открытый или полуоткрытый;
  • Технически подготовленный для работы на экране.

Эти параметры, в общем, не имеют отношения к характеру шрифта, но в рамках жанра должны выдерживаться. Можно привести примеры интерфейсных шрифтов: Lucida Grande, Segoe UI, Roboto, San Francisco UI и т. д.

Отсюда: https://leksandra.livejournal.com/120045.html

Один из авторов шрифта Yandex Sans Кристиан Шварц в своей лекции про шрифты рассказывает как они искали форму шрифтов для разных компаний. Показателен пример ДойчеБана (немецких железных дорог). Кристиан с командой долго не могли ничего придумать. В какой-то момент решили начать с расписания, ключевой вещи. И они сделали цифры, которые в этом расписании хорошо различаются. И конкретна эта различимость букв стала основной будущего шрифта:

Лекция Кристиана Шварца (начало дойчебана с 16:25).
001. Making something out of something: Typefaces, history, culture, and meaning

2. Собираю таблицу

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

Таблица выглядит как-то так:

Шрифт Плюсы Минусы Цена Какие-то комментарии
График
Лато
Робото
Фира

Шрифты с Гугл.Фонтс нужно я дополнительно проверяю:

3. Смотрю в деле

Скачиваю и устанавливаю шрифты (для бесплатных), платные беру в аренду или ищу в библиотеке. После установки проверяю их в деле: меняю в макете, плакате, брошюре или интерфейсе. Для веб-интерфейсов я пишу юзерстиль (userstyle) в браузере, где меняю шрифт на новый. После этого начинаю пользоваться продуктом как обычно.

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

Вот некоторые советы Ани Даниловой на сайте бюро:

4. Выбираю доступные

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

Как убедить команду в выбранном шрифте

Алгоритма как убедить у меня нет. Мне не приходилось много спорить о шрифтах с недизайнерами. Мои собеседники соглашались с результатом (картинкой), или мне верили заранее, или мои объяснения (все 4 шага), помогали.

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

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

Надеюсь чем-нибудь помог. Пишите, если остались вопросы.

В заключение оставлю разные шрифтовые доклады, которые мне кажутся подходящими к теме поста:

11 декабря   дизайн-вопрос
Подписаться на блог…

Эскизы сервисов из видео Арзамаса

Арзамас выпустил видео История русской культуры за 25 минут.

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

Я наскриншотил разных программ и интернет-сервисов, которые встретил в видеоролике. Картинки в порядке видео, поэтому некоторые метафоры (типа чатов) будут повторяться. Поехали.

Файндер из макоси

Гугл.переводчик

Чат (скорей похож на телеграм)

Не знаю что, но явно какой-то сервис

Какой-то поиск

Яндекс.Навигатор

Фотоальбомы айос?

Рейтинги на картах

Фотошоп

Ещё чаты

Фейсбук

Мэйл.апп

Ещё файндер

Квиктайм?

Инстаграм

Гугловая капча

Ещё чаты

Док из макоси

Заметки из макоси

Ютуб

Сири

Поиск Гугла по картинкам

Ещё чаты (их вообще много)

Какой-нибудь сервис по акциям

Снова чаты

Фотошоп

Твиттер

Инстаграм (прямой эфир)

Инстаграм (сториз)

Эйрдроп

Фейсбук

РКН и телеграм

Любой слайдер сравнения фотографий

РКН и телеграм-2

Циано-зе-локалз

Пинтерест

Кого заинтересовало, вот видео:

5 декабря   арзамас
Подписаться на блог…

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

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

Письмо выглядит так:

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

Самая важная часть письма — код, вот она:

Мой вариант вышел таким:

Не буду описывать процесс, вот что делал:

  • минимальная редактура: написание дат, тема письма, советы и прочее,
  • код получения — самое важное, он сделан крупно,
  • график работы и адрес постамата вытащены из ссылки «Здесь»,
  • информация о заказе перенесена ниже, она не так важна,
  • убраны картинки-иллюстрации к трем советам,
  • логотип из подвала поднят наверх, справа как раз место для него,
  • изменен адрес отправителя (вспомнил уже только в мобильной версии, в десктопной не стал менять).

Мобильная версия. Мне она кажется важней, тот случай когда mobile first. Перед постаматом я всегда стою с открытым письмом, там нужный мне код.

Что осталось нерешенным:

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

Что почитать из книг — 1

Соберу некоторые книги, которые прочитал не так давно.

Все ссылки ведут на livelib.ru. 4 ★ — интересная книга, ни секунды не жалел, что прочитал, 5 ★ — я могу советовать с закрытыми глазами.

Книга и автор Оценка Жанр Какой-то комментарий
Витамания. История нашей одержимости витаминами
Кэтрин Прайс
3 ★ Научпоп На один раз норм, насколько я помню многовато воды.
Прочерк
Лидия Чуковская
5 ★ Мемуары Потрясающе пронзительная. Это вторая книга про репрессии, которую на мой взгляд стоит прочитать. Первая — Крутой маршрут Евгении Гинзбург.
Солнечное вещество
М. П. Бронштейн
4 ★ Научпоп Читал потому что она упоминается в «Прочерке», но свою четверку она заработала сама по себе, она тоже интересная. Подойдет, чтобы заинтересовать детей физикой.
Как люди думают
Дмитрий Чернышев
4 ★
Ложится мгла на старые ступени
Александр Чудаков
5 ★ Худлит
Изгои
Сьюзен Хинтон
4 ★ Худлит Даже мне было интересно почитать. Скорей всего в подростковом возрасте она будет ещё круче.
Обои-убийцы, ядовитая вода и стул-обольститель
Дарья Саркисян
3 ★ Научпоп Я знал очень многое из того, что пишет Дарья (я читаю «Намочи манту»), поэтому нового было мало. Если бы я не был подготовлен, то поставил бы 4 звезды. Прочитать стоит, у нас скопилось много разных медицинских заблуждений.
Мой лучший друг — желудок. Еда для умных людей
Елена Мотова
3 ★ Научпоп Тоже можно было бы поставить и выше, но мне тоже было мало нового. Тоже стоит прочитать в рамках борьбы с медицинскими заблуждениями.
Щегол
Донна Тартт
4 ★ Худлит
Не отпускай меня
Кадзуо Исигуро
5 ★ Худлит
Маленькая жизнь
Ханья Янагихара
5 ★ Худлит Читать тяжело, но после того, как начал остановиться невозможно. Иногда приходилось откладывать в сторону и приходить в себя.
Шпион на миллиард долларов. История самой дерзкой операции американских спецслужб в Советском Союзе
Дэвид Хоффман
4 ★ Мемуары Интересно и про процесс, и как историческая ретроспектива, и с точки зрения того, до чего довели людей.
Я плохая мать? и 33 других вопроса, которые портят жизнь родителям
Екатерина Кронгауз
3 ★ Воспитание Уже даже и не помню, почему поставил 3. Читалась вроде неплохо.
Скотный двор
Джордж Оруэлл
4 ★ Худлит Сейчас отличное время для антиутопий, а эту я как-то не читал в свое время.
Эмоциональный интеллект ребенка. Практическое руководство для родителей
Джон Готтман, Джоан Деклер
4 ★ Воспитание Читал для общения со взрослыми, как часто бывает с книгами про детей, она отлично подходит и для взрослых.
Овцы в волчьих шкурах. В защиту порицаемых
Уолтер Блок
4 ★ Социология Базовая книга про либертарианство. Если какие-то идеи либертарианства кажутся удивительными, то может быть интересно. А если идеи кажутся понятными, то и в книге нового будет немного. Страдает от многословности.
Вся правда о неправде. Почему и как мы обманываем
Дэн Ариели
4 ★ Научпоп Много интересных примеров и опытов, читается хорошо.
Позитивная иррациональность. Как извлекать выгоду из своих нелогичных поступков
Дэн Ариели
3 ★ Научпоп Понравилась меньше, чем «Вся правда о неправде».
Предсказуемая иррациональность. Скрытые силы, определяющие наши решения
Дэн Ариели
3 ★ Научпоп Понравилась меньше, чем «Вся правда о неправде».
День опричника
Владимир Сорокин
4 ★ Худлит Ощущения смешанные. С одной стороны Сорокину удалось очень четко собрать приметы времени. С другой читать почти всегда противно. О прочтении не жалею, но и перечитывать не стану.
Дом на краю ночи
Кэтрин Бэннер
4 ★ Худлит Легкая и добрая.
Воспоминания о войне
Никулин Николай Николаевич
5 ★ Мемуары Давал бы в школе при изучении Великой Отечественной.
Пластичность мозга. Потрясающие факты о том, как мысли способны менять структуру и функции нашего мозга
Норман Дойдж
5 ★ Научпоп Очень интересно.
Ложная слепота
Питер Уоттс
3 ★ Худлит Одно время вся лента пестрила восхищением на «Ложную слепоту», на фоне этого я прочитал её, но что-то не проперся.
Замок из стекла. Что скрывает прошлое
Джаннет Уоллс
5 ★ Худлит В конце книги будет важный кусочек, не пропустите.
Мор — ученик Смерти
Терри Пратчетт
3 ★ Худлит
Английский пациент
Майкл Ондатже
3 ★ Худлит Тоже видел много восторженных отзывов, но мне не зашло.
Чапаев и пустота
Виктор Пелевин
3 ★ Худлит В своё время Пелевин прошел мимо меня, это единственное у Пелевина, что я прочитал. Мне как-то никак.
Плюс жизнь
Кристина Гептинг
4 ★ Худлит Из начала ожидалось, что будет по-черному тяжело. Но на самом деле много света.
Никто не спит
Катарина Киери
4 ★ Худлит Легкая и добрая.
Совсем не Аполлон
Катарина Киери
5 ★ Худлит Жутко интересно, как книгу воспринимают те, для кого она написана (старшие школьники). Мне понравилась.
Вафельное сердце
Мария Парр
5 ★ Худлит Милая, добрая и ненапряжная.

Прочитанные книги я отмечаю в лайвлибе (mikeozornin). Там будут появляться новые отметки о прочитанном и там же можно посмотреть книги за 2016 и раньше.

Посоветуйте какую-нибудь книгу? Как вы их выбираете, откуда о них узнаете?

Подписаться на блог…

Как не нарушать вопросами личные границы

 

Что у тебя с загрузкой на этой неделе?
Во сколько завтра будешь в офисе?
Какие планы на вечер пятницы?

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

Не твоё дело!

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

Все дело в том, что эти невинные с виду вопросы нарушают границы другого человека. Это его дело, во сколько ему быть в офисе (если вы с ним не договорились) и что он делает в пятницу после работы.

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

Обычно такие вопросы очень легко переделать так, чтобы сохранить границы не тронутыми:

Не ок Ок
Ты идешь сегодня на обед? Я бы с тобой пообедал, часов в 13-14. Что скажешь?
Ты идешь сегодня на обед? Пойдем на обед в 13-14?
Во сколько ты завтра в офисе будешь? Я завтра хочу обсудить сервер Бета-банка. Хочу обсудить как можно раньше. Когда удобно? Если надо, приеду рано утром в офис.
Что у тебя на этой неделе с загрузкой? Слушай, у нас срочная задача, нужно сделать до конца недели. Может быть сможешь, или может кто-то из твоих стажеров сможет?
Что делаешь в пятницу вечером? Привет! Я давно тебя не видел, соскучился. Пойдем вечером в паб, например в пятницу? Или давай выпьем вина, у меня есть бутылка Бордо.

Мне помогают вот такие простые правила:

  1. Не спрашивать о планах, вместо вопроса делать предложение. Ты пойдешь на обед? → Пошли на обед?
  2. Если спрашивать, то спрашивать только о допустимом времени: когда удобно.

После соблюдения границ останутся уважение, право на нет и другие вещи. Об этом как-нибудь потом.

Заодно прочитайте пост Жени Арутюнова как быть нормальным.

23 октября   этикет
Подписаться на блог…

Переверстка: объявление о лифтах

У нас в офисе изменилась схема движения лифтов. В связи с этих бизнес-центр поставил объявление со схемой.

Мне кажется, в нем есть некоторые проблемы, в этом после я попробую привести его в порядок.

Вот объявление:

Шаг 1: Убрать все лишнее

Сначала нужно убрать дублирование, его здесь очень много:

Шаг 2: сделать аккуратно

После этого можно аккуратно набрать ту же самую информацию. Заодно поставил заголовок покороче.

Шаг 3: прибраться

Писать все эти бесконечные этажи в столбик нет никакого смысла, проще же сократить. Заодно свесил левую стрелку ← влево, стало немного аккуратней.

Обратите внимание, что в строках лифты + этажи все поставлено с ног на голову: сначала рассказывается что использовать (лифты), а потом кому (этажи). Сначала нужно прочитать нижнюю строчку, чтобы выбрать этаж, а потом прочитать верхнюю, чтобы узнать куда идти. Меняю местами.

Обращаю внимание, что самое важное (куда идти) закрыто сверху каким-то объявление о дате изменения режима. Кому вообще нужна часто эта дата? — один раз прочитал и ладно. Поднимаю наверх этажи, опускаю вниз объявление. Заодно в тексте появился важный кейс — как попасть на парковку.

Разбираюсь окончательно со схемой работы этажей 0-3. В этом бизнес-центре 3-й этаж — уровень ресепшена (вот такой вот идиотизм) и объявление висит тоже на третьем этаже. Этажи 0-2 — служебные , нужны для погрузки и обычно не требуются обычным посетителям. Убираю их, кому надо — и так знает. Явно выделяю парковку в навигации.

Вот сейчас, кажется можно остановиться. Все картинки сразу:

К сожалению, изменения остались только в моем блоге. Я отнес переделанное объявление на ресепшен бизнес-центра. Секретарь сказала «спасибо, поменяем».

Видимо что-то пошло не так, объявление около лифтов все ещё старое.

12 октября   лифт   переверстка
Подписаться на блог…

Как писать дату и время в интерфейсах

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

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

В интерфейсе:

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

В бумажных отчетах:

  • год допустимо указывать даже тогда, когда он совпадает с текущим.

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

1 Абсолютные даты

1.1 Полный + время

Русский English
1 ноября, 12:25 November 1, 12:25
1 ноября 2014, 12:25 November 1, 2014, 12:25

⚠ Перед использованием попробуйте понять, зачем нужно время, если дата может быть в прошлом году

1.2 Короткий + время

Русский English
1 янв, 12:25 Jan 1, 12:25
1 дек 2015, 12:25 Dec 1, 2015, 12:25

1.3 Полный без времени

Русский English
1­ ноября November 1
1 ноября 2014 November 1, 2014

1.4 Короткий без времени

Русский English
1 янв Jan 1
2 ноя 2014 Nov 2, 2014

2 Относительные даты

2.1 Время в прошлом, длинно

Что Русский English
< 1 мин 1 секунду назад 1 second ago
5 секунд назад 5 seconds ago
< 59 мин 1 минуту назад 1 minute ago
2 минуты назад 2 minutes ago
5 минут назад 5 minutes ago
Сегодня 16:25 16:25
Вчера Вчера, 13:25 Yesterday, 13:25
Позавчера и старше 20 декабря, 13:25 December 20, 13:25
Позавчера и старше, если год не совпадает с текущим 20 декабря 2017 December 20, 2017

2.2 Время в прошлом, коротко

Что Русский English
< 1 мин 5 с назад 5 s ago
< 59 мин 5 мин назад 5 min ago
Сегодня 16:25 16:25
Вчера Вчера, 13:25 Yesterday, 13:25
Позавчера и старше 20 дек, 13:25 Dec 20, 13:25
Позавчера и старше, если год не совпадает с текущим 20 дек 2017 Dec 20, 2017

3 Диапазоны дат

В русском: если обе даты без пробелов, то среднее тире (&ndash;) без пробелов, если внутри даты есть пробелы, то между датами &thinsp;&mdash;&thinsp; (длинное тире отбитое тонкими пробелами). Если вы не используете среднее тире, то замените его на длинное.

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

3.1 Полный со временем

Отличие от 3.2: этот лучше подходит для связных текстов, использования в целых предложениях, заголовках писем или разделов

Русский English
С 1 ноября, 12:25 по 5 ноября, 13:35 From November 1, 12:25 to November 5, 13:35
С 1 ноября 2014, 12:25 по 12 мая, 13:35 From November 1, 2014, 12:25 to May 12, 13:35
С 1 ноября 2013, 12:25 по 12 мая 2014, 13:35 From November 1, 2013, 12:25 to May 12, 2014, 13:35
Когда один и тот же день:
1 ноября, с 12:25 по 13:35 November 1, from 12:25 to 13:35
1 ноября 2014, с 12:25 по 13:35 November 1, 2014, from 12:25 to 13:35

3.2 Средний (с тире) со временем

Отличие от 3.1: этот лучше использовать в таблицах и аналогичных конструкциях.

Русский English
1 ноября, 12:25 — 5 ноября, 13:35 (&thinsp;&mdash;&thinsp;) November 1, 12:25 — November 5, 13:35 (&thinsp;&ndash;&thinsp;)
1 ноября 2014, 12:25 — 12 мая, 13:35 (&thinsp;&mdash;&thinsp;) November 1, 2014, 12:25 — May 12, 13:35 (&thinsp;&ndash;&thinsp;)
1 ноября 2013, 12:25 — 12 мая 2014, 13:35 (&thinsp;&mdash;&thinsp;) November 1, 2013, 12:25 — May 12, 2014, 13:35 (&thinsp;&ndash;&thinsp;)
Когда одна дата:
12:25—13:35, 1 ноября (12:25&ndash;13:35) 12:25—13:35, November 1
12:25—13:35, 1 ноября 2014 (12:25&ndash;13:35) 12:25—13:35, November 1, 2014

3.3 Короткий со временем

Русский English
1 янв, 12:25 — 5 ноя, 13:35 (&thinsp;&mdash;&thinsp;) Jan 1, 12:25 — Nov 5, 13:35 (&thinsp;&ndash;&thinsp;)
1 дек 2015, 12:25 — 3 янв, 13:35 (&thinsp;&mdash;&thinsp;) Dec 1, 2015, 12:25 — Jan 3, 13:35 (&thinsp;&ndash;&thinsp;)
Когда одна дата:
12:25—13:35, 1 ноя (12:25&ndash;13:35) 12:25—13:35, Nov 1
12:25—13:35, 1 ноя 2014 (12:25&ndash;13:35) 12:25—13:35, Nov 1, 2014

3.4 Полный без времени

Русский English
В одном месяце
1­—5 ноября (1&ndash;5) November 1—5 (1&ndash;5)
1—5 ноября 2014 (1&ndash;5) November 1—5, 2014 (1&ndash;5)
В разных месяцах
1 ноября — 12 декабря (&thinsp;&mdash;&thinsp;) November 1 — December 12 (&thinsp;&ndash;&thinsp;)
1 ноября 2014 — 12 января (&thinsp;&mdash;&thinsp;) November 1, 2014 — January 12 (&thinsp;&ndash;&thinsp;)
1 ноября 2013 — 12 января 2014 (&thinsp;&mdash;&thinsp;) November 1, 2013 — January 12, 2014 (&thinsp;&ndash;&thinsp;)

3.5 Короткий без времени

Русский English
1 янв — 2 июня (&thinsp;&mdash;&thinsp;) Jan 1 — Jun 2 (&thinsp;&ndash;&thinsp;)
2 ноя 2014 — 12 дек (&thinsp;&mdash;&thinsp;) Nov 2, 2014 — Dec 12 (&thinsp;&ndash;&thinsp;)
2 ноя 2014 — 12 дек 2014 (&thinsp;&mdash;&thinsp;) Nov 2, 2014 — Dec 12, 2014 (&thinsp;&ndash;&thinsp;)

4 Длительность

Как делают другие:

Есть два формата: цифрами и словами. Вне зависимости от строкового представления сортировка всегда по длительности, а не по строковому представлению.

4.1 Цифрами

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

Стоит помнить, что 1 секунда и 1,0 секунда — не одно и то же, нельзя их путать.

С секундами      Только минуты
0:12,256 Ведущий 0: для минут обязателен
0:12 Ведущий 0: для минут обязателен
2:25 0:02 Для варианта Только минуты ведущий 0: для часов обязателен
25:25 0:25 В этом и ниже миллисекунды скорей всего не нужны, если речь идет не о спортивных соревнованиях
25:00 0:25
2:25:25 2:25
21:25:25 21:25
1:02:25:25 1:02:25 Только минуты в этом случае смотрится особенно неудачно
48:25:25 48:25

4.2 Буквами полный

Все числа округляются до целых. Написать 25 минут и 25,5 секунд — нельзя.

Русский English
Елси хотите миллисекунды, см. 4.1
12 секунд 12 seconds
2 минуты и 25 секунд 2 minutes 25 seconds
25 минут и 25 секунд 25 minutes 25 seconds
25 минут 25 minutes Обратите внимание, здесь не написаны секунды, так и надо
2 часа и 25 минут 2 hours 25 minutes
21 час и 25 минут 21 hours 25 minutes
1 день и 2 часа 1 day 2 hours
48 часов и 25 минут 48 hours 25 minutes
10 дней 10 days
2 недели и 5 дней 2 weeks 5 days Если нужно понедельное деление
6,5 месяцев 6.5 months

4.3 Буквами короткий

Русский English
12,256 с 12.256 s
12 с 12 s
2 мин 25 с 2 min 25 s
25 мин 25 с 25 min 25 s
25 мин 25 min Обратите внимание, здесь не написаны секунды, так и надо
2 ч 25 мин 2 h 25 min
21 ч 25 мин 21 h 25 min
1 д 2 ч 1 d 2 h
48 ч 25 мин 48 h 25 min
10 д 10 d
2 нед 5 д 2 w 5 d Если нужно понедельное деление
6,5 мес 6.5 mo

С десятичной дробью — лучше не надо

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

Лучше не использовать зачеркнутые варианты.

Десятичная Сколько это на самом деле
3,10 часа 3:06
3,20 часа 3:12
3,25 часа 3:15
3,30 часа 3:18
3,33 часа 3:20
3,40 часа 3:24
3,50 часа 3:30
3,60 часа 3:36
3,67 часа 3:40
3,70 часа 3:42
3,80 часа 3:48
3,90 часа 3:54
3,5 года
3,8 года 3 года, 9 месяцев и около 22 дней
3,2 месяца 3 месяца и около 6 дней

5 Выбор периода показа чего-нибудь

5.1. Говорите по-человечески

Неделя лучше 7 дней, месяц лучше 30 дней, это более по-человечески. С этим есть проблема: месяц менее однозначно, чем 30 дней, вариант 30 дней безопасней. Если вы уверены (например, проверили), что у вас разногласия нет, или что оно допустимо, то месяц, лучше последние 30 дней.

Пример: Яндекс в достаточно строгом продукте Яндекс.Метрика использует неделю и месяц. Они точно тестировали разные формулировки и сделали так:

Можно Яндексу, можно и вам

5.2 Пишите «дней», а не «суток»

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

5.3 Будьте последовательны

Хорошо: Неделя, Месяц, Квартал
Хорошо: Последние 7 дней, 30 дней, 90 дней
Плохо: Неделя, 30 дней, Квартал.

Примечание
90 дней и кварталы могут быть вместе и использоваться в разных частях системы одновременно. Если кому-то нужна поквартальная отчетность, должны быть точно кварталы. 1 квартал, 2 квартал, Q1, Q2, и так далее.

5.4 Используйте адекватные величины

Используйте те величины, какими бы назвали этот период в жизни. Вместо 48 часов лучше 2 дня, вместо 3600 секунд — 1 час, вместо 1440 минут — 1 день. 24 часа, 60 минут — норм. Могут быть исключения, но обычно так.

5.5 Не делайте слишком много

Это искусственный макет, так не надо:

Вот тут ↑ перебор вариантов. Такое количество пунктов сложно сверстать, из него непросто выбрать (с учетом того, они почти все одинаковые по тексту).

Что делать, если пунктов много:

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

5.6 Не дублируйте везде «последние»

И Мильчин, и другие люди советуют не дублировать в списках одинаковое начало.

5.7 Итого

Кажется, что выбирать надо из следующих вариантов (использовать все не надо):
секунды: 1, 5, 10, 15, 30, 60
минуты: 1, 5, 10, 15, 30, 60
часы: 1, 2, 4, 6, 8, 12, 24
дни: 1, 5, 7, 10, 14, 15, 30, 90, 180
недели: 1, 2, 4
месяцы: 1, 2, 3, 6, 12
лет: 1, 2, 5, 10

Если вашего интервала тут нет, может он и не очень осмысленен? Наличие в интерфейсе интервалов последние 5 часов, 18 минут, 13 дней, — вызывает вопросы. Такое может быть из-за особой специфики (например 5-часовые смены операторов), но обычно такого не должно быть.

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

Проще один раз отладить и сделать эталонную реализацию.


Подобные посты отмечены тегом гайдлайны
Подписаться на блог…

Как делать подписи для таймсерий

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

В чем проблема

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

Библиотека отрисовки почему-то решила не подписывать даты и подписала только время. На самом деле пеньки 3:00 21 мая, 15:00 23 мая, 3:00 26 мая, 15:00 28 мая, 3:00 31 мая, 15:00 2 июня. Понять это из подписей почти невозможно.

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

Первое, что нужно сделать — всегда писать даты:

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

Пурпурные линии — границы дней

В посте я расскажу что с этим всем делать.

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

  1. Подписи отметок соотносятся с масштабом. При показе данных за год показывать время с точностью до минут не имеет смысла.
  2. Всегда выбирается максимально детальный разумный масштаб. Если без проблем указывается с точностью до дней, то не надо укрупнять отметки до 5-дневных просто так.
  3. Отметки должны быть регулярны. Разный шаг не позволит удобно прикинуть промежуточное значение. Если регулярные метки не получаются, то основную часть отметок лучше сделать регулярными, а нерегулярные остатки сложить к одному из концов интервала.
  4. Смысловые отметки лучше несмысловых. Отметка 22:12 — странно, 22:30 — норм. Вряд ли имеет смысл использовать что-то, не попадающее в этот список:
    1, 5, 10, 15, 30 секунд,
    1, 5, 10, 15, 30 минут,
    1, 2, 4, 6, 12, 24 часов,
    1, 2, 5, 10, 15 дней,
    1, 2 недели (если нужны именно календарные недели),
    1, 2, 3, 6 месяцев,
    1, 2 года, 5, 10 лет.
    Дробными числами, не подходящими под указанные выше, допустимо подписывать только начало и конец.

Информативность

  1. Дублировать одно и то же — плохо. Не надо писать у отметок так: 01.01.2015, 01.02.2015, 01.03.2015, 01.05.2015. Но и 01.01, 01.02, 01.03, 01.05 тоже плохо (см. следующий пункт). Кстати, кто-нибудь заметил, что я пропустил апрель?
  2. Для дат лучше всего использовать формат 1 мая, 2 июня, 13 ноя. Месяцы сокращаются до трех букв без точки (кроме мая, июня и июля), ведущий ноль у числа не пишется.
  1. Если год на отметках повторяется, то лучше подписать его у первой отметки этого года, а у следующих не подписывать. Год стоит продублировать у крайних отметок, чтобы было проще понять, какая это дата.
  1. Секунды у времени не пишутся, если не сказано обратного — 22:12. Любое время, кроме полуночи лучше писать без ведущих нулей: 6:25, 9:13, 12:56, но 00:00. Для секунд, там где они нужны, допускается писать только секунды: 10:55, :56, :57, :58, :59, 11:00, :01, :02.

Оформление

  1. Если отметок много и они переносятся в две строки, лучше снизить число отметок, а не переносить.
  1. Текст подписи выравнивает по центру, сама подпись — по пеньку.
  2. Между отметками должен быть минимальный отступ в 16 пк, если отступ будет меньше, то отметки слипнутся.

Края интервала

Когда левая и правая границы важны, нужно подписать эти отметки явно. Скорей всего для этого придется убрать подписи у ближайших отметок: отметки 6:00 (между 3:52 и 8:00) и 2:00 (между 00:00 и 3:12) как бы должны быть, но не влезли:

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

Если края не принципиальны, то можно не подписывать оба конца:

Примеры

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

Если применить все рекомендации к примеру из начала поста, то получится как-то так:

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

Подписаться на блог…

Все вино из Парфенона [регулярно обновляется]

В посте собрано все вино из шоу Леонида Парфенова «Парфенон» со ссылками на вивино и магазины.
Пост обновляется.

Пишите замечания, предложения, вопросы, сообщайте об ошибках. Буду рад всему этому: mike.ozornin@gmail.com

Подписаться на блог…

Что почитать и посмотреть — 13

Более важные-интересные отмечены значком 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 пикселей

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

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

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

Скачать:

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

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

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

Все материалы перенесли в сайт рассказа о проекте: 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. Убрать все лишнее
  2. Вынести общее за скобки
  3. Соблюдать теории близости
  4. Использовать естественное соответствие
  5. Выравнивать текст осмысленно
  6. Убрать «почти, но не совсем»
  7. Следить за типографикой
  8. Редактировать текст
  9. Рассказывать по частям

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

Подписаться на блог…

От таблицы к визуализации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подписаться на блог…

Что почитать и посмотреть — 12

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

Общество

Вторая Катынь Highlight
Медуза о том, как 2 июня 1962 года в Новочеркасске военные расстреляли демонстрацию рабочих

Тренировочный лагерь «Правого сектора»
Илья Варламов показывает ещё одну волшебную детскую площадку

Boxes · Let’s Unlock Cities [Видео]
Убер снял рекламу про транспорт

«Это общее офигевание от всего мира»
Как живут россияне с синдромом Аспергера — официально несуществующим в России заболеванием

Животные, распознающие туберкулёз, рак и мины по запаху
Как находят туберкулез, когда на простой и хороший анализ совсем нет денег

В России людей все чаще заставляют извиняться на камеру. Зачем? Откуда это пошло?
Между тем шел 2017 год

New anti-terrorist ONE50 EVO bollard
В Москве после европейских террактов с грузовиками наставили бетонных блоков — полная фигня. А вот на видео не фигня

Разговор с «ангарским маньяком». Часть первая
Разговор с «ангарским маньяком». Часть вторая
Аудиоинтервью на Медузе

Дизайн

Создание навигации в подуличных переходах Московского метро 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)
В третьей части — Оракл

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

Разработка

Часть 1
Часть 2
Часть 3
Часть 4
IT-инфраструктура штабов Навального и сбор подписей — как было все устроено с точки зрения ИТ Highlight

Как железобетонно определить, печатный ли символ ввёл пользователь?
Василий Половнев показывает хак, как детектить печатные символы

Как мы отмечали 256 день года и рисовали пиксели через API Highlight
Контур рассказывает, как они делали свою пиксельюну рисовалку (как на Реддите)

011. Школа менеджмента — Ненасильственное управление [Видео]
Бобук (Григорий Бакунов) рассказывает как он возится с управляет программистами

q — Text as Data
Штука, которая делает sql-доступ к csv-файлам: определяет колонки и их тип, позволяет делать джойны. Самому ещё не пригодилась

Время — деньги. Как мы учили Яндекс.Такси точно рассчитывать стоимость поездки
Рассказ с техническими подробностями

I’m harvesting credit card numbers and passwords from your site. Here’s how.
Выключайте автозаполнение паролей в браузерах

Привидение-2: как перехитрить ведьму
Объяснение атаки на уязвимость в процессорах Spectre 2. Местами перебор, но интересно

Computer latency: 1977-2017
Dan Luu проверил задержку клавиатуры на разных устройствах. Спойлер: все плохо. На старом айфоне 3гс в 2.5 раза быстрей, чем на топовом Гугл Пиксель 2

Cursor keys belong at the center of your keyboard
Никита Прокопов рассказывает как перевесить курсорные клавиши в другое место и почему это надо сделать. Я не стал

Carbon
Инструмент для подготовки скриншотов кода

Назад в школу

Русский язык за 18 минут Highlight
Арзамас о русском языке

Лунный огонь Highlight
Можно ли добыть огонь с помощью лунного света и лупы? С ума сойти. Почему не в школе?

How Earth Moves [Видео]
Vsauce разжевывает как на самом деле движется Земля, перевод на русский

Правда и мифы о мигрени и ее «сёстрах» [Видео]
Врач-невролог Кирилл Скоробогатых рассказывает о причинах головной боли, современных методах лечени

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

Шапито

Flight of the Year // Trains, Bridges, Rapids, Mountains, Sunset, Gapping, Perching, Powerlooping [Видео]
Чувак мастерски летает на дроне

GEOMETRIE VARIABLE labora 4 [Видео]
Геометрический клип

30 Days Timelapse at Sea [Видео]
Залипательный корабельный таймлапс

Караоке с «анимодзи» [Видео]
Подборка караоке, не все правда интересные

ʎɐsʇɐd ʎdɯnɹƃ on Twitter [Видео] Highlight
Вот ещё караоке

Aluminum and Mercury [Видео]
Опыты с аллюминием и ртутью

We’ve been playing ’em wrong this entire time [Видео]
Как на самом деле надо играть со Слинки (пружинка-радуга)

OK Go — Obsession — Official Video [Видео]
Свежий (на тот момент) клип OK Go

Шевчук — о батле с Путиным и войне в Чечне [Видео]
Шевчук у Дудя

Cooking in the Archives
Alyssa Connell и Marissa Nicosia находят старые рецепты 17—19 века, расшифровывают их и готовят по ним

TEXTOR TS500 circular blade slicer for cheese [Видео]
Как нарезают сыр

Чёртова школа Лидмашины
Клевый формат рекламы

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

Подписаться на блог…

Что делать с масштабом временных рядов

Хочу рассказать про один способ отображения временных рядов (time series — графиков, где ось абсцисс — время).

Например, есть такой график:

Представим, что нам нужно отслеживать состояние какой-то сложной системы со многими параметрами: загрузкой ЦПУ, сетью, трафиком и чем-то ещё. В этом случае графики должны помогать нам:

  • замечать выбросы, отличающиеся от нормального поведения системы: какая-то аномальная загрузка ЦП в датацентре Амстердама, большой исходящий трафик в Сингапуре;
  • отмечать какие-то паттерны: в датацентрах какая-то периодическая дисковая активность в середине дня;
  • видеть при этом каждый из параметров: здесь наблюдается плавный рост, а потом резкое падение — сработало масштабирование нагрузки, а во втором случае рост был быстрый, системы масштабирования не успели отреагировать;
  • сравнивать параметры между собой: серверы в Сингапуре почти всегда загружены, а в Европе простаивают, не дотягивают и трети сингапурских;

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

Если графиков будет много, то получится нечитаемая каша:

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

Сейчас я немного изменю график, чтобы показать, как можно компенсировать эти проблемы.

Исходный график:

Сначала поделим наш график по оси ординат на несколько групп:

Потом раскрасим их по возрастанию значения:

И сложим их одну на другую:

Весь процесс (гифка):

И как раз такие графики можно снова сложить стопкой:

Такой график отлично показывает наличие пиков и нулей: пики — яркие, нули — пустоты. Кроме этого он не портит вертикальный масштаб: не сжимает его и не растягивает.
Оптимальный вертикальный масштаб графика, Илья Бирман

И с нашими ожиданиями от графика стало все лучше, вот с этими:

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

Ещё раз было-стало:

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

Ссылки по теме:

Подписаться на блог…

Как относиться к критике, как к комплименту

«Критика — это комплимент» написал в 2011 году Илья Бирман.

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

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

Да ничего подобного!

Моя проблема: критика бесит

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

  • Да блин, опять комментарии, сколько можно!
  • Ну куда ты лезешь? Тебя спросили?
  • А сам-то умеешь верстать?
  • Сам такой!
  • Тоже мне в дизайне он понимает, Лебедевы вы все стали!

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

Решение: что я делаю, чтобы «бесит» не мешало

Я пока не придумал как сделать так, чтобы все это не лезло. Пока я обхожусь тем, что делают паузу, проговариваю про себя мантру и после этого читаю критику снова. Пока способ помогает.

Вот мантра:

  1. Раз критикуют — хотят помочь и значит не все равно. Если бы было все равно, не написали бы. Не написать проще, чем написать.
  2. Критикуют не меня, а работу: это в тексте ошибка или макет кривой. Нет, если в макет ошибка, это не значит, что я фиговый дизайнер.
  3. В следующий раз будет лучше, главное не тупить и сделать выводы.
  4. Потерпи, если будешь думать и делать, делать и думать, то результат будет лучше, увидишь.
    Особенно этот пункт помогал в Школе стажеров, когда арт-директор разносил в клочья мой диплом. Но без боли на первую итерацию не глянешь.

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

Чтобы критика не прошла впустую я действую в два этапа:

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

Как критиковать

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

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

Как быть — почитайте вот умных людей:

P. S. После публикации поста получил критику на пост. И ведь все было по делу: дописал краткое содержание поста Ильи Бирмана (чтобы не вынуждать открывать ссылку всех подряд), переписал заголовки и написал важный P. S.

Подписаться на блог…
Ранее Ctrl + ↓