6 הכללים החשובים ביותר בעיצוב של כפתורי לחיצה אלקטרוניים

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

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

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

כפתור צריך להיראות כמו כפתור

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

הדבר הופך להיות בעייתי במיוחד כאשר יש מספר כפתורים וקשה לדעת אילו מהם הוא העיקרי:

לפני:

button 1

אחרי:

button 2

שימו כפתורים היכן שהגולשים יוכלו לראות אותם

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

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

button 3

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

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

הדגשת הכפתור החשוב יותר והצנעת כפתורים פחות חשובים

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

button 4

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

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

סדר נכון של הכפתורים

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

button 5

לא לנסות להתחכם

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

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

נכון – דוגמה לטופס שיווקי שלא מנסה להתחכם

button 6

לא נכון (מה הכוונה של “מגניב”?)

button 7

חשבו מה הגולשים שלכם רוצים לעשות ובמיוחד מה הם לא רוצים לעשות….

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

button 8

לעומת זאת, אם נסתכל בטופס של PayPal, נראה שהם מציעים להיכנס לחשבון שלהו או לשלם באמצעות כרטיס אשראי, שזה מה שרצינו לעשות מלכתחילה…  האפשרות להירשם או לא להירשם מופיעה רק בשלב הבא ורק אם אנחנו מעוניינים בכך : button 9

button10

לסיכום – איך נגרום לכפתורים שלנו לעבוד כמו שצריך

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