Skip to content

צ'קבוקסים וכפתורי רדיו

16/06/2009

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

ההבדלים בין צ'קבוקס לכפתורי רדיו

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

מתי נשתמש בכל אלמנט

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

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

    חלוקה ל-3 קבוצות ע"י מסגרת אפורה. הקבוצה הראשונה מכילה תת קבוצה.

    מתוך Firefox: חלוקה ל-3 קבוצות ע"י מסגרת אפורה. הקבוצה הראשונה מכילה תת קבוצה.

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

    סידור אופקי לא תקין של כפתורי רדיו - קשה לזהות במבט מהיר איזה כפתור שייך לאיזה טקסט.

    סידור אופקי לא תקין של כפתורי רדיו - קשה לזהות במבט מהיר איזה כפתור שייך לאיזה טקסט.

  • עדיף להשתמש בכפתורי רדיו במקום בתפריט נפתח (drop-down), כי כפתורי הרדיו מציגים את כל האפשרויות הקיימות למשתמש, בעוד שתפריט נפתח מציג רק אפשרות אחת ומסתיר את השאר.

    מתוך Skype: שימוש בתפריט נפתח (לא רואים את כל האפשרויות) לעומת צ'קבוקסים.

    מתוך Skype: שימוש בתפריט נפתח (לא רואים את כל האפשרויות) לעומת צ'קבוקסים.

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

    מתוך וואלה מייל: צ'קבוקס בודד עם ניסוח מבלבל. במקרה זה היה יותר ברור להשתמש ב-2 צ'קבוקסים.

    מתוך וואלה מייל: צ'קבוקס בודד עם ניסוח מבלבל. במקרה זה היה עדיף להשתמש ב-2 צ'קבוקסים.

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

    מתוך Gmail: שינוי ההגדרות נכנס לתוקף רק לאחר לחיצה על כפתור האישור למטה.

    מתוך Gmail: שינוי ההגדרות נכנס לתוקף רק לאחר לחיצה על כפתור האישור למטה.

  • אם המשתמש לוחץ על back לפני כפתור האישור, הבחירות שלו מתבטלות וחוזרות לברירת מחדל. אם לאחר מכן הוא לוחץ forward כדי לחזור לאותו מקום, יש לוודא כי הבחירות שלו ישוחזרו.

סיכום

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

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

מודעות פרסומת
להגיב

כתיבת תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

%d בלוגרים אהבו את זה: