3 сентября, 2019
Новый дизайн и открытый каталог товаров в B2B-системе
Мы обновили фронтенд в B2B-системе. Это значит, что изменились интерфейс, дизайн, функциональность и часть пользовательских сценариев. Главный акцент сделали на скорости, удобстве и адаптации обновленной системы.
Что нового

UI/UX дизайн. UX-дизайн — это проектирование интерфейса на базе опыта, поведения и привычек целевой аудитории. А UI-дизайн включает в себя работу над графической частью интерфейса: кнопками, меню, шрифтами и т.д.
Илья Долгов
UI/UX дизайнер
Для В2В-пользователей новый дизайн означает новый опыт и новый оттенок повседневной работы с приложением. Я бы описал этот опыт как прозрачный, функциональный, надежный, но не скучный. В нашем новом дизайне много фишек, которые выглядят строго, но при этом делают работу неожиданно удобной.

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

Поэтому изменения прошли на двух других уровнях. На микроуровне изменились визуальные стили всех элементов: шрифты, иконки, кнопки, тени и т.д. На мезоуровне, в среднем масштабе, мы значительно переработали и продолжаем перерабатывать конкретные блоки и экраны. Например, переработали работу фильтров в каталоге. А вот самый общий уровень, набор основных экранов и сущностей, их компоновку мы не трогали. Система остается самой собой, одновременно сильно развиваясь.
Скорость. Это одно из самых главных отличий от старой B2B-системы. Время отклика в прошлой версии было около 0,1 секунды. По словам нашего Frontend-разработчика Михаила Фурутина, система стала работать еще быстрее, потому что теперь мы не грузим код целиком, а только частями, когда это действительно нужно. К примеру, отследить мгновенную скорость работы можно при листании карточек товара в каталоге — в новой версии нет задержек загрузки.
Открытый каталог товаров. Теперь любой интернет-пользователь может посмотреть товары, их свойства, артикулы и цены без авторизации в системе. Также товары можно положить в корзину, но чтобы оформить заказ или спецификацию —придется зарегистрироваться.
Закрепляемые фильтры. Теперь панель фильтров в B2B-системе можно закрепить на экране одним кликом. При этом интерактивный каталог плавно сдвигается вправо, и пользователь может видеть все товары. До этого панель фильтров накладывалась сверху на каталог, а выборку товаров можно было просмотреть только после закрытия фильтра. Как изменилась панель фильтров, можно сравнить на слайде ниже, сдвигая разделитель влево-вправо.
Подсказки в фильтрах. Кроме того, в панели фильтров появились подсказки, которые плавно обучают клиента работе с фильтрами.
Главная страница без карусели товаров и нескончаемого блока новостей. Изменения затронули и главную страницу. В блоках «Хиты продаж» и «Спецпредложения» больше нет карусели товаров. Вместо этого предложения расположены статической плиткой, и пользователь сразу может увидеть всю выборку. По исследованиям, только 1% пользователей прокликает весь слайдер, а с первым изображением взаимодействует 84% клиентов. Кроме того, «большой выбор товаров сбивает пользователя с толку, снижая вероятность принятия решения и выполнения действия».

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

Поговорили с нашим Frontend-разработчиком о том, какие технологии выбраны для нового фронтенда и почему.


React. Старый фронтенд был разработан на Angular, чтобы запустить быстрый прототип и проверить, что все работает. Сейчас он уже устарел, его сложно развивать. Новый фронтенд мы реализовали на React. Это JavaScript-библиотека для создания интерактивных пользовательских интерфейсов. Код становится более предсказуемым, а отладка упрощенной. React разрабатывается и поддерживается Facebook и Instagram. Его цель — предоставить высокую скорость, простоту и масштабируемость.

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

Webpack 4. Это модульный сборщик для приложений на JavaScript, который помогает разделить код на загружаемые части. В итоге получается так называемая ленивая загрузка, чтобы код загружался и выполнялся только тогда, когда он действительно необходим. Это значительно ускоряет и упрощает работу системы.

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

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

Также изменятся групповые действия с товарными строками. Этот сценарий сделан с оглядкой на опыт мобильных приложений, и сначала на десктопе выглядит несколько необычно, но после небольшого привыкания, раскрывает свою гибкость и удобство. Для постоянных пользователей Gmail или Google Фото привыкания и не потребуется.
Посмотреть новый дизайн в демо-версии
Оставьте заявку, чтобы получить доступ к демо-версии и оценить новый интерфейс B2B-системы.
Оставить заявку

Поделиться новостью