כיצד ליצור פופ-אפים שלא יוציאו את המשתמשים שלכם מדעתם

שכבת כיסוי

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

האם להשתמש או לא להשתמש בשכבת כיסוי? זה תלוי מאוד בתוכן הפופ-אפ ומטרתו, לכן לא סיווגנו את שימושים שונים בשכבות כיסוי כ"זולים" או "יקרים" באופן גורף:

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

אז לשים פופ-אפ?

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

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

תחושת חוסר הנוחות שפופ-אפ עלול לגרום, יכולה להשפיע לרעה לא רק על האופן בו המשתמש חווה את את האתר, אלא גם על האופן בו הוא חווה את בית העסק

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

עוקבים, לומדים ומשפרים

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

כיצד אנחנו יוצרים פופאפים בוורדפרס?

הכלי המומלץ בו סטודיו האייל עושה שימוש עבור יצירת פופ-אפים הוא אלמנטור פרו. אלמנטור פרו מגיע עם מערכת ניהול פופ-אפים מתקדמת ביותר: תבניות מוכנות מראש,יכולות עיצוב בלתי מוגבלות, הגדרות מיקום, טריגרים ותנאים מתקדמים – כל אלו יסייעו לכם לבנות פופ-אפים נהדרים.

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

האם פופ-אפים יוצרים בעיות נגישות?

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

על מנת שפופ-אפ יהיה נגיש הוא צריך לעמוד בכמה כללים:

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

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

לסיכום

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