معرفی منوها در رابط کاربری

منوها یه عنصر ضروری برای ناوبری و تعامل محصول هستن. اونا تو محصولاتی که محتوای زیادی دارن، حیاتی هستن چون به ذخیره فضا یا حتی ایجاد یه ظاهر مینیمالیستی کمک می‌کنن.

طراحی منو به طور چشمگیری روی تجربه کاربری تأثیر می‌ذاره. هنگام ایجاد منوهای کاربرپسند، چیزهایی مثل برچسب‌ها، آیکون‌ها و حالت‌های مختلف رو در نظر داشته باشین. برای انتخاب بهترین نوع منو برای پروژه، هدف اون رو در نظر بگیرین. کی و کجا ظاهر می‌شه و به کاربرا برای رسیدن به چی کمک می‌کنه؟ منوهایی که به درستی انتخاب شدن، خود توضیحی هستن و پیدا کردن و دستکاری کردنشون آسونه.

منوی کشویی پایه (Basic dropdown menu)

منوهای کشویی پایه کنترل‌های رابط کاربری هستن که شامل یه لیست ساده از گزینه‌ها هستن که کاربرا فقط می‌تونن یه گزینه رو در هر زمان انتخاب کنن. وقتی کاربرا یه انتخاب انجام می‌دن، منو بسته می‌شه. نکته‌ی حرفه‌ای! اگه منو نزدیک لبه صفحه باشه، اون رو به صورت عمودی تراز کنین تا همه آیتم‌های منو قابل مشاهده باشن.

منوی آبشاری (Cascading menu)

منوهای آبشاری یه انتخاب عالی برای محتوای دسته‌بندی شده هستن. اونا شامل یه عنصر والد و فرزندانش هستن. فرزندان معمولاً وقتی کاربرا یه گزینه رو انتخاب می‌کنن یا ماوس رو روش نگه می‌دارن، باز می‌شن.

این نوع منو وقتی بعضی از گزینه‌ها شامل چند زیرگزینه هستن، مفیده. برای مثال، آیتم «جدید» اغلب شامل انواع اسناد جدیدی هست که کاربرا می‌تونن ایجاد کنن. با این حال، از اضافه کردن گزینه‌های خیلی زیاد به منوهای فرزند خودداری کنین. این می‌تونه منوهای آبشاری رو دست و پا گیر و طاقت‌فرسا کنه. اگه نیاز به استفاده از آیتم‌های خیلی زیاد دارین، تغییر کل جریان کاربر رو در نظر بگیرین. نکته‌ی حرفه‌ای! منوهای آبشاری هرگز نباید تو موبایل استفاده بشن.

منوی متنی (Contextual menu)

منوهای متنی وقتی کاربرا با یه عنصر خاص تعامل دارن، ظاهر می‌شن. تو دسکتاپ‌ها، اونا معمولاً با کلیک راست یا با یه میانبر صفحه کلید فعال می‌شن.

منوهای متنی کنار جایی که کاربرا کلیک می‌کنن ظاهر می‌شن. لیست گزینه‌های اونا می‌تونه بر اساس هدف کلیک متفاوت باشه — برای مثال، می‌تونه برای متن و تصاویر متفاوت باشه. معمولاً، منوهای متنی شامل اقداماتی هستن که اغلب مربوط به متن فعلی استفاده می‌شن. برای مثال، کلیک راست روی متن تو Google Docs یه منوی متنی با اقدامات خاص متن مثل کپی، پیست، حذف رو نشون می‌ده. نکته‌ی حرفه‌ای! منوهای متنی به طور پیش‌فرض پنهان هستن و ممکنه کاربرا ندونن که وجود دارن. به همین دلیله که مهمه این اقدامات رو از یه جای قابل مشاهده، مثل نوار منو، هم در دسترس قرار بدین.

منوی تک انتخابی (Single-select menu)

منوهای تک انتخابی به کاربرا اجازه می‌دن یه گزینه رو از یه لیست انتخاب کنن. اونا وقتی گزینه‌های منو متقابلاً منحصر به فرد باشن — فقط یه گزینه می‌تونه در هر زمان انتخاب بشه — مفید هستن.

منوهای تک انتخابی باید شامل یه نشانگر انتخاب باشن تا انتخاب کاربر رو نشون بدن. معمولاً یه علامت تیک، متن پررنگ یا پوشش رنگیه. منوهای تک انتخابی برای انتخاب، مخصوصاً هنگام فیلتر کردن، عالی هستن. با این حال، از این نوع منو برای فعال کردن پنجره‌های modal، کادرهای گفتگو یا کنترل‌های پویا خودداری کنین.

منوی چند انتخابی (Multiselect menu)

منوهای چند انتخابی به کاربرا این امکان رو می‌دن که به طور همزمان چند آیتم رو از یه لیست انتخاب کنن و انعطاف‌پذیری و کنترل بیشتر رو ارائه بدن. در اینجا روش‌های رایج برای فعال کردن عملکرد چند انتخابی آورده شده:

