Веб‑система Гисметео

Рассказывают Маша Булина и Миша Нозик

Первая итерация

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

Настольная версия
Первые макеты

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

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

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

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

Дорабатываем макеты по замечаниям, прорабатываем ещё больше состояний:

В первой итерации ещё можно было настраивать внешний вид воды и суши. Цветовые сочетания:

По мере готовности и утверждения макеты уходят в разработку. Разработчики пишут спецификацию (даже две спецификации, ведь команды две), вёрстают, докручивают бэкенд. А мы тестируем, ловим баги, пишем замечания и придумываем, как успеть в срок. В результате итерации по плану на боевом сервере открыта первая версия системы: в ней можно погулять по карте, добавить один‑два слоя с погодными данными, покрутить машину времени, отправить ссылку на слайд или сохранить его в виде картинки.

Вторая итерация

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

Подбираем палитры для закрасок:

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

Параллельно проектируем интерфейс изменения параметров новых слоёв и рисуем другие формы представления:

Закраска температуры
Закраска влажности
Закраска ветра
Значки ветра
Закраска осадков
Цветной код осадков
Закраска давления
Изолинии давления
Закраска и изолинии геопотенциала

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

Третья итерация

Задача третьей итерации — дать пощупать систему профессиональным синоптикам, получить их комментарии и на их основе понять, куда развивать систему дальше. Для этого необходимо добавить в систему инструменты для подъёма карты (потому что без них невозможна профессиональная работа синоптика) и продумать способы сбора отзывов.

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

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

Было
Стало

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

Параллельно проектируем интерфейс подъёма карты:

Продумываем состояния курсора и элементов непосредственно во время рисования — что как наводится, реагирует на клик и так далее:

Рисуем интерфейс для сбора отзывов:

При отправке отзыва предполагалось показывать пользователю красивую анимацию, но её пришлось пофлексить:

Наконец, проектируем экраны регистрации, входа, восстановления пароля и готовим транзакционные письма:

В результате третьей итерации в системе появились инструменты подъёма карты, обновился интерфейс, вновь была доработана скорость и стабильность работы. А ещё мы получили более сорока страниц замечаний и пожеланий от синоптиков. Часть из них была учтена при планировании четвёртой итерации, остальное — вместе с клиентом решили отложить на будущее.

Четвёртая итерация

Четвёртая итерация посвящена доработкам системы по замечаниям синоптиков, диаграммам, новому слою радиолокации и новым инструментам подъёма карты.

Ищем дизайн флажка по клику на карту и окон диаграмм:

Прорабатываем больше состояний:

Слой с радиолокационными данными:

В подъёме карт появляется много новых инструментов. Решаем повернуть панельку инструментов на 90 градусов, чтобы найти для всех них место.

Было так (см. левый нижний угол):

Стало так:

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

Продумываем интерфейс истории просмотров:

***

В проекте участвовали сразу две команды разработчиков. Команда Гисметео отвечала за всё, что связано с рендерингом карты и отбражением данных на ней. Команда «Цифрономики» отвечала за реализацию интерфейса.

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

Отправить
Поделиться
Запинить