User-friendly application එකක් හදමුද? (Part – III)

READ IN 4 MINS

Application එකක් මේ විදිහට Design කරමු. 

අපි කලින් article එකෙන් දැනුවත් වුණා මොකක්ද මේ UI/UX කියන්නේ, ඒ ගැන විස්තර සහ ඊළගට අපි කතා වුනා UI/UX වලට අනුව එහෙමත් නැත්තන් User Friendly Web Application එකක් එහෙමත් නැත්නම් ඕනෑම Application එකක් User Friendly විදියට develop කරන්න අපි මොනවද අනුගමනය කල යුතු ක්‍රියාමාර්ග කියලා.

එතකොට අපි මේ අනුගමනය කල යුතු දේ පිලිබදව කිවුවේ Industry එකේ එහෙමත් නැත්නම් Professional Level එකේදී කතා වෙන දේවල්. දැන් මේකෙදි අපි පළවෙනියටම Personas ගැන කතා කරා ඔයාලට මතක ඇති.

දැන් අද අපි කතා කරන්න යන්නේ WIRE-FRAMES ගැන. Wire-Frames ගැන දැන ගන්න කලින් Personas ගැන කිසිම අවබෝධයක් නැත්නම් කලින් Article එක (https://journal.eeefa.org/2018/12/16/ui-ux-part-ii/බලලා මේ Article එක බැලුවොත් තමයි ඔයලාට මේක ගැන හරියටම තේරුම් ගන්න පුළුවන් වෙන්නේ.ඉතින් අද අපි කතා කරමු මොකක්ද මේ Wire-Frames කියන්නේ කියලා.

Wire-Frames Designing

ඔයාලා දැන් දන්නවා Persona එකක් කියන්නේ මොකක්ද සහ එකෙන් අපිට මොනවද ලැබෙන ප්‍රයෝජන කියලා. ඒක හදන විදිහත් දන්නවා, එකට දාන්න ඕනෙ මොනවද කියලත් දන්නවා.
දැන් මේ ඔයාල හදාගත්තු Persona එක නැත්තන් අපි develop කරන Web Site / Application එක use කරන User Groups අපි තෝරගෙන, ඒවායින් Sample එකක් අරගෙන ,ඒ Sample එකත් එක්ක Interview එකක් කරලා අපි ඒ අය ගැන විස්තර කිහිපයක් හැදුවා .මේ දේවල් තමයි අපි එදා කතා කළේ Personas කියලා.එතකොට මේ විස්තර හැදුවට මදි. අපි ඊළගට කරන්න ඕනේ මේ විස්තර වලින් කියවෙන පුද්ගලයාට එහෙමත් නැත්තම් User ගැන ,Userට ගැළපෙන විදියට අපේ Application එක develop කරන එක.

මේකෙදි අපි මුලින්ම කරන්න ඕනේ Wire-Frames නිර්මාණය කිරීම .එදිනෙදා ජීවිතයේදී නම් අපි මේවා ගැන කතා කරන්නේ අපි හදන Application එක Sketch කරන්න අන්න ඒ වගේ දේවල් කියලා .එතකොට මේකෙදි අපි කරන්න ඕනේ අපි හදන මොකක් හරි Category එකකට හදන Application එක කොහොමද design වෙන්න ඕනේ ,කොහොමද design එක View වෙන්න ඕනේ, කොහොමද userට පේන්නේ ,එතකොට ඒකට මොනවද එන්න ඕනේ Components , මෙන්න මේ වගේ දේවල් දාලා ඔයාලා කොළේකුයි, පෑනකුයි, පාට පැන්සල් හරි තමන් කැමති දේකින් මේක අදින්න පුළුවන්.අපි පොඩි කාලේ චිත්‍ර ඇන්දා හා සමානයි.

Industry එකෙත් මෙන්න මේ දේ මෙන්න මේ විදිහටම කරනවා. Industry එකේදී නම් කරන්නේ UI/UX Engineersලා group එකක් එකතු වෙලා මොකක් හරි අදාළ Scenario එකකට ගැළපෙන,  නැතිනම් අපි develop කරන Web Site එකට ගැළපෙන විදිහට, ඒ අයට හිතෙන විදිහට, ඒ කියන්නේ මේක හොදයි කියලා හිතෙනවා නම් ඒ හිතෙන විදියට තමයි web site එකේ sketch(රූප විදිහට )එකක් A4 Sheets අඳින්න ගන්නේ.

උදාහරණයක් විදිහට හිතමු , අපි හදනවා ikman.lk වගේ Application එකක්.එතකොට එකේදී මොකක්ද වෙන්නේ ඕනේ, අපි ikman.lk වගේ Applications ගිහින් බලලා, Search කරලා, ඒ හා සමානව යන Web Sites කිහිපයක්ම බලලා ඒවා ගැනත් අදහසක් අරගෙන ඒවම copy නොකර අපි අලුත් දේවලුත් එකතු කරලා මේක කොහොමද අපි User Friendly විදිහට userට දෙන්නේ කියලා.
එතකොට ikman .lk එකේ නම් තියෙන්නේ Advertisements. User ට පුළුවන් add කරන්න , තවත් usersලට පුළුවන් view කරන්න. Buy and selling තමයි ඒ Application එකෙන් වෙන්නේ.

ඒකට අපි Wire Frames හදනවා නම් ඕකට අපිට හදන්න පුළුවන් මේ Application එකේ Home Page එක කොහොමද තියෙන්න ඕනේ , ඒ Home Page එකට මොනවද ඇතුලත් විය යුතු දේවල්;
සාමාන්‍යයෙන් Home Page එකට තමයි අපි දාන්න ඕනේ වැදගත්ම කරුණු ටික. ඒ වගේම අපි දාන Navigation එකත් අපි කිවුවා පුළුවන් තරම් User Friendly වෙන විදිහට sub categories වලට යන්නේ නැතුව කෙලින්ම Userට Navigate වෙන විදිහට දාන්න පුළුවන් නම් වඩාත් හොදයි කියලා.

ඔය වගේ කරුණු සලකල බලලා මුල්ම Article එකේ කතා කරපු විදිහට Navigation path එක, Home page එක කොහොමද වෙන්න ඕනේ, එතකොට අපි use කරන්නේ මොන වගේ Components ද, ඒ හැමදේමත් එක්ක බලලා ඔයාලට පුළුවන් මේකේ Wire Frames design කරන්න.

එතකොට මේ design කරපු Wire Frames ,අපි උදාහරණෙට ගත්ත ikman.lk එකනේ. එතකොට ඔයාලා මුලින්ම හිතන්න මෙහෙම Application එකක් develop කරොත් හොඳයි කියල ඔයාලා මේකට අදිනවා Sketch එකක්.එතකොට මේ Sketch එක සම්පුර්ණයෙන්ම අපි Web Site එකේ මේ Button එක click කරොත් මෙතනට යන්නේ වගේ දේවල්, ඒ යන pages වලට එහෙමත් නැත්තන් අපී render වෙන pages වලට වෙන වෙනමත් අපි View එක අඳින්න ඕනේ. ඊටපස්සේ අපි කරන්නේ මේ ඇදපු ටික අරගෙන අපි බලනවා මේක වෙන කාටහරි දීලා මේක තේරුම් ගන්න පුලුවන්ද කියලා.

එහෙමත් නැතිනම් Professional Industry Level එකේදී නම් අපි කරන්නේ group එකක් විදිහට ඇදපු Wire Frames ටික ඒ group එක ඇතුලෙම එක එක්කෙනා හුවමාරු කරගන්නවා.එහෙම හුවමාරු කරගෙන අපිට පුළුවන් අනිත් කෙනා ඇදපු Wire Frame එක බලන්න. නැතිනම්  A කියන පුද්ගලයා ඇඳපු Wire Frame එක B කියන පුද්ගලයා දන්නේ නෑ මොකක්ද කියලා.

හැබැයි B කියන පුද්ගලයාට A ගේ Wire Frame එක හම්බුනොත් A කියන පුද්ගලයාගේ User කෙනෙක් විදිහට තමයි B කියන පුද්ගලයාව සළකන්නේ. එතකොට ඒ B කියන පුද්ගලයා කොහොමද අර ඇදපු Sketch එකට අනුව Wire Frames වල Navigation එක හොයාගන්නේ, බලන Components මොනවාද, B කියන පුද්ගලයට හොයාගන්න ලේසි නම් , අපි කියනවා එකට Pass වෙච්ච Wire Frame එකක් කියලා .ඒ කියන්නේ එක හොඳ Quality එකකට තියෙන Wire Frame එකක්. හැබයි හිතන්නකෝ මම Wire Frame එකක් ඇදල දෙනවා, හැබයි ඔයාලාට කිසිම දෙයක් තේරෙන්නේ නෑ මොකක්ද වෙන්නේ කියලා. අඩුගානේ Home page එකවත් හොයාගන්න බෑ, Home page එකට ආයෙත් යන button එකක්වත් හොයාගන්න බෑ කියන්නකෝ. අන්න ඒ අවස්ථාවේදි අපි සලකනවා ඒ Application එක /Wire Frames Fail වෙච්ච Wire Frames කියලා. එතකොට අපි කරන්න ඕනේ ආයෙමත් මුල ඉදලා Wire Frames ටික Sketch කරන්න එක.

එතකොට මෙතැනදී මේ Wire Frames sketch කරන එක තමයි ගොඩක්ම වැදගත් වෙන්නේ .හේතුව තමයි මේ Wire Frames වලට අනුව තමයි අපි ඊළගට Navigation එක හදලා ඒ Navigation එකට අනුව අපි Original Application එක හදන්න යන්නේ.

සාමානයෙන් UAT කරනකොට තමයි අපිට මේක හරියටම දැනගන්න පුළුවන් වෙන්නේ. UAT කියන්නේ “User Acceptance Test” කියන එක. මේ UAT කරනකොට තමයි අපිට දැනගන්න පුළුවන් වෙන්නේ අපි හදපු UI එක කොච්චාරක් දුරට සාර්තකයිද කියලා . හැබැයි අපි මේක User Friendly කියන Concept එකෙකේ ඉඳන් හදනවා නම් අපිට UAT ටෙස්ට් එකෙන් Pass වෙන්න ගොඩක් වෙහෙස වෙන්න ඕනේ නෑ.

You may also like...

Leave a Reply

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