Скоро наш журнал обновит свой дизайн
Close
Будь в курсе
Подпишитесь на рассылку, чтобы не пропускать новые выпуски журнала
лекция
Управление и результаты
Как флексить
Давайте посмотрим, как же флексить.

Вы не успеваете в срок. Что с этим делать? Я утверждаю, что пофлексить можно всё, что угодно. Надо только придумать, как. У меня есть доказательства!

Если захотеть, пофлексить можно всё, что угодно. Самый мощный опыт я получил в самом первом проекте, который мы делали по методу ФФФ. Мы договорились первый раз с клиентом. Делали проект. Подошёл дедлайн. Реально не успели. Система была новая, мы делали её с нуля, она была большая. Причём, мы сделали разделы сайта, а не справились с наполнением. Это была система для бухгалтеров, где несколько миллионов документов. Когда мы их подключили, оказалось, что они плохо оформлены и т. п. Артём [Горбунов] сказал, что такое открывать нельзя, это некачественный продукт. Я пришёл к нему: «ФФФ понятно, но осталась неделя, и мы в любом случае ничего не успеем сделать, давай добавим время!». Мне казалось, что решения в принципе не существует, тем более, что мы обещали сделать пять разделов.

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

— Клиенту вы так и сказали, что вот эти не доделаем?

— Да, это так и есть.

— Три? А почему не четыре?

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

Я для вас собрал несколько приёмов. Есть у нас такая в раздатке страничка, называется: «Как флексить». Это — неполный список, просто несколько приёмов.
Вы можете изобретать свои собственные, комбинировать [одни с другими]. Но эти приёмы проверенные.

Зафиксировать
Когда система динамическая, она клёвая. Можно что‑то делать с ней, изменять её. Когда система гибкая, когда можно всё настраивать — она всегда сложная. И если времени нет, то можно захардкодить так или иначе, и всё равно запуститься.
Когда Школа стажёров открылась, надо было повесить банер на сайте бюро. Как видите, здесь сложная вёрстка: плашечка какая‑то, ссылочка и текстик стоят возле картинки. Я не участвовал в прикрутке, но ребята очевидно не успели её сверстать. Поэтому первое время эта штука была сделана картинкой, причём по ховеру подгружалась другая картинка с подсвеченной ссылкой. Так она синяя, а наводишь мышку — картинка другая подставляется. Это делается за пять минут, верстать ничего не надо. На вид выглядит точно так же. Видите, я потянул курсором и видно, что это картинка. Простой приём позволяет запуститься в срок.

Другой пример, о котором мне Максим Ильяхов рассказывал. Знакомый Макса делал сайт с каким‑то программистом, они поругались, программист свалил и не дал доступ к сайту. У чувака был выбор: либо проекту конец, либо всё заново разрабатывать. Тогда он придумал, что вся динамическая часть ему не сильно нужна. Он взял «кроулер» — штука такая, которая страницы просматривает — скачал весь статический сайт и залил на новый хостинг. Всё завелось, кроме кнопки «Заказать обратный звонок»: её заменили на телефон. Задача решена, сайт открылся и стал работать. Позже бэкенд вернули.
Снизить управляемость
Не относитесь к этому как к библии. Можно давать пользователю какую‑то тонкую настройку, а можно дать одну кнопку. Хороший пример про «Регуляр», сайт, который делал Илья Бирман. Этот сайт уже существовал, и клиент пришел за второй итерацией. До прихода в бюро клиент обрабатывал все заказы вручную. У заказов была сезонность, и он знал, что скоро начнётся новая волна, а у него всё вручную. Соответственно, он хотел, чтобы бюро автоматизировало счета и заодно улучшило дизайн.

