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

קארדקום הוא השירות שאני נעזר בו לסליקת אשראי ב-UXI בשנתיים האחרונות. יש בו כמה דברים שפשוט לא מובנים לי. אתם מוזמנים לקרוא למה. אם אתם מקארדקום – אתם מוזמנים לקחת, ליישם וליהנות ממשתמשים מרוצים יותר. לפחות משתמש אחד מרוצה יותר מובטח לכם ב-100% :)

עדכון 18/8/2013: אני שמח לעדכן שרבים מהליקויים שציינתי כאן תוקנו. משמח לראות שבקארדקום הקשיבו לדברים וטיפלו בהם.

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

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

מה עושים עם מערכת לסליקת אשראי?

היכולות שאני צריך ממערכת לסליקת אשראי כבעל עסק הן לא רבות:

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

זהו, פחות או יותר.

באופן די מרגיז, בכל אחד מהדברים האלה יש בעיות שמישות בסיסיות, שמפריעות להשתמש בשירות. למי שלא מכיר, שמישות זה התירגום לעברית של usability ולא שימושיות (usefulness).

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

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

עמוד תשלום

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

אפשר גם לראות את המסך המלא ללא מספרים

הנה הדברים שהפריעו לי. בעיגולים צהובים מצויינות בעיות משמעותיות שמומלץ לתקן ובאדומים בעיות חמורות שבעיני חובה לתקן בהקדם:

1. למה צריך כאן Dropdown? אין אפשרות לבחור שום דבר. סתם מציק בעין.

2. חסר מחיר יחידה. למשל, אם בוחרים כאן בכמות 3, במחיר כתוב 297 ש"ח.

3. הכותרת בקונטרסט נמוך מדי לרקע – קשה לקרוא אותה (אפילו לי) – זו בעיית נגישות.

4. מה זו התיבה הזו? הצצה ב-HTML הראתה שקוראים לה DivComments. לא מצאתי שום דרך להסיר אותה.

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

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

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

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

זה הסדר בטופס של קארדקום

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

• מספר כרטיס
• תוקף (חודש ואז שנה)
• 3 ספרות בגב הכרטיס
• שם בעל הכרטיס
• ת.ז. של בעל הכרטיס

זה הסדר בשאר העולם

איזו סיבה יש לערבב ככה בין השדות? זה שובר תבנית מוכרת מאוד ויוצר בלבול במקום כל-כך טריוויאלי ומוכר.

7. ב. האם באמת צריך את כל הרוחב הזה בשביל ת.ז., 3 ספרות ושם? היה אפשר להגדיר שניים או שלושה רוחבים שונים ועדיין להשאר עם מסך שנראה טוב. לא כל השדות צריכים להיות באותו הרוחב; יתרה מזו, רוחב השדה מרמז על כמות התוכן שצריך להזין בו.

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

8. א. בבחירת השנה אפשר לבחור עד 2021. האם באמת יש כרטיסים שנשארים בתוקף 9 שנים? אי אפשר להציג את השנה הנוכחית + 3 או 4 לכל היותר? או אולי לאפשר להקליד את השנה במלואה? יש סיכוי טוב שהקלדת 4 ספרות תיקח פחות זמן מסריקה של הרשימה הזו או לפחות תדרוש פחות מאמץ קוגניטיבי, שהוא המאמץ היקר ביותר.

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

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

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

הצעה לתיקון

כך אני הייתי מתכנן את החלק העליון מחדש אם הייתי במקום קארדקום:

פרטים נוספים – הערות והצעה לתיקון

זה מה שקורה בחלק התחתון:

יש כאן שלושה שדות:

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

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

היה הרבה יותר מוצלח להגיד "בצע תשלום" או "שלם עכשיו".

חיוב וזיכוי אשראי ידני (עסקאות טלפוניות)

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

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

אפשר גם לראות ללא מספרים.

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

ההערות שלי למסך הזה:

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

2. שימו לב לסדר המופלא של השדות כאן:

• מספר כרטיס
• סכום העסקה (למה כאן?)
• תוקף
• מס' תעודת זהות (לא חובה?)
• שם בעל הכרטיס (לא חובה?)
• סוג אשראי (למה באמצע הכנסת הפרטים?)
• מס' תשלומים (למה באמצע הכנסת הפרטים?)
• מספר CVV2 (לא חובה? למה כאן ולא אחרי תוקף?)

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

