UXtasy
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
UXtasy
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
  • ראשי
  • UX בישראל
  • אודות
  • צרו קשר
ראשי » עיצוב (עמוד 3)

עיצוב

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

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

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

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

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

חיוויים בתעופה

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

Kulula jet

Kulula jet

Kulula jet

(c) shanairpic
פברואר 6, 2010 אין תגובות

מוטיבים קולינריים בממשקי משתמש

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

ובכן, מסתבר שהמזוודה המכילה את קודי ההפעלה של הנשק הגרעיני האמריקאי נקראת Nuclear Football ושוקלת 18 קילו. יש איזה קצין מסכן שתמיד סוחב אותה לצד הנשיא. לפי עדותו של מנכ"ל לשעבר של המשרד הצבאי בבית הלבן, המזוודה מכילה ספרון קטן עם פירוט אפשרויות התגובה הגרעינית (זה נועד רק למצבי תגובה למתקפת פתע מצד הסובייטים), רשימה של אתרים מסווגים, כמה דפים המפרטים את התהליכים הנדרשים, וכרטיס עם קודי האימות. אה, ויש גם משדר. בעמוד שמפרט את אפשרויות התגובה, האפשרויות מודגשות באדום ומסומנות ע"י התוויות Rare, Medium, Well Done.

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

פברואר 6, 2010 תגובה אחת

Grooveshark

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

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

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

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

עוד אלמנט מעניין באתר הוא תיבת המידע על השיר המתנגן כעת. הוא נראה כך:

גרובשארק - מידע על שיר

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

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

ינואר 2, 2010 4 תגובות

עיצוב לוגואים

הנה התפרסם לו הלוגו הרשמי של המשחקים האולימפיים של שנת 2012 בלונדון.

לוגו המשחקים האולימפיים 2012

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

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

נובמבר 26, 2009 אין תגובות
  • 1
  • 2
  • 3

ux_by_examples

www.bit.ly/uxbe8

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

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

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

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

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

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

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

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