Поделюсь историей о том, как мы изменили адаптивную версию сайта. Сам сайт — это уже привычный маркет, только для b2b сферы. Клиенты и продавцы в этом маркете — большие комапнии и фирмы. Новые тенденции и технологии, а также предложения и замечания наших клиентов подтолкнули нас пересмотреть адаптивную версию сайта.
Почему именно адаптивная версия? Версия для десктопа отвечает всем современным стандартам и тенденциям. Семантически и архитектурно сайт имеет правильную компоновку, к тому же не было жалоб от клиентов по поводу удобства, даже наоборот, отмечались положительные отзывы по поводу пользования сайтом. Анализ конкурентов показывает, что **многие** наши интерфейсные решения конкуренты берут себе в разработку, а это говорит о многом. Принцип «работает — не трожь» во всей красе.
Но при этом наши клиенты не раз отмечали, что им не так удобно пользоваться сайтом с телефона. Нужно уточнить, что у нас адаптивная версия имеет абсолютно тот же функционал, что и десктопная. Таким образом, мы не урезаем функционал и предоставляем все возможности маркета на всех типах устройств. Но такое обилие функционала на небольших экранах привело к трудной навигации по сайту и довольно сложному интерфейсу.
Предыстория
Некоторое время наша команда из двух дизайнеров работала без жёстко прописанных правил, всё было на договорённостях, ориентировались на комментарии внутри Фигмы, что-то отмечали в общих документах с фронтэнд разработчиками.
Но правил и договорённостей становилось всё больше, мы стали забывать где хранится нужный комментарий, часто сталкивались с дублированием информации, много времени тратилось на поиск файлов.
Встал вопрос о порядке хранения накопившихся правил, знаний, замечаний. Вместе с этим мы хотели изменить подход к разработке дизайна, появились новые возможности в Фигме для создания удобных UI-китов.
Мы поняли, что нам нужна дизайн-система. Под этим термином мы понимаем единое место хранения правил, описание процесса создания дизайна, роль дизайна в продукте, UI-кит, прописанные способы взаимодействия с разработчиками.
После описания фундаментальных понятий и утверждения способов передачи наработок фронтенд разработке, мы приступили к систематизации всех компонент, то есть перешли к созданию UI-кита.
В рамках создания UI-кита, мы решили пересмотреть навигацию в адаптивной версии сайта.
Упрощение навигации
Главное наше нововведение при создании интерфейса — любую новую функци или новый сценарий нужно сначала проектировать на мобильной версии для малых размеров экрана, а затем уже переносить это на десктоп. Такую хитрость придумали не мы, подсмотрели в Material ui. Это позволяет не загромождать интерфейс и делать его более гибким.
Мы полностью пересмотрели способ взаимодействия с продуктом на мобильных устройствах. Навигация в старой версии сайта была завязана на иконке меню. Нажав на нее, открывалось меню с разделами сайта:
При таком способе навигации неудобно перемещаться по разделам страницы, нужно постоянно тянуться в дальный угол, делать клик, чтобы открылось меню, искать нужный раздел и делать еще один клик, чтобы уже перейти на другую страницу. Получается много действий и все разделы, то есть основная навигация прячется под кнопкой. На десктопной версии гораздо удобнее, там и разделы всегда перед глазами и переместиться можно в один клик:
С развитием мобильного дизайна появился определённый тренд, который в дальнейшем, когда пользователи привыкли, перерос в стандарт. Это нижняя навигационная панель, которая решает две основных задачи:
- предоставляет быструю навигацию по основным разделам в один клик;
- всегда показывает все основные разделы сайта.
Такое решение разгружает шапку сайта, но в то же время требует полного переосмысления компоновки страниц. Появляется больше возможностей передать информацию, можно вносить больше контекста для понимания.
Порядок списка разделов на панели соответствует порядку в шапке сайта на десктопной версии.
Рассмотрим основные страницы маркета, то как они поменялись с внедрением нижней панели.
Главная страница
Главная страница — это лицо сайта, на ней располагаются как блоки с призывом к действию, например «Хиты продаж» или различные баннеры, так и элементы навигации — разделы товаров и сайта. Главная страница рассказывает о компании и ее последних новостях, тем самым устанавливая доверие у пользователей.
В старой версии, располагалась массивная шапка, она выполняла роль навигации и контекста, в ней же могла располагаться иконка с необходимой информацией для клиентов.
Новая версия главной страницы почти не изменилась в контентой части, за исключением косметических изменений отображения каталога товаров. А вот шапка сильно упростилась. Теперь на ней только логотип и иконка поиска. Кнопка «Войти» теперь располагается в Кабине, а раздел корзины находится в нижней панели навигации:
В контентную часть главной страницы добавился блок с информацией, который раньше был отдельным контекстным окном, которое вызывалось по клику на икноку i.
В новой версии главной страницы мы добавили возможность загружать баннеры различных размеров, предварительно согласовав соотношения с современными нормами. Размеры представленны в пикселях для минимальной ширины экрана 360 px:
Товары
Раздел товары — это каталог продуктов, разбитый на категории и подкатегории для удобства пользователей. В этом разделе покупатели могут просматривать различные товары, ознакомиться с их описанием, ценами, а также с фотографиями. С этой же страницы можно добавить товар в корзину или же изучить товар подробнее, перейдя на страницу товара.
Данный раздел получил больше всего нововведений. Главное из них — разделение сценария поиска товара по категориям и фильтров результата поиска.
Дело в том, что в старой версии каталога категории товаров были частью фильтров. Предполагаемый сценарий поиска был такой, что при фильтрации товаров по брендам, цене и различным другим фильтрам, параллельно можно указать категорию товаров, как бы отфильтровав ненужные.
На примере нашего клиента можно увидеть путь, который приходится делать пользователю, чтобы найти нужный раздел категорий товара. Неочевидное расположение кнопки «Категории товаров» затрудняет поиски.
Получив обратную связь от пользователей и проведя небольшое исследование, выяснилось, что чаще всего, пользователи сначала проходятся по каталогу, а уже потом внутри категории фильтруют товары. Было решено разделить эти два сценария.
Категории товаров
На вкладке «Товары» пользователю представляются основные категории товаров, нажав на каждую из них, будут открываться подкатегории. Открываться подкатегории будут до тех пор, пока пользователь не нажмёт «Показать все товары категории» или не перейдёт в конечную подкатегорию.
Когда на странице будут видны товары, только в этом случае можно будет начать фильтровать выданные товары.
Фильтры товаров
Допустим, пользователь выбрал нужную категорию, теперь из выданных товаров он может выбрать фильтры, чтобы отсеять не подходящие ему товары.
Воспользоваться фильтрами можно двумя способами.
Первый способ — использовать верхнюю панель чипсов.
Такой способ использования фильтров удобен, когда нужно воспользоваться несколькими популярными фильтрами, без особого углубления.
Второй способ — воспользоваться полноценным окном всех возможных фильтров (кнопка «Показать все фильтры»)
Этот способ предусмотрен для более удобного поиска непопулярных и специфичных фильтров.
Таким образом, мы разделили и более детально проработали каждый сценарий, раздробив единый флоу старой версии, на два:
- поиск категории,
- фильтрация товаров.
Списки
Это новый раздел в адаптивной версии сайта. Списки объединяют Спецификации и Коммерческие предложения.
Спецификации — это список отложенных товаров. Можно оформить заказ как на весь отложенный список, так и на часть товаров из него, то есть всё как в корзине. Этим списком можно делиться с коллегами или партнёрами. Список товаров, которым поделились с тобой можно скопировать себе в другую спецификацию.
Коммерческое предложение (КП) — это похожий архетип. Список товаров составляется менеджером компании и предлагается покупателям с различными условиями оформления заказа (скидки, бонусы и т.д.).
В старой версии спецификации и КП хранились в разных разделах. Контекста поясняющего, что это за списки не было:
В новой версии мы объединили списки в один раздел и добавили контекст.
Спецификации и КП внешне остались такими же, как на старой версии и имеют схожую вёрстку:
Заказы
Неудобство, которое отмечалось пользователями в данном разделе, заключалось в просмотре списка товаров заказа. Во-первых, пропускали ссылку в самом начале и искали список товаров где-то внизу. Во-вторых, при просмотре товаров не хватало информации о заказе.
В новой адаптивной версии мы поступили следующим образом. Оставили всю информацию о заказе наверху страницы, подчеркнув такой иерархией важность написанного. Добавили табы. Один таб содержит в себе счёта по заказу, второй — список товаров. Кнопку целевого действия разместили внизу под пальцем. Такая вёрстка позволяет сохранять контекст при просмотре счёта и товаров в заказе.
Корзина
Фундаментально данный раздел не менялся. Все изменения касаются нижней панели. Проблема в старой версии заключается в том, что панель отвечает за вывод информации о цене, на ней располагается кнопка целевого действия и иконки уведомлений с корзины.
Уведомления в корзине — это маркетинговые сообщениях о скидках и бонусах, рекомендательные сообщения о замене товара на аналоги, а также важные сообщения об отсутствии товара на складе.
В новой адаптивной версии мы поменяли верстку следующим образом. все уведомления поместили под шапкой в раскрывающийся список. Кнопку целевого действия сместили влево, а информацию о цене оставили в той же области. В итоге мы уменьшили размер нижней панели, сэкономив драгоценное место. Ещё по просьбе пользователей мы сделали нумерацию товаров в корзине.
Кабинет
В кабинете :
- есть вся необходимая информация о компании;
- отображается регион, который при желании можно сменить;
- располагается блок «Помощь» с полезными ссылками и часто задаваемыми вопросами;
- хранятся личные данные в профиле;
- есть возможность выйти из аккаунта.
