Skip to content

כפתורי "הבא" ו"הקודם" בטפסים

10/06/2009

לוק רובלאוסקי, מאסטר הטפסים מ-!Yahoo, כתב מאמר מעניין בבלוג שלו על מקרה פרטי של כפתורי פעולה בטפסי web: כפתורי "הבא" ו"הקודם" (next ו-previous אם תרצו).


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

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

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

אז מה הגישה הנכונה?

זה תלוי בהקשר.

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

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

ממה כדאי להימנע?

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

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

    1. במקרה של פעולה ראשית ומשנית – יישור כפתור "הבא" לשדות והבחנה ויזואלית בין הפעולות:
    2. במקרה של 2 פעולות ראשיות – הפרדה בין "הבא" (מימין) לבין "הקודם" (משמאל):

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

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

סיכום

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

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

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

מודעות פרסומת
3 תגובות
  1. תודה על הקישור, מרטין!

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

  2. יופי של פוסט 🙂

  3. הי לירון,
    תודה וברוך/ה הבא/ה לבלוג 🙂

להשאיר תגובה

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

הלוגו של WordPress.com

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

תמונת Twitter

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

תמונת Facebook

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

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

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

מתחבר ל-%s

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