3 заметки с тегом

кейс

Добавьте о людях

Зарисовка о писательском ступоре и смыслах. Выводы в конце.

В Девхабе выпустили приложение сервиса Попути и собрали кейс. В черновиках заголовок был такой:

Cервис удалённого заказа кофе на маршруте или в ближайшем заведении

Пока писал остальное, глаз замылился, заголовок казался рабочим. Утром коллеги пришли с критикой: заголовок звучит безграмотно и угловато, как киношный чиновник из села. «На маршруте» — так говорят, вообще? Перечитываю, пугаюсь «ближайшего заведения». Хочется легче и веселее.

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

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

Сервис удалённого заказа кофе для водителей и пешеходов

Вот, теперь хорошо. Было описание функций, стало — перечисление групп пользователей.

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

Картинка Ulv Vind

Сайт курса по бэкенду

Сделал сайт курса для разработчиков энтерпрайз-бэкенда. Собрал структуру, написал текст, подготовил картинки и сверстал в Тильде.

Авторы курса — Евгений и Сергей — за десять лет практики собрали все грабли, устали от унылого хаоса в разработке и решили передать свой опыт в формате онлайн-курса. Курсу требовался сайт, который бы объяснял пользу, показывал экспертность авторов и отличался от лендингов с перепродажей чужих лекций. Получилось так: howto.stringconcat.com

Работа над сайтом условно делится на шесть смысловых этапов:

уточнение задачи → сбор и анализ материала → поиск структуры → текстовый макет → подбор иллюстраций → вёрстка

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

Уточнение задачи

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

Исследование

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

Для сайта курса я изучил черновики рекламных писем, заметки по ЦА, сценарий вводного ролика, посмотрел несколько лекций, изучил учебный план, почитал Хабр и Ebanoe.it. Это помогло погрузиться в тему, собрать вопросы для интервью и наметить способы демонстрации полезного действия курса.

Поиск структуры

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

Хорошая структура появляется эволюционным путём

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

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

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

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

Текстовый макет

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

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

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

Как разработать продукт, за который не стыдно

Как поддерживать и развивать проект, не жертвуя сном и здоровьем

Перестать выгорать и начать жить

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

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

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

Иллюстрации

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

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

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

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

Картинку в шапке сделал Сергей и она идеальна. Мы долго обсуждали, что туда поставить, пока Сергей не предложил описать курс на языке Kotlin.

Всё по делу: стиль и формат кода, среда разработки, ночная тема, структура проекта на боковой панели и названия вкладок

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

Оригинал и результат. Евгений демонстрирует позитив, спокойную уверенность и открытость

Вёрстка

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

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

Всё, кроме шапки, сделано на типовых блоках Тильды. Шапка — зеро-блок с вариантами под разные устройства.

Рассказ о курсе свёрстан в две колонки. Левая кратко пересказывает правую и работает как якорь, чтобы взгляду было за что зацепиться.

Всё набрано шрифтом Open Sans. У него почти нет характера, открытый рисунок и широкий диапазон жирности. Сейчас я бы сделал заголовки чем-то более выразительным, например, шрифтом IBM Plex.

Для удобства чтения размер основного текста подобран так, чтобы в строке было не больше 80 знаков. Местами текст немного подрезан или переписан, чтобы выровнять правый край абзаца. Где не получилось переписать, стоят мягкие переносы.

Особый шик — колонки одинаковой высоты:

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

Отзыв из переписки Евгения

14 сентября   верстка   кейс   работа

Вавилонская формула

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

Ситуация

В 2018 Хабр Карьера анонсировала сервис публичных оценок компаний. Сотрудники анонимно оценивают работодателя по 12 критериям, пользователи портала видят усреднённые оценки, а руководство получает обратную связь.

Как только сервис запустили, мы попросили команду поучаствовать и получили 12 отзывов — сходила примерно треть. Этого было мало для выводов, поэтому мы решили позвать всех ещё раз.

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

Больше отзывов → яснее картина происходящего → точнее курс.

Гифки и мемы не годились, хотелось чего-то шуточного, но с понятным посылом. Поэтому я решил нарисовать график роста ясности и отметить на нём текущее положение дел:

12 отзывов проясняют ситуацию только на четверть

Замысел

График задумывался как пародия на популярные бизнес-метрики. Реальной зависимости он не показывал, а просто притягивал внимание и развлекал. Расчёт был запомниться абсурдностью: некая ясность в диапазоне от 0 до 1 и очевидно ускоряющийся её рост с каждым новым голосом. Читатель посмеётся, а позже возможно вспомнит синюю полоску и невольно подумает про отзывы.

Удивлять чем-то неожиданным и запоминающееся — старый рекламный трюк. Например, ВВС США завлекают женщин на контрактную службу детёнышем транспортника C-17:

Большие стёкла кабины, короткие крылья и фюзеляж рефлекторно вызывают умиление

Реализация

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

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

Натягиваем сову на глобус: Σ — ясность, N — общее количество участников, x — количество полученных оценок

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

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

Результат и выводы

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

В 2018 Хабр Карьера ещё была Моим Кругом

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

Выводы из этой истории:

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

Приходите обсуждать ко мне Вконтакт.

2020   Девхаб   кейс   работа   рассылка
UX