การประยุกต์ใช้ User Interface (UI) และ User Experience (UX) ในการออกแบบแพลตฟอร์ม

ผู้แต่ง

  • สุคนธ์ทิพย์ คำจันทร์ คณะเทคโนโลยีสารสนเทศ มหาวิทยาลัยอีสเทิร์นเอเชีย
  • ประภาพร กุลลิ้มรัตน์ชัย สำนักวิชาการ มหาวิทยาลัยอีสเทิร์นเอเชีย

คำสำคัญ:

ส่วนต่อประสานผู้ใช้งาน, ประสบการณ์ผู้ใช้งาน, การออกแบบปฏิสัมพันธ์กับผู้ใช้

บทคัดย่อ

ปัจจุบันเทคโนโลยีมีการพัฒนาอย่างรวดเร็ว ทำให้องค์กรหรือบริษัทต้องมีการปรับตัวตามสถานการณ์ที่มีการเปลี่ยนแปลงของ Digital Transformation ซึ่งเป็นการเปลี่ยนแปลงทางด้านแนวคิดโดยมีการนำเทคโนโลยีมาปรับใช้กับองค์กรหรือธุรกิจให้เกิดความน่าสนใจและเป็นจุดเด่นที่มีความแตกต่าง โดยเฉพาะกลุ่มธุรกิจทางด้านการให้บริการที่จะต้องคำนึงถึงผู้ใช้งานในการเลือกใช้แพลตฟอร์มด้านการให้บริการผ่านอุปกรณ์สื่อสารทุกประเภท ทำให้กลุ่มธุรกิจเหล่านี้ต้องให้ความสำคัญของการออกแบบส่วนต่อประสานผู้ใช้งาน User Interface--UI และการออกแบบประสบการณ์ผู้ใช้ User Experience--UX ที่มีผลต่ออารมณ์และความรู้สึกของการใช้งาน เช่น การเลือกสีในการออกแบบตัวอักษร การจัดวางตำแหน่งข้อมูล กราฟิก และปุ่มต่าง ๆ ที่ปรากฎในหน้าจอ เพื่อให้ผู้ใช้เกิดความพึงพอใจและเกิดแรงจูงใจในการใช้งานของแพลตฟอร์มนั้น ๆ ซึ่งต้องมีการนำความรู้เกี่ยวกับ UX มาออกแบบส่วนของผู้ใช้งานระบบ และ UI ในการทำ Wireframe ซึ่งเป็นการร่างองค์ประกอบต่าง ๆ ที่จะปรากฏในหน้าจอของแต่ละแพลตฟอร์ม และจึงนำมาสร้างเป็นต้นแบบ (Prototype) เพื่อนำไปออกแบบและทดสอบให้ได้มาซึ่งความสมบูรณ์ของหน้าจอ โดยเฉพาะในกลุ่มธุรกิจ E-Commerce กลุ่มธุรกิจอาหาร กลุ่มธุรกิจด้านการขนส่ง และกลุ่ม Startup ซึ่งเป็นกลุ่มธุรกิจที่เน้นการให้บริการต่อผู้ใช้ผ่านแพลตฟอร์มต่าง ๆ จึงส่งผลดีต่อองค์กรหรือบริษัทที่จะนำประเด็นของการออกแบบโดยอาศัย UI และ UX ในการพัฒนาแพลตฟอร์ม โดยองค์ประกอบที่สำคัญสำหรับการออกแบบหน้าจอต่าง ๆ ที่มีความจำเป็นต้องศึกษาจาก UX ผ่านการเฝ้าสังเกต การสัมภาษณ์ หรือการทำวิจัย เพื่อให้สามารถแก้ไขปัญหาที่ผู้ใช้ หรือนักพัฒนา นักออกแบบ เห็นว่าการใช้งานของแพลตฟอร์มนั้น ๆ ยังไม่ตอบสนองต่ออารมณ์และความรู้สึกผ่านพฤติกรรมการใช้งานของผู้ใช้ ในการประยุกต์ใช้ UI และ UX นักพัฒนาต้องเข้าใจถึงปัญหาที่เกิดขึ้นระหว่างผู้ใช้และจะทำอย่างไรให้ผู้ใช้เกิดความพึงพอใจ ซึ่งจะต้องมีการแก้ไขปัญหาและการนำเสนอข้อมูลในแพลตฟอร์มต่าง ๆ ให้สามารถใช้งานได้ง่าย เช่น การวางตำแหน่งของโครงร่างของแพลตฟอร์ม ตัวอักษร รูปภาพ กราฟิก การใช้สี การใช้ไอคอน และปุ่มกด ที่จะสามารถดึงดูดความรู้สึกของผู้ใช้ให้เกิดความพึงพอใจและตรงกับความต้องการในการใช้งาน

 

References

Betteruxui.com. (2020). UX/UI. Retrieved from http://betteruxui.com/what-is-ux-ui. (in Thai)

