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