למה כפתור ה-START נמצא בפינה של המסך? למה במקינטוש התפריטים נמצאים בראש המסך? למה לתפריטי משנה ב-Windows לוקח זמן להפתח ולהתחלף?

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

החוק

הזמן הנדרש להשיג מטרה הוא פונקציה של המרחק אל המטרה והגודל שלה.

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

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

שב בפינה ותחשוב על מה שעשית

פעם היה מקובל להעניש ילדים בבי"ס בישיבה בפינה של הכיתה (עדיין עושים את זה?)

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

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

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

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

אפשר תפריט?

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

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

אז למה לא העתיקו את ההתנהגות הזאת ב-Windows? לפי Tog (בשאלה 5 בקישור), היו לפחות שתי סיבות טובות: פטנטים ש-Apple רשמה על זה, והדעה הרווחת שלקרב את התפריט לאיזור שבו המשתמש עובד, כלומר לחלון, תאיץ את העבודה שלו. הקישור הזה, אגב, מכיל עוד הרבה מידע מעניין על חוק פיטס.

תפריטי משנה

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

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

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

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

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

שיעורי בית (חומר לקריאה)

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

• ויקיפדיה – בתחתית הערך יש גם קישורים לעוד הרבה מקומות.
  

• מילון המונחים של AskTog – חפשו את Fitt, הוא נמצא שם איפשהו.
  

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

המלצות לסיכום

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

רוצים ללמוד עוד?

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

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

לפרטים נוספים והרשמה