การเคลื่อนไหวมีผลกระทบอย่างมากต่อประสบการณ์ของผู้ใช้ผลิตภัณฑ์ดิจิทัล แต่หากองค์ประกอบอินเทอร์เฟซไม่แสดงหลักการออกแบบการเคลื่อนไหวพื้นฐานความสามารถในการใช้งานจะถูกทำลาย ในบริบทของอินเทอร์เฟซผู้ใช้การเคลื่อนไหวเป็นมากกว่าการตกแต่งภาพ เป็นพลังที่น่าสนใจที่ส่งเสริมการมีส่วนร่วมของผลิตภัณฑ์และขยายขอบเขตการสื่อสารด้านการออกแบบ

โลกของเราเป็นหนึ่งในการเคลื่อนไหว แม้ในช่วงเวลาที่หยุดนิ่งใบสั่นและปอดขยายตัว ในขอบเขตของการออกแบบผลิตภัณฑ์ดิจิทัลดูเหมือนว่าการเคลื่อนไหวเป็นลักษณะที่สองซึ่งเป็นส่วนเสริมของชีวิตประจำวันที่ต้องใช้ประโยชน์จากความพยายามเพียงเล็กน้อย ถ้าเป็นเช่นนั้นจริง

เพียงแค่ถามใครก็ตามที่เป็นองค์ประกอบ UI แบบเคลื่อนไหวเป็นครั้งแรก ชั่วโมงแห่งความพยายามให้ผลลัพธ์แบบมือสมัครเล่น สิ่งที่เรียบง่ายอย่างการ์ดที่เลื่อนไปบนหน้าจอดูน่าอึดอัด ทำไมถึงเป็นเช่นนั้น?

ตามทฤษฎีแล้วการย้ายองค์ประกอบ UI เป็นเรื่องง่าย กำหนดจุดบนเส้นทางที่กำหนดไว้ล่วงหน้าและซอฟต์แวร์จะปรับแต่งช่องว่าง ในความเป็นจริงมันไม่ได้ผลเช่นนั้น เครื่องมือและเทคนิคเป็นสิ่งสำคัญ แต่ได้รับพลังจากหลักการ หากการเคลื่อนไหวคือการเพิ่มความสามารถในการใช้งานผลิตภัณฑ์ดิจิทัลต้องมีพื้นฐานมาจากกฎของพฤติกรรมที่ไม่เปลี่ยนแปลงซึ่งนำไปใช้กับกรณีการใช้งานจำนวนไม่ จำกัด

ต้นกำเนิดของการออกแบบการเคลื่อนไหว

การแต่งงานของการออกแบบการเคลื่อนไหวและ UX ค่อนข้างใหม่ แต่มีรากฐานมาจากดิสนีย์ Frank Thomas และ Ollie Johnston เป็นหนึ่งในบุคคลที่มีมูลค่ามากที่สุดของ Walt Disney อนิเมเตอร์ และผู้มีส่วนร่วมสำคัญของคลาสสิกเช่น พินโนจิโอ , แบมบี้ และ แฟนตาซี . ของพวกเขา หลักการพื้นฐานของแอนิเมชั่น 12 ประการ ยังคงมีอิทธิพลใน กราฟิกเคลื่อนไหว สำหรับภาพยนตร์โทรทัศน์และเนื้อหาดิจิทัล

หลักการของดิสนีย์กลั่นกฎสำคัญของการเคลื่อนไหวทางกายภาพเพื่อประโยชน์ในการเล่าเรื่องแบบเคลื่อนไหว พวกเขาช่วยให้ตัวละครที่วาดสามารถเคลื่อนไหวและแสดงอารมณ์ได้ แต่ไม่สามารถตอบสนองความต้องการการเคลื่อนไหวเชิงโต้ตอบของสมัยใหม่ได้อย่างเพียงพอ ส่วนต่อประสานผู้ใช้ .

นักออกแบบร่วมสมัยได้พยายามลดช่องว่างนี้ หนึ่งในตัวอย่างที่อธิบายเพิ่มเติมคือ หลักการออกแบบการเคลื่อนไหว 10 ประการ ดิสนีย์ดัดแปลงโดยผู้เชี่ยวชาญด้านแอนิเมชั่น Jorge R.Canedo Estrada . อย่างไรก็ตามประเด็นนี้เรียกร้องให้มีการแปลหากจะนำไปใช้แบบองค์รวมกับการออกแบบผลิตภัณฑ์ดิจิทัล

