ทบทวนการออกแบบส่วนต่อประสานผู้ใช้สำหรับแพลตฟอร์มทีวี

ข้อมูลเบื้องต้นเกี่ยวกับส่วนประกอบพื้นฐานของ UI ของทีวี

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

การดูมากกว่า 92% ในหมู่ผู้ใหญ่ในสหรัฐอเมริกายังคงเกิดขึ้นบนหน้าจอทีวี

ความหมายของ “การดูทีวี” ได้เปลี่ยนแปลงไปอย่างมากในช่วงสองสามทศวรรษที่ผ่านมา เราไม่ จำกัด เฉพาะกล่องรีโมทและกล่องเคเบิลเพื่อเติมเต็มหน้าจอของเราอีกต่อไป เราใช้สมาร์ททีวี หรือการสตรีมโดยใช้ pucks เช่น Roku, Amazon Fire และ Apple TV หรือเชื่อมต่อเครื่องเล่นวิดีโอเกม เช่น Xbox และ Playstation และอุปกรณ์เหล่านี้แต่ละเครื่องจะมีอินเทอร์เฟซผู้ใช้ที่มีประสิทธิภาพมากกว่าคำแนะนำบนหน้าจอแบบเก่าของคุณ

การจ่ายเงินเพื่อรับชมการออกอากาศหรือรายการ VOD ผ่านบริการออนไลน์แบบสมัครรับข้อมูล เช่น Hulu, Netflix หรือ Amazon คิดเป็น 26% ของผู้ตอบแบบสำรวจออนไลน์ทั่วโลก (Nielsen) นี่เป็นตัวเลขที่มีนัยสำคัญ อย่างไรก็ตาม 72% ของผู้ตอบแบบสอบถามยืนยันว่ายังคงจ่ายเงินเพื่อดูเนื้อหาผ่านการเชื่อมต่อทีวีแบบเดิม

นี่หมายความว่าการเชื่อมต่อทีวีแบบเดิมจะยังคงอยู่หรือไม่?

เราทุกคนดูเหมือนจะคิดว่าเครื่องตัดสายไฟจะมีจำนวนที่สูงกว่า Nielsen รายงานว่าบ้าน 116.4 ล้านหลังในสหรัฐอเมริกาคาดว่าจะดูทีวีในช่วงฤดูกาล 2015-16 นี่เป็นจำนวนมหาศาล และรายงานยังพบว่าบ้านประมาณ 9.5 ล้านหลังได้เปลี่ยนไปใช้ OTA TV ฟรี จากบริการสตรีมมิ่งทั้งหมดที่มีอยู่ Netflix (60.7%) ดูเหมือนจะนำหน้าเกมตามด้วย Amazon Prime Video (49.4%) และ Hulu (26%) ฉันเชื่อว่าเหตุผลที่ใหญ่ที่สุดประการหนึ่งที่ทำให้ผู้คนเลิกรากันคือ เราต้องการจ่ายเฉพาะสิ่งที่เราใช้เท่านั้น

เมื่อเปรียบเทียบกับคอมพิวเตอร์และแม้แต่โทรศัพท์มือถือ การออกแบบ UI สำหรับทีวียังคงเป็นพื้นที่ที่ค่อนข้างใหม่ นอกจากนี้ยังเป็นแพลตฟอร์มที่แตกต่างกันโดยพื้นฐานและวิธีที่เราใช้เนื้อหาของเรานั้นแตกต่างกัน การออกแบบสำหรับทีวีต้องใช้ข้อพิจารณาเฉพาะ ซึ่งรวมถึงขนาดหน้าจอและระยะห่างของผู้ชม ข้อจำกัดทางเทคนิค และบริบทการใช้งาน ผู้ใช้อยู่ในประสบการณ์ "เอนหลัง" โดยอยู่ห่างออกไป 10 ฟุตโดยเฉลี่ย และอินเทอร์เฟซผู้ใช้และประสบการณ์จำเป็นต้องสะท้อนถึงสิ่งนี้ ตรงกันข้ามกับแท็บเล็ตและโทรศัพท์แบบจอสัมผัส การโต้ตอบบนโทรทัศน์ทำได้ผ่าน D-pad (แผ่นควบคุมทิศทาง) โดยใช้รีโมทหรือตัวควบคุมวิดีโอเกม ซึ่งโฆษณาที่ซับซ้อน

จอแสดงผล

โทรทัศน์ไม่เหมือนแท็บเล็ตและโทรศัพท์

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

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

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

ขณะนี้ยังไม่มีการกำหนด "มาตรฐาน" สำหรับพื้นที่ปฏิบัติการที่ปลอดภัย ส่วนใหญ่กำหนดโดยตัวแพลตฟอร์มเอง Google ทำให้พื้นที่ปลอดภัยของพวกเขาแคบลงและ Apple ก็ใจกว้างขึ้นเล็กน้อย จากการค้นหาหลายครั้งของฉันบนเว็บ โซนเหล่านี้จะแตกต่างกันไประหว่าง 85% ถึง 95% ของหน้าจอโทรทัศน์จากตรงกลาง เพื่อให้เป็นไปตามข้อกำหนดจากแพลตฟอร์มต่างๆ ทั้งหมดที่คุณอาจกำลังทำงานอยู่ ฉันขอแนะนำให้ใช้โซนปลอดภัยที่ระยะขอบด้านบนและด้านล่าง 60px และระยะขอบด้านข้าง 90px ซึ่งหมายความว่าข้อมูลหลักทั้งหมดของคุณจะต้องพอดีกับพื้นที่นี้ เพื่อรองรับหน้าจอทีวีทั้งหมดและตรงตามข้อกำหนดของแพลตฟอร์มทุกประการ

ในการเริ่มต้นการออกแบบอินเทอร์เฟซผู้ใช้โทรทัศน์ใหม่ของคุณ ให้สร้างผ้าใบขนาด 1920 x 1080 ใหม่ ช่องว่างภายในของคุณ (เขตปลอดภัย) ควรมีขนาด 90 พิกเซลที่ด้านข้าง (ซ้ายและขวา) และ 60 พิกเซลสำหรับด้านบนและด้านล่าง คุณสามารถดาวน์โหลดไฟล์ได้ฟรีที่นี่

การนำทาง

รูปร่างหน้าตาของอินเทอร์เฟซทีวีแบบขึ้น-ลง-ซ้าย-ขวา

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

ต่างจากอุปกรณ์มือถือที่เราควบคุมด้วยนิ้วของเรา UI ของทีวีส่วนใหญ่จะถูกควบคุมโดย D-pad และใช้งานในระยะห่างจากหน้าจอ ไม่ว่าจะเป็นบนรีโมทหรือแป้นเกม D-pad จะจำกัดการนำทางไว้ที่สี่ทิศทาง: ขึ้น ลง ซ้าย และขวา

แต่ละแพลตฟอร์มยังมีอนุสัญญาที่จัดตั้งขึ้น ตัวอย่างเช่น ใน Xbox ทริกเกอร์มีการควบคุม "Page Up" และ "Page Down" ในขณะที่ใช้บัมเปอร์เพื่อแท็บระหว่างมุมมองเนื้อหา นอกจากนี้ยังมีปุ่ม "ผู้ใช้ระดับสูง" จำนวนหนึ่งในแต่ละแพลตฟอร์มที่นักเล่นเกมที่มีประสบการณ์จะคุ้นเคย

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

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

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

วิชาการพิมพ์

อ่านจากที่อยู่ห่างออกไปสิบฟุต

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

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

หัวใจสำคัญของการออกแบบตัวอักษรที่ดีบนทีวีคือการทดสอบอย่างต่อเนื่อง จอภาพขนาดเล็กที่บางจะดูสะอาดตา แต่เมื่ออยู่บนทีวี หน้าจออาจดูสว่างไสวหรือไม่สามารถเข้าใจได้

สแกนเส้น

เส้นสแกนคืออะไร?

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

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

สี

รายการทีวีมีข้อจำกัด

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

แนวทางบางประการที่ควรปฏิบัติตามเมื่อเลือกสีของคุณ: สีที่สดใสอาจทำให้ดวงตาดูขุ่นมัวเมื่อดูโทรทัศน์ตอนกลางคืนหรือในห้องมืด หลีกเลี่ยงการใช้สีอิ่มตัวมากเกินไป (โดยเฉพาะสีแดง) และการใช้สีขาวอย่างหนักในองค์ประกอบหรือพื้นหลังขนาดใหญ่ สีขาวบริสุทธิ์จะสร้างรัศมีและสิ่งรบกวนสายตาอื่นๆ เมื่อเลือกผ้าขาว ขอแนะนำให้เลือกค่าฐานสิบหก #f1f1f1 เพื่อหลีกเลี่ยงไม่ให้แสงกะพริบ เพื่อเพิ่มความสามารถในการอ่าน ตรวจสอบให้แน่ใจว่าคุณสร้างคอนทราสต์ระหว่างองค์ประกอบต่างๆ ของคุณเพียงพอ

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

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

พื้นฐาน

สิ่งเล็กน้อยที่ต้องพิจารณา

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

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

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

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

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

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• eCommerce UX – ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อมอินโฟกราฟิก)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• ผลงานออกแบบ UX ที่ดีที่สุด – กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง