רוב בעלי החנויות בודקים את דף המוצר שלהם על מסך מחשב רחב, רואים שהכל מסודר ועוברים הלאה. התגובה הרגילה לירידה בהמרה היא לשנות צבע לכפתור או להוסיף באנר מבצע בראש הדף. מה שקובע בפועל הוא סדר: איזה מידע מגיע ראשון, כמה גלילה מפרידה בין השאלה לתשובה, ומתי הכפתור נעלם מהמסך. דף מוצר במובייל הוא לא גרסה מוקטנת של הדסקטופ אלא סדר עדיפויות אחר לגמרי.
להבין למה דף מוצר במובייל מתנהג אחרת
במסך של מחשב הגולש רואה תמונה, כותרת, מחיר, מלאי וכפתור קנייה בבת אחת. במובייל אותו מידע נפרס לאורך שלושה או ארבעה מסכים, והגולש מקבל אותו טיפה טיפה. כל פריט שנדחף למטה מקבל סיכוי נמוך יותר להיראות.
הבעיה מתחילה כשמעתיקים את סדר האלמנטים מהדסקטופ אחד לאחד. בדסקטופ אין עלות לפריט נוסף בעמודה הימנית, כי הוא ממילא בשדה הראייה. במובייל כל פריט כזה דוחף את הכפתור עוד מסך למטה.
- מסך צר שמציג פריט אחד או שניים בכל רגע
- גלילה במקום סריקה מהירה בעין
- אצבע במקום סמן, בלי באובר ובלי טולטיפ
- חיבור סלולרי שמאט טעינה של תמונות כבדות
- גולש שמגיע לרוב מרשת חברתית ולא מחיפוש ממוקד
- סבלנות נמוכה יותר, לרוב תוך כדי עשייה של משהו אחר
ההבדלים האלה אומרים שכל החלטה על סדר בדף היא החלטה על כמה גולשים יראו את הפריט בכלל. זה לא עניין של עיצוב אלא של תעדוף.
זאת אומרת שהשאלה הנכונה בכל דיון על דף מוצר במובייל היא לא איך זה נראה אלא מה נדחף למטה. כל פעם שמוסיפים רכיב חדש, משהו אחר מאבד חשיפה, וברוב המקרים הרכיב שנפגע הוא בדיוק זה שמייצר את ההזמנה.
לסדר את המסך הראשון לפי שלוש שאלות
המסך הראשון של דף מוצר במובייל צריך לענות על שלוש שאלות בלבד: מה זה, כמה זה עולה, ואיך אני קונה. כל דבר שלא עונה על אחת מהשלוש דוחף למטה משהו שכן עונה עליהן.
מה שקורה בפועל בהרבה חנויות הוא שהמסך הראשון מלא בפירורי לחם, באנר משלוח חינם, סרגל אייקונים של תשלומים ותפריט קטגוריות. עד שהגולש מגיע לשם המוצר הוא כבר גלל פעמיים.
קודם כל שווה לפתוח את הדף בטלפון ולצלם את המסך בלי לגלול. כל מה שנמצא בצילום הזה הוא מה שרוב הגולשים יראו, וכל השאר תלוי ברצון שלהם להמשיך. הרשימה הבאה היא מה שאמור להופיע שם:
- תמונת מוצר ראשית שממלאת את רוחב המסך
- שם מוצר מלא בשתי שורות לכל היותר
- מחיר וסטטוס מלאי בשורה אחת
- סלקטור וריאציה אם יש, בלי לפתוח דף חדש
- כפתור הוספה לסל ברוחב מלא
- שורת אספקה קצרה מתחת לכפתור
דוגמה מהשטח: חנות כלי עבודה עם 2,000 מק"טים החזיקה במסך הראשון באנר משלוחים בגובה כפול, פירורי לחם בשלוש רמות וסרגל אייקונים. אחרי שהורידו את שלושתם מתחת לכפתור, המחיר עלה מהמסך השני למסך הראשון בלי לגעת בעיצוב עצמו.
בפועל אפשר להשאיר את השאר, רק לא במסך הראשון. סרגל התשלומים, פירורי הלחם והבאנרים עובדים מצוין גם 300 פיקסלים למטה.
לבדוק מה קורה לכפתור הקנייה בגלילה
הכפתור הכי חשוב בחנות הוא זה שנעלם ראשון. גולש שקורא תיאור מפורט, מגיע לשאלות ותשובות ומחליט לקנות מוצא את עצמו גולל חזרה חמישה מסכים למעלה. חלק מהגולשים פשוט לא יטרחו.
הבעיה מתחילה כשהדף ארוך והכפתור יושב רק במקום אחד. ככל שהתוכן טוב יותר וארוך יותר, כך המרחק בין הרגע שבו הגולש משתכנע לבין הכפתור גדל. תוכן טוב לא אמור להיות עונש.
הפתרון הוא סרגל קנייה דביק בתחתית המסך שמופיע ברגע שהכפתור המקורי יוצא מהמסך. הוא מציג שם מוצר מקוצר, מחיר וכפתור, והוא נשאר שם עד הסוף.
- הסרגל מופיע רק אחרי שהכפתור הראשי יצא משדה הראייה
- גובה נמוך שלא מכסה יותר מעשירית מהמסך
- מחיר מעודכן לפי הווריאציה שנבחרה
- לחיצה מוסיפה לסל בלי לקפוץ לדף אחר
- הסרגל לא מסתיר את שדה החיפוש ואת התפריט
- המחיר בסרגל זהה למחיר בראש הדף, בלי הפתעות
מהחנויות שעברתי עליהן, בערך 40% לא מציגות שום כפתור קנייה אחרי הגלילה השנייה. זה התיקון הזול ביותר שאפשר לעשות בדף מוצר במובייל, והוא לרוב שינוי של הגדרה אחת בתבנית.
לצמצם את גובה הגלריה
גלריית תמונות היא המקום שבו נשרפת הכי הרבה גלילה. קרוסלה שמציגה שמונה תמונות אחת מתחת לשנייה במקום זו לצד זו יכולה לדחוף את המחיר שלושה מסכים למטה.
מה שקורה בפועל הוא שהגולש רואה תמונה, גולל, רואה עוד תמונה, גולל, ומאבד סבלנות לפני שהגיע למחיר. הוא לא נטש בגלל התמונות אלא בגלל שהן הפרידו בינו לבין ההחלטה.
במובייל הגלריה צריכה להיות קרוסלה אופקית עם נקודות ניווט, ולא רשימה אנכית. הגולש מחליק ימינה ושמאלה, וגובה הדף לא משתנה בכלל.
מה שכן, שווה להשאיר מתחת לתמונה הראשית שורה של תמונות ממוזערות. היא מסמנת שיש עוד מה לראות, בלי לתפוס יותר מכמה עשרות פיקסלים.
- קרוסלה אופקית במקום גלריה אנכית
- יחס גובה רוחב אחיד לכל התמונות בקטלוג
- אינדיקטור שמראה כמה תמונות יש בסך הכל
- לחיצה על תמונה פותחת תצוגה מוגדלת בלי לצאת מהדף
- התמונה הראשונה נטענת ראשונה והשאר בהמשך
- בלי אנימציית מעבר ארוכה בין תמונות
הסדר והמספר של התמונות עצמן הם נושא נפרד, ואפשר להעמיק בו דרך עבודה נכונה עם תמונות בקטלוג. כאן חשוב רק שהגלריה לא תגזול את המקום של המידע שמוכר.
לפרק את התיאור לטאבים או לאקורדיון
תיאור מפורט טוב יכול להגיע לאלף מילים. במובייל זה נראה כמו קיר טקסט אינסופי, והגולש מפסיק לגלול אחרי הפסקה השנייה. הפתרון הוא לא לקצר את התוכן אלא לארוז אותו.
הבעיה מתחילה כשמנסים לפתור את זה בקיצור התוכן. תיאור קצר מדי משאיר שאלות פתוחות, והגולש עוזב מסיבה הפוכה לגמרי. הפתרון הוא שליטה בסדר ובחשיפה, לא מחיקה.
אקורדיון סגור עם כותרות ברורות נותן לגולש מפה של מה שיש בדף, ומאפשר לו לפתוח רק את מה שמעניין אותו. הטקסט נשאר בקוד הדף במלואו, אז אין פגיעה בגוגל.
- תיאור קצר שנשאר פתוח תמיד, שלוש שורות לכל היותר
- תיאור מפורט באקורדיון פתוח כברירת מחדל
- מפרט טכני באקורדיון סגור
- מה כולל באריזה באקורדיון סגור
- משלוחים והחזרות באקורדיון סגור
- שאלות ותשובות באקורדיון עם השאלה הראשונה פתוחה
מה שכן, לא כל תוכן ראוי לאקורדיון. תיאור קצר של שלוש שורות שמסביר מה המוצר עושה חייב להישאר גלוי, כי הוא מה שמחליף את השיחה עם המוכר בחנות פיזית. אקורדיון עליו רק מסתיר את התשובה לשאלה הראשונה שהגולש שואל.
הכלל היחיד שאסור לשבור הוא שהטקסט קיים בקוד גם כשהאקורדיון סגור. תוכן שנטען רק בלחיצה לא נספר על ידי גוגל, וזה מבטל את כל התוכן שהשקעתם בו.
לתקן את שדות הטופס והמקלדת
כל שדה שהגולש ממלא במובייל הוא נקודת נטישה פוטנציאלית. שדה כמות שפותח מקלדת אלפאנומרית במקום מספרית, בורר מידה שדורש לחיצה מדויקת על עיגול קטן, שדה קופון שקופץ למעלה בכל הקלדה.
סלקטור וריאציות הוא החשוד המרכזי. מוצר עם שלושה גדלים ושני צבעים יכול להפוך במובייל לשני תפריטים נפתחים שתופסים חצי מסך, ואם אחד מהם לא מסמן מה אזל, הגולש בוחר ומגלה רק בשלב מאוחר יותר שאין מלאי. זה בדיוק סוג התסכול שמסיים ביקור.
הדברים האלה נראים זניחים בבדיקה על מחשב ומרגישים אחרת לגמרי באצבע. שווה לעבור על הדף מהטלפון האישי, לא מסימולטור בדפדפן.
- שדות מספריים פותחים מקלדת מספרית
- אזור לחיצה של 44 פיקסלים לפחות לכל כפתור
- סלקטור וריאציות שמראה מה אזל במלאי בלי לפתוח דף
- שדה כמות עם פלוס ומינוס במקום הקלדה ידנית
- בלי חלונות קופצים שנפתחים בשנייה הראשונה
- הודעת שגיאה מופיעה ליד השדה ולא בראש הדף
אחרי שמסדרים את זה כדאי להמשיך הלאה בפלואו ולבדוק גם את תהליך הצ'קאאוט, כי דף מוצר מצוין שנשפך לטופס תשלום מסורבל לא ישנה כלום.
למדוד את זמן הטעינה במכשיר אמיתי
זמן טעינה מעל 5 שניות במובייל הוא בעיה שמבטלת כל שיפור אחר בדף. גולש שמגיע מקישור באינסטגרם ורואה מסך לבן שלוש שניות פשוט חוזר אחורה.
מה שקורה בפועל הוא שהחנות נבדקת ממחשב במשרד עם חיבור מהיר, ורוב הגולשים מגיעים מטלפון ברחוב. שתי חוויות שונות לגמרי מאותו דף בדיוק.
הבדיקה חייבת להיעשות על חיבור סלולרי אמיתי ולא על ה-wifi של המשרד. ההבדל בין השניים הוא לרוב פי 3 בזמן הטעינה, וזה מה שהגולש שלכם באמת חווה.
- משקל התמונה הראשית בדף המוצר
- מספר הבקשות לפני שהתוכן הראשון מופיע
- קפיצות של הדף אחרי הטעינה הראשונה
- סקריפטים של צד שלישי שנטענים לפני התוכן
- גופנים חיצוניים שחוסמים הצגת טקסט
- וידאו או קרוסלה שמתחילים לרוץ לפני שהדף מוכן
בחנות עם קטלוג גדול שווה לבדוק שלושה סוגי דפים ולא אחד: מוצר פשוט, מוצר עם וריאציות רבות, ומוצר עם וידאו בתיאור. כל אחד מהם נטען אחרת לגמרי, והממוצע מסתיר את הגרוע מביניהם.
אם אתם לא בטוחים מאיפה להתחיל, ניתוח ביצועי עמוד מסודר יראה לכם בדיוק איזה רכיב אוכל את הזמן. ברוב החנויות שראיתי החשוד הראשון הוא תמונות שהועלו בגודל מקורי.
להפריד בין מידע שמוכר למידע שמרגיע
יש מידע שדוחף לקנייה ויש מידע שמונע נטישה, והם לא צריכים לשבת באותו מקום. מידע שמוכר הוא מה המוצר עושה ולמי הוא מתאים. מידע שמרגיע הוא זמן אספקה, מדיניות החזרה ואחריות.
ההפרדה הזאת חשובה כי לכל סוג יש תזמון אחר. המידע שמוכר צריך להגיע לפני ההחלטה, והמידע שמרגיע צריך להיות זמין בדיוק ברגע שהאצבע מרחפת מעל הכפתור. כשמערבבים ביניהם, שניהם מפספסים.
במובייל שווה לשים את המידע המרגיע בשורה אחת דקה מתחת לכפתור הקנייה, ולא בסעיף נפרד בתחתית הדף. שלוש מילים על זמן אספקה מתחת לכפתור עושות יותר מפסקה שלמה שאף אחד לא גולל אליה.
- זמן אספקה משוער בשורה אחת מתחת לכפתור
- מדיניות החזרה בקצרה, עם קישור לפירוט
- שנות אחריות אם רלוונטי למוצר
- סימון מלאי אמיתי ולא הודעת דחיפות מלאכותית
- אפשרות איסוף עצמי אם היא קיימת בחנות
בחנויות שמוכרות מוצרים כבדים או מוצרים עם הרכבה, שורת האספקה מתחת לכפתור היא לעיתים ההבדל בין הזמנה לנטישה. גולש שלא יודע אם המשלוח מגיע עד הדלת או עד המדרכה פשוט דוחה את ההחלטה.
ההפרדה הזאת גם מקלה על תחזוקה. המידע המרגיע זהה כמעט בכל החנות, אז הוא נבנה פעם אחת ברמת התבנית ומתעדכן בכל המק"טים יחד.
לזהות איפה הגולשים נעצרים בפועל
ניחוש על סמך תחושה הוא הדרך הכי מהירה לבזבז זמן על תיקון שלא היה שבור. הדאטה על דף מוצר במובייל קיימת ורק צריך להסתכל עליה בפילוח נכון.
ברוב החנויות בישראל רוב התנועה מגיעה ממובייל ורוב ההכנסה מגיעה מדסקטופ. הפער הזה לבדו הוא האבחנה החשובה ביותר, והוא מסתתר בכל דוח שלא מפולח לפי מכשיר.
קודם כל מפרידים בין מובייל לדסקטופ בכל דוח. חנות שמסתכלת על ממוצע משוקלל של שני המכשירים לא רואה שום דבר, כי הנתונים הפוכים כמעט תמיד.
- יחס המרה במובייל מול דסקטופ באותם דפי מוצר
- אחוז הגולשים שמגיעים לסעיף התיאור בכלל
- אחוז הוספה לסל מתוך צפיות בדף
- שיעור יציאה מהמסך הראשון בלי אף לחיצה
- זמן שעובר מהכניסה ללחיצה הראשונה
- אחוז הגולשים שנוגעים בגלריית התמונות
שווה גם לבדוק את הנתונים לפי מקור תנועה. גולש שהגיע מרשת חברתית מתנהג אחרת לגמרי מגולש שהגיע מחיפוש בגוגל, וברוב החנויות הראשון מגיע ממובייל והשני מדסקטופ. פילוח כפול כזה מסביר פערים שנראים בלתי מוסברים בדוח אחד.
עבודה מסודרת עם החלטות מבוססות דאטה חוסכת סבבי עיצוב שלמים. אם 60% מהגולשים לא מגיעים בכלל לתיאור, אין טעם לשכתב את התיאור לפני שמזיזים אותו למעלה.
לתעדף מוצרים לפני שמתקנים תבנית
בקטלוג עם 2,000 מק"טים אי אפשר לעבור מוצר מוצר. מה שכן אפשר זה לתקן את התבנית פעם אחת, ואז לטפל ידנית רק בעשרים המוצרים שמייצרים את רוב ההזמנות.
זה גם מה שמאפשר להתחיל היום ולא בעוד רבעון. תיקון תבנית הוא עבודה של כמה שעות שמשפיעה על כל מק"ט בחנות, בעוד שסבב תוכן על אלפי מוצרים הוא פרויקט של חודשים.
התבנית פותרת את הסדר, את הכפתור הדביק ואת האקורדיון בכל החנות בבת אחת. הטיפול הידני נכנס רק לתוכן: תמונות, תיאור, שאלות ותשובות.
- מוציאים דוח מכירות של שנה אחורה
- מסמנים את המוצרים שמייצרים 70% מההזמנות
- מתקנים את התבנית לכל החנות
- עוברים ידנית על המוצרים המסומנים
- מודדים את הקבוצה המטופלת מול קבוצה דומה
אחרי הסבב הראשון כדאי להשאיר את הרשימה פתוחה. כל מוצר שנכנס לעשרים המובילים בעונה הבאה מקבל את אותו טיפול, וכך הרשימה מתחזקת את עצמה בלי לפתוח פרויקט חדש בכל רבעון.
הסדר הזה חשוב. תיקון תוכן על תבנית שבורה מבזבז את העבודה, כי הגולש לא מגיע לתוכן מלכתחילה.
לוותר על אלמנטים שנראים טוב ולא עובדים
יש רכיבים שנכנסים לדף מוצר כי הם היו בתבנית, כי מישהו ראה אותם באתר אחר, או כי הם נראים מקצועיים בצילום מסך. במובייל הם עולים מסך שלם ומחזירים כמעט כלום.
מה שקורה בפועל הוא שכל רכיב כזה דוחף למטה רכיב שכן עובד. זה משחק סכום אפס, ולכן כדאי לבדוק כל רכיב מול מה שהוא דוחק.
- קרוסלת מוצרים דומים בראש הדף במקום בתחתיתו
- וידאו שמתנגן אוטומטית וטוען מגה בייטים
- טיימר ספירה לאחור שמתאפס בכל רענון
- סרגל אייקונים גדול של אמצעי תשלום
- צ'אט צף שמכסה את כפתור הקנייה
- באנר קופון שמופיע מחדש בכל מעבר בין דפים
כלל אצבע פשוט: אם אתם לא יכולים להצביע על מספר שהרכיב הזיז, הוא לא מצדיק את המקום שהוא תופס במסך הראשון. עוד דוגמאות לרכיבים כאלה מופיעות בסקירת טעויות חוויית משתמש נפוצות.
לחבר את דף המוצר לשאר המסע
דף מוצר לא עומד לבד. הגולש הגיע אליו ממקום כלשהו וימשיך ממנו למקום כלשהו, ובמובייל המעברים האלה שבירים יותר.
גולש שנוחת על מוצר לא מתאים צריך דרך מהירה לחזור לגריד של המחלקה בלי לאבד את הפילטרים שבחר. גולש שהוסיף לסל צריך להחליט אם ממשיכים לקנות או עוברים לתשלום, וההחלטה הזאת צריכה להיות ברורה בלי חלון קופץ מבלבל.
- חזרה למחלקה ששומרת פילטרים וגלילה
- הודעת הוספה לסל עם שתי אפשרויות ברורות
- מוצרים דומים בתחתית ולא באמצע
- קישור למחלקת האב בשם קריא ולא כפירורי לחם זעירים
- כפתור חזרה בדפדפן שלא שולח את הגולש לראש הרשימה
נקודה שנוטים לפספס היא ההודעה שמופיעה אחרי הוספה לסל. חלון קופץ שמכסה את כל המסך ומציע ארבעה מוצרים נוספים עוצר את הגולש בדיוק ברגע שהוא הכי קרוב להזמנה. שורת אישור דקה עם שני כפתורים עושה את אותה עבודה בלי לשבור את הרצף.
בגדול, כל מעבר שהגולש עושה במובייל עולה לו יותר מבדסקטופ. כל מקום שבו הוא צריך לחזור אחורה ולהתחיל מחדש הוא מקום שבו חלק מהגולשים פשוט עוזבים.
שאלות נפוצות על דף מוצר במובייל
מה צריך להופיע במסך הראשון של דף מוצר במובייל
תמונה ראשית, שם מוצר, מחיר, סטטוס מלאי וכפתור הוספה לסל. זה הכל. פירורי לחם, באנרים, סרגלי אייקונים והמלצות יכולים לשבת מתחת. הבדיקה הפשוטה היא לפתוח את הדף בטלפון ולראות אם אפשר לקנות בלי לגלול בכלל. אם התשובה שלילית, יש רכיב אחד לפחות שצריך לרדת למטה.
האם כפתור קנייה דביק פוגע בחוויית המשתמש
לא, כל עוד הוא נמוך ולא מכסה תוכן. הבעיה מתחילה כשהסרגל תופס חמישית מהמסך, כשהוא מופיע כבר במסך הראשון לצד הכפתור המקורי, או כשהוא מסתיר את שדה החיפוש. סרגל בגובה סביר שמופיע רק אחרי שהכפתור המקורי יצא משדה הראייה כמעט תמיד מעלה את אחוז ההוספה לסל.
כמה תמונות כדאי להציג בדף מוצר במובייל
בין 5 ל-8 תמונות בקרוסלה אופקית לרוב המוצרים. יותר מזה מייצר קרוסלה שאף אחד לא מסיים, ופחות מזה משאיר שאלות פתוחות על גודל ועל מה שמגיע באריזה. חשוב יותר מהכמות הוא הסדר: תמונת מוצר נקייה ראשונה, אחריה שימוש בהקשר, ואז פרטים וזוויות.
אקורדיון בדף מוצר פוגע בקידום האורגני
לא, בתנאי שהטקסט נמצא בקוד הדף מהרגע הראשון ורק מוסתר ויזואלית. תוכן שנטען בקריאה נפרדת רק אחרי לחיצה עלול לא להיספר. הדרך לבדוק היא לפתוח את מקור הדף ולחפש משפט מתוך התיאור המפורט. אם הוא שם, האקורדיון תקין.
איך בודקים דף מוצר במובייל בלי כלים מיוחדים
לוקחים טלפון אמיתי, מכבים wifi ועוברים על חמישה מוצרים מובילים כאילו אתם קונים. סופרים כמה גלילות עד המחיר, כמה עד הכפתור, וכמה שאלות נשארות בלי תשובה. חמש דקות כאלה מייצרות רשימת תיקונים מדויקת יותר מרוב הדוחות האוטומטיים.
סדר נכון במסך קטן שווה יותר מכל שינוי עיצובי
דף מוצר במובייל לא נכשל בגלל צבע כפתור או גופן. הוא נכשל כשהגולש צריך לעבוד קשה כדי להגיע למידע שהוא בא בשבילו, וכשהכפתור שהוא מחפש כבר לא על המסך.
אחרי 10 שנים ו-60+ חנויות אני רואה את אותה תמונה חוזרת: התיקונים שמזיזים את המחט הם תמיד תיקוני סדר ולא תיקוני מראה. הם גם הזולים ביותר, כי רובם מתבצעים פעם אחת ברמת התבנית ומשפיעים על כל הקטלוג.
בסופו של דבר, המסך הקטן מכריח אתכם להחליט מה באמת חשוב. כל רכיב שנשאר במסך הראשון צריך להצדיק את עצמו במספר, וכל רכיב שיורד למטה משחרר מקום למשהו שמוכר. חנות שעושה את התרגיל הזה פעם אחת מרוויחה ממנו בכל מוצר בקטלוג.
רוצים שמישהו יעבור על דפי המוצר שלכם במובייל ויסמן בדיוק מה מזיזים, זה בדיוק מה שאני עושה בשירות שיפור יחס המרה.
