วันพุธ, พฤษภาคม 18, 2554

ออกแบบ Action Bar ให้ Android Honeycomb

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

วันนี้ดูวีดีโอ "Designing and Implementing Android UIs for Phones and Tablets" ของงาน Google IO แล้วไปเจอ Pattern เท่ๆ ของ Honeycomb เข้า ในวีดีโอเล่าว่าเราควรใช้ Action bar ในการตอบคำถามพื้นฐานให้กับผู้ใช้ โดยเรียงเป็นลำดับว่า

  1. ฉันอยู่ที่ไหน?
  2. ฉันเห็นอะไรได้บ้าง?
  3. ฉันทำอะไรได้บ้าง?

ลองมาดูหน้าตาของ Action bar ที่ Google วาง Pattern ไว้ เพื่อตอบโจทย์ข้างต้น

android_ux_concept
หน้าจอ wireframe ของ Action Bar

จะเห็นว่าทั้ง Mobile และ Tablet ต่างก็มี Action Bar ทั้งคู่ ถ้าเป็น Mobile ตัว Action bar จะถูกวางเอาไว้ทั้งด้านบน และด้านล่าง ส่วนของ Tablet จะวางไว้ด้านบนสุดวาดยาวจากซ้ายไปขวา แบบออกได้เป็นสามส่วนเพื่อตอบโจทย์ตามลำดับ

1. ฉันอยู่ที่ไหน หรือ ฉันอยู่ในโปรแกรมไหน

android_ux_example_3
หน้าจอแสดงตัวอย่างตำแหน่ง Logo ของโปรแกรม

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

2. ฉันเห็นอะไรได้บ้าง

android_ux_example_2
ภาพแสดงตัวอย่างเมนูของโปรแกรม

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

3. ฉันทำอะไรได้บ้าง

android_ux_example_1
ภาพแสดงตัวอย่าง Action Button ทางด้านขวา

ส่วนสุดท้ายจะวางชิดขวาสุด ทำหน้าที่บอกว่าเราสามารถทำอะไรกับโปรแกรมนี้ได้บ้าง เช่น ส่งจดหมาย ลบจดหมาย เป็นต้น หากไม่สามารถแสดงชุดคำสั่งทั้งหมดได้ใน Action bar ทาง Google ได้กำหนดให้ใช้ Icon รูปเมนู วางไว้ด้านขวาสุดของ icon ทั้งหมด

พอได้เห็นแบบนี้ก็ทำให้คาดหวังได้ว่าผู้ใช้จะสามารถใช้งานโปรแกรมบน Android Honeycomb ได้ง่ายขึ้นเพราะโปรแกรมดีๆ น่าจะทำตาม Guide line ของ Platform

ถ้ามาดู iOS จะพบว่าไม่มี concept ของ Action Bar แบบ Android แต่จะมีตัว Navigation bar ให้ใช้ ซึ่งวิธีการใช้งานก็ไม่ได้กำหนดไว้อย่างชัดเจนใน Human Interface Guideline แต่ถ้าสังเกตุก็จะพบแนวทางการใช้คร่าวๆ

icons_in_ipad_mail
ภาพแสดง Navigation bar ของ iOS

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

โดยส่วนตัวผมชอบแนวคิดของ Pattern นี้บน Android นะครับ แต่ยังติดอยู่สองที่

  1. แนวคิดนี้บน Mobile อาจจะไม่เหมาะ เพราะพื้นที่แสดงผลบนมือถือมีน้อยมาก การมากำหนดตำแหน่งแบบนี้ทำให้หลายคนปรับวิธีประหยัดพื้นที่ได้ลำบาก เช่นการที่ต้องแสดง Logo ไว้ด้านบนซ้ายเสมอ จะไม่คุ้มเท่าไหรในหลายโปรแกรม หรือการที่ให้ชุดคำสั่งที่เหลือขึ้นมาเป็น popup ด้านล่าง ทำให้ไม่สามารถใส่ คำสั่งที่เหลือได้มากนัก ถ้าขึ้นมาเป็น Table View น่าจะง่ายกว่า
  2. แนวคิดนี้ยังกำกวมอยู่ เช่น ปุ่ม search ของ map ถูกตัดสินใจให้อยู่ที่ View Detail ส่วน search ของ youtube จะอยู่ที่ Action button เป็นต้น ทาง Google อาจจะต้องสร้างโปรแกรมตัวอย่างที่ล้อตามแนวคิดของตัวเองมากกว่านี้ เพื่อให้นักพัฒนาสามารถเข้าใจ แนะนำมาประยุกต์ใช้กับโปรแกรมของตัวเองได้ง่ายขึ้น

แต่อย่างไรก็ตามถ้ายังไม่ได้จับตัวจริง ก็ยังสรุปไม่ได้ ถ้าเดินหาเล่นตามบิกซีได้ จะกลับมาวิเคาะห์เพิ่มเติมนะครับ
blog comments powered by Disqus