برگشت به لیست

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

 

Top of Form

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

 

آیا ما اجازه داریم با استفاده از ایمیل شما را در جریان اخبار قرار دهیم؟

 

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

 

 

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

 

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

 

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

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

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

 

چه وقتی از کدام ویجت استفاده کنیم

از زمان ظهور نخستین نسخه Inside Macintosh در سال 1984، قوانین استفاده از چک باکس ها و دکمه های رادیویی ثابت مانده اند. همه رابط ‌های کاربری گرافیکی استانداردِ پس از آن و استانداردهای رسمی W3W Web تعاریف یکسانی  از این 2 کنترل ارائه داده اند.

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

به نظر خیلی ساده می‌آید، درست است؟

ولی با این وجود من دائماً با صفحاتی مواجه می‌شوم که از دکمه‌های رادیویی و چک باکس ‌ها به اشتباه استفاده کردند. حتی پس از 20 سال باز هم این توصیه‌ها ارزش این را دارند که یک بار دیگر آنها را بیان کنیم.

 

توصیه‌های بیشتر

  1. از نمادهای بصری استاندارد استفاده کنید. چک باکس باید یک مربع کوچک باشد که در حالت انتخاب شده یک "تیک" یا یک “X” داشته باشد. دکمه رادیوئی باید یک دایره کوچک باشد که در حالت انتخاب شده یک دایره مشکی رنگ درون آن قرار دارد.
  2. از لحاظ بصری گزینه هائی که مربوط به هم هستند را به صورت گروه طبقه بندی کنید و آنها را به وضوح از دیگر گروه‌های صفحه جدا کنید. مثالی که در بالا دیدید این توصیه را نقض می‌کند زیرا ساختار آن باعث می‌شود چک باکس ها، مربوط به دو موضوع جدا از هم به نظر بیایند در حالی که آنها گزینه‌های مختلفی برای یک موضوع بودند.
  • از عناوین فرعی برای تبدیل کردن فهرست چک باکس ها به گروه‌های معنادار استفاده کنید. این کار باعث می‌شود که گزینه‌ها را سریع‌تر و راحت‌تر بتوان دید و متوجه شد. خطر این کار این است که کاربران ممکن است هر گروه از عناوین فرعی را به عنوان مجموعه‌ای از گزینه‌های مجزا در نظر بگیرند. ولی برای چک باکس ها این اتفاق لزوماً مهلک محسوب نمی‌شود زیرا فراموش نکنیم که هر گزینه به خودی ‌خود مستقل است. اما فهرستی از دکمه ‌های رادیویی همیشه باید ظاهر یکسان داشته باشند بنابراین نمی‌توانید از عناوین فرعی برای تبدیل کردن آنها به گروه‌های کوچک‌تر استفاده کنید.
  1. فهرست خود را به صورت عمودی تنظیم کنید و در هر خط یک گزینه قرار دهید. این مورد را حتی می توانید در طراحی سایت فروشگاهی خود نیز به کار ببرید. اگر مجبورید که از ساختار افقی با گزینه‌های متعدد در یک خط استفاده کنید اطمینان حاصل کنید که فضای بین دکمه و برچسب آن مناسب باشد و کاملاً واضح باشد که کدام برچسب متعلق به کدام دکمه است. مثلاً همان طور که در زیر می‌بینید فهمیدن اینکه دگمة رادیویی گزینه شماره چهار کدام است، مشکل می‌نماید.

 یک  دو  سه  چهار  پنج  شش  هفت

  1. از عبارات "مثبت و فعال" برای برچسب‌ چک باکس استفاده کنید تا کاربر به ‌روشنی بداند که اگر آن چک باکس را انتخاب کند چه اتفاقی خواهد افتاد. به عبارت دیگر، از عبارات منفی همچون "دیگر برای من ایمیل نفرستید" اجتناب کنید زیرا این جمله به این معنی است که کاربر باید این گزینه را انتخاب کند تا اتفاقی نیفتد.
  • متن برچسب را طوری بنویسید که کاربر بداند که هم در صورت انتخاب گزینه و هم در صورت عدم انتخاب آن چه اتفاقی رخ خواهد داد. Bottom of Form

 

  • اگر نمی‌توانید این کار را انجام دهید بهتر است که از دو دکمه رادیویی استفاده کنید، یکی برای استفاده از ویژگی مورد نظر و دیگری برای خاموش بودن آن و هر یک از این موارد را به روشنی در برچسب مربوطه توضیح دهید.
  1. اگر امکان دارد به جای استفاده از منوهای باز شونده از دکمه های رادیویی استفاده کنید. فهم دکمه‌های رادیویی آسان تر است زیرا تمام گزینه‌ها دائماً جلوی چشم کاربر هستند و کاربر می‌تواند به راحتی آنها را با هم مقایسه کند. برای کاربرانی که استفاده دقیق از حرکات موس برای آنها مشکل است استفاده از دکمه‌های رادیویی مناسب‌تر است. (ممکن است که گاهی اوقات فضای محدود، شما را مجبور به تخطی از این توصیه بکند، ولی تمام تلاش خودتان را بکنید تا در صورت امکان تمام گزینه‌ها را برای کاربر "در جلوی دید" نگاه دارید).
  2. در صورت استفاده از فهرستی از دکمه‌های رادیویی همیشه یک گزینه را به صورت پیش‌فرض انتخاب کنید. بنا به تعریفِ دکمه‌های رادیویی، از بین آنها همیشه حتماً بایستی یکی انتخاب شود بنابراین نباید آنها را بدون یک انتخاب پیش فرض قرار دهید. (ولی چک باکس ها به صورت پیش فرض هیچ گزینه انتخاب شده ای ندارند).
  • اگر احتمال دارد که کاربر از انتخاب یک گزینه خودداری کند باید یک دکمه رادیویی برای این گزینه نیز طراحی کنید، مثلاً گزینه ای با برچسب "هیچ کدام". قرار دادن یک گزینه خنثی بهتر از این است که کاربر را مجبور به کلیک نکردن بر روی هیچ یک از گزینه‌ها بکنیم، زیرا این کار در تقابل کامل با قانون "وجوب انتخاب یک گزینه" است.
  1. از آنجایی که دکمه‌های رادیویی فقط و فقط نیاز به یک انتخاب دارند، اطمینان حاصل کنید هر دو گزینه‌ کامل و جامع و کاملاً از یکدیگر تفکیک شده باشند. به عنوان مثال در آزمایشی با کاربران مسن‌ تر، افراد نتوانستند فرم را تکمیل کنند زیرا در قسمت شغل، گزینه "بازنشسته" وجود نداشت. اگر امکان ندارد که تمامی گزینه‌های ممکن را بنویسید از دکمه‌ای با برچسب "غیره" همراه با محلی برای تایپ، استفاده کنید.
  2. به کاربران اجازه دهید تا با کلیک کردن روی خود دکمه و یا برچسب آن بتوانند آن گزینه را انتخاب کنند. براساس قانون Fitt کلیک کردن بر روی اهداف بزرگ ‌تر آسان ‌تر است. در فرم‌های HTML می‌توانید به راحتی و با coding each label with elements این کار را انجام دهید، همان طور که من برای مثالی که در بالا و در رابطه با دکمه‌های رادیویی افقی دیدید انجام داده ام. (برای انتخاب گزینه روی کلمه "چهار" کلیک کنید). در آزمایش برنامه‌های درون وب سایتی در Flash، به این نتیجه رسیدیم که وقتی که منطقه کلیک، چند پیکسل بزرگ تر از منطقه کلیکِ قابل دیدن باشد، اشتباهات کاربران به طور فاحشی کاهش می‌یابد. (انجام این کار در HTML ممکن است دشوار باشد ولی استفاده از CSS می تواند کارگشا باشد).
  3. از چک باکس و دکمه رادیویی فقط برای تغییر تنظیمات استفاده کنید و نه برای انجام عملیاتی که باعث رخ دادن چیزی شود. همچنین تنظیمات تغییر داده شده نباید به طور کامل به مرحله اجرا گذاشته شوند تا وقتی که کاربر روی دکمه فرمان کلیک کند. (مثلاً با نام OK یا "به مرحله XXX بروید" و XXX  همان قدم بعدی است).
  • اگر کاربر روی دکمه بازگشت کلیک ‌کند، همه تغییرات داده شده در چک باکس ‌ها و دکمه‌های رادیوییِ صفحه بایستی لغو شوند و تنظیمات به حالت سابق برگردانده شوند. همین توصیه برای وقتی که کاربر روی دکمه کنسل کلیک کند هم صادق است. (البته صفحات وب نیازی به گزینه کنسل ندارند زیرا دکمه بازگشت همین کار را انجام می‌دهد).
  • اگر کاربر در وب سایت ابتدا بر روی دکمه بازگشت و سپس بر روی دکمه بعدی کلیک کند، بهترین کار این است که این کار را به مثابه Undo-Redo در نظر بگیرید. به این معنی که ظاهر کنترل باید به گونه‌ای باشد که انگار کاربر هیچگاه بر روی دکمه بازگشت کلیک نکرده است. این تغییرات تا وقتی که کاربر روی دکمه "OK" کلیک نکرده یا فرمان بعدی را اجرا نکرده است، نباید عملی شوند.

 

