การออกแบบ UI Tv บน Google TV Design Patterns

เคยอ่านเรื่องนี้นานมาแล้ว 2-3 ปี ตอนออกแบบ Movie Store  บน TV ครั้งแรกๆ ดูเหมือนตอนนี้จำเป็นจะต้องเอามาออกแบบบนหน้าจอ TV ท้ังบน Samsung และ LG รวมไปถึง Andriod Box จึงได้ขุดบทความนี้มาเพื่อนเป็นแนวทางในการพัฒนา UI สำหรับ Android Application เพื่อที่จะนำไปใช้. ถึงแม้ว่าบางทีเรามองแล้วอาจจะดูแล้วเหมือนกันกับการออกแบบ UI ของ Phone แต่แท้จริงแล้วมีหลายๆอย่างที่แตกต่างออกไป

สภาพแวดล้อม หรือลักษณ์การดูโดยทั่วไปอ้างอิงถึง ระยะการดู 3 เมตร  (ten foot (10ft) environment) และทาง Google อ้างอิงการออกแบบนี้ว่า  10ft UI. เวลาที่จะออกแบบเจ้า  10ft environment ให้คำนึงถึงเบสิคเหล่านี้

• The 10ft environment is traditionally for consuming content.
  • The 10ft environment เป็นสภาพแวดล้อมเพื่อความบันเทิง ไม่ใช้การทำงาน น่าจะหมายถึง ควรใช้งานง่าย ไม่ใช้ ใช้แล้วเหมือนกับการเป็นภาระ
  • The 10ft environment โดยทั่วไปเป็นการรับชมเป็นกลุ่มเป็นสังคม ไม่ใช่รับชมคนเดียว
• The viewing experience for a 10ft UI is a mix of computer and TV.
  • หน้าจอ TV ต้องมีทั้งเอกลักษณ์รวมกันของความเป็นคอมพิวเตอร์และความเป็นทีวี
  • Display resolution ต้องเป็นแบบคอมพิวเตอร์ แต่ส่งผลการแสดงมาเป็นแบบ TV.
  • สีแตกต่างออกไปตามแต่ละ  TV screens.
• TVs have high-quality sound.
  • TV โดยทั่วไปจะมาพร้อมระบบเสียงที่ดี (หมายรวมเฉพาะทีวีสมัยใหม่).
  • User คาดหวังเสียงจาก TV แตกต่างจากคอมพิวเตอร์ แต่เสียงนั้นต้องไม่กลายเป็นการรบกวนไป
• The 10ft UI requires simple and visible navigation tools.
  • จัดระบบทิศทางการใช้งานการ (navigation)  จากซ้ายไปขวา และ จากบนลงล่าง
  • จำกัดความจำเป็นที่จะต้องใช้เมาส์ในการบังคับ.
  • อย่าลืม  Visual feedback.
• The 10ft UI works best with well-established UI patterns based on content zones.
  • จัดกลุ่มของ TV แยกออกโดยสิ้นเชิงจาก Device อื่นๆ
  • UIs หลายแบบ สามารถใช้เป็นฐานในการกำหนด  zone concept.

TV Displays

โดยทั่วไปการออกแบบ UI สำหรับ TV จะใช้คอนเซบส์ตัวนึงที่เรียกว่า ""lean-back experience" นึกถึงความสบายในการนั่งเอนหลังอยู่บนโซฟานวมอันแสนนุ่ม เปิดความบันเทิงที่ต้องการจากกล่องที่อยู่ตรงหน้า ต้องไม่รู้สึกว่า ฉันกำลังทำงาน หรือว่าให้งาน User ทำโดยไม่จำเป็น

1. สามารถนำการออกแบบ Mobile UI เป็นต้นแบบในการพัฒนาได้

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

2.  หลักเลี่ยงการออกแบบที่แสนรกบนหน้าจอ เพิ่มพื้นที่ว่างระหว่าง Element แต่ละตัวบนจอ

มีหลักการง่าย ๆ คือ การเพิ่ม magins และ padding มากขึ้น สังเกต สมัยที่หน้าจอ ipad ตัวแรกๆ ออกมา เราคุ้นเคย กับการวาง icon แบบ iPhone 3-3Gs ซึ่งมันจะพอดีๆ(ในสมัยนั้น) กลายเป็นรู้สึกโล่งมากๆ แรกเราอาจจะไม่ชิน แต่พอนาน ๆ ไป เราจะพบว่าการวางแบบนั้นทำให้เราหา icon ที่เราต้องการได้ง่ายกว่า และจำกัดการใส่ icon ที่มากไปในแต่ละ screen

3. TV ส่วนใหญ่มาในหน้าจอแบบ  " landscape".

อย่างที่ได้กล่าวไว้ก่อนหน้า การจัดวางข้อมูลสำหรับทีวี ให้วางจากซ้ายไปขวา และจากบนลงล่าง และต้องใส่ on-screen navigational controls ที่มุมซ้ายหรือขวาก็ได้ และ เว้นระยะพื้นที่ว่างแนวดิ่งสำหรับ content.

High-Definition Display Resolutions

TVs มีความแตกต่างไปจาก จอคอมพิวเตอร์ และ mobile device เพราะถ้าเป็นจอคอมหรือ Mobile จะใช้การแสดงผลเทียบเป็นจุดต่อจุดโดยตรงกับการออกแบบ แต่ในทางกลับกัน TV ใช้ ระบบการแสดงผลภาพแบบ analog เดิมๆมานานมากว่าสิบ ๆ  ปี. ซึ่งความรู้ความเข้าใจในข้อแตกต่างนี้จะเป็นประดยชน์อย่างยิ่งในการออกแบบบน  Google TV.

Computer and mobile device display resolution

จอคอมพิวเตอร์มีการแสดงผลความละเอียดสูงสุด น้อยกว่าหรือเท่ากับ resolution ของ graphics card นั้นหมายความว่า ความละเอียดสูงสุดที่แสดงผลขึ้นอยู่กับ ความสามารถของ graphics card ในระบบ  pixels per inch (ความหนาแน่นของ pixel). แต่บน Mobile นั้นจะถูก Fix มาจากโรงงานการผลิต.

โดยการปรับ resolution บนหน้าจอคอมพิวเตอร์จะสามารถปรับได้ขึ้นอยู่กับ  operating systems handle resolution and pixel density issues automatically, based on the user's resolution preferences.

ระบบ  OS Android ถูกออกแบบมาให้รับมือกับความหลากหลายของ mobile devices บน application เดียวกัน. โดยใช้วิธี scales หรือปรับ density ของกราฟฟิค และ font มากไปกว่านั้น คุณยังสามารถปรับค่าบางอย่างได้ด้วยตัวเองอีกด้วย เพื่อความเหมาะสมและ  experience ที่ดีแตกต่างไปแต่ละอุปกรณ์หรือแต่ละคน.

TV display resolution

TVs แม้แต่ตัวล่าสุดในปัจจุบัน มี  display resolution ขึ้นอยู่กับ can lines. โดยมีค่าทั้งหมด 3 ตัวสำหรับ การแสดงผลบน HD TV ที่ Google TV รองรับ นั้นคือ : 720p, 1080i, และ 1080p, ที่ 720 progressive scan lines, 1080 interlaced scan lines, และ1080 progressive scan lines 

Google TV Android applications ต้องรองรับ  Android's scaling technology. โดยทั่วไป จะต้องออกแบบบนหน้าจอแสดงผล 1080p, และต้องยอมให้  Android OS scale UI ลดลงเหลือ  720p, (downscaling หรือ removing information) ย่อมดีกว่าการ upscaling (interpolating information).
สำหรับวิธีที่ Google แนะนำคือ การทำกราฟฟิคแบบ  9-patch ถ้าเป็นไปได้. 

Table 1. การตั้งค่าของ  Android สำหรับ Google TV UIs

TV setting	Addressable screen size (in pixels)	Density identifier	screen density (in dp)	Display resolution (in dp)	Screen size identifier
720p	1280 x 720 px	tvdpi	213	960 x 540	large
1080p	1920 x 1080 px	xhdpi	320	960 x 540	large