ความพยายามที่มีความทะเยอทะยานที่สุดในการปรับทิศทางหลักการเคลื่อนไหวขององค์ประกอบ UI แบบโต้ตอบ (และความสำคัญของ UX) คือ Issara Willenskomer UX ใน Motion Manifesto . ความลึกนั้นน่าประหลาดใจ แต่อ่านไม่เข้าใจ

ในการจัดตั้ง หลักการ 12 ประการของ UX ในการเคลื่อนไหว , วิลเลนสโคเมอร์:

• แยกแยะการออกแบบการเคลื่อนไหวจากภาพเคลื่อนไหว UI
• แสดงให้เห็นว่าการเคลื่อนไหวช่วยให้ใช้งานได้อย่างไร
• คลายการทำงานภายในของพฤติกรรมการเคลื่อนไหวหลัก

การออกแบบการเคลื่อนไหวและ UX: ความแตกต่างที่สำคัญ

ก่อนที่จะกล่าวถึงหลักการของการออกแบบการเคลื่อนไหวสิ่งสำคัญคือต้องเน้นความแตกต่างที่สำคัญที่ปรากฏในแถลงการณ์ของ Willenskomer

การเคลื่อนไหวเป็นมากกว่าการประดับประดา

การออกแบบการเคลื่อนไหวไม่ตรงกันกับภาพเคลื่อนไหว UI สิ่งนี้มีความสำคัญเนื่องจากภาพเคลื่อนไหว UI มักถูกมองว่าเป็นเครื่องสำอางในภายหลังโดยไม่มีผลต่อ UX (ยกเว้นเพื่อเพิ่มเสน่ห์) การเคลื่อนไหวไม่ใช่การตกแต่ง แต่เป็นพฤติกรรมและพฤติกรรมเท่านั้นที่สามารถช่วยหรือขัดขวางประสบการณ์ของผู้ใช้ได้

สองประเภทการโต้ตอบ: เรียลไทม์กับไม่ใช่เรียลไทม์

การออกแบบการเคลื่อนไหวเกี่ยวข้องกับการโต้ตอบพื้นฐาน 2 ประการ ได้แก่ แบบเรียลไทม์และไม่เรียลไทม์

• เรียลไทม์ การโต้ตอบให้ข้อเสนอแนะทันทีเมื่อผู้ใช้จัดการกับองค์ประกอบ UI บนหน้าจอ กล่าวอีกนัยหนึ่งพฤติกรรมการเคลื่อนไหวตอบสนอง ทันที เพื่อป้อนข้อมูลของผู้ใช้
• ไม่ใช่แบบเรียลไทม์ การโต้ตอบเกิดขึ้น หลังจาก การป้อนข้อมูลของผู้ใช้ซึ่งหมายความว่าผู้ใช้จะต้องหยุดชั่วครู่และดูพฤติกรรมการเคลื่อนไหวที่เกิดขึ้นก่อนดำเนินการต่อ

Motion รองรับการใช้งาน

การออกแบบการเคลื่อนไหวต้องรองรับการใช้งานในสี่รูปแบบที่แตกต่างกัน

• ความคาดหวัง: เมื่อผู้ใช้โต้ตอบกับองค์ประกอบ UI พวกเขาคาดว่าจะเห็นพฤติกรรมการเคลื่อนไหวแบบใด การเคลื่อนไหวเป็นไปตามความคาดหวังหรือทำให้เกิดความสับสน?
• ความต่อเนื่อง: การโต้ตอบทำให้เกิดพฤติกรรมการเคลื่อนไหวที่สอดคล้องกันตลอดประสบการณ์ของผู้ใช้หรือไม่
• เรื่องเล่า: การโต้ตอบและพฤติกรรมการเคลื่อนไหวที่ทริกเกอร์เชื่อมโยงกับความก้าวหน้าเชิงตรรกะของเหตุการณ์ที่ตอบสนองความตั้งใจของผู้ใช้หรือไม่
• ความสัมพันธ์: คุณลักษณะเชิงพื้นที่สุนทรียศาสตร์และลำดับชั้นขององค์ประกอบ UI สัมพันธ์กันและมีอิทธิพลต่อการตัดสินใจของผู้ใช้อย่างไร การเคลื่อนไหวมีผลต่อความสัมพันธ์ขององค์ประกอบต่างๆที่มีอยู่อย่างไร?

