לפני כמה שבועות כתבתי כאן על הכפתור ששווה 300 מיליון דולר – על איך ששינוי בטופס ההרשמה לאתר מסחר ברשת הניב גידול עצום במכירות. הנקודה העיקרית של מי ששינה את עיצוב הטופס היתה, שלקוחות שבאים לקנות לא מעוניינים להירשם לאתר ולבנות איתו מערכת יחסים. הם רוצים רק לקנות, גם במחיר של מילוי חוזר של פרטים אישיים.
כשקניתי השבוע כרטיסים לפסטיבל ישראל, נתקלתי באותה הטעות לזאת שהיתה בטופס ההוא (לפני שתוקן), רק שבפסטיבל ישראל עשו את הטעות בגדול. מה זה בגדול, בענק!
כמה מילים על הפסטיבל
זה כבר כמה שנים שאני הולך למופעים בפסטיבל ישראל. מעבר למופעים עצמם, שרבים מהם מצויינים (אזכיר את "העיקר זה הרומנטיקה" הוותיק – יוני רכטר וחברים, ואת "דבקה פנטזיה" הנפלא שהייתי בו בשנה שעברה), יש גם אווירה נהדרת וכל מיני הופעות חינמיות כיפיות מחוץ לאולמות של תאטרון ירושלים.
קונים כרטיסים לפסטיבל
גם השנה החלטתי לקנות כרטיסים. ישבתי עם זוגתי ובחרנו ביחד מופעים ומושבים. תהליך בחירת הכרטיסים היה די מוצלח, אגב, אבל ספק אם הייתי מצליח להשלים אותו בלי החוברת המודפסת שנשלחה לי בדואר: אתר המידע של הפסטיבל די קשה ולא נוח לשימוש, ולעתים גם לא מאוד אסתטי.
אחרי שסיימתי עם בחירת הכרטיסים קיבלתי את מסך עגלת הקניות (זה לא המופע שבו בחרתי, אגב):
לחיצה על השלמת ההזמנה מביא למסך שבו מזינים פרטים אישיים.
יש במסך הזה אפשרות להזין כתובת אימייל וסיסמה, שהתעלמתי ממנה. לא זכרתי שקניתי דרך האתר ב-2008, ובכל מקרה – זה היה פסטיבל 2008, ועכשיו זה פסטיבל 2009, לא חשבתי שהפרטים שלי נשמרו, ולא רציתי להתחיל להתעסק עם האמייל. נראה היה שאפשר בזריזות להקיש את כל הפרטים שדרושים, וזה בדיוק מה שעשיתי.
שימו לב שאם עוקבים אחרי המסלול שהטופס מתווה (המסלול להשלמת הטופס – כתבתי עליו פה בפוסט קודם) מגיעים בקו ישר לכפתור "ניקוי", ולא ל"השלמת ההזמנה". היה רצוי להפוך את הסדר שלהם כדי לא להכשיל את המשתמשים בטופס, שפעמים רבות לוחצים פשוט על הכפתור הראשון שהעין רצה אליו, ולא קוראים בכלל מה כתוב עליו.
אחרי לחיצה על "השלמת ההזמנה" מגיעים למסך להזנת פרטי אשראי. הזנתי את הפרטים:
שימו לב, שבשלב הזה יש בידי האתר את כל הפרטים כדי לבצע את העסקה, כולל פרטי אשראי!אמנם רק 365 ש"ח, אבל עדיין עסקה (אותו הדבר קורה גם בעסקאות גדולות יותר, כמובן).
לוחצים על אישור, ומה מקבלים? אכזבה! מסך שגיאה:
מסתבר שלאתר שפסטיבל ישראל יותר חשוב שתכנסו לחשבון שלכם בצורה מסודרת, ולא תשלמו להם סתם ככה כמו פראי-אדם, מאשר לקחת מכם כסף. אז מה אם הפסטיבל קורה רק פעם בשנה – בבקשה לזכור את הסיסמה, או לבקש אותה כשאתם באים לקנות. מה זה, קרקס? זה פסטיבל תרבותי פה! כנראה שהכסף על הכרטיסים לא הולך למעצבי האתר…
בשביל להגיע ללינק "שכחתי סיסמה" ממסך השגיאה הזה, צריך לחזור לבד למסך של הפרטים האישיים, אין שום לינק אליו. תסתדרו לבד. אם כבר בוחרים לאלץ את המשתמשים להכנס לחשבון שלהם, כפי שנעשה כאן, היה אפשר כבר בנקודה הזאת (מסך השגיאה) לשלוח סיסמה בדואר אוטומטית, לתת למשתמש הודעה מתאימה ולאפשר לו להזין את הסיסמה שנשלחה בתוך חלון השגיאה עצמו.
הטעות הזאת לא עולה לפסטיבל 300 מיליון דולר, אני בטוח. סביר להניח שמי שכבר הצליח להזמין מהאתר, ימצא איפה ללחוץ "שכחתי סיסמה", ייכנס לחשבון ויזמין בכל מקרה. זה לא כאילו יש לו אלטרנטיבות, לפחות ברשת, זה האתר היחיד לכרטיסים לפסטיבל. אבל אולי כשיגיע להזמין בטלפון או במשרד כרטיסים (כי הוא לא הצליח באתר) לא יזכור את כל המופעים שמצא באתר, ויזמין פחות? וכמה כסף שווה התסכול שלו מהתהליך?
בכל מקרה, זאת דוגמא מצויינת לעיצוב שגוי שמונחה, כפי הנראה, משיקולי התוכנה (שדורשת לא ליצור שני חשבונות לאותה כתובת אימייל) ולא משיקולי חוויית השימוש באתר. מי שמבקר באתר הזה רוצה רק לשלם ולקבל אישור על הרכישה באימייל, ולא אכפת לו בכלל מהחשבון שלו באתר "פסטיבל ישראל". כל עוד הוא מקבל את הכרטיסים שלו, כל השאר לא חשוב.
אגב, את הכרטיסים עצמם, לפסטיבל ישראל 2009, אפשר לקבל רק בדואר או בקופה (ולא באימייל או באתר, למשל).
טיפים והמלצות
- אל תאלצו את המשתמשים להירשם לאתר שלכם כדי לקנות ממנו (או לכל פעולה אחרת) – המבקרים באתר רוצים רק לקבל את השירות שהוא מספק, ולא לבנות איתו קשר ארוך-טווח.
- תשתדלו לתת למשתמש אפשרות להזין את הפרטים הנחוצים ולהשלים את הפעולה, גם בלי להירשם לאתר.
- הרשמה לאתר נתפסת אצל רבים כנתינת פתח לאתר לשלוח דואר זבל (spam), ואף אחד לא מעוניין בזה. אם אתם מוכרחים לבצע רישום של המשתמש, הבהירו מוקדם ככל האפשר שלא תשתמשו בפרטים שלו לשליחת דואר זבל.
- לעוד טיפים בנושא הזה ועל עיצוב טפסים בכלל, בסדרת הפוסטים על עיצוב טפסים.
מאוד מענין, מבינה את התסכול שלך לחלוטין!
אני חושבת שהנקודה העוד יותר פשוטה של העימוד והצבע של הכפתורים תגרום להם עוד הרבה יותר נזק. בדיוק כמו שאמרת – אנשים לא קוראים, ובטח שהסתכלות על הצבעים כאן לא עוזרת (הכפתור הסגול? אני מבינה שזה נראה יפה, אבל מבחינה פונקציונאלית זה ממש לא עובד ). אני בטוחה שהמוני אנשים "ניקו" כשהתכוונו לאשר ולהמשיך.
במקרה כזה צריך לא רק לשים את האופציה החיובית וההמשכית ראשונה מימין, אלא צריך לתת לה הרבה יותר משקל ויזואלי. אני הייתי עושה את ה"אישור" כפתור, ואת השאר לינקים, או את האישור כפתור צבעוני ואת השאר כפתורים אפורים, משהו שיבהיר בצורה ויזואלית מה הדרך המהירה להמשיך הלאה. הרי זו המטרה.
תודה הדס, אני מסכים לגמרי. קראתי מחקר שעקב אחרי תנועת עיניים בטפסים, וגילה שלשים את כפתור הפעולה הראשית (כמו "שלח") בקו ישר עם זרימת השדות בטופס זה המקום הכי טוב; וזה אפילו הגיוני…
אותו מחקר גם גילה באופן מפתיע שלשים את הפעולה המשנית (כמו "בטל") בצמוד אליו בלי שום הבדל עיצובי או משקלי מביא לתוצאות המהירות ביותר, אבל שביעות הרצון הגדולה ביותר של המשתמשים (גם אם במחיר של מילוי טופס קצת איטי יותר) היתה כשעזרו להם לא לטעות, שוב – כמו שהצעת – כשיש לאופציה החיובית משקל ויזואלי גדול יותר.
אני עומד לכתוב על כל אלה בפוסט הבא שלי בסדרה על הטפסים, stay tuned!
:-D
אתמול הזמנתי כרטיסים דרך האתר של "קסטל" (www.tkts.co.il אגב, ברור שזו תהיה הכתובת של "קסטל"…) וגם שם יש את אותו המנגנון בדיוק…הוא אפילו נראה בדיוק אותו דבר (רק בצבע כחול ולא ורוד).
כנראה שאתה חברה שחשבה על העיצוב הגאוני של האתר של פסטיבל ישראל, עיצבה (באותה דרך לקויה) את האתר של "קסטל".
רועי.
נשמע שזה באמת ככה, רועי. הכותרת של אתר הכרטיסים של פסטיבל ישראל היא "אתר הבית של eSRO", והוא בכתובת http://www.tickets-online.co.il. בחיפוש בגוגל, גיליתי שגם הכותרת הראשית של הדרן היא "אתר הבית של eSRO". מחוכם…
עוד חיפוש העלה eSRO היא מערכת למכירת כרטיסים, והיא עומדת מאחורי רוב מכירת הכרטיסים בארץ – סינמה סיטי, הדרן, פסטיבל ישראל ועוד.
http://www.toptix.co.il/israel/products.htm#eSRO
הי ברק,
נראה לי שאני יודע מה גרם להם למקם את הכפתורים בצורה כזו, ולא להיפך. יש סטנדרט של מיקרוסופט שאומר שכפתור האישור אמור להיות משמאל, וכפתור הביטול מימין (http://msdn.microsoft.com/en-us/library/aa511453.aspx). השאלה היא האם זה תופס גם לממשקים בעברית, וכאן הדעות חלוקות. אותי למשל מאוד מעצבן כשהופכים לי את הממשק ושמים את כפתורי השליטה על החלון (כפתורי ה-X) בצד שמאל (שלא נדבר על progress bar שמתמלא מימין לשמאל). אבל עם כפתורי אישור-ביטול זה פחות מורגש. בכל מקרה, לדעתי הם פשוט הלכו לפי המקובל בממשקים באנגלית, ואז מירכזו אופקית את הכפתורים. לכן אני לא בטוח שהייתי הופך את הסדר, אבל כן הייתי מנסה לשים אותם בצד ימין של הדף, ואז כפתור אישור היה נופל בדיוק בקו תחילת השדות.
הי ויטלי,
הסטנדרט שאתה מתאר הוא עבור אפליקציות דסקטופ בחלונות. במק הסטנדרט הוא הפוך. זו אגב גישה הרבה יותר הגיונית, לדעתי: הסריקה של הדף בקריאה באנגלית מתבצעת מהפינה השמאלית למעלה לכיוון הפינה הימנית למטה, ולכן הגיוני לשים את הפעולה הראשית של הדיאלוג בנקודה האחרונה שבה העין נתקלת – הפינה הימנית למטה. כך בדיוק נעשה במק.
אז מה נכון ב-WEB? הכללים האלה (עד כמה שזה מצער שאין סטנדרט), לדעתי, פחות תופסים. מה גם שמדובר בטופס על דף, ולא בדיאלוג מודאלי כמו שהחוק של מייקרוסופט מתאר. אפילו נניח שזה דיאלוג מודאלי, למי תתאים אותו, למקיסטים או לחלונאים? בסופו של דבר צריך לבחור עיצוב אחד, ואני הייתי הולך על זה שמאפשר לעבוד בצורה הכי אינטואיטיבית ומהירה. בטפסים נראה שהעיצוב שמקיים את זה הוא פשוט להניח את הכפתור הראשי בקצה "קו הזרימה" של הטופס, כלומר בהמשך לקו של השדות בטופס.
לגבי ממשק עברי, אני מסכים איתך שלמי שרגיל לעבוד בממשק אנגלי, ממשק עברי הוא הפוך ומעצבן. הוא יוצר דיסאוריינטציה. אבל למי שרגיל לעבוד עם מערכת הפעלה בעברית, ההיפך הוא הנכון. אפשר אולי להתחמק מהתלבטות כזאת עם progress bar, למשל, בעזרת תצוגה שהיא לא כיוונית, כמו ריבוע שמתמלא מלמטה למעלה, או rotator (החיצים/נקודות המסתובבים האלה שיש בכל אתר) שכתוב לידו כמה אחוזים הושלמו.
הנה משהו אקראי על חוק גוטנברג:
http://churchcrunch.com/2009/04/07/gutenberg-your-blog/
דרך אגב קראתי איפשהוא שהסיבה שבמק האישור הוא משמאל והשלילה היא מימין היא מסיבה היסטורית- הם ניסו לחקות את הפעולה של להעביר דף בספר , שנעשית מהקצה של הדף (באנגלית – ימין למטה) ולא לפי הזרם של הטופס.
הי הדס,
האישור במק הוא דווקא בצד ימין, והשלילה משמאל. הסיבה שציינת עדיין נשמעת הגיונית – ליד קצה הדף הימני בספר, זה שהופכים כדי לקרוא הלאה.
לא שמעתי את ההסבר הזה, מעניין! :-)
מזכיר את האגדה האורבנית (המופרכת לחלוטין, בניגוד לזו שלך) על רוחב מסילות הרכבת בארה"ב שנקבע לפי רוחב מרכבת מלחמה רומאית.
הנה דוגמא שגנבתי, של דיאלוג במק:
טעיתי בכיוונים אבל הכוונה הובנה :-)
אני אנסה למצוא את המקור לסיפור. אני חושבת שהוא היה מהימן, אבל זה באמת כבר היה מזמן.
שלום ברק,
התחלתי לאחרונה עבודה כמפתח ווב (להבדיל מעברי כמפתח דסקטופ) וכמי שנדרש פתאום למעבר חד לעולם עתיר ממשקי משתמש נזכרתי בבלוג שלך. אני מוכרח לומר שאני מאד נהנה ממנו ואני שואב מתוכו הרבה מידע שימושי.
תודה,
אסף.
אהלן אסף,
קודם כל ברכות על העבודה החדשה! מקווה שתהנה מהשינוי בעיסוק.
תודה – התחלתי את הבלוג במטרה לתת מידע שיעזור לעוסקים בתחום, אני שמח כשזה מצליח. אתה מוזמן להצטרף גם ב-RSS או באימייל.