В этом проекте реально заболел программист. У бюро были хорошие отношения с клиентом, и можно было договориться о том, чтобы продлить дедлайн на неделю. Но, во‑первых, клиент всю эту неделю снова бы делал всё вручную, и во‑вторых, со стороны бюро работа бесплатно в течение недели выглядела бы жестом доброй воли. Со стороны клиента это выглядело бы, что ничего обещанного не дали, а он ещё и продолжает как дурак всё делать вручную. Илья рассказывал, что собирался идти к клиенту обсуждать проект, но когда всё представил, задумался на два дня, пытаясь придумать, что же делать. И придумал. Они с Колей Митиным, техническим директором бюро, сделали статическую главную страницу. У неё не было никакого бэкэнда, товары нельзя было менять, но на первое время этого хватило, а потом они добавили обратно бэкенд.
Есть ещё пример из фотоприложения. Здесь есть настройка яркости и других параметров: берёшь и водишь [ползунком]. А можно открыть продвинутый интерфейс, где можно каждый параметр менять вручную. В действительности, если бы тонкую настройку не сделали, простых настроек хватило бы всем. И можно было бы открыть так.
Уменьшить глубину проработки
Мы делали проект «Магазин горящих путёвок».
Возможно, из‑за неправильного планирования мы осознали, что внутри этого сайта целых три больших продукта, только в процессе работы. [Компания] продавала туры. А ещё [на сайте] была продажа билетов и отелей. Вы прекрасно знаете, что такое продажа билетов — это полноценный отдельный сайт. Ван‑ту‑трип, Авиасейлз этим занимаются и несколько лет выпускают такой продукт. И то же самое с отелями.

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

Мы решили уменьшить глубину проработки. Вместо того, чтобы делать «авиасэйлз» внутри этого сайта за несколько недель вместе со всем остальным, мы просто заскиновали то, что было. Получился такой сайт:
Меню новое, а билеты, навигация, сценарии остались старыми, просто выглядят прилично. С таким можно открываться. Этот проект можно было публиковать, и в новом дизайне ничего не взорвалось бы при открытии старых разделов.
Не выходить в надсистему
Мы делали небольшой проект для Актиона. Это был сервис ответов на вопросы. Человек задавал вопросы, ответы были платными. Когда мы почти сделали сайт, я обнаружил, что письмо, которое мы отправляем, выглядит ужасно: жирный шрифт, короткие тире, «Вы» с большой буквы.
Оказалось, что оно отправляется через систему общения с клиентами. И чтобы его поменять, пришлось бы всю систему переделывать, переучивать менеджеров — поменять целый кусок работы большой компании. Какой выбор? Можно было оставить как есть, но это был бы удар по качеству. А качеством мы не жертвуем. Поэтому мы уменьшили глубину проработки и исправили только одно письмо. Получилось аккуратное «плейнтекстовое» письмо:
А ещё мы заменили ужасный адрес «ноуреплай». Мы нашли адрес «суппорт». Оказывается, одно из подразделений его себе забрало, мы его отобрали обратно и сделали аккуратное письмо.

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

