עיצוב טפסים
ברק דנין. עדכון אחרון: 2/3/2010
המילה "טפסים" מיד מעוררת פיהוק. בדמיון עולה תמונה של דפים מצהיבים במשרד מממשלתי מאובק, ופקידה שאומרת "זה לא אני, זה פופטיץ" (כל הזכויות שמורות ל"זהו זה"). אבל כשמדובר בטפסים באתר או בתוכנה שלכם, הם הרבה יותר מבדיחה נוסטלגית. טפסים הם הדרך שלכם ליצור שיחה עם המבקרים באתר והמשתמשים במערכת: הם משמשים לאיסוף "לידים" (leads) – לקוחות פוטנציאליים, ובהקלדה של פרטי אשראי בכל עיסקה. הם משחקים תפקיד בכל חיפוש באינטרנט וכמעט בכל פעולה שמבצעים ברשת. כשהם מתוכננים בצורה לא מיטבית, התוצאות עשויות להיות קשות, גם בהפסד של $$$.
בבלוג "פשוט. שימושי" יש סידרה של 4 פוסטים שמכסים את הנושא של עיצוב טפסים:
- חלק ראשון: זרימה בטופס ויישור תוויות.
- חלק שני: עזרה והסברים, ובדיקות תקינוּת (וָלידציות).
- חלק שלישי: פעולה ראשית ופעולות משניות, ומספר השדות בטופס.
- חלק רביעי: תלויות בין שדות, ורשימת קריאה מומלצת.
אם אתם מחפשים מידע על טפסי הרשמה, יש מאמר מצויין ב-Smashing Magazine.
בנוסף, יש הרצאה מצולמת של Luke Wroblewsky, שגם כתב ספר מעולה על אותו נושא. אפשר לראות אותו מדבר על הרבה מהנושאים שהוא מעלה בספר, בהרצאה הזו:
וואו, תודה על ההפניה, אני מחפש כבר הרבה זמן מדריך מסודר שכזה – אחת הבעיות הקשות ביותר שיש לי בעיצוב אתרים היא הטפסים… זה אף פעם לא נראה טוב, ובודאי לא יעיל.
בעניין הזה, אני מחפש ממשק דוגמא טוב לאתר תוכן שמאפשר כתיבת מאמר ושתילת תמונות בתוכו – שקל וברור למשתמשים רגילים להוסיף תוכן בעזרתו. מישהו מכיר?
היי משה,
תודה על המשוב.
יש את אתר קפה דה מרקר, אבל הוא לא מדהים בחוויית המשתמש שלו. אתה מוזמן להסתכל. אני מציע שתכתוב באיזור ה"דיונים" באתר את השאלה – יש יותר סיכוי שתקבל מענה שם.
היי ברק
האם מתחבאים כאן גם אייקונים לסימנים נפוצים כמו: עזרה, הדפסה, משלוח וכד'?
אני מחפשת אייקון מוסכם לעזרה שהוא לא סימן שאלה..
היי הדס,
יש את ה-i הלבן על הרקע הכחול (או להיפך), יש כאלה שרושמים "What's this?" או "מה זה?" או "הסבר…". אייקון – לא מכיר, ובדרך-כלל אני מעדיף ללכת על טקסט בתוך הטופס או טקסט קישור לעזרה קצר מאשר על אייקון שלא כל אחד יבין. כמובן שזה תלוי בתפקיד של הטופס וקהל היעד (הרשמה למשתמש חדש או עדכון למשתמש קבוע? וכו')
אולי הספר הכי ממצה שנכתב לדעתי על עיצוב טפסים, סוקר את כל מרכיבי הטופס, מציג תיאוריות פרקטיות עם בדיקות שמישות ושפע פתרונות מעשיים ליישום:
http://www.lukew.com/resources/web_form_design.asp