חוקי ה-UX: מדריך מעשי לאתרים ולאפליקציות
אם אתם עוסקים בעיצוב או בבניית אתרים ואפליקציות, כנראה שכבר שמעתם על “חוקי UX”, חוק פיטס, חוק היק, כל החבורה. הם מופיעים כמעט בכל מצגת על חוויית משתמש, ולרוב נשארים שם: נחמד לדעת, פחות ברור מה עושים עם זה בפועל.
בחרתי עקרונות שאני חוזר אליהם בעבודה, ולכל אחד הוספתי דרך מעשית לבחון ממשק. הרשימה הרחבה מתועדת בLaws of UX של Jon Yablonski (נפתח בלשונית חדשה). כאן ריכזתי את אלה שאני משתמש בהם בפועל.
עוד דבר אחד לפני שמתחילים: חוקי UX הם הנחיות, לא חוקים שאסור לשבור. הם עוזרים לכם לחשוב, לא מחליפים את החשיבה. נחזור לזה בסוף.
בקצרה
- הורידו עומס: פחות אפשרויות, פחות רעש, מידע ביחידות קטנות.
- כבדו את המוכר: אל תמציאו מחדש איך אתר מתנהג.
- הקלו על כל פעולה: מהירות, יעדים גדולים ומשוב מיידי.
- ארגנו את העין: מרווח, גבול ודמיון מקבצים את העמוד (עקרונות גשטלט).
- תכננו מה שנשאר: השיא, הסוף והקצוות הם מה שזוכרים.
מה זה בעצם “חוקי UX”?
חוקי UX הם עקרונות מתוך הפסיכולוגיה הקוגניטיבית ותורת העיצוב שעוזרים לחשוב על תפיסה, החלטות ועומס. הם נותנים השערות טובות לתכנון ולבדיקה, אבל אינם מחליפים מחקר משתמשים או בדיקות שימושיות.
חילקתי אותם לחמש קבוצות, ואני מתחיל מזו שהכי חשובה.
קבוצה 1: להוריד עומס מהמשתמש
יותר מכל דבר אחר, מה שהורס חוויית משתמש זה פשוט יותר מדי, יותר מדי אפשרויות, יותר מדי מידע, יותר מדי רעש. שלושת החוקים האלה הם ההגנה הכי חשובה שלכם מפני זה, ולכן הם פותחים.
חוק היק (Hick’s Law)
ככל שיש יותר אפשרויות, לוקח יותר זמן להחליט ביניהן. כל אפשרות נוספת היא עוד רגע של התלבטות, והרבה אפשרויות ביחד פשוט משתקות.
מה לעשות בפועל: קצרו וקבצו את התפריט לפי המשימות המרכזיות. הגדירו פעולה ראשית ברורה ותנו לפעולות משניות משקל נמוך יותר. חוק היק אינו קובע מספר קבוע של פריטים; המספר המתאים תלוי בתוכן ובקהל.
חוק מילר (Miller’s Law)
זיכרון העבודה מוגבל, אבל אין מספר קסם שמתאים לכל ממשק. המסקנה המעשית היא לקבץ מידע ליחידות בעלות משמעות ולהציג אותו בהדרגה, תהליך שנקרא chunking.
מה לעשות בפועל: פרקו טקסט ארוך לכותרות, פסקאות קצרות ורשימות, במקום קיר אחד של מלל. הציגו מאמרים בארכיון בקבוצות. פצלו טפסים ארוכים לשלבים. אפילו מספר טלפון קל יותר לקריאה כשהוא מחולק (050-123-4567) ולא רצף ספרות אחד.
עומס יתר של בחירה (Choice Overload)
כשנותנים לאנשים יותר מדי אפשרויות, הרבה מהם פשוט לא בוחרים בכלל. זה קרוב לחוק היק, אבל התוצאה כאן רגשית יותר: לא רק האטה, אלא ויתור ונטישה.
מה לעשות בפועל: מספר קטן של כפתורי שיתוף רלוונטיים עדיף על רשימה ארוכה. סרגל צד ממוקד עדיף על ערימת וידג’טים. בסוף מאמר, הציעו מעט קריאות המשך שנבחרו לפי ההקשר. ככל שהבחירה חשובה יותר, נקו את מה שמסביבה.
קבוצה 2: לכבד את מה שהמבקר כבר מכיר
המוח אוהב את המוכר. בכל פעם שאתם מכריחים מבקר ללמוד מחדש איך עובד אינטרנט, אתם גובים ממנו אנרגיה. שני החוקים האלה הם על לא להמציא את הגלגל.
חוק יאקוב (Jakob’s Law)
אנשים מבלים את רוב הזמן שלהם באתרים אחרים, לא שלכם. הם מגיעים אליכם עם ציפיות מוכנות, ומצפים שהאתר שלכם יתנהג כמו כל מה שהם כבר מכירים. מקוריות במקומות הלא נכונים רק מבלבלת.
מה לעשות בפועל: לוגו בפינה העליונה שמחזיר לדף הבית. תפריט במקום שמחפשים אותו. חיפוש איפה שמצופה שיהיה. קישור שנראה כמו קישור. ובעברית, ניווט וזרימה מימין לשמאל, כי זו הציפייה הטבעית של הקורא.
חוק טסלר (Tesler’s Law)
לכל מערכת יש כמות מורכבות שאי אפשר להעלים. אפשר רק להחליט מי יתמודד איתה, אתם או המשתמש. מערכת טובה לוקחת על עצמה את הסיבוך ומשאירה למשתמש את החלק הפשוט.
מה לעשות בפועל: ברירות מחדל חכמות, השלמת כתובת וחיפוש שסובל שגיאות כתיב יכולים לחסוך עבודה. ברירת מחדל שמבוססת על מיקום או זיהוי אוטומטי חייבת להיות גלויה וקלה לשינוי, מפני שהמערכת עלולה לטעות.
קבוצה 3: להפוך כל פעולה לקלה ומהירה
עד כאן דיברנו על חשיבה. עכשיו על הגוף, האצבע שלוחצת והעין שמחכה.
חוק פיטס (Fitts’s Law)
הזמן שלוקח להגיע ליעד תלוי בגודל שלו ובמרחק אליו. יעד גדול וקרוב קל ומהיר ללחיצה; יעד קטן ורחוק מתסכל, במיוחד עם אצבע על מסך נייד.
מה לעשות בפועל: בפרויקט הזה אנחנו מכוונים ליעדי מגע של 44px. זה מעבר למינימום AA של WCAG 2.2 ומתאים במיוחד לפעולות מרכזיות במובייל. אפשר לקרוא את ההסבר הרשמי על Target Size (נפתח בלשונית חדשה). אם לכרטיס יש יעד יחיד, אפשר להרחיב את אזור הלחיצה; אם יש בו כמה פעולות, אל תהפכו את כולו לקישור אחד.
סף דוהרטי (Doherty Threshold)
כשמערכת מגיבה למשתמש בפחות מ-400 מילישניות, שניהם נשארים בקצב: המשתמש לא מתנתק והעבודה זורמת. מעבר לסף הזה, תשומת הלב מתחילה לברוח.
מה לעשות בפועל: מדדו את האתר בPageSpeed Insights (נפתח בלשונית חדשה), התאימו תמונות ובדקו את שכבות הקאש בוורדפרס. לצד המהירות, תנו משוב מיידי על פעולות כמו שליחת טופס או הוספה לסל, וחיווי טעינה כשאי אפשר להשלים פעולה מיד.
קבוצה 4: איך העין מארגנת את העמוד (עקרונות גשטלט)
לפני שהמבקר קורא מילה אחת, העין שלו כבר החליטה מה שייך למה. עקרונות הגשטלט הם הכללים של ההחלטה הזאת, והם מהכלים הכי שימושיים שיש לכם לעיצוב עמוד.
חוק הקרבה (Law of Proximity)
אובייקטים שקרובים זה לזה נתפסים כקבוצה אחת. מרווח הוא לא סתם אוויר, הוא אומר לעין מה הולך עם מה.
מה לעשות בפועל: הצמידו כותרת לפסקה שמתחתיה, והרחיקו אותה מהפסקה שמעליה, כדי שיהיה ברור לאיזה תוכן היא שייכת. הצמידו תווית טופס לשדה שלה. ואל תיתנו לכל הרכיבים מרווח זהה, היררכיה של מרווחים היא חצי מהעיצוב.
חוק האזור המשותף (Law of Common Region)
פריטים שחולקים גבול או רקע משותף נתפסים כקבוצה, גם אם הם רחוקים. הגבול חזק אפילו יותר מהקרבה.
מה לעשות בפועל: כרטיס מאמר שאוסף תמונה, כותרת ותאריך לתוך רקע או מסגרת אחת נקרא כיחידה. גם תיבת סיכום או קבוצת שדות בטופס יכולות לקבל אזור משותף שמבהיר מה שייך למה.
חוק הדמיון (Law of Similarity)
העין תופסת פריטים שנראים דומים, באותו צבע, צורה או גודל, כקשורים זה לזה. עקביות ויזואלית היא לא קישוט, היא שפה שהמבקר לומד.
מה לעשות בפועל: תנו לקישורים מראה עקבי, למשל קו תחתון וצבע הדגשה קבוע. כל הכפתורים מאותו סוג צריכים להיראות קשורים. אל תשתמשו באותו טיפול בטקסט שאינו לחיץ, אחרת הממשק מלמד ציפייה שגויה.
אפקט פון רסטורף (Von Restorff Effect)
כשיש כמה פריטים דומים, זה שבולט מכולם הוא זה שייזכר. קוראים לזה גם “אפקט הבידוד”.
מה לעשות בפועל: תנו לפעולה הראשית טיפול מובחן ושמרו את צבע ההדגשה לרכיבים שבאמת צריכים תשומת לב. אם הכול מודגש, ההדגשה מאבדת משמעות.
קבוצה 5: זיכרון, רגש, והרושם שנשאר
החוקים האחרונים עוסקים לא ברגע עצמו, אלא במה שנשאר, מה המבקר ירגיש ויזכור אחרי שיעזוב.
אפקט האסתטיקה-שמישות (Aesthetic-Usability Effect)
אנשים תופסים עיצוב יפה כקל יותר לשימוש, ואפילו סולחים לו על תקלות קטנות. היופי לא רק נעים לעין, הוא משנה את ההרגשה של כמה הדבר באמת עובד.
מה לעשות בפועל: השקעה בטיפוגרפיה, במרווח ובהיררכיה היא חלק מהשימושיות. באתר הזה התחושה נוצרת מרוחב קריאה מוגבל, טיפוגרפיה ברורה ומרווח עקבי. הוא בנוי ב-Astro, והבחירות החזותיות משרתות את הקריאה. עיצוב נעים יכול לשפר את הרושם, אבל אינו מתקן פעולה מבלבלת או תוכן לא ברור.
כלל השיא-וסיום (Peak-End Rule)
אנשים זוכרים חוויה לפי שני רגעים: השיא שלה והסוף שלה, לא לפי הממוצע. ולסוף יש משקל גדול במיוחד.
מה לעשות בפועל: סיימו מאמר בסיכום או בצעד המשך שימושי. אחרי שליחת טופס או השלמת רכישה, אשרו מה קרה ומה אפשר לעשות עכשיו, במקום להציג רק OK.
אפקט המיקום הסדרתי (Serial Position Effect)
אנשים זוכרים הכי טוב את הפריט הראשון והאחרון ברשימה, ופחות את מה שבאמצע.
מה לעשות בפועל: כשמסדרים רשימה, בדקו אילו פריטים מופיעים בתחילתה ובסופה. בניווט, סדרו קודם לפי המשימה והמודל המנטלי של המשתמש, ורק אחר כך לפי אפקט הזכירה. אל תעבירו קישור לקצה רק כדי שיבלוט.
אפקט מפל-המטרה (Goal-Gradient Effect)
ככל שמתקרבים למטרה, גובר הרצון להשלים אותה. כשרואים שהסוף קרוב, קל יותר להתאמץ עוד קצת.
מה לעשות בפועל: חיווי התקדמות בטופס מרובה שלבים (“שלב 2 מתוך 3”). פס התקדמות קריאה במאמר ארוך. בתהליך רכישה, הראו כמה נשאר. אפשר אפילו לתת התחלה קטנה במתנה, לסמן את השלב הראשון כבר כמושלם, כי עצם תחושת ההתקדמות דוחפת קדימה.
חוקים הם הנחיות, לא חוקים
עכשיו הדבר שהבטחתי בהתחלה, ואולי הכי חשוב כאן. אפשר ליישם את כל החוקים שלמעלה ועדיין לקבל אתר עם חוויית משתמש גרועה. הם נקודת התחלה לחשיבה, לא תחליף לה. ההקשר תמיד מנצח את הכלל:
- לפעמים דווקא צריך יותר אפשרויות, לא פחות. משתמש מנוסה שמכיר את המערכת רוצה את כל הכלים גלויים לפניו, לא חבויים בתפריטים, חוק היק פחות נוגע אליו.
- לפעמים חיכוך הוא דבר טוב. בקשת אישור לפני מחיקה היא חיכוך מכוון, ואתם רוצים אותו שם. לא כל הקלה היא שיפור.
- ולפעמים שבירה של חוק היא הבחירה הנכונה. מקוריות במקום הנכון היא מה שגורם לאתר להישאר בזיכרון; חוק יאקוב לא אומר לכם להיות משעממים.
ככה אני משתמש בחוקים האלה: כעדשה להסתכל דרכה על המוצר, לא כרשימת סימון. כשמשהו בעמוד מרגיש לא נכון, אני עובר עליהם ושואל איזה חוק נשבר כאן, ובדרך כלל אחד מהם מסביר בדיוק מה מפריע. אבל המבחן האמיתי הוא תמיד מבקר אמיתי, לא הרשימה.
תגובות
טוען תגובות…