در UX ( تجربه کاربری ) دکمه ها گاو بنفش هستند

کانال تلگرام سایت کد تجاری


در UX ( تجربه کاربری ) راز Button ها، گاو بنفش است.



دکمه ها :

در هر فرم ورود اطلاعاتی رد پایی از دکمه ها وجود دارند که با کلیک بر روی آنها فعالیتی آغاز یا پایان می یابد.

آنها  در نرم افزارهای تحت وب و تحت ویندوز دارای نقش هایی خاص و یا مشترک می باشند. نقش های مشترک دکمه ها عملیات CRUD بوده و برای عملیات  ثبت ، ویرایش، بروزرسانی، حذف به کار می روند و بقیه دکمه ها هم به نحوی زیر مجموعه این عملیات می باشند. در صفحات وب معمولا ۹۰ درصد دکمه ها عمل پست کردن را به سرور انجام می دهند این پست ها می توانند آژاکسی و یا به صورت پست عادی انجام گردند.




تمایز در طراحی دکمه ها:

طراحی دکمه ها در وب به هر شکلی امکان پذیر است اما بهتر است که شکل طراحی مانند دکمه بوده و سبک آنها طوری باشد که روی صفحه  برآمده باشند و در صورتی که نوع طراحی Flat باشد بهتر است با تغییر اندازه یا کادر بندی آن را شبیه دکمه کنید.



مثال اول : دکمه های Gmail :

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





مثال دوم : دکمه های HotMail:

با تغییر سایز و رنگ فونت دکمه و پس زمینه ، تمایز دکمه با سایر کنترل ها را ایجاد کرده است:


در صورتی که از این مقاله راضی هستید این مقااله را نیز ازدست ندهید “تجربه کاربری در بکارگیری از Label ها در فرم های ورود اطلاعات”




رنگ مناسب برای دکمه ها و آیکونها:

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





در رنگ بندی دکمه ها هم بهتر است قاعده گاو بنفش را رعایت کنید و دکمه های خاص را با رنگ خاص نشان دهید و من هم مایلم در این مقاله اصطلاح دکمه بنفش(که هر رنگی می تواند باشد) را تعریف کنم.

مثل دکمه لاگین ،ایجاد حساب کاربری ، خرید و غیره در ادامه چند نمونه خوب را نشان می دهیم:





چند نمونه بد هم نشان می دهیم و همانطور که می بینید هیچ جلب توجهی ایجاد نمی کنند:






محل قرارگیری دکمه:

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

 

در روش اول در فرم های فارسی می توانید دکمه را در سمت چپ فرم قرار داده و با کنترلهای ورود اطلاعات هم تراز نمائید:





در روش دوم دکمه ها را به اندازه فیلدهای ورود اطلاعات درآورید:




در صورتی که از این مقاله راضی هستید این مقااله را نیز ازدست ندهید “راز فرم های پرشونده توسط کاربران با طعم تجربه کاربری

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

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





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





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





و البته در فرم های ورود اطلاعات تحت ویندوز شاید بهتر باشد دکمه های crud همگی در صفحه وجود داشته باشند  و بهتر است یک جعبه ابزار در بالا برای تمامی دکمه ایجاد کنیم و حتما دکمه ی shortcut نیز در نظر بگیرید:






استفاده از آیکن ها:

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




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

در صورتی که فرمانی مشخص به سیستم برای گرفتن پاسخ (اجرای الگوریتم یا درخواست منبع در سرور) داده نمی شود بهتر است از برچسب لینک به جای یک دکمه استفاده گردد.

مثلا برای ارائه ی راهنما به کاربر از لینک به جای دکمه استفاده نمایید.






 انتخاب عنوان مناسب برای دکمه ها:

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






درباره نویسنده

مطالب مرتبط

11 نظر

  1. نرگس ریاحی

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

    پاسخ
  2. نادر

    مقاله دارای مطالب مفیدی بود، برنامه نویسی فقط کد نوشتن نیست بلکه این نکات زیر هستن که باعث رضایت کاربر میشن.
    ممنون از شما

    پاسخ

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دانلود رایگان
فایل ویدئویی خاطرات نرم افزارهای 14 سال قبل استاد مدحج + پروژه عظیم کدهای سایت کد تجاری
دانلود رایگان
فایل صوتی راز کیفیت محصولات اپل با شی گرا
دانلود رایگان
مالکیت فکری نرم افزار در داخل تیم تولید و خارج از آن
دانلود رایگان
نگاه شی گرا با استفاده از مکانیزم طبیعی ذهن در تولید نرم افزار
دانلود رایگان
گزارش سازی با linqtosql و stimulsoft
در حال بروزرسانی سایت هستیم بابت اینکه جهت انجام تغییرات صبور هستید سپاسگزاریم
دانلود رایگان
مالکیت فکری نرم افزار در داخل تیم تولید و خارج از آن