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