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

תבניות עיצוב – שימושיות אך אינן פתרון קסמים שיבטיח רמת שמישות גבוהה

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

סביר להניח שמישהו כבר חשב על פתרון לבעיה

המונח Design Patterns מזוהה בעיקר עם ארכיטקטורה ותיכנות מחשבים אך כיום מדובר גם במרכיב חשוב בעבודתו של המאפיין ומעצב הממשקים. ישנם מספר מקורות המכילים תבניות עיצוב לממשקי משתמש כמו האתרים Pattern Tap, Yahoo! Developer Network ו-Welie אך המרשים ביותר שיצא לי להיתקל בו עד היום הוא Quice – יישום סילברלייט המאפשר חיפוש תבניות בדרכים שונות.

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

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

פתרון אינטאקציה אינו יכול לפתור בעיות אחרות

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


אוסף תבניות עיצוב מתוך האתר quince.infragistics.com

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

ראייה כוללת

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

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

11 תגובות על “תבניות עיצוב – שימושיות אך אינן פתרון קסמים שיבטיח רמת שמישות גבוהה”

  1. 27/02/2009 בשעה 7:55 ויטלי

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

  2. 27/02/2009 בשעה 13:12 אמיר דותן

    אני מסכים ויטלי. שימוש מעניין שהצליח להפתיע אותי. מה שנקרא – מיקרו-מרקטינג :)

  3. 28/02/2009 בשעה 20:29 יובל

    במילים אחרות אפשר לאמר שמדובר באתר שמנסה לדכא יצרתיות? :-)

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

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

    חובבן שכמוני :-)

    אגב, השיוט בquince מדליק למדי!

  4. 28/02/2009 בשעה 20:39 אמיר דותן

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

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

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

  5. 28/02/2009 בשעה 21:55 יובל

    תודה רבה על התשובה המעולה!

    בעניין הג'ימייל, זה באמת מאוד נוח ולמעשה מעולם לא הקדשתי לזה מחשבה.

  6. 01/03/2009 בשעה 16:01 יונתן

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

  7. 10/03/2009 בשעה 10:29 asaf

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

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

  8. 10/03/2009 בשעה 12:12 אמיר דותן

    אסף, הזכרת לי פוסט שפרסמתי לפני שלוש שנים וקצת http://www.amirdotan.com/blog/?p=43 בנושא חדשנות וסטנדרטים. אני מסכים שהיסתמכות על תבניות עיצוב יכול במקרים מסויימים לקבע ואולי לנטרל חדשנות אך אם מסתכלים על תבניות עיצוב ברשת בשנים האחרונות אפשר לראות בבירור שהן מתפתחות, בעיקר כתוצאה מיכולות טכנולוגיות חדשות. אלה יוצרות הזדמנויות למימושים טכולוגים שלא היו אפשריים בעבר.

    בעבר למשל תבנית העיצוב לבחירת תאריך היו שלושה תפריטי select כאשר המשתמש היה צריך להגדיר יום, חודש ושנה. תבנית העיצוב כיום לעומת זאת היא לוח שנה שמגיח ומאפשר לבחור תאריך בצורה מוכרת וקונטסטואלית. לאט לאט נוצרה תבנית עיצוב חדשה. דוגמא נוספת – היכולת לערוך כותרות ותיאורים בפליקר על ידי לחיצה על טקסט. אין שימוש בכפתור edit וזה משהו שלא היה קיים לפני עשר שנים אך נראה היום די פשוט ומובן מאליו (כמעט). דוגמא אחרונה: מנגנון Suggest בשדות חיפוש כפי שאפשר לראות אצל גוגל http://www.google.co.uk/webhp?hl=en&complete=1 – זאת תבנית עיצוב פשוטה לכאורה שהתאפשרה בשנים האחרונות תודות ליכולות טכנולוגיות.

    עוד אוסף של תבניות עיצוב http://theresaneil.wordpress.com/2009/02/04/30-essential-controls

  9. 31/03/2009 בשעה 13:14 ברק

    עוד אוסף נחמד של תבניות:
    http://ui-patterns.com

  10. [...] the world ו-Share with some people במקום הכפתור היחיד שקיים. מבחינת תבנית העיצוב אפשר לשקול אף שימוש בתפריט נפתח עם שתי האופציות בכדי [...]

  11. [...] מבחינתי הם להיות עם יד על הדופק המקצועי ולהכיר בעיקר תבניות עיצוב ופתרונות איפיוניים בנושאים לא פשוטים כמו פרטיות ואבטחה. יכולות טכניות [...]

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

הוספת תגובה