למסך העגלה יש שיעור נטישה גבוה. משתמשים מגיעים אליו, רואים ממשק עמוס, לא מצליחים להבין במהירות מה הסכום הכולל, מסירים פריט בטעות—ועוזבים. הצוות שלנו, עם ניסיון של למעלה מ-10 שנים בפיתוח מובייל, סיפק למעלה מ-40 פרויקטים עם עגלות למסחר אלקטרוני, והפחית את שיעור הנטישה ב-15–20% באמצעות UX מחושב. בואו נפרק כיצד לבנות עגלה שלא מפסידה כסף.
כיצד להפחית את שיעור הנטישה במסך העגלה
כמות פריטים. שני דפוסים: סט�ר (מינוס/פלוס ליד הפריט) ושדה קלט מובנה. הסט�ר עדיף לשימוש ביד אחת; הקלט מהיר יותר לכמויות גדולות. ב-iOS, UIStepper מ-UIKit הוא רכיב מוכן אך נראה מערכתי. סט�ר מותאם אישית דורש טיפול נכון בהקשות מהירות: הגבלת קצב ב-300ms, אחרת השרת מקבל הצפה של בקשות כשהכפתור מוחזק. ב-SwiftUI, יש ליישם זאת באמצעות .onChange עם Combine debounce; ב-Jetpack Compose, באמצעות debounce מ-coroutines.
מחיקת פריטים. החלקה שמאלה עם כפתור פעולה (דפוס iOS, UIContextualAction) או לחיצה ארוכה עם תפריט הקשר—שניהם עובדים. אבל חיוני להוסיף הודעת ביטול (undo toast): 'הפריט הוסר' + כפתור 'בטל' למשך 4–5 שניות. בלעדיו, שיעור המחיקות המקריות גבוה באופן קריטי—באחד הפרויקטים שלנו, הפחתנו אותו מ-8% ל-2% לאחר יישום הביטול.
כפתור 'לתשלום' קבוע—תמיד נראה בתחתית. ב-iOS, יש להתחשב ב-SafeArea כך שהכפתור לא יוסתר על ידי מחוון הבית. באנדרואיד, השתמשו ב-CoordinatorLayout עם הצמדה. הכפתור צריך להיות פעיל רק כשהעגלה אינה ריקה.
למה מבנה סיכום ההזמנה הוא קריטי
המשתמש חייב להבין מאיפה מגיע הסכום הסופי תוך 2 שניות. לפי מכון Baymard, 69% מהמשתמשים נוטשים את העגלה בגלל עלות כוללת לא ברורה. טעות אופיינית: ההנחה מוצגת כשורה נפרדת באמצע הרשימה, קוד הקופון במקום אחר, והמשלוח לא מחושב עד לבחירת הכתובת. התוצאה: המשתמש לא מבין למה הסכום הוא כזה ולא ממשיך.
מבנה נכון לבלוק הסיכום:
- סכום ביניים
- הנחה (אם יש)
- שדה קוד קופון
- משלוח (עם הערה 'מחושב בשלב הבא' אם לא ידוע)
- סה"כ—גדול ומודגש
בפרויקט אחד, הוספנו מחשבון משלוח אינטראקטיבי: בחירת כתובת בעגלה עדכנה את הסכום הכולל והעלתה את ההמרה ב-12%. החיסכון מיישום פתרון כזה יכול להגיע ל-30% מההפסדים כתוצאה מנטישה.
השוואת יישום סט�ר ב-SwiftUI וב-Jetpack Compose
| פרמטר | SwiftUI | Jetpack Compose |
|---|---|---|
| רכיב בסיסי | Stepper או מותאם אישית |
Row עם כפתורים |
| הגבלת קצב | .debounce(for: .seconds(0.3), scheduler: RunLoop.main) |
debounce(300) מ-coroutines |
| טיפול בלחיצה ארוכה | LongPressGesture |
Modifier.pointerInput |
| אנימציה | .animation(.spring()) |
animateContentSize() |
טעויות UX נפוצות ופתרונות
| טעות | פתרון | השפעה על המרה |
|---|---|---|
| אין משוב על מחיקה | הודעת ביטול (4–5 שניות) | ירידה של 5% בנטישה |
| סכום כולל לא ברור | מבנה ברור לבלוק הסיכום | +15% מעבר לתשלום |
| עגלה ריקה ללא פעולות | איור + כפתור חזרה + פריטים שנצפו לאחרונה | +30% חזרות |
| טעינה איטית | מקומות שמורים (skeleton) במקום ספינר | ירידה של 10% בנטישה |
| כפתור קבוע חסר | כפתור מקובע בתחתית | +20% השלמות |
עגלה ריקה ומצבים אחרים
מצב הריק אינו רק איור 'העגלה ריקה'. זו הזדמנות להחזיר את המשתמש לקטלוג. פתרון טוב: איור + כותרת + כפתור 'המשך קניות' + בלוק 'פריטים שנצפו לאחרונה' אם יש היסטוריה. לפי הנתונים שלנו, הוספת פריטים שנצפו לאחרונה מעלה את שיעור הקליקים בעגלה הריקה ב-30%.
מקרה בוחן: אופטימיזציית עגלה לחנות בגדים
ללקוח עם שיעור נטישה גבוה (45%), ביצענו ביקורת וזיהינו את הבעיות העיקריות: אין ביטול על מחיקה, בלוק סיכום לא מובנה, וטעינה איטית עם ספינר. לאחר יישום כל הפתרונות המתוארים—מקומות שמורים, הודעת ביטול, סיכום מובנה וכפתור קבוע—שיעור הנטישה ירד ל-25% תוך חודש. העבודה החזירה את עצמה תוך 3 חודשים.למה מצב הריק הוא נקודת חזרה
משתמש עם עגלה ריקה אינו אבוד עדיין. היה לנו מקרה: בסטארטאפ ללא היסטוריה, הגדרנו המלצות מותאמות אישית במצב הריק—ההמרה להוספת פריט גדלה ב-25%. חשוב לא רק להראות כפתור, אלא הצעות רלוונטיות.
מצב טעינה: מקומות שמורים לכל שורת פריט. לא ספינר כללי לכל המסך. ב-iOS, השתמשו במודיפיקטור Redacted ב-SwiftUI; באנדרואיד, תבניות placeholder.
מה כוללת העבודה
- ניתוח UX הנוכחי של העגלה (מפות חום, הקלטות סשן)
- עיצוב מבנה ורכיבים ב-Figma (Auto Layout, וריאנטים של רכיבים)
- עיצוב לכל המצבים: רגיל, חשיפה בהחלקה, טעינה, ריק, שגיאה
- מפרט למפתחים באמצעות Figma Dev Mode
- תיעוד אינטראקציות בין רכיבים
- תמיכה במהלך אינטגרציה ב-iOS (SwiftUI/UIKit) ובאנדרואיד (Jetpack Compose)
כל פרויקט עובר ביקורת UX פנימית ובדיקות על מכשירים אמיתיים. צרו קשר להערכת פרויקט—נמצא את הפתרון האופטימלי לסטack ולתזמון שלכם. הזמינו ביקורת עגלה: נזהה אזורי בעיה ונציע שיפורים ספציפיים.
תהליך: מביקורת ועד השקה
- ביקורת עגלה נוכחית (מדדים, מפות חום, תרחישים)
- עיצוב מבנה חדש (אבות טיפוס ב-Figma)
- עיצוב כל מצב תוך התחשבות בפלטפורמה
- העברת מפרט באמצעות Dev Mode
- אינטגרציה ובדיקות על מכשירים אמיתיים
תזמון ועלות
תזמון פיתוח העגלה: בין יום ל-3 ימים תלוי במורכבות. העלות מחושבת באופן אישי לאחר ניתוח הדרישות. ההערכה הראשונית תינתן לאחר קבלת הדרישות. קבלו ייעוץ—נעזור לקבוע את התקציב.
איך אנחנו עושים את זה
Figma, Auto Layout, וריאנטים של רכיבים לכל מצבי התא (רגיל, חשיפה בהחלקה, טעינה). רכיב נפרד לבלוק הסיכום—בשימוש חוזר במסך התשלום. העברה למפתח באמצעות Figma Dev Mode עם טוקנים ומפרט. ל-iOS, אנו משתמשים ב-SwiftUI (iOS 15+) או UIKit; לאנדרואיד, Jetpack Compose. אינטגרציית backend באמצעות REST או GraphQL.