سیاوش شماعیل زاده
سیاوش شماعیل زاده
خواندن ۴ دقیقه·۳ سال پیش

7 قانون کلیدی برای طراحی یک دکمه

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



1- یک دکمه باید شبیه یک دکمه باشد:

کاربران شما در نگاه اول باید متوجه شوند که این شکل عجیب و غریب یک دکمه است که می توانند روی آن کلیک کنند. اما کاربران چطور این را متوجه می شوند؟

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

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

سعی کنید از طرح های آشنا برای دکمه هایتان استفاده کنید.

  • دکمه تو پر مستطیلی با گوشه تیز
  • دکمه تو پر مستطیلی با گوشه گرد
  • دکمه تو پر به همراه سایه
  • دکمه های تو خالی با کادر ( شبح )
انواع طرح های مرسوم دکمه
انواع طرح های مرسوم دکمه

فضاهای خالی را فراموش نکنید.

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

نمتوان تشخصی داد این دکمه است یا جعبه نوشته
نمتوان تشخصی داد این دکمه است یا جعبه نوشته


2- دکمه هارا جایی قرار دهید که کاربران انتظار آن را دارند

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


3- دکمه هار برچسب گذاری کنید:

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

نمونه توضیح مبهم در دکمه
نمونه توضیح مبهم در دکمه


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

نمونه ای از نشان دادن یک اقدام خطرناک با رنگ قرمز در یک اپلیکیشن بانکی
نمونه ای از نشان دادن یک اقدام خطرناک با رنگ قرمز در یک اپلیکیشن بانکی


4-اندازه دکمه ها را به درستی انتخاب کنید.

اندازه یک دکمه باید اولویت این عنصر در صفحه نمایش را مشخص کند، هر چه دکمه بزرگتر اقدام مهمتر!

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

استفاده از اندازه و کنتراست رنگ در سایت دراپ باکس
استفاده از اندازه و کنتراست رنگ در سایت دراپ باکس

برای کاربرانی که در تلفن همراه سایت یا اپ شما را می بینند دکمه هارا بهینه سازی کنید. دکمه های کوچک باعث عدم کلیک و اشتباه در انتخاب گزینه و ناخوانایی برچسب روی آن می شود.

اندازه دکمه اشتباه
اندازه دکمه اشتباه


مطالعات نشان داده است که ماینگین اندازه سطح انگشت بین 10-14 میلی متر و نوک انگشتان بین 8 الی 10 میلی متر می باشد که نشان میدهد اندازه حداقل 10 میلی متر برای یک دکمه انتخاب درست و. معقولی است.

سایز مناسب برای دکمه ها
سایز مناسب برای دکمه ها

5- به نظم و منطق توجه کنید

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


6- از دکمه ها زیاد استفاده نکنید

همواره این نکته مهم را به خاطر داشته باشد " هر چه گزینه ها بیشتر باشد انتخاب سخت تر می شود". زیاد بودن دکمه ها می تواند به این منجر شود که کاربرانتان هیچ کاری نکنند. چرا که به آنها نگفتید مهمترین کار دقیقا کدام است؟

دکمه های زیاد باعث سردرگمی می شوند
دکمه های زیاد باعث سردرگمی می شوند


7- بازخورد های صوتی و بصری را به کار بگیرید

هنگامی که کاربران روی یک دکمه کلیک می کنند یا به آن اشاره میکنند انتظار دارند که یک پاسخ مناسب در یافت کنند. مثلا تکان خوردن، تغییر رنگ، ایجاد صدا و ...

حالت های بازخورد مختلف
حالت های بازخورد مختلف


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

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

نمایش وضعیت و پیشرفت عملیات
نمایش وضعیت و پیشرفت عملیات


نتیجه:

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

از اینکه با من بودید ممنونم!

uiuxطراحیطراحی وبرابط کاربری
توی ویرگول مینویسم، میخونم، ترجمه میکنم. بیشتر توی اقتصاد و کسب و کار! طراحی برام مهمه و عاشق تکنولوژیم.
شاید از این پست‌ها خوشتان بیاید