עיצוב דף נחיתה: איך עיצוב נכון מגדיל המרות

עיצוב דף נחיתה: איך עיצוב נכון מגדיל המרות

תוכן עניינים

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

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

עיצוב שמשרת המרה, לא אגו

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

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

היררכיה ויזואלית: להוביל את העין

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

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

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

הכפתור: צבע, מיקום וטקסט

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

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

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

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

תמונות אמת מנצחות סטוק

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

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

מרחב נשימה ומיקוד

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

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

טיפוגרפיה קריאה

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

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

מעל הקיפול: שלוש השניות הראשונות

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

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

איפה שמים אלמנטים של אמון

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

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

מובייל-פירסט זה לא בונוס

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

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

עיצוב, מהירות טעינה וציון האיכות

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

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

טעויות עיצוב שהורגות המרות

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

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

צ'קליסט עיצוב דף נחיתה ממיר

רכיבמה בודקיםלמה זה חשוב
היררכיה ויזואליתנקודת מיקוד אחת ברורה בכל מסךמובילה את העין לכפתור
כפתור CTAניגודיות גבוהה, טקסט תועלת, חוזר לאורך הדףמקבל את ההחלטה בקלות
תמונותאמת במקום סטוק גנריבונה אמון אמיתי
מרחב נשימהמרחב פנוי סביב אלמנטים חשוביםיוצר מיקוד
טיפוגרפיה16px ומעלה, ניגודיות גבוהה, גופן RTL קריאמבטיח שקוראים בכלל
מעל הקיפולכותרת + ויזואל + פעולה בלי גלילהקובע בשלוש שניות
אלמנטים של אמוןממוקמים ליד נקודות ההחלטהמסירים היסוס בזמן הנכון
מוביילנבנה קודם למובייל, כפתור בגודל אצבע, סרגל חיוג דביקרוב התנועה מגיעה משם
מהירותתמונות דחוסות, בלי אלמנטים כבדיםמשפרת ציון איכות ומוזילה קליק
מיקודהסרת ניווט וקריאות פעולה מתחרותמסלול אחד להמרה

שאלות נפוצות

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

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

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

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

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

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

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

רוצים דף נחיתה שבאמת ממיר?

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

נכתב על ידי מתן אסטון
מומחה גוגל אדס ומייסד Boostit, סוכנות פרסום בגוגל ושותפה רשמית של Google (Google Partner). מנהל קמפייני Google Ads לעסקים בישראל, עם התמחות בבניית אסטרטגיות צמיחה ואופטימיזציה לתוצאות עסקיות מדידות.
Icon

רוצים לנצח את המתחרים שלכם?

השאירו פרטים ונחזור אליכם מהר