Однозначно новый сайт mos.ru производит приятное впечатление.

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

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

Есть некоторые проблемы с точки зрения технологий фронт-энда. А именно, на главной странице справа, есть быстрая навигация по последним событиям. Подложка превью фотокарточек использует эффект размытия сразу для всех фотографий. Это значительно нагружает процессор и слайдер сильно тормозит. Такая же ситуация с некоторой задержкой возникает на ховерах к анонсам событий, где есть фотографии (эффект приближения). Вообще количество анимаций на всех элементах интерфейса, на подобных ресурсах должно быть предельно сбалансированным. Если сравнивать с nyc.gov и gov.uk, то видно, что там все предельно статичное, за исключением мелочей.

Подход:

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

Житель Москвы может запомнить один короткий адрес и всегда найдет нужную ему услугу

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

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

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

Дизайн

Первая страница — красивая и понятная в целом.

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

А вот внутри начинаются более серьезные проблемы c юзабилити:

При вполне современной концепции самого дизайна подача материалов в Городском советнике получается не самой интуитивной и наглядной, вынуждает останавливаться, вчитываться и вдумываться на каждом «шаге».

Например, выбирая и проходя какую-то услугу, нам показывают шаг на котором мы находимся, но нам не видно сколько впереди еще шагов...

Полезное (колонка справа) — если открыть одну из статей и, читая ее, промотать заголовок, то понять что ты читаешь, не промотав назад к заголовку, невозможно. Также нельзя закрыть поп-ап со статьей, нажав на страницу вне поп-апа (можно только по кнопке справа) — неудобно. В Пульсе города текст заголовках на фотографиях читается плохо и тд;

Мобильная версия:

Контент уезжает за границу экрана... некоторые элементы мелковаты для экрана смартфона..

Вывод:

Видно, что была проделана хорошая аналитическая работа, сделан современный дизайн, учитывающий потребности аудитории, но дальше все очень сыро;

А соль, как вы знаете, всегда в мелочах.

Реализация портала mos.ru в виде единой точки входа для гражданина РФ — идея здравая и современная. Наша компания апробировала подобные решения в десятке фоивах и оно оправдало себя. Идея советника, который подскажет гражданину ответы на все насущные вопросы — актуальна. Но здравую, современную и актуальную идею может убить слабая реализация.

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

Огромное спасибо департаменту информационных технологий города Москвы за огромный вклад в развитие ИТ отрасли города.

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

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

Пока, правда, концепция единого окна реализована не до конца. Так, при попытке узнать свой ИНН, в конце концов портал отправил меня на сайт ФНС России. Вопросы недостаточной межведомственной интеграции на уровне информационных систем дают о себе знать и ограничивают возможности разработчиков.

Идея с «человеческой» редакцией превосходна. Это именно то, чего не достает многим органам исполнительной власти. Но, во-первых, портал Правительства Москвы — это все-таки не новостной портал и информационная функция не должна перекрывать функции сервисные. Кроме этого, редакция должна руководствоваться интересами жителей города, а сейчас, например, на «передовице» красуется новость об открытии нового корпуса в «геронтопсихиатрическом центре милосердия». Главный редактор действительно считает, что жителям настолько это интересно?

Увы, разочарования ждали меня и дальше. Концепция mobile first реализована лишь отчасти — сайт «разваливается» и на планшетах, и на смартфонах. Ключевые функции (оплата коммунальных услуг, поиск парковки, расположение велопрокатных станций, жалобы на ЖКХ) найти довольно непросто — зато легко найти инструкции по регистрации автомобиля. В концепции заявлена забота о жителях, а пока сайт на 90% является самопрезентацией итогов работы Правительства Москвы — на сайте много красивых отчетов об итогах деятельности.

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

Я бы рекомендовал разработчикам не спешить и уделить больше времени на тестирование и доведение «до ума» получившегося портала. Стоит обратить внимание на советы одного из мэтров российского дизайна Артема Геллера, и на сайты, являющиеся сегодня образчиками качественных государственных сайтов — сайт Президента России и новый сайт Почты России.

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

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

Почему?

Во-первых, собственно на портале эти благие намерения даже не сформулированы. Заходишь — и не понимаешь: куда ты попал? что здесь можно сделать? Ни слогана, ни миссии в «шапке», ни хотя бы просто названия. (Лично я узнал о том, что это именно «Официальный портал Мэра и Правительства Москвы» из тултипа к вкладке браузера.) А в главном меню нет ни одного явного пункта о «жизненных ситуациях» — есть только официозные «Пульс города», «Пресс-центр» и другие «Достижения». (На самом деле такой пункт «про жизнь» есть, вот только называется он чрезмерно пафосно — «Советник». Внимание, вопрос: станете ли вы, например, чтобы получить охотничий билет, кликать по слову «Советник», расположенному к тому же рядом с гербом Москвы? А он там:))

Поиск по сайту, похоже, вообще не работает. До смешного:

Дальше. Портал содержит практически полную коллекцию «детских» ошибок юзабилити:

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

• ...И наоборот: под одним и тем же названием скрываются разные страницы: сравните, например, «Документы» и «Документы».

• Не создаются корректные ожидания о том, что пользователь может (или должен) сделать для достижения своей цели, а также о том, что он получит в результате своих действий. Сколько шагов, например, нужно совершить для регистрации новорожденного? (Спойлер: «один шаг» — неправильный ответ).

• Список услуг, доступных на портале, даже не претендует на полноту: внизу стоит ссылка «Посмотреть еще», как будто это какой-то новостной фид. Услуги что, постоянно обновляются в онлайн-режиме? А уж определить, по какому принципу составлен список этих услуг, вообще невозможно: рядом соседствуют «Оформить визу» и «Утилизировать автомобиль», «Карта стоянок такси» и «Сдать комплекс ГТО». (Вы еще помните, что поиск по сайту не работает, да?)

• Некоторые элементы — например, стрелочка рядом с название блока «Полезное» — выглядят как активные, но при этом не позволяют совершить никаких действий.

• И так далее, и тому подобное...

Моя рекомендация:

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

Новый портал Москвы позиционируется, как сайт-хаб, т.е. точка входа в пространство, где скрывается в кромешной интернет-мгле множество гос.сайтов. Выполнен инфокиоском, в пику старым-проверенным консольным http://gosuslugi.ru (и даже в бета-версии https://beta.gosuslugi.ru тоже) или https://pgu.mos.ru и этот портал Москвы и не информационный и не сервисный, а «золотая середина», по задумке авторов. А*мы делали подобный по масштабу проект «Гуманитарный портал стран СНГ» — знаем, что нащупать нужную грань между двумя подходами очень тяжело.

С первого же взгляда и экрана — отлично проработаны пользовательские сценарии. Пошаговые инструкции «Советник» очень хороши, но шаги нужно подписывать, впрочем, как и дальнейшие переходы на другие сайты. По запросу — неочевидно. Для примера прошелся по защите деревьев в Москве — отлично по полкам сценариев все законодательство разложено, «Дело Кировлеса» теперь живет не только стараниями Навального. По этому же, еще более упрощенному пути выдачи контента «только по запросу» пошла и новая «Почта России» http://pochta.ru — вообще убрали статичный контент. Еще более правильно.

В информационном «Пульсе города» не хватает рубрикации или тэгирования с самого старта, и, вообще, почему «Новости» не в «Пресс-центре»? Чувствуется замах на http://gorod.afisha.ru — но поймут ли широкие массы такой скриптовой интерфейс... И есть проблемы с заголовками на фото новостей — они сейчас в части случаев нечитабельны.

«Документы». Отлично проработанный раздел. Но что с заполнением и приемом бланков? Они выведены в отдельные проекты. Неочевидно.

«Календарь». Очень хорош, но он должен быть все же в верхнем уровне навигации, наравне с «Советником». Глубоко.

«Услуги», «Жалобы», «Мнение» как интерактивные модули спрятаны так низко и глубоко, что думаешь — Москва не хочет с тобой разговаривать? Уводят.

Технологии. Навигация и ссылки не очень очевидны, особенно в глубине портала. Даже версия для слабовидящих в этом смысле чуть лучше. При загрузке страницы всё неприятно скачет — анимация работает не на поддержку, а скорее против пользователя. Arial, как основной шрифт контента, не лучшим образом смотрится в таком большом размере. Адаптивность сайта к мобильным вполне на уровне, но практически не используется геотаргетинг объектов и событий к местности/устройству. Вообще, эта блочная бутстрап-структура на модных карточках и адаптивность «mobile first» это конечно же хорошо! Плохо то, что она все же слишком заметна, эта сетка — более прозрачный пример применения таких технологий это http://kremlin.ru

Визуалка. Не видно «хорошей» Москвы! Почему я не вижу фото Москвы и русских людей и русских семей и русских детей, английское #LOVE в «Семье», «Транспорт» иллюстрирован пробкой бруклинского моста — мало своих?))) И, пока разработчики делали портал, уже и весь город красиво плиткой переложили, развязок сделали — много есть достойного фотоурбана Москвы!

Выводы. Очевидность через упрощение — вот что необходимо новому порталу. Я считаю, портал Москвы должен быть больше похож на поисковик, нежели на афишу. Ближайший пример http://GOV.uk

Сразу бросается в глаза во многом слепое следование двум успешным проектам (сайт города Нью-Йорка и портал правительства Великобритании).

В моей картине мира, ситуация, когда уже существуют успешные примеры, предполагает лозунг «Так же, только лучше!», но пока очень громко звучит «Так же, но чтобы не было похоже и у нас совсем нет времени». На мой взгляд, чтобы соответствовать заявлениям, разработка ресурса потребует значительных усилий одной погруженной команды в течение нескольких (3-5) лет.

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

