ข้อควรรู้สำหรับการพัฒนาโปรแกรมบนทีวี

จากงาน Google I/O ครั้งที่ผ่านมา กูเกิลได้เผยโฉม Google TV เวอร์ชัน Honeycomb พร้อมกับการจัด Session พูดคุยเกี่ยวกับการพัฒนาโปรแกรมบน Google TV โดยจุดที่น่าสนใจคือถึงแม้ว่าทีวีจะเป็นอุปกรณ์ที่อยู่กับเรามานาน (กว่า PC และ Smart Phone) แต่การพัฒนาโปรแกรมให้ทำงานบนทีวีนั้นยังเป็นเรื่องใหม่มากในตอนนี้

หลังจากที่ได้ดู Session แล้ว (อ่านเพิ่มได้จากบล็อก "On Google TV" ของ mk) ก็เห็นว่าเป็นเรื่องที่น่าสนใจดี เลยนำมาแชร์กันครับ

เราผ่านโลกในยุค 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 บน ล่าง ซ้าย ขวา
• (อาจจะมี) คีย์บอร์ด
• (อาจจะมี) เมาส์

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

เพราะฉะนั้นทุกโปรแกรมที่เขียนบททีวีควรจะสนับสนุน 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 จริงหรือเปล่า ?

ที่มา - Khajochi's Blog, Google I/O