راهنمای سریع الگوهای UI برای کنترل های فرم

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

در این مقاله، ما از منظر UX به دنیای کنترل های فرم می پردازیم، با چند مثال واقعی برای جالب نگه داشتن چیزها.

1. ورودی های متن

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

تیک، تیک، تیک - چک باکس ها مانند چک باکس های دیجیتالی برای لیست کارهای شما هستند. Trello (ابزار مدیریت پروژه) با استفاده از چک باکس ها برای مدیریت بدون دردسر وظایف، آن را ثابت می کند. آنها به طور رضایت بخشی قابل کلیک هستند و پیگیری موارد تکمیل شده را آسان می کنند. مثل این است که چیزهایی را بدون خط نوشته های نامرتب از فهرست خود حذف کنید.

3. دکمه های رادیویی

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

4. منوهای کشویی

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

چه زمانی از منوهای کشویی یا دکمه های رادیویی استفاده کنیم؟

اگر کمتر از پنج گزینه وجود دارد، از دکمه های رادیویی استفاده کنید. اگر بیش از پنج گزینه وجود دارد، از یک کشویی استفاده کنید - برای جلوگیری از داشتن یک لیست بسیار طولانی.

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

5. کنترل لغزنده

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

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

6. دکمه ها و حالت های دکمه

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

حالت پیش فرض یک دکمه ظاهر اولیه آن است که برای اولین بار توسط کاربر مواجه می شود. خنثی و بی تکلف است و منتظر ورودی کاربر است.

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

حالت فعال زمانی فعال می شود که کاربر روی دکمه کلیک یا ضربه می زند. این عملکرد کاربر را تأیید می کند و بازخورد فوری از فعال شدن دکمه ارائه می دهد. این حالت اغلب شامل تغییرات بصری، مانند تغییر رنگ یا افزایش کنتراست، برای نشان دادن حالت فشار دادن دکمه است.

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

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

درباره دکمه های Tuts+ بیشتر بدانید:

در اینجا لیست کنترل های فرم به پایان می رسد!

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

با مثال های واقعی از شرکت هایی مانند Google، Trello و Netflix، واضح است که کلید موفقیت در شکل گیری کنترل در سادگی و شهودی است. بنابراین ادامه دهید، مقداری جادوی UX را در کنترل های فرم خود بپاشید – کاربران شما از شما برای آن تشکر خواهند کرد.