پست تنها



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

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


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



دکمه ها :

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

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




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

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



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

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





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

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


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




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

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





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

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





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






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

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

 

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





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




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

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

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





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





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





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






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

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




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

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

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






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

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






نظرات

  • نرگس ریاحی
    ژانویه 28, 2017

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

    • admin
      ژانویه 28, 2017

      ممنون از انرژی مثبتتون

  • s_hasanpoor1983@yahoo.com
    ژانویه 29, 2017

    با سلام وخسته نباشد
    ممنون از زحماتتون و مطالب مفیدی که تو سایتتون قرار می دین

    • admin
      ژانویه 30, 2017

      ممنون از شما که مطالعه می فرمایید

  • نادر
    ژانویه 29, 2017

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

    • admin
      ژانویه 30, 2017

      خوشحالیم که در پروژه های تجاریتون بتونیم اثرگذار باشیم

  • alizadeh.beyda@yahoo.com
    فوریه 12, 2017

    با سلام
    سایت کد تجاری مثل همیشه عالی است
    این مقاله نکات بسیار مفیدی داشت
    ممنون

    • admin
      فوریه 12, 2017

      درود بر شما امیدواریم دیگر مقالات ux نیز مورد توجه قرار گرفته باشد

  • ایمان
    فوریه 13, 2017

    با سلام
    بسیار مطلب مفید و ارزنده ای است . اگر امکان دانلود مقاله به صورت PDF و پرینت اون بود خیلی خوب میشد

  • saya
    فوریه 23, 2017

    باسلام ودرود
    مطالب جالب وباانرژی مثبت انتقال داده شد.مثل همیشه عالی!
    سایت کدتجاری مفیدوپرمحتواست!

    • admin
      فوریه 23, 2017

      از اینکه برایتان جذاب و کاربردی بوده است خیلی خوشحال هستیم از انرژی مثبتتون ممنونیم

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

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