עיצוב דף נחיתה בעברית: 10 החלטות שקובעות אם הגולש ישאיר פרטים

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

עיצוב דף נחיתה מתחיל מהטקסט, לא מהצבעים

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

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

המסך הראשון בטלפון: מה חייב להיכנס בלי לגלול

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

החלטה 4: הכפתור נמצא איפה שהאגודל נמצא. בטלפון, אזור הלחיצה הנוח הוא החלק התחתון של המסך. לכן כדאי לשקול פס פעולה קבוע בתחתית, עם כפתור ראשי אחד, ואם WhatsApp הוא ערוץ הפנייה שלכם, גם הוא. לפי web.dev, גודל מינימלי מומלץ לאזור לחיצה הוא בערך 48 פיקסלים, עם מרווח של כ-8 פיקסלים בין אזורי לחיצה. כפתור קטן יותר מוביל ללחיצות שגויות, בעיקר על קישורים צמודים.

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

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

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

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

טופס, ניגודיות ונגישות

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

החלטה 9: ניגודיות שעומדת בתקן, לא רק "נראית טוב". לפי ההסבר של MDN לקריטריון הניגודיות ב-WCAG, יחס הניגודיות בין טקסט לרקע צריך להיות לפחות 4.5:1, ולטקסט גדול לפחות 3:1. טקסט גדול מוגדר שם כ-18pt לפחות, או 14pt מודגש. טקסט אפור בהיר על לבן, ולבן על תמונה בהירה, נכשלים כאן לעיתים קרובות. מה החוק בישראל דורש מאתרים ומה כוללת הנגשה, הסברנו במדריך לנגישות אתרים.

תמונות, וידאו ומהירות

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

כל החלטה כזאת נמדדת בסוף במהירות. לפי web.dev, ערכים טובים של Core Web Vitals הם LCP של עד 2.5 שניות, INP של עד 200 מילישניות ו-CLS של עד 0.1, כשהבדיקה נעשית באחוזון ה-75 של הביקורים. בפועל, למעצב זה אומר: תמונה ראשית אחת דחוסה, שני משקלי גופן, ומקום שמור מראש לכל תמונה, כדי שהטקסט לא יקפוץ בזמן הטעינה. איך בודקים את המספרים האלה הסברנו במדריך לבדיקת מהירות אתר.

בריף למעצב: מה לתת ומה לקבל בסוף

מה לתת למעצב:

1. המטרה והפעולה האחת של הדף.
2. הקהל, ומאיפה הוא מגיע: חיפוש בגוגל, רשת חברתית או וואטסאפ.
3. הטקסט המלא, כולל שאלות נפוצות וטקסט הכפתור.
4. לוגו, צבעי מותג וגופנים, אם יש.
5. תמונות אמיתיות, או רשימה של מה צריך לצלם.

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

כמה זה עולה? לפי מידרג, מחיר עיצוב דף נחיתה נע בין 1,000 ל-3,500 ₪, לפי מורכבות העבודה. שימו לב שזה מחיר לעיצוב, לא לדף שלם עם כתיבה, בנייה ומדידה.

מה Simple Web עושה בעניין

Simple Web היא סוכנות שיווק מבוססת AI מבני ברק, שותפי Meta מוסמכים ומומחי פרסום בגוגל, שעובדת עם 200+ עסקים ומחזיקה 35 ביקורות 5★ בגוגל. אנחנו בונים דפי נחיתה בעזרת AI, בגישה של מסר אחד, פעולה אחת וטופס קצר, לרוב שם וטלפון. העיצוב נעשה קודם לנייד, הפיקסלים ומעקב ההמרות מחוברים, ואחרי ההשקה אפשר להוסיף מפת חום ובדיקות A/B כדי לראות איפה הגולשים נעצרים. דף נחיתה מוכן לרוב תוך 5–7 ימי עבודה, והמחיר ניתן בהצעת מחיר לפי היקף.

סיכום

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

מקורות

• web.dev: Accessible tap targets: גודל מינימלי של כ-48 פיקסלים לאזור לחיצה ומרווח של כ-8 פיקסלים
• MDN: Color contrast: יחסי הניגודיות 4.5:1 ו-3:1 והגדרת טקסט גדול
• web.dev: Web Vitals: הספים ל-LCP, INP ו-CLS ובדיקה באחוזון ה-75
• מידרג: עיצוב דף נחיתה: טווח מחירי עיצוב דף נחיתה