تشير إمكانات CSS وواجهة المستخدم إلى الميزات الجديدة وبنية CSS التي تمكّنك من تقليل حلول JavaScript المخصّصة أو استبدالها أو بعض عمليات اختراق CSS وتساعدك على كتابة رموز أفضل وأكثر بساطة. يسمح اعتماد ميزات CSS الحديثة للمطوّرين بإجراء ما يلي:
- تقليل وقت التطوير:
- تحسين كفاءة الرموز البرمجية وتسهيل قراءتها وإمكانية صيانتها
- تحسين الأداء
- إنشاء واجهات مستخدم جميلة تتميز بالسلاسة والفعالية ويمكن الوصول إليها.
في سلسلة دراسات الحالة هذه، تعرف على كيفية استخدام مجموعة متنوعة من مواقع التجارة الإلكترونية للصور المتحركة التي تعتمد على التمرير، وانتقالات العرض، وواجهة برمجة التطبيقات المنبثقة، وطلبات بحث الحاوية،
وأداة اختيار has()، والفوائد التي حققتها من ذلك.
لماذا يجب أن تستخدم مواقع التجارة الإلكترونية هذه الميزات؟
في مقالة ست خطوات لتحسين تجربة المستخدم، أوضحت شركة Forrester Research أنّ تصميم واجهة المستخدم ذو التصميم الجيّد يمكن أن يزيد الإحالات الناجحة بنسبة تصل إلى 200%. يبدو أنّ المستخدمين يربطون بين جودة التصميم ومدى ثقة % 94 من المستهلكين في أنّ التصميم هو السبب الرئيسي لمغادرة الموقع الإلكتروني أو عدم الثقة به. لهذا السبب، ستستفيد مواقع التجارة الإلكترونية بشكل خاص من إمكانات CSS وواجهة المستخدم هذه. يجب أن تكون مسارات الإحالات الناجحة سلسة قدر الإمكان، لكي يتمكّن المستخدمون من إكمال مهمتهم بسهولة وثقة. يمكن أن توفر التفاعلات سريعة الاستجابة والتنقل السلس ملاحظات مرئية جيدة للمستخدم، وتضيف المتعة والتعبير إلى الرحلة بشكل عام.
تم تصميم هذه الميزات لكي تكون سهلة الاستخدام ويمكن تنفيذها في الغالب في CSS بأقل قدر من JavaScript. فهي تساعد على إنشاء تجارب رائعة للتجارة الإلكترونية بدون الحاجة إلى اللجوء إلى مكتبات تابعة لجهات خارجية أو رمز JavaScript مخصّص لإنشاء الوظيفة نفسها. بالإضافة إلى ذلك، يؤدي استخدام عدد أقل من JavaScript إلى تعزيز الأداء، ما يجعل هذه التجارب أكثر سلاسة واستجابة.
يمكن استخدام إمكانات واجهة مستخدم الويب في جميع أجزاء رحلة المستخدم. فيما يلي بعض الأمثلة من العالم الواقعي:
| الميزة/الشركة | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| الصور المتحركة التي تعتمد على الانتقال | سلة التسوق | صفحة قائمة المنتجات (PLP) | صفحة تفاصيل المنتج (PDP) |
| عرض عمليات النقل | تسجيل الدخول | وصف المنتج (PDP) | وصف المنتج (PDP) |
| نافذة منبثقة | - | - | وصف المنتج (PDP) |
| طلبات البحث عن الحاوية | الصفحة الرئيسية | - | وصف المنتج (PDP) |
| :has() | - | PLP | وصف المنتج (PDP) |
يمكن أيضًا عرض هذا على أنّه مسار إحالة ناجحة:
تشارك دراسات الحالة التالية كيفية تنفيذ الشركات لهذه الميزات والفوائد التي اكتشفتها.
- الصور المتحركة التي تعتمد على التمرير
- عرض عمليات النقل
- Popover API
- طلبات البحث عن الحاوية
- :has() أداة الاختيار
نتوجّه بالشكر الخاص إلى "بينيلوب ماكلاشلان" و"هانا فان أوبستال" و"أونا كرافيتس" و"براموس فان دام" و"راشيل أندرو" على ملاحظاتكم ومراجعة هذه السلسلة من المقالات.