หลักการออกแบบการเคลื่อนไหว 12 ประการสำหรับผลิตภัณฑ์ดิจิทัล

1. การผ่อนคลาย

การค่อยๆเปลี่ยนเป็นการเลียนแบบวิธีที่วัตถุในโลกแห่งความจริงเร่งความเร็วและช้าลงเมื่อเวลาผ่านไป ใช้กับองค์ประกอบ UI ทั้งหมดที่แสดงการเคลื่อนไหว

สิ่งที่ตรงกันข้ามกับการค่อยๆเปลี่ยนคือการเคลื่อนไหวเชิงเส้น องค์ประกอบ UI ที่แสดงการเคลื่อนที่เชิงเส้นจะเปลี่ยนจากแบบนิ่งไปเป็นความเร็วเต็มและความเร็วเต็มไปจนถึงนิ่งทันที พฤติกรรมดังกล่าวไม่มีอยู่ในโลกทางกายภาพและดูเหมือนจะหยุดชะงักสำหรับผู้ใช้

2. ชดเชยและความล่าช้า

เมื่อองค์ประกอบ UI หลายอย่างเคลื่อนที่ในเวลาและความเร็วเดียวกันผู้ใช้มักจะรวมกลุ่มเข้าด้วยกันและมองข้ามความเป็นไปได้ที่แต่ละองค์ประกอบอาจมีฟังก์ชันการทำงานของตัวเอง

การชดเชยและการหน่วงเวลาจะสร้างลำดับชั้นระหว่างองค์ประกอบ UI ที่เคลื่อนไหวในเวลาเดียวกันและสื่อสารว่าเกี่ยวข้องกัน แต่ต่างกัน แทนที่จะซิงโครไนซ์อย่างสมบูรณ์เวลาความเร็วและระยะห่างขององค์ประกอบจะถูกเปลี่ยนไปส่งผลให้เกิดเอฟเฟกต์ 'ทีละอย่าง' ที่ละเอียดอ่อน

ในขณะที่ผู้ใช้เดินทางไปมาระหว่างหน้าจอสัญญาณชดเชยและหน่วงเวลาแสดงว่ามีตัวเลือกการโต้ตอบหลายตัว

3. การเลี้ยงดู

การเลี้ยงดูจะเชื่อมโยงคุณสมบัติขององค์ประกอบ UI หนึ่งกับคุณสมบัติขององค์ประกอบอื่น ๆ เมื่อคุณสมบัติในองค์ประกอบหลักเปลี่ยนไปคุณสมบัติที่เชื่อมโยงขององค์ประกอบลูกจะเปลี่ยนไปด้วย คุณสมบัติขององค์ประกอบทั้งหมดอาจเชื่อมโยงกัน

ตัวอย่างเช่นตำแหน่งขององค์ประกอบหลักสามารถเชื่อมโยงกับมาตราส่วนขององค์ประกอบลูก เมื่อองค์ประกอบหลักเคลื่อนที่องค์ประกอบลูกจะเพิ่มหรือลดขนาด

การเลี้ยงดูจะสร้างความสัมพันธ์ระหว่างองค์ประกอบ UI สร้างลำดับชั้นและอนุญาตให้หลายองค์ประกอบสื่อสารกับผู้ใช้พร้อมกัน ด้วยเหตุนี้การเลี้ยงดูจึงมีผลมากที่สุดเมื่อใช้ในการโต้ตอบแบบเรียลไทม์

4. การเปลี่ยนแปลง

การเปลี่ยนแปลงเกิดขึ้นเมื่อองค์ประกอบ UI หนึ่งเปลี่ยนเป็นอีกองค์ประกอบหนึ่ง ตัวอย่างเช่นปุ่มดาวน์โหลดจะเปลี่ยนเป็นแถบความคืบหน้าซึ่งจะเปลี่ยนเป็นไอคอนเสร็จสิ้น

aws Solutions Architect Associate เคล็ดลับการสอบ

