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

Иногда бывают и проблемы. Например, вот так выглядит телеграм-канал Сергея Бутрия. Я уже боюсь его открывать.

И не стоит забывать главное правило вот таких умных, как я:

Каналы в телеграме — это хорошо, но при плохом самочувствии лучше обратиться ко врачу

Расскажу об одном простом принципе в информационном дизайне и дизайне вообще

ТАСС сделало интерактивный рассказ про дирижабль «Италия»:

Не собираясь оценивать их рассказ, я расскажу об одном моменте рассказа.

На странице есть схема устройства дирижабля:

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

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

Лучше сразу всё подписать:

Особенно глупо точки смотрятся на этой фотографии:

Чтобы не заставлять читателя страдать, есть простое правило:

Если можно не прятать, лучше не прятать.

Когда будете подписывать схемы и скриншоты почитайте на что обращать внимание: Как подписывать скриншоты

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

О чем речь

Допустим, у нас есть некоторая форма входа, что-нибудь такое:

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

Получится что-то такое:

Большинство сервисов в интернете делает именно так. Я пособирал немного форм входа из разных сервисов. Вот:

Копилка: эти и другие формы входа (21 картинка)

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

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

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

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

Кажется, что теперь все хорошо:

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

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

WTF? Что происходит?

Это сработала система безопасности в Хроме. Если включено автоматическое заполнение полей, то Хром заполняет поля, но доступа к их значениям через джаваскрипт не будет. Доступ к значениям полей будет заблокирован до тех пор, пока пользователь явно не повзаимодействует со страницей, например, не кликнет куда-нибудь мышкой. Так они защищаются от кражи данных на плохо сделанных сайтах, где есть XSS-уязвимости.

Вот задача в баг-трекере Хрома: bugs.chromium.org/p/chromium/issues/detail?id=163072.

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

Как можно выкрутиться

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

1. Отлавливать автозаполнение поля

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

Большинство способов определения ходят вокруг обработки CSS-свойств поля. Подборка решений есть, например, здесь: stackoverflow.com/questions/11708092/detecting-browser-autofill

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

2. Дать нажать, но не показывать две красных надписи

Второй способ — не блокировать кнопку, но при этом не показывать два красных сообщения «Дорогой пользователь, нам жаль, что вы не способны справиться с заполнением двух полей». Можно обойтись с отправкой пустой формы более изящно. Например, можно потрясти формой входа, как это делает Цеплин (http://app.zeplin.io).

3. Поменять дизайн так, чтобы защита Хрома отключалась

Третий вариант — переделать дизайн так, чтобы пользователь был вынужден повзаимодействовать со страницей. В этом случае Хром отключит защиту и блокировка-разблокировка формы будет сработать корректно.

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

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

Вот такие пироги.

Хочу написать про одну редакторскую штуку в посте отвечать туда же — правило переписки

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

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

Как-то я дошел до такой вот таблицы, и она оказалась решением. Таблица стала скелетом поста, с ней пост остался таким очевидным, но при этом перестал быть идиотским.

В чем магия

Таблица работает на том же принципе, что и шутка эмоции Чака Норриса:

С первой секунды ясно, что все картинки одинаковые, можно даже и не пытаться ничего сравнивать. Но читатель все равно сравнивает картинки. Сила формата.

Аналогично действует и таблица. Напомню её:

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

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

Плюс таблица немного мемобразующая, может поэтому именно таблицу запостил Максим Ильяхов в телеграм-канале про деловую переписку (t.me/ya_vas_uslyshal/321).

Есть и вторая часть работоспособности таблицы, но в ней я не уверен. Некоторые варианты настолько идиотские, что возникает вопрос «Неужели так кто-то делает?». И оказывается, что чтобы быть нормальным очень просто: достаточно не писать ответ в телеграм, если написали в фейсбук.

Некоторое время назад я написал серию постов про кофе. Это подробное руководство про кофе, наверное одно из самых полных на русском языке.

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

В этом посте я расскажу как пить приличный кофе за 20—30 рублей за чашку.

Что понадобится

Вам понадобится ровно два предмета:

Кофе-пресс можно купить в Ашане (~300 ₽) и в Икее (499 ₽). А вот кофе ни в Ашане, ни в Икее лучше не брать.

Какой кофе выбрать

Начните с чего-нибудь простого. Вот недорогой кофе, с которого можно начать:

Цены за чашку получатся такими при покупке большой пачки кофе, если брать маленькую добавьте 15—20 %.

Как готовить

Засыпьте 13 г в кофе-пресс — одну столовую ложку с достаточно большой горкой.

Залейте в кофе-пресс 200 мл воды при 95° — немного остывший кипяток.

Перемешайте ложкой один раз и оставьте завариваться. Больше мешать не надо.

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

Истинные кофеманы будут против

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

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

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

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

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

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

Шпаргалка:

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

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

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

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

Скоро наступит будущее (UPD. Наступило в macOS 10.14.4)

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

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

Темная:

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

mikeozornin.ru или mikeozornin.ru/blog

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

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

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

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

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

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

Веду рубрику «Дизайн-вопрос». Отвечаю на вопросы о дизайне и смежных областях. Не халтурю, не пишу отписки и отвечаю на совесть: частенько для ответа приходится найти, прочитать и изучить исследования, рекомендации, набрать и подобрать иллюстрации или примеры. Вопросы пишите на 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. Начертания
   Минимум: Обычное, полужирное, тонкое (все с курсивом), хорошо если больше.

2. Набор цифр
   Есть маюскульные цифры, минускульные опциональны. Есть пропорциональные и моноширинные цифры (скорей всего это есть у всех), моноширинные дефолт.

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

4. Универсальный
   Было бы хорошо, чтобы он хорошо работал и в печатной продукции (руководства, отчеты, маркетинговые материалы). Вдруг мы сможем использовать его и там.

5. Высокая емкость
   В наших продуктах много данных, поэтому хорошо бы, чтобы шрифт не был слишком широким.

Эстетика

1. Чистый.

2. Простой, но не упрощенный.

3. Выглядит технологично.
   Создаёт ощущение технологий и хай-тека, а не теплой ламповости или стимпанка (как Текстбук, Гилл или 20 копеек).

4. Нормальная кириллица.

5. Не должен казаться очень чужеродным, создавать из-за непривычности ощущение халтуры.

Доступность

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

2. Желательно не сильно заезженный, как минимум не фирменный шрифт наших основных конкурентов.

3. Желательно не космически дорогой.

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

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

У кого-то будут другие требования к функции: кто-то предпочтет узнаваемость и уникальность в угоду считываемости. У кого-то будут очень строгие требования к емкости шрифта. Именно из-за особых требований к емкости шрифта родились шрифты 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 шага), помогали.

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

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

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

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

• 001. Making something out of something: Typefaces, history, culture, and meaning
• 001. Типографика Яндекса — Илья Рудерман
• Introducing the New System Fonts (WWDC 2015)
• Typography and Fonts (WWDC 2016)

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

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

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

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

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

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

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

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

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

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

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

Фотошоп

Ещё чаты

Фейсбук

Мэйл.апп

Ещё файндер

Квиктайм?

Инстаграм

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

Ещё чаты

Док из макоси

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

Ютуб

Сири

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

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

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

Снова чаты

Фотошоп

Твиттер

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

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

Эйрдроп

Фейсбук

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

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

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

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

Пинтерест

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

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

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

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

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

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

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

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

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

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

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