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

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

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

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

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

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

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

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

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

יישור תוויות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שם משפחה

שם פרטי

אימייל

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

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

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

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

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

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

‫שימוש בפקודת OnBeforeUnload לוידוא יציאה של המשתמש‬

‫אורן רוט‬ — Tue, 17 Nov 2009 23:14:58 +0000

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

<דוגמא>

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

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

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

הוסיפו את הקוד הבא לדף HTML, וכך הדפדפן יציג שאלה למשתמש לפני סגירת הדף:

1
2
3

שימו לב שהטקסט בעברית ("כל המידע שלא נשמר יאבד!"), הוא טקסט שיתווסף להודעה הקבועה של הדפדפן במבנה הבא:

עזרו למשתמש שלכם למנוע טעות

בבדיקתי אם הדפדפנים השונים, chrome ו-Safari לא תמכו בהודעות בעברית.
שימו לב שאופרה מאז ומתמיד לא תמכה ב-OnBeforeUnload, כך שהקוד הנ"ל לא יעבוד בדפדפן אופרה כלל.

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

אשמח לשמוע, איפה אתם מצאתם שימוש לקוד הזה?

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

‫סיכום של יום השימושיות‬

‫אורן רוט‬ — Fri, 13 Nov 2009 00:19:15 +0000

הכנס הישראלי לציון יום השימושיות הוקדש השנה לנושא: "Designing for a Sustainable World". נושא מפוצץ, הוא כמו שישע סיוון אומר, פצץ. הכנס כלל שמונה הרצאות, טובות יותר וטובות פחות. אני קצת קיבלתי הרגשה שחלקן פשוט פספסו את הפואנטה.

חוה צור, נשיאת UPA Israel, פתחה בהצגת הנושא לכנס השנה ("Designing for a Sustainable World"), היא השכילה להסביר שהיא בעצמה לא הבינה במה בדיוק מדובר. לאחר שתם היום הארוך הזה, קיבלתי בהחלט טעימה מהנושא, והיי, למדתי מילה חדשה, Sustainable. בתרגום חופשי (או לא כל-כך חופשי) המילה הזאת אומרת, קיימות (בר-קיימה), בגדול, איך אנחנו יכולים לחיות פה ולא להכחיד בו זמנית את כדה"א, להמשיך להתקיים.
בתור מפתח אתרים, צד-לקוח וצד-שרת, פחות התחברתי לנושא של קיימות הסביבה, כל האתרים שאני מפתח מתקלים ב100% בלחיצת כפתור, והרגשתי שבלי לשים לב הגעתי ליום בנושא אקולוגיה וסביבתיות. נושא ה-Usability נדחק לשולי המצגות ובמקרה הטוב נשאר רק בכותרת ובתוכניה.

אני יכול לחלק את ההרצאות ביום הזה לשלושה סוגים, ואלו הם:

הרצאות בנושא סביבה וקיימות
הרצאות בנושא שימושיות
הרצאות כלליות

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

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

מסתבר שנעשתה כאן חשיבה Eco-Usability

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

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

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

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

‫כנס יום ה-Usability העולמי 2009 בישראל‬

‫אורן רוט‬ — Tue, 27 Oct 2009 13:16:10 +0000

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

וכך נכתב באתר UPA Israel:

"יום ה-Usability העולמי, שמטרתו לקדם את המודעות לצרכי המשתמש במוצרי טכנולוגיה, תוכנות מחשב, אפליקציות ואתרי אינטרנט, מתקיים זו השנה החמישית בכ-40 מדינות ברחבי העולם, ומצויין בישראל, ע"י ארגון מומחי ה-Usability הישראלי, UPA Israel, המסונף ל-UPA העולמי. שתיים מההרצאות בכנס הישראלי יוקדשו לנושא העולמי השנתי – Design for sustainability."

תוכנית הכנס

מעריסה לעריסה – על המאמץ לסגור את המעגל האקולוגי בחיי היום יום: מר ליעד אורתר, יועץ סביבתי ומנכ"ל משותף בחברת ביונדביזנס
מעבדת החדשנות במדיה: תהליכי עיצוב חוויות אינטראקטיביות ממוקדות צרכים אנושיים: ד"ר אורן צוקרמן, ביה"ס סמי עופר לתקשורת, מסלול תקשורת אינטראקטיבית, המרכז הבינתחומי, הרצליה
הרשתות החברתיות – הקלות הבלתי נסבלת של החיים: מר רונן שמיר, יועץ ומנהל תוכן לניו מדיה, ביה"ס חשיפה, האוניברסיטה הפתוחה
החיים בעולם הספרתי – מי סופר את הספר?: פרופ' שיזף רפאלי, ראש בית הספר לניהול, אוניברסיטת חיפה
Eco-Usability – ידידותי למשתמש ולסביבה: גב' לאה אהרונוביץ, מנהלת מוצר בכירה בחברת Answers.com, חברת הנהלת UPA Israel
חדשנות באתרי תוכן: מר גל מור, יועץ לאסטרטגיות תוכן וממשקים
על שימושיות, הקסמת המשתמש וחווית השימוש: משחק של איזונים: ד"ר יעקב גרינשפן, מנכ"ל שותף, חברת UI
HTML5 מבט על התקן ממשקפי שמישות וקיימות: ד"ר ישע סיוון, בי"ס גבוה להנדסה ולעיצוב, שנקר – המחלקה להנדסת תוכנה

המחיר לכנס הוא 240 ש"ח (או 200 לחברי איגוד האינטרנט הישראלי). אם תספיקו עוד היום לשלוח את טופס ההזמנה התענוג יעלה לכם רק 140 ש"ח.

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

אני אהיה נוכח בכנס, מה איתכם? אם אתם מתכוונים להגיע שלחו תגובה כאן למטה!

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

‫בדיקת שימושיות עיצוב ב-5 שניות‬

‫אורן רוט‬ — Tue, 06 Oct 2009 14:08:08 +0000

מי מאיתנו לא מבלה שעות ארוכות לאחר עיצוב של אתר, בחיפוש אחר אנשים תמימים שיגידו לו איך העיצוב יצא לדעתם ואיך אפשר לשפר. לרוב אנחנו גם נתייעץ גם בפורומים ולרוב האנשים שאנחנו נתייעץ איתם יהיו מומחים בנושא. אבל מה קורה שאנחנו רוצים להעביר את העיצוב שלנו מבחן של שימושיות (Usability), למבחן כזה אנחנו לא צריכים אנשי מקצוע אלא רק קהל רחב שיתן לנו חוות דעת על העיצוב. האתר Five Second Test, מבחן חמש שניות, מאפשר לכם לעלות תמונה של עיצוב ולאפשר לאנשים לתת לכם חוות דעת על העיצוב. ישנם שני מבחנים שהאתר מציע:

בדיקה קלאסית – בדיקה שבה יש לבוחן 5 שניות להביט באתר ולאחר מכן הוא צריך לתאר מה הוא זוכר שהוא ראה
בדיקת לחיצות – לבודק יש 5 שניות ללחוץ על העיצוב ולאחר מכן לאתר על מה הוא לחץ.

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

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