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