دلیل اهمیت این توصیه‌ها

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

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

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

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

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


تگ ها : مقاله مقایسه چک باکس و دکمه رادیو ی تفاوت Radio با Checkbox در زبان html تغییر ظاهر چک باکس با روشی کاملا مبتنی بر CSS انواع فرم ها سایت طراحی PC.PRO استایل دهی چک باکس و دکمه رادیویی فرم های html معرفی کامل Checkbox radio select فرم ها فرم ها و ورودی ها در HTML فرم ها و ورودی های HTML آموزش سریع: دادن استایل به چک باکس ها و دکمه های رادیویی نسخه قابل چاپ فرم سفارشی در بوت استرپ 4 ( Bootstrap 4 Custom Forms ) آموزش نحوه ساختن چک باکس برای استفاده در فرمهای html آموزش اندروید، فصل 13: آشنایی مقدماتی با View های اندروید (بخش اول آموزش تصویری برنامه نویسی ویندوز 10 قسمت چهارم (کامل) فرم در html و ورودی های html • تم کد نکته کنترل های CheckBox و CheckBoxList آموزش سی‌شارپ C# چگونه با دلفی وب بنویسیم؟ شش روش مهم افزایش در دسترس بودن وبسایت آپارات آموزش HTML سیستم مدیریت محتوای داده ورزان فرم ساز تحت وب یا eform چیست ؟ CASCADE » دستی طراحی فرم ها در نسخه موبایلی وب سایت ها عناصر رابط کاربری در اندروید عناصر ورودی یا Input Elements در HTML آموزش ساخت پروژه ساده ی دفترچه تلفن شخصی با زبان Visual Basic دوره‌ی آموزش 0 تا 100 طراحی سایت بصورت کامل و حرفه ای با مدرس برتر مردانه اسپرت مدل g سینما 30 اینچی اپل آشنایی با فیلدهای قیمت گذاری فرم های ورود اطلاعات در HTML AppReview.ir Imaginext DC Super Friends RC افزونه حرفه ای ویژگی های محصول (yith Bar انواع ورودی HTML آموزش html ساختن فرم HTML با استفاده از تگ Form(بخش اول) امکانات بیشتر برای محصولات ووکامرس با افزونه WooCommerce آموزش زبان HTML (اچ تی ام ال) 10 نکته برای طراحی Form های خوب در وب clothing Culture and Art فیلم آموزش کار با فرم ها (form) در HTML فصل پنجم : آشنائی با زبان برنامه نویسی PHP : توابع بخش سوم بایگانی‌های دوره های آموزشی نصب SSL certificate بر روی سرور مجازی لینوکس در کنترل پنل دایرکت افزودن امکانات بیشتر به محصولات در ووکامرس با WooCommerce پیکری بندی Rras برای استفاده از مودم افزودن فیلد سفارشی به فرم نظرات وردپرس با WordPress Comments آموزش طراحی وب – جلسه پنجم – فرم [PDF]آموزش زبان html آموزش اکسل مراقبت های ویژه اورژانس معرفی تگ form افزونه عضویت حرفه‌ای وردپرس با user pro builder انتخاب چک باکس ها توسط jquery آموزش تمام روش‌های ویرایش فایل‌های پی دی اف به صورت آنلاین آموزش جامع برنامه نویسی اندروید با Android SDK و Eclipse – به زبان فرم ساز حرفه ای RSForm Pro فارسی برای نسخه 1.7 و 2.5 آموزش طراحی رابط کاربری و کاربردپذیری سایت UI/UX ایجاد فیلد اضافی در بخش نظرات وردپرس با افزونه WordPress HTML

نظرات