У меня недавно родился сын и я решил попробовать раздел «Советник». В одном из первых пунктов он предлагает «Зарегистрировать рождение ребенка» и к сожалению у меня не осталось вопросов на тему «Думал ли разработчик в это время о человеке с новорожденным?», зато появился ответ на вопрос «Думал ли разработчик о человеке в принципе?». Сетки — нет, со шрифтами не определились, верстка пока бесконечно ползет, доступность для инвалидов полностью отсутствует.

Я не готов ругать или хвалить, но готов надеятся что работа только началась и будет продолжаться. Возможно, через неопределённое время (3-5 лет) мы увидим именно то, что действительно необходимо пользователям ресурса. Предстоит ещё слишком много работы, чтобы у нас был повод для обсуждения. Сейчас можно говорить только об инициативе и концепции, но не о реализации.

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

Декларируется, что сайт разрабатывался исходя их mobile-first и идеологии — безусловно это не так. Да и не важно, что там «first», но важно найти возможность серьезно поработать над важнейшими жизненными ситуациями. С мобильной интерпретацией пока не вышло, ошибок так много, что даже не знаешь с чего начать.

Субъективные замечания:

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

Команде проекта просто не хватило проф. уровня реализовать амбициозные цели, изложенные в презентации. Интерфейс выглядит сырым и, что хуже всего, непродуманным и непривычным. Непривычный — значит миллионам людей придется учится пользоваться сайтом (исследование Google). Сайт больше похож на рабочий прототип, и стилистика и дизайн будет внедрятся позже, чем на пригодную для тестирования версию продукта. Проект слишком сырой, чтобы его имело смысл тестировать экспертами и это принесло пользу. Он на стадии, когда его надо активно до- или перерабатывать. Сейчас он представляет собой этакого «Франкенштейна», которого слепили из кусков хороших идей разных людей.

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

В проекте кроме коммуникационных я не вижу других проблем, которые не позволили бы его реализовать любому их ТОПовых московских, нескольких региональных агентств с хорошей репутацией или хотя бы нашей Студии разработать проект минимум на 1-2 уровня выше, чем текущая техническая реализация.

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

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

Возможно, мои ожидания от проекта слишком высоки, однако эти ожидания опираются на цели и описания проекта в присланной концепции. В концепции также заявлено, что внутренние страницы формируются блоками в соответствии с каждой ЖС, можно в зависимости от объема и типа контента подключить дополнительные блоки: новости, жалобы, рейтинги, инфографику, отзывы. В реализации я не увидел современной реализации этого принципа, поэтому рекомендую обратить внимание на опыт Mail.ru по унификации разработки интерфейсов контент-проектов.

Отдельные замечания:

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

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

Много вопросов по разделу «Советник».

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

Также непонятно, где поиск именно по Советнику? Основной поиск не в счет — он визуально не в этой части и пользы от него не много.

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

Чего хочется — в полной мере показать «Картину дня». Текущая реализация не понятна.

Активный элемент слайдера недостаточно выделен — он полупрозрачный и не сразу понятно, что активен в данный момент. Блок занимает слишком много места и недостаточно информативен.

Пульс города — непонятное название. По сути — это просто новости. Первая статья — на более светлой картинке текст просто потеряется.

Раздел «О Москве» должен быть более интерактивным — сделать промо-страницу с фото, видео, инфографикой, подсказками, разделами, сферами жизни — это целый сайт можно сделать. Нет «продажи» города. Если такой цели не ставилось, то получить информацию о Москве можно в сотне других источников.

По задумке поиск в разделе «Документы» выполнен правильно. Но по реализации — работать и работать над удобством. Нет подсказок к названию.

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

В пресс-центре разумно сделать фильтр или теги по известным персонам/событиям.

Уместно реализовать автоматически подгружаемое содержимое при прокрутке в разделах Пресс-центр и Пульс города.

Так как из презентации цель портала быть ближе к людям, целесообразно представлять информацию в другом, мене формальном виде, чем сейчас. Простым языком. Если жизненная ситуация — это описание процесса (например, пошаговая инструкция как найти для ребенка детский сад), то необходимо сделать это процесс наглядным, визуализировать бизнес-процесс. У японцев есть отличная пословица: «Одна картинка заменяет тысячу слов».

Т.к. портал предполагает миллионы посещений в неделю, то целесообразно максимально оптимизировать размер страниц, запросы к БД, индекс БД для ускорения скорости загрузки. Необходимо использовать все доступные инструменты и возможности для оптимизации скорости.

С точки зрения дальнейшего продвижения, важно чтобы все страницы имели возможность индексироваться поисковыми системами, ссылки на них были реализованы через тег <a>, а также не было пустых страниц и дублирующего контента.

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