Разработчики нового сайта президента РФ Артем Геллер и Михаил Жашков рассказали «Ленте.ру» о том, как создавался дизайн, а также о том, какие базовые идеи и неприметные фишки заложены в новый правительственный интернет-ресурс.
«Лента.ру»: Правда, что у вас 50 версий герба?
Жашков: Мы решили переработать герб. Тот, что повсеместно используется сейчас, — это один рисунок, сделанный в 1990 году. Мы работаем с вебом, а это значит — с экраном. Текущая версия герба избыточна для экрана и не может служить иконкой.
Мы выяснили, что текстовое описание герба закреплено в законе и приоритетнее рисунка, а рисунок каждый художник может делать по-своему. Поэтому решили переработать орла. Нам надо было три разных варианта герба: маленький, для иконок, средний и большой, для всех современных экранов со сверхвысоким разрешением. Предложили этот подход чиновникам из администрации Президента, вместе с которыми работали. Они сказали «Ок».
Геллер: «Ок, посмотрим». Они хотели сначала увидеть результат. Важно было вписать герб в правильную простую форму, чего не было сделано ранее, а позже для узнаваемости добавить детали, близкие к привычной визуализации. Мы изначально решили, что подарим герб всем, кто будет создавать госсайты, — выложили исходные файлы и иллюстрации под свободной лицензией Creative Commons.
Столько работы с гербом и пустая правая сторона?
Жашков: Вы просто не заметили все решения сайта. Пространство справа пустует, только если вы зашли на главную страницу посмотреть, не пользоваться. Еще для этого у вас должен быть большой экран, а это чуть менее 24 процентов аудитории сайта. Через неделю использования все вопросы отпадают. Говорят, что «это очень удобно». В целом же удалось облегчить сайт за счет того, что многие функции стали контекстно-зависимыми. Это удивительно: глядя на предыдущую версию, было видно, что функций на сайте полно — а про новую сходу так не скажешь. Но факт: мы сохранили все предыдущие функции и добавили необходимые новые. К тому же у нас настолько много людей заморочено на политике, что когда они заходят на новый сайт и видят много спокойного пустого пространства — успокаиваются.
Мы понимали, что нам надо не просто обновить сайт, а сделать ресурс, который будет оставаться современным еще лет пять. Если не десять. Дизайн сайта выполнен с запасом, хотя многие государственные сайты по качеству еще даже не догнали предыдущий сайт президента. Мы осознавали, что новый станет примером. Но вначале у нас был длинный период, когда мы разбирали накопленную статистику — как уже используется текущий сайт.
По результатам мы сделали краткую презентацию принципов, на которых должен строиться новый сайт. На листах формата А3 — все основные страницы будущего сайта, описания «как, что и почему». Так, чтобы человек «со стороны» для нашей области, за 5 минут смог вникнуть в суть — что предлагается и почему. Описали принципы, подготовили картинки, сделали выносы с пояснениями «вот в этом месте, этот принцип работает вот так».
Эта презентация стала легендарной. Позже Минкомсвязь рассылало ее фрагменты, взятые оттуда принципы как собственные рекомендации о том, как надо строить государственные сайты. Мы их тоже получили.
По нашему предложению первоначально вся информация должна располагаться линейно и последовательно — в одну колонку, потому что если ты предлагаешь пользователю одновременно две колонки, то не можешь быть уверен, что прочитают другую. Все-таки это не СМИ, где остальные материалы могут служить фоном для интересной статьи. Здесь другие задачи. И второй момент: сейчас 2015 год, и две колонки рядом — непозволительное рассеивание внимания пользователя.
Коллеги в администрации президента озадачились. Они такого еще не видели. У нас получился фактически Twitter для половины сайта.
Геллер: Вот если «Ленту.ру» взять, у вас похожая идеология, просто в правой колонке — реклама и необязательные информационные элементы. Это правильно для СМИ, но нам они не нужны. В нашем случае неправильно все засорять информацией вне контекста материала. У нас нет задачи заставлять пользователя задерживаться на ресурсе, откручивая рекламу, или смотреть на глубину просмотра. Наша важнейшая цель — максимально быстро дать человеку то, за чем он пришел.
Мы знаем, что подавляющее большинство людей приходит не на главную страницу, а на сам материал по внешним ссылкам из поисковиков, социальных сетей или материалов информационных агентств. По нашей статистике, 22 процента пользователей заходят с мобильных устройств и видят адаптированный под них сайт, у 38 процентов низкое разрешение — они видят сайт посередине или с маленьким отступом справа. Еще у 24 процентов разрешение браузера выше 1580 пикселей по горизонтали, им мы сразу разворачиваем сайт в две колонки, даем дополнительные контекстные возможности и ускоряем их навигацию в 1,5-2 раза. Мы думали обо всех группах пользователей с множеством устройств, для всех создали свой, правильный, отдельный опыт.
Нам удалось удивить администрацию президента динамикой и удобством решения. Через несколько недель у них отпали все вопросы в этой части. Обычно применяют стандартные древовидные решения. Приведу один пример из сотни. Человек читает новость, и в ней упоминается какое-то лицо. Он кликает на него, в колонке слева, не закрывая материал, возникает информация о его текущей должности, биографии и еще каких-то важных данных. Именно этой функциональностью мы ускоряем навигацию и не разрываем ритм чтения. Таким же образом, не отвлекаясь от события или документа, можно открыть другой раздел, прочитать дополнительную информацию, написать письмо, узнать контакты пресс-службы и так далее.
Сайт можно не закрывать: в лентах обновляются новости, помечается количество непрочитанных. Для максимальной оперативности работы пресс-службы и сама новость живет: сначала после события появляется короткий текст, потом — стенограмма и фотографии, наконец, выкладывается видео. Мы видим все эти обновления, вернувшись во вкладку с «Новым Кремлем».
После всего этого голого функционализма мы хотели добавить эмоциональности в сайт, но мы знали, что это будет оцениваться как отношение к президенту, как поднесение определенных решений. Поэтому мы шли от инженерии и синтетики и достигли той самой границы, когда остались человечными, но уже были однозначными.
А как границу почувствовали?
Геллер: Никак, просто делали новые версии. Например, первые версии сайта были фиолетовыми, хотелось добавить тепла в интерфейс — ведь у нас много фотографий лиц людей. Из множества правок почти с самого верха пришла характеристика: «Можно было бы и посмелее». Тогда мы добавили новые цвета. Много тестировали и оттачивали, конечный внешний вид сайт принял за 2 недели до запуска.
Тяжело работалось с администрацией президента?
Геллер: Государственный заказчик такой же, как коммерческий, иногда даже лучше. Например, в нашем случае мы работали с людьми, которые принимают решения. Они доверяли нам как проектировщикам и дизайнерам, они хотели сделать лучше. Пожалуй, работать с ними было все равно, что с лучшим из коммерческих заказчиков.
Но история началась давно. Примерно в 2008 году пресс-служба администрации президента разослала компаниям, занимавшимся веб-дизайном, предложение сделать сайт президента. У меня в тот момент было много времени, и я сделал свой вариант — продуманный и объемный.
Время от времени мне звонили и сообщали, что мы попали в двадцатку, потом в десятку. Я не переживал даже, был уверен, что откаты, распилы… Но в какой-то момент мне позвонили и сказали: «Приходите в Кремль». Там из трех лучших компаний выбрали мою.
Я отвечал за событийную и справочную часть сайта Kremlin.ru, который запустили в 2009 году. Это был первый «крутой» госсайт, получивший хорошие отзывы от профессионального сообщества, включая посетителей «Хабра» (сеть блогов habrahabr.ru — прим. «Ленты.ру»). Потом меня позвали делать сайт правительства (government.ru), и он был вторым знаковым для индустрии. В этот проект я втянул Михаила, и с тех пор мы работаем вместе.
Жашков: Когда мне предложили принять участие в работе, я взял время подумать. Думал несколько часов, до вечера. Сидел и пытался понять, должен ли я согласиться? Ведь если окунуться во мнения, которые окружают все это, — там «Навальный», «распил», «кровавый режим» и все такое. Через несколько часов понял, что все эти вопросы, если их структурировать, сводятся к одному: вопросу о том, «чтобы каждый человек на своем профессиональном месте делал свою работу хорошо». А меня, собственно, именно об этом и попросили.
Позже на первой встрече я увидел госчиновников, которые в пятницу после десяти вечера сидели и обсуждали с нами, «как сделать наш сайт лучше», хотя своих подчиненных уже отпустили домой или по барам.
Они работали с нами вместе с самого начала и до последнего дня перед запуском. Они доверяли нашему мнению, за которым у нас было 74 версии и каждая прорабатывалась — еще до 10 вариантов. Мы перепробовали и перепроверили каждое решение.
И сейчас работа над сайтом продолжается.
Зачем было год работать, создавать столько версий?
Геллер: В волшебном мире собираются 15 умных людей и сразу решают, каким должен быть сайт. Но в реальной жизни сразу все не учтешь. Эскизы сайта за это время практически не поменялись. Но мы две тысячи раз прошли по его структуре, собрали все грабли, чтобы в результате получить нужные решения.
Но почему у нас тогда так мало красивых государственных сайтов?
Геллер: С тех пор как в 2009-м я занялся первым своим сайтом kremlin.ru, я профессионально мониторю индустрию проектов e-government и, безусловно, сайты правительств других стран. И могу сказать, что у нас значительный прогресс. Вот назовите два города, например, условный Екатеринбург и условный Лион. Я их не видел, но обычно российский сайт лучше. Та же история, если взять однотипные министерства в России и любой страны Европы.
Есть, конечно, знаковые сайты: gov.uk или ресурс Нью-Йорка, но если смотреть на ситуацию в целом, то в той же Франции она хуже. Мне кажется, нашим разработчикам хочется себя показать. Сделать в условном Екатеринбурге такой сайт, чтобы всем потом демонстрировать.
Где же ответственность чиновников, если они потратили на этот сайт то ли 20, то ли 50 миллионов рублей по разным источникам?
Геллер: Не могу ответить, мы все-таки не представители компании, выигравшей тендер, а исполнители. Кроме дизайна, там сменился весь «фронтэнд» и «бекэнд» сайта, чтобы соответствовать запросам граждан и требованиям редакции. Мы в очередной раз доказали, что делаем лучшие государственные сайты в России, а может быть и в мире.
Какие глобальные идеи были заложены в сайт?
Жашков: Основная идея — это линейность контента, о чем мы уже говорили: информация везде выводится в одну колонку. И у нас даже нет архива. В принципе, в разделе новостей можно докрутить вниз до самого первого события. Вторая — неразрывность взаимодействия, в отличие от предыдущего, сайт не разделен на страницы. Но тут мы решили еще более глубокую проблему, существующую от истоков интернета. В самом начале веб был серией html-страниц, связанных друг с другом. И если вам требовалась какая-то определенная информация, вам нужно было пройти до нее путь через все предыдущие страницы. Но весь этот путь необязательный. Человек проходит его, потому что это элемент навигации. Мы решили отделить навигацию от контента. И третья — контекстность: мы ориентируемся на содержание страницы. Например, при просмотре материала с одной стороны, с другой можно видеть события из ленты, предшествующие или последующие событию. Или открыть ленту событий, связанных с персоной, упомянутой в тексте. Или в лентах по комиссиям при президенте — просматривать сбоку справочную информацию.
Поэтому на главной странице правое поле кажется пустым. Пользователь посмотрел, но еще ничего не сделал на сайте. К тому же на титульную страницу обычно заходит мало народа. Это сейчас все приходили сайт «посмотреть» (во всех смыслах, но еще не «пользоваться»), и у них возникал вопрос о пустом пространстве справа.
Геллер: Из мелких фишек: по иконке новости видно, короткий текст или длинный — в зависимости от этого выделено разное количество строчек в нарисованной пиктограмме. При двойном тапе (нажатии пальцем на сенсорный экран — прим. «Ленты.ру») на мобильной версии мы увеличиваем размер шрифта с сохранением позиции, размер шрифта изменяется в зависимости от размера заголовка, чтобы оставаться в нашей сетке. Даже реакция на быструю и медленную прокрутку различается, и таких примеров сотни.
Любимая фишка журналистов — синхронизация видео с его стенограммой: можно выделить конкретный абзац и видеозапись перейдет на отмеченное место. Что-то подобное делали в РИА, но у нас это выполнено более современно и технологично.
Кроме того, мы опять сделали сайт, которым удобно пользоваться людям с ограниченными способностями. Первым таким опытом был сайт президента РФ в 2009 году, тогда на нем появилась первая в мире версия для инвалидов! Позже ее растиражировали тысячи сайтов, не только государственных.
К чему стремится человек, сделавший сайт президента?
Геллер: Мы задаем высокие стандарты качества, к которым нужно подтягиваться всем государственным ресурсам. Теперь появилась мечта: разработка стандартов и решений для государства в целом, с бесплатным распространением и, возможно, обязательным использованием. Чтобы чиновник, работая по ним, мог сделать качественный продукт.
А государство на этом сэкономит, поскольку не надо будет заново каждый раз изобретать некачественный велосипед. Стандарты могут быть и технологическими.
Когда я сделал первый сайт в 2009 году, то 80 процентов последующих госсайтов подстраивались под его стиль. То же самое я увидел после создания government.ru, и уже тогда начал закладывать возможность стандартизации. Думая об одном, думаешь о всех ресурсах, которые будут себе это копировать.
Создавая новый сайт, мы держали в уме весь российский e-government. Не люблю термин «правительственные сайты». Мы хотели создать эталон.