טווח, סליידר ומה שביניהם

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

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

אלו התוצאות.

הכל התחיל כאן

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

והשני היה באמצעות דרופ-דאונים:

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

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

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

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

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

השלב הבא באבולוציה של הטווח – סליידר (והבעיות שבאות עימו)

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

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

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

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

הפתרונות לבעיות השמישות  של הסליידר

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

דרך אחת היא לדעת שישנם מקרים בהם השימוש בסליידר דווקא כן הגיוני. אלו מקרים בהם המשתמש לא ״נעול״ על ערכי טווח ספציפיים אלא גמיש יותר. זאת אומרת, המשתמש מכוון לתוצאות שנופלות בטווח של 30-60 (בסליידר של 1-100) אבל גם תוצאות בטווח של 56-64 יהיו רלוונטיות עבורו. זה בדיוק ההגיון שמנחה את סליידר המחיר ב-Airbnb שיוצא מתוך נקודת הנחה שהמשתמש פרגמטי עם טווח המחיר שלו. בנוסף לכך, הסליידר מציג את התפלגות התוצאות ביחס למחיר על מנת לתת למשתמש אינדקציה לגבי כמות התוצאות הרלוונטיות.

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

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

1. הקלקה ראשונה מציינת בחירה של ערך אחד או ערך מינימום
2. לחיצה שניה על ערך שני מייצרת טווח (ביחד ללחיצה הראשונה)
3. הקלקה שלישית מבטלת את בחירת הטווח ומגדירה ערך אחד או מינימום חדש

ועוד משהו קטן לפני שאני מסיים

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

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

בנוסף לשתי אלו, היה עוד משהו אחד שתפס את עיני:

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

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

אז מה נסגר בסופו של דבר?

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

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