Engadget for Android - UI Analysis

อย่างที่ประกาศไปแล้วใน Blognone Widget for Android ว่าผมตั้งใจจะทำ mobile app เต็มรูปแบบสำหรับ Blognone บน Android

ปัญหาก็คือผมไม่รู้ว่า mobile app ที่ดีควรมีอะไรบ้าง (เพราะทุกคนเพิ่งข้ามเรดไลน์เข้าสู่ "โลกใหม่" ด้วยกันทั้งนั้น) แต่ทางแก้ก็ไม่ยากนัก นั่นคือ เรียนรู้จากผู้มาก่อนทั้งหลาย ว่าอะไรเวิร์ค อะไรไม่เวิร์ค

ผู้มาก่อนที่ใกล้เคียงกับเรามากที่สุด ไม่มีใครดีไปกว่า Engadget for Android

หน้าตาของโปรแกรมเป็นดังภาพ ไล่จากบนลงล่าง

• โลโก้พร้อมลูกศรชี้ลง
• Top Stories - ข่าว headline พร้อมภาพขนาดใหญ่
• Latest Posts - ข่าวทั่วไป พร้อมภาพ thumbnail ด้านซ้ายมือ
• ปุ่มควบคุม 5 ปุ่ม

ส่วนของ headline มีด้วยกัน 5 ข่าว เลื่อนซ้าย-ขวาได้ โดยใช้วิธีลากเอา แล้วดู indicator เม็ดสีขาวประกอบ

เมนูที่อยู่ด้านขวาของโลโก้ คลิกเพื่อเปลี่ยนโหมดเป็น Engadget Mobile/HD ได้ ทั้งสองเว็บเป็นเว็บลูกของ Engadget อยู่แล้ว ในเวอร์ชัน mobile app รวมกันมาเป็นตัวเดียว

เลื่อนลงมาจะเจอ Latest Posts แต่ละข่าวจะแสดง

• ภาพ thumbnail
• title ของข่าว
• วันที่และเวลา

ไม่มีชื่อคนโพสต์ ไม่มีแท็ก

กดเข้าไปอ่านแต่ละข่าว แสดงภาพใหญ่ 1 ภาพใต้ title เสมอ

• แสดงชื่อคนโพสต์แล้ว
• ด้านบนมีตัวเลขแสดงคอมเมนต์
• ด้านล่างมีปุ่ม share และปุ่มเลื่อนข่าวไปยังข่าวถัดไป

เมื่อกดที่เลขคอมเมนต์ จะเข้าสู่หน้าอ่านคอมเมนต์ แสดงเป็น thread comment เหมือน Engadget รุ่นปกติ แต่ไม่มี avatar

ปุ่ม + ที่มุมบนขวา หมายถึงเขียนคอมเมนต์ใหม่ กดแล้วจะเด้งมาช่องคอมเมนต์ด้านล่างสุด ซึ่งจำเป็นต้องล็อกอินก่อน (เท่าที่หาดู พบว่าล็อกอินได้จากหน้านี้หน้าเดียว เป็น design approach ที่น่าสนใจ)

ลองกดปุ่ม Share จะพบเมนูว่าเลือกปลายทางที่ไหน ผมเข้าใจว่า Engadget ทำเมนูเอง ไม่ได้ใช้เมนูมาตรฐานของ Android ซึ่งจะส่งการแชร์ไปยังแอพตัวอื่นๆ (เช่น Twidroid หรือ Seesmic) ได้เลย

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

เลื่อนหน้า Latest ลงมาจนถึง pagination อันล่างสุด หนึ่งหน้าแสดง 20 ข่าวไม่นับรวม Top Stories ถือว่าเยอะกว่าที่คาด (คงเป็นเพราะข่าวของ Engadget วันนึงๆ เยอะอยู่แล้วด้วย)

ดู pagination ในหน้าสอง แสดงแค่ Previous/Next ไม่มีเลขหน้ากำกับ อันนี้คงยึดตาม Engadget เวอร์ชันเว็บ

โหมดแรก Latest ผ่านไปแล้ว มาดูโหมดสอง Topics กันบ้าง ปุ่มที่อยู่ด้านล่างทำตัวเหมือนแท็บ

Topics นี่ค่อนข้างตรงไปตรงมา แสดง Category ของเนื้อหาออกมาเป็น List

