עיצוב דף נחיתה טוב מכוון את העין לפעולה אחת. לכן הוא נשען על היררכיה, ניגודיות ורווחים ולא על קישוטים. כשעיצוב דף נחיתה מצליח, המבקר מבין תוך רגע מה מציעים לו ומה עליו לעשות, בלי להרגיש שמובילים אותו. וכשהוא לא מצליח, המבקר מרגיש בלבול, גם אם הדף נראה "יפה".
במאמר הזה עשרה עקרונות, מקובצים בחמש קבוצות: מטרה, היררכיה, צבע וגופן, נייד, וביצועים ונגישות. אין כאן הבטחה שעיצוב לבדו יביא פניות, כי הוא רק חלק מהתמונה. ההצעה, המסר והקהל חשובים לא פחות. אבל עיצוב נכון מאפשר למסר להישמע.
בקצרה:
- העיצוב אמור להוביל לפעולה אחת, וכל מה שלא מוביל אליה מפריע.
- עשרה עקרונות מקובצים: מטרה, היררכיה, צבע וגופן, נייד, ביצועים ונגישות.
- עיצוב יפה לא מחליף מסר ברור: קודם מסר, אחר כך מראה.
עיצוב דף נחיתה: במה זה שונה מעיצוב אתר
באתר רגיל המבקר יכול ללכת לכל מיני כיוונים: עמוד אודות, שירותים, בלוג, צור קשר. העיצוב צריך לתמוך בכל אלה, עם תפריט, ניווט ומבנה שמתאים לעמודים רבים. בדף נחיתה אין ניווט לכל הכיוונים. יש מסלול אחד, והעיצוב עוזר למבקר ללכת בו.
הפער הזה משנה כמעט כל החלטה עיצובית. פחות רכיבים, יותר ריכוז. אין צורך בתפריט עם שבעה פריטים, אבל חשוב מאוד שהכפתור הראשי יבלוט. אלמנט שבאתר היה נחמד, כמו אנימציה או חלון קופץ, בדף נחיתה עלול להסיט את תשומת הלב מהפעולה. מי שרוצה את התמונה הרחבה יותר על עיצוב אתרים יכול לקרוא את המאמר על עיצוב אתר אינטרנט.
מה אומרת רשימת העשרה
העקרונות שלהלן לא נוסחה, אלא נקודות בדיקה. חלקם חופפים, וחלקם מושכים בכיוונים הפוכים, כמו הרצון להוסיף תמונה מול הרצון בדף מהיר. מטרת הרשימה היא לעזור לך לקבל החלטות מודעות ולא לדבוק בכללים באופן עיוור. בהמשך תמצא גם טבלה שמרכזת את כולם.
דוגמה להמחשה בלבד: החלק העליון של הדף
החלק שנראה בלי גלילה הוא הנכס החשוב ביותר בעיצוב. נניח דף של שירות כללי. בחלק העליון יש כותרת בגודל גדול שאומרת מה השירות ולמי. מתחתיה משפט אחד שמסביר מה כלול. אחריו כפתור בצבע הפעולה, ולצדו, בקטן, מספר טלפון. ברקע תמונה פשוטה או צבע אחיד. זה הכול. אין תפריט, אין שלוש כותרות מתחרות ואין שני כפתורים. זו דוגמה להמחשה בלבד, אך היא מדגימה את הרעיון: מי שמגיע מבין תוך שניות מה לפניו ומה לעשות.
מה העיצוב לא יכול לעשות
עיצוב לא יכול להפוך הצעה חלשה לחזקה. הוא לא יסדר מסר מבולבל ולא יפצה על קהל לא מתאים. כדאי להתחיל תמיד מהמסר: מה אתה מציע ולמי. רק אחרי שזה ברור, העיצוב יכול להוסיף ערך אמיתי.
מטרה אחת וקריאה לפעולה אחת (עקרונות 1 ו-2)
עיקרון 1: כל אלמנט משרת את המטרה. לפני שמוסיפים משהו לדף, שואלים: האם זה מקרב את המבקר לפעולה? אם התשובה לא ברורה, אולי עדיף להוריד. תמונה, אייקון, סרטון או פסקה, כולם צריכים להצדיק את מקומם.
עיקרון 2: כפתור ראשי אחד. הפעולה הרצויה מקבלת כפתור בולט אחד, באותו צבע ובאותו ניסוח לאורך הדף. כשיש כמה כפתורים בצבעים שונים עם משמעויות שונות, המבקר צריך לחשוב מה לבחור, ומחשבה היא החיכוך הכי גדול.
איך כפתורים חוזרים בלי להציק
מקובל שהכפתור יופיע בחלק העליון, ושוב בסוף, ואם הדף ארוך גם באמצע. הרעיון הוא שבכל נקודה שבה המבקר עשוי להחליט, יש לידו כפתור. אבל כדאי להקפיד על עקביות: אותו צבע ואותו ניסוח, כדי שיהיה ברור שמדובר באותה פעולה.
התאמה לקמפיין
כשהדף משמש כיעד של מודעה, המסר בדף צריך להיות המשך של המסר במודעה. אם המודעה מדברת על שירות מסוים, העיצוב והכותרת בדף צריכים להראות את אותו שירות. אין כאן הבטחה לגבי פלטפורמת הפרסום, והמדיניות שלה משתנה. מי שמפנה תנועה ממודעה בגוגל מוזמן לקרוא על דף נחיתה לקמפיין בגוגל, ולבדוק את הנוסח העדכני אצל הפלטפורמה.
היררכיה חזותית ורווחים (עקרונות 3 עד 5)
עיקרון 3: גודל וסדר מובילים את העין. מה שגדול יותר ובולט יותר נקרא קודם. לכן הכותרת גדולה מהתת כותרת, ותת הכותרת גדולה מהפסקה. כשהכול באותו גודל, העין לא יודעת איפה להתחיל.
עיקרון 4: רווחים לבנים הם חלק מהעיצוב. מקום ריק סביב אלמנט מדגיש אותו. דף דחוס מרגיש כבד וקשה לסריקה, ודף עם רווחים נושם, גם אם יש בו אותו תוכן.
עיקרון 5: קבוצות מידע קצרות. במקום בלוק טקסט ארוך, מחלקים לקבוצות של שלוש עד ארבע שורות, עם כותרת קטנה לכל אחת. מבקרים סורקים לפני שהם קוראים, ומבנה כזה מאפשר להם למצוא את מה שחשוב להם.
עיצוב הכותרת
הכותרת היא האלמנט הראשון שנקרא, ולכן מגיע לה הטיפול הרב ביותר. היא צריכה להיות גדולה, קצרה וברורה, עם ניגודיות חזקה מול הרקע. כדאי להימנע מכותרת שמתפרשת על פני שלוש שורות או יותר בנייד, כי היא דוחקת את הכפתור מחוץ למסך. תת כותרת קטנה יותר יכולה להשלים את המסר בלי להתחרות בו.
עיצוב הטופס
טופס הוא המקום שבו המבקר מקבל החלטה, ולכן חשוב שיהיה נעים. שדות גדולים מספיק, תוויות ברורות מעל כל שדה ולא רק בתוך השדה, וכפתור שליחה שאומר מה יקרה. כדאי להוסיף הודעת שגיאה ברורה אם משהו חסר, ולא להשאיר את המבקר לנחש. טופס שמעוצב היטב מקטין חיכוך ומאפשר למי שהחליט לפעול בלי להיתקע.
עיצוב חלק האמון
אמון נבנה גם דרך עיצוב. ניסוח כן, פרטי קשר גלויים ושאלות נפוצות שמסודרות בקלות לקריאה מעבירים תחושה של עסק שמתנהל ביושר. מה שפוגע באמון הוא עיצוב שנראה "מוכר" יותר מדי, כמו סמלים וחותמות שאין להם הסבר. אין צורך להמציא סמלי אמון. מספיק להציג את מה שאפשר לעמוד מאחוריו.
תרגיל פשוט
פתח את הדף, הסתכל עליו שנייה ועצום עיניים. מה זכרת? אם זה הכפתור והכותרת, ההיררכיה עובדת. אם זכרת תמונה או קישוט, ייתכן שהם גוזלים יותר מדי תשומת לב. אפשר לבקש את אותו תרגיל מאדם אחר, ולהשוות.
טעות נפוצה: הכול מודגש
כשכל משפט מודגש, כלום לא מודגש. הדגשה עובדת רק כשהיא נדירה. אם יש בדף יותר ממה שנראה כמו שלוש נקודות מודגשות, כדאי לשאול איזו מהן באמת חשובה, ולהוריד את ההדגשה מהשאר.
צבעים, ניגודיות וגופנים (עקרונות 6 ו-7)
עיקרון 6: פלטה מצומצמת וצבע אחד לפעולה. בדרך כלל מספיקים צבע בסיס, צבע משני וצבע פעולה. צבע הפעולה מיועד לכפתורים, ובעיקר להם. כך המבקר לומד שמה שצבוע בצבע הזה הוא מה שאפשר ללחוץ עליו.
עיקרון 7: גופן קריא וגדלים עקביים. גופן פשוט וברור עדיף על גופן דקורטיבי. כדאי להסתפק בשני גופנים לכל היותר, ולשמור על גדלים עקביים: אותו גודל לכל כותרת ברמה זהה, ואותו גודל לכל הגוף.
ניגודיות לטקסט ולכפתורים
טקסט בהיר על רקע בהיר, או כהה על כהה, קשה לקריאה, בעיקר בשמש או למי שרואה פחות טוב. כדאי לוודא שיש הפרדה ברורה בין הטקסט לרקע, ובמיוחד בכפתורים: הכיתוב על הכפתור חייב להיקרא בקלות.
זוגות צבעים שכדאי להיזהר מהם
כמה שילובים קשים לקריאה כמעט תמיד: אפור בהיר על לבן, צהוב על לבן, ואדום על ירוק למי שלוקה בעיוורון צבעים. אם אתה משתמש בצבע כדי להעביר מידע, למשל אדום לשגיאה, כדאי להוסיף גם טקסט או סימן, כדי שהמסר יובן גם למי שלא רואה את הצבע. זה פרט קטן שמשפר את החוויה לכולם.
גודל הגופן
גופן קטן מדי הוא אחת התלונות הנפוצות, בעיקר בנייד. טקסט הגוף צריך להיות גדול מספיק לקריאה בלי הגדלה, והכותרות גדולות ממנו באופן ברור. שורות ארוכות מדי קשות לקריאה, ולכן כדאי להגביל את רוחב הטקסט, ושיהיה רווח נוח בין השורות.
תמונות שמסבירות ולא מקשטות
תמונה צריכה לתרום משהו: להראות מה מקבלים, להסביר תהליך או ליצור הקשר רגשי נכון. תמונה גנרית שאין לה קשר להצעה גוזלת מקום ומאטה. אם אינך בטוח שהתמונה מוסיפה, נסה בלעדיה ובדוק אם הדף נעשה ברור יותר.
הנחיות נגישות
ניגודיות וקריאות הן גם חלק מנושא הנגישות. אפשר לקרוא את ההנחיות הכלליות של W3C לנגישות, שמסבירות את העקרונות הבסיסיים. הדרישות והנוסח הרשמי מתעדכנים, כדאי לבדוק נוסח עדכני ולהתייעץ עם איש מקצוע.
נייד קודם: עיצוב דף נחיתה למסך קטן (עיקרון 8)
עיקרון 8: מתחילים מהנייד. חלק גדול מהמבקרים מגיעים מהטלפון, ולכן הגיוני לתכנן קודם למסך קטן, ורק אחר כך להרחיב למחשב. מה שעובד במסך קטן עובד בדרך כלל גם במסך גדול, אבל ההפך לא תמיד נכון.
כפתור שנגיש לאגודל
כפתור קטן קשה ללחוץ עליו, ובמיוחד ביד אחת. כדאי להשתמש בכפתור רחב ובגובה נוח, עם רווח מספיק מסביבו, כדי שלא ילחצו בטעות על אלמנט סמוך. כשיש מספר טלפון, שלחיצה עליו תפתח שיחה.
טופס קצר וכפתור התקשרות
בנייד כל שדה בטופס הוא עוד הקלדה. לכן כדאי להשאיר רק את מה שחיוני, ולהוסיף כפתור התקשרות למי שמעדיף לדבר. הקלדה ארוכה במסך קטן היא אחת הסיבות הנפוצות לנטישה.
סדר החלקים במסך קטן
בנייד הכול מסתדר בטור אחד, ולכן הסדר חשוב עוד יותר. החלק העליון צריך לכלול את הכותרת ואת הכפתור, ומיד אחריהם ההסבר. מי שמגיע מהודעה או ממודעה גולל במהירות, והוא מחליט בתוך כמה שניות אם להמשיך. כדאי לבדוק כל חלק בנפרד ולשאול אם הוא היה מספיק ברור גם אם זה כל מה שהמבקר ראה.
מה נחתך ומה חייב להישאר
במסך קטן אין מקום לכל דבר. מה שחייב להישאר: כותרת, הסבר קצר, כפתור וטופס. מה שאפשר לצמצם: תמונות גדולות, טבלאות רחבות ופסקאות ארוכות. כדאי לבדוק את הדף בפועל על טלפון, ולא להסתפק בתצוגה מקדימה. פירוט נוסף על בדיקות כאלה נמצא במאמר על אתר מותאם לנייד.
טבלה: עשרת העקרונות במבט אחד
הטבלה מרכזת את כל העקרונות. היא יכולה לשמש רשימת בדיקה לפני שמסיימים.
| מספר | עיקרון | מה עושים בפועל | טעות נפוצה |
|---|---|---|---|
| 1 | מטרה אחת | כל אלמנט מקדם את הפעולה | שני יעדים באותו דף |
| 2 | כפתור ראשי | כפתור אחד בצבע ובניסוח קבועים | כמה כפתורים מתחרים |
| 3 | היררכיה | גודל וסדר מובילים את העין | הכול באותו גודל |
| 4 | רווחים | מקום ריק סביב מה שחשוב | דף דחוס |
| 5 | קיבוץ | קבוצות מידע קצרות | בלוק טקסט ארוך |
| 6 | צבע | פלטה מצומצמת וצבע אחד לפעולה | יותר מדי צבעים |
| 7 | גופן | גופן קריא וגדלים עקביים | גופן דקורטיבי קשה לקריאה |
| 8 | נייד | תכנון למסך קטן קודם | כפתורים קטנים |
| 9 | מהירות | תמונות קלות ומעט גופנים | תמונות כבדות |
| 10 | נגישות | ניגודיות, טקסט חלופי, מקלדת | טקסט בהיר על בהיר |
איך משתמשים בטבלה
עבור שורה אחרי שורה על הדף שלך וסמן אם היא מתקיימת. אל תנסה לתקן הכול בבת אחת. התחל מהעקרונות הראשונים, כי הם משפיעים הכי הרבה, ורק אחר כך עבור לפרטים. אם אתה רוצה שמישהו יעשה זאת בשבילך, זה חלק ממה שמוצע בשירות של בניית דפי נחיתה אצלנו.
ביצועים ונגישות: עיצוב שלא מכביד (עקרונות 9 ו-10)
עיקרון 9: מהירות היא חלק מהעיצוב. דף שנטען לאט נראה פחות טוב, גם אם הוא יפה. תמונות כבדות וריבוי גופנים מאטים לעיתים, תלוי בהגדרה. כדאי לכווץ תמונות, להסתפק במעט גופנים ולבדוק מהירות. אפשר להסתייע בתיעוד של web.dev, שמכיל מדריכי מהירות וביצועים.
עיקרון 10: נגישות. פירוש הדבר ניגודיות מספקת, טקסט חלופי לתמונות, ניווט במקלדת וטקסט קריא. כשהעיצוב נגיש, יותר אנשים יכולים להשתמש בדף. הדרישות והנוסח הרשמי מתעדכנים, כדאי לבדוק נוסח עדכני ולהתייעץ עם איש מקצוע.
מה אצלנו
אצלנו כל אתר ודף נבנים מונגשים, ועם ציון מהירות מעל 90 ביום המסירה. אנחנו לא מצהירים שהדף עומד בדרישה רשמית מסוימת, כי זה עניין שדורש בדיקה מקצועית. מי שמחפש עיצוב והבנייה במקום אחד יכול לקרוא על בניית אתרים באופן כללי.
למה מהירות ונגישות שייכות לעיצוב
קל לחשוב על עיצוב כעל מה שרואים בלבד, אבל חוויית המבקר כוללת גם את מה שלא רואים: כמה זמן לוקח לדף להיטען והאם אפשר להשתמש בו בקלות. דף יפה שנטען לאט או שאי אפשר לקרוא בשמש לא ישרת את מטרתו. לכן שני העקרונות האחרונים הם חלק בלתי נפרד מהעיצוב ולא תוספת.
טעויות עיצוב נפוצות ומה עושים במקומן
הנה טעויות שחוזרות על עצמן, ואיך מתקנים.
- יותר מדי צבעים וכפתורים. במקום זאת: פלטה קטנה, כפתור ראשי אחד.
- סליידרים אוטומטיים. מסר שמחליף את עצמו עלול להיעלם לפני שנקרא. עדיף מסר אחד קבוע.
- טקסט על תמונה בלי ניגודיות. הוסף שכבה כהה, או הצב את הטקסט על רקע אחיד.
- עיצוב שנראה טוב רק במסך גדול. בדוק בנייד כבר בהתחלה.
- אלמנטים שגוזלים תשומת לב. חלונות קופצים, אנימציות מוגזמות וסרגלים צדדיים מסיטים מהפעולה.
מתי לפנות לאיש מקצוע
אם הדף שלך נראה לא מסודר ואינך יודע למה, או אם הזמן שלך מוגבל, שווה לשקול עזרה. מי שרוצה לראות איך מתייחסים לצד העסקי, כולל מה כדאי להכין, יכול לקרוא על בניית דפי נחיתה לעסקים, ועל מה מתאים לעסק קטן בבניית אתרים לעסקים.
רשימת בדיקה לפני פרסום
- יש כפתור ראשי אחד, והוא נראה בלי גלילה.
- הכותרת אומרת מה ההצעה ולמי.
- ההיררכיה ברורה: אפשר לדעת מה חשוב גם בלי לקרוא.
- הצבעים מעטים, והכיתוב קריא על כל רקע.
- הדף נראה נכון בנייד, והכפתורים נוחים ללחיצה.
- התמונות מכווצות ומסבירות משהו.
- אפשר לנווט במקלדת, ולתמונות יש טקסט חלופי.
- אדם שאינו מכיר את הדף מבין תוך שניות מה לעשות.
סיכום קצר
עיצוב דף נחיתה הוא סדרה של החלטות קטנות, שכולן מכוונות לפעולה אחת. מי שמתחיל מהמסר, שומר על היררכיה, צבעים מעטים ונייד קודם, ומוסיף מהירות ונגישות, כבר עושה את רוב העבודה. את השאר משפרים בהדרגה, צעד אחד בכל פעם.
רוצה עיצוב שמוביל לפעולה אחת?
אם יש לך הצעה, אפשר לבנות סביבה דף ממוקד, מעוצב וקל. אנחנו מטפלים במבנה, בטקסטים, בעיצוב ובבנייה, ומשלימים מה שחסר. יש לך איש קשר אחד, מהשיחה הראשונה ועד שהאתר באוויר. דבר איתנו ונבדוק מה מתאים לך.
המאמר נכתב בעזרת בינה מלאכותית, ונערך ואושר על ידי סלבה זמסקי, המייסד של SZ.