UI Designers/UX Designers အတွက် Sketching အရေးပါမှု နှင့် Sketching မလုပ်ပဲ UIကို ဘယ်တော့မှ တန်းမဆွဲပါနဲ့။
စာဖတ်သူတို့ဟာ UI Designer တစ်ယောက်ပဲဖြစ်ဖြစ် UI/UX Designer or UX Designer တစ်ယောက်ပဲဖြစ်ဖြစ် Sketching ကတော့ မလွဲမသေလုပ်သင့်ပါတယ်။Sketching မလုပ်ပဲ UIကို ဘယ်တော့မှ တန်းမဆွဲပါနဲ့။
UI/UX မှာ Sketching ဟာ အတိုင်းအတာတစ်ခု ကြီးကြီးကျယ်ကျယ် ပုံဆွဲတတ်စရာ မလိုပါဘူး။ (ပုံစံတကျ sketch ကောင်းကောင်းဆွဲတတ်ရင်တော့ အကောင်းဆုံးပေါ့။ ဒါပေမဲ့ အခြေခံလောက်ဆိုရင်တောင်တော်တော် အလုပ်ဖြစ်ပါတယ်။)
ဘာဆွဲတတ်ရင် Sketch လုပ်လို့ရပြီလဲ?
- မျဉ်းကြောင်း
- လေးထောင့်၊ တြိဂံ အဝိုင်း ဆွဲတတ်ရင်ရပါပြီ။
ဘာတွေလိုလဲ?
- စာရွက်လွတ်တစ်ရွက် (An A4 papers/ a sketchbook or a file holder to organize your sketch paper)
- ခဲတံတစ်ချောင်း
- ဆော့ပန်တစ်ချောင်း
- ခဲဖျက် တစ်ခု
Sketching ဘာလို့လုပ်သင့်တာလဲ။ (UI သမားတွေ အတွက်ရော UX သမားတွေ အတွက်ရော ခြုံငုံပြောပါ့မယ်)
Screens Count for each User Flow/Goal/Task/Feature
User Flow တွေအတွက် UI screens အရေအတွက် ဘယ်လောက်ဆိုတာ တွက်လို့ရတယ်။ကြိုပြီး Sketch လုပ်ထားတဲ့အတွက် Feature တစ်ခု or User Goal တစ်ခုအတွက် စုစုပေါင်း Screen ဘယ်နှစ်ချပ် ထွက်မယ်ဆိုတာ တွက်ချက်ပြီး ကိုယ့် Workload နဲ့ ကြာချိန်ကို မှန်းဆတွက်လို့ရတယ်။
Generate, Visualize and Organize Ideas
Sketching အကြမ်းရေးခြစ်ရတာမြန်တဲ့ အတွက် Idea ထုတ်ရတာ ပိုသွက်ပြီး ကိုယ့်ဦးနှောက်ထဲမှာ ရှိတဲ့အကြောင်းအရာ အချက်အလက်တွေက အပြင်မှာ ချဆွဲလိုက်တဲ့အခါ visualize (ရုပ်လုံးပေါ်ပြီး မြင်ယောင်တာ) မြင်လာတော့ လိုအပ်နေတာတွေ ဟာကွက်တွေ တွေ့ပြီး Organize ဖြစ်လာပြီး Screens တစ်ခု နဲ့ တစ်ခု ပို ချိတ်ဆက်မိလာတယ်။
အကယ်၍ ကျနောတို့ဟာ ဒီ Feature တစ်ခု or User Goal တစ်ခုအတွက် Screens(UIs) တွေကို Sketch မဆွဲခဲ့ပဲ (Sketch ဆွဲဖို့မလိုဘူးလို့ယူဆပြီး မလုပ်ခဲ့ရင်) လက်တမ်း UI ကိုတန်းဆွဲခဲ့ရင် အစအဆုံးဆွဲပြီးမှ Screensတွေလိုနေမယ်။ UI componentsတွေလွဲနေမယ်။
Communicate and Collaborate for a better outcome/solution (Brainstorming together or individually)
Team members တွေနဲ့ communicate/collaborate/ brainstorm လုပ်ရတာ ပိုလွယ်တယ်။
Team members တွေ နားလည်ပြီးမျှော်လင့်ထားတာက တစ်မျိုး၊ ကိုယ်ဆီက UI Screens တွေက တစ်မျိုး ထည့်တွက်ရမယ့် Technical constraints & Other Factors တွေကြောင့် ကိုယ် Deliver လုပ်တဲ့ Screensတွေကို ပြန်ပြင်တာက နည်းနည်းလောက်မဟုတ်ပဲ လုံးလုံးကွဲနေရင် ကျနော်တို့ ရဲ့ အချိန်တွေ Energyတွေ Waste ဖြစ်ပြီး Double Effort ကြီးဖြစ်နေပါလိမ့်မယ်။
နောက်ကိုယ်နဲ့ ကိုယ်နဲ့ အလုပ်တွဲလုပ်တဲ့ Team Members (Designers/Developers/Product Team/Channel Owner or Managers အစရှိသဖြင့်)တွေအနေ နဲ့လည်း သူတို့ Workload နဲ့ Timeline ကို ကြိုတွက်ထားပြီး သူတို့ ဘက်အခြမ်းက ကြိုပြင်သင့်တာ ပြင်ထားလို့ရတယ်။ Team members တွေနဲ့ On the same page(နားလည်မျှော်မှန်းပုံချင်းတူတာ) ဖြစ်နေတဲ့အတွက် တကယ် UI ထွက်လာရင် နည်းနည်းလောက်ပဲ ပြင်စရာရှိပါတယ်။
Review, Evaluate and Iterate quickly
ဒီ ကိုယ်ခြစ်ထားတဲ့ Sketch တွေကို ကြည့်ပြီး ဒီ process လုပ်နေတဲ့ ဆွဲလိုက် ခဏထားလိုက် ပြန်ကြည့်လိုက် တခြား Team Members တွေနဲ့ ဆွေးနွေးလိုက်၊
ကိုယ့်အနေနဲ့ သိပ်မသေချာ သံသယရှိတဲ့ နေရာတွေကို တခြားသူတွေနဲ့ Validate လုပ်လိုက်နဲ့အချိန်တစ်ခုမှာပဲ ဘယ် Sketchက ဘာကိုတော့ ဆက်ထား၊ မလိုတာဖယ်၊ လိုတာထပ်ဖြည့် နဲ့ ထပ်ခါထပ်ခါ လုပ်တဲ့အခါ နောက်ဆုံး အတိုင်းအတာ တစ်ခုထိ ကိုယ်ရော Team Members တွေရော စိတ်ချ လက်လွတ်ရတဲ့ Release တစ်ခု ရရှိမှာ ဖြစ်ပါတယ်။
ဆိုလိုတာက ရတဲ့ အချိန် Timeline တစ်ခုမှာ အဆင်ပြေမယ့် Process နဲ့ Outcome /solutionကို ချိန်ဆပြီး လုပ်ပေးရမှာပါ။
စာဖတ်သူတို့ကို အပေါ်မှာ ဘာလို့ Sketching လုပ်သင့်လဲဆိုတာ ရေးခဲ့ပြီးပြီဆိုတော့ …
ဘယ်အချိန် ဘယ်အဆင့်တွေမှာ Sketch လုပ်ရမလဲ?
အစောပိုင်း Product Team ဆီကနေ BRD/BRS(Business Requirements Document / Business Requirements Specification)ရပြီး သေချာ ဖတ်ပြီး မရှင်းတာတွေ မေးသင့်တာတွေ လိုတာတွေတောင်းနေစဉ် နဲ့ တောင်းပြီးတာ နဲ့ စ Sketching လုပ်ပြီး နောက် လိုအပ်ရင်လိုအပ်သလို ကိုယ့်စိတ်ထဲ ငါ Sketchဆွဲကြည့်မှ မြင်သာမယ် လိုမယ်လို့ ခံစားရတဲ့ကိုယ့်စိတ်ထဲကနေ ကိုယ့်ကို ပြောတဲ့အချိန် နောက်ဘယ်ကစလို့ စရမယ်မှန်းမသိ လမ်းပျောက်နေချိန် တွေမှာ ဆွဲပါ။
ကျနော်ရဲ့ အခြေအနေဆိုးပေမဲ့ အလုပ်ဖြစ်နေတဲ့ Sketch တစ်ချို့(ကျနော့်ရဲ့ Sketchစာအုပ်က ရုံးက Locker ထဲမှာကျန်ခဲ့တော့ ရှိတဲ့ဟာပဲမျှပေးလိုက်ပါတယ်။)ကျနော့ရဲ့ အခြေအနေဆိုးတဲ့ Sketchတွေကို ပြရတဲ့ ရည်ရွယ်ချက်ကတော့ ကျနော့ Sketch တွေကိုကြည့်ပြီး စာဖတ်သူတို့လည်း ချက်ချင်းဆွဲဖို့ အားတက်လာပြီး Sketch လုပ်တဲ့ အလေ့အကျင့်ကို ရစေချင်လို့ပါ။
ကဲအပေါ်ကရေးထားခဲ့တာတွေထက်ပိုပြီးထဲထဲဝင်ဝင် ပိုသိချင်တယ် Next level သွားချင်တယ်ဆိုရင်တော့ ဒီမှာ ဖတ်ကြည့်ပေးပါ။ Why Sketching Is an Essential Skill for UX Designers to Master
Additional sources:
UI Sketching Conventions by DevTips — Youtube
UX Sketching 101: How to create UI and content hierarchy quickly — Youtube
Sketching for UX Designers Course — Udemy
မရှင်းတာရှိရင်ပဲဖြစ်ဖြစ် ဆွေးနွေးချင်ရင်ပဲဖြစ်ဖြစ် အောက်က comment မှာ ရေးခဲ့ပေးလို့ရပါတယ် ….
အားလုံးပဲကျေးဇူးပါ။
စကားမစပ် စာဖတ်သူတို့ရေ ….ဒီအပတ်ကစပြီး ဆောင်းစဝင်ပြီနော်။ ရာသီဥတုက so chill ချမ်းစိမ့်စိမ့်လေးနဲ့ နေလို့ကောင်းတယ်နော်။ ဘဝက အရမ်းတိုတောင်းပါတယ်။ အဆင်သင့်မဖြစ်သေးပဲ အချိန်မရွေးထွက်ခွါ သွားနိုင်တာမို့ တတ်နိုင်သမျှစိတ်ချမ်းသာအောင်နေပြီး သဘာဝတရားကို enjoy လုပ်ကြနော်။
ဆောင်းစဝင်ပြီဆိုတော့ COVID-19 ကိုလည်း သတိပိုထားပေါ့။ လေထုထဲမှာ Moisture တွေများမှာဆိုတော့။
Stay Safe Naw!
References:
https://www.invisionapp.com/inside-design/ux-design-sketching/
https://medium.com/@groupvisualio/sketching-in-ux-design-why-we-do-it-95a721e82f95
https://uxdesign.cc/ui-ux-sketching-techniques-101-7e91d854ae3d
https://xd.adobe.com/ideas/process/wireframing/sketching-essential-skill-every-ux-designer-master/