מהו הux – האולטמטיבי לקריאה לפעולה?

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

קריאה לפעולה

מיקום

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

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

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

כך למשל אצלנו בבלוג:

ריל בלוג קריאה לפעולה

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

כך לדוגמה בחנות Book Depository:

Book depository

 

צבע וניגודיות

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

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

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

colors psychology

מקור: Web UI Design for the Human Eye

צורה

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

דוגמה

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

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

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

start using

קרדיט:  UXPin

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

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