{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Виталий Филатов: заметки с тегом редактирование", "_rss_description": "Меня зовут Виталий Филатов. Я коммерческий писатель, помогаю бизнесу рассказывать о себе и продукте. Пишу и редактирую статьи, инструкции, текст сайтов и интерфейсов. Люблю работать в команде с дизайнерами и разработчиками.", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/vitalyfilatov.ru\/tags\/redaktirovanie\/", "feed_url": "https:\/\/vitalyfilatov.ru\/tags\/redaktirovanie\/json\/", "icon": "https:\/\/vitalyfilatov.ru\/user\/userpic@2x.jpg?1613163987", "author": { "name": "Виталий Филатов", "url": "https:\/\/vitalyfilatov.ru\/", "avatar": "https:\/\/vitalyfilatov.ru\/user\/userpic@2x.jpg?1613163987" }, "items": [ { "id": "96", "url": "https:\/\/vitalyfilatov.ru\/all\/input\/", "title": "Поле ввода с подсказками", "content_html": "

Помогаем пользователю заполнить сложное поле и разбираемся, чем задача отличается от проблемы. Кейс свежий, детали под NDA, поэтому всё в условном дизайне и без конкретики.<\/p>\n

Ситуация<\/h2>\n

Пользователю нужно заполнить графу с номером документа, подтверждающего качество товара. Бэк-офис проверяет документы, у товара в каталоге появляется отметка подлинности, и покупатели охотнее его берут.<\/p>\n

\n\"\"\n
Качество товаров в России подтверждают сертификаты и декларации соответствия<\/div>\n<\/div>\n

Нумерация у документов ожидаемо дикая, по четыре префикса на каждый вид:<\/p>\n

\n

ЕАЭС [N] RU [Д,С]<\/b>-XX.YYYY.A.00000<\/p>\n<\/blockquote>\n

\n

РОСС RU [Д,С]<\/b>-XX.YYYY.A.00000<\/p>\n<\/blockquote>\n

\n

ТС [N] RU [Д,С]<\/b>-XX.YYYY.A.00000<\/p>\n<\/blockquote>\n

\n

RU [Д,С]<\/b>-XX.YYYY.A.00000<\/p>\n<\/blockquote>\n

У деклараций есть N и «Д» перед дефисом, у сертификатов пишем только «С». Остальные части номера тоже хитрые: сначала русские буквы и цифры, потом они же с латиницей, потом опять русская, потом только цифры.<\/p>\n

Пользователи ожидаемо путаются, пишут в поддержку и плохо проводят время. Нужно помочь им разобраться и правильно всё ввести. Для этого фронты придумали узнавать префикс и накладывать на поле нужную маску:<\/p>\n

\n\"\"\n<\/div>\n

Задача<\/h2>\n

Маску мы показываем, но пользователи всё ещё плохо понимают, где какие символы вводить. Когда пользователи ошибаются, форма ругается ошибками, но это не очень помогает.<\/p>\n

\n\"\"\n<\/div>\n

Нужно как-то подсветить, что часть номера может состоять как из латинских символов, так и из русских. Есть памятка во всплывающем окне, где изложен весь этот ребус. Она написана по мотивам документации, нужно переписать по-человечески:<\/p>\n

\n

Как заполнить номер<\/b><\/p>\n<\/blockquote>\n

\n

С или Д<\/b> — кириллические буквы. Символ принадлежности номера к сертификату\/декларации соответствия<\/p>\n<\/blockquote>\n

\n

ХХ<\/b> — кириллические буквы и цифры. Код страны изготовителя продукции<\/p>\n<\/blockquote>\n

\n

YYYY<\/b> — латинские и кириллические буквы и цифры. Код органа по сертификации, выдавшего сертификат соответствия<\/p>\n<\/blockquote>\n

\n

А<\/b> — только кириллические буквы. Тип объекта сертификации<\/p>\n<\/blockquote>\n

\n

00001<\/b> — только цифры. Порядковый номер сертификата соответствия<\/p>\n<\/blockquote>\n

Такое получается, потому что постановщики задач в продукте часто мыслят категориями разработки и описывают в инструкции технические требования, а не порядок действий для человека. Это нормально.<\/p>\n

Решение<\/h2>\n

Формальное.<\/b> Изучим предмет и напишем памятку в понятном формате: какие бывают номера и какие буквы вводить. Про заглавные писать не будем, пусть фронты сделают перевод всех символов в верхний регистр. Остальное изложим от читателя. Заодно чуть поменяем маску, чтобы не обозначать русские буквы латинскими. Получится примерно так:<\/p>\n

\n

Как заполнить номер<\/b><\/p>\n<\/blockquote>\n

\n

1. Найдите номер документа<\/b><\/p>\n<\/blockquote>\n

\n

У сертификата номер в Росаккредитации указан внизу листа, а у декларации в самом верху.<\/p>\n<\/blockquote>\n

\n

Сертификат<\/b><\/p>\n<\/blockquote>\n

\n

— ЕАЭС RU С-ББ.YYYY.Г.00000<\/p>\n<\/blockquote>\n

\n

— РОСС RU С-ББ.YYYY.Г.00000<\/p>\n<\/blockquote>\n

\n

— ТС RU С-ББ.YYYY.Г.00000<\/p>\n<\/blockquote>\n

\n

— RU С-ББ.YYYY.Г.00000<\/p>\n<\/blockquote>\n

\n

Декларация<\/b><\/p>\n<\/blockquote>\n

\n

— ЕАЭС N RU Д-ББ.YYYY.Г.00000<\/p>\n<\/blockquote>\n

\n

— РОСС RU Д-ББ.YYYY.Г.00000<\/p>\n<\/blockquote>\n

\n

— ТС N RU Д-ББ.YYYY.Г.00000<\/p>\n<\/blockquote>\n

\n

— RU Д-ББ.YYYY.Г.00000<\/p>\n<\/blockquote>\n

\n

2. Начните вводить номер<\/b><\/p>\n<\/blockquote>\n

\n

Введите первые символы номера, и в поле появится подсказка с его форматом. Жирным выделена общая часть для всех номеров:<\/p>\n<\/blockquote>\n

\n

ЕАЭС RU С-ББ.YYYY.Г.00000<\/b><\/p>\n<\/blockquote>\n

\n

ББ<\/b> — русские буквы и цифры<\/p>\n<\/blockquote>\n

\n

YYYY<\/b> — цифры, русские или английские буквы<\/p>\n<\/blockquote>\n

\n

Г<\/b> — русская буква<\/p>\n<\/blockquote>\n

\n

00000<\/b> — только цифры<\/p>\n<\/blockquote>\n

Понятно, что изначальную проблему памятка не решает и нужно идти дальше. Хорошо бы не только написать в мире читателя, но и разобраться, где именно у него возникает проблема, и работать с ней по месту.<\/p>\n

Полное.<\/b> Очевидно, проблемы у пользователя возникают в момент ввода номера, а потому отрывать его от ввода и показывать памятку бессмысленно. Её нужно открыть, прочитать и запомнить, а потом ещё и применить. Поэтому стоит просто подсказывать нужное по мере ввода. Вот примерно так:<\/p>\n

\n\"\"\n
Маску можно распознать по первому символу: все четыре вида уникальны, а тип документа мы уже знаем<\/div>\n<\/div>\n

Можно ограничивать ввод по позиции курсора, но это сложнее в реализации и не факт, что сильно удобнее. Поэтому ограничимся подсказками и за кадром проработаем ошибки.<\/p>\n

На этом стоило бы и закончить, но у нас есть ещё два решения.<\/p>\n

Избыточное.<\/b> Можно вместо маски показывать набор полей для каждой части номера. Выглядит серьёзно, но на деле только сделает дороже разработку и поддержку. Ещё это усложнит обработку при вставке из буфера обмена, а пользователи чаще всего копируют номер документа, а не набирают его руками. Вот так не нужно:<\/p>\n

\n\"\"\n<\/div>\n

Идеальное.<\/b> Сделать так, чтобы человеку вообще ничего не надо было вводить. Пусть номер считывает камера телефона и распознаёт нейросеть. Пока это возможно лишь технически, но когда-нибудь наша цивилизация покорит космос, и такие вещи станут ожидаемой нормой.<\/p>\n

Выводы<\/h2>\n

Формальную часть решения у нас точно примут — она не противоречит условиям задачи и ситуации в команде продукта. А вот полное, скорее всего, завернут или добавят частями в конец бэклога. Решение нужно ещё вчера, есть задачи важнее, а разработчики и так вывихнули мозги, пока вкрячивали подстановку маски в типовое поле ввода, которое это не предусматривало.<\/p>\n

Тем не менее задачи стоит решать полностью, чтобы собирать портфолио<\/s> постепенно убеждать окружающих в пользе UX-специалистов. А заодно подкреплять идею, что пользовательские проблемы решаются не только редактурой текста, но и организацией смысла вообще.<\/p>\n", "date_published": "2024-10-24T11:23:04+05:00", "date_modified": "2024-10-24T13:17:21+05:00", "image": "https:\/\/vitalyfilatov.ru\/pictures\/086-original@2x.png", "_date_published_rfc2822": "Thu, 24 Oct 2024 11:23:04 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "96", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/vitalyfilatov.ru\/pictures\/086-original@2x.png", "https:\/\/vitalyfilatov.ru\/pictures\/086-mask@2x.png", "https:\/\/vitalyfilatov.ru\/pictures\/086-error@2x.png", "https:\/\/vitalyfilatov.ru\/pictures\/086-result@2x.png", "https:\/\/vitalyfilatov.ru\/pictures\/086-toomuch@2x.png" ] } }, { "id": "92", "url": "https:\/\/vitalyfilatov.ru\/all\/status\/", "title": "Статус с числительным", "content_html": "

Заметка о согласовании глаголов с числительными: как сначала не получалось, а потом я уточнил ограничения и получилось.<\/p>\n

Задача<\/h2>\n

Есть умный терморегулятор для батареи отопления. Он работает как автоматический вентиль: накручивается на трубу и открывает-закрывает клапан, поддерживая нужную температуру в комнате.<\/p>\n

\n\"\"\n
Умный регулятор Aqara. Фото неизвестного автора из отзывов на Яндекс-Маркете<\/div>\n<\/div>\n

Поскольку это умный<\/i> терморегулятор, в нём много чего есть: защита от детей, режим антифриза, контроль заряда батарейки, перекрытие клапана. Все изменения в работе отражаются в событиях приложения умного дома. Нужен текст этих событий.<\/p>\n

Сложность возникла с формулировкой изменения температуры. Каждый раз, когда мы выставляем температуру, в историю пишется событие типа:<\/p>\n

\n

На термоголовке установлена температура XX,X градусов<\/p>\n<\/blockquote>\n

Дизайн уже согласован, менять ничего нельзя. Нужно написать в одну строку, влезть в количество символов с обязательной дробью и ещё как-то отметить, где пользователь выставил температуру: физической крутилкой или в приложении.<\/p>\n

Решение<\/h2>\n

Уберём пока про термоголовку и заменим слово «градусов» на символ:<\/p>\n

\n

На термоголовке установлена температура XX,X градусов<\/p>\n<\/blockquote>\n

\n

↓<\/p>\n<\/blockquote>\n

\n

Установлена температура XX,X°<\/p>\n<\/blockquote>\n

Стало короче, но всё ещё не влезает. Слово «температура» вроде лишнее, но без него придётся согласовывать окончания глагола:<\/p>\n

\n

Установлен 1,0°<\/p>\n<\/blockquote>\n

\n

Установлено 30,0°<\/p>\n<\/blockquote>\n

Следить за окончаниями разработчики категорически откажутся, нужно изящно-тупое решение. Заменить слово символом или поставить двоеточие не годится, получается ребус или неестественный уродец:<\/p>\n

\n

❌ Установлена t° 1,0<\/p>\n<\/blockquote>\n

\n

❌ Установлено: 1,0°<\/p>\n<\/blockquote>\n

Можно было бы вывернуться с фразой «Вы установили…», но это звучит глупо и пользователей у умного дома может быть несколько.<\/p>\n

Выясняю у аналитиков диапазон температуры, которую можно выставить на девайсе: 5—30 С°.<\/p>\n

Получается, для всех вариантов подойдёт «Установлено». Остаётся 21°, который «установлен», но тут мы пойдём на сделку с совестью и прочтём с дробью:<\/p>\n

\n

Установлено двадцать один и ноль десятых градуса<\/p>\n<\/blockquote>\n

Кому, вообще, нужен ровно 21 градус Цельсия? Зато теперь всё влезает, а место изменений уместилось под строкой статуса. Оказалось, в реализованном компоненте оставили коробок для служебной информации, которая в событиях отдельного устройства не выводится. Там же можно указывать других пользователей.<\/p>\n

\n\"\"\n
Результат в условном дизайне. Рабочий под NDA<\/div>\n<\/div>\n

Выводы-советы<\/h2>\n
    \n
  1. Дружите с аналитиками и разработчиками<\/li>\n
  2. Выясняйте технические ограничения<\/li>\n
  3. Изучите дизайн-систему и UI-кит<\/li>\n
  4. Не всё можно и нужно решать текстом, советуйтесь с дизайнером<\/li>\n<\/ol>\n", "date_published": "2023-08-03T14:39:45+05:00", "date_modified": "2023-08-03T14:48:23+05:00", "image": "https:\/\/vitalyfilatov.ru\/pictures\/082-aqara.png", "_date_published_rfc2822": "Thu, 03 Aug 2023 14:39:45 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "92", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/vitalyfilatov.ru\/pictures\/082-aqara.png", "https:\/\/vitalyfilatov.ru\/pictures\/082-logs@2x.png" ] } }, { "id": "87", "url": "https:\/\/vitalyfilatov.ru\/all\/sense-shift\/", "title": "Смещение смысла", "content_html": "

    Бывает, автор пишет о важном, но акцент ставит на банальное или формальное, отчего сообщение получается раздражающе бесполезным. Симптом смещения:<\/p>\n

    \n

    текст касается важной темы, но не отвечает на важные вопросы.<\/p>\n<\/blockquote>\n

    Разберём на примере и попробуем вправить смысл.<\/p>\n

    Ситуация.<\/b> В офисном небоскрёбе запланировали пожарные учения, сотрудникам предстоит пробежать по лестницам шестьдесят этажей. В письмо с анонсом организаторы добавили важное напоминание:<\/p>\n

    \n

    Внимание! В случае ухудшения самочувствия во время спуска по лестнице необходимо немедленно обратиться к медицинскому персоналу, который будет дежурить на объекте во время комплексного учения.<\/p>\n<\/blockquote>\n

    Проблема.<\/b> Ясно, что врачи будут, но непонятно, где их искать.<\/p>\n

    \n

    На каких этажах они будут дежурить?<\/p>\n<\/blockquote>\n

    \n

    Как их быстро найти среди бегущих людей?<\/p>\n<\/blockquote>\n

    \n

    Их будет двое в фойе или по одному на каждом десятом пролёте?<\/p>\n<\/blockquote>\n

    \n

    Можно ли им позвонить, если кто-то не сможет идти?<\/p>\n<\/blockquote>\n

    Вместо ответов автор многословно поучает: стало плохо — обратись за помощью.<\/p>\n

    Почему так пишут<\/b>, я не знаю. Наверное, из-за ограничений и формализма.<\/p>\n

    Представьте, что менеджер по персоналу в спешке составляет рассылку. Подробностей нет, у кого уточнять непонятно, разослать нужно до обеда, а лишний круг согласований займёт полдня. Это ограничения.<\/p>\n

    Формализм проявляется в том, как менеджер понимает свою задачу. Вероятно, он организовывает поведение <\/i>сотрудников во время учебной эвакуации. Известно, что на объекте будут медики, поэтому нужно вписать их в чёткую инструкцию. Задачи представлять себя на учениях и предполагать вопросы читателя у менеджера нет.<\/p>\n

    Вправляем смысл.<\/b> Допустим, что нам удалось выяснить, как медики организуют дежурство, и мы хотим закрыть важные вопросы.<\/p>\n

    Уберём бессмысленный маркер внимания, вынесем суть вперёд и увяжем банальную рекомендацию с чем-то полезным. Пусть будет про внешний вид медицинского персонала. Получаем:<\/p>\n

    \n

    Во время учений вас будут сопровождать врачи и терапевтические капибары из Центра медицины катастроф. Если вам станет плохо или одиноко, немедленно обратитесь к сотрудникам в оранжевых скафандрах, они будут спускаться последними.<\/p>\n<\/blockquote>\n

    Смысл вправлен, остался вывод в форме афоризма: чтобы избежать смыслового вывиха, текст и автор должны решать одну задачу.<\/p>\n", "date_published": "2022-10-09T13:26:42+05:00", "date_modified": "2022-10-09T13:26:38+05:00", "_date_published_rfc2822": "Sun, 09 Oct 2022 13:26:42 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "87", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [] } }, { "id": "80", "url": "https:\/\/vitalyfilatov.ru\/all\/reply\/", "title": "Ответ клиенту такси", "content_html": "

    Разбираем ответ службы поддержки, отжимаем лишнее и добавляем немного пользы. В конце смотрим текст в макете.<\/p>\n

    Текст попался в чате для подписчиков UX-рассылки Иры Моториной<\/a>. Говорят, это фрагмент тестового задания Яндекса, поэтому задача без контекста.<\/p>\n

    Исходный текст, орфография сохранена:<\/p>\n

    \n

    Обращение<\/b><\/p>\n<\/blockquote>\n

    \n

    День добрый! Заказ оплачивал наличными. Подскажите как можно получить чек по поездке?<\/p>\n<\/blockquote>\n

    \n

    Ответ<\/b><\/p>\n<\/blockquote>\n

    \n

    Здравствуйте!<\/p>\n<\/blockquote>\n

    \n

    Как я вижу, вы оплатили заказ наличными, а наш сервис отправляет чеки только при оплате картой. Это значит: чек вы получить не сможете. Зато при оплате наличными вы можете получить отчет о поездке, который содержит всю необходимую информацию.<\/p>\n<\/blockquote>\n

    \n

    Чтобы получить отчет, привяжите адрес почты в боковом меню приложения. Для этого нажмите на аватарку, выберите «Добавить почту» и подтвердите адрес в ответном письме. Потом вернитесь ко мне — я вышлю отчет.<\/p>\n<\/blockquote>\n

    Разберём ситуацию, проблемы ответа и попробуем сделать лучше.<\/p>\n

    Ситуация<\/h2>\n

    Предположим, после поездки клиенту не пришёл чек, поэтому он пишет в чат приложения и указывает способ оплаты. Скорее всего, клиент ездил по служебным делам и чек нужен бухгалтерии. Дальше всё опирается на это предположение, будьте снисходительны.<\/p>\n

    Проблемы<\/h2>\n

    Объём.<\/b> Макета у нас нет, мы не знаем размеров текста и пользовательских настроек. Скорее всего, ответ в чате займёт больше одного экрана и пользователю придётся скроллить. Скролл — самый простой жест, но будет здорово, если и он не потребуется.<\/p>\n

    Структура.<\/b> Текст содержит подробности, не имеющие прямого отношения к вопросу, а суть располагается в середине абзаца. Из-за этого текст придётся читать целиком. Если сделать текст лаконичнее, пользователь быстрее получит ответ и потратит меньше времени на тревогу.<\/p>\n

    \n

    Экономия времени, внимания и усилий — проявление заботы<\/p>\n<\/blockquote>\n

    Задача<\/h2>\n

    Сделать ответ короче, вынеси пользу в начало, сохранить вежливый тон и проявить заботу. Ответ уже вежлив и закрывает обращение, но мы попробуем копнуть глубже и сделать его полезнее.<\/p>\n

    Решение<\/h2>\n

    Разберём первый абзац по единицам смысла, чтобы найти избыточность. Для этого разбиваем текст по предложениям и удаляем всё не по делу.<\/p>\n

    Разбиваем:<\/p>\n

    \n

    Как я вижу, вы оплатили заказ наличными, а наш сервис отправляет чеки только при оплате картой.<\/p>\n<\/blockquote>\n

    \n

    Это значит: чек вы получить не сможете.<\/p>\n<\/blockquote>\n

    \n

    Зато при оплате наличными вы можете получить отчет о поездке, который содержит всю необходимую информацию.<\/p>\n<\/blockquote>\n

    Первое предложение звучит естественно, но причина и следствие получились такими громоздкими, что потребовали пояснения. Можно не говорить, что оператор видит способ оплаты, клиент сам об этом сообщил.<\/p>\n

    Отжимаем:<\/p>\n

    \n

    вы платили наличными, а чеки доступны при оплате картой<\/p>\n<\/blockquote>\n

    \n

    чек вы не получите — повтор, но мы его пока оставим<\/p>\n<\/blockquote>\n

    \n

    вместо чека можно получить отчёт о поездке с необходимой информацией<\/p>\n<\/blockquote>\n

    Вынесем суть в начало и перепишем:<\/p>\n

    \n

    Мы не выдаём чеки при оплате наличными, но можем отправить отчёт о поездке с необходимой информацией<\/p>\n<\/blockquote>\n

    Модальность «можем отправить» оставим, отчёт отправляется по запросу.<\/p>\n

    Для пользы объясним ценность отчёта. Очевидно, что клиенту нужен не сам чек, а отчитаться перед бухгалтерией и вернуть деньги. Чек он не получил, возврат денег под вопросом.<\/p>\n

    \n

    Бухгалтерии важно правильно оправдать расходы, иначе у налоговой могут возникнуть вопросы. Оплата такси подтверждается кассовым чеком или квитанцией в форме бланка строгой отчётности. В квитанции обязателен набор реквизитов<\/a>.<\/p>\n<\/blockquote>\n

    Для простоты предположим, что отчёт равноценен квитанции и бухгалтерия его примет вместо чека. Добавим, кому отчёт предназначается, чтобы пользователь не сомневался:<\/p>\n

    \n

    <…> с обязательными реквизитами для бухгалтерии<\/p>\n<\/blockquote>\n

    Обязательные — избыточность, реквизиты и так значат необходимые сведения. Но все привыкли, поэтому оставим для узнаваемости. Если пользователь слышал про квитанции от бухгалтеров, наше определение сработает лучше корректного, но незнакомого термина.<\/p>\n

    Немного сократим второй абзац:<\/p>\n

    \n

    Чтобы получить отчёт, привяжите адрес почты: нажмите на аватарку, выберите «Добавить почту» и подтвердите адрес в ответном письме. Потом напишите сюда, я вышлю отчёт на указанный адрес.<\/p>\n<\/blockquote>\n

    В идеале пользователь должен получать отчёт без обращения в поддержку, а приложение — знать, указана ли почта. Но мы примем, что менять логику приложения нельзя.<\/p>\n

    Для наглядности соберём всё в условном макете.<\/p>\n

    \n\"\"\n<\/div>\n", "date_published": "2022-03-08T01:36:16+05:00", "date_modified": "2022-03-08T13:19:37+05:00", "image": "https:\/\/vitalyfilatov.ru\/pictures\/070-replies-compare.png", "_date_published_rfc2822": "Tue, 08 Mar 2022 01:36:16 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "80", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/vitalyfilatov.ru\/pictures\/070-replies-compare.png" ] } }, { "id": "77", "url": "https:\/\/vitalyfilatov.ru\/all\/potions\/", "title": "Нейминг и иконки пакетов курса по бэкенду", "content_html": "

    После двух потоков ребята из StringConcat изучили отзывы и решили сделать три варианта курса. Один без домашек и курсовой, второй обычный, а третий — с собственным проектом. Я собрал описание, придумал названия и картинки с метафорами для программистов.<\/p>\n

    Получилось так:<\/p>\n

    \n\"\"\n
    Противоядие, лечилка и комбо-поушн в разделе Стоимость<\/a><\/div>\n<\/div>\n

    Как так вышло.<\/p>\n

    Названия.<\/b> Мы хотели, чтобы все три варианта были одинаково хороши, поэтому сразу отказались от названий, выстраивающихся в последовательность:<\/p>\n

    \n

    ❌ Простой → Средний → Сложный<\/b> — обесцениваем первый вариант, нагнетаем в третьем.<\/p>\n<\/blockquote>\n

    \n

    ❌ Учиться → Уметь → Творить<\/b> — создаём противопоставление: учиться не уметь, уметь не творить.<\/p>\n<\/blockquote>\n

    Перебрали кучу вариантов, от экзотики с названиями редкоземельных металлов до стёба типа «деревянный — стеклянный — оловянный», но остановились на классике:<\/p>\n

      \n
    1. [Некий упрощённый]<\/li>\n
    2. Базовый<\/li>\n
    3. Индивидуальный (со своим же проектом)<\/li>\n<\/ol>\n

      Рассуждаем логически: первый вариант для тех, у кого нет времени на домашние работы и курсовую. Получается, он отличается только тем, что проходится быстрее. Экспресс.<\/p>\n

      Картинки.<\/b> Вот тут пришлось подумать. Смотрите, какой набор условий:<\/p>\n

      Иконки должны быть в одном стиле и пространстве образов. Например, спутник, гаечный ключ и молекула — дурной ребус без решения. А нужно, чтобы читатель не спрашивал, почему тут такое, а там эдакое, и как они связаны.<\/p>\n

      Иконки должны работать на смысл, по возможности остроумно подчёркивая суть варианта. Важно, чтобы читатель мог считать метафору и почувствовать себя хорошо от верной догадки.<\/p>\n

      Иконки не должны выстраиваться от простого к сложному или от дешёвого к премиальному. И они не должны создавать лишних смыслов, как в примерах названий выше.<\/p>\n

      \n

      Иконки должны быть просто разными, но с общей темой.<\/p>\n<\/blockquote>\n

      Мы с дизайнером Ляйсан перебрали кучу вариантов с часами, ракетами и книгами-микроскопами, но ничего не подходило. Обратились к логике и культурному багажу поколения миллениалов.<\/p>\n

      \n

      Значит, наш курс про то, как избавиться от смертных болей разработки и начать жить. На курсе разбирается методология и концепции, меняющие подход к архитектуре и вот это всё. В результате разработчик перестаёт выгорать и ненавидеть.<\/p>\n<\/blockquote>\n

      \n

      Можно сказать, что слушатель курса принимает новые знания и они его излечивают. Ассоциацию с обычным лекарством отбрасываем, как слишком прямолинейную и пафосную.<\/p>\n<\/blockquote>\n

      \n

      Почти все известные мне программисты играли в третьих Героев и Диабло, поэтому можно взять за базовый образ поушн — склянку с зельем.<\/p>\n<\/blockquote>\n

      Склянки бывают разные, можно подобрать под все три случая:<\/p>\n

      \n

      Экспресс — избавляет от яда неведения, поэтому противоядие.<\/p>\n<\/blockquote>\n

      \n

      Базовый — полноценно лечит, поэтому просто склянка лечения. К тому же это самый частый вид зелий в играх.<\/p>\n<\/blockquote>\n

      \n

      Индивидуальный — базовый со своим проектом, чтобы попутно решить рабочие задачи. Прямой аналогии нет, пусть будет хитрая склянка, которая лечит и заряжает магией.<\/p>\n<\/blockquote>\n

      Ляйсан собрала референсы и нарисовала несколько вариантов. Подобрала форму склянок, чтобы было не слишком похоже, проработала силуэты и сочетание цветов, а в конце добавила клёвые блики. Найс!<\/p>\n

      \n\"\"\n<\/div>\n

      А теперь почитайте, как согласовать иконки в последовательность<\/a> :3<\/p>\n

      Ляйсан в Инстаграме<\/a><\/p>\n", "date_published": "2021-11-28T02:45:14+05:00", "date_modified": "2021-11-29T00:30:00+05:00", "image": "https:\/\/vitalyfilatov.ru\/pictures\/067-headpic@2x.png", "_date_published_rfc2822": "Sun, 28 Nov 2021 02:45:14 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "77", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/vitalyfilatov.ru\/pictures\/067-headpic@2x.png", "https:\/\/vitalyfilatov.ru\/pictures\/067-big-potions.svg" ] } }, { "id": "72", "url": "https:\/\/vitalyfilatov.ru\/all\/equalize\/", "title": "Согласуем иконки тарифов", "content_html": "

      Как-то я переписывал лендинг мастерской по ремонту бытовой техники. В конце традиционно шли услуги в четыре колонки. Иконки выглядели случайными, поэтому я решил согласовать их по смыслу.<\/p>\n

      \n\"\"\n
      Иконка диагностики откровенно плохая, но её мы трогать не будем :-)<\/div>\n<\/div>\n

      С первого взгляда всё в порядке: иконки выдержаны в едином стиле и масштабе, инструменты наклоняются в одну сторону и под одинаковым углом. Стиральную машину в лупе словно бездумно вклеили, а у ящика с инструментами линии чуть толще, но в остальном иконки выглядят нормально. Просто они не выстраиваются в последовательность<\/i>.<\/p>\n

      \n

      Почему это важно.<\/b> Мы так устроены, что сначала смотрим на картинки, а потом читаем. Можно сказать, что картинки легче понимать, поэтому мозг отдаёт им предпочтение. Если картинки складываются в нежелательный ребус, человек путается и плохо проводит время.<\/p>\n<\/blockquote>\n

      Чтобы согласовать иконки с текстом и между собой, разберёмся в их смысле.<\/p>\n

      У нас три вида ремонта, по возрастающей: малый, средний и большой<\/s> сложный. Отвёртка для малого ремонта и ящик для сложного подходят идеально, а ключ словно выбивается.<\/p>\n

      Движение мысли такое:<\/p>\n

      \n

      Чтобы открыть корпус большинства бытовых приборов достаточно отвёртки.<\/p>\n<\/blockquote>\n

      \n

      Ключ нужен уже для чего-то посерьёзнее, например, чтобы подтянуть крепление мотора в стиральной машине.<\/p>\n<\/blockquote>\n

      \n

      Для сложного ремонта понадобится целый набор: паяльник, плоскогубцы, кусачки, мультиметр и молоток.<\/p>\n<\/blockquote>\n

      Вроде логично, но почему тогда мы начинаем с отвёртки, потом берём ключ, а после сразу ящик? Хорошо было бы показать, что инструментов для среднего ремонта мы используем больше. При этом хочется сохранить признаки малого ремонта, поскольку средний его расширяет. Короче, добавим к отвёртке ключ.<\/p>\n

      \n\"\"\n
      Конечно, отвёртка нужна крестовая, но у плоской более узнаваемый силуэт, это важно<\/div>\n<\/div>\n

      Картинки были в векторном формате SVG, поэтому я закинул их в Фигму, развернул ключ и прилепил его поверх отвёртки. Так отвёртка сохранила наклон, а мы подчеркнули идею добавления нового инструмента.<\/p>\n

      Получилось так:<\/p>\n

      \n\"\"\n
      Виды ремонта выстроились в логической последовательности, а без стиральной машины в лупе стало поспокойней<\/div>\n<\/div>\n

      Выводы.<\/p>\n

        \n
      1. Давайте редактору макеты или доступ в Тильду. Редактор работает со всеми смыслами в продукте, а не только с текстом. Что-то сделает сам, что-то передаст дизайнеру.<\/li>\n
      2. Векторные иконки — благо: масштабируются, мало весят, можно редактировать в Фигме. Одни плюсы.<\/li>\n
      3. Согласованные иконки добавляют красоты и помогают передать комплексный смысл без слов.<\/li>\n<\/ol>\n", "date_published": "2021-10-02T23:08:04+05:00", "date_modified": "2021-11-28T01:17:23+05:00", "image": "https:\/\/vitalyfilatov.ru\/pictures\/062-before@2x.png", "_date_published_rfc2822": "Sat, 02 Oct 2021 23:08:04 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "72", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/vitalyfilatov.ru\/pictures\/062-before@2x.png", "https:\/\/vitalyfilatov.ru\/pictures\/062-combine@2x.png", "https:\/\/vitalyfilatov.ru\/pictures\/062-after@2x.png" ] } }, { "id": "47", "url": "https:\/\/vitalyfilatov.ru\/all\/stupor\/", "title": "Как преодолеть писательский ступор", "content_html": "

        У меня часто бывает, что нужно что-то написать, а слова не идут. Вроде задача простая, о чем сказать примерно понятно, сырьё собрано, а текст не пишется. Такое состояние называется писательским ступором.<\/p>\n

        \n\"\"\n<\/div>\n

        В сети куча советов по борьбе: отвлечься, сменить редактор, сменить шрифт, сменить обстановку, разрешить себе лажать и ничего не бояться, писать на скорость, писать короткими интервалами, тысячи их. Проблема таких методов в отсутствии системы. Они работают, когда мешает перфекционизм, а в других случаях буксуют. Давайте разбираться.<\/p>\n

        Причины ступора<\/h2>\n

        Чтобы преодолевать ступор системно, разберемся в том, что его вызывает и как он развивается. По моим наблюдениям, ступор возникает, когда я:<\/p>\n