מי מפחד מדוחות ומספרים? על עיצוב חוויית משתמש נכונה

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

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

UX לאתרי אינטרנט

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

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

שליטה מעל הכל

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

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

גוגל אנליטיקס

המסך הראשי של גוגל אנליטיקס

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

מערכת CRM של מייקרוסופט

מסך הדשבורד של Microsoft CRM

מה הגישה שלך?

מסכי סיכום נתונים נחלקים לשלוש קטגוריות שונות:

1. דו”חות שמנגישים מידע ומקנים הרגשת בטחון במה נעשה.

2. דו”חות לחיזוי ותכנון עתידי.

3. דו”חות להשלמת וניהול משימות כדי להמנע ממצבי “שניה- אחרונה”.

המסך הראשי

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

עמוד הדו"חות של Marketo

עמוד הדו”חות של Marketo

זכרון לטווח קצר

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

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

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

1. השתמשו בגרפים ובתרשימים כדי לצמצם את התלות בזכרון לטווח קצר

הסתכלו בחטף על הטבלה כאן. אל תשקיעו יותר מ-6-7 שניות.

האם אתם יכולים להגיד באיזה חודש היתה ירידה במכירות? האם נרשמת מגמת עליה?

טבלה לדוגמא

בעזרת שימוש בגרף נוכל לדלות את הנתונים במהרה, להסיק מסקנות תוך כדי הסתכלות ולענות בתוך 2-3 שניות על שתי השאלות הקודמות.

טבלה 2

 2. צרו מסך סיכום עם ירידה לפרטים

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

מסך הדשבורד של בנק דיסקטונט

מסך הדשבורד של בנק דיסקטונט

3. חלקו לטאבים, ושימו את המידע במקום הנכון

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

מסך הדשבורג של לאומי קארד

מסך הדשבורג של לאומי קארד

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

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

דו”ח קל לשימוש

KISS זה לא רק שם של להקה אלא עיקרון שמנחה אותנו- Keep it simple, Stupid! העיקרון הזה עובד בעסקים ובעיצוב כמו גם בחיים האמיתיים. חשבו על המשתמש שלכם, איזה תהליכים הוא עובר, מה סדר הפעולות ואיזה מידע הוא רוצה ואיפה יהיה נכון למקם לו את המידע הזה. לאחר המיפוי חשבו על איזה מידע קשור אחד לשני, מה להציג בתוך כל מסך ואיך לגרום למשתמש להבין את מה שאנחנו רוצים להגיד בדרך הכי מהירה כדי שיוכל להסיק מסקנות ולפעול בהתאם. כנותני שירות חשבו על המשתמשים שלכם וזכרו שהם בני אדם בעלי חשיבה סיפורית ולא מספרית, שהם רוצים להבין איפה הם, מה קורה ואיך להסיק מסקנות בהתאם לנתונים שמוצגים להם.

קראו עוד: 16 סיבות שאנשים נוטשים את האתר שלך