Навигатор по торговым барьерам, 2018
Краткая презентация проекта на Behance.
У каждой страны есть правила импорта товаров: требования по маркировке и соответствию местным санитарным нормам, ввозные пошлины. В зависимости от страны-производителя, эти правила могут меняться.
Торговый навигатор позволяет узнать о правилах, применяемых к товарам, экспортируемым с острова Кипр. Сервис помогает бизнесменам оценивать условия выхода на тот или иной рынок, а экономистам — следить за тенденциями в мировой торговле.
Тепловая карта на главном экране. Чем темнее страна, тем больше торговых бареров (выше ввозные пошлины).
Задача
Разные группы пользователей ищут разные типы данных. Одним важно видеть полную информацию по отдельному рынку (стране), других интересуют правила импорта конкретной группы товаров. Требовалось сделать гибкий интерфейс, позволяющий комфортно работать в разных сценариях.
Решение
Сначала, я определил основные наборы данных, интересующие пользователей, а затем спроектировал навигацию, позволяющую быстро получить эти данные.
Основой навигации стал сквозной фильтр вверху экрана, в котором можно задать пару «Рынок–Товар».
В левой части расположилось меню с видами информации, относящимися к сформированной выборке. Такая навигация позволяет быстро увидеть правила импорта выбранной товарной группы на конкретный рынок, чтобы зачем изучать информацию по паре «Рынок–Товар» более детально. Фильтр размещён так, что человек всегда понимает, какой именно срез данных он видит, и, при желании, может изменить выборку «на лету».
Обзорный экран с информацией об экспорте киприотского мёда в Китай.
Сбросив один из атрибутов в фильтре, легко получить такие списки как «все торговые барьеры отдельной страны» и «все торговые барьеры в мире для отдельного товара».
Так выглядит список всех нетарифных барьеров в мире. Выбрав товар в фильтре, вы получите список стран, где действуют барьеры на ввоз этого товара и сразу увидите, где какие ограничения применяются.
Решение со сквозной панелью фильтров интуитивно понятно и легко масштабируется: можно расширять возможности фильтрации или добавлять новые информационные разделы, не переделывая интерфейс.
Впервые похожая система навигации была разработана мной для портала «Экспорт регионов России», где хорошо себя зарекомендовала и в упрощённом виде перешла в «Навигатор барьеров» для российского экспорта. Trade Navigator Europe — уже третий проект, в котором она используется.
Параметров в фильтре мало, поэтому даже длинные названия стран не нужно сокращать.
Кликнув по названию, вы откроете окно выбора страны (товара). Кликнув по крестику, вы сбросите фильтр на значение «Все страны». Опытные пользователи знают о таких ньюансах и используют их. В аналогичном проекте я оставил на плашке только одну функцию и это сразу было замечено посетителями.
Поиск работает без учёта состояния фильтров. Во-первых для того, чтобы исключить случаи, когда теряется важная информация. Во-вторых, база торговых барьеров невелика (около сотни позиций), так что в одновременном использовании фильтров и поиска нет необходимости.
Помимо базы ограничений, портал содержит справочник типов торговых барьеров (классификация UNCAD). У посетителя есть возможность сообщить о новом или указать на неточности в описании имеющегося барьера. Дизайн адаптирован для мобильных устройств и планшетов.
Я спроектировал и нарисовал дизайн портала во время работы в компании «Инфографер» в 2018 году.