В «Додо Пицце» это тоже недавно случилось. У них была база знаний, которая сделана на стандартном вордпрессовском движке. И у нас реально первая итерация (я специально её сделал, чтобы познакомиться с командой) заключалась в том, чтобы покрасить все ссылки одинаково. Там были ссылки синие подчёркнутые, синие неподчёркнутые, черные подчёркнутые и ещё какие‑то. И эти менюшки — тоже ссылки.
И я сначала думал, что мы только стиль изменим, а остальное всё так и останется. Потом программист меня попросил нарисовать макет. И всё. Я открыл эту штуку в фотошопе. Эту штуку так же оставлять нельзя. Я взял и переделал меню. В основном [меню] оставил по‑старому, но логично и одинаково. Нижнюю часть я не переделывал, только верхние 20 пикселей сайта:
С кодом, я думаю, то же самое. У Мартина Фаулера есть такая штука — рефакторинг. Если ты начал функцию переписывать, то её и рефакторишь. Если соседнюю не трогал, то её и не трогаешь.
Отступить от идеала
Наверное, каждый интерфейсный дизайнер мечтает сделать «мыслеуправление» — подумал и сразу всё сработало. Идеальный интерфейс. Но сделать идеально не всегда возможно. Ничего страшного, можно сделать что‑то попроще. На том же сайте «Магазина горящих путёвок» у нас появилась клёвая идея, что мы можем сделать идеальный интерфейс для отображения фотографий.
Фотография на весь экран. Плашка сбоку полупрозрачная, чтобы фотке отдать всё место. Когда мы это стали прикручивать, выяснилось, что отельеры отвратительно относятся к своим фотографиям. У многих были фотографии 200×200, причём сделанные «в 80‑х годах». Мы с этим боролись. У нас была идея, где взять фотографии, мы настраивали парсеры. В итоге оказалось, что не получается. Кому‑то могла прийти в голову идея, что раз такой дизайн, то все фотографии просто всегда растягиваем на весь экран. Была маленькая фотография, мы её растягиваем, она пикселизируется. Но это, опять же, потеря качества. Так делать нельзя. Поэтому просто предложили другой дизайн.
От идеала отступили. Была идеальная фотография, а эта нет, это — исходного размера фотки. Ничего страшного. С этим можно жить, тем более, можно фончики разные менять.
Рассогласовать
Это мой любимый приём. Здесь не зря нарисован город. Если вы посмотрите на любой город, он весь рассогласован. Сначала в 13‑м веке построили церковь, в 15‑м — крепость, а в 20‑м небоскрёб. И ничего страшного, всё рядом стоит и живёт. И никто не мешает то же самое сделать на сайте.
Например, есть «Система Главбух». Первая её версия была сделана давно и была скеоморфичной: кнопочки, тенюшечки, блики. Естественно, все другие разделы к этому подходили. Книжечки вот лежат, стопочки:
Пробковая доска и календарь:
Когда мы стали переделывать систему для кадровиков, решили, что нужен новый дизайн, более информативный, придумали виджеты.
Но в этой системе для кадровиков — куча разделов, часть из которых наследуется из системы для бухгалтеров. И получается, чтобы перевести все разделы в единый стиль, надо было всё переделывать. А на это нужны недели.

Мы переделали только главную страницу, и ничего страшного, что внутри старые книжки соседствуют с новым меню:
Меню уже новое, а книжки — старые. Сейчас уже и это переделали. Видите, система рассогласована: где‑то плоский дизайн, где‑то — нет. Но с этим можно жить.

Ещё один пример. Тоже бюрошный проект «Биз‑цен». Ребята пришли, и в бюро им сделали главную страницу:
Внутри осталось всё старое:
Меню даже другое.
И мой любимый пример про Найк‑плюс. У меня каждый год новые скриншоты. Это не моя фотка, я её взял из интернета, но можете мне поверить. Это программа для четвёртого айфона, для бега. Сделана для шестого айоса, всякие блики на иконочках, всё как положено. Штука посередине была объёмная, скролилась.
Потом Эпл выпустили седьмой айос, и Найк обновил своё приложение.
Оно стало плоским, тенюшечки убрали. Но внутри остались те же самые иконки.
Они были года полтора, и только в 2016 году разработчики до них добрались и сделали их плоскими.
И ничего. Никто не умер.
Убрать в гаражик
Все знают, что у людей на балконе вечно хранится всякий хлам: санки старые, велосипед, лыжи. У кого‑то они в сарайчике, у кого‑то — в гаражике. И это годный приём, чтобы успеть в срок и не пожертвовать качеством. Смысл в чём? Мы берём всё плохое и «прячем его в гараж». Гараж снаружи выглядит нормально, а то, что там внутри, никого не интересует.

Пример с проектом про ответы на вопросы:
Когда мы его делали, в последний момент выяснилось, что нам нужно опубликовать «Условия сервиса». И мы не успели их нормально сверстать: мы хотели, чтобы как на сайте бюро, в две колонки. Поэтому мы решили, что мы их «уберём в гаражик». Тут всё нормально и красиво, нажимаешь на кнопочку — юридический текст.
«Припрятывание в гаражик» не всегда должно выглядеть как‑то плохо. К примеру, на том же самом сайте «Магазина горящих путёвок» был раздел «Отели».
И там оказалось, что мы не можем его изменять. Потому что сам интерфейс был не на этом сайте, а на сайте партнёра, и вставлялся через айфрейм. Тогда мы раздел «припрятали в гаражик»: сделали статическую фотку, написали текст, сделали кнопку, и по кнопке открывался другой сайт. Но когда ты гуляешь по сайту МГП, здесь всё прилично.