• از کلیدهای میانبر مثل Shift، Command یا Control در ترکیب با کلیک ماوس استفاده کنین.
• از جعبه‌های انتخاب برای علامت‌گذاری گزینه‌های مورد نظر استفاده کنین.
• یه سیستم برچسب‌گذاری رو پیاده‌سازی کنین، جایی که آیتم‌های کلیک شده به عنوان برچسب در بالا ظاهر می‌شن. برای ساده کردن تصمیم‌گیری، آیتم‌های انتخاب شده رو به طور برجسته قابل مشاهده کنین و در نتیجه بار شناختی رو کاهش بدین. با این حال، شایان ذکره که پیاده‌سازی مؤثر منوهای چند انتخابی به دلیل محدودیت فضا می‌تونه تو پلتفرم‌های موبایل چالش‌برانگیز باشه. نکته‌ی حرفه‌ای! مطمئن بشین که کاربرا راهی برای لغو انتخاب همه آیتم‌ها دارن اگه نظرشون عوض شد.

منوی جستجو (Search menu)

منوهای جستجو به طور خاص برای مدیریت لیست‌های طولانی، مثل لیست کشورها یا زبان‌ها، طراحی شدن. اونا با گنجوندن ویژگی‌هایی مثل پیشنهاد خودکار یا تکمیل خودکار، که به صورت پویا نتایج رو هنگام تایپ پرسش توسط کاربرا فیلتر می‌کنن، تجربه کاربر رو بهبود می‌بخشن.

با ادغام یه عملکرد جستجو تو یه منوی طولانی، شما اساساً فرآیند ناوبری رو ساده می‌کنین. کاربرا می‌تونن به سرعت گزینه مورد نظرشون رو بدون اسکرول بی‌پایان تو یه لیست پیدا کنن. این عملکرد نه تنها باعث صرفه‌جویی در زمان می‌شه، بلکه بار شناختی رو هم کاهش می‌ده و انجام وظایف رو برای کاربرا آسون‌تر می‌کنه.

منوی درون خطی (Inline menu)

منوهای درون خطی به طور یکپارچه تو محتوای شما ادغام می‌شن در حالی که همچنان مثل منوهای کشویی سنتی عمل می‌کنن و با کلیک باز می‌شن. اغلب برای مرتب‌سازی یا فیلتر کردن گزینه‌ها تو جداول استفاده می‌شن، اونا باید طوری طراحی بشن که در برابر پس‌زمینه برجسته باشن و نشون بدن که گزینه‌های حیاتی و به موقع رو برای کاربرا ارائه می‌دن. وقتی به طور متفکرانه استفاده بشن، منوهای درون خطی به طور مؤثر بین فرم و عملکرد تعادل برقرار می‌کنن و کاربرا رو بدون مختل کردن چیدمان کلی یا سلسله مراتب بصری راهنمایی می‌کنن.

منوی اسکرول شونده (Menu scrolling)

اندازه صفحه تعداد آیتم‌های منویی که می‌تونیم به طور همزمان نشون بدیم رو محدود می‌کنه. یکی از راه‌حل‌ها اضافه کردن اسکرول هست. نوار اسکرول رو فراموش نکنین چون موقعیت نسبی کاربر رو تو لیست نشون می‌ده.

اگه تعداد گزینه‌ها خیلی زیاد باشه، اسکرول می‌تونه خسته‌کننده بشه. تو این مورد، اضافه کردن جستجو به منو می‌تونه یه گزینه باشه — یا تغییر کل جریان کاربر. چند گزینه خیلی زیاده؟ ما می‌گیم چند دور چرخ اسکرول، اما از عقل سلیم برای تعیین اون استفاده کنین.

آیکون‌ها رو قبل از برچسب‌ها قرار بدین

آیکون‌های پیشرو نشانه‌های بصری هستن که تو منوها ظاهر می‌شن. هنگام اسکن منو، کاربرا آیکون‌های آشنا رو خیلی سریع‌تر از خوندن برچسب‌ها تشخیص می‌دن. مثال‌های رایج آیکون‌های پیشرو، آیکون قیچی برای «برش» و دو برگ کاغذ برای دستور «کپی» هستن.

آیکون‌های پیشرو رو قبل از برچسب، یا سمت چپ تو سیستم‌های نوشتاری چپ به راست، قرار بدین تا کاربرا اونا رو اول ببینن. مطمئن بشین که آیکون‌های رایج با معنی جهانی رو انتخاب می‌کنین — آیکون‌های پیشرو ناآشنا فقط کاربرا رو گیج می‌کنن. نکته‌ی حرفه‌ای! اگه شک دارین که آیا آیکون‌ها به اندازه کافی خود توضیحی هستن یا نه، اونا رو روی کاربرانتون با سوالات باز مثل: “فکر می‌کنین این آیکون به چه معنیه؟” تست کنین.

میانبرهای صفحه کلید

می‌تونین میانبرهای صفحه کلید رو تو منو قرار بدین تا به کاربرا برای یادگیری اونا کمک کنین. میانبرها اقدامات خاص رو بدون نیاز به رفتن به خود منو فعال می‌کنن. وقتی کاربرا با اونا آشنا بشن، واقعاً می‌تونه گردش کارشون رو سرعت ببخشه.

نیازی به ایجاد میانبر برای همه اقدامات و آیتم‌های منو ممکن نیست. اونا رو برای رایج‌ترین اقدامات مثل کپی، برش و چسباندن اضافه کنین. به یاد داشته باشین که فقط کاربران پیشرفته به طور معمول از میانبر