Бывают фразы ни туда, ни сюда. Например, «можно увеличить тут отступ и кегль». Я после таких сижу и туплю. Делать что-то надо или нет. Рассказываю, что с этим делать.

Допустим, говорят «можно увеличить тут отступ и кегль» — ну ок, можно увеличить отступ, можно кегль. Увеличиваем отступ, или кегль, или и то, и другое? Есть ли другие решения, что в итоге делаем?

Или вот «файлы можно выкладывать в артифакторий», — еще можно в гит лфс, фтп-сервер, на файловую шару, в S3. Куда нужно? Куда лучше?

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

Ещё пример.

Мне однажды написали буквально следующее «Будут ли замечания из твоего письма оформлять как баги? У меня по письму вопросы есть».

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

Всегда ли нужно что-то предлагать? Нет, не всегда. Но и отсутствие предложения тоже надо сформулировать ясно. Пример ниже.

У нас есть три варианта:

1. Сделать все своими руками. У нас мало свободных ребят, поэтому по времени — два месяца, по деньгам — K рублей.
2. Своими силами сделать скелет макета, а для иллюстраций взять подрядчиков. По времени — месяц, по деньгам — N рублей.
3. Все отдать на аутсорс. По времени — три недели, по деньгам — M рублей.

Как поступим?

И итоге вся схема рабочего общения выглядит примерно так:

См. также

Видео Артёма Горбунова общаться вопросами и предложениям

Все подобные посты — с тегом сделать удобно читателю

Собрал разные дизайнерские игры потренировать насмотренность

Мастхевные

https://bezier.method.ac
Что делать: повторять форму фигуры кривой безье
Зачем: стать гуру вектора, рисовать крутые иконки и векторные иллюстрации

https://cantunsee.space
Что делать: находить мелочи и ошибки в картинках
Зачем: проводить авторский надзор 85 лвл, за секунду находить ошибки недочеты в реализации

Что делать: находить ошибки в инфодизайне
Зачем: натренироваться базовым важным вещам в инфодизайне

Если прошли игры выше

https://betterwebtype.com/triangle/
Что делать: играться с параметрами ширины блока текста, интерлиньяжа и кегля, чтобы собрать идеальный параграф
Зачем: потренировать чувство текстового блока

https://type.method.ac
Что делать: расставлять буквы в строке
Зачем: потренировать чувство букв, потренировать в кернинге, если делаете шрифт (ну да)

https://color.method.ac
Что делать: подбирать цвет по полному совпадению, искать противоположный и гармоничный к заданному
Зачем: потренировать глазомер цвета

https://boolean.method.ac
Что делать: пользуясь булевыми операциями сделать из запчастей иконку
Зачем: потренироваться, чтобы быстрее собирать иконки

https://shape.method.ac
Что делать: исправлять сломанную форму буквы усиками кривых безье
Зачем: потренировать чувство вектора и букв

Знаете ещё какие-нибудь?

Постоянно путаюсь Bold — сколько это в цифрах font-weight, сделал себе шпаргалку.

Вот толщины в названии шрифтов

Это стандартные толщины по умолчанию. Если вдруг в шрифте есть более редкое, например, Book, то его толщину в цифрах тоже можно узнать:

• Берете файл шрифта
• Бросаете его в https://fontdrop.info/ (или другой просмотрщик шрифтов)
• Открываете вкладку Data · OS/2 and Windows Metrics Table и ищете usWeightClass.

Например, как выглядит Fira Sans Book:

Чтобы использовать font-weight важно правильно настроить CSS-маппинг (замаппить название шрифта на толщине).

Вот правильный (code.cdn.mozilla.net/fonts/fira.css):

