Module 3: ສ້າງປະສົບການຜູ່ໃຊ້ຢ່າງມີປະສິດຕິຜົນ
ໃນ module ນີ້ເຮົາຈະໄດ້ຮຽນຮູ້ກ່ຽວກັບ user experience (UX) ແລະ ຫຼັກການອອກແບບ ເພື່ອອອກແບບໃຫ້ໜ້າຕາເວັບຂອງເຮົາ ແລະ ລະບົບເຮັດວຽກຕ່າງໆໃຫ້ເໝາສົມກັບໂທລະສັບ.
3.1 ກົດເກນປະສົບການຜູ່ໃຊ້ (UX principles)
ຜູ່ໃຊ້ໂທລະສັບມືຖືທົ່ວໄປ ມັກຈະເຮັດອີ່ຫຍັງຫຼາຍໆຢ່າງພ້ອມກັນ ຫຼື ມັກເຮັດໂຕໃຫ້ຕົນເອງບໍ່ຫວ່າງຢູ່ຕະຫຼອດ (ເປັນຄົນວຽກຫຼາຍ ປະມານນັ້ນ) ແລະ ມັກຈະເຮັດຫຍັງແລ້ວໄວໆ ບໍ່ຢາກໃຊ້ເວລາດົນ. ຖ້າພຶດຕິກຳຂອງຜູ່ໃຊ້ເຮົາເປັນແບບນີ້ແລ້ວ ຜູ່ທີ່ເຮັດວຽກໜັກ ແນ່ນອນວ່າ ນັກພັດທະນາ ເຮົາແນ່ນອນ, ເຮົາຈະຕ້ອງຄິດວ່າ ຮູບແບບລະບົບຂອງເວັບເຮົາຈະຕ້ອງເປັນແນວໃດ ເຮົາຈະຕ້ອງຄິດລະຫວ່າງ ການອອກແບບທີ່ສວຍສົດງົດງາມ (UI: User Interface) ກັບ ການອອກເພື່ອໃຫ້ມັນໃຊ້ງ່າຍ (UX: User Experience) ສອງອັນນີ້ຕ້ອງສົມດຸນກັນ ແລ້ວເຮົາຈະໄດ້ອອກມາໃນຫຼັກເກນທີ່ວ່າ Simply Beautiful (ດຽວໆບໍ່ແມ່ນ) Happy usability path.
3.1.1 ປະເມີນເວັບໄຊຂອງທ່ານ (Assess your mobile site)
ກ່ອນຈະເຂົ້າອ່ານ ເນື້ອໃນຫຼັກ ແມ່ນຢາກແນະນຳໃຫ້ໄປອ່ານ ຄວາມແຕກຕ່າງຂອງການພັດທະນາເວັບໄຊແຕ່ລະອັນສຳລັບອຸປະກອນແຕ່ລະຍຸກກັນກ່ອນ ເພື່ອອັດທະຣົດຄວາມເຂົ້າໃຈຂອງທ່ານເລິກເຊິງຂຶ້ນຕື່ມ different site development option
ສຳລັບການພັດທະນາເວັບໄຊໃຫ້ເໝາະສຳລັບໜ້າຈໍທຸກໆຂະໜາດນັ້ນ ຈະແບ່ງອອກເປັນ 3 ເຕັກນິກດ້ວຍກັນຄື:
- Responsive Web Design: ໃຊ້ code HTML ອັນດຽວ ແລະ ລິ້ງ URL ດຽວ ໂດຍບໍ່ສົນໃຈວ່າ ອຸປະກອນຂອງຜູ່ເຂົ້າເບິ່ງຈະເຂົ້າຜ່ານໂຕໃດກໍຕາມ (desktop, tablet, mobile, non-visual browser) ແຕ່ສາມາດ render ການສະແດງຜົນແຕກຕ່າງກັນໄປຕາມແຕ່ລະຂະໜາດໜ້າຈໍຂອງແຕ່ອຸປະກອນໄດ້. ວິທີການອອກແບບ ແບບ Responsive Design ນີ້ຖືເປັນ ວິທີທີ່ Google ແນະນຳ.
- Dynamic serving: ໃຊ້ URL ດຽວແຕ່ວ່າຈະ ສັບປ່ຽນ ຮູບແບບການສະແດງຜົນ ແລະ HTML code ໄປຕາມ ປະເພດຂອງອຸປະກອນຂອງຜູ່ທີ່ເຂົ້າມາເບິ່ງເວັບໃຊ້ ແລະ ການສັບປ່ຽນ (generate) ນີ້ຈະຂຶ້ນກັບວ່າ server ຂອງເຮົາກວດພົບວ່າຜູ່ໃຊ້ຂອງເຮົາໃຊ້ browser ໃດ.
- Separate URLs: .ໃຊ້ HTML code ຕ່າງກັນ ແລະ URL ຕ່າງກັນ. ວິທີນີ້ ຈະພະຍາຍາມກວດຈັບວ່າອຸປະກອນຂອງຜູ່ໃຊ້ທີ່ເຂົ້າມານັ້ນແມ່ນຫຍັງ ຫຼັງຈາກນັ້ນຈະເປີດໜ້າເວັບໃນຮູບບແບບທີ່ເໝາະກັບອຸປະກອນນັ້ນໆ ໂດຍໃຊ້ HTTP redirect ພ້ອມກັບ HTTP header.
Separate (m.dot)
ຈຸດດີ:
ຈະເປັນປະໂຫຍດສຳລັບຜູ່ໃຊ້ງານທີ່ຄຸ້ນເຄີຍກັບປະສົບການ ການໃຊ້ງານໂທລະສັບເທົ່ານັ້ນ ຖ້າທຽບໃສ່ກັບ ຄອມຕັ້ງໂຕະ (Desktop), ປົກກະຕິແລ້ວຈະໂຫຼດໄວກ່ວາ RWD
ຈຸດເສຍ:
ມີສອງ HTML ເຮັດໃຫ້ນັກພັດທະນາຍາກຕໍ່ການ ບຳລຸງຮັກສາ ແລະ ອັບເດດ, ນອກຈາກນີ້ຍັງ ຍາກຕໍ່ການສະໜອງປະສົບການການໃຊ້ງານຂອງຜູ່ໃຊ້ງານສຳລັບ tablet ແລະ ໂທລະສັບ, ຈຳກັດດ້ານຄວາມສາມາດ (limited functionality).
Responsive (RWD)
ຈຸດດີ:
ມີພຽງແຕ່ code-base/canonical URL ອັນດຽວ, ງ່າຍຕໍ່ການບຳລຸງຮັກສາ ແລະ ໃຊ້ຕົ້ນທຶນຕ່ຳ, ປັບຂະໜາດສ່ວນຕ່າງໆອັດຕະໂມມັດຕາມແຕ່ລະອຸປະກອນ.
ຈຸດເສຍ:
ປົກກະຕິ ຈະໃຊ້ເວລາດົນກ່ວາ ຖ້າທຽບກັບ separate, ປະສົບການໃຊ້ງານຂອງແຕ່ລະອຸປະກອນຈະຄືກັນ ດັ່ງນັ້ນ ມັນອາດຈະເປັນການສູນເສຍໂອກາດໃນການສະເໜີ UX ທີ່ແຕກຕ່າງກັນໄປຕາມຄວາມຕ້ອງການຂອງແຕ່ລະຜູ່ໃຊ້ງານ.
Adaptive (AWD or Dynamic)
ຈຸດດີ:
ມີຄວາມແຕກຕ່າງກັນສູງ ແລະ ໃຫ້ປະສົບການໃຊ້ງານດີທີ່ສຸດ ອີງຕາມ ຂະໜາດໜ້າຈໍ, ອຸປະກອນ ແລະ ລະບົບປະຕິບັດການ, ປົກກະຕິຈະໃຊ້ເວລາໃນການໂຫຼດໄວກ່ວາ ປຽບທຽບໃນສ່ວນຂອງ server (server-side).
ຈຸດເສຍ:
ໃຊ້ຊັບພະຍາກອນ ແລະ ງົບປະມານເພີ່ມຕື່ມ, ເນື່ອງຈາກວ່າມີຫຼາຍ code-base ຈຶ່ງຕ້ອງການ ການບຳລຸງຮັກສາ.
ເຮົາຈະມີຫຼັກການແນວໃດທີ່ຈະເຮັດໃຫ້ເວັບຂອງເຮົາພ້ອມສຳລັບມືຖື, ລອງເບິ່ງຫຼັກການທີ່ແນະນຳຈາກ Google ກັນເລີຍ.
UX evaluation and optimization
Pre-design widgets Programming templates to help build your’s client platform
PageSpeed Technical evaluation on your client’s mobile site and app performance
Prototype project Prototype of the mobile site and app
Certified Partners for UX implementation *if necessary
ເວັບແນະນຳສຳລັບປະເມີນເວັບຂອງທ່ານ
Test My Site | PageSpeed Insights
3.1.2 Learn what makes a good mobile site
ໂຕນີ້ແມ່ນ Google ຮ່ວມກັບ AnserLab ຮ່ວມກັນເຮັດການທົດລອງໃນຫົວຂໍ້ ຄວາມສາມາດຂອງຜູ່ໃຊ້ໃນການປະຕິສຳພັນກັບເວັບໄຊມືຖື (how a range of users interacted with a diverse group of mobile sites). ການສຶກສາໄດ້ຄົ້ນພົບ 25 ຫຼັກການໃນການອອກແບບເວັບໄຊສຳລັບມືຖື, ໂດຍສາມາດນຳມາຈັດເປັນ 5 ປະເພດ, ແຕ່ລະປະເພດຈະແຍກເປັນ 5 ຫົວຂໍ້ ທີ່ຈະເວົ້າຕໍ່ໄປນີ້:
3.2 Mobile site design best practicse
ສຳລັບໜ້າຫຼັກຂອງເວັບໄຊທີ່ສະແດງໃນ ຄອມຕັ້ງໂຕ ເຮົາມັກຈະເຫັນ ໜ້າຕ້ອນຮັບ (welcome page), ຂໍ້ຄວາມຢູ່ທາງກາງ ແລະ ພື້ນທີ່ promotion ລວມກັນຢູ່ບ່ອນດຽວ ແຕ່ວ່າ ເວລາເຮົາມາເບິ່ງໜ້າຫຼັກຂອງເວັບໄຊທີ່ຢູ່ເທິງມືຖື ເຮົາຄວນຈະໃຫ້ຄວາມສົນໃຂໃນເລື່ອງຂອງການ ເຊື່ອມຜູ່ໃຊ້ງານຂອງເຮົາໄປຫາເນື້ອຫາທີ່ເຂົາຕ້ອງການ. ໃນສ່ວນຂອງຫົວຂໍ້ນີ້ ເຮົາຈະມາສຳຫຼວດເບິ່ງວ່າ ຫຼັກການ ການ ສ້າງເວັບໄຊມືຖື ທີ່ສາມາດໃຫ້ສະໜອງສິ່ງທີ່ຜູ່ໃຊ້ຕ້ອງການໄດ້ໄວ ຈະເປັນແນວໃດ.
1. ພະຍາຍາມໃຫ້ calls-to-action ຢູ່ດ້ານໜ້າ ແລະ ທາງກາງ
ກ່ອນຈະເຂົ້າສາກເດັດ ຂໍຂັ້ນລາຍການກັບຄຳວ່າ call-to-action ມັນແມ່ນຫຍັງ? ສຳລັບໃຜທີ່ຍັງບໍ່ຮູ້.
call-to-action ໝາຍເຖິງ ເນື້ອຫາ ທີ່ກະຕຸ້ນໃຫ້ ຜູ່ເບິ່ງ, ຜູ່ອ່ານ, ຜູ່ຟັງ ໄດ້ເຫັນ, ໄດ້ຍິນ, ໄດ້ອ່ານ ລະຢາກເຮັດຕາມ ເຊັ່ນ: “buy now”, “click here”, “get quote”, “call now”.
ຕັ້ງ calls-to-action ໄວ້ບ່ອນທີ່ສຳຄັນຂອງເວັບໄຊ
ການທີ່ຜູ່ໃຊ້ງານຂອງເຮົາຢູ່ເທິງມືຖື ຈະເບິ່ງບໍ່ເຫັນ ລາຍການເມນູ ຖືວ່າເປັນເລື່ອງປົກກະຕິ, ສະນັ້ນ ເຮົາຈະຕ້ອງວາງ calls-to-action ໄວ້ບ່ອນທີ່ຜູ່ໃຊ້ເຮົາຈະເຫັນ. ຈາກການທົດລອງຂອງ Google ທີ່ໄດ້ເວົ້າມາຂ້າງເທິງ, ກຸ່ມທົດລອງຈະສຳເລັດວຽກທີ່ມອບໃຫ້ໄວກ່ວາ ຖ້າຫາກ ສະແດງ calls-to-action ຢູ່ສ່ວນ main body ຂອງເວັບໄຊ, ແລະ ລຸ່ນລົງມາແມ່ນສະແດງຜ່ານ ເມນູ ຫຼື ທາງກ້ອງເມນູ.
2. Keep menus short and sweet
ສະແດງລາຍການເມນູທີ່ສັ້ນພ້ອມກັບການຈັດປະເພດທີ່ຊັດເຈນເຮັດໃຫ້ຜູ່ເຂົ້າຊົມຜ່ານມືຖືງ່າຍຕໍ່ການບອກທາງ (navigate).
ເມນູທີ່ມີລາຍຫານຍາວໆອາດຈະເຮັດວຽກໄດ້ດີສຳລັບເວັບສຳລັບອຸປະກອນ desktop ແຕ່ວ່າສຳລັບຜູ່ໃຊ້ມືຖືນັ້ນມັກຈະລຳຄານ ເພາະຈະຕ້ອງໄດ້ເລື່ອນລາຍການເມນູທີ່ຍາວຍຽດ ແຖມຍັງບໍ່ພໍ ຍັງຕ້ອງໄດ້ຄອຍໆເລື່ອນເບິ່ງອີກຢ້ານກາຍໂຕທີ່ເຮົາຈະກົດເອົາ. ດັ່ງນັ້ນ, ຖ້າເປັນໄປໄດ້ເຮົາຄວນຈະເຮັດລາຍການເມນູຂອງເຮົາບໍ່ໃຫ້ມັນຫຼາຍຈົນເກີນໄປ. ຕົວຢ່າງ: ເວັບຫ້າງຮ້ານຈະລະບຸປະເພດຂອງສິນຄ້າໃຫ້ຊັດເຈນ.
3. ເຮັດໃຫ້ຜູ່ໃຊ້ກັບໄປສູ່ໜ້າຫຼັກງ່າຍຂຶ້ນ (Make it easy to get back to the homepage)
ໃຊ້ໂລໂກ້ (logo) ເວັບໄຊເຂົາເພື່ອເປັນໂຕນຳທາງໄປສູ່ໜ້າຫຼັກ (homepage)
ເວລາທີ່ຜູ່ໃຊ້ໂທລະສັບມືຖືຈະເປີດນັ້ນເປີດນີ້ຢູ່ເວັບເຮົາ, ແລ້ວກະເຈົ້າຢາກກັບໄປໜ້າຫຼັກໄດ້ງ່າຍ ແລະ ໄວທີ່ສຸດກໍ່ຄືກັນກົດປຮູບໂລໂກ້ຂອງເວັບເຮົາທີ່ສະແດງຢູ່ເທິງ. ຈາກການສຶກສາ ຜູ່ເຂົ້າຮ່ວມທົດລອງຄາດຫວັງວ່າ ເຂົາຈະກັບໄປໜ້າຫຼັກຂອງເວັບ ຖ້າເຂົາແຕະທີ່ປຸ່ມໂລໂກ້ຂອງເວັບທີ່ຢູ່ເທິງສຸດຂອງໜ້າເວັບ ແລະ ເຂົາຈະອາລົມເສຍໜ້ອຍໜຶ່ງຖ້າເປັນບໍ່ເປັນໄປຕາມທີ່ເຂົາຄິດ.
4. ຢ່າໃຫ້ໂຄສະນາເປັນໂຕດຶງຄວາມສົນໃຈເກີນໄປ (Don’t let promotion steal the show)
ເຮົາຕ້ອງໝັ້ນໃຈວ່າໂຄສະນາ ຫຼື promotion ຈະບໍ່ໄປແຊກແຊງ (ດຶງຄວາມສົນໃຈ) ກັບໂຕນຳທາງເວັບ (navigation) ແລະ ບໍ່ໄປປົນກັບ calls-to-action ຂອງເຮົາ
Promotion ແລະ ໂຄສະນາ (ads) ສາມາດເປັນເງົງບັງເນື້ອຫາທີ່ຢູ່ຂ້າງໆມັນໄດ້ (ຫຼຸດ 75%) ບາງເທື່ອມັນເຮັດໃຫ້ຜູ່ໃຊ້ຂອງເຮົາໃຈບໍ່ຢູ່ກັບເນື້ອກັບໂຕເມື່ອໃຫ້ປ້າຍໂຄສະນາ ຫຼື promotion ເຮັດໃຫ້ບາງເທື່ອເຂົາອາດຈະບໍ່ເຫັນໂຕນຳທາງ (navigational button) ທາງກ້ອງມັນ ແລະ ມັນຍັງເຮັດໃຫ້ເຂົາບໍ່ຮູ້ຈັກຂໍ້ມູນອື່ນທີ່ ບໍລິສັດ ຫຼື ຮ້ານສະເໜີນອກຈາກນີ້.
3.2.2 ການຄົ້ນຫານພາຍໃນເວັບ (Site search)
ການທີ່ເຮົາມີລະບົບການຄົ້ນຫາພາຍໃນເວັບ ແມ່ນເປັນສິ່ງທີ່ດີ ແລະ ມັນເປັນສິ່ງທີ່ຈຳເປັນຕໍ່ຜູ່ໃຊ້ງານ ເວລາທີ່ເຂົາເຈົ້າຕ້ອງການຄົ້ນຫາສິ່ງທີ່ເຂົາຢາກໄດ້ພາຍໃນເວລາອັນສັ້ນ. ໃນຫົວຂໍ້ນີ້ ເຮົາຈະໄດ້ຮຽນຮູ້ວິທີການເພີ່ມຄວາມສາມາດຂອງລະບົບຄົ້ນຫາຂອງທ່ານໃຫ້ສູງທີ່ສຸດ.
1. ເຮັດລະບົບຄົ້ນຫາໃຫ້ເຫັນງ່າຍ (Make site search visible)
ຈັດວາງລະບົບຄົ້ນຫາຂອງທ່ານໄວ້ໃກ້ກັບສ່ວນເທິງສຸດຂອງໜ້າເວັບພ້ອມກັບເພີ່ມຊ່ອງໃຫ້ພິມຄົ້ນຫາໄວ້
ເວລາທີ່ຜູ່ເຂົ້າເບິ່ງເວັບເຮົາຕ້ອງຄົ້ນຫາອີ່ຫຍັງຈັກຢ່າງຢູ່ໃນເວັບເຮົາ ເຂົາຈະຕ້ອງຊອກຫາ ຊ່ອງຄົ້ນຫາຂອງເຮົາ. ດັ່ງນັ້ນ, ຊ່ອງຄົ້ນຫາຂອງເຮົາຈະຕ້ອງເປັນສິ່ງທຳອິດທີ່ຜູ່ໃຊ້ເວັບເຮົາຕ້ອງໃຫ້ເຫັນ.
2. ຕ້ອງໝັ້ນໃຈວ່າຜົນການຄົ້ນຫາຂອງເວັບເຮົາມັນໃກ້ຄຽງກັບຄຳທີ່ກະເຈົ້າຄົ້ນຫາ
ເຮົາຕ້ອງໝັ້ນໃຈວ່າ ລະບົບການຄົ້ນຫາຂອງເຮົາສາມາດຕອບໂຈດສິ່ງທີ່ຜູ່ໃຊ້ຂອງເຮົາກຳລັງຊອກຫາຢູ່ ມັນຈະຕ້ອງມີຜົນການຄົ້ນການທີ່ໃກ້ຄຽງກັບສິ່ງທີ່ຜູ່ໃຊ້ຄາດວ່າຈະໄດ້ຮັບ ແລະ ເຮົາຄວນໃສ່ລະບົບ smart-search ເຊັ່ນ auto-complete (suggestion) ແລະ spelling correction.
3. ໃສ່ເຄື່ອງມືກັ່ນຕອງເພື່ອເພີ່ມຄວາມສາມາດຂອງລະບົບຄົ້ນຫາຂອງເຮົາ (Implement filters to improve site search usability)
ເພີ່ມລະບົບກັ່ນຕອງເພື່ອຊ່ວຍໃຫ້ຜູ່ໃຊ້ຂອງເຮົາໄດ້ສິ່ງທີ່ເຂົາຕ້ອງການໄວຂຶ້ນ ແລະ ຖືກຕ້ອງກັບສິ່ງທີ່ເຂົາຄົ້ນຫາ
4. ແນະນຳຜູ່ໃຊ້ເພື່ອຜົນຄົ້ນຫາທີ່ຖືກຕ້ອງຍິ່ງຂຶ້ນ (Guide users to better site search results)
ສຳລັບເວັບໄຊທີ່ໃຫ້ບໍລິການຜູ່ໃຊ້ທີ່ມີຄວາມຫຼາກຫຼາຍ (ຍິງ, ຊາຍ, ເກີບ, ຂະໜາດ) ເພື່ອໃຫ້ການສະແດງຜົນຂອງສ່ວນຕ່າງແຄບລົງ ແມ່ນໃຫ້ທ່ານຖາມ 2-3 ຄຳຖາມ ກ່ອນເພື່ອລູກຄ້າຈະໄດ້ເຫັນສິ່ງທີ່ເຂົາຕ້ອງການງ່າຍຂຶ້ນ.
3.2.3 Commerce and conversions
1. ເບິ່ງກ່ອນຊື້ (Let users explore before they commit
ອະນຸຍາດໃຫ້ຜູ່ເຂົ້າເບິ່ງເວັບໄຊເຮົາໂດຍບໍ່ຈຳເປັນຕ້ອງລົງທະບຽນ
ການວາງລະບົບໃຫ້ລົງທະບຽນໄວ້ກ່ອນເຂົ້າເບິ່ງເວັບໄຊຂອງເຮົາ ເປັນສາເຫດເຮັດໃຫ້ປະສົບການການໃຊ້ງານເວັບໃນດ້ານການພົວພັນກັນຫຼຸດລົງ. ຈາກຜົນການສຶກສາ ຜູ່ທົດລອງຈະເກີດອາການອາລົມເສຍ ເວລາທີ່ຕົນເຂົ້າເວັບໄຊທີ່ຕ້ອງການໃຫ້ສະໝັກລົງທະບຽນກ່ອນຈຶ່ງສາມາດສືບຕໍ່ເຂົ້າເວັບໄຊໄດ້, ໂດຍສະເພາະເວັບໄຊທີ່ເຂົາບໍ່ຄຸ້ນເຄີຍ ຫຼື ບໍ່ຮຸ້ຈັກມາກ່ອນ, ກ່ອນເຂົາຈະໃຫ້ຂໍ້ມູນສ່ວນໂຕກັບເຮົາ ເຂົາຕ້ອງການທີ່ຈະເບິ່ງເນື້ອຫາ ແລະ ຮູ້ຈັກກ່ອນວ່າເວັບເຮົາສະເໜີຂໍ້ສະໜີຫຍັງແນ່ໃຫ້ກັບກະເຈົ້າ.
2. ຊື້ໃນຖານະຄົນຜ່ານຮ້ານ (Let users purchase as a guest)
ສະເໜີຕົວເລືອກການຈ່າຍເງິນແບບຜູ່ຜ່ານທາງ (check out as guest) ແລະ ເຊີນຊວນເຂົາສະໝັກສະມາຊິກເພື່ອຮັບສິດທິພິເສດທີ່ໜ້າສົນໃຈ
ເຖິງວ່າເຂົາຈະມາຊຶ້ເຄື່ອງຢູ່ເວັບເຮົາ ບາງຄົນເຂົາກໍບໍ່ມັກຜູກມັດ (ມັກໂສດ) ກັບເວັບນັ້ນ, ບາງເທື່ອຊື້ມາລອງເບິ່ງກ່ອນ, ຊື້ເທື່ອດຽວລະກະແລ້ວ ອາດຈະກັບມາຊື້ອີກ, ບໍ່ຢາກໃຫ້ຂໍ້ມູນສ່ວນໂຕທີ່ສຳຄັນ. ດັ່ງນັ້ນ, ເຂົາຈຶ່ງບໍ່ຈຳເປັນຕ້ອງສ້າງບັນຊີກ່ອນຈຶ່ງຈະສາມາດຊື້ເຄື່ອງໄດ້. ທິດສະດີຂອງ guest check out ກໍຄື: ສະດວກສະບາຍ, ລຽບງ່າຍ ແລະ ງ່າຍ ແລະ ໄວ. ຜູ່ໃຊ້ມັກຈະອາລົມເສຍ ເວລາທີ່ເວັບໄຊບັງຄັບເຂົາໃຫ້ສະໝັກເປັນສະມາຊິກກ່ອນ ຈຶ່ງສາມາດຊື້ເຄື່ອງໄດ້ ໂດຍສະເພາະເວັບທີ່ບໍ່ໄດ້ບອກກະເຈົ້າວ່າ ສະໝັກແລ້ວເຂົາຈະໄດ້ສິດທິພິເສດຫຍັງ.
3. ໃຊ້ຂໍ້ມູນທີ່ມີຢູ່ແລ້ວເພື່ອເພີ່ມຄວາມສະດວກສະບາຍໃຫ້ແກ່ລູກຄ້າ
ນຳຂໍ້ມູນທີ່ທ່ານມີຢູ່ແລ້ວມາໃຊ້ໃຫ້ເປັນປະໂຫຍດ ຫຼື ໃຊ້ບໍລິການຈ່າຍເງິນຈາກ third-party ເພື່ອອຳນວຍຄວາມສະດວກໃຫ້ລູກຄ້າຂອງເຮົາ
ເຮົາເຄີຍເຈີບັນຫານີ້ບໍ່ ເວລາທີ່ເຮົາ check out ແລ້ວ ເຮົາຈະຕ້ອງກອບແບບຟອມ ທັ້ງໆທີ່ເຮົາເປັນສະມາຊິກຢູ່ແລ້ວ ແລະ ຂໍ້ມູນກະອັນດຽວກັນ ຫຼື ເວລາທີ່ຈະຕື່ມທີ່ຢູ່ສຳລັບສົ່ງເຄື່ອງ ເຮົາກະມີຢູ່ແລ້ວຢູ່ບໍລິການຈ່າຍເງິນ third party ທີ່ເຮົາກຳລັງຈະໃຊ້ຈ່າຍ ແລ້ວຍັງຕ້ອງໄດ້ພິມໃໝ່ອີກ.
ສຳລັບຜູ່ລູກຄ້າຜູ່ທີ່ລົງທະບຽນຢູ່ແລ້ວ ເຮົາກໍສາມາດນຳເອົາຂໍ້ມູນທີ່ເຂົາກອບຕອນເຂົາລົງທະບຽນ ມາໃຊ້ເວລາທີ່ເຂົາຈະຈ່າຍເງິນ ເພື່ອຫຼຸດຜ່ອນເວລາໃນການຈ່າຍເງິນຂອງລູກຄ້າເຮົາລົງ ອີກທັງຍັງຫຼຸດຄວາມຜິດພາດຈາກການພິມນຳອີກ. ສຳລັບຜູ່ໃຊ້ທີ່ຍັງບໍ່ໄດ້ລົງທະບຽນ ຫຼື ລົງທະບຽນແລ້ວ ແຕ່ຂໍ້ມູນຍັງບໍ່ຄົບ ເຮົາກໍ່ສະໜອງບໍລິການຈ່າຍເງິນຈາກ third party ທີ່ເຂົາອາດຈະມີຂໍ້ມູນຢູ່ແລ້ວມາໃຊ້. ຫຼາຍເວັບໄຊຂາຍເຄື່ອງອອນລາຍ ເລີ່ມພາກັນໃຫ້ບໍລິການຈ່າຍເງິນຜ່ານບໍລິການ third party ເພື່ອຫຼຸດຜ່ອນໄລຍະເວລາການກອບຟອມໂດຍສະເພາະ ທີ່ຢູ່ບອ່ນທີ່ຈະສົ່ງເຄື່ອງໄປ.
4. Use click-to-call buttons for complex tasks
ການທີ່ເຮົາສະເໜີປຸ່ມໂທ click-to-call ສາມາດຊ່ວຍລູກຄ້າຂອງເຮົາຈາກການທີ່ຢຸດໂດຍຕັ້ງໃຈເວລາທີ່ເວລາທີ່ເຂົາຕ້ອງໃຫ້ຂໍ້ມູນທີ່ຊັບຊ້ອນ
ສະເໜີ click-to-call ໃນຊ່ວງ ຫຼື ຂັ້ນຕອນທີ່ຕ້ອງການປ້ອນຂໍ້ມູນທີ່ຊັບຊ້ອນ ແລະ ເປັນຂໍ້ມູນທີສຳຄັນ (ລະອຽດອ່ອນ). ຈາກການທົດລອງຜູ່ຮ່ວມທົດລອງຖືວ່າຍິນດີທີ່ເຂົາຈະໃຊ້ຕົວເລືອກນີ້ເພື່ອໂທຫາ ພະແນກການເງິນ ເພື່ອຊ່ວຍໃນການສຳເລັດການທຸລະກຳການເງິນຂອງເຂົາ.
5. Make it easy to finish converting on another device
ສະເໜີຕົວເລືອກໃນການສົ່ງຕໍ່ (ຖ່າຍໂອນ) ກິດຈະກຳຈາກອຸປະກອນໜຶ່ງໄປອີກອຸປະກອນໄດ້ງ່າຍ ແລະ ສະດວກສະບາຍ ເຊັ່ນ ຜ່ານ email, social sharing ຫຼື ວ່າ ເກັບໄວ້ໃນກະຕ່າ (save-to-cart)
3.2.4 ການປະກອບຟອມ (Form entry)
1. Streamline information entry
ສະເໜແປ້ນພິມພຽງແຕ່ຕົວເລກເທົ່ານັ້ນໃຫ້ກັບຜູ່ໃຊ້ ກໍລະນີທີ່ ເຂົາກຳລັງພິມໃນຊ່ອງທີ່ໃຫ້ໃສ່ແຕ່ໂຕເລກ ແລະ ສືບຕໍ່ຢ້າຍໄປຕື່ມຊ່ອງຕໍ່ໄປອັດຕະໂນມັດໃຫ້ກັບຜູ່ໃຊ້ຫຼັງຈາກເຂົາກອບຂໍ້ມູນແລ້ວ
2. ເລືອກໂຕປ້ອນທີ່ງ່າຍທີສຸດໃນແຕ່ລະຊ່ອງ (Choose the simplest input method for each task)
ໃສ່ຕົວເລືອກເລື່ອນ-ຂຶ້ນ-ເລື່ອນ-ລົງ ເມນູ ເພື່ອໃຫ້ຜູ່ໃຊ້ງານງ່າຍໃນການກອບ ແລະ ຕ້ອງໝັ້ນໃຈວ່າ ເມນູ ດັ່ງກ່າວ ຕ້ອງກົດງ່າຍ
ເມື່ອຜູ່ໃຊ້ງານຕ້ອງການເລືອກຕົວເລືອກທີ່ຈຳກັດ ວິທີທີ່ງ່າຍທີ່ສຸດສຳລັບເຂົາກໍຄື ການກົດຈາກເມນູ drop-down ເຊັ່ນ ການເລືອກ ວັນທີ, ເດືອນ, ປີ, ເພດ ເປັນຕົ້ນ.
3. ສະເໜີຮູບປະຕິທິນເວລາເລືອກມື້, ເລືອກຍາມ (Provide a visual calendar when selecting dates)
ສະເໜີຮູບປະຕິທິນ ແລະ ວິທີການນຳໃຊ້ໃຫ້ຊັດເຈນ ເວລາທີ່ຜູ່ໃຊ້ເຮົາຢູ່ຂັ້ນຕອນການເລືອກມື້
ປົກກະຕິແລ້ວ ຜູ່ໃຊ້ງານຈະເລືອກລືມມື້ໃນອາທິດຕໍ່ໄປ ເວລາທີ່ຕົນເອງກຳລັງຈອງປີ້ຍົນຢູ່. ສະເໜີຮູບປະຕິທິນໃຫ້ຜູ່ໃຊ້ງານຂອງເຮົາ ເພື່ອທີ່ເຂົາຈະບໍ່ໄດ້ເສຍວ່າລາ ງວກໄປເບິ່ງປະຕິທິນ. ເພື່ອບໍ່ໃຫ້ເກີດຄວາມສັບສົນ ໂດຍລະບຸສຳລັບມຶ້ເລີ່ມຕົ້ນ ແລະ ມື້ສິ້ນສຸດໃຫ້ຊັດເຈນ.
4. ຫຼຸດຜ່ອນຈຳນວນການປ້ອນຟອມຜິດພາດໂດຍການຕິດປ້າຍກຳກັບ ແລະ ການກວດສອບທັນທີ່ທັນໃດ (Minimize form errors with labeling and real-time validation)
ໃຊ້ປ້າຍກຳກັບໝວດໝູ່ໃຫ້ຊັດເຈນ ເພື່ອບອກໃຫ້ຜູ່ໃຊ້ຮູ້ວ່າເຮົາກຳລັງຕ້ອງການຫຍັງ ກຳລັງຖາມຄຳຖາມກ່ຽວກັບຫຍັງຢູ່ ແລະ ກວດສອບຂໍ້ຜິດພາດຈາກກການປ້ອນຟອມທັນທີທັນໃດ ເພື່ອໃຫ້ຜູ່ໃຊ້ຮູ້ວ່າ ຟອມບໍ່ຜ່ານ ກ່ອນເຂົາກົດສົ່ງ
5. Design efficient forms
ຫຼຸດຈຳນວນຈຳນວນຊ່ວງປ້ອນຟອມຂອງທ່ານລົງ ແລະ ໃຊ້ auto-fill information ໃນບ່ອນທີ່ເປັນໄປໄດ້. ໃຊ້ໂຕບົ່ງບອກວ່າຜູ່ໃຊ້ເຮັດຮອດຂັ້ນຕອນໃດແນ່ແລ້ວ ເພື່ອຊ່ວຍໃຫ້ກະເຈົ້າປະກອບຟອມຂອງເຮົາໃຫ້ງ່າຍຂຶ້ນ ເວລາທີ່ເຮົາໃຊ້ຟອມຫຼາຍໆຟອມ.
3.2.5 Usability and form factor
1. Optimize your entire site for mobile
ເວັບຂອງທ່ານຈະໃຊ້ງ່າຍຂຶ້ນຫາກໜ້າເວັບຂອງທ່ານທຸກໜ້າອອກແບບເພື່ອໃຊ້ງານກັບໜ້າຈໍໂທລະສັບ
ຜູ່ໃຊ້ງານຈະກົດນັ້ນກົດນີ້ງ່າຍກ່ວາຖ້າໃຊ້ເວັບທີ່ປັບປຸງປະສິດຕິພາບສຳລັບໂທລະສັບ ຫຼາຍກ່ວາ ການທີ່ເຂົາໃຊ້ເວັບສຳລັບ Desktop ຢູ່ໂທລະສັບ. ນອກນັ້ກ, ເວັບທີ່ປະສົມປະສານກັນລະຫວ່າງໂທລະສັບ ແລະ desktop ຈະໃຊ້ຍາກກ່ວາ.
2. ຫ້າມໃຫ້ຜູ່ໃຊ້ຈີບນິ້ວອອກເພື່ອຂະຫຍາຍ (Don’t make user pinch to zoom)
ຜູ່ເຂົ້າຊົມອາດຈະບໍ່ເຫັນ calls-to-action ຫຼື ຂໍ້ຄວາມທີ່ສຳຄັນ ຖ້າເຂົາຊູມເຂົ້າຊູມອອກໜ້າຈໍ
3. ເຮັດໃຫ້ຮູບສາມາດຂະຫຍາຍໄດ້ (Make product images expandable)
ໃສ່ຮູບທີ່ມີຄວາມລະອຽດສູງນຳສຳລັບຮູບທີ່ສຳຄັນ ເຊັ່ນ ຮູບສິນຄ້າ
4. ບອກຜູ່ໃຊ້ງານວ່າໜ້າຈໍໃດເວັບເຮົາສະແດງໄດ້ດີທີ່ສຸດ (Tell users which screen orientation works best)
ບອກຜູ່ໃຊ້ງານໃນກໍລະນີທີ່ເນື້ອຫາຂອງເຮົາສະແດງຜົນໄດ້ດີໃນກໍລະນີໃດ (ລວງຕັ້ງ-ລວງຂວາງ) ແຕ່ຕ້ອງໝັ້ນໃຈວ່າ calls-to-action ຂອງເຮົາຈະບໍ່ເປັນຫຍັງ ເຖິງເຂົາຈະບໍ່ເຮັດຕາມທີ່ເຮົາຂໍ
5. Keep your user in a single browser window
ເຮົາຕ້ອງໝັ້ນໃຈວ່າເວລາທີ່ຜູ່ໃຊ້ເຮົາກົດ calls-to-action ແລ້ວໄປໜ້າຕ່າງໃໝ່ ເພາະບາງຜູ່ໃຊ້ງານອາດຈະບໍ່ມັກເວລາທີ່ປ່ຽນໜ້າຕ່າງໄປມາ
6. Avoid “full site” labeling
ເພື່ອໃຫ້ປະສົບການຜູ່ໃຊ້ງານຂອງເຮົາບໍ່ປ່ຽນເວລາທີ່ເຂົາປ່ຽນການສະແດງຜົນຂອງເວັໄຊ ເຮົາຄວນຈະໃຊ້ຄຳວ່າ “desktop” ແທນຄຳ “full” ເພື່ອແກ້ໄຂສະຖານະການທີ່ວ່າ ເຂົາຈະເຂົ້າໃຈຜິດວ່າ ປະສົບການໃຊ້ງານ “full site” (=>”desktop site”) ຕ່າງຈາກ “mobile site”
7. ຕ້ອງອະທິບາຍໃຫ້ກະຈ່າງແຈ້ງວ່າເຮົາຂໍທີ່ຕັ້ງຂອງຜູ່ໃຊ້ງານເພື່ອຫຍັງ (Be clear why you need a user’s location)
ເຮົາຈະຕ້ອງບອກຜູ່ໃຊ້ງານຂອງເຮົາວ່າ ເປັນຫຍັງເຮົາຕ້ອງຂໍທີ່ຕັ້ງຂອງກະເຈົ້າ ແລະ ຂໍ້ມູນທີ່ເຮົາຂໍໄປນັ້ນ ຈະໄປຊ່ວຍປະສົບການຂອງເຂົາດີຂຶ້ນແນວໃດ
3.3 ທົດສອບ ແລະ ວັດຜົນຄວາມສຳເລັດ (Testing and measuring success)
ທຸກໆຄົນທີ່ເປັນຜູ່ສ້າງເນື້ອຫາ (content create) ຫຼື ນັກອອກແບບປະສົບການການໃຊ້ງານເວັບໄຊ ສາມາດນຳຜົນປະໂຫຍດຈາກການທົດສອບໄປໃຊ້ໄດ້. ນັກການຕະຫຼາດສາມາດສ້າງການທົດລອງໃນໜ້າ landing page ເພື່ອເບິ່ງວ່າມັນໄດ້ເພີ່ມການປະຕິສຳພັນຫຼາຍຂຶ້ນບໍ່ (conversion), ຜູ່ຂາຍເນື້ອຫາສາມາດທົດສອບໄດ້ວ່າການປ່ຽນໂຄງສ້າງ (layout) ຈະເຮັດໃຫ້ຢູ່ດົນຂຶ້ນບໍ່, ນັກບໍລິຫານຈັດການສື່ອອນລາຍ (social media manager) ສາມາດທົດລອງວ່າຄວາມແຕ່ກຕ່າງຍຸດທະສາດການຂອງແຊ (sharing) ແລະ ນັກພັດທະນາ ແລະ ນັກອອກແບບສາມາດທົດສອບການອອກແບບເວັບໄຊໃໝ່ໄດ້. ເຮົາຈະມາເບິ່ງວ່າ ວິທີການທົດສອບຄວາມສາມາດ (feature) ຂອງ UX ຈະເຮັດໄດ້ດີສ່ຳໃດ, ຮຽນຮູ້ວ່າເຮົາຈະວິເຄາະຂໍ້ມູນຈາກການອັບປຸງ UX ແນວໃດແນ່ ແລະ ຮຽນຮູ້ວິທີວັດຜົນສຳເລັດດ້ວຍ Google Analytics.
3.3.1 A/B Testing
A/B Testing (A/B/n test) ແມ່ນຫຍັງ?
ແມ່ນການທົດສອບທີ່ສຸ່ມການທົດລອງຂອງເຮົາມາທົດສອບກັນ ໂດຍການທົດລອງນີ້ຈະໃຊ້ຕົວປ່ຽນ ສອງຕົວຂຶ້ນໄປ ໃນການທົດລອງກັບຕົວຢ່າງດຽວ (ໜ້າເວັບດຽວ). ຕົວປ່ຽນ A ຈະເປັນຕົວປ່ຽນທີ່ບໍ່ມີການປ່ຽນແປງຫຍັງ ແລະ ຕົວປ່ຽນ B ຈະເປັນຕົວປ່ຽນທີ່ເຮົາຈະໃຊ້ໃນໄອເດຍໃໝ່ເຮົາ ທີ່ຖືກປັບປ່ຽນຈາກຕົ້ນສະບັບ.
ຕົວຢ່າງການທົດສອບ A/B ເຮົາມີຕົວປ່ຽນຢູ່ 2 ຕົວຄື. ຕົວປ່ຽນ A ແມ່ນໃຊ້ຮູບສີຟ້າ ແລະ ຕົວປ່ຽນ B ໃຊ້ຮູບສີແດງ.
ສຳລັບເຄື່ອງມືທີ່ໃຊ້ໃນການທົດສອງ A/B ເຮົາສາມາດໃຊ້ເຄື່ອງມືບໍ່ເສຍເງິນກະໄດ້ຈາກ Google ຊື່ວ່າ Google Optimize
3.3.2 ໃຊ້ Google Analytics
ສຳລັບຜູ່ເຮັດເວັບໄຊສ່ວນຫຼາຍໜ້າຈະຄຸ້ນຫູກັນກັບ Google Analytics ເຊິ່ງເປັນເຄື່ອງມືທີ່ໃຊ້ວັດສະຖິຕິຕ່າງໆກ່ຽວກັບເວັບເຮົາ ເຊັ່ນ: ສະຖິຕິການໃຊ້ປະຈຸບັນ, ພຶດຕິກຳຂອງຜູ່ໃຊ້, ຊ່ອງທາງທີ່ຜູ່ໃຊ້ເຂົ້າມາເວັບເຮົາ, ຜູ່ເຂົ້າຊົມ ເປັນຕົ້ນ.
ຂອບໃຈຂໍ້ມູນຈາກ Mobile Site Assessment Guideline | Google Partners
