Blog

5 เคล็ดลับในการเปลี่ยน UI แอพ iOS ไปสู่ Android

android and apple

Your ads will be inserted here by

Google Adsense.

Please go to the plugin admin page to set up your ad code.

Your ads will be inserted here by

Google Adsense.

Please go to the plugin admin page to set up your ad code.

จงทำแอพให้ดูเหมือนกับว่าเป็นแอพของแอนดรอยด์

ท่านผู้อ่านหลายๆคน ที่ใช้แอพบนโทรศัพท์ Android อาจพบว่า แอพส่วนใหญ่ที่เคยเปิดตัวบน iOS มาก่อน จะมีหน้าตาส่วนติดต่อผู้ใช้โปรแกรม (UI) ที่ก๊อปปี้มาจากรุ่น iPhone/iPad ไม่มีผิดเพี้ยน รู้สึกเหมือนว่ากำลังใช้แอพบน iOS อยู่เสียอย่างนั้นหรือเปล่าครับ?

ถ้าท่านผู้อ่านเป็นหนึ่งในนั้น ท่านเคยเจอเหตุการณ์นี้หรือไม่ครับ?

  • บางแอพมี Tab Menu อยู่ข้างล่าง แต่แอพที่มากับโทรศัพท์มี Tabs อยู่ด้านบน เช่น Contacts, Phone
  • บางแอพก็มีปุ่ม Back อยู่มุมซ้ายบน แต่ทั้งๆที่แอนดรอยด์ก็มีปุ่่ม Back ที่ท่านกดใช้ประจำ
  • บางแอพ มี icon แปลกๆที่ไม่เคยเห็นมาก่อน (Icon จาก iOS)
  • บางแอพมีฟังก์ชั่นแชร์ที่ไม่ครบ หรือไม่เหมือนที่เห็นในแอพอย่าง Google Play Store

เหล่านี้เป็นปัญหาที่พบได้ทั่วไปในแอพส่วนใหญ่ (รวมถึง Android App ในไทยด้วย) ที่ออกแบบมาจากแอพบน iOS โดยที่ไม่คำนึงถึง Design Pattern หรือรูปแบบการออกแบบของ Android ทำให้การใช้งานแอพที่ไม่ได้ถูกออกแบบมาให้สอดรับกับการใช้งานของผู้ใช้และความคาดหวังของผู้ใช้ Android ไม่สามารถที่จะให้ประสบการณ์ใช้งานที่ราบลื่น และสอดคล้องกับพฤติกรรมการใช้งานของผู้ใช้ Android ได้

ด้วยเหตุนี้ เราจึงขอนำเสนอ 5 เคล็ดลับ เพื่อใช้ในการเปลี่ยน UI ของแอพที่ออกแบบมาจาก iOS เดิม เป็นแอพคุณภาพที่มีการออกแบบที่สอดคล้องกับ Android

ให้ Tab Menu อยู่ด้านบนของจอเสมอ

ใน Design Pattern ของ Android ที่ Google กำหนดนั้น ระบุว่า Tab ควรอยู่ด้านบนของจอ นอกจากนี้ ตัว API ของ Android เองก็ได้อำนวยความสะดวกในการสร้าง Tabs ที่วางอยู่ในตำแหน่งส่วนบนของจออีกด้วย  เหตุผลที่ทำให้ Tabs อยู่ด้านบนของจอ ก็เนื่องมาจากว่า เพื่อที่จะหลีกเลี่ยงการกดปุ่ม Back / Home หรือปุ่มสั่งการอื่นๆที่อยู่ด้านล่างของจอ โดยไม่ได้ตั้งใจ ซึ่งต่างจาก iPhone/iPad ที่มีแค่ปุ่ม Home ปุ่มเดียว และไม่ได้เป็นปุ่มแบบ Touchตัวอย่างการใช้ Tab ที่ผิด

tab-position-on-ios-android

ทางซ้าย เป็น Tab ของ iOS ซึ่งอยู่ด้านล่างตามปกติ กับ ทางขวา เป็นแอพ Android ซึ่งมี Tab อยู่ด้านล่างเหมือนกัน ซึ่งอาจก่อให้เกิดการกดปุ่มผิดโดยบังเอิญใน Android

Foursquare เป็นตัวอย่างที่เดียว โดยมีการออกแบบ Tab ที่ต่างกันตาม Platform ถึงแม้จะเป็นแอพเดียวกัน ด้านซ้ายเป็น iOS ด้านขวาเป็น Android

Foursquare เป็นตัวอย่างที่เดียว โดยมีการออกแบบ Tab ที่ต่างกันตาม Platform ถึงแม้จะเป็นแอพเดียวกัน ด้านซ้ายเป็น iOS ด้านขวาเป็น Android

อย่าใช้ปุ่ม Back บนจอ

เพราะว่า Android Phone ทุกเครื่องก็มีปุ่ม Back อยู่แล้ว การมีปุ่ม Back อีกปุ่มที่มุมซ้ายบน ยิ่งสร้างความสับสนให้กับผู้ใช้ และก็เป็นการซ้ำซ้อนด้วย อย่างไรก็ตามใน Android มีอีกปุ่มหนึ่งที่เรียกว่า Home บนมุมซ้ายบน ซึ่งมีหลักการทำงานที่แตกต่างจากปุ่ม Back