Ещё один пример про сдачу налоговых отчётов. Все бухгалтеры их сдают в налоговую, переживают всегда, ответственный момент. А если в этом копаться, то там полный ад. Разные отчёты сдают в разные органы: в ФНС, в Пенсионный фонд. Везде разные программные интерфейсы и формы. Ответы присылают в разном виде: в икс‑эм‑эле, в текстовых файлах, иногда инспектор может сам написать что‑то в «Ворде» и прислать док‑файл.
Примеры ответов госорганов:
Когда мы с этим столкнулись, мы поняли, что в рамках итерации мы не сможем разобраться с этими ответами. Нужно парсить какие‑то неизвестные штуки, мы не успеем. И тогда мы «припрятали в гаражик». Мы сделали вот такую приличную форму:
А квитанцию сделали ссылкой: на неё нажимаешь и она просто скачивается файлом, который пришёл.

Через год клиент решил этим заняться, и мы продолжили. Но у нас и второй раз получилось не до конца. Ад там существенный.
Мы научились вытаскивать суть того, что нам прислали, а само тело пока оставили в таком виде. Но мы это тоже «убрали в гаражик»: сделали моноширинным шрифтом и поместили в рамочку. Отгородились.

А вот авторы программы «Фетч» остроумно собрали туманные параметры настройки в одноимённом разделе:
Естественно, когда мы флексим, мы всегда отступаем от идеала, но это не значит, что мы теряем в качестве. Вещь может быть простая, неидеальная, но это не значит, что она некачественная.
Заменить решение

Можно взять и сделать что‑то совершенно другое.

Пример с самолётными сервисами. Есть «Раз‑два‑трип». Тут целая идея, что он может советовать самый дешёвый билет, самый быстрый, здесь собрано всё по пачкам. Чтобы это изобрести, владельцу сервиса понадобилось придумать хитрый бэкенд.
Но это не единственное решение. Можно взять и сделать списком, как «Озон‑трэвэл»:
Или в календарь запихать как «Энивейэнидэй»:
Всё это требует разных ресурсов, и можно сделать совсем что‑то другое.

В «Хипмунке» показываются барчики, перелёты, время:
А «Скайсканер» агрегирует данные из разных сервисов:
Когда у вас сформулирована задача в виде пользы, существует миллион решений. И не факт, что то, что вы хотите сделать, то единственное, которое необходимо.
Перенести
В худшем случае что‑то можно перенести на следующую итерацию. Это самый плохой вид флекса, потому что здесь мы максимально больно делаем клиенту. Значит, мы действительно не сделали то, что ему было нужно. Просто сказали: «Извини, мы это не успеем». Надо стараться так не делать. Как правило, всегда можно сделать какую‑то полезную фичу. Это допустимо, но на пределе. А сделать плохо — нельзя, это будет удар по репутации.
Сделать говно
Это не флекс. Это не работает, польза не достигается.

Ещё один пример из моего опыта. До сих пор стыдно. Даже совет про это есть: «За какими вещами нужно следить…».

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

— А у вас бывало так, что вы работали трое суток напролёт, потому что вы чувствуете, что нечего флексить, а просто остались баги, которые нужно просто исправить?

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

— Это на этапе разработки? Кода?

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

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

Ещё один пример отношения к фичам. Когда ЛТЕ (технология мобильной связи 4Г) только появилась, Эпл заблокировал её в айфонах на программном уровне у всех операторов. Открывали её только после проверки [конкретного оператора в Эпле]. Понятно, почему они это сделали? Например, у Билайна нет ЛТЕ на айфоне, потому что они не прошли проверку в Эпле. ЛТЕ это сложная технология. Если бы оператор был не готов, и она бы глючила, все сказали бы, что у айфона хреновый 4Г, а то, что виной этому оператор, никто бы не стал разбираться.

Говна не делаем.