จากมุมมอง UX การเปลี่ยนแปลงเป็นวิธีที่มีประสิทธิภาพในการแสดงสถานะของผู้ใช้ที่สัมพันธ์กับเป้าหมาย ( การเปิดเผยสถานะระบบ ). สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อความคืบหน้าระหว่างองค์ประกอบ UI เชื่อมโยงกับกระบวนการที่มีจุดเริ่มต้นและจุดสิ้นสุด (เช่นการดาวน์โหลดไฟล์)

5. การเปลี่ยนแปลงมูลค่า

การแสดงมูลค่า (ตัวเลขตามข้อความหรือกราฟิก) มีอยู่มากมายในอินเทอร์เฟซดิจิทัลซึ่งปรากฏในผลิตภัณฑ์ต่างๆตั้งแต่แอปธนาคารไปจนถึงปฏิทินส่วนตัวไปจนถึงไซต์อีคอมเมิร์ซ เนื่องจากการนำเสนอเหล่านี้เชื่อมโยงกับชุดข้อมูลที่มีอยู่จริงจึงอาจมีการเปลี่ยนแปลงได้

การเปลี่ยนแปลงมูลค่าเป็นการสื่อสารลักษณะไดนามิกของการนำเสนอข้อมูลและแจ้งให้ผู้ใช้ทราบว่าข้อมูลเป็นแบบโต้ตอบและอาจได้รับอิทธิพลในระดับหนึ่ง เมื่อมีการนำค่ามาใช้โดยไม่มีการเคลื่อนไหวความเต็มใจที่จะมีส่วนร่วมกับข้อมูลจะลดลง

6. การกำบัง

การกำบังคือการเปิดเผยและปกปิดส่วนต่างๆขององค์ประกอบ UI ในเชิงกลยุทธ์ การปรับเปลี่ยนรูปร่างและขนาดของขอบเขตขององค์ประกอบการมาสก์จะส่งสัญญาณถึงการเปลี่ยนแปลงของยูทิลิตี้ในขณะที่ทำให้องค์ประกอบยังคงระบุตัวตนได้ ด้วยเหตุนี้ภาพที่มีรายละเอียดเช่นภาพถ่ายและภาพประกอบจึงเหมาะอย่างยิ่ง

จากมุมมองด้านความสามารถในการใช้งานนักออกแบบสามารถใช้การมาสก์เพื่อแสดงให้ผู้ใช้เห็นว่าพวกเขากำลังดำเนินการผ่านชุดการโต้ตอบ

ความแตกต่างระหว่าง and s corp และ c corp

7. ภาพซ้อนทับ

ในพื้นที่ 2 มิติไม่มีความลึกและองค์ประกอบ UI อาจเคลื่อนที่ไปตามแกน X หรือ Y เท่านั้น การซ้อนทับสร้างภาพลวงตาของความแตกต่างของพื้นหน้า / พื้นหลังในพื้นที่ 2 มิติของ UI ด้วยการจำลองความลึกการซ้อนทับทำให้องค์ประกอบต่างๆสามารถซ่อนและเปิดเผยได้ตามความต้องการของผู้ใช้

ลำดับชั้นของข้อมูลเป็นข้อพิจารณาที่สำคัญเมื่อใช้การซ้อนทับ ตัวอย่างเช่นสิ่งแรกที่ผู้ใช้ควรเห็นในแอปจดบันทึกคือรายการบันทึกย่อของตน จากนั้นสามารถใช้การวางซ้อนเพื่อเปิดเผยตัวเลือกรองสำหรับแต่ละข้อความได้เช่น ลบ หรือ เก็บถาวร .

8. การโคลนนิ่ง

การโคลนนิ่งเป็นพฤติกรรมการเคลื่อนไหวโดยที่องค์ประกอบ UI หนึ่งแยกออกเป็นส่วนอื่น ๆ เป็นวิธีที่ชาญฉลาดในการเน้นข้อมูลสำคัญหรือตัวเลือกการโต้ตอบ

เมื่อองค์ประกอบ UI ปรากฏขึ้นภายในอินเทอร์เฟซจำเป็นต้องมีจุดเริ่มต้นที่ชัดเจนซึ่งเชื่อมโยงไปยังองค์ประกอบที่อยู่บนหน้าจอ หากองค์ประกอบเพียงแค่ระเบิดหรือเลือนหายไปจากที่ใดก็ตามผู้ใช้จะขาดบริบทที่จำเป็นสำหรับการโต้ตอบที่มั่นใจ

