Thursday, May 19, 2011

Design Pattern for TV Application (Google TV)


สำหรับอาชีพนักพัฒนาโปรแกรมแล้ว คงไม่มีอะไรน่าตื่นเต้นไปกว่าการได้ลองจับอะไรใหม่ๆ ไม่ว่าจะเป็นอุปกรณ์ ระบบปฏิบัติการ หรือ OS ใหม่ๆ ตอนที่ได้ยินว่า Google TV เปิดให้เราเขียนโปรแกรมบนทีวีได้ก็รู้สึกน่าสนใจ เลยตามไปดู Session ใน Google I/O (อ่านเพิ่มได้จากบล็อก "On Google TV" ของ @markpeak)

เราผ่านโลกในยุค PC มานานแล้ว โปรแกรมแทบทุกชนิดในโลกของ PC มี Pattern ของมันจนแทบจะดิ้นไปทางอื่นลำบาก จนมาเมื่อ 4-5 ปีนี้ที่โลกของ Smart Phone เข้ามา ตามมาด้วย Tablet ซึ่งก็เริ่มสร้าง Pattern ของตัวเองขึ้นมาได้ระดับหนึ่ง

  • PC รับคำสั่งผ่านเมาส์และคีย์บอร์ด ซึ่งมีความแม่นยำสูง เหมาะกับโปรแกรมประเภทหน้าต่าง
  • Smart Phone รับคำสั่งผ่านนิ้ว อาจจะมีคีย์บอร์ดบางรุ่น ความแม่นยำต่ำ หน้าจอเล็ก โปรแกรมจึงควรออกแบบให้ปุ่มใหญ่ Simplify ทุกอย่างให้น้อยที่สุดเท่าที่จะทำได้
  • Tablet มีขนาดใหญ่กว่า Smart Phone โปรแกรมสามารถแสดงผลแบบ 2-3 column ได้ ควรรองรับการหมุนเครื่องแนวตั้งและแนวนอน

คำถามคือแล้วสำหรับโลกใหม่ที่ยังเพิ่งเริ่มก่อตัวอย่างเงียบๆ อย่างการเขียนโปรแกรมบนทีวีที่นำโดย Google TV และอาจจะมี Apple TV ตามมาในอนาคต นักพัฒนาโปรแกรมอย่างเราจะมี Pattern ในการออกแบบโปรแกรมอย่างไร

เราอยู่กับทีวีมานาน ก่อนจะรู้จัก PC ด้วยซ้ำไป แต่การพัฒนาโปรแกรมบนทีวีเพิ่งจะเกิดขึ้นไม่นาน

  • ทีวีรับ input ผ่านทางรีโมท โดยมากจะมีเพียง D-pad (บน ล่าง ซ้าย ขวา) และปุ่มเลข 0-9
  • ทีวีมีหลากหลายมาก ทั้งขนาด การแสดงผล ความกว้างยาวของหน้าจอ จำนวน DPI
  • ผู้ใช้ส่วนใหญ่นั่งห่างจากทีวี 2 - 10 เมตร ซึ่งตรงนี้ต่างจาก PC, Smart Phone และ Tablet มาก

TV Application Pattern ที่ทีมงานกูเกิลแนะนำสำหรับนักพัฒนาโปรแกรมมีดังนี้





โปรแกรมสามารถลงผ่าน Google TV และเรียกใช้งานได้เหมือนโปรแกรมบน PC หรือ Smart Phone
มีระบบ Install, Update, Uninstall แบบเดียวกัน




ทีวีไม่มีระบบสัมผัสหน้าจอ บังคับได้ 3 ทาง

  • D-Pad บน ล่าง ซ้าย ขวา
  • (อาจจะมี) คีย์บอร์ด
  • (อาจจะมี) เมาส์
ผู้ใช้ส่วนใหญ่นั่งห่างจากจอ 2 - 10 เมตร ซึ่งต่างจากหน้าจอ Smart Phone หรือ Tablet
ถึงแม้ทีวีจะมีขนาดใหญ่มาก แต่เมื่อนั่งอยู่ห่างออกไป ขนาดของหน้าจอที่เห็นก็ใกล้เคียงกันกับ Tablet ที่วางอยู่ใกล้ๆ

อย่าลืมว่าหน้าจอทีวีอยู่ในแนวนอนเสมอ ไม่จำเป็นต้องทำโปรแกรมสำหรับแนวตั้ง !!





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

เพราะฉะนั้นทุกโปรแกรมที่เขียนบททีวีควรจะสนับสนุน D-Pad ซึ่งมีอยู่ในรีโมททีวีแทบทุกตัวในปัจจุบัน




สำหรับการออกแบบโปรแกรมบน PC และ Tablet มักจะใช้หลักการของ Tab และ Scroll Bar ดังรูปข้างบน การออกแบบหน้าจอลักษณะนี้มีประโยชน์มากสำหรับอุปกรณ์ที่มี Pointing Device อย่างเมาส์หรือนิ้วสัมผัสจอ

แต่สำหรับทีวีที่มีเพียง D-Pad หากผู้ใช้ต้องการเลือกดูข้อมูลใน Tab 1 เลือก item 2 จะเห็นว่าผู้ใช้ต้องกดปุ่มลงมาเรื่อยๆ จนกว่าจะได้กดปุ่ม Button ข้างล่าง ซึ่งเป็นระยะทางที่ลำบากเกินไปสำหรับโปรแกรมบนทีวี




