פופ-אפ באתר: מדריך לחלונות קופצים שעובדים

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

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

במדריך הזה נסביר:

• מה זה פופ-אפ (חלון מודאלי) וממה הוא בנוי;
• אילו סוגי חלונות קופצים קיימים ומתי מתאים כל אחד;
• מתי פופ-אפ עוזר לעסק ומתי הוא מזיק;
• איך מתזמנים חלון קופץ כך שלא יפריע;
• מה Google, תקן הנגישות הישראלי וחוק הספאם אומרים על פופ-אפים;
• איך בונים חלון קופץ ב-Webflow, ב-WordPress, ב-Wix ובקוד.

מה זה פופ-אפ באתר וממה הוא בנוי

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

לרוב חלון קופץ בנוי מכמה חלקים קבועים:

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

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

סוגי חלונות קופצים: מודאלי ולא מודאלי

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

חלון מודאלי קלאסי

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

חלון לא מודאלי: טוסט, באנר ו-slide-in

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

מגירה צדדית (drawer)

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

Bottom sheet במובייל

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

לייטבוקס לתמונות וסרטונים

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

מתי פופ-אפ עוזר לעסק

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

איסוף לידים

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

אזהרות ואישור פעולות

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

מידע נוסף בלי לעזוב את העמוד

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

אישורים והודעות מערכת

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

מתי פופ-אפ מזיק: טעויות נפוצות

אותו רכיב שמביא לידים יכול גם להבריח אותם. אלה הטעויות שאנחנו רואים הכי הרבה באתרים של עסקים.

חלון שקופץ מיד בכניסה

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

כמה חלונות בבת אחת

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

קשה לסגור

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

חלון שחוזר שוב ושוב

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

חלון שלא עובד במובייל

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

איך מתזמנים חלון קופץ: טריגרים

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

לחיצה של הגולש

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

זמן בעמוד

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

עומק גלילה

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

כוונת יציאה (exit intent)

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

טריגרים לפי הקשר

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

פופ-אפים ו-SEO: מה Google אומרת

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

מה נחשב בעייתי:

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

מה בדרך כלל בסדר:

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

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

נגישות ופרטיות: מה חשוב לדעת בישראל

חלון קופץ נגיש

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

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

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

טופס הרשמה וחוק הספאם

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

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

איך בונים פופ-אפ: Webflow, WordPress, Wix וקוד

Webflow

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

WordPress

ב-WordPress יש כמה דרכים: בונה החלונות של Elementor Pro (Popup Builder) עם טריגרים מובנים של זמן, גלילה וכוונת יציאה, או תוספים ייעודיים לחלונות קופצים. כדאי לבחור תוסף אחד, לבדוק שהוא לא מאט את האתר ולוודא שהחלונות שהוא יוצר נגישים במקלדת.

Wix

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

קוד: אלמנט dialog של HTML

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

צ'ק-ליסט לפני שהחלון עולה לאוויר

• החלון נבדק בטלפון, בטאבלט ובמחשב, ובדפדפנים Chrome,‏ Safari ו-Firefox;
• כפתור הסגירה ברור, גדול ונגיש גם במקלדת;
• הטריגר מתאים להקשר ולא קופץ מיד בכניסה בעמודים שמקבלים תנועה מגוגל;
• הבחירה של הגולש נשמרת, והחלון לא חוזר בכל עמוד;
• טופס הדיוור כולל הסכמה מפורשת וקישור למדיניות הפרטיות;
• שליחות הטופס נמדדות באנליטיקס, כדי לדעת אם החלון באמת מביא פניות.

איך RJL Studio בונה חלונות קופצים שמביאים פניות

ב-RJL Studio אנחנו מתכננים חלונות קופצים כחלק מחוויית המשתמש של האתר כולו, ולא כתוספת שנדבקת בסוף. אנחנו בוחרים את סוג החלון והטריגר לפי מטרת העמוד, בונים אותו ב-Webflow, ב-WordPress או ב-Wix, דואגים שיהיה נגיש לפי התקן הישראלי, מחברים את הטופס ל-CRM ולמערכת הדיוור, ומודדים כמה פניות הוא באמת מביא.

רוצים לבדוק אם החלונות באתר שלכם עוזרים או מפריעים? קראו על שירותי עיצוב UX/UI שלנו, על בניית אתרים ב-Webflow, או השאירו פרטים ונחזור אליכם.

שאלות נפוצות על חלונות קופצים באתר

האם פופ-אפ פוגע בקידום האתר בגוגל?

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

מתי הכי טוב להציג חלון קופץ?

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

מה ההבדל בין חלון מודאלי ללא מודאלי?

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

האם חלון קופץ צריך להיות נגיש?

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

כמה חלונות קופצים מותר להציג בביקור אחד?

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