UXtasy
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
UXtasy
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
ניתוח תהליך סגירת טאבים בדפדפנים שונים
ראשי » על חוויית משתמש » ניתוח תהליך סגירת טאבים בדפדפנים שונים

ניתוח תהליך סגירת טאבים בדפדפנים שונים

פברואר 16, 2010 15 תגובות

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

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

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

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

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

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

firefox tabs with changing width
העכבר מגיע לאמצע הטאב החדש, מלבד מצב של סגירת טאב אחרון

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

firefox tabs with fixed width
העכבר נמצא מימין לטאב האחרון החדש

מה שמחמיר את המצב עוד, זה כל מיני משחקים שהדפדפנים עושים עם הטאבים וכפתורי ה-X. יש כאלה שמציגים את ה-X רק כשהטאב בפוקוס (IE8), יש כאלה שמציגים אותם רק כשהטאב ב-mouseover (ספארי), ויש שמשתדלים להציג אותו כל עוד המקום מאפשר (אופרה וכרום – והם גם אלה שממשיכים עם צמצום הטאבים הכי הרבה – בכרום הטאבים ממשיכים לקטון עד שיש כמאה טאבים, ואז רוחבם הופך לקבוע, וזה נראה בערך ככהgoogle chrome with many many many tabs:

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

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

זאת כל עוד משתמשים בפיירפוקס (המחשה למעלה), באקספלורר

IE8 tabs with changing width

באופרה

Opera tabs with changing width

ובספארי

Safari tabs with changing width

אבל לא בכרום! האנשים הטובים מגוגל המציאו לנו טאבים קסומים!

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

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

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

Chrome tabs with changing width
(העכבר תמיד נמצא במקום הנכון (פתגם סיני עתיק

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

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

אפל גוגל חוויית משתמש מיקרוסופט עיצוב עיצוב טוב פיירפוקס
« הקודם
הבא »
15 תגובות
  1. רן לירון פברואר 16, 2010 בשעה 23:40 הגב

    וואאו.
    השקעת הרבה זמן ומחשבה בנושא כל כך סגור. (-;

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

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

  2. Vitaly Mijiritsky פברואר 17, 2010 בשעה 4:45 הגב

    תודה רן 🙂

    רגע, אבל מה אם אני רוצה להשאיר שני טאבים פתוחים? 🙂

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

  3. ברק דנין פברואר 17, 2010 בשעה 5:47 הגב

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

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

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

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

  4. אריה ביב פברואר 17, 2010 בשעה 6:58 הגב

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

    • Vitaly Mijiritsky פברואר 17, 2010 בשעה 18:01 הגב

      תודה אריה!

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

  5. פינגווין מגורש פברואר 17, 2010 בשעה 10:03 הגב

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

    • Vitaly Mijiritsky פברואר 17, 2010 בשעה 18:07 הגב

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

  6. עמרי אליאב מרץ 30, 2010 בשעה 11:40 הגב

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

  7. Vitaly Mijiritsky מרץ 30, 2010 בשעה 20:09 הגב

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

  8. התנועה כפתרון « UXtasy אפריל 1, 2010 בשעה 4:05 הגב

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

  9. נתבאג « UXtasy אפריל 28, 2010 בשעה 21:05 הגב

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

  10. רוני אפריל 30, 2010 בשעה 14:17 הגב

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

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

    מישהו במקרה מפתח Chromium שרוצה ליישם את זה בגרסה הבאה? 😉

  11. נתבאג « UXtasy יוני 26, 2010 בשעה 11:29 הגב

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

  12. הפוסט עם הציטוט של דאגלס אדאמס « UXtasy ינואר 15, 2011 בשעה 17:55 הגב

    […] ולבלוג יש מסורת: מדי פעם אני מפרסם בו ניתוח UI ממש משעמם. ליתר דיוק, לפעמים אני עושה את זה בצורה מודעת. הפעם […]

  13. אלעד ינואר 7, 2022 בשעה 13:07 הגב

    ממש נכנסת לעובי הקורה

השארת תגובה

ביטול

ux_by_examples

www.bit.ly/uxbe8

מערכת המדיה של אל-על היא ברו מערכת המדיה של אל-על היא ברורה, אינטואיטיבית, חדשנית, לא מפרה שום כלל יואקסי חשוב, ו... בלתי ניתנת לשימוש בעליל. ויש מצב שאפילו עברה בדיקות שמישות. דברים שקורים בשמיים.
חג ח(פי)רות שמח חברים! חג ח(פי)רות שמח חברים!
Follow on Instagram
ויטלי מיז'יריצקי

מנהל, חוקר ומאפיין חוויית משתמש, עוסק בתחום משנת 2006 וכותב עליו מ-2007.

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

ממייסדי UXI -- חוויית משתמש ישראל.

מנטור UX ב-Google for Startups.

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

יצירת קשר
UXtasy
עדכונים באימייל

uxtasy.com © כל הזכויות שמורות.
We WordPress
גלילה לראש העמוד