1
Прежде чем появиться на свет, каждое новое медиа должно ответить на вопрос, который решает все. Звучит этот вопрос так: сколько редакция будет выпускать материалов в сутки?
Количество новостей, репортажей, обзоров определяет работу сайта от и до: дизайн, число сотрудников, структуру редакции, ее бюджет и устройство админки. Мы знали, что «Бабель» должен обновляться не меньше 50 раз в день и выходить на двух языках одновременно, украинском и русском. Кроме того, было очевидно, что по языкам разделятся не только читатели, но и корреспонденты: кто-то захочет писать на одном языке, кто-то на другом.
Очень быстро (после нескольких трехчасовых совещаний) нам стало понятно, что админка «Бабеля» будет двуликой: у нее будут два одинаковых интерфейса, для работы на двух языках. При этом админка должна быстро переключаться между версиями, сохранять черновики в двух версиях параллельно, сама переводить украинскую версию материала на русский или наоборот.
«Бабель»
Последнюю задачу решили просто: «Бабель» использует сервис Яндекс.Переводчик. Все остальное строительство админки с нуля далось нам немножко сложней.
2
Конечно, админку не обязательно делать с нуля, можно купить и готовую — но это все равно, что завязывать шнурки в чужих перчатках на размер больше. Кроме того, у медиа с покупной админкой не будет своей ярко выраженной индивидуальности. Это хорошо заметно по сайтам, которые используют WordPress: все они разные, но чем-то неуловимо похожи друг на друга.
Во многом «Бабель» равнялся на «Медузу» — поэтому мы внимательно изучили все материалы про админку «Медузы», которые она сама опубликовала — и многое у них переняли. На старте наши интерфейсы в чем-то были похожи, в чем-то вовсе идентичны. При этом нам было понятно, что мы все равно будем отличаться: у «Бабеля» и «Медузы» разные редакционные политики и разные форматы, мы иначе сфокусированы, у нас работают другие люди — и, в конце-концов, наша админка эволюционирует до неузнаваемости. Так и получилось.
«Бабель»
У админки «Бабеля», как и любой другой админки, есть цикл жизни. Поначалу наша админка выглядела «голо», ее функционал был минимален (сверстал — выпустил в свет) и новый сотрудник мог разобраться в ней за полчаса. Но аппетиты редакторов и дизайнеров росли, в ideil обвешивали админку индикаторами, маркерами для литературных редакторов, полями для SEO-заголовков и заголовков для соцсетей. Со временем интерфейс стал таким сложным, что для работы с ним нужно помнить два десятка неочевидных приемчиков, а новичку приходится осваивать его неделю-две.
Рано или поздно админка становится такой запутанной, что не упрощает, а усложняет работу — и ее интерфейс приходится проектировать заново. «Бабелю» до этой стадии еще далеко, но у отдела дизайна уже чешутся руки.
Вот как выглядел «Бабель», когда никакого «Бабеля» еще не было: эскиз, прототип, первая версия главной страницы. Айдентика и дизайн — Антон Колотило.
3
Самой большой кровью в разработке даются самые простые элементы.
Обязательно выходит так, что ничего простого в них нет, и чтобы придумать какую-нибудь одну банальную кнопку, нужно сначала нарисовать дерево пользовательских решений, написать редакционную политику и закрыть десяток вакансий.
На запуске «Бабеля» это прискорбное обстоятельство проявилось ярче всего, когда мы придумывали кнопки, необходимые, чтобы сохранить, опубликовать и снять материал. Как они должны выглядеть? Может быть, сделать «селекторный дропдаун»? Или поставить рядом, одну за другой? В каком порядке? Что на них написать? Разрешить публиковать любому автору или только выпускающему редактору? Разрешить снимать публикацию любому автору или только главреду? А что, если авторы будут промахиваться по кнопкам?
Все эти вопросы заняли несколько двухчасовых совещаний, во время которых взрослые, хорошо воспитанные люди иногда переходили на крик.
Вот как появляется материал на «Бабеле»: корреспондент создает новую публикацию, заполняет служебные поля, придумывает заголовок, пишет текст, подгружает картинки, верстает, переводит на русский (или украинский), вычитывает — и после этого публикует. Все это может отнять десять минут, а может и несколько часов — поэтому автор сохраняется десятки раз. Наконец, любой опубликованный материал он может снять с сайта (если разрешил главный редактор).
На скриншоте — страница новой публикации в «админке» «Бабеля». Над интерфейсом работала первый арт-директор издания Дарья Светлова.
«Бабель»
Во время работы корреспонденты принимают сотни мелких решений, и интерфейс админки должен им, как минимум, не мешать, а лучше — помогать. Что помогает, а что мешает, может достоверно показать только накопленный пользовательский опыт. Проблема заключалась в том, что мы придумывали админку для медиа, которое еще не существовало — и собственного пользовательского опыта у нас не было. Все наши неверные придумки остались бы в коде если не навсегда, то надолго. Страшней всего было ошибиться с тремя самыми важными кнопками.
В конце-концов, победил подход «минимум кликов»: интерфейс админки устроен так, что любое действие возможно выполнить, как можно меньше кликая мышкой или тачпадом. Идею «селекторного дропдауна» похоронили. Кнопки поставили рядом, раскрасили в цвета светофора — никто не промахивается.
4
Во многом «Бабель» выглядит как «Бабель», потому что наши авторы могут верстать свои материалы (почти) как угодно — для этого в админке есть несколько десятков мелких и крупных удобств.
Скажем, админка «Бабеля» позволяет написать текст в Google.doc, расставить линки, жирность и курсивы, а потом скопировать его в админку — все форматирование сохранится. К любому слову или фразе можно «подвесить» информационную справку — в них мы прячем всю техническую информацию.
Но главное — автор любой публикации может создать больше десятка разных подверсток: простую текстовую подверстку, текст с фотографией, фотографию с текстом, видео с текстом, цифру с текстом, цитату, мини-голосовалку, голосовалку с фотографиями, таймлайн, нумерованный список и буллет-список. Читать большие материалы с ними проще и веселей.
Разумеется, время от времени корреспонденты и новостники забывают использовать все эти богатства. Тогда проджект-менеджер Стас Шулик бегает по отделам и всем напоминает, что разработчики ideil потратили на подверстки сотни часов, и что игнорировать их труд попросту некрасиво.
Все принимаются выдумывать подверстки, потом инерция берет верх, подверстки из публикаций пропадают, и цикл повторяется снова.
«Бабель»
5
Админка избавляет редакторов «Бабеля» от множества страданий. Проще всего работать выпускающему редактору: ему не нужно ломать голову, чем заполнить главную страницу сайта, если в стране ничего не происходит.
Конечно, трудно представить, что в Украине бывают дни, когда ничего не происходит — обычно наоборот, происходит слишком много всего одновременно: то чиновник нарочно обманет своих граждан, то под парламентом сожгут милицейский бобик, то бывший прокурор ГПУ лезет в американскую политику. И все же дни затишья бывают. По плотности и важности новостей выходные отличаются от будней, день отличается от ночи, а лето отличается от зимы — и главная страница медиа должна это отражать.
Поэтому главную страницу «Бабеля» мы переверстываем три-четыре раза в день. Она состоит из линеек, линейки состоят из плиток, и мы можем собирать этот конструктор, как захотим: можем поставить десять линеек, а можем сто десять. В одной линейке может быть одна плитка, а может быть две, три или четыре, линейка может быть стандартной или во весь экран.
Наконец, несколько линеек можно запихнуть в линейку-карусель: тогда на главной появится тематический блок, куда можно собрать, например, всю «Пользу» на тему коронавируса.
Со всем этим богатством приходится работать вручную. Сначала выпускающий конструирует главную страницу из линеек. Потом закрепляет в плитках материалы в нужном ему порядке. Включает новую верстку. Проверяет, как получилось. Чертыхается. Переделывает. И так три-четыре раза в день.
«Бабель»
Конечно, верстку главной страницы мы хотели автоматизировать. Первоначальная идея была такой: мы сделаем десяток готовых шаблонов — для выходных и для будней, для «пустых» дней и для конца света, для дня и для ночи, для грешного и для праведного — и будем просто переключать готовые шаблоны.
Но, как обычно, на практике все работает совсем не так, как мы задумывали изначально. Структуру готовых шаблонов выпускающие тасуют на лету. Они делают клоны (для этого нужно нажать всего одну кнопку), потом клоны клонов, потом клоны клонов клонов. В результате библиотека шаблонов представляет собой месиво, в котором никто ничего не понимает — кроме двух-трех человек, которые это месиво устроили.
Но все довольны.
Самый первый стек задач по разработке «Бабеля».
«Бабель»
6
В любой админке есть несколько мелких удобных сервисов, над которыми разработчики долго трудились, редакция долго ждала — и, в результате, ими никто не пользуется.
Вот, например, врез: одно-два предложения с графическим акцентом. Врезы у «Бабеля» есть, но ими никто не пользуется — оказалось, что они попросту не нужны.
Но есть у «Бабеля» сервис, который любят все и пользуются им все без исключения: это собственная «сокращалка» доменных имен. Любой громоздкий линк в половину экрана мы можем сократить до вежливого и аккуратного: https://baa.nu/ulWW5W
Откуда взялось доменное имя .nu?
Оно принадлежит островному государству Ниуэ, расположенному в южной части Тихого океана, к востоку от островов Тонга. Три миллиона лет Ниуэ был вулканом, но потом остыл. На острове живет меньше людей, чем в некоторых киевских ЖК, его аэропорт обнесен деревянным заборчиком в половину человеческого роста, а выйти на летное поле можно через деревянную калитку. На острове нет преступности, ВИЧ, коррупции и коронавируса. Самое большое событие там произошло девять лет назад — над островом ночью взорвался метеорит, никто не пострадал.
Редакция «Бабеля» хотела бы встретить старость именно там.
Редакция «Бабеля» в полном текущем составе (без литературных редакторов).
Karolina Uskakovych / «Бабель»