ปุ่ม Back มุมซ้ายบนนั้นไม่จำเป็น

ใช้ Icon ที่ออกแบบมาเพื่อ Android เท่านั้น

ในบางครั้ง ปุ่ม Icon บางอันที่ถูกออกแบบเพื่อใช้ใน iOS ก็กลับถูกนำมาใช้ใน Android ด้วย ซึ่งก็สร้างความสับสนให้กับผู้ใช้ Android ทำให้ผู้ใช้ต้องเดาความหมายของ Icon ที่ไม่คุ้นชิน นอกจากนี้ เว็บ Android Developer ของ Google ได้มี Icon ที่ออกแบบมาเพื่อแอนดรอยด์ออกมาให้ผู้พัฒนาได้ใช้อย่างกว้างขวางอีกด้วย

ในรูปซ้าย ปุ่มทางขวาบน เป็น Icon ของ iOS เพื่อทำการ Share ซึ่งผู้ใช้ Android ไม่ทราบความหมาย และคาดหวังว่าปุ่ม Share จะเป็นอย่างทางด้านขวา ซึ่งเป็น Icon มาตรฐานที่สื่อความหมายถึงสัญลักษณ์การ Share

ในรูปซ้าย ปุ่มทางขวาบน เป็น Icon ของ iOS เพื่อทำการ Share ซึ่งผู้ใช้ Android ไม่ทราบความหมาย และคาดหวังว่าปุ่ม Share จะเป็นอย่างทางด้านขวา ซึ่งเป็น Icon มาตรฐานที่สื่อความหมายถึงสัญลักษณ์การ Share

 

ใช้ Android Intent API ในการทำงาน

หนึ่งในจุดแข็งชอง Android API ที่ iOS ไม่มีคือ ความสามารถในการส่งข้อมูลระหว่างแอพได้อย่างอิสระ ยกตัวอย่างเช่น ความสามารถในการแชร์ข้อมูล จากแอพหนึ่ง สู่แอพอื่นๆใดก็ได้ ที่สามารถแชร์ข้อมูลประเภทดังกล่าวได้ อย่างไรก็ตามบางแอพที่ไม่ได้ออกแบบด้วย Android Design Pattern จะไม่ทราบถึงความสามารถนี้ และแชร์ข้อมูลจากแอพ สู่ Facebook หรือ Twitter ได้จำกัด ทำให้ผู้ใช้บางคนที่ต้องการแชร์ข้อมูลผ่านแอพที่ไม่ได้ถูกเพิ่มในแอพด้วยวิธีที่ผิด ไม่สามารถใช้งานได้

android-share-intent

ด้านซ้ายคือ ตัวอย่างการออกแบบการแชร์ที่ผิด ในขณะที่ด้านขวา เป็นการใช้ความสามารถของ Android Intent API

 

ใช้ Action Bar Pattern

เว็บไซต์ Android Developer ที่จัดทำโดย Google สนับสนุนให้แอพพลิเคชั่นรุ่นใหม่ๆ (ตั้งแต่รุ่น Honey Comb/Icecream Sandwich) ให้ใช้ Action Bar เป็นส่วนติดต่อผู้ใช้หลัก ซึ่งแอพในปัจจุบันของ Google และแอพพลิเคชั่นดังๆกำลังนิยมใช้กันอย่างกว้างขวาง ทำให้ผู้ใช้คาดหวังและคุ้นชินกับการใช้งานแอพพลิเคชั่นที่มีการออกแบบโดยใช้ Action Bar

ข้อสรุป

การที่ผู้พัฒนา ผู้ออกแบบ ที่ต้องการสร้างแอพพลิเคชั่นทั้งบน iOS และ Android ไม่ใส่ใจ หรือไม่เห็นความสำคัญกับการออกแบบ UI หรือส่วนติดต่อผู้ใช้ที่มีความสอดคล้องกับ Platform อย่างเพียงพอ ก็จะเกิดผลเสียต่อตัวแอพพลิเคชั่นเอง เพราะผู้ใช้เป็นผู้ที่จะเป็นคนได้รับผลกระทบโดยตรงกับแอพพลิเคชั่นที่ออกไม่ดี และท้ายที่สุดแล้วผลเสียก็จะส่งผลต่อแอพพลิเคชั่นของผู้พัฒนา หรือผู้ออกแบบเองครับ ด้วยการทำตามเคล็ดลับทั้ง 5 ข้อนี้ ก็ถือเป็นก้าวหนึ่งที่จะทำให้แอพพลิเคชั่นที่ออกมา มีคุณภาพและได้รับความนิยมจากผู้ใช้งานครับ

ที่มา: http://www.androiduipatterns.com/2011/04/5-tips-for-converting-ios-ui-to-android.html

Your ads will be inserted here by

Google Adsense.

Please go to the plugin admin page to set up your ad code.

This Post Has 0 Comments

Leave A Reply