تعاریف اجزای رایج رابط کاربری

فرقی نمی‌کنه طراحی یه سایت چقدر خاص باشه، یه سری اجزای رابط کاربری (UI) هست که تقریباً تو همه‌شون پیدا می‌شه. رایج‌ترین این اجزا شامل دکمه‌ها، ورودی‌ها (مثل جاهایی که متن تایپ می‌کنیم)، فرم‌ها، کارت‌ها، پنجره‌های بازشو (modal)، منوها، سربرگ (header) و پابرگ (footer) هستن. وقتی بفهمین این اجزا چطور کار می‌کنن و چطور باید تو طراحی‌هاتون ازشون استفاده کنین، تجربه کاربری خوبی برای مخاطب‌هاتون می‌سازین. و البته می‌تونین خلاقیت خودتون رو تو نحوه پیاده‌سازی و استایل‌دهی‌شون نشون بدین.

دکمه (Button)

ریشه دکمه‌های رابط کاربری برمی‌گرده به دکمه‌های فشاری فیزیکی که اول روی وسایل الکترونیکی و اینجور چیزا پیدا شدن. تو محصولات دیجیتال، دکمه‌ها یکی از اصلی‌ترین بلوک‌های سازنده تعاملی هستن. به کاربرا اجازه می‌دن با یه کلیک یا لمس، یه کاری رو انجام بدن — مثلاً «ثبت»، «شروع»، «ایجاد جدید» و غیره.

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

جعبه‌ی انتخاب (Checkbox)

جعبه‌های انتخاب به کاربرا اجازه می‌دن چندتا گزینه رو همزمان انتخاب کنن و همینطور یه گزینه رو فعال یا غیرفعال کنن. وقتی فعال باشن، یه تیک توشون نشون داده می‌شه. وقتی غیرفعال باشن، خالی هستن. جعبه‌های انتخاب یه برچسب کنارشون دارن و می‌تونن تکی استفاده بشن (مثلاً یه جعبه برای اجازه عضویت تو لیست ایمیل) یا پشت سر هم چیده بشن.

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

دکمه‌ی رادیویی (Radio button)

در حالی که جعبه‌های انتخاب اجازه انتخاب چند گزینه رو می‌دن، دکمه‌های رادیویی فقط اجازه انتخاب یه گزینه رو می‌دن. دکمه‌های رادیویی وقتی انتخاب نشده باشن خالی هستن و وقتی انتخاب بشن با یه نقطه پر می‌شن. معمولاً اول بدون انتخاب هیچ گزینه‌ای نشون داده می‌شن. وقتی یه گزینه انتخاب بشه، دیگه نمی‌شه فقط با خود دکمه‌ها به حالت اول برگردوند (کاربرا فقط می‌تونن انتخابشون رو بین دکمه‌ها عوض کنن). اگه حالت بدون انتخاب مهمه، باید یه راه دیگه به کاربرا بدین که به اون حالت برگردن.

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

کلید ضامن (Toggle switch)

یه کلید ضامن به کاربرا این امکان رو می‌ده که بین دو گزینه‌ای که نمی‌تونن همزمان وجود داشته باشن، جابجا بشن، معمولاً حالت‌هایی مثل «روشن» و «خاموش» برای یه عنصر یا عملکرد خاص رو نشون می‌ده.

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

ورودی متن (Text input)

ورودی‌های متن رایج‌ترین نوع ورودی فرم هستن. بسته به موقعیت و نوع داده‌ای که وارد می‌شه، می‌تونن شکل‌ها و فرم‌های مختلفی داشته باشن. ممکنه از ورودی متن برای جمع‌آوری اسم، آدرس ایمیل، شماره تلفن یا متن‌های طولانی‌تر (مثل نظرات) از کاربرا استفاده کنین.

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

منو (Menu)

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

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

فرم (Form)

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

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

پنجره‌ی بازشو (Modal)

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

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

کارت (Card)

کارت‌ها تو طراحی رابط کاربری، ظرف‌های اطلاعات فشرده و مستقل هستن که یه بخش کوچیک از محتوا رو ارائه می‌دن، معمولاً همراه با تصاویر، عنوان‌ها و متن کوتاه. مثل کارت‌های فهرست دیجیتال هستن که محتوای مرتبط رو به صورت مرتب و جذاب کنار هم قرار می‌دن. کارت‌ها چندمنظوره هستن و معمولاً برای نمایش مواردی مثل مقالات، محصولات، پروفایل‌های کاربری یا اعلان‌ها استفاده می‌شن و یه روش سازماندهی شده برای ارائه محتوای ماژولار و تشویق تعامل کاربر ارائه می‌دن. ممکنه شامل عناصر تعاملی برای عمل کردن روی محتوای کارت، مثل دکمه‌ی «بیشتر بدانید» هم باشن.

