Design

Tips for Perfect Button

အားလုံးပဲ မဂၤလာပါရွင့္။
ညီမကေတာ့ Spiceworks Myanmar Company တြင္ Web Designer အျဖစ္ ဝင္ေရာက္ အလုပ္လုပ္ကိုင္ေနတဲ့ မဇင္ႏုေထြး ျဖစ္ပါတယ္ရွင့္။
ဒီတပတ္မွာေတာ့ website သို႔မဟုတ္ application design ေရးဆြဲရာမွာ အစိတ္အပိုင္းတစ္ခု အေနနဲ႔ အေရးပါေသာ button နဲ႔ပတ္သက္သည့္ အေျခခံက်ၿပီး စနစ္တက်ေရးဆြဲသင့္တဲ့ အခ်က္ေလးေတြကို မွ်ေဝေပးသြားမွာ ျဖစ္ပါတယ္။

Button ဆိုသည္မွာ user မ်ားမွ ျပဳလုပ္လိုက္သည့္ လုပ္ေဆာင္ခ်က္၊ ေ႐ြးခ်ယ္မႈမ်ားေပၚမူတည္၍ ဆက္သြယ္ခ်ိတ္ဆက္ေပးရေသာ အစိတ္အပိုင္းတစ္ခုျဖစ္ပါတယ္။
၎တို႔ကို မ်ားေသာအားျဖင့္ forms, home page, dialog box အစရွိေသာေနရာမ်ားတြင္ ထည့္သြင္းအသုံးျပဳေလ့ရွိၾကပါတယ္။
အျခားေသာ page တစ္ခုသို႔ ခ်ိတ္ဆက္ေပးသည့္ link တစ္ခုအေနနဲ႔ျဖစ္ေစ၊ form submit အေနနဲ႔ျဖစ္ေစ၊ purchase function အေနနဲ႔ျဖစ္ေစ function အမ်ိဳးမ်ိဳးအေနျဖင့္ လုပ္ေဆာင္ေပးလ်က္ရွိပါတယ္။
User မ်ားအေနျဖင့္လည္း မည္သည့္လုပ္ေဆာင္ခ်က္ကိုမဆို နားလည္သေဘာေပါက္မွသာ အသုံးျပဳရ လြယ္ကူေစမွာျဖစ္ပါတယ္။
ထို႔ေၾကာင့္ designer မ်ားအေနနဲ႔ user မ်ား အသုံးျပဳရလြယ္ကူၿပီး အဆင္ေျပေစရန္ ရည္႐ြယ္၍ ေအာက္တြင္ေဖာ္ျပေပးမည့္ အခ်က္ေလးေတြကို လိုက္နာၿပီး စနစ္တက် ေရးဆြဲေပးရန္ လိုအပ္ပါတယ္။

၁။ Button ႏွင့္တူေအာင္ ဖန္တီးေပးရန္
၂။ User မ်ား ျမင္သာေစတဲ့ေနရာမွာ ထားေပးရန္
၃။ ေဖာ္ျပလိုေသာ button ရဲ႕ လုပ္ေဆာင္ခ်က္ကို label အေနနဲ႔ အသုံးျပဳေပးရန္
၄။ Button အမ်ိဳးအစား ႏွင့္ state မ်ား
၅။ Button အ႐ြယ္အစား
၆။ Button မ်ားစြာ အသုံးျပဳထားျခင္း ႏွင့္ ေနရာ၊ အစီအစဥ္
အစရွိသည္တို႔ျဖစ္ပါတယ္။

၁။ Button ႏွင့္တူေအာင္ ဖန္တီးေပးရန္
User မ်ားရဲ႕ action လိုအပ္သည့္အတြက္ user မ်ား ျမင္သည့္အခါ click လို႔ ရမရ ကြဲကြဲျပားျပားသိေစဖို႔ လိုအပ္ပါတယ္။
ထို႔ေၾကာင့္ button ရဲ႕ size, shape, color, shadow, transition မ်ားကို အသုံးျပဳၿပီး button တစ္ခုအေနနဲ႔ သိသာေအာင္ ဖန္တီးေပးထားမွသာ user မ်ားအတြက္ အသုံးျပဳရအဆင္ေျပေစမွာ ျဖစ္ပါတယ္။

၂။ User မ်ား ျမင္သာေစတဲ့ေနရာမွာ ထားေပးရန္
Button ကို user မ်ား အလြယ္တကူေတြ႕ျမင္ႏိုင္ေစရန္ သို႔မဟုတ္ ပုံမွန္အသုံးျပဳရန္ အထားမ်ားေလ့ရွိတဲ့ ေနရာမ်ားမွာ ထားေပးရန္လည္း လိုအပ္ပါတယ္။
Userမ်ားက button ကိုရွာမေတြ႕လွ်င္ user မ်ားအတြက္ ရႈပ္ေထြးသြားေစႏိုင္ၿပီး အဆင္မေျပျဖစ္သြားေစႏိုင္ပါတယ္။
Button ဖန္တီးရာမွာ ပုံမွန္ အသုံးျပဳမ်ားေလ့ရွိၾကသည့္ ပုံစံမ်ားကို တတ္ႏိုင္သမွ် အေျခခံထား၍ ဖန္တီးေပးျခင္းျဖင့္ user မ်ားကို ပိုမိုလြယ္ကူေစမွာ ျဖစ္ပါတယ္။
႐ိုးရွင္းၿပီး လွပေသာ button design ကို အသုံးျပဳေပးျခင္းျဖင့္လည္း user မ်ားရဲ႕ အာ႐ုံကို ပိုမိုရရွိေစမွာ ျဖစ္ပါတယ္။

၃။ ေဖာ္ျပလိုေသာ button ရဲ႕ လုပ္ေဆာင္ခ်က္ကို label အေနနဲ႔ အသုံးျပဳေပးရန္
Button မ်ား၏ လုပ္ေဆာင္ေပးေစခ်င္ေသာ လုပ္ေဆာင္ခ်က္မ်ားကို နားလည္ေစရန္ label မ်ားထားေပးျခင္းျဖင့္ ရွင္းရွင္းလင္းလင္း ေဖာ္ျပေပးရပါမယ္။
သို႔မွသာ အသုံးျပဳသူမ်ား အေနနဲ႔ နားလည္ေစၿပီး ရွင္းလင္းေစမွာ ျဖစ္ပါတယ္။

၄။ Button အမ်ိဳးအစား ႏွင့္ state မ်ား
လုပ္ေဆာင္ေပးေစခ်င္ေသာ function ေပၚမူတည္၍ button အမ်ိဳးအစားအသုံးျပဳမႈကို ခြဲခြဲျခားျခား အသုံးျပဳေပးရန္အခ်က္ကလည္း အေရးပါေသာ အခ်က္ အေနနဲ႔ပါဝင္ပါတယ္။
userမ်ား အေနနဲ႔ မ်ားေသာအားျဖင့္  ရင္းႏွီးေစေသာ button အမ်ိဳးအစား ၄ မ်ိဳးရွိပါတယ္။
၁။ Filled button with square borders
၂။ Filled button with rounded corners
၃။ Filled button with shadows
၄။ Ghost button


ဒါ့အျပင္ အေရာင္မ်ားကို သတ္မွတ္ ဖန္တီးေပးျခင္းျဖင့္လည္း user မ်ားအတြက္ ေဖာ္ျပခ်င္ေသာ အေၾကာင္းအရာ၏ ရည္႐ြယ္ခ်က္ကို အလြယ္တကူ နားလည္ေစမွာ ျဖစ္ပါတယ္။


Button တစ္ခုေရးဆြဲလွ်င္ button ရဲ႕ state (hover, active, disabled, loading အစရွိေသာ) လုပ္ေဆာင္ခ်က္မ်ားရဲ႕ design ကိုပါ ထည့္သြင္း စဥ္းစားၿပီး ဖန္တီးရန္လိုအပ္ပါတယ္။

၅။ Button အ႐ြယ္အစား
အေရးပါမႈတစ္ခုတည္း အေနနဲ႔ buttonရဲ႕ အ႐ြယ္အစားကို ဂ႐ုျပဳေစခ်င္တာ မဟုတ္ဘဲ ပုံမွန္ pc (personal computer)နဲ႔ အသုံးျပဳသူေတြအတြက္ button အႀကီးအေသး အ႐ြယ္အစားက မသိသာေပမဲ့ mobile phone မ်ားနဲ႔ အသုံးျပဳသူမ်ားအတြက္ကေတာ့ လက္ျဖင့္ ထိ၍ အသုံးျပဳရတာျဖစ္တဲ့အတြက္ အ႐ြယ္အစားကို သတိထားရမည့္ အခ်က္အေနနဲ႔ စဥ္းစားရန္ လိုအပ္ပါတယ္။
ေလ့လာေတြ႕ရွိခ်က္မ်ားအရ လက္​ေခ်ာင္းထိပ္မ်ား၏ ပ်မ္းမွ်အ႐ြယ္အစားမွာ ၁၀မီလီမီတာ မွ ၁၄ မီလီမီတာ အတြင္းရွိေလ့ရွိၾကပါတယ္။
ထို႔ေၾကာင့္ button size ကို အနည္းဆုံး ၁၀မီလီမီတာx၁၀မီလီမီတာ ထားေပးျခင္းျဖင့္ userမ်ားအတြက္ အဆင္ေျပေစမွာ ျဖစ္ပါတယ္။
1mm = 3.7795275591 px


အ႐ြယ္အစားဟုဆိုရာတြင္ width, height ပဲမဟုတ္ဘဲ padding, spacing မ်ားကိုလည္း အခ်ိဳးအစားညီမွ်စြာ အသုံးျပဳေပးရန္လည္း လိုအပ္ပါတယ္။

၆။ Button မ်ားစြာ အသုံးျပဳထားျခင္း ႏွင့္ ေနရာ၊ အစီအစဥ္
Button မ်ားကို လိုအပ္သည္ထက္ မ်ားစြာ ထည့္သြင္းအသုံးျပဳထားျခင္းမွာ website မ်ား၊ application မ်ားတြင္ ေတြ႕ရေလ့ရွိတဲ့ ျပႆနာတစ္ခုျဖစ္ပါတယ္။
Userမ်ားကို အျမင္အာ႐ုံရႈပ္ေထြးသြားေစမွာ ျဖစ္ပါတယ္။
Button တစ္ခုထပ္ပိုၿပီး အသုံးျပဳမည္ဆိုလွ်င္ user မ်ားရဲ႕ အေတြ႕အႀကဳံအရ နားလည္ထားသည့္၊ နားလည္လြယ္သည့္ အစီအစဥ္အတိုင္း ဦးစားေပး စီစဥ္ေပးထားရန္လည္း လိုအပ္ပါတယ္။

သို႔ျဖစ္ပါ၍ အထက္တြင္ေဖာ္ျပေပးထားခဲ့ေသာ အခ်က္မ်ားကို လိုက္နာၿပီး စနစ္တက် ဖန္တီးေပးျခင္းျဖင့္ ပိုမိုလွပ ျပည့္စုံေသာ design အေနနဲ႔ ရရွိလာေစမွာျဖစ္ပါတယ္။
အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးခဲ့ၾကတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္ရွင့္။ ယခုလို ဖတ္ရႈလိုက္ရလို႔လည္း ဗဟုသုတ တစ္ခုအေနနဲ႔ အနည္းငယ္ တိုးပြားလာလိမ့္မည္လို႔လည္း ေမွ်ာ္လင့္မိပါတယ္။
ဒီ blog ေလးကို ဖတ္ၿပီး design နဲ႔ပတ္သက္တဲ့ အေၾကာင္းအရာမ်ားႏွင့္ အျခားေသာ အေၾကာင္းအရာမ်ားကို ဆက္လက္ ဖတ္ရႈ႕ေလ့လာလိုလွ်င္ https://spiceworksmyanmar.com/blog/ link မွ တစ္ဆင့္
မိမိစိတ္ဝင္စားေသာ အေၾကာင္းအရာေလးေတြကို ေ႐ြးခ်ယ္ဖတ္ရႈ ေလ့လာလို႔လည္း ရပါတယ္ရွင့္။ ေက်းဇူးတင္ပါတယ္ရွင့္။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *