การออกแบบ UI ของทีวี: การทำงานกับ White Space

เผยแพร่แล้ว: 2022-03-11

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

นี่คือคำอธิบายว่าพื้นที่สีขาวคืออะไรและการใช้งานในแอพทีวีของคุณนั้นดีที่สุดสำหรับธุรกิจอย่างไร

พื้นที่สีขาวคือเพื่อนของเรา

ก่อนอื่น…

พื้นที่สีขาวคืออะไร?

พื้นที่สีขาวเป็นพื้นที่ว่างที่ไม่มีผู้ครอบครองโดยมีข้อความหรือกราฟิกเป็นศูนย์อยู่ด้านบน

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

พื้นที่สีขาวไม่ใช่
พื้นที่สีขาวไม่ได้เป็นเพียงสีขาวเสมอไป

เรื่องใหญ่คืออะไร?

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

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

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

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

นักออกแบบทราบดีว่าพื้นที่สีขาวช่วยให้ผู้ใช้โฟกัสและซึมซับเนื้อหาที่ต้องการให้มองเห็นได้

ต้องการนักออกแบบ UI อิสระที่ทำงานเต็มเวลาในสหรัฐอเมริกา

บอกว่าใช่กับพื้นที่สีขาว

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

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

จากการวิจัยที่จัดทำโดย Human Factors International พื้นที่สีขาวช่วยเพิ่มความเข้าใจของผู้ใช้ได้เกือบ 20%

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

อินเทอร์เฟซทีวีที่ดูเหมือนออกแบบมาเพื่อทำให้เกิดความวิตกกังวล
อินเทอร์เฟซของทีวีที่ดูเหมือนออกแบบมาเพื่อทำให้เกิดความวิตกกังวล


อินเทอร์เฟซทีวีพยายามทำมากเกินไปในเวลาเดียวกัน
อินเทอร์เฟซทีวีพยายามทำมากเกินไปในเวลาเดียวกัน


ดำเนินการอย่างสวยงาม แต่ไม่มีช่องว่างระหว่างเนื้อหา
ดำเนินการอย่างสวยงาม แต่ไม่มีช่องว่างระหว่างเนื้อหา


อินเทอร์เฟซกับห้องหายใจ
อินเทอร์เฟซกับห้องหายใจ


อินเทอร์เฟซทีวีที่มีความสมดุลและลำดับชั้นที่ดีระหว่างองค์ประกอบต่างๆ
อินเทอร์เฟซทีวีที่มีความสมดุลและลำดับชั้นที่ดีระหว่างองค์ประกอบต่างๆ


อินเทอร์เฟซทีวีที่มีความสมดุลและลำดับชั้นที่ดีระหว่างองค์ประกอบต่างๆ
อินเทอร์เฟซทีวีที่มีความสมดุลและลำดับชั้นที่ดีระหว่างองค์ประกอบต่างๆ


เห็นไหม?

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

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

Hulu ดึงดูดคุณด้วยพื้นที่สีขาวที่ดื่มด่ำ
Hulu ดึงดูดคุณด้วยพื้นที่สีขาวที่ดื่มด่ำ

พื้นที่สีขาวช่วยลดภาระด้านความรู้ความเข้าใจและเพิ่มความเร็วในการตัดสินใจ ตามที่ Fast Co Design อธิบายไว้ การเพิ่มพื้นที่สีขาวทำมากกว่าแค่ขจัดความยุ่งเหยิง—มันทำหน้าที่สำคัญเหล่านี้:

  • ปรับปรุงความเข้าใจ
  • ชี้แจงความสัมพันธ์ระหว่างองค์ประกอบแบบโต้ตอบ
  • ดึงดูดและเน้นความสนใจของผู้ใช้

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

ใช้พลังของพื้นที่สีขาวเพื่อยกระดับการออกแบบของคุณและช่วยในการตัดสินใจ

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

การใช้พื้นที่สีขาวอย่างมีประสิทธิภาพ

ต่อไปนี้คือตัวอย่างเพิ่มเติมของแอปทีวีที่ใช้พลังของพื้นที่สีขาวที่มีประสิทธิภาพเพื่อสร้างอินเทอร์เฟซที่ใช้งานได้อย่างเพลิดเพลิน

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

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

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

• • •

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

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