Мобильная версия портала Зеленоград.ру

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

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

• Дать жителям и гостям города быстрый доступ к справочнику, включающий информацию об учреждениях и заведениях, а также карту города. Информация должна быть достаточной и не избыточной — только то, что может потребоваться в дороге.
• Подсказать, куда можно сходить в свободное время прямо сейчас или в ближайшие дни. Должны быть представлены только культурные мероприятия «импульсного спроса» — те, которые можно посетить не строя долгосрочных планов.
• Помочь пользователю скоротать свободные 5–10 минут, дав возможность почитать и обсудить новости города.
• Предоставить пользователям возможность работать с сайтом наиболее удобным для них в текущий момент образом — с компьютера, мобильного телефона или RSS-ридера

Кроме того, необходимо было позаботиться о следующих качествах:

• Эргономика. Удобный пользовательский интерфейс, позволяющий быстро и эффективно использовать основные функции сайта;
• Доступность для основных мобильных платформ. Основная часть функций должна работать во всех телефонах, имеющих HTML-браузеры.
• Минимум лишнего. Важно помнить об ограничениях мобильных браузеров, экранного пространства, контекстах использования самих телефонов.

Решение

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

• Справочник компаний и организаций с общей и контактной информацией, списком услуг и тарифной политикой, картой проезда и отзывами пользователей. Важно также было проработать функции поиска по нему, которые давали бы гибкость запросов и учитывали ограничения среды.
• Карта города, которая доступна прямо из браузера и не требует установки отдельного приложения. Кроме того, она должна иметь простейшие возможности включения тематических слоев — показывать, есть ли в показываемом районе необходимые заведения.
• Новости и афиша событий, позволяющие решить две часто возникающие задачи — «почитать что-нибудь интересное в свободные 5–10 минут» и «узнать, куда можно сходить прямо сейчас или позже на неделе». Как и в случае со справочником, афиша должна иметь максимально возможные инструменты для поиска и фильтрации списков.

Все это было отражено в пакете структурных схем страниц (wireframes) и дизайн-макетов, которые стали основным результатом работ. А также сопутствующих документах, описывающих задачи и структуру интерфейса.

В результате

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