חוקי ה-UX: מדריך מעשי לאתרים ולאפליקציות

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

כאן אני לוקח את הכיוון ההפוך. בחרתי את החוקים שבאמת משנים את חוויית המשתמש, ולכל אחד הוספתי מה לעשות איתו במוצר אמיתי, כבר היום. הרשימה המלאה והמסודרת של כל החוקים מתועדת יפה ב-lawsofux.com של 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)

המחשה מופשטת לחוק פיטס, מטרות גדולות וקרובות קלות יותר ללחיצה

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

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

סף דוהרטי (Doherty Threshold)

המחשה מופשטת לסף דוהרטי, תגובה מתחת ל-400 מילישניות שומרת על זרימה

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

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

קבוצה 4: איך העין מארגנת את העמוד (עקרונות גשטלט)

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

חוק הקרבה (Law of Proximity)

המחשה מופשטת לחוק הקרבה, פריטים סמוכים נתפסים כקבוצה

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

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

חוק האזור המשותף (Law of Common Region)

המחשה מופשטת לחוק האזור המשותף, גבול משותף מקבץ פריטים

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

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

חוק הדמיון (Law of Similarity)

המחשה מופשטת לחוק הדמיון, פריטים דומים נתפסים כקשורים

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

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

אפקט פון רסטורף (Von Restorff Effect)

המחשה מופשטת לאפקט פון רסטורף, הפריט השונה בולט ונזכר

כשיש כמה פריטים דומים, זה שבולט מכולם הוא זה שייזכר. קוראים לזה גם “אפקט הבידוד”.

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

קבוצה 5: זיכרון, רגש, והרושם שנשאר

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

אפקט האסתטיקה-שמישות (Aesthetic-Usability Effect)

המחשה מופשטת לאפקט האסתטיקה-שמישות, עיצוב נקי נתפס כשמיש יותר

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

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

כלל השיא-וסיום (Peak-End Rule)

המחשה מופשטת לכלל השיא-וסיום, זוכרים את הרגע החזק ואת הסוף

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

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

אפקט המיקום הסדרתי (Serial Position Effect)

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

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

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

אפקט מפל-המטרה (Goal-Gradient Effect)

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

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

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

חוקים הם הנחיות, לא חוקים

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

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

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