9. การสังเกตการณ์

ลองนึกภาพประตูกระจกฝ้า ต้องใช้การโต้ตอบเพื่อเปิด แต่ก็เป็นไปได้ที่จะมองเห็นสิ่งที่รออยู่ในอีกด้านหนึ่ง (ในระดับหนึ่ง)

การสังเกตการณ์ทำงานในลักษณะเดียวกัน นำเสนอผู้ใช้ด้วยอินเทอร์เฟซที่เรียกร้องให้มีการโต้ตอบในขณะเดียวกันก็เปิดเผยคำใบ้ของหน้าจอที่จะปฏิบัติตาม เมนูการนำทางหน้าจอรหัสผ่านและหน้าต่างโฟลเดอร์ / ไฟล์เป็นตัวอย่างทั่วไป

10. พารัลแลกซ์

พารัลแลกซ์จะแสดงเมื่อองค์ประกอบ UI สององค์ประกอบ (หรือมากกว่า) เคลื่อนที่ในเวลาเดียวกัน แต่ด้วยความเร็วที่ต่างกัน ที่นี่อีกครั้งเจตนาคือการสร้างลำดับชั้น

• องค์ประกอบอินเทอร์แอกทีฟเคลื่อนที่เร็วขึ้นและปรากฏอยู่เบื้องหน้า
• องค์ประกอบที่ไม่โต้ตอบจะเคลื่อนที่ช้าลงและถอยกลับไปที่พื้นหลัง

Parallax นำผู้ใช้ไปสู่องค์ประกอบ UI แบบโต้ตอบในขณะที่อนุญาตให้องค์ประกอบที่ไม่โต้ตอบอยู่บนหน้าจอและรักษาเอกภาพของการออกแบบ

11. มิติ

มิติข้อมูลทำให้ดูเหมือนว่าองค์ประกอบ UI มีด้านโต้ตอบหลายด้านเช่นเดียวกับวัตถุในโลกทางกายภาพ พฤติกรรมนี้ทำได้โดยการทำให้องค์ประกอบดูเหมือนว่าพับได้พลิกได้ลอยได้หรือมอบให้ด้วยคุณสมบัติความลึกที่สมจริง

ในฐานะอุปกรณ์เล่าเรื่องความมีมิติบ่งบอกว่าด้านต่างๆขององค์ประกอบ UI เชื่อมโยงกันและทำให้การเปลี่ยนหน้าจอราบรื่น

12. ดอลลี่และซูม

ดอลลี่และการซูมช่วยให้ผู้ใช้ 'เดินทาง' ผ่านองค์ประกอบ UI เชิงพื้นที่หรือเพิ่มขนาดเพื่อเปิดเผยรายละเอียดในระดับที่มากขึ้น

• ดอลลี่: ดอลลี่เกิดขึ้นเมื่อมุมมองของผู้ใช้เข้าใกล้ (หรือไกลออกไปจาก) องค์ประกอบ UI ลองนึกภาพบุคคลที่มีกล้องเดินไปที่ดอกไม้เพื่อถ่ายภาพใกล้ ๆ
• ซูม: ด้วยการซูมมุมมองของผู้ใช้และองค์ประกอบ UI จะคงที่ แต่องค์ประกอบจะเพิ่ม (หรือลด) ขนาดภายในหน้าจอของผู้ใช้ ลองนึกภาพว่าบุคคลนั้นอยู่นิ่ง ๆ และใช้คุณสมบัติการซูมของกล้องเพื่อทำให้ดอกไม้ดูใหญ่ขึ้น

การเคลื่อนไหวคือการสื่อสาร

ความต้องการประสบการณ์เชิงโต้ตอบ การเคลื่อนไหว ในทุกรูปแบบที่สนุกสนานและละเอียดอ่อน เมื่อยึดหลักการออกแบบการเคลื่อนไหวแม้แต่องค์ประกอบ UI พื้นฐานที่สุดก็กลายเป็นตัวแทนที่ซับซ้อนของการสื่อสารของมนุษย์ เมื่อหลักการถูกละเลยการเคลื่อนไหวจะรวบรวมลักษณะเฉพาะที่ไม่พบในโลกธรรมชาติ ไม่มีความงดงามทางสุนทรียะใดสามารถเอาชนะความซุ่มซ่ามที่เกิดขึ้นได้

