יכולות CSS ו-UI מתייחסות לתכונות ולתחביר חדשים של CSS שמאפשרים לצמצם או להחליף פתרונות מותאמים אישית של JavaScript או טריקים מסוימים ב-CSS, ומסייעים לכתוב קוד טוב יותר ופשוט יותר. שימוש בתכונות מודרניות של CSS מאפשר למפתחים:
- קיצור זמני הפיתוח.
- שיפור היעילות, הקריאוּת והיכולת לתחזק את הקוד.
- לשפר את הביצועים.
- יצירת ממשקי משתמש יפים, חלקים, יעילים ונגישים.
בסדרת מקרי המחקר הזו תלמדו איך מגוון אתרים של מסחר אלקטרוני השתמשו באנימציות שמבוססות על גלילה, במעברי תצוגה, ב-Popover API, בשאילתות של קונטיינרים ובבורר has(), ואילו יתרונות הם זכו ליהנות מהם.
למה כדאי לאתרים של מסחר אלקטרוני להשתמש בתכונות האלה?
במאמר Six Steps for Justifying Better UX (שש שלבים להצדקת שיפור חוויית המשתמש), חברת Forrester Research מראה שממשק משתמש שתוכנן היטב יכול להגדיל את מספר ההמרות בעד 200%. נראה שהמשתמשים משייכים את איכות העיצוב לאמון, ו94% מהצרכנים ציינו שהעיצוב הוא הסיבה העיקרית לכך שהם עזבו אתר או לא סמכו עליו. לכן, אתרי מסחר אלקטרוני ייהנו במיוחד מהיכולות האלה של CSS ו-UI. משפכים של המרות צריכים להיות נוחים ככל האפשר, כדי שהמשתמשים יוכלו להשלים את המשימה שלהם בקלות ובביטחון. אינטראקציות רספונסיביות ניווט חלק יכולות לספק למשתמשים משוב חזותי טוב, ולהוסיף הנאה וביטוי לתהליך כולו.
התכונות האלה תוכננו כך שיהיו פשוטות לשימוש, וניתן להטמיע אותן בעיקר ב-CSS עם כמות מינימלית של JavaScript. הם עוזרים ליצור חוויות מסחר אלקטרוני מדהימות בלי שתצטרכו להשתמש בספריות של צד שלישי או ב-JavaScript בהתאמה אישית כדי ליצור את אותה פונקציונליות. שימוש בפחות JavaScript יכול גם לשפר את הביצועים: החוויה תהיה חלקה ומהירה יותר.
אפשר להשתמש ביכולות של ממשק המשתמש באינטרנט בכל חלקי התהליך שעובר המשתמש. ריכזנו כאן כמה דוגמאות מהעולם האמיתי:
| תכונה/חברה | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| אנימציות שמתבססות על גלילה | עגלת קניות | דף פרטי מוצר (PLP) | דף פרטי המוצר (PDP) |
| הצגת מעברים | התחברות | PDP | PDP |
| חלון קופץ | - | - | PDP |
| שאילתות בקונטיינרים | דף הבית | - | PDP |
| :has() | - | PLP | PDP |
אפשר גם להציג את הנתונים האלה כמשפך המרות:
במקרים לדוגמה הבאים מוסבר איך חברות הטמיעו את התכונות האלה ואילו יתרונות הן זיהו.
תודה מיוחדת ל-Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme ו-Rachel Andrew על המשוב והבדיקה של סדרת המאמרים הזו.