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

دکمه ها از عناصر مهم در طراحی هر وبسایتی به شمار می روند و در حقیق این دکمه ها هستند که پول را به جیب های شما سرازیر می کنند، هر زمان که دکمه "انتشار" محصول یا مطلبی را می فشارید یا هر زمان که کاربرانتان دکمه "افزودن به سبد خرید" یا "پرداخت" را کلیک می کنند این واقعیت بیشتر نمایان می شود . اما یک دکمه خوب باید چه ویژگی هایی داشته باشد؟1- یک دکمه باید شبیه یک دکمه باشد:کاربران شما در نگاه اول باید متوجه شوند که این شکل عجیب و غریب یک دکمه است که می توانند روی آن کلیک کنند. اما کاربران چطور این را متوجه می شوند؟کاربران بر اساس تجربه های قبلی و تعامل هایی که قبلا با سایر وبسایت ها یا اپلیکیشن ها داشته اند این را متوجه خواهند شد، به واسطه رنگ، شکل، محل قرارگیری و نوشته روی آن.گاهی اوقات زیبایی خیره کننده یک دکمه اصلا مهم نیست آن هم زمانی است که استفاده از دکمه یا تشخیص آن برای کاربرانتان سخت باشد. همواره باید به این نکته توجه داشته باشید که تفسیر شما به عنوان طراح به هیچ وجه با تفسیر یک کاربر برابر نیست چرا که شما می دانید که هر عنصر در سایتتان چه عملکردی دارد و کاربران این را نمی دانند.سعی کنید از طرح های آشنا برای دکمه هایتان استفاده کنید.دکمه تو پر مستطیلی با گوشه تیزدکمه تو پر مستطیلی با گوشه گرددکمه تو پر به همراه سایهدکمه های تو خالی با کادر ( شبح )انواع طرح های مرسوم دکمهفضاهای خالی را فراموش نکنید.نه تنها ویژگی های بصری یک دکمه مهم است بلکه مقدار فضای خالی اطراف دکمه نیز اهمیت بالایی دارد. وجود فاصله مناسب باعث می شود کاربرانتان متوجه شوند که این شی برای تعامل ساخته شده و می توانند روی آن کلیک کنند. برخی از کاربران ممکن است دکمه های شبح را با جعبه نوشته اشتباه بگیرند.نمتوان تشخصی داد این دکمه است یا جعبه نوشته2- دکمه هارا جایی قرار دهید که کاربران انتظار آن را دارنددکمه هارا باید در دید کاربرانتان قرار دهید تا به راحتی آنها را ببینند، آنها شکارچیان دکمه نیستند که سایت شما را در جستجوی یک دکمه زیر و رو کنند. شما می توانید این را با تست های مختلف پیدا کنید یا هم از سایت های معروف و مشهور دیگر الگو برداری کنید.ترکیب طرح بندی های سنتی، فضای مناسب و الگو های استاندارد قابلیت کشف دکمه شمارا بالا می برند.3- دکمه هار برچسب گذاری کنید:دکمه هایی با برچسب های عمومی بسیار گمراه کننده و ترسناک هستند، کاربران متوجه نمی شوند در پس این دکمه چه چیزی انتظار آنها را می کشد، توضیحات روی دکمه شما باید مشخصا و به وضوح توضیح دهد عملکرد این دکمه چه خواهد بود به عنوان مثال در تصویر زیر کاربران متوجه نمی شوند که در پس دکمه کنسل چیست یا اوکی چه مفهومی دارد. آنها تصور میکنند با کلیک روی کنسل ابجکت مورد نظرشان حذف می شود و عده هم تصویر می کنند که جلوی حذف را می گیرند. شما چطور فکر میکنید؟نمونه توضیح مبهم در دکمه بهتر است در این مواقع از عبار مناسب تری مانند Remove استفاده کنند و اگر با این کار عمل خطرناکی را انجام می دهند می توانید رنگ دکمه را هم قرمز کنیدنمونه ای از نشان دادن یک اقدام خطرناک با رنگ قرمز در یک اپلیکیشن بانکی4-اندازه دکمه ها را به درستی انتخاب کنید.اندازه یک دکمه باید اولویت این عنصر در صفحه نمایش را مشخص کند، هر چه دکمه بزرگتر اقدام مهمتر!با بزرگتر نشان دادن دکمه اهمیت آن را نشان می دهید و با استفاده از تضاد رنگ می توانید توجه کاربران را جلب کنید.استفاده از اندازه و کنتراست رنگ در سایت دراپ باکسبرای کاربرانی که در تلفن همراه سایت یا اپ شما را می بینند دکمه هارا بهینه سازی کنید. دکمه های کوچک باعث عدم کلیک و اشتباه در انتخاب گزینه و ناخوانایی برچسب روی آن می شود.اندازه دکمه اشتباهمطالعات نشان داده است که ماینگین اندازه سطح انگشت بین 10-14 میلی متر و نوک انگشتان بین 8 الی 10 میلی متر می باشد که نشان میدهد اندازه حداقل 10 میلی متر برای یک دکمه انتخاب درست و. معقولی است.سایز مناسب برای دکمه ها5- به نظم و منطق توجه کنیددکمه های قبل و بعد را در نظر بگیرید . طبیعتا انتظار داریم دکمه بعد در سمت راست و دکمه قبل در سمت چپ باشد. این چیزی است که اغلب افراد به آن عادت کردند و انتظار دارند.6- از دکمه ها زیاد استفاده نکنیدهمواره این نکته مهم را به خاطر داشته باشد " هر چه گزینه ها بیشتر باشد انتخاب سخت تر می شود". زیاد بودن دکمه ها می تواند به این منجر شود که کاربرانتان هیچ کاری نکنند. چرا که به آنها نگفتید مهمترین کار دقیقا کدام است؟دکمه های زیاد باعث سردرگمی می شوند7- بازخورد های صوتی و بصری را به کار بگیریدهنگامی که کاربران روی یک دکمه کلیک می کنند یا به آن اشاره میکنند انتظار دارند که یک پاسخ مناسب در یافت کنند. مثلا تکان خوردن، تغییر رنگ، ایجاد صدا و ...حالت های بازخورد مختلفاگر از این بازخورد ها استفاده نکنید کاربران گمان میکنند عمل مورد نظر انجام نشده یا این دکمه خراب است.مثلا شما می تواند بعد از کلیک کاربر روی دکمه وضعیت فعلی را به اون نشان دهید.نمایش وضعیت و پیشرفت عملیاتنتیجه:دکمه ها عناصر کوچکی هستند اما ارزش توجه بالایی دارند و باید از نظر رابط کاربری و تجربه کاربری تا حد ممکن خوب به نظر برسند.از اینکه با من بودید ممنونم!