Живая Москва

Агентство «Городские проекты»

Живая Москва

Сайт об инфраструктурных изменениях различных локаций Москвы. С помощью виджета-шторки можно увидеть улицу, двор или любой другой объект до изменений и после. Объекты классифицированы по типам и характеру изменения. Кластерная карта объектов. Создан по инициативе Ильи Варламова.


Идея — Илья Варламов

Разработка, дизайн — Лайв Тайпинг

Живая Москва
moschange.ru

Живая Москва

Проект «Живая Москва» создан для отображения всех изменений города, значимых для жителей и гостей столицы.
Задача
Создать сайт, наглядно иллюстрирующий изменения в инфраструктуре Москвы.
Предыстория
Заказчик пришёл к нам с идеей сайта, который показал бы, что любой город является подвижным и развивающимся организмом, особенно такой крупный мегаполис, как наша столица. Город живёт, а летопись ведут сами жители столицы. Поэтому вторая цель «Живой Москвы» — сколотить сообщество неравнодушных к этим изменениям людей.
Процесс
Идея сайта
Идею проекта заказчик рассказал по телефону. В тот же день вечером мы встретились для обсуждения брифа.
Основной идеей сайта стала демонстрация изменений Москвы в виде фотопары — двух фотографий, объединённых по принципу «было-стало».
Первый план проекта
Мы обсудили функциональность сайта, важные разделы и способы структурирования материалов:
  • Текст, ссылки, фотографии, фотопары,
  • комментарии, голосования, кнопки для шаринга;
  • Списки анонсов материалов, фильтры и сортировка;
  • Карта с фотопарами (с фильтрацией);
  • Предложение материалов пользователями
  • Раздел «О проектe»
  • Новости и анонсы
  • Главная страница
Базовая информационная единица сайта
Это материал, который описывает изменение улицы, дома или других объектов в целом. Материал состоит из одной или нескольких фотопар, текста, фотографий. Также мы решили дополнять материалы блоками комментариев, голосованиями и кнопками для шаринга ссылки на него в социальные сети.
Первую версию сайта нужно было запустить как можно быстрее. Чтобы в сжатые сроки сделать цельный сайт, воплощающий задуманное, из первоначального списка мы выбрали минимальный набор функций: материал, состоящий из фотопар и текста, список анонсов материалов с разными вариантами сортировки и фильтрации и главную страницу.
Привлечь посетителей
Заказчик посчитал очень важным с первого же запуска привлечь посетителей сайта к его наполнению и дальнейшему развитию. Поэтому в план первого этапа мы включили страницу, с которой посетители сайта могут отправлять фотографии и их описания.
  • Материал
  • Список анонсов материалов
  • Предложение материалов пользователями
  • Главная страница
Все остальное мы отложили на второй этап разработки.
Первый этап
Работу над сайтом мы традиционно начали с прототипов страниц, в ходе которого мы предлагаем на оценку заказчику несколько концепций страницы, добавляем и убираем элементы и приходим к конечному варианту.
Страница объекта
Первый прототип страницы объекта выглядел так. Данные об объекте (год съёмки, категория, район и дата публикации) были ориентированы вдоль заголовка.
Позже данные были расширены и собраны в вертикальный блок
Конечный вариант страницы имел такой вид:

Страница анонсов материала
На первом этапе решили показывать анонсы материалов в виде списков с сортировкой по дате публикации материала (сверху — новые) или по дате реконструкции объекта (сверху — последние). А также фильтровать по категории изменений и географическим признакам — районам и округам.

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

Поэкспериментировали с внешним видом таймлайна:

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

Регистрация
Регистрация на большинстве сайтов напрягает. Мы решили сделать ее незаметной: новый пользователь, желающий разместить фотографии, вводит данные не для того, чтобы зарегистрироваться, а для обратной связи с редактором сайта. Сайт запоминает его и в дальнейшем узнаёт автоматически.
Страница объекта
При проектировании каждой страницы важно учитывать цели, с которыми на неё могут приходить различные пользователи, и контекст, в котором они в этот момент находятся. Особенно это важно учитывать при проектировании главной страницы. Мы разделили пользователей на три условных группы: новичков, редких и частых пользователей.
Соответственно, главная страница должна играть три роли одновременно:
  • объяснять новичкам, куда они попали и что тут можно сделать;
  • показывать редким пользователям всё самое интересное;
  • показывать частым посетителям самые важные и постоянно используемые функции.
На первом этапе на главной решили показать:
— слайдер с самыми популярными материалами;
— блок ссылок с иллюстрациями, ведущих на страницу «О проекте» и на форму для отправки фотографий;
— анонсы двух самых новых материалов.

Шрифтовое оформление названия
Было много промежуточных вариантов шрифтового оформления названия.
Шесть первых вариантов выглядели так:

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

Название проекта
21 августа утвердилось название проекта — «Живая Москва».
Дизайнеру захотелось с помощью шрифта обыграть мотив 70-х:

Сначала звездочка всем нравилась,
но позже от неё все-таки решили отказаться. Сохранили шрифт, смягчили цвет и остановились на этом варианте:

Слоган «меняется на ваших глазах» появился на втором этапе:

Пока редакция наполняла сайт материалами, они столкнулись с тем, что некоторые присланные пользователями фотографии имеют низкое качество, что не отменяет их ценности. Они попросили нас решить эту задачу, и мы предложили сделать два вида фотопары — большую и маленькую. Оценив качество фотографии, редактор сайта может выбирать подходящий размер виджета. Также это решение помогло разнообразить вёрстку страницы с материалом.
31 августа все было готово к запуску. На сайте к тому моменту было опубликовано 33 материала. Мы ещё раз все проверили, затем перенесли код сайта с тестового сервера на боевой и открыли доступ к нему для всех пользователей.
Второй этап
Карта
За время работы над первым этапом план второго этапа успел обрасти подробностями и увеличиться в объёмах. Главной новой функцией стала карта.
Вот так выглядел первый концепт:
Один материал сайта мог описывать довольно протяжённый объект — целую улицу или парк, поэтому на карте решили отмечать место расположения конкретных объектов, показанных на фотопарах. Для этого каждую из них привязали к географическим координатам через административную панель.
Все фотопары на карте, расположенные близко друг к другу, собираются в кластер, иконкой которого сначала была капля, а позже стал фотоаппарат.
Для показа фотопары на карте автоматически создаётся миниатюра виджета.

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

Иногда при публикации нового материала для него не находилась подходящей категории, и мы создавали новую. В какой-то момент категорий стало так много, что мы разделили их по двум группам — «Тип объекта» и «Категория изменений», а также сделали инструменты управления списком категорий в административной панели. Ту же систему фильтров, которая применялась к материалам, мы добавили на карту.

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

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

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

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

Работа над сайтом
272 638

человек посетило сайт в период
с 25 марта по 25 апреля
495

материалов размещено на сайте
174

авторов опубликовало свои записи
46338

раз посетители оценили материалы
в период с 21 марта по 24 апреля
7207

голосов отдавали пользователи в среднем в неделю
со дня введения функции голосования
Команда
АККАУНТ
Александр Кузнецов

МЕНЕДЖЕР ПРОЕКТА
Юрий Кузьменко
ДИЗАЙН
Лена Гальцина
Ева Рупенко
СЕРВЕР
Борис Толстуха
Виктор Михаль
Фронтенд
Павел Байбара
Михаил Данилов
Светлана Кривошеева