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

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

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

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

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

מה לכתוב על כפתור הנעה לפעולה

הטקסט צריך להגיד מה יקרה כשלוחצים. "שלח" ו"לחץ כאן" לא אומרים כלום. השוו:

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

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

דוגמה: אותו כפתור, שלושה ניסוחים

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

צעד קטן לפני צעד גדול

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

ניסוח לפי ההקשר

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

צבע שמופיע רק על כפתורים

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

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

ראשי ומשני

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

איפה לשים כפתורים

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

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

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

גודל, מרווח ומצבים

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

כפתור טוב גם מגיב:

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

טקסט ליד הכפתור

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

מה קורה אחרי הלחיצה

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

טעויות נפוצות

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

איך יודעים אם הכפתור עובד

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

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

לסיכום

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