Design ဆိုင္ရာ Buttons ခလုတ္ အထားအသို နည္းနာမ်ား

Design ဆိုင္ရာ Buttons ခလုတ္ အထားအသို နည္းနာမ်ား google

Buttons ခလုတ္ေတြဟာ လာေရာက္သုံးစြဲသူနဲ႔ အျပန္အလွန္ ဆက္သြယ္လုပ္ကုိင္ဖုိ႔ မပါမျဖစ္ ထည့္သုံးၾကရတဲ့အရာ ျဖစ္ပါတယ္။

သုံးစြဲသူနဲ႔ စနစ္တုိ႔အၾကား အေမးအျဖေတြ လုပ္ဖုိ႔ အဓိကအားျဖင့္ သုံးစြဲၾကတယ္။ ကၽြန္ေတာ္တုိ႔ အႀကိမ္ေပါင္း မေရမတြက္ႏုိ္င္ေအာင္ ခလုတ္ေတြကုိ ႏွိပ္ဖူးၾကတယ္။ အဲဒီ ခလုတ္ေတြကုိ ဒီဇုိင္းဆင္တဲ့အခါ လုိက္နာအပ္တဲ့ စည္းမ်ဥ္း ၇ ခ်က္ကုိ တင္ျပမွာ ျဖစ္ပါတယ္။ အဲဒီ အေျခခံက်က် မူ ၇ ခ်က္ကုိ လုိက္နာရင္ အဲဒီခလုတ္ဟာ ထိထိေရာက္ေရာက္ သုံးလုိ႔ရမယ့္ ခလုတ္ button ျဖစ္ေနမယ္ဆုိတာ အာမခံပါတယ္။

၁။ button ေတြကုိ button ေတြနဲ႔ တူေအာင္ လုပ္ပါ။

UI (user interface) ဆက္သြယ္ေပါင္းကူးေပးတဲ့အခါ သုံးစြဲသူေတြဟာ ဘယ္ဟာက ကလစ္လုပ္လုိ႔မယ့္ဟာဆုိတာ ခ်က္ခ်င္း တန္းၿပီး သိႏုိင္ေအာင္ လုပ္ေပးထားဖုိ႔ လုိတယ္။ ဘယ္ဟာေတြကေတာ့ ကလစ္လုပ္ရမယ့္ဟာေတြ မဟုတ္ဘူးဆုိတာကုိလည္း တန္းၿပီး သိေအာင္ လုပ္ေပးထားဖုိ႔ လုိတယ္။ ဒီဇုိင္းအစိတ္အပုိင္းတုိင္းဟာ သုံးစြဲသူ ဘယ္ဟာက ကလစ္လုပ္လုိ႔ရမယ္ ဘယ္ဟာက မရဘူးဆုိတာ ဦးေႏွာက္မစားဘဲ သိႏုိင္ေအာင္ လုပ္ေပးထားရမွာ ျဖစ္ပါတယ္။ အဲဒီလုိ သိဖုိ႔ လုပ္တာအတြက္ အခ်ိန္ပုိၾကာေလ အဲဒီ ဒီဇုိင္းဟာ အသုံးမက်ေလပါပဲ။

သုံးစြဲသူေတြက button ကုိ button ပါလုိ႔ ဘယ္လုိလုပ္ၿပီး သိသလဲ။ သူတုိ႔မွာ အရင္က အေတြ႕အႀကံဳေတြ ရွိထားတယ္။  ကလစ္လုပ္စရာ ခလုတ္မွန္းသိသာေအာင္ အျမင္အားျဖင့္ အသိေပးထားတာေၾကာင့္လည္း သုံးစြဲသူေတြက button ပါဆုိတာ သိႏုိင္ပါတယ္။ အျမင္အားျဖင့္ သိသာထင္ရွားေစေသာအရာ  Visual signifier လုိ႔ ေခၚၾကတဲ့ဟာေတြမွာ အသိေပးတဲ့တာ၀န္ကုိ ထမ္းေဆာင္ႏုိင္မွ တန္ဖုိ္း ရွိမယ္။ သုံးစြဲသူ လုပ္တတ္ကုိင္တတ္သြားေအာင္ လုပ္ေပးႏုိင္စြမ္း ရွိရမယ္။

ဒီေတာ့ သုံးစြဲသူ ယခင္က ႀကံဳဖူးထားတဲ့ button ဒီဇုိင္းမ်ဳိးေတြနဲ႔ ျပသထားရင္ သူတုိ႔က ဒါဟာ button နဲ႔ တူတယ္။ button ျဖစ္မယ္လုိ႔ ေကာက္ခ်က္ခ်ၿပီး ကလစ္လုပ္မယ္။ အဲဒီ အစဥ္အလာ သေဘာတရားေၾကာင့္ .button ေတြကုိ button ေတြနဲ႔ တူေအာင္ လုပ္ပါဆုိတာ အေရးႀကီးတဲ့ စည္းမ်ဥ္းတစ္ခ်က္ ျဖစ္ပါတယ္။

ဒီေတာ့ ရင္းႏွီးၿပီးသား ဒီဇုိင္းမ်ဳိးေတြကုိ သုံးစြဲၾကရတယ္။ နမူနာအျဖစ္ သုံးစြဲသူေတြ တရင္းတႏွီးအျဖစ္ဆုံး button ေတြကုိ ေဖာ္ျပအပ္ပါတယ္။

အေပၚမွ သုံးခုက အမည္း အျပည့္ျဖည့္ထားတဲ့ filled button ေတြ ျဖစ္ပါတယ္။ ေအာက္ဆုံးက အျဖဴတည္ကုိ ေဘာင္ခတ္ျပထားတဲ့ button ျဖစ္ၿပီး Ghost button လုိ႔ ေခၚၾကတယ္။ အေပၚ ၃ ခုမွာ ေလးေထာင့္စပ္စပ္၊ ေထာင့္ေကြး၊ ေထာင့္ေကြး အရိပ္ထြက္ ဆုိၿပီး ကြဲျပားတယ္။ နမူနာအျဖစ္ ယွဥ္ျပထားတဲ့ ေလးခုမွာ  ေထာင့္ေကြး အရိပ္ထြက္ button ဟာ သုံးစြဲသူေတြအဖုိ႔ button ျဖစ္ေၾကာင္း အသိသာဆုံး ဒီဇုိင္း ျဖစ္ပါတယ္။

Button ကုိ ေနရာခ်ရင္ အနီးပတ္၀န္းက်င္မွာ ေနရာအလြတ္ေတြ ၀န္းရံေပးထားဖုိ႔ သတိရပါ။ ဒါမွ ထင္းထင္းႀကီး ေပၚေနတဲ့ button ျဖစ္ရမယ္။ အထူးသျဖင့္ အျဖဴထည္ Ghost button  ကုိ သုံးရင္ ေဘး.ပတ္ပတ္လည္မွာ ေနရာလြတ္ ထားေပးလုိက္ပါ။

၂။ သုံးစြဲသူက ေတြ႕ဖုိ႔ ေမွ်ာ္လင့္ထားတဲ့ ေနရာမ်ဳိးေတြမွာ button ကုိ ထားပါ။

Button ေတြကုိ သုံးစြဲသူ အလြယ္တကူ ေတြ႕ႏုိင္မယ့္ ေနရာမ်ဳိးေတြမွာပဲ ထားပါ။ ခလုတ္ကုိ လုိက္ရွာေနတဲ့ အျဖစ္မ်ဳိးကုိ မေရာက္ေစနဲ႔။ သူတုိ႔က ရွာလုိ႔ မေတြ႕ရင္ ကလစ္လုပ္စရာ ခလုတ္ ေပးမထားဘူးလုိ႔ပဲ ယူဆလုိက္ၾကလိမ့္မယ္။

ဒီကိစၥအတြက္ သမား႐ုိးက် သုံးေနက် အခင္းအက်င္း၊ သုံးေနက် UI အဆင္နဲ႔ ျဖစ္ႏုိင္ေသရြ႕ လုပ္ေပးလုိက္ပါ။ ဘာလုိ႔လဲဆုိေတာ့ သုံးေနက် ျဖစ္ရတာဟာ အလုပ္ျဖစ္လုိ႔ ဆက္သုံးေနၾကတာ ျဖစ္ပါတယ္။ အလုပ္မျဖစ္ရင္ ဘယ္သူက ဆက္သုံးေနဦးမွာလဲ။

 

၃။ Button ေတြမွာ ဘာလုပ္ဖုိ႔လဲဆုိတာ ေဖာ္ျပေပးထားပါ။

 

အဲဒီလုိေဖာ္ျပတ့ဲအခါ နားလည္မႈ မလႊဲဖုိ႔ ဂ႐ုစုိက္ပါ။ ထင္တာတျခား ျဖစ္တာတျခား ျဖစ္ေနေစတဲ့ button ေတြေၾကာင့္ သုံးစြဲသူ စိတ္တုိသြားေစတဲ့အျပင္ မွားႏွိပ္မိလုိ႔ ဒုကၡေရာက္ကုန္တာအထိ ျဖစ္သြားႏုိင္တယ္။ ေဖာ္ျပခ်က္ label ထုိးရင္ သတိခ်ပ္ပါ။ ေဖာ္ျပထားတဲ့ စာလုံး၊ အေရာင္ စတာေတြကလည္း ရွင္းရွင္းလင္း ျမင္သာဖတ္သာ ျဖစ္ေနေစရမွာ ျဖစ္ပါတယ္။

နမူနာေကာင္းတစ္ခုကုိ ေျပာျပပြဦးမယ္။ အရာ၀တၳဳတစ္ခုကုိ ဖယ္ရွားပစ္လုိ႔ button ထည့္ေပးထားတယ္။ အၿပီးအပုိင္ ဖယ္ရွား ပစ္မွာ ျဖစ္ေၾကာင္း ျပန္မရႏုိင္ေတာ့ေၾကာင္း ေနာက္ေၾကာင္း ျပန္မလွည့္နုိင္ေၾကာင္း အသိေပးထားတယ္။ အဲဒါအျပင္ အေရာင္ကုိ သတိေပးတဲ့ အေရာင္ျဖစ္တဲ့ အနီေရာင္ကုိ သုံးေပးထားတာကုိ ပုံမွာ ေတြ႕ျမင္နုိင္ပါတယ္။

 


၄။ Button အရြယ္အစား မမွားေစနဲ႔။

 

Button မွာ အရြယ္အစား ပုိႀကီးရင္ ပုိအေရးႀကီးတယ္လုိ႔ ေယဘုယ် သတ္မွတ္ခ်က္ရွိတယ္. ဒီေတာ့ ဦးစားေပးစာရင္းကုိ အရင္လုပ္ပါ။ ၿပီးရင္ button ေတြရဲ႕ အရြယ္အစားေတြကုိ သတ္မွတ္ပါ။ အေရာင္ကြဲျပားျခားနားမႈကုိလည္း သုံးပါ။

နမူနာအျဖစ္ Dropbox မွာ သုံးစြဲထားပုံကုိ တင္ျပေပးလုိက္ပါတယ္။


 

မုိဘုိင္းဖုန္းအတြက္ button ဆုိရင္ လက္ဖ်ားျဖင့္ တုိ႔သာေအာင္ အရြယ္အစားကုိ သတ္မွတ္ေပးထားရမယ္။ အဲဒါမွ သုံးစြဲရလြယ္ကူၿပီး သုံးစြဲသူရဲ႕ လက္ဖ်ားကုိ အဆင္ေျပေနေစမယ့္ finger-friendly ခလုတ္ ျဖစ္ေနမယ္။


MIT Touch Lab
က လက္ဖ်ားတုိ႔ထိ္ၿပီး ခလုတ္ႏွိပ္တာကုိ ေလ့လာစူးစမ္းထားတယ္။ လက္ဖ်ားနဲ႔ ထိမယ့္ button ရဲ႕ အရြယ္အစားစာ ၁၀ မွ ၁၄ မီလီမီတာ အတြင္း ရွိသင့္တယ္။ အဲဒီေတာ့မွ တုိ႔ထိမယ့္ ဧရိယာ ၁၀ မီလီမီတာ ပတ္လည္ကုို အဆင္ေျပေနမယ္။

 

 


Image Source: uxmag

၅။ ဘာၿပီး ဘာလာမလဲ ဆုိတာ ဂ႐ုစုိက္ပါ။

သုံးစြဲသူနဲ႔ စနစ္တုိ႔ ေမးျမန္းေျဖဆုိဖုိ႔ button ေတြကုိ သုံးထားတယ္။ ဥပမာအားျဖင့္ ‘Previous/Next’ ဆုိတာအတြက္ button ေတြကုိ ေနရာခ်မယ္ ဆုိပါေတာ့။ ယခင္ Previous ကုိ ၀ဲဘက္မွာ ထားၿပီး Next ကုိ ယာဘက္မွာ ထားၾကပါတယ္။  စာအုပ္မွာ စာဖတ္ရင္ ယခင္စာမ်က္ႏွာက ၀ဲဘက္မွာ ရွိၿပီး လာမယ့္ စာမ်က္ႏွာေတြက ယာဘက္မွာ ရွိေနပါတယ္။ အဲဒီလုိ သုံးစြဲသူေတြ သိထားတာကုိ အေျခခံၿပီး ယခုလုိ သတ္မွတ္ေပးၾကတာ ျဖစ္ပါတယ္။

 

. Button ေတြ အမ်ားႀကီး မသုံးရ

 

ဒီအခ်က္က ၀က္ဘ္ဆုိက္ေတြ အက္ပ္ေတြမွာ ျဖစ္ေနက် ျပႆနာ ျဖစ္ပါတယ္။ လူတစ္ေယာက္ကုိ ေမးခြန္းေတြ တသီတတန္း ေမးရင္ သူ ဘာေျဖရမွန္း သိေတာ့မွာ မဟုတ္ဘူး။ ခလုတ္ေတြ မ်ားေနရင္လည္း ဘာကုိ ႏွိပ္ရမွန္း ႐ုတ္တရက္ သူသိေတာ့မွာ မဟုတ္ဘူး။ အခ်ိန္ယူ ေလ့လာစဥ္းစား ေတြးဆၿပီးမွ ခလုတ္ကုိ ေရြးခ်ယ္ၿပီး ႏွိပ္ရလိမ့္မယ္။ ျဖစ္ေလ့ျဖစ္ထ ရွိတာကေတာ့ သုံးစြဲသူေတြက ဘာမွ မလုပ္ေတာ့ဘဲ ျပန္လွည့္ထြက္သြားၾကတာ ျဖစ္ပါတယ္။ သုံးစြဲသူတစ္ဦး ေရာက္လာတဲ့အခါ သူ႔ကုိ အလုပ္ေစခ်င္က ဘာလဲ။ အဲဒါအတြက္သာ ခလုတ္ေတြ ထားေပးရမွာ ျဖစ္ပါတယ္။

 


၇ ႏွိပ္ၿပီးရင္ တစ္ခုခု ျဖစ္ျပလုိက္ပါ။

သုံးစြဲသူက ခလုတ္ကုိ ႏွိပ္လုိက္တယ္။ အဲဒီအခါ အေၾကာင္းျပန္ အသိေပးခ်က္ feedback ကုိ သူ ေမွ်ာ္လင့္တယ္။ ဘာမွ ျဖစ္မျပရင္ သူက ခလုတ္ကုိ ေသခ်ာေအာင္ ထပ္ႏွိပ္လိမ့္မယ္။ ဒီေတာ့ အျမင္အားျဖင့္ ျပသၿပီးေတာ့ ျဖစ္ေစ၊ အသံျမည္ေပးၿပီးေတာ့ ျဖစ္ေစ ခလုတ္ကုိ ႏွိပ္လုိက္ေၾကာင္း သူသိေအာင္ feedback ေပးရမယ္။ ၾကာမယ္ဆုိရင္ ဘာလုပ္ေပးေနၿပီ ဆုိတာကုိ အသိေပးရမယ္။  ဥပမာ download လုပ္တဲ့ button ကုိ ႏွိပ္ၿပီးရင္ download စၿပီ။ ဘယ္ေလာက္အထိ ၿပီးသြားၿပီ ။ ၿပီးစီးပါၿပီ ဆုိၿပီး အဆက္မျပတ္ အသိေပးေနဖုိ႔ လုိမယ္။ ဘာမွ လုပ္မေပးေသးရင္လည္း အ၀ုိင္းေလး လည္ျပေနဖုိ႔ေတာ့ လုိပါတယ္။

နိဂုံးခ်ဳပ္အေနျဖင့္ ေျပာခ်င္တာက button ေတြကုိ ေနရာတကာမွာ သုံးၾကတယ္။ ဘယ္မွာသုံးသုံး စည္းမ်ဥ္း ၇ ခ်က္ကုိ ဂ႐ုစုိက္ပါ။


Source: 7 Basic Rules for Button Design by Nick Babich

Related article :  Feedback ျပန္အသိေပးျခင္း

Feedback ျပန္အသိေပးျခင္း

 



Read 129 times
Rate this item
(0 votes)