طراحی گروه دکمه‌های در دیزاین سیستم

نزدیک به ۶ سال تجربه طراحی که دارم در پروژه های متعدد از دکمه های استفاده کرده ام. دکمه‌ها از عناصر اصلی طراحی رابط کاربری و طراحی design system نیز می باشد. گاهی در این میان به جزییات گروه دکمه های مورد نیاز که برای طراحی و دسترسی پذیری را تحت پوشش قرار دهد پرداخته نشده است که در ادامه به یک سری نکات در این رابطخ رسیدم و در این نوسته قصد دارم ان‌ها را معرفی و در موردشون صحبت کنیم.

اشتباهات رایج در طراحی دکمه ها

در اکثر دیزاین سیستم طراحی دکمه ها به ۳ سطح تقسیم می‌شوند که بر اساس میزان اهمیت انها را نمایش می‌دهد که شامل موارد زیر می‌شوند :

• اولیه - primary
• ثانویه - secondary
• درجه سوم یا ثالث - tertiary

حالا در ادامه بر اساس استاندارد WCGA 2.0 انواع گروه دکمه های زیر را بررسی می‌کنیم :

۱- گروه دکمه شماره یک

میزان کانتراست بر اساس استاندادر WCGA برای دکمه‌ها، تب‌ها و فیلد‌های فرم باید نسبت حداقل ۳:۱(بخوانید ۳ به یک) باشد تا افراد مبتلا به اختلال بینایی مشکلی برای برقراری ارتباط با رابط کاربری نداشته باشند.

در مثال بالا؛ نسبت کنتراست متن به بک گراند در دکمه ثانویه کمتر از ۳:۱ می‌باشد که این نسبت، دسترسی پذیری، افراد کم‌بینا را دچار مشکلاتی در هنگام استفاده از محصول می‌کند.

۲- گروه دکمه شماره دو

مشکلات این گروه شامل موراد زیر است :

• حالت ثانویه چون در پاساژ رنگی خاکستری است حالت غیر فعال را برای کاربر تداعی می‌کند.
• مقدار border حالت ثانویه بر اساس استاندارد WCGA کمتر از ۳:۱ است.
• کانتراست رنگ متن بر اساس استاندار WCGA کمتر از ۴.۵:۱ است.

۳- گروه دکمه شماره سه

مشکلات این گروه دکمه های اشمل موارد زیر می‌باشد :

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

۴- گروه دکمه شماره چهار

این گروه دکمه مشکلات زیر را دارد :

• دکمه‌های حالت اولیه و ثانویه به دلیل سبک طراحی مشابه و عدم کنتراست باهم تضاد دارند.
• نسبت کنتراست متن به بک گراند در حالت ثانویه کمتر از 4.5:1 است.
• حالت ثانویه چون شامل رنگ خاکستری می‌باشد ممکن است که حالت غیرفعال را برای کاربر تداعی کند.

۵- گروه دکمه شماره پنج

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

تنها تفاوت بین این دکمه ها کنتراست بین ان‌هاست.

۶- گروه دکمه شماره شش

مشکلات این گروه شامل موراد زیر می‌باشد :

• تفاوت این دکمه‌ها تنها در کنتراست رنگ‌هاست و تشخیص تفاوت انها برای کاربران بسیار دشوار است.
• نسبت کانتراست دکمه سوم کمتر از ۳:۱ است.

۷- گروه دکمه شماره هفتم

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

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

۸- گروه دکمه شماره هشتم

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

۹- گروه دکمه شماره نهم

سلسله مراتب بصری نحوه ارتباط ما با اهمیت نسبی عناصر رابط است این میزان اهمیت به کاربران در هنگام تصمیم گیری کمک می‌کنند.

مشکلات این گروه شامل موراد زیر می‌باشد :

• سلسله مراتب بصری نامشخص است زیرا دکمه اولیه و ثانویه وزن و برجستگی مشابهی دارند.
• نسبت کانتراست ثانویه کمتر از ۳:۱ است.
  

نکات طراحی گروه دکمه‌ها

با بررسی نمونه‌های بالای نکته‌های زیر را مرور می‌کنیم :

• گروه دکمه‌ها باید سلسله مراتب بصری مشخصی داشته باشند تا میزان اهمیت ان عنصر کاملا برای کاربران مشخص باشد
• دکمه‌ها برای دسترسی پذیری بیشتر نباید تنها به رنگ‌ها متکی باشند.
• نسبت کانتراست دکمه‌ها باید حداقل ۳:۱ باشند.

گزینه امن برای تعیین گروه دکمه‌های بهتر

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

در ادامه به برخی گروه‌ دکمه‌ها در وب‌سایت اشاره‌ می‌کنیم :

در تصویر بالا میزان اهمیت دکمه‌ها مشخص نیست و ان‌را به تصویر پایین مقایسه کنید :