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

השפעת הפקדים על חווית המשתמש באתר

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

פוסט זה מבוסס על הקורס “תכנון ועיצוב חווית משתמש” של טל פלורנטין (מומלץ מאד!)

ונתחיל בסרטון משעשע (Lifted by Pixar) :

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

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

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

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

רשימת הפקדים הנפוצה

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

List box תיבת בחירה – לפעמים יש אפשרות בחירה אחת בלבד ולפעמים יש יותר מאפשרות בחירה אחת, ישנן 2 דרכים לגלות זאת:

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

2. להתריע למשתמש על כך שיתן לבחור ביותר מאפשרות אחת:

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

Check box – כמו שאלת כן/ לא. חייב להיות פשוט מאד ולא יצירתי מדי. צריך שיהיה מנוסח בצורה חיובית. נהוג שה-V יהיה על כן כברירת מחדל.

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

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

כפתור vs קישור: לחיצה על כפתור היא הרבה יותר משמעותית מלחיצה על קישור: הגולש עושה החלטה מחושבת האם ללחוץ על submit, על send או על yes; קישור הוא הרבה יותר אינטואיטיבי, משמש כאמצעי ניווט ממקום למקום ברשת.

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

Toggle button – מדובר בכפתורי מצב הנחשבים לנגיש, ברורים יותר מבחינה ויזאולית ומאפשרים בחירה מהירה

Switch button – מאפשר בחירה קלה בין 2 אופציות שאחת מהן תהיה מסומנת בצורה ברורה. יש דגש על שמישות ונגישות.

** על כפתורי toggle/switch קל יותר ללחוץ במובייל.

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

יש לציין שתי נקודות משמעותיות:

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

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

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

• האם המשתמש יצליח להבין את תפקידם של הפקדים?
• האם המשתמש יידע למה לצפות כאשר לחץ על פקד כזה או אחר?
• האם המטרה של האתר שלכם מובן לגולש?

לפניי עליית האתר/האפליקציה לאוויר, בצעו בדיקת שימושיות על 5 נסיינים ובדקו האם הם מצליחים להבין את תפקידם של הפקדים והאם הם תאמו לציפיותיהם?