ความสัมพันธ์ระหว่างการออกแบบการเคลื่อนไหวและ UX ของผลิตภัณฑ์ดิจิทัลกำลังเติบโตอย่างรวดเร็ว แนวทางที่มีหลักการในการเคลื่อนไหวจะช่วยป้องกันการพึ่งพาประโยชน์จากแนวโน้มเครื่องมือและเทคนิคที่หายวับไปอย่างไม่เหมาะสม ยังดีกว่ามันยังครอบคลุมการแบ่งระหว่างการเคลื่อนไหวนามธรรมขององค์ประกอบบนหน้าจอ 2 มิติและการรับรู้การเคลื่อนไหวในโลก 3 มิติ

---

แจ้งให้เราทราบสิ่งที่คุณคิด! โปรดแสดงความคิดเห็นความคิดเห็นและข้อเสนอแนะของคุณด้านล่าง

•••

อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:

• แอนิเมชั่นเว็บในยุคหลังแฟลช
• The Designer’s Edge - ภาพรวมของปลั๊กอิน Photoshop
• UX Design Trends Retrospective 2019
• ทำความคุ้นเคย - คำแนะนำเกี่ยวกับขั้นตอนการเริ่มต้นใช้งานของผู้ใช้
• หลักการออกแบบ Mobile UX

ทำความเข้าใจพื้นฐาน

อะไรคือความแตกต่างระหว่างกราฟิคดีไซน์และโมชั่นกราฟิก?

กราฟิกเคลื่อนไหวเป็นภาพเคลื่อนไหวซึ่งหมายความว่ามีการเคลื่อนไหว นี่ไม่ใช่กรณีของการออกแบบกราฟิกแบบดั้งเดิม ด้วยการยึดหลักการออกแบบการเคลื่อนไหวเช่นการค่อยๆเปลี่ยนและการเลี้ยงดูทำให้กราฟิกเคลื่อนไหวทำให้หน้าจอ 2 มิติมีชีวิตชีวาโดยเลียนแบบการเคลื่อนไหวที่พบในโลกแห่งความเป็นจริง

เหตุใดกราฟิกเคลื่อนไหวจึงมีความสำคัญ

ในบริบทของอินเทอร์เฟซผู้ใช้การเคลื่อนไหวช่วยให้สามารถใช้งานได้โดยให้ความต่อเนื่องของประสบการณ์สร้างความคาดหวังในผลลัพธ์และนำผู้ใช้ไปสู่เป้าหมายที่ต้องการ หลักการออกแบบการเคลื่อนไหวเช่นการชดเชยและความล่าช้าจะแจ้งให้ผู้ใช้ทราบถึงความเป็นไปได้ในการโต้ตอบและช่วยให้พวกเขาค้นหาข้อมูลที่สำคัญ

ซอฟต์แวร์ใดดีที่สุดสำหรับกราฟิกเคลื่อนไหว

โปรแกรมออกแบบจำนวนมากขึ้นสามารถสร้างภาพเคลื่อนไหวกราฟิกเคลื่อนไหวได้และโปรแกรมยอดนิยมเช่น Figma และ Sketch รองรับการผสานรวมไทม์ไลน์ของแอนิเมชั่น อย่างไรก็ตามผู้ถือมาตรฐานคือ Adobe After Effects โดยเฉพาะอย่างยิ่งเมื่อต้องทำการทดลองและพัฒนาพฤติกรรมการเคลื่อนไหวใหม่ ๆ

ใช้โมชั่นกราฟิกที่ไหน

ภาพเคลื่อนไหวกราฟิกเคลื่อนไหวถูกนำมาใช้ในสื่อดิจิทัลที่หลากหลายและเติบโตขึ้นเรื่อย ๆ ก่อนปี 2550 ทำให้อุปกรณ์เคลื่อนที่หลั่งไหลเข้ามาทั่วโลกกราฟิกเคลื่อนไหวมักเกี่ยวข้องกับภาพยนตร์และโทรทัศน์มากขึ้น ปัจจุบันสิ่งเหล่านี้เป็นส่วนสำคัญของประสบการณ์ผู้ใช้ผลิตภัณฑ์และแอปดิจิทัล