การออกแบบโปรแกรมบนทีวี จึงควรให้ Tab อยู่ทางซ้ายมือ รายการย่ออยู่ตรงกลาง และปุ่มสั่งการอาจจะอยู่ขวาสุดดังรูป

ถ้าผู้ใช้ต้องการเลือก Tab 1 และ item 2 หากจะไปที่ปุ่ม Button ก็กดปุ่มขวาเพียงครั้งเดียวก็เพียงพอ

ต่างกับ PC และ Smart Phone ที่ผู้ใช้สามรถเลื่อนไปกดปุ่มต่างๆ ได้ตามใจชอบ แต่กับทีวีและ D-Pad นักพัฒนาควรใส่ใจกับ State ของ Cursor ในแต่ละจุด ว่าตอนนี้อยู่ที่จุดไหนแล้ว กำลังจะไปที่ไหนต่อ ต้องใช้ระยะทางเท่าไหร่





ตัวอย่างการปรับ Action Bar จากบน Tablet มาอยู่บน Google TV นอกจากที่เราควรจะลดจำนวนปุ่มแล้วยังต้องปรับเมนูมาอยู่ทางซ้าย




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

จากตารางข้างบน ทีวีจึงจัดอยู่ในกลุ่ม Large Screen และมี DPI อยู่ในช่วง 240-320 DPI

ถ้าหากเรานั่งห่างจากทีวีซัก 5 เมตร เราจะเห็นขนาดของจอทีวีไม่ได้ใหญ่กว่า Tablet ในมือมากนัก การทดสอบโปรแกรมบน Simulator จึงให้ผลไม่ต่างกับการทำงานจริงบนทีวีมากนัก




ด้วยเหตุผลทางการผลิตหลายอย่าง ทำให้ผู้ผลิตทีวีหลายรายจำเป็นต้องสร้างขอบขึ้นมาจากขนาดของจอจริงๆ เพราะฉะนั้นบางครั้งทีวีขนาด 1,920 x 1,080 อาจจะแสดงผลได้เพียง 1,692 x 952

ส่วนขอบที่หายไปจะถูก Crop ออกไป เพราะฉะนั้นเราควรออกแบบโรแกรมโดยเผื่อขอบที่หายไปด้วย




การวางตำแหน่ง UI ไม่ควรที่จะเขียนโค้ดระบุตำแหน่ง X - Y ที่ชัดเจน ควรออกแบบให้ UI เผื่อการยืดและหดได้ ตามขนาดของจอทีวีที่ไม่เท่ากัน

สำหรับ QA ควรจะมีการทดสอบโปรแกรมบนทีวีหลากหลายเท่าที่จะหาได้




ตัวอย่างการพอร์ทโปรแกรมจาก Tablet มาบน Google TV

จากรูปนี้คือโปรแกรม Pandora ในเวอร์ชัน Tablet ทุกอย่างดูเรียบง่ายดีอยู่แล้ว แต่ก็ยังมีสิ่งที่ต้องเปลี่ยนเมื่อมาอยู่บนทีวี

  • ปรับขนาดของรูปหน้าปกให้มี Resolution ที่มากกว่าเดิม (จอใหญ่ขึ้น)
  • เรียงปุ่มที่ใช้บ่อยอย่างเช่น เมนู, หยุด, เล่นเพลงต่อไป ไว้ทางซ้าย และปุ่มที่ใช้ไม่บ่อยนักไว้ทางขวา
  • UI หลายอย่างที่เขียนบน Android Tablet สามารถ Reuse มาใช้่บน Google TV ได้เลย




อีกตัวอย่างนึงจาก CNBC ที่ต้องคิดใหม่ โดยการรวมโปรแกรมเวอร์ชันมือถือกับหน้าเว็บเข้าด้วยกัน

  • แสดงวิดีโอหรือเนื้อข่าวทางซ้าย
  • แสดงส่วนของ Stock ทางขวา
  • ใช้ D-Pad เลื่อนไปตาม item ต่างๆ ได้ง่าย
  • ถ้ารีโมทมีปุ่น Play, Pause, Forward ควรเขียนโปรแกรมให้รองรับด้วย




สุดท้าย หน้าตาของ Android Market สำหรับ Google TV หน้าตาเป็นเช่นนี้

สรุป
  • การเขียนโปรแกรม, SDK, โค้ด ไม่ต่างจากเดิมเท่าไหร่
  • สำคัญที่สุดคือการวาง Layout ของโปรแกรม เพื่อรองรับ D-Pad
  • ทีวีมีหลากหลาย(มาก) ควรคิดเผื่อในการแสดงผลบนทีวีหน้าจอแบบอื่นๆ ด้วย
  • TV Application Development ยังเป็นช่วงเริ่มต้น อาจจะต้องลองผิดลองถูกไปอีกซักพักจนกว่าจะได้ Pattern ที่เหมาะสม

คำถามที่น่าสนใจ

  • โมเดลการหารายได้จากโปรแกรมบนทีวีจะมีหน้าตาเป็นอย่างไร
  • โปรแกรมประเภทใช้ฟรีแล้วเก็บค่าโฆษณา พอมาอยู่บนทีวี บริการโฆษณาอย่าง Adsense, Admob จะมีหน้าตาเป็นอย่างไร เก็บรายได้กันอย่างไร (ตามเวลาที่โฆษณาโชว์ ?)
  • เมื่อไหร่ที่ Apple TV จะลงโปรแกรมเพิ่มเติมได้ และเมื่อลงได้จริง ตลาด TV Application จะเป็นขุมทรัพย์ได้เท่ากับตลาด Smart Phone และ Tablet จริงหรือเปล่า ?




0 comments: