כותרות TheMarker >
    cafe is going down
    ';

    איך מעצבים טפסים? (חלק 3 מתוך 4)

    0 תגובות   יום שבת, 16/5/09, 10:14

    כן, אני יודע שהבטחתי קודם 3 חלקים, אבל בדרך גיליתי שיש לי הרבה מה להגיד. תתמודדו!

     

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

     

    המטרה של כל טופס היא לאסוף מידע מהמשתמש. הפעולה הראשית (Primary Action, או לפעמים Action Button) היא הדרך של המשתמש להגיד "סיימתי להזין את המידע שנדרש". בדרך כלל זה יהיה כפתור: "כניסה", "המשך", "שלח" וכו' (או באנגלית "Log In", "Continue", "Next").

     

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

     


     

    מטרתה של הפעולה המשנית (Secondary Action) היא לרוב לבטל את הפעולה (למשל כפתור "ביטול" - "Cancel") או ניווט לתהליך עבודה אחר, כמו למשל הקישור "שכחת סיסמה?" בטופס של ג'יידייט. באשפים (wizards) יש הרבה פעמים כפתור "חזרה" - "Back" שמאפשר לחזור לעמוד הקודם ולערוך שינויים, וכפתור "ביטול". גם אלה הן פעולה משנית. לא בכל טופס יש פעולה משנית פעולה משנית תופיע לעתים ככפתור בעיצוב דומה לפעולה הראשית, אבל לרוב הפעולה המשנית מוצגת ככפתור בעיצוב מעט שונה, או כקישור ולא ככפתור. על הסיבות לכך - כאן למטה.

     

     הנה דוגמא לטופס די מוכר, עם  שתי פעולות ראשיות, ושלוש פעולות משניות. אני מתייחס לכפתור "I'm feeling lucky" כפעולה ראשית, כי לחיצה עליו ממלאת את אותו תפקיד של הפעולה הראשית, "Google Search", עם שינוי קטן - גולשת עבורנו אל התוצאה הראשונה בחיפוש. השימוש בשתי פעולות ראשיות הוא די נדיר, ובצדק: הוא מקשה על המשתמשים, בגלל שהוא מאלץ אותם לבחור מה הם רוצים גם כשהם עושים את הפעולה הנפוצה בטופס. חופש בחירה הוא לא תמיד דבר טוב, מסתבר.

     

     

     

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

     

    מיקום הפעולה הראשית

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

     

    הנה דוגמא מצויינת מאתר לשכת רואי החשבון.

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

     

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

     

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

     

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


     

    הרגשתם את התנועה החדה שמאלה?

     

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

     

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

     

    המשך הפוסט בבלוג שלי:

     http://www.usable.co.il/archives/840

    דרג את התוכן:

      תגובות (0)

      נא להתחבר כדי להגיב

      התחברות או הרשמה   

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

      /null/text_64k_1#

      אין רשומות לתצוגה

      ארכיון

      פרופיל

      ברק דנין
      1. שלח הודעה
      2. אוף ליין
      3. אוף ליין