TechWire

UI Design Do’s and Don’ts

UI කියන්නේ industry එකේ කතා වෙන්න පටන් අරන් තියෙන trending මාතෘකාවක්. අපිට අලුත් වගේ වුණාට UI එහෙම නැත්තම් User Interface designing කියන්නේ ගොඩක් කලක් තිස්සේ පැවත එන දියුණුවෙමින් එන ලොකු විෂයක්. UI එක්ක බැඳුණු තවත් වචනයක් තමයි UX කියන්නේ. ඒ User Experience කියන තවත් වැදගත් දෙයක්. මේ article එකෙන් බලාපොරොත්තුවෙන්නේ mobile apps හදද්දි හිතන්න ඕන UI facts කීපයක්.

මේ කතා කරන්න හදන facts category 4ක් ඔස්සේ කතා කරන්න පුළුවන්.

  • Interactivity
  • Readability
  • Graphics
  • Clarity කියන මේ category ඔස්සේ UI facts කීපයක් ගැන කතා කරමු.

මෙහිදී ඉදිරිපත් කරන images වල වම් පස නිවැරදි ක්‍රමයත් දකුණු පස නොකළ යුතු විදියත් ප්‍රකාශ වෙනවා.

Interactivity

Content formatting

අපේ app එකෙන් user ට මොකක් content එකක් දෙන්න බලාපොරොත්තු වෙනවා නම් user ට ලැබෙන්න ඕන content එක ඒ විදියටම ලැබෙනවා නම් තමයි developer ජයග්‍රාහකයෙක් වෙන්නෙ. ඒ දේ එහෙම වෙන්න නම් හොඳ layout එකක් තියෙන්න ඕන. මෙහිදී වැදගත් දෙයක් තමයි primary content එක කරදරයකින් තොරව user ට බලන්න පුළුවන් වෙන්න ඕන. Scroll නොකර zoom නොකර ඒ content එක බලන්න තියෙනව නම් ඒක හොඳ UI design එකක් විදියට සලකන්න පුළුවන්.

Touch controls

User ට type කරන්න දෙනවට වඩා touch gesture එකක් භාවිත කරලා user input එකක් ගන්නවා නම් user ගොඩක් කැමති වේවි. හොඳම උදාහරණයක් විදියට calendar එක දෙන්න පුළුවන්. App එකක් උපන්දිනය හෝ වෙනයම් දිනයක් input එකක් විදියට ඕන කරන වෙලාවක දිනය type කරනවට වඩා scroll කරලා දිනය මාසය අවුරුද්ද හොයන එක userට interaction එක වැඩි වෙන fact එකක් විදියට හඳුන්වන්න පුළුවන්.

Hit targets

Controls ගැන සැලකුවොත්, කරදරයකින් තොරව user ට ඕන කරන action එක වෙන තරමට user satisfy වෙනවා. Button එකක් click කරන්න ඕන වුණාම එක පාරින්ම button එක click වෙනවා නම් user ට ඒක පහසුවක්. Click කරාම ඕන button එක නැතුව ළඟ තියෙන වෙන button එකක් click වෙනවනම් ඒක user ට කරදරයක්. ඒක නිසා button එකක් දානවනම් අඩුමගානේ 44 points X 44 points size එක maintain කරන්න කියන එක recommend කරනවා.

Readability

Text size

Content එකක් user ට deliver කරන අවස්ථාවකදී text size කියන එක ගොඩක් වැදගත් factor එකක් වෙනවා. User ගේ ඇසේ ඉඳන් zoom නොකර කියවන්න පුළුවන් font size එක විදියට recommend කරන්නෙ 11 කියන font size එක. Normal texts/ paras වලට තමා 11 කියන size එක. ඊට අමතරව headings වලදි ලොකු size එකක් වගේම, වැදගත් නොවන පොඩි පොඩි දේවල් සඳහන් කරන්න පොඩි size එක භාවිත කරාට වැරද්දක් නැහැ. නමුත් deliver කරන primary content එකට 11 කියන font size එක තියාගන්න එක user ට ගොඩක් වැදගත් වෙනවා.

Contrast

