כפתור צף במובייל שלא מעצבן: איך לעצב Sticky CTA שמגדיל המרות

דמיינו חנות אונליין למוצרי טיפוח מתל אביב, נקרא לה "בלום".

הבעיה שלהם הייתה מוכרת: 82% מהתנועה מגיעה מהסלולר. הגולשים נכנסים לדף המוצר, גוללים למטה כדי לקרוא את רכיבי הקרם, וכפתור "הוסף לסל" נעלם אי שם למעלה. כשהם רוצים לקנות, הם צריכים לגלול כל הדרך חזרה.

רובם פשוט יצאו מהאתר.

הניסיון הראשון: הכפתור הדורסני שנכשל

כדי לפתור את הבעיה, המעצב של בלום הוסיף כפתור ירוק זרחני בתחתית המסך. הכפתור נשאר מקובע למטה לאורך כל הגלילה.

התוצאה? אחוז הנטישה קפץ.

הכפתור היה בגובה 85 פיקסלים. הוא הסתיר חמישית מפתח המסך של האייפון. כשאנשים ניסו לקרוא את הוראות השימוש בקרם, הכפתור כיסה את הטקסט. חמור מכך, הוא נתקע בדיוק על סרגל הניווט של ספארי, וגרם ללחיצות שגויות.

אגודל מתוסכל סוגר את הלשונית.

הפתרון: חוקי הברזל לעיצוב Sticky CTA

פירקנו את הבעיה ובנינו את הרכיב מחדש.

הגדרה · Sticky CTA

כפתור או סרגל הנשאר מקובע לתחתית מסך המובייל בזמן הגלילה, ומאפשר ביצוע פעולה מהירה ללא צורך לגלול חזרה למעלה.

כדי שהרכיב יעבוד בלי להרגיז, השתמשנו בארבעה עקרונות הנדסיים:

1. טריגר הופעה מותנה (Scroll Trigger): הכפתור הצף לא מופיע בטעינת העמוד. הוא נחשף רק ברגע שהכפתור המקורי בראש העמוד יוצא מטווח הראייה של הגולש.
2. התחשבות ב-Safe Area: הוספת שוליים תחתונים (padding-bottom: env(safe-area-inset-bottom)) בקוד. זה מונע מהכפתור לעלות על הניווט של אנדרואיד או אייפון.
3. גובה חסכוני: צמצום גובה הסרגל ל-50 פיקסלים. נקי, ממוקד ולא חונק.

הנה ההבדל בין גישה חובבנית למקצועית:

התוצאות: הפיכת גולשים לרוכשים

שינינו את הקוד של "בלום".

הכפתור הצף שודרג. קיצרנו את הגובה ל-52 פיקסלים, הוספנו תמונה ממוזערת של הקרם ואת המחיר לצד המילים "להזמנה מהירה". הרכיב הוגדר להופיע בהחלקה עדינה בלבד.

בתוך שלושה שבועות, יחס ההמרה במובייל עלה מ-1.8% ל-2.4%.

אפס תלונות על חסימת תוכן.

השורה התחתונה

אל תילחמו בעין של המשתמש. שפרו את הארגונומיה שלו.

💡

כפתור צף מוצלח הוא כזה שבלתי מורגש בזמן הקריאה, אך זמין לאגודל בשנייה שמתקבלת החלטת קנייה.