@font-face{
    font-family: 'Fira Sans';
    src: url('eot/FiraSans-Hair.eot');
    src: local('Fira Sans Hair'),
         url('eot/FiraSans-Hair.eot') format('embedded-opentype'),
         url('woff/FiraSans-Hair.woff') format('woff'),
         url('ttf/FiraSans-Hair.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

Про один частный случай принципа «В письме уже есть всё нужное»

Напомню принцип:
Чтобы собеседнику было проще ответить, в вашем письме должно быть все необходимое. Даже если все материалы были в треде раньше, даже. Покажу на примере задачи «попросить доступ».

Как не надо просить доступы

Вот антипримеры:

• — Привет! Дай мне доступ к макетам.
  Кому «мне» (надо глянуть адресата), к каким макетам (нужно будет спросить).
• — Привет! Дай мне и Насте доступ к макетам.
  Кому «мне» (надо глянуть адресата), какой Насте (нужно будет спросить), к каким макетам (нужно будет спросить).

Почему так происходит

У вас просто разная картинка мира

Как надо

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

Маргарита!

Дай мне (Мише Озорнину) и Насте Ивановой доступ к макетам.

Проект: Secret Project Name
Доступ: смотреть и писать комментарии
Наши адреса:
mozornin@example.com
aivanova@example.com

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

Пишу еще про один заскок.

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

— Пойдем в бар?
— Мне доктор запретил пить алкоголь, пока я принимаю лекарства.

— Можем завтра созвониться в 12?
— Не могу, мне кота везти на операцию.

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

Зачем? Что мне с этим делать? Думать про доктора и потенциальный диагноз? Переживать за кота? Вспоминать как помочь (и нужно ли) при панической атаке?

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

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

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

UPD. Получил комментарий, что:

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

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

И да, многие воспримут «Мне не интересно» в такой форме резковато. Но это вопрос формы, а не смысла. Например:

Мне это не интересно на пейнтбол.
↓
Я буду рад всех увидеть, но вот конкретно на пейнтбол не хочу. Давайте что-нибудь другое, например: …

Или даже так:

Ребята, я так рад, что всех вас увижу после этого ковидного года. С нетерпением жду нашей встречи. Я огорчен, что пока из вариантов только те, которые мне ну совсем-совсем не интересны (ну вот такой я человек). Давайте что-нибудь другое, например: …

Или даже так:

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

А иначе получается так:

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

Заметил, что ставлю ссылку отдельно от текста.

Не так:
Посмотри, норм ли так http://mikeozornin.ru/blog/all/how-to-download-screens-from-zeplin-and-figma/ ?

А так:
Посмотри, норм ли так?
http://mikeozornin.ru/blog/all/how-to-download-screens-from-zeplin-and-figma/

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

Выкладываю несколько шаблонов верстки эл. писем, которые помогут сверстать аккуратное, красивое, адаптивное эл. письмо без знаний html и css

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

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

Слева — человеческая, справа что будет для почтовых программ:

Фреймворков по сути два:

• Foundation for email
• MJML

Мне как-то надо было сверстать пару писем. Я глянул MJML и разобрался буквально за пару минут. MJML простой, понятный, мой шаблон доделывали люди, совсем не знакомые с HTML и справлялись. Foundation скорее всего тоже норм, но я не пробовал.

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

https://github.com/mikeozornin/email-skeleton

Шаблон 1: простое аккуратное письмо

github.com/mikeozornin/email-skeleton/blob/master/src/1 simple.mjml

Превью на десктопе:

Превью на мобильном:

Шаблон 2: более сложная верстка

github.com/mikeozornin/email-skeleton/blob/master/src/2 release notes.mjml

Превью на десктопе:

Превью на мобильном:

Шаблон 2: более сложная верстка

github.com/mikeozornin/email-skeleton/blob/master/src/3 tasks.mjml
Это письмо сверстал один из наших техрайтеров, разобрался и сделал. С меня были лишь небольшие улучшения.

Превью на десктопе:

Превью на мобильном:

Как пользоваться

Ещё раз где скачать: https://github.com/mikeozornin/email-skeleton

Сначала отредактируйте шаблон письма, используя онлайн-редактор (mjml.io/try-it-live) или программу на десктопе (рекомендую этот способ). Если вам удобнее VS Code или Sublime Text, то есть плагины и для них.

Сконвертируйте в html с помощью инструментов MJML. Это можно сделать и на сайте, и в клиенте MJML. Если нужно встроиться в CI, то у MJML есть рантайм на ноде.

Готовый html разметьте своими данными и прикрутите к скрипту.

Поддержки шаблонов нет, но если совсем никак, пишите: mike.ozornin@gmail.com

Переношу твиттер-тред в блог, чтобы не пропало и гуглилось. Отсюда: https://twitter.com/mikeozornin/status/1423199411065208834

Привет, Леша! Раз попросили, выскажусь. Написать все это внутри приложения я не могу, там 140 символом ограничения.

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

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

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

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

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

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

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

У меня вообще никогда нет цели что-то почитать в приложении Тинькофф. Для почитать у меня есть Books, Reeder, Pocket и Tweetbot. Почитать в приложении банка это как чайник, читающий вслух ленту фейсбука. А что, удобно: и кофе пьешь, и новости слушаешь.

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

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

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

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

Истории с самого начала выглядят как попытка не проблемы, существующие у меня, а повысить свои метрики: дочитываемость Т———Ж, вовлечение, время в приложении или что-то еще.

Я как
продакт-менеджер,

Хочу
получить премию по выполнению KPI,

Поэтому я
вставлю истории в банковское приложение.

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

https://t.me/meow_design
Сергей Николаев (@kefiijrw)

https://t.me/anatoly_burov_channel
Анатолий Буров (@anatoly_rr)

https://t.me/priunil
Ян Хацкевич

https://t.me/likelikelikelikelike
Женя Арутюнов

https://t.me/sergeykashin
Сергей Кашин (@sergeykashin)

https://t.me/nickmitinsays
Коля Митин

https://t.me/che_kuda
Марк Родионов

https://t.me/krz42
Александр Кароза (@Karoza42)

https://t.me/nevyvovzhuh
Надя Цветкова (@hellafuckingood)

Какие небольшие интересные блоги вы читаете? Есть что посоветовать?

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

Посмотрите на эту картинку, представьте себя на месте синего.

Закипели немного, да?

Почему этим вообще стоит заниматься

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

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

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

Ещё бывает так, что разбирать багрепорт начали через неделю после репорта (кто-то был в отпуске или просто высокая загрузка). Начали у меня уточнять, а я сам не могу разобраться, что же я имел ввиду. Им воспроизвести не удается, а я не могу понять своё же описание. ¯\_(ツ)_/¯ В эти моменты очень стыдно.

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

Хороший багрепорт

Хороший с моей точки зрения багрепорт состоит из следующих блоков.

1. Понятное краткое описание проблемы

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

Хорошие примеры:

• Ошибка 404 при переходе на английскую версию статьи
• Неправильный отступ в кнопке с иконкой button primary transparent
• Приложение крешится при попытке отправить прогрессивный jpeg
• Невозможно задать себе имя «Ян», т. к. оно слишком короткое

Плохие примеры (мало подробностей):

• Ошибка 404
• Неправильный отступ в кнопке
• Приложение крешится
• Не получается изменить имя

Плохие примеры (слишком много подробностей для заголовка):

• Неправильный отступ в кнопке с иконкой button primary transparent. В жизни 6 пк 12пк 6 пк 8 пк, а надо 6 пк 8пк 6пк 6пк
• Приложение под macOS версии 10.5.5 build 56718 крешится при попытке отправить прогрессивный jpeg в общий чат. При отправке пнг такого нет

2. Как воспроизвести

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

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

1) Открыть страницу профиля
2) Нажать на кнопку «Редактировать профиль»
3) Вписать в поле «Имя» значение «Ян»
4) Нажать на кнопку «Сохранить»

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

Ожидается: профиль сохранится

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

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

3. Скриншоты или скринкасты

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

4. Окружение

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

Как внедрить

Первое время может быть непросто. Хочется срезать углы и описать покороче, ведь «и так понятно».

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

Мне помогает иметь шаблон багрепорта в заметках и трекерах. Скопировал, заполнил, молодец.

Сделайте удобно читателю

Вообще этот прием — один из примеров более общего приёма «сделайте удобно читателю».