• הסכום לחיוב הוא 99 ש"ח.
• כמה תשלומים תרצי? אפשר עד 3 ללא ריבית.
• מה מספר הכרטיס?
• תוקף?
• 3 ספרות בגב הכרטיס?
• שם בעלת הכרטיס?
• מספר תעודת זהות?
• [שאלות לגבי חשבונית]
• אז זה 99 ש"ח ב-3 תשלומים ללא ריבית, אני מחייב את הכרטיס… העסקה אושרה, החשבונית בדרך אלייך!

בנוסף לסדר:

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

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

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

5. התוויות אמורות להיות משמאל לתיבות הסימון (checkboxes) ולא מימינן.

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

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

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

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

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

9. סדר השדות לא הגיוני, משתי סיבות:

א. הוא עובר מימין לשמאל, מלמעלה למטה, למרות שארגון השדות על המסך הוא בעמודות (ע"ע גשטאלט) ומרמז על סדר מלמעלה למטה ואז מימין לשמאל.

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

ג. זה די מעט מקום להערות.

10. כפתור "בצע עסקה" ממש קטן ביחס לחשיבות שלו.

כמו כן יש בעיות ביישורים ועוד עניינים שהזכרתי ביחס לעמוד הקודם.

הצעה לתיקון

הטופס היה צריך, לדעתי, להיראות כך (קליק להגדלה).

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

איתור חשבונית

לא פעם קורה שצריך לאתר חשבונית או תשלום מהעבר.

בקארדקום יש שתי אפשרויות חיפוש:

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

עזבו את זה שיש קו תחתון על הכותרת (למרות שזה לא קישור). יש פה כמה דברים הרבה יותר מוזרים.

אלה תסריטי השימוש הנפוצים, לפחות אצלי:

1. לקוח רוצה לקבל שוב חשבונית שנשלחה אוטומאטית מהמערכת.
2. לקוח רוצה לקבל זיכוי על עסקה שביצע בעבר. אנחנו רוצים לבדוק כמה בדיוק שילם ובאיזה כרטיס (4 ספרות אחרונות) לפני שמבצעים זיכוי.
3. אנחנו רוצים לאתר זיכויים או חיובים כחלק מהעבודת הנהלת החשבונות.

כל החיפושים שאני עשיתי במערכת בשנתיים האחרונות היו אחד מ-3 סוגים:

• כל העסקאות לפי סיומת כרטיס (תסריט 1/2) – הדרך הכי קלה למצוא את כל העסקאות של לקוח מסוים, כשהוא יודע באיזה כרטיס הוא השתמש (זה לא תמיד המצב).
• לפי שם על החשבונית / דוא"ל (תסריט 1/2) – לאותו מקרה כמו האפשרות הראשונה, אבל אי אפשר לעשות את זה כאן. צריך לייצא את כל הנתונים מטווח תאריכים לאקסל ולחפש שם.
• לפי תאריך/טווח + סכום/טווח (תסריט 1/2) – גם לאותו המקרה, אבל זו אפשרות ממש לא רצויה, במיוחד אם התאריך או הסכום לא ידועים. הכי גרוע זה כששניהם לא ידועים – יוצאות תוצאות רבות.
• לפי סוג עסקה + תאריך (תסריט 3) – די נדיר.

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

• לאפשר לחפש לפי שדות מהחשבונית. זה ממש הכרחי.
• להפריד כאן בין שדות חיפוש נפוצים (סכום, תאריך, סוג עסקה) לבין שדות נדירים יותר (כל השאר) ואולי להציג את הנדירים רק אם המשתמש מבקש – כמו advanced search שמוכר ממקומות אחרים.
  קוראים לעקרון הזה progressive disclosure, או חשיפה הדרגתית – לחשוף רק את מה שצריך בזמן שצריך אותו (התמונה המקושרת מתוך קלפים שחילקנו בכנס UXI Live 2011).
• להצמיד את "מסכום ל"עד סכום", אולי אחד מעל השני.
• ליישר שדות כמו שצריך, זה נראה קצת כמו ספגטי כרגע (בהשאלה מעולם הפיתוח).
• לשים את כפתור ה"חפש" שבקצה הטופס בצד ימין, מיושר לשדות הטופס. הכוונה לעקרון של מסלול ברור להשלמת הטופס. אולי גם להגדיל את הכפתור כפי שהצעתי למעלה.

סיכום

בכל מערכת צריך להשקיע זמן ומאמץ כדי ליצור חוויית משתמש טובה יותר. גם אם לא לוקחים איש UX/UI מנוסה כדי לבצע את העבודה, חשוב שמי שעושה אותה יבין מה הם תסריטי המשתמש העיקריים, יכיר כללי שמישות בסיסיים וידע גם איך ליישם אותם.

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

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