מהו כפתור הנעה לפעולה (CTA Button) ואיך מעצבים אותו כך שבאמת ילחצו עליו?
כפתור הנעה לפעולה (CTA Button) הוא הרכיב הלחיץ בממשק שמבצע בפועל את ה-CTA: עיצוב נכון שלו כולל ניגודיות גבוהה, מקום פנוי סביבו, גודל נגיש ומשוב ברור בכל מצב לחיצה.
כפתור הנעה לפעולה (CTA Button) הוא רכיב הממשק שעליו המשתמש בפועל לוחץ כדי לבצע את הפעולה הרצויה: לשלוח טופס, לעבור לרכישה, להתקשר או להוריד קובץ. בעוד ש-CTAאלמנט שיווקי, כמו כפתור, טקסט או באנר, שנועד להניע את המשתמש לבצע פעולה מסוימת הוא המושג השיווקי הרחב, מדובר כאן דווקא ברכיב ה-UI הפיזי עצמו, בעיצוב שלו, בגודל שלו ובאופן שבו הוא בולט (או לא בולט) על פני שאר העמוד.
עקרונות עיצוב לכפתור שעובד
כפתור הנעה לפעולה טוב נבנה על כמה עקרונות עיצוב שחוזרים בכל מדריכי UI/UX: ניגודיות צבע גבוהה משאר העמוד כדי שהעין תתפוס אותו מיד; מקום פנוי (whitespace) סביבו כדי שלא יתחרה עם אלמנטים אחרים על תשומת הלב; וגודל שמאפשר לחיצה נוחה גם באצבע על מסך מגע, לא רק בעכבר. עיקרון חשוב נוסף הוא חוק פיטס (Fitts's Law): ככל שהמטרה גדולה יותר וקרובה יותר לאצבע או לסמן העכבר, כך קל ומהיר יותר ללחוץ עליה בלי טעות.
מצבי כפתור (States)
כפתור תקין צריך לתת משוב ויזואלי ברור בכל מצב שבו הוא נמצא, לא רק במראה ברירת המחדל שלו.
| מצב | מה המשתמש אמור לראות |
|---|---|
| ברירת מחדל (Default) | הכפתור בצבע ובניגודיות המלאים שלו, ברור כניתן ללחיצה |
| מעבר עכבר (Hover) | שינוי קל בגוון או בצל שמאשר שהכפתור אינטראקטיבי |
| פוקוס מקלדת (Focus) | מסגרת פוקוס ברורה לניווט נגיש במקלדת |
| לא זמין (Disabled) | ניגודיות מופחתת שמתקשרת בבירור שהפעולה אינה זמינה כרגע |
דילוג על אחד המצבים הללו, ובעיקר על מצב הפוקוס, פוגע בנגישות האתר ומקשה על משתמשים שמנווטים במקלדת לדעת איפה הם נמצאים בעמוד.
גודל כפתור ונגישות
סטנדרט הנגישות WCAG 2.2 קובע גודל מטרה מינימלי של 24 על 24 פיקסלים CSS עבור כל רכיב ניתן ללחיצה, כדי להבטיח שגם משתמשים עם מוגבלות מוטורית או שמשתמשים במסך מגע יוכלו ללחוץ עליו בביטחון. בפועל, מרבית מדריכי העיצוב ממליצים על שטח לחיצה נדיב יותר מהמינימום ההכרחי, כדי לצמצם לחיצות שגויות בטעות על רכיבים סמוכים.
שאלות נפוצות על מהו כפתור הנעה לפעולה (CTA Button) ואיך מעצבים אותו כך שבאמת ילחצו עליו?
CTA הוא המושג השיווקי הרחב, קריאה לפעולה שיכולה להופיע כטקסט, כבאנר או כתמונה, לא רק ככפתור. כפתור הנעה לפעולה הוא המימוש הספציפי שלו כרכיב ממשק לחיץ, עם עיצוב, גודל וצבע משלו.
אין צבע "נכון" אוניברסלי; מה שקובע הוא ניגודיות ביחס לשאר צבעי העמוד, לא הגוון עצמו. כפתור בצבע שכבר שולט בעיצוב הכללי של הדף לא יבלוט, גם אם מדובר בצבע שנחשב "טוב" להמרות באתרים אחרים.
ככלל, עדיף כפתור ראשי אחד וברור לכל פעולה שרוצים שהמשתמש יבצע, ולא כמה כפתורים מתחרים עם משקל ויזואלי דומה. ריבוי כפתורים בולטים באותה מידה מבלבל את המשתמש לגבי הפעולה החשובה ביותר ומפחית את שיעור ההמרה הכולל.
