loader image
אומנות הפילטור במערכות מורכבות
  • דביר פרישטיק

אומנות הפילטור במערכות מורכבות

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

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

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

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

המשרד של עופר, המקום בו הקסם מתרחש

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

כדי לקלוע בול לצרכי המשתמש – צריך להיות מדוייקים. ועופר אוהב לדייק.

דוגמה לתצוגה לאחר פילטור – מתוך פרויקט לרשות שדות התעופה

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

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

השאלות המרכזיות שכדאי לשאול

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

  • כמה נפוץ השימוש בפילטרים בתהליך העבודה?
    שאלה זו תעזור לנו להחליט האם על הפילטרים להיות נגישים ישירות למשתמש או שניתן יהיה ״להחביא אותם״ תחת קליק או שניים

 

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

 

  • כמה מורכבות יהיו השאילתות הנפוצות של המשתמש?
    שאלה זו תעזור לנו בהתלבטות בין פילטר מודאלי (פתרון מתאים לשאילתה יותר מורכבת) או לא מודאלי (פתרון מתאים לשאילתה יותר פשוטה)

 

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

 

  • מהו ה-Layout של מסך הנתונים?
    שאלה זו תעזור לנו להחליט על ה״מחיר הנדל״ני״ שאנחנו מוכנים לשלם לטובת הפילטרים, והאם הנדל״ן ינוכה מגובה המסך, מרוחבו או מאף אחד מהם

 

פתרונות לאפיון הפילטרים

1. חלון/פאנל-צידי מודאלי (Popup/Side Panel)

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

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

מתי מומלץ להשתמש?

1. כאשר השימוש בפילטרים הוא לא נפוץ מאוד, קרי, הוא לא חלק בלתי נפרד מהתהליך
2. כאשר יש הרבה פרמטרים לפילטור
3. כאשר השאילתות הנפוצות הן מורכבות
4. כאשר יש פילטרים שנרצה להציג באמצעות אינפוגרפיקות כגון גרף, פאי וכו׳

יתרונות

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


חסרונות

  • פחות נגיש: פתרון מודאלי יהיה בהכרח חבוי וידרוש לפחות קליק אחד
  • הצגת תוצאות לא מיידית: מכיוון שהפתרון הוא מודאלי נאלץ לחייב את המשתמש לייצר שאילתה וללחוץ על כפתור אישור לקבלת התוצאות

2. בר-צידי (Sidebar)

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

דוגמה לפילטרים באמצעות בר-צידי – Booking.com

מתי מומלץ להשתמש?

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

יתרונות

  • נגישות ומהירות: הגישה לפילטרים מהירה ונוחה יותר
    בנוסף, ניתן לעבוד ״ Side by side״ עם הנתונים, ולהגדיר את הבר כ-Fixed במהלך גלילה בנתונים.
  • קבלת תוצאות מיידית: ניתן ללחוץ על הפרמטרים הרצויים ולקבל תוצאות ב״לייב״ על כל קליק


חסרונות

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

3. בר עליון (Top Bar)

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

דוגמה לפילטרים באמצעות בר עליון-מתוך פרויקט לחברת פינטק
דוגמה נוספת לפילטרים באמצעות בר עליון - שימוש בQuery builder (Monday.com )

4. קפסולות (Pills)

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

דוגמה לפילטרים מהירים באמצעות קפסולות –Yelp

מתי מומלץ להשתמש?

1. כאשר יש פרמטרים רלוונטיים לפילטור מהיר
2. כאשר השאילתות הנפוצות הן יחסית פשוטות
3. כאשר אין הרבה פרמטרים לפילטור
4. כאשר אין היררכיית פרמטרים (ולסדר הצגתם אין חשיבות/יש חשיבות נמוכה)

יתרונות

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


חסרונות

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

5. פילטור אקסלי (Table label filters)

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

בד”כ נבחר לחשוף שברון (Chevron) כשעולים בהובר על אחת מכותרות הטבלה. לחיצה על השברון תחשוף דרופדאון דרכו נוכל לפלטר את אותה עמודה.

פילטור דרך כותרות הטבלה, Like the good old days. (Excel)

מתי מומלץ להשתמש?

1. כאשר תצוגת הנתונים שלנו היא טבלאית בלבד
2. במערכות וותיקות, עם קהל משתמשים מבוגר יותר
3. כאשר קיימת מצוקה נדל”נית בממשק

יתרונות

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


חסרונות

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

טיפים זהב לפילטור מנצח

 

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

 

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

 

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

 

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

 

טיפ חמישי: הציגו למשתמש את הפילטורים הנפוצים
כדי שרשימת הפילטרים לא תהיה ארוכה מדי מצד אחד ומצד שני תציג למשתמש “במבט אחד” את האופציות הנפוצות שלו – שימו בתחילת הרשימה את הפרמטרים הנפוצים, קפלו את השאר ואפשרו פתיחה של עוד פרמטרים בלחיצה

 

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

 

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

 

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

אחרית דבר

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

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

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

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

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

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

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

      Contact us
      We love making new friends

      30 Shacham st.
      Petah Tiqwa, Israel