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

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

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

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

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

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

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

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

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

В результате

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