Возможности CSS и UI относятся к новым функциям и синтаксису CSS, которые позволяют вам сократить или заменить пользовательские решения JavaScript или некоторые CSS-хаки и помогают вам писать лучший и более простой код. Внедрение современных функций CSS позволяет разработчикам:
- Сократите время разработки.
- Повышение эффективности, читаемости и удобства обслуживания кода.
- Повышение производительности.
- Создавайте красивые пользовательские интерфейсы, которые будут бесшовными, эффективными и доступными.
В этой серии тематических исследований вы узнаете, как различные сайты электронной коммерции внедрили анимацию с помощью прокрутки, переходы между представлениями, API Popover, запросы контейнеров и селектор has() , а также какие преимущества они получили от этого.
Почему сайтам электронной коммерции следует использовать эти функции?
В Six Steps for Justifying Better UX , Forrester Research показывает, что хорошо спроектированный пользовательский интерфейс может увеличить конверсию до 200%. Пользователи, похоже, связывают качество дизайна с доверием, при этом 94% потребителей называют дизайн основной причиной ухода или недоверия к веб-сайту. Вот почему сайты электронной коммерции особенно выиграют от этих возможностей CSS и пользовательского интерфейса. Воронки конверсии должны быть максимально беспроблемными, чтобы пользователи могли легко и уверенно выполнять свою задачу. Отзывчивые взаимодействия и бесшовная навигация могут обеспечить хорошую визуальную обратную связь для пользователя и добавить удовольствия и экспрессии в общее путешествие.
Эти функции были разработаны для простоты использования и могут быть реализованы в основном в CSS с минимальным использованием JavaScript. Они помогают создавать потрясающие возможности электронной коммерции без необходимости прибегать к сторонним библиотекам или пользовательскому JavaScript для создания той же функциональности. Использование меньшего количества JavaScript также может дать вам повышение производительности: делая эти возможности более плавными и отзывчивыми.
Возможности веб-интерфейса могут использоваться на всех этапах пользовательского пути. Вот несколько примеров из реального мира:
| Особенность/Компания | redBus | ПолитикаБазар | Токопедия |
|---|---|---|---|
| Анимация, управляемая прокруткой | Корзина | Страница со списком продуктов (PLP) | Страница сведений о продукте (PDP) |
| Просмотр переходов | Авторизоваться | ПДП | ПДП |
| Поповер | - | - | ПДП |
| Запросы контейнеров | Дом | - | ПДП |
| :имеет() | - | ПЛП | ПДП |
Это также можно отобразить в виде воронки конверсии:
В следующих примерах рассказывается о том, как компании внедрили эти функции и какие преимущества они обнаружили.
- Анимации, управляемые прокруткой
- Просмотр переходов
- API всплывающего окна
- Запросы контейнеров
- :has() селектор
Особая благодарность Пенелопе Маклахлан, Ханне Ван Опстал, Уне Кравец, Брамусу Ван Дамму и Рэйчел Эндрю за ваши отзывы и рецензии на эту серию статей.