אז מה ההבדל בין combobox, multiselect, listbox ו-Dropdown? למרות שכל רכיבי ממשק המשתמש הללו עשויים להיראות דומים, הם משרתים מטרות שונות. הבחירה לרוב מסתכמת במספר האפשרויות הזמינות ובנראות שלהן. בואו נראה במה הם שונים, איזו מטרה הם משרתים ואיך לבחור נכון - הימנעות מאי הבנות וציפיות שגויות לאורך הדרך.
לא כל דפוסי הרשימה זהים לכל רכיבי ממשק המשתמש המודגשים למעלה יש בדיוק דבר אחד במשותף: הם תומכים באינטראקציות של משתמשים עם רשימות. עם זאת, הם עושים זאת קצת אחרת. בואו נסתכל על כל אחד, אחד אחד:
הרשימה הנפתחת → מוסתרת עד שהיא תופעל. Combobox → הקלד לסנן + בחר אפשרות אחת. בחירה מרובה ← הקלד לסינון + בחר אפשרויות רבות. תיבת רשימה → כל אפשרויות הרשימה גלויות כברירת מחדל (+ גלילה). תיבת רשימה כפולה ← העבר פריטים בין 2 תיבות רשימה.
במילים אחרות, Combobox משלב שדה קלט טקסט עם רשימה נפתחת, כך שמשתמשים יכולים להקליד לסנן ולבחור אפשרות אחת. עם Multiselect, משתמשים יכולים לבחור אפשרויות רבות (מוצגות לעתים קרובות ככדורים או צ'יפס). תיבות רשימה מציגות את כל אפשרויות הרשימה הנראות כברירת מחדל, לעתים קרובות עם גלילה. זה מועיל כאשר משתמשים צריכים לראות את כל האפשרויות הזמינות באופן מיידי. תיבת רשימה כפולה (נקראת גם רשימת העברה) היא גרסה של תיבת רשימה המאפשרת למשתמשים להעביר פריטים בין שתי תיבות רשימה (שמאל ↔ ימין), בדרך כלל לבחירה בכמות גדולה. לעולם אל תסתיר אפשרויות בשימוש תכוף כפי שהוזכר לעיל, הבחירה ברכיב הממשק המתאים תלויה בשני גורמים: כמה אפשרויות רשימה זמינות, ואם כל האפשרויות הללו צריכות להיות גלויות כברירת מחדל. כל הרשימות יכולות לכלול גם מבני עצים, קינון ובחירת קבוצות.
יש עיקרון אחד שאני עוקב אחריו במשך שנים עבור כל רכיב ממשק משתמש: לעולם אל תסתיר אפשרויות בשימוש תכוף. אם משתמשים מסתמכים על בחירה מסוימת לעתים קרובות, יש מעט מאוד ערך להסתיר זאת מהם. נוכל לבחור את זה מראש, או (אם יש רק 2-3 אפשרויות בשימוש תכוף) להציג אותן כשבבים או כפתורים, ולאחר מכן להציג את שאר הרשימה על אינטראקציה. באופן כללי, מומלץ תמיד להציג אפשרויות פופולריות - גם אם זה עלול לבלבל את ממשק המשתמש. איך לבחור איזה? לא כל רשימה צריכה שיטת בחירה מורכבת. עבור רשימות עם פחות מ-5 פריטים, לחצני בחירה או תיבות סימון פשוטים פועלים בדרך כלל בצורה הטובה ביותר. אבל אם משתמשים צריכים לבחור מתוך רשימה גדולה של אפשרויות (למשל, 200+ פריטים), combobox + multiselect מועילים בגלל הסינון המהיר יותר (למשל, בחירת מדינה).
תיבות רשימה מועילות כאשר אנשים צריכים לגשת לאפשרויות רבות בבת אחת, במיוחד אם הם צריכים לבחור אפשרויות רבות גם מהרשימה הזו. הם יכולים להיות מועילים עבור מסננים בשימוש תכוף.
לעתים קרובות מתעלמים מתיבה כפולה ומתעלמים ממנה. אבל זה יכול להיות מאוד מועיל למשימות מורכבות, למשל בחירה בכמות גדולה, או הקצאת תפקידים, משימות, אחריות. זהו רכיב ממשק המשתמש היחיד שמאפשר למשתמשים לסקור את רשימת הבחירה המלאה שלהם זה לצד זה עם רשימת המקורות לפני ביצוע התחייבות (נקראת גם "רשימת העברה"). למעשה, תיבת רשימה כפולה היא לרוב מהירה יותר, מדויקת יותר ונגישה יותר מאשר גרירה ושחרור. שיקולי שמישות הערה חשובה אחת שיש לזכור היא שכל סוגי הרשימות צריכים לתמוך בניווט מקלדת (למשל, מקשי החצים ↑/↓) לצורך נגישות. יש אנשים שיסתמכו כמעט תמיד על המקלדת כדי לבחור אפשרויות ברגע שהם מתחילים להקליד.
מעבר לזה:
עבור רשימות עם יותר מ-7 אפשרויות, שקול להוסיף פונקציות "בחר הכל" ו"נקה הכל" כדי לייעל את האינטראקציה עם המשתמש. עבור רשימות ארוכות עם תיבה משולבת, חשוף את כל האפשרויות למשתמשים בלחיצה/הקשה, כי אחרת הם עלולים לא להיראות לעולם, והכי חשוב, אל תציג אלמנטים לא אינטראקטיביים כלחצנים כדי למנוע בלבול - ואל תציג אלמנטים אינטראקטיביים כתוויות סטטיות.
סיכום: לא הכל הוא תפריט נפתח שמות חשובים. רשימה אנכית של אפשרויות מתוארת בדרך כלל כ"תפריט נפתח" - אך לעתים קרובות היא קצת כללית מכדי להיות בעלת משמעות. "תפריט נפתח" מרמז שהרשימה מוסתרת כברירת מחדל. "בחירה מרובה" מרמזת על בחירה מרובה (תיבת סימון) בתוך רשימה. "Combobox" מרמז על קלט טקסט. ו"Listbox" היא פשוט רשימה של פריטים שניתן לבחור, גלויים בכל עת. המטרה היא לא להיות עקבי עם ההגדרות לעיל לשם כך. אלא כדי ליישר כוונות - דבר באותה שפה בעת החלטה, תכנון, בנייה ולאחר מכן שימוש ברכיבי ממשק משתמש אלה. זה אמור לעבוד עבורכולם - מעצבים, מהנדסים ומשתמשי קצה - כל עוד תוויות סטטיות לא נראות כמו לחצנים אינטראקטיביים, ולחצני בחירה לא מתנהגים כמו תיבות סימון. הכירו את "דפוסי עיצוב עבור ממשקי בינה מלאכותית" הכירו דפוסי עיצוב לממשקי AI, קורס הווידאו החדש של Vitaly עם דוגמאות מעשיות ממוצרים מהחיים האמיתיים - עם אימון UX חי בקרוב. קפוץ לתצוגה מקדימה בחינם. הכירו דפוסי עיצוב לממשקי AI, קורס הווידאו של Vitaly בנושא עיצוב ממשקים ו-UX.
Video + UX TrainingVideo onlyVideo + UX Training$ 450.00 $ 799.00 $
קבל שיעורי וידאו + UX Training30 שיעורי וידאו (10 שעות) + הדרכת UX בשידור חי. אחריות להחזר כספי של 100 ימים. סרטון רק $ 275.00$ 395.00
קבל את קורס הווידאו 30 שיעורי וידאו (10 שעות). מתעדכן מדי שנה. זמין גם כצרור UX עם 3 קורסי וידאו.
משאבים שימושיים
השלמה אוטומטית: הנחיות UX, מאת ויטלי פרידמן Combobox, מאת eBay 👍 Combobox, של אלסטיק Combobox, מאת אליסה Combobox, מאת MongoDB 👍 Combobox, מאת ויזה 👍 Combobox, מאת ווטסון (Docplanner) Combobox, מאת ויקימדיה Combobox, מאת Zendesk Multiselect (MongoDB Combobox Design Docs), מאת MongoDB 👍 Multiselect Lookup, מאת ויקימדיה Multi-Select Combo Box, מאת Vaadin Multiselect, מאת ויזה העברה (דוגמה ל-Listbox), מאת Ant Design Listbox, מאת הופר תיבת רשימה, מאת ועדין Listbox, מאת ויזה בורר רשימות כפול, מאת Red Hat (PatternFly) Dual Listbox, מאת Salesforce (מערכת עיצוב ברק) רשימת העברות, מאת Mantine Dual Listbox, מאת Dashlite תגים נגד גלולות נגד צ'יפס נגד תגיות, מאת ויטלי פרידמן תיבות רשימות לעומת רשימות נפתחות, מאת אנה קיילי (NN/g)
