Редизайн сайта ПМЭФ: как мы обновили интерфейс и навигацию

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

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

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

Главной UX-задачей стала навигация. Старое меню отображало всё сразу, из-за чего десятки разделов конфликтовали друг с другом за внимание пользователя, смешиваясь с подразделами и другими ссылками. В результате приходилось разбираться в структуре сайта, чтобы добраться до нужной информации.

Мы пересобрали хедер и логику переходов, чтобы сохранить весь необходимый объём информации, но сделать его понятнее. Это оказался один из самых сложных компонентов проекта, и нам пришлось несколько раз переделать структуру и меню, пока мы не проработали решение, которое отвечало всем запросам и оставалось привычным для пользователя.

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

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

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

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

Мы подготовили макеты для компьютеров, планшетов и смартфонов. При адаптации учитывали размеры экранов и то, как пользователи ищут программу и сервисную информацию.

Та же системность важна и для мультиязычного интерфейса. Основная версия проектировалась на русском языке, а английскую мы проверяли на ключевой странице во всех основных разрешениях. В частности, учитывали, что при смене языка меняется длина слов и текстовых конструкций, а значит, может меняться и поведение элементов.

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

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

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

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