กดที่แต่ละหมวด จะแสดงเนื้อหาข่าวในหมวดนั้นๆ โดยใช้ฟอร์แมตเดียวกับ Latest คือเป็นหน้า content listing

โหมดที่สาม รายการทีวี The Engadget Show ซึ่งมีอยู่แล้ว แสดงเป็นหน้า listing เช่นกัน

แต่เมื่อกดที่รายการ จะเข้าโหมด video player ทันที

แอบดูกลไกการทำงานครับ จะเห็นว่าเป็นโปรแกรมแยก Streaming

โหมดที่สี่ Podcast ก็คล้ายๆ กัน ไอคอนสีจืดไปนิด

กดที่ Podcast จะเล่นผ่าน Streaming เหมือนกัน ต่างกันแค่ไม่มีภาพ

โหมดสุดท้าย Galleries อันนี้ดึงข้อมูลมาจากเวอร์ชันเว็บซึ่งมีอยู่แล้ว

Pagination ของโหมด Galleries จะแสดงจำนวนหน้าด้วย อันนี้คงเป็นคนทำคนละคนกันมั้ง

กดเข้าไปที่ gallery แต่ละอัน จะแสดงภาพแรกขึ้นมาตรงกลางทันที

• ปุ่มแสดงภาพทั้งหมด อยู่ด้านบน
• ด้านล่างมีปุ่ม Share ทำงานแบบเดียวกันกับปุ่ม Share ในเนื้อหาหลัก และชื่อ gallery

การเลื่อนใช้วิธีลากซ้าย-ขวา

กดปุ่มแสดงภาพทั้งหมดที่มุมบน สังเกตรูปที่ 4 เป็นไอคอนขณะยังโหลดภาพไม่เสร็จ

ดูเวอร์ชันอื่นกันบ้าง อันนี้ของ Mobile ใช้สีต่างออกไป (สีบานเย็นที่เคยฟ้องร้องกับ T-Mobile นั่นไง)

ภาพนี้แสดงปัญหาของการใช้ภาพขนาดใหญ่ใน Top Stories คือบางภาพมันดูไม่ออกว่าสื่อถึงอะไร

Engadget HD ใช้สีแดง สังเกตไอคอนขณะโหลด (ผมพยายามดู error handling ของโปรแกรม) ส่วนอย่างอื่นเหมือนกันหมด

Gallery ของเวอร์ชัน HD เป็นภาพชุดของตัวเอง แชร์กันเฉพาะ Videos/Podcasts ที่เหมือนกันทุกเวอร์ชัน

วิจารณ์ Engadget for Android

เป็นแอพที่ออกแบบมาดี และใส่ใจในรายละเอียดมาก

จุดเด่นคือต่อเชื่อมกับ asset ทั้งหมดของ Engadget เช่น Videos/Podcasts/Galleries ได้อย่างเต็มที่ โดยเฉพาะความสามารถในการเล่น Videos/Podcasts ถือเป็น value added ที่ดีให้กับเวอร์ชัน mobile app ซึ่งเป็นความต่างที่เหนือกว่าเวอร์ชัน mobile web

ดีไซน์ของ mobile app นั้นสอดคล้องกับแนวทางของ full web ที่เน้นรูปภาพ เมื่อข่าวต้นฉบับมีภาพประกอบอยู่แล้ว การนำภาพมาตัดต่อดัดแปลงในเวอร์ชัน mobile app/web จึงไม่ใช่เรื่องยากนัก

บทเรียนสำหรับ Blognone App

โปรแกรม Engadget for Android แบ่งเป็น 5 โหมด 3 ไซต์ เราไม่ต้องใช้ขนาดนั้น

คำถามคือ โปรแกรมแบบเดียวกัน 1 โหมด 1 ไซต์ ต่างอะไรกับเวอร์ชัน mobile web? อะไรคือคุณค่าที่จำต้องใช้ผ่านโปรแกรม ใช้ผ่านเว็บไม่ได้?

อันนี้ผมก็ยังตอบไม่ได้ อาจจะเป็นการเชื่อมโยงกับ widget? หรือการแชร์เนื้อหากับ social network ผ่านเมนูของ Android?

บทเรียนอื่นๆ

• การแสดง listing โดยใช้ภาพ thumbnail ประกอบนั้นดูดีมาก (แต่ระบบก็ต้องพร้อมด้วย)
• จำนวนข่าวต่อหน้าก็มีผล ต้องหาเลขที่ optimize กันต่อไป