Readability යටතේ contrast එක විදියට සලකන්නේ font එකේ තියෙන contrast එක. Content එක හොඳට පසුබිම එක්ක කැපිල පෙනෙන එක තමයි හොඳ විදිය වෙන්නේ. Background එකත් එක්ක content එක පැහැදිලි නැත්තම් user ට content එක නිවැරදිව communicate වෙන්නේ නෑ. සුදු පාට පසුබිමක නම් කළු font එක තමා ගොඩක් පැහැදිලිව පෙනෙන්නෙ. මීට අමතරව අවශ්‍ය විදියේ background color එකකට හොඳ font color එකක් හොයාගන්න මේ website එකෙන් ඔබට පුළුවන්.

Spacing

Paragraphs, headings ආදී texts වර්ග වෙන වෙනම display කරන්න. එවිට user ට හොඳ readability එකක් ලැබෙනවා. Paragraph එක වුණත් හොඳට line spacing maintain කරන එක වැදගත්. ඊට අමතරව heading එකකින් පස්සේ paragraph එක පටන් ගන්න කලින් line එකක් විතර ඉඩක් තියල වෙන කරන එකෙන් readability එක වැඩි කරන්න පුළුවන්. මොකද  හොඳ UI එකක් නම් content එකක headings විතරක් user ට කියවන්න ඕන වෙලාවක user ට ඒ දේ පහසුවෙන් කරගන්න පුළුවන් වෙන්න ඕන.

Graphics

High resolution

වැඩි resolution එකකින් යුත් photos/ images දාන්න පුළුවන් නම් ගොඩක් වැදගත් වෙනවා. @2X හෝ @3X ප්‍රමාණයෙන් resolution එක නැත්තම් ලොකු screen sizes වලදී වගේම අලුතෙන් එන retina display වල බොඳ වීමක් ඇතිවෙනවා. ඒකෙන් UI එක බාල තත්ත්වයට පත් වෙනවා.

Distortion

සමහර content වල තියෙන images ඇදිල තියෙනවා දැකල ඇති. එයට හේතුව තමයි image එකේ aspect ratio එකේ නැතුව වෙන ratio වලින් display කිරීම. පුළුවන් හැම වෙලාවේම image එකේ aspect ratio එකට display කරන්න try කරන්න. නැත්තම් distortion එකක් ඇතිවෙලා ඔබ user ට දෙන UI එක අවලසන්න වෙන්න පුළුවන්.

Clarity

Organization

Layout එක පුළුවන් තරම් සංවිධානාත්මක වෙන තරමට ලස්සන් UI එකක් ලබාගන්න පුළුවන්. මේකට easy-to-read layout එකක් විදියට technically හඳුන්වනවා. Control panel එකක්, settings page එකක් එහෙම design කරන කොට එහෙම මේ organization කියන quality එක ගොඩක් වැදගත් වෙනවා. User ට අවශ්‍ය දෙය දැක්ක ගමන් පෙනෙන විදියට තියෙන එක ගොඩක් වැදගත්. ඒ වගේම අවශ්‍ය control button එක පහසුවෙන් access කරන්න පුළුවන් විදියට layout එක organize වෙන්න ඕන.

Alignment

Images, texts හා headings හොඳට align වෙලා තිබ්බම userට content එක පැහැදිලි වගේම කියවන්න, බලන්න ආස හිතෙනවා.

මෙතන සඳහන් කරලා තියෙන්නෙ ගොඩක් basic UI features කීපයක්. මෙහිදී බලාපොරොත්තු වුණේ UI කියන දෙයින් කොයිතරම් දුරට developer කෙනෙක් user ගැන හිතන්න ඕනද කියන දෙය ඉස්මතු කරන්න වගේම ඔබ හදන පොඩි පොඩි applicationවලට මේව වගේම තවත් වැදගත් වන UI features add කරන්න අවශ්‍ය බව කියන්න.
මිට වඩා ගැඹුරින් මේ ගැන දැන ගන්න මේ reference එක භාවිත කරන්න පුළුවන් ඔබට.

Source: https://developer.apple.com/design/tips/

      

About author View all posts Author website

Pramodya Abeysinghe

2 CommentsLeave a comment

Leave a Reply

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