پست تنها



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

 

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

در صفحات وب معمولا ۹۰ درصد دکمه ها عمل پست کردن را به سرور انجام می دهند این پست ها می توانند آژاکسی (AJAX) و یا به صورت پست عادی انجام گردند.

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

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

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

به تصویر زیر نگاه کنید؛ Gmail با کادر بندی و رنگ دکمه ها را از سایر کنترل ها و دیگر المان ها متمایز کرده است.

رنگ بندی و چیدمان دکمه ها در جی میل

 

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

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

کادر بندی و رنگ بندی دکمه ها در HotMail

 

در این مقاله مطالب ارزشمندی وجود دارد آن را از دست ندهید:

 

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

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

توضیح عکس

 

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

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

توضیح عکس


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

توضیح عکس

 

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

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

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

توضیح عکس


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

 

توضیح عکس

 

در این مقاله مطالب ارزشمندی وجود دارد آن را از دست ندهید:

 

 

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

توضیح عکس


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

توضیح عکس

 

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

 

توضیح عکس

 

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

 

توضیح عکس

 

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

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

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

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

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

توضیح عکس

 

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

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

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

توضیح عکس

نظرات

  • نرگس ریاحی
    بهمن ۹, ۱۳۹۵

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

    • admin
      بهمن ۹, ۱۳۹۵

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

  • s_hasanpoor1983@yahoo.com
    بهمن ۱۰, ۱۳۹۵

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

    • admin
      بهمن ۱۱, ۱۳۹۵

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

  • نادر
    بهمن ۱۰, ۱۳۹۵

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

    • admin
      بهمن ۱۱, ۱۳۹۵

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

  • alizadeh.beyda@yahoo.com
    بهمن ۲۴, ۱۳۹۵

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

    • admin
      بهمن ۲۴, ۱۳۹۵

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

  • ایمان
    بهمن ۲۵, ۱۳۹۵

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

  • saya
    اسفند ۵, ۱۳۹۵

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

    • admin
      اسفند ۵, ۱۳۹۵

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

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

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