Blockfint.com. (2020). Confusion-between-ux-ui-interaction-design-visual-desgn. Retrieved from https//blockfint.com/blog/confusion-between-ux-ui-interaction-design-visual-desgn. (in Thai)

Blockfint.com. (2021). UX Design vs UI Design vs Interaction Design vs Visual Design. Retrieved from https//blockfint.com/blog/ confusion-between-ux-ui-interaction-design-visual-design. (in Thai)

Chainoi, K. (2020). Basic User Interface. Retrieved from https://www.medium.com/upskill-ux/basicuserInterface. (in Thai)

Chloeserugend04. (2021). It’s not UX if you’re not doing Research. Retrieved from https://en.creativminds.ch/post/it-s-not-ux-if-you-re-not-doing-research-1. (in Thai)

Demeter ICT Co., Ltd. (2022). UX-vs-UI. Retrieved from http://www.dmit.co.th/th/ข่าวสาร/ux-vs-ui/ (in Thai)

Designil.Com. (2021). Wireframe-website-free-download. Retrieved from https://www.designil.com/Wireframe-website-free-download. (in Thai)

Diakunwadee. (2018). UI vs UX. Retrieved from http://www.thaiprogrammer.org/2018/12/ui-vs-ux/. (in Thai)

Iconext Writer. (2021). What UX/UI Design. Retrieved from https://iconext.co.th/th/2021/19/ux-ui-design/ (in Thai)

Iconext Writer. (2021). Wireframe. Retrieved from https://iconext.co.th/th/2021/11/26/wireframe/. (in Thai)

Imsudjai, S. (2022). UX Design. Retrieved from https://www.borntodev.com/2022/01/04/ux-Design. (in Thai)

Interaction-design.org. (2002). User Interface Design. Retrieved from https://www.interaction-design.org/literature/topics/ui-design.

Interaction-design.org. (2002). Interaction Design Process. Retrieved from https://www.interaction-design.org/literature/topics/interaction-design-process.

Iqbal, M. (2020). Reading App. Retrieved from https://www.behance.net/gallery/99338383/Ereader-(reading-app)

Jansorn, T. (2019). User Interface. Retrieved from http://scimooc.bsru.ac.th/file/article/20190905-212259.pdf (in Thai)

JobsDB.com (2020). UX/UI Design. Retrieved from https://th.jobsdb.com/th-th/articles/ux-ui-design/ (in Thai)

Kaewvichit, R. (2019). Awareness and access to BTS SkyTrain application users (Master’s thesis). Bangkok University. Bangkok. https://www.dspace.bu.ac.th/jspui/bitstream/123456789/4073/1/ratchaneporn_kaew.pdf. (in Thai)

Mdsiglobal.com. (2020). UX/UI. Retrieved from http://www.mdsiglobal.com/ux-ui/ (in Thai)

Monmai. (n.d.) UX-UI Design. Retrieved from https://www.monmai.net/ux-ui/?. (in Thai)

Nbdigital Co., Ltd. (2020). UX&UI. Retrieved from https://nbdigital.in.th/article/44/UX-&-UI Designer. (in Thai)

Phupaloy, A. (2020). Figma. Retrieved from https://www.mindphp.com/forums/viewtopic.php?p=203615. (in Thai)

Pruxus.com. (2020). UX Process. Retrieved from https://www.pruxus.com/articles/3-steps todo-ux-that every organization should have. (in Thai)

Puwatai. (2020). Wireframe Design. Retrieved from https://puwatai.medium.com/ wireframe-6f77403702cb

Rachkorn. (2022). Software-review/sketch-figma-adobe-xd. Retrieved from https://thegrowthmaster.com/software-review/sketch-figma-adobe-xd. (in Thai)

Ray Slater Berry. (2021). What is UX Design skills, tools, and advice. Retrieved from https://maze.co/collections/ux-ui-design/what-is-ux/

Sahota, A. (2020). What is UX Design. Retrieved from https://uxplanet.org/what-is-ux-design-bb02fc45aba5. (in Thai)

Stevens, E. (2022). What is User Experience (UX) Design? Everything you need to know. Retrieved from https://careerfoundry.com/en/blog/ux-design/what-is-user-experience-ux-design-everything-you-need-to-know-to-get-started/.

ThaiBusinessSearch.com. (2020). Wireframe. Retrieved from https://www.thaibusinesssearch.com/marketing/wireframe/ (in Thai)

Thai Programmer. (2022). User interface vs User experience. Retrieved from https://www.thaiprogarmmer.org/2018/12/ui-vs-ux (in Thai)

Tutoroui-plus.com. (2020). User interface and user experience. Retrieved from http://tuemaster.com/blog/ui-and-ux. (in Thai)

Tutoroui-plus.com. (2020). The history of UI. Retrieved from http://tuemaster.com/blog/ui-and-ux. (in Thai)

Watcharamanotham, C. (2018). What-is-interaction. Retrieved from http://bkksigchi.acm.org/2018/02/17/what-is-interaction/. (in Thai)

Downloads

เผยแพร่แล้ว

2022-07-18

ฉบับ

บท

บทความวิชาการ