דפי נחיתה למובייל למודעות מקוריות: כללי עיצוב שממירים

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

מדוע הגישה של 'שולחן-עבודה-ראשון-ואז-התאמה' נכשלת לעיתים כה קרובות#

צוותים שמעצבים דף קדם-נחיתה תחילה על מסך שולחן עבודה נוטים לאפות בתוכו הנחות שלא שורדות את הכיווץ לטלפון: פריסות מרובות עמודות שנדחסות לעמודה יחידה בלתי קריאה ברגע האחרון, תמונות ראשיות (hero images) שנחתכו עבור יחס רוחב-גובה רחב שמאבדות את נקודת המיקוד שלהן כשהן נחתכות שוב עבור יחס צר, ומיקום CTA שנקבע לפי מה שנראה מאוזן על מסך גדול ולא לפי מה שאגודל יכול למעשה להגיע אליו. אף אחד מאלה לא מופיע כ"באג" שהייתם תופסים בסקירה מהירה בשולחן העבודה, הם מופיעים רק ברגע שאתם צופים בעמוד כמו שהמבקר האמיתי שלכם יצפה בו, וזו הסיבה שבנייה מלכתחילה למובייל, מהטיוטה הראשונה, ולאחר מכן התאמה אופציונלית לשולחן העבודה, מייצרת פחות הפתעות מאשר ההפך.

עיצוב עבור האגודל, לא עבור העכבר#

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

משקל העמוד הוא מנוף המרה, לא רק דאגה טכנית#

כל שנייה נוספת של זמן טעינה על חיבור סלולרי היא סיכוי לאבד מישהו שלחץ מתוך דחף מפיד תוכן ואין לו סבלנות לדף איטי. דחסו תמונות ראשיות באופן אגרסיבי, הימנעו מווידאו שמתחיל לבד (מה שבדרך כלל גם מושך תשומת לב ציות בכמה רשתות ושורף נתונים סלולריים שהקורא לא הסכים להוציא), טענו בצורה עצלה (lazy-load) כל דבר שמתחת לקיפול (below the fold), ושמרו על ה-DOM פשוט. זה מצטבר עם בחירות דומיין ואירוח; דף שמאוחסן מאחורי שרת משותף איטי ועמוס יתר על המידה, או כזה שמנותב דרך קפיצת הפניה מיותרת נוספת, מבטל עבודת עיצוב טובה לפני שפיקסל בודד מוצג. אירוח טוב הוא תנאי מוקדם לעיצוב מובייל טוב, לא דאגה נפרדת שתוכלו לתקן אחר כך.

פריסה: עמודה יחידה, זרימה אנכית, ללא הפתעות לצדדים#

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

מה להימנע ממנו כי רשתות יסמנו אותו#

• אינטרסטיציאלים כפויים או חלונות קופצים שחוסמים תוכן לפני פעולת משתמש אמיתית. מדיניות העריכה של רוב רשתות המודעות המקוריות מתייחסת לאלה כחווית משתמש גרועה ומקור נפוץ לדחיית קריאייטיבים; בדקו את התיעוד העדכני של הרשת הספציפית לפני הסתמכות על כל דפוס אינטרסטיציאל.
• אודיו או וידאו שמתחיל לבד. אותה הגיון: זה מפתיע את הקורא, שורף את הנתונים שלו ומושך תשומת לב בסקירה.
• אלמנטים מזויפים של ממשק מערכת (אזהרות מזויפות של "סוללה נמוכה", באנרים מזויפים של התראות, כפתורי סגירה מזויפים שלא סוגרים כלום). אלה נמצאים קרוב לתחום ההסוואה באופן שבו צוותי ציות קוראים אותם, גם כאשר לא מתרחשת הסוואה טכנית, מכיוון שהם מטעים את הקורא לגבי מה שהוא רואה.
• גילוי (disclosure) קבור או מוסתר מאחורי לחיצה. גילויי חסות ופרסום צריכים להיות גלויים ללא אינטראקציה נוספת מצד הקורא; ראו כללי גילוי FTC לפרסומת ולמודעות מקוריות למה "גלוי" למעשה אומר לפי ההנחיות הנוכחיות.

טיפוגרפיה וקצב קריאה על מסך קטן#

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

מטרות מגע מעבר ל-CTA הראשי#

ה-CTA הראשי מקבל את תשומת הלב העיצובית, אך אלמנטים ניתנים להקשה משניים (קישור "למידע נוסף", כפתור סגירה על כל אלמנט שניתן לסגירה, ניווט אם יש בדף) צריכים את אותו גודל וריווח ידידותיים לאגודל. כפתור סגירה שטכנית קיים אך קטן מדי כדי לפגוע בו בצורה אמינה מתפקד, בפועל, כאילו אין כפתור סגירה בכלל, ונתפס כמתסכל או מניפולטיבי עבור קורא שמנסה לסגור משהו. הנחיות העיצוב למובייל של Apple ו-Google עצמן מפרטות גדלים מינימליים למטרות מגע מסיבה זו בדיוק, ועמידה בהן היא קו בסיס סביר גם מחוץ לאפליקציות פלטפורמה מקוריות.

טפסים: פחות שדות, סוגי קלט מקוריים#

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

פרטי גיאו ושפה שמכשילים דפי מובייל ספציפית#

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

טיפול בממשק משתמש שהוזרק על ידי הרשת מעל הדף שלכם#

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

בדיקת מה שכבר עובד ברשתות כבדות מובייל#

חלק מהרשתות נוטות יותר למובייל מאחרות בפועל, ודפוסי דפי הקדם-נחיתה המנצחים שונים בהתאם. סקירה של קריאייטיבים חיים שפועלים כרגע ודפי הנחיתה שלהם במערכת המעקב אחר מודעות מקוריות של OpenAdLibrary מראה לכם אילו בחירות פורמט ופריסה למעשה שורדות ברשת נתונה כרגע, במקום לייעץ עצות UX למובייל כלליות שלא לוקחות בחשבון כיצד הקהל של רשת ספציפית מתנהג. שני המדריכים MSN Native Ads: The Advertiser's Guide ו-How Taboola Ads Work מכסים מיקום ספציפי לרשת והתנהגות קהל שמזינים החלטות פריסה אלה.

נגישות חופפת להמרה יותר ממה שאנשים מצפים#

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

הבדיקה שבאמת חשובה#

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