جدول (Table)

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

سربرگ (Header)

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

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

پابرگ (Footer)

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

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

یک گام تخصصی‌تر

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

اجزای رابط کاربری مثل آکاردئون‌ها، لیست‌ها و نمودارها می‌تونن هضم اطلاعات رو برای کاربرا آسون‌تر کنن. اجزایی مثل نشانگر مسیر (breadcrumbs) و صفحه‌بندی (pagination) کاربرا رو نسبت به جایی که تو یه وب‌سایت یا برنامه هستن، آگاه می‌کنن. و اجزای دیگه مثل انتخابگرها (pickers) یا اسلایدرها، تعامل آسون‌تر با یه رابط کاربری رو فراهم می‌کنن.

آکاردئون (Accordions)

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

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

لیست‌ها (Lists)

لیست‌ها تو رابط کاربری، چیدمان بصری آیتم‌های مرتبط هستن که به ترتیب متوالی یا سلسله مراتبی ارائه می‌شن. اونا عناصر رایجی تو رابط‌های وب و برنامه برای نمایش و سازماندهی محتوایی مثل متن، تصاویر یا لینک‌ها هستن.

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

نشانگر مسیر (Breadcrumbs)

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

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

صفحه‌بندی (Pagination)

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

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

جداکننده‌ها (Dividers)

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

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

اعلان‌ها (Notifications)

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

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

برچسب‌ها (Tags)

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

به عنوان مثال، تو یه پلتفرم وبلاگ‌نویسی، مقالات می‌تونن با کلمات کلیدی مرتبط با موضوعاتشون، مثل «فناوری»، «سلامتی» یا «سفر» برچسب‌گذاری بشن. این به کاربرا اجازه می‌ده روی یه برچسب کلیک کنن و مجموعه‌ای از مقالاتی که اون برچسب رو دارن ببینن. برچسب‌ها همچنین به بهبود قابلیت کشف کمک می‌کنن، چون کاربرا می‌تونن محتوای مرتبط رو به طور مؤثرتری پیدا کنن. گوگل تو طراحی متریال خودش اصطلاح «چیپ» رو معرفی کرد که الان به جای کلمه «برچسب» هم استفاده می‌شه (اگرچه «چیپ» می‌تونه به عناصری فراتر از برچسب‌ها هم اشاره داشته باشه).

انتخابگر تاریخ (Date pickers)

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

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

نمودارها (Charts)

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

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

نشانگرهای بارگذاری (Loaders)

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

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

راهنماهای ابزار (Tooltips)

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

از راهنماهای ابزار برای ارائه راهنمایی مختصر بدون شلوغ کردن رابط اصلی استفاده می‌شه و اونا رو مخصوصاً برای آیکون‌هایی با معانی نامشخص یا برچسب‌های اختصاری مفید می‌کنه. اونا با ارائه بینش‌های سریع و کاهش نیاز کاربرا به حدس زدن یا جستجوی اطلاعات، درک و تعامل کاربر رو افزایش می‌دن. راهنماهای ابزار رو به تنها منبع توضیح تبدیل نکنین. اونا همراهان خوبی برای کمک بیشتر و ارائه اطلاعات اضافی هستن، اما کاربرا در حالت ایده آل باید بتونن یه کار رو بدون اونا انجام بدن.

اسلایدرها (Sliders)

یه اسلایدر به کاربرا اجازه می‌ده با کشیدن یه دستگیره روی یه مسیر، یه مقدار یا یه محدوده از مقادیر رو تغییر بدن. این تعامل به کاربرا اجازه می‌ده تنظیماتی رو تو یه محدوده مشخص انجام بدن، مثل انتخاب یه محدوده قیمت، تنظیم یه مقدار عددی یا تنظیم تنظیماتی مثل صدا یا روشنایی.

اسلایدرها معمولاً از یه مسیر، که نشون دهنده محدوده مقادیره، و یه دستگیره متحرک که کاربرا می‌تونن اون رو به موقعیت دلخواه بکشن، تشکیل شدن. موقعیت دستگیره با مقدار انتخاب شده مطابقت داره و بازخورد بصری فوری ارائه می‌ده. وقتی از اسلایدرها تو موبایل استفاده می‌کنین، مطمئن بشین که دکمه به اندازه کافی بزرگ و هدف‌گیری و کشیدن اون آسونه. به یاد داشته باشین که اسلایدرها ممکنه برای افرادی که ناتوانی حرکتی دارن، کنترلشون خیلی سخت باشه. علاوه بر این، تنظیم دقیق محدوده‌های خیلی وسیع از مقادیر، مثلاً ۱۰۰ تا ۳۰ هزار رو دشوار می‌کنن.

نشانگرهای پیشرفت (Progress trackers)

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

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