‫Htm - אחלה טיפים לבניית אתרים » טפסים‬

‫טפסים? למי זה חשוב? —פיהוק—‬

‫‬ — Fri, 11 Dec 2009 18:30:44 +0000

פוסט אורח של ברק דנין מ-Uniq UI, בעל הבלוג "פשוט. שימושי" – על אנשים, מחשבים והמסכים שביניהם.

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

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

מספר השדות בטופס

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

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

יישור תוויות

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

יש שלושה יישורים לתוויות: ימני, שמאלי ועליון.

יישור תוויות ימינה

שם משפחה:
שם פרטי:
אימייל:

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

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

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

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

יישור תוויות שמאלה

שם משפחה:
שם פרטי:
אימייל:

יתרונות: מילוי הטופס מהיר ב-50% מטופס עם יישור תוויות לימין, כי הזנת השדות מתרחשת בצמוד לתווית שלהם.

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

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

יישור תוויות למעלה

שם משפחה

שם פרטי

אימייל

יתרונות: מילוי הטופס מהיר ב-20% מטופס עם יישור תוויות לשמאל, כי מיקום התווית מעל התוכן מאפשר לעין לקלוט את התווית ואת תוכן השדה במבט אחד. בטפסים שמחולל Google Docs משתמשים ביישור הזה, ולא סתם. הוא הכי מהיר והכי קל למילוי.

חסרונות: הטופס הופך להיות ארוך מאוד ודורש גלילה לאחר מספר שדות לא רב.

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

המלצות נוספות

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

עוד באותו נושא:

‫הפיכת טופס לתהליך הרשמה‬

‫אורן רוט‬ — Thu, 22 Oct 2009 07:38:31 +0000

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

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

<דוגמא><קוד>

מה אנחנו צריכים?

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<form id="SignupForm">
<fieldset>
<legend>פרטי חשבון</legend>
//...חלק אחד....
</fieldset>
<fieldset>
<legend>פרטי חברה</legend>
//...חלק שני...
</fieldset>
<fieldset>
<legend>פרטי תשלום</legend>
//...חלק שלישי...
</fieldset>

<input id="SaveAccount" type="button" value="שלח טופס" />
</form>

המהות של fieldset הוא לחלק את הטופס לחלקים, בתוך כל fieldset אנחנו נתחום חלקי טופס הקשורים אחד לשני (הוא מחלק את הטופס לקבוצות). תפקיד ה-legend הוא לתת כותרת ל-fielset, הוא חייב לבוא מיד לאחר פתיחת התאג fieldset.

זה הכל מבחינת ה-HTML. כעת כל שעלינו לעשות זה להוסיף את הקוד ה-jQuery (שהורדתם בכפתור הקוד למעלה), ולהפעיל אותו על הטופס הרצוי. מה שקוד ה-JS שאנחנו נתמיע יעשה, זה להציג כל פעם fieldset שונה, ובעזרת הכפתורים שהסקריפט יצור יהיה אפשר לנווט בין ה-fieldsets.

הוספת קוד הפלאגין

ראשית נוסיף שלושה קבצים חיוניים:

jQuery
סקריפט הפיכת טופס לתהליך (formToWizard.js)
גליון עיצוב לתהליך (formToWizard.css)

ככה זה נראה (בין תגיות ה-Head):

1
2
3

כעת נוסיף את קוד ההפעלה (נשים לב שלמעלה ה-ID של ה-form הוא SignupForm וה-ID של כפתור השליחה הוא SaveAccount):

1
2
3
4
5
6
7

כעת הטופס אמור להפוך לתהליך. את השם לכל תהליך הוא לוקח מה-legend של כל fieldset.

זה הכל! אני ממש אהבתי את הסקריפט הזה מכיוון והוא לא מתערב (פולשני) בתוך קוד ה-HTML, ונותן מענה אמיתי לטפסים ארוכים.

מה איתכם? אהבתם? חושבים שהסקריפט שימושי? אשמח לשמוע על כך בתגובות!

עוד באותו נושא:

‫ולידציה נעה לשליחת טפסים‬

‫אורן רוט‬ — Tue, 22 Sep 2009 16:18:43 +0000

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

<דוגמא><קוד>

את הרעיון למדריך הזה לקחתי מהאתר המומלץ (janko at warp speed) והדוגמא שאני אתן לכם פה היא למעשה מאוד פשוטה. נעשית בדיקה פשוטה ב-jQuery, אם אחד מהשדות הקיימים ריק ואם כן נוצרת אנימציה על אותה שדה והוא נצבע באדום. זוהי הבדיקה:

1
2
3
4
5
6
7
8
9
10

$(document).ready(function() {
$("#signup").click(function() {
var emptyfields = $("input[value=]");
if (emptyfields.size() > 0) {
emptyfields.each(function() {
//האנימציה מתרחשת כאן
});
}
});
});

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

האנימציה

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function() {
$("#signup").click(function() {
var emptyfields = $("input[value=]");
if (emptyfields.size() > 0) {
emptyfields.each(function() {
$(this).stop()
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "0px" }, 100)
.addClass("required");
});
}
});
});

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

שימו לב! על-מנת שהסקריפט יעבוד חייבים להגדיר position:relative לכל השדות הנעים (input)

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

כל שאנחנו צריכים להוסיף לסקריפט את השורות הבאות:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function() {
$("#signup").click(function() {
resetFields();
var emptyfields = $("input[value=]");
if (emptyfields.size() > 0) {
emptyfields.each(function() {
$(this).stop()
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "0px" }, 100)
.addClass("required");
});
}
});
});
function resetFields() {
$("input[type=text], input[type=password]").removeClass("required");
}

מה שעשינו הוא הוספנו בתחילת הסקריפט קריאה לפונקציה resetFields וכמובן הוספנו את הפונקציה עצמה אשר מוחקת מכל שדות הinput את מאפיין ה-class.

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

בהצלחה!