مهدیه عطائی
مهدیه عطائی
خواندن ۳ دقیقه·۲ سال پیش

چیزهایی که لازم است درباره‌ی Toggleها بدانیم!

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

استفاده‌ی نادرست از عناصر طراحی - Toggleها
استفاده‌ی نادرست از عناصر طراحی - Toggleها

آنچه که لازمه درباره‌ی Toggleها بدانیم

تعریف
A toggle switch is a digital on/off switch.

تاگل‌ها، سوئیچ‌ یا کلیدهای خاموش و روشن دیجیتال هستند. این کلیدها برای تغییر وضعیت عملکردها بهترین استفاده را دارند. تاگل‌ها ممکن است جایگزین دو دکمه‌ی رادیویی (Radio Button) یا کادرهای تایید باشند تا به کاربران امکان انتخاب بین دو حالت متضاد را بدهند.

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

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

- برچسب(Label)های مختصر و غیرخنثی استفاده کنید.
برچسب های تاگل ها کوتاه و مستقیم باشند. یکی از اصول طراحی تعاملی می‌گوید: « برچسب های منوها و دکمه ها باید کلمات منحصر به فردی را تشکیل دهند و در ابتدا با کلمات کلیدی آغاز شوند». برچسب ها باید توضیح دهند که وقتی سوئیچ روشن است کنترل چه کاری را در دست دارند. این توضیحات نباید خنثی یا مبهم باشد.

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

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

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


پ.ن: منبع این محتوا Joyce, Alita (2018). Toggle-Switch Guidelines.Nielsen Norman Group (World Leaders in Research-Based User Experience)

user experienceاصول طراحیui elementsعناصر طراحی uiطراحی رابط کاربری
Product Designer
شاید از این پست‌ها خوشتان بیاید