RSS לפוסטים RSS לתגובות 228 מאמרים ו- 1,989 תגובות עד כה מאז 2005

מחשבות על ממשקים עגולים בעקבות גוגל פלוס

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

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

עיגולים ורגש

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


ממשק עגול קלאסי שנכחד עם השנים והקידמה

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


עדיין פופולארי

ממשקים עגולים כאמצעי תצוגה

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

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

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

ממשקים עגולים כאמצעי ניווט

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

לסיכום

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

17 תגובות על “מחשבות על ממשקים עגולים בעקבות גוגל פלוס”

  1. 01/07/2011 בשעה 20:22 מאור

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

    (אני מחכה לטוקבקיסט התורן שיכתוב "אני שיננתי את כל קיצורי המקלדת וזה לוקח לי שניה")

    אמיר, מה דעתך על הממשק הזה?

  2. 01/07/2011 בשעה 21:34 איתן אבגיל

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

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

  3. 01/07/2011 בשעה 23:45 יניב

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

  4. 01/07/2011 בשעה 23:56 אמיר דותן

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

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

    יניב, לאיזו מיכל אתה מתייחס? :)

  5. 02/07/2011 בשעה 1:49 שמוליק

    פעם היה לי העונג המפוקפק להתנסות בממשק של טלפון נוקיה עם מקשים מסודרים במעגל.
    חסר כל הגיון פנימי, סתם מנגן על הנוסטלגיה. מיותר.
    http://images.techtree.com/ttimages/story/nokia-3650.jpg

  6. 02/07/2011 בשעה 10:46 Offir

    That was very interesting Amir.
    I do see one usable advantage to some circular UIs. When they serve as contextual menus the mouse pointer is equally far from every menu item, essentially minimising mouse movements.
    It may also have some advantage in in touchscreens where you can utilize the space around the finger or hand more efficiently and reduce the fat-finger effect.
    such has been showcased here http://iphone.iusethis.com/screenshot/iphone/mobileterminal.png (Don't let the rectangular shapes fool you, it is a circular menu)
    and here
    http://www.youtube.com/watch?v=JfFwgPuEdSk&feature=related

    While you have argued mainly for the case of circular display interfaces, excluding the phone which is both display and control, I think it is worth mentioning that circular controls have won some wide popularity as as the iPod touch-wheel and the control wheel in SLR cameras, interesting to see how both map a circular control over a linear menu system.

  7. 02/07/2011 בשעה 11:14 אמיר דותן

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

  8. 02/07/2011 בשעה 18:08 NY

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

  9. 02/07/2011 בשעה 22:43 שושו

    אפשר להוסיף לרשימה את ממשק המשתמש המיוחד של Emblaze Else, שהתכוון לנצל את ה"רדיוס של האגודל" לשליטה "עגולה".
    http://www.youtube.com/watch?v=FjIFLAkvv1Q&feature=related
    מעניין אם מישהו ינסה לממש את היכולות האלו במערכות הפעלה "אמיתיות" כמו אנדרואיד, למשל…

  10. 02/07/2011 בשעה 22:54 אמיר דותן

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

  11. 03/07/2011 בשעה 14:42 שגיא

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

  12. 03/07/2011 בשעה 14:48 אמיר דותן

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

  13. 03/07/2011 בשעה 15:28 עדי

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

  14. 04/07/2011 בשעה 0:21 אסף

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

    אנלוגיה נוספת מעולם המכוניות היא שימוש בהגה עגול (אנלוגי) על פני ג'ויסטיק/לוח מקשים (דיגטלי). כיצד הייתה חווית הנהיגה אם היינו מתפעלים במונחים של 1 (ימינה) 0 או 1- (שמאלה) – דימוי של לוח מקשים.

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

  15. 04/07/2011 בשעה 0:40 אמיר דותן

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

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

  16. 04/07/2011 בשעה 13:12 דפנה

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

  17. 04/07/2011 בשעה 13:23 אמיר דותן

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

RSS לתגובות לפוסט זה

הוספת תגובה