ထိရောက်ကောင်းမွန်တဲ့ User Interface တွေကို တည်ဆောက်တဲ့ နေရာမှာ သိထားသင့်သည့် လက်တွေ့ နည်းစနစ်များ

ရှေ့က အပိုင်းနှစ်ပိုင်းမှာ User Interface ဆိုတာဘာလဲ၊ User Interface မှာ ဘာတွေ ပါသင့်လဲ၊ Interface Design တွေရဲ့ အသက် သွေ;ကြောတွေက ဘာလဲ စသည်ဖြင့် ရေးသားခဲ့ပြီး ဖြစ်ပါတယ်။ ဒီအပိုင်းမှာတော့ လက်တွေ့နည်း စနစ်တွေကို လေ့လာကြမှာ ဖြစ်ပါတယ်။ Web Application လို့ ဆိုထားပေမယ့် Website တွေ တည်ဆောက်တဲ့ နေရာမှာလည်း အသုံးဝင်မှာ ဖြစ်ပါတယ်။

White Space (နေရာလွတ်များ အသုံးပြု၍ အပြန်အလှန် ဆက်နွယ်မှုများကို တည်ဆောက်ခြင်း)

White Space (နေရာလွတ်) ဆိုတာ Website အတွင်းမှာ ပါတဲ့ Headings, Text နဲ့ Button အစရှိတဲ့ Elements တွေ ကြားထဲမှာ ရှိတဲ့ ထားလေ့ရှိတဲ့ နေရာလွတ်တွေကို ဆိုလိုပါတယ်။ နေရာလွတ်တွေဟာ တစ်ခုခုနဲ့ တစ်ခုဆက်စပ်မှုတွေကို ပုံဖော်နိုင်သလို တစ်ခုနဲ့ တစ်ခု အုပ်စု မတူတာတွေကိုလည်း ခွဲခြားလို့ ရပါတယ်။ element တစ်ခုနဲ့ တစ်ခုကြားမှာ နေရာလွတ်တွေကို ကပ်နိုင်သမျှ ကပ်ထားမယ်ဆိုရင် အုပ်စုတူ အမျိုးအစားတူ ဆိုပြီး ခွဲခြားနိုင်သလို တစ်ခုနဲ့တစ်ခု ကြားက နေရာလွတ်တွေကို ချဲထားလိုက်မယ်ဆိုရင် အုပ်စုမတူတဲ့ သဘော သက်ရောက်အောင် လုပ်ဆောင်နိုင်ပါတယ်။ နေရာလွတ်တွေဟာ တစ်ခြား နည်းလမ်းပေါင်း မြောက်များစွာကိုလည်း အထောက်အပံ့ ပေးနိုင်ပါသေးတယ်။ အဓိက အသုံးပြုရခြင်း ရည်ရွယ်ချက် နှစ်ခုကတော့ တစ်ခုနဲ့တစ်ခု ဆက်စပ်တာ၊ အဆင့်ဆင့် ချိတ်ဆက်တာကို ပုံဖော်တာနဲ့ အုပ်စုခွဲတာတို့ ဖြစ်ပါတယ်။

Gmail က Button လေးတွေကိုတော့ အားလုံး ရင်းနှီးပြီး ဖြစ်ပါလိမ့်မယ်။ အဲဒီမှာ အုပ်စုမတူတာ အချင်းချင်းကြားမှာ နေရာလွတ်လေးတွေ ချန်ထားခြင်း အားဖြင့် အုပ်စုမတူတာတွေကို ခွဲခြားနိုင်ပါတယ်။

Rounded Corners (ထောင့်လေးဖက်မှာ စက်ဝန်းပုံစံပါတဲ့ စတုရန်း) တွေကို အသုံးပြုပြီး နယ်ပယ်သတ်မှတ်ခြင်း

Rounded Corners လို့ ပြောလိုက်တာနဲ့ Designer တိုင်း သိမယ်ထင်ပါတယ်။ မြန်မာလို ဘာသာပြန်မယ်ဆိုရင် စိတ် အတော်လေဖို့ ကောင်းပါတယ်။ ဒီတော့ Rounded Corners လို့ပဲ ခေါ်ကြရအောင်။ Rounded Corder တွေဟာ Interface တွေအပေါ် အမြင်နဲ့ ခံစားချက်တွေကို ကောင်းမွန်အောင် မြှင့်တင်ပေးနိုင်ပါတယ်။ ကိုယ့်ရဲ့ User Interface ကိုလည်း ပိုပြီး တောင်ပြောင်သွားအောင် စွမ်းဆောင်ပေးနိုင်ပါတယ်။ အဲဒီလို အမြင်ပိုင်းဆိုင်ရာ ပံ့ပိုးမှုတွေ အပြင် Rounded Corners တွေဟာ Object တွေရဲ့ နယ်ပယ်ကို သတ်မှတ်တဲ့ နေရာမှာလည်း အသုံးဝင်ပါတယ်။ အသုံးပြုသူ အနေနဲ့ Rounded Corner ကို တွေ့လိုက်တာနဲ့ Container ရဲ့ အဆုံးဆိုတာကို သိလိုက်ပါတယ်။

ဒီနေရာမှာ Rounded Corners လို့ပြောတော့ ရိုးရိုးထောင့်တွေကော မပါဘူးလားလို့ မေးစရာ ရှိပါတယ်။ တကယ်တန်း တော့ လေးထောင့်ပဲဖြစ်ဖြစ် အဝန်းပဲ ဖြစ်ဖြစ် အတူတူပါပဲ။

အရောင်းများ၏ အဓိပ္ပါယ်သက်ရောက်မှုများကို အသုံးချခြင်း

Interface တွေနဲ့ ပတ်သက်ပြီး အရောင်တွေ အကြောင်းပြောရင် ပြောစရာတွေလည်း များသလို လေ့လာစရာတွေလည်း များပါတယ်။ အရောင်တွေကို အပြန်အလှန် ဆက်သွယ်ရေးဆိုင်ရာ အဓိပ္ပါယ် မျိုးစုံအတွက် elements တွေမှာ တွဲစပ်ပြီး ပုံဖော်နိုင်ပါတယ်။ element အမျိုးအစားတစ်ခုတည်းမှာတင် အရောင်တွေ ခွဲလိုက်တာနဲ့ အဓိပ္ပါယ်မျိုးစုံ သက်ရောက် အောင် ပုံဖော်နိုင်ပါတယ်။ ဥပမာ အနေနဲ့ Button တစ်ခု၊ အနီရောင်ကို အဖျက်ပိုင်းဆိုင်ရာတွေ ဖြစ်တဲ့ Delete နဲ့ Remove စတာတွေမှာ သုံးပြီး အပြာကို Standard အနေနဲ့ သုံး၊ ပြီးရင် အစိမ်းကိုတော့ Save (သိမ်းတာ)၊ Update (ထပ်ပေါင်း ထည့်တာ) စတာတွေ သုံးသလိုပေါ့။ အဲဒီအပြင် အရောင်တွေက အသုံးပြုသူဖက်မှာ ဘာတွေ ဖြည့်လိုက်တယ်၊ ဘာတွေ ပြောင်းလဲလိုက်တယ် စသည်ဖြင့် သိနိုင်အောင်လည်း စွမ်းဆောင် ပေးနိုင်ပါသေးတယ်။

တိုက်ရိုက် အာရုံစိုက်မှုကို ရယူခြင်း

တစ်ခါတစ်လေမှာ အရောင်တွေ၊ အလင်း အမှောင်တွေနဲ့တင် Interface Design မှာ မလုံလောက်ပါဘူး၊ အဲဒီလို အခြေအနေမျိုး ဆိုရင် Animation လို့ခေါ်တဲ့ လှုပ်ရှားသက်ဝင်တဲ့ ပုံရိပ်တွေကို သုံးရပါမယ်။ အသုံးပြုသူ အနေနဲ့ တစ်ခုခု ဖြည့်လိုက်၊ ပြင်လိုက်တဲ့အခါမှာပဲ ဖြစ်ဖြစ်၊ တစ်ခုခု ဖျက်လိုက်တဲ့ အခါမှာပဲ ဖြစ်ဖြစ်၊ အပြောင်းအလဲ တစ်ခုခု လုပ်လိုက်တာကို သတိထားမိစေဖို့ လိုအပ်ပါတယ်။ အဲဒီလို သတိထားမိစေဖို့ လိုအပ်တဲ့အခါ Animation တွေက အင်မတန် အသုံးဝင်ပါတယ်။ လူတွေရဲ့ အမြင်အာရုံမှာ ငြိမ်နေတာတွေထက် လှုပ်နေတာကို ပိုပြီး သတိထား မိတတ်ပါတယ်။ Status တစ်ခုကို Update လုပ်လိုက်တာပဲ ဖြစ်ဖြစ်၊ အွန်လိုင်းမှာ စျေးဝယ်တဲ့အခါ Product တစ်ခုကို ဝယ်လိုက်တဲ့ အခါမှာပဲဖြစ်ဖြစ် Animation တွေနဲ့ ပံ့ပိုးပြီး ထင်ရှားအောင် ပြုလုပ်နိုင်ပါတယ်။ Facebook မှာ ဆိုရင်လည်း အဲဒီလို Animation တွေ တွေ့နိုင်မှာ ဖြစ်ပါတယ်။ AJAX လို နည်းပညာတွေကို အသုံးများတဲ့ Website တွေမှာဆိုရင် ဘာဖြစ်သွားတယ်၊ ဘာတွေ ဖြစ်လာမယ် စသည်ဖြင့် သိနိုင်အောင် Animation တွေကို သုံးပေးဖို့ လိုအပ်ပါတယ်။

Weebly မှာဆိုရင် တစ်ခုခု ပြောင်းလဲဖို့လိုတဲ့ အကြံပြုချက်တွေကို Animation တွေနဲ့ ပြပေးတဲ့အတွက် အသုံးပြုသူတွေကို သတိထား မိစေပါတယ်။

Shadows (အရိပ်ချခြင်း)၊  Darkened Backgrounds (နောက်ခံကို အမှောင်ချခြင်း)ဖြင့် အာရုံစိုက်မှုကို ရယူခြင်း

အသုံးပြုသူကို ဖမ်းစားနိုင်မယ့် နောက်ထပ် နည်းလမ်းတစ်ခုကတော့ အရိပ်ချခြင်းနဲ့ နောက်ခံ အမှောင်ချခြင်းပါပဲ။ Shadow (အရိပ်ချခြင်း) ကိုနေရာတကာမှာ သုံးပါတယ်။ အဲဒီလိုအရိပ်ချလိုက်တဲ့အတွက် windows တွေကိုပဲ ဖြစ်ဖြစ် Image တွေကိုပဲ ဖြစ်ဖြစ် ပိုပြီး ထင်ရှားအောင် စွမ်းဆောင်နိုင်ပါတယ်။ အရိပ်ချလိုက်တယ်ဆိုတာနဲ့ ထပ်နေတဲ့ Element တွေရဲ့ အရောင်ကို မှိန်သွားစေပြီး ထင်ရှားစေလိုတဲ့ element ကို ပိုပြီး အပေါ်ကို ကြွတက်လာအောင် စွမ်းဆောင်နိုင်ပါတယ်။ အထူးသဖြင့် model windows တွေမှာဆိုရင် ပိုပြီး သိသာမှာ ဖြစ်ပါတယ်။

အပေါ်မှာပြထားတဲ့ Interface မှာ Model Window ကို Drop Shadow ချထားတဲ့အတွက် ပိုပြီး ထင်ရှားလာအောင် စွမ်းဆောင်ပေးနိုင်ပါတယ်။

အဓိကလုပ်ဆောင်ချက်အပေါ် အသုံးပြုသူကို ဆွဲခေါ်ခြင်း

ဘယ် Application မှာမဆို ပထမဦးစားပေး (Primary) နဲ့ ဒုတိယဦးစားပေး (Secondary) ဆိုပြီး Action တွေအပေါ် မူတည်တဲ့ Screen တွေ ရှိတတ်ပါတယ်။ Windows မှာဆိုရင်လည်း Primary Windows, Secondard Windows ပေါ့။ Web Application တွေမှာတော့ Primary Interface Screen နဲ့ Secondard Interface Screen လို့ ပြောနိုင်မယ် ထင်ပါတယ်။ ဥပမာ အနေနဲ့ ပြောရမယ်ဆိုရင် Facebook ကို Register လုပ်တဲ့ အခါမှာ Step 1, Step 2 ဆိုပြီး အဆင့်ဆင့် ဆွဲခေါ်သွားသလိုပေါ့။ တစ်ကြိမ်တည်းမှာ တစ်ခါတည်း ထည့်ခိုင်းရင်လည်း ဖြစ်နိုင်ပါလျှက် အဆင့်ဆင့် ထည့်ခိုင်းခြင်းအားဖြင့် အသုံးပြုသူကို ဆွဲခေါ်သွားပါတယ်။

အဲဒီအပြင် Save & Continue ကိုတော့ ထင်ရှားအောင် Button နဲ့ ထားပြီး Skip ကို လင့်သီးသန့်ပဲ ထားပါတယ်။ အဲဒီအတွက် အချက်အလက်ကို ထည့်ကိုထည့်စေချင်တဲ့ သဘော ပေါ်လွင်သွားပြီး အသုံးပြုသူ အနေနဲ့လည်း အချက်အလက်တွေကို ထည့်ဖြစ်အောင် ထည့်ဖို့ ဆွဲဆောင်နိုင်ပါတယ်။ တစ်ချို့ နေရာတွေမှာတော့ Action နှစ်ခု ယှဉ်လာတဲ့ အခါမှာ တစ်ခုက အရေးပါပြီး တစ်ခုက သိပ်အရေးမပါတာမျိုး ရှိတတ်ပါတယ်။ အဲဒီလို အခါမျိုးမှာ အောက်မှာ ပြထားတဲ့ Interface လို သုံးလေ့ရှိပါတယ်။

အပေါ်က Interface ကို လေ့လာကြည့်မယ်ဆိုရင် Save အတွက်တော့ Button အကြီးကြီးနဲ့ ထားပြီး Cancel ကိုတော့ ရိုးရိုးသာမာန် Link အနေနဲ့သာ ထားပါတယ်။ အသုံးပြုသူ အနေနဲ့ကလည်း cancel ကို သုံးဖို့ မလိုပါဘူး၊ ဒါပေမယ့် မထည့်လို့လည်း မဖြစ်ပါဘူး။ အမှားအယွင်း ဒါဏ်ခံနိုင်ဖို့ မစဉ်းစားလို့ မရတဲ့အတွက် ထည့်ထားတာပါ။ More Important နဲ့ Less Important ကို ခွဲခြားထားတဲ့ သဘောပါ။

ဆက်ပါဦးမယ် …

2 Responses

1. Yaung Sein says:

   December 27, 2010 at 9:07 PM

   Rounded Corner ကို ထောင့်ကွေးလို့ ခေါ်လို့ရနိုင်ပါတယ် ဆရာသီဟ။

   Reply
   • Thiha says:

     December 27, 2010 at 9:12 PM

     ဟုတ်ကဲ့ဗျ အဲဒီလိုလည်း ခေါ်လို့ရနိုင်ပါတယ်

     Reply