20 แอพชื่อดัง ออกแบบ UI เหมือน/แตกต่างกันอย่างไรใน iOS และ Android

พอดีช่วงนี้ผมกำลังหาข้อมูลเรื่องการออกแบบ mobile app สำหรับหลาย platform ครับ ส่วนหนึ่งที่ทำก็คือการลองดูว่า app ดังๆ ทั้งในไทยและต่างประเทศเขาออกแบบ app กันออกมาเป็นอย่างไร มีส่วนเหมือนส่วนต่างมากน้อยขนาดไหน ในโพสท์นี้ก็เลยนำ UI ของ app ต่างๆ มาเปรียบเทียบให้ดูนะครับ เดี๋ยวโพสท์หน้าผมจะมาสรุป lessons learned และแนวทางการออกแบบที่ผมคิดว่าน่าจะดีครับ

รายชื่อ app ที่ได้ทำการศึกษามีดังนี้ (คลิกที่ลิงค์เพื่อไปที่ UI ของ app นั้น)

Gmail
Google Drive
Google Plus
Facebook
Facebook group
Facebook Messenger
Instagram
Linkedin
Twitter
Tinder
Pinterest
Trello
Slack
Dropbox
Feedly
Buffer
Grab
Lazada
Kaidee
Wongnai

ก็เริ่มกันเลยครับ

1. Gmail

คิดว่าน่าจะเป็นแอพที่ยังปรับเป็น Material design ไม่เสร็จ โดยรวมแล้วแอพ Gmail ของ iOS นั้นทำตาม guideline ค่อนข้างมาก หน้าแรกแทบจะเหมือนแอพ Mail ที่มากับ iOS เลย (แปลกใจนิดว่า Navigation Bar ด้านบนไม่ทำสีแดงเหมือนแอพจาก Google อื่นๆ) ทั้งสอง platform ใช้ drawer เป็น navigation หลัก โดย Action หลักของหน้าคือการสร้างอีเมลใหม่ Android ใช้ floating action button (FAB) ในขณะที่ iOS เอาไปไว้ที่ navigation bar

เปิด drawer มาแล้วคล้ายๆ กัน ที่ต่างคือ iOS เอาปุ่ม setting มาไว้ด้านบน ส่วน Android เอาไปใว้เป็น item สุดท้ายของ drawer

พอเข้ามาหน้า Setting แทบจะไม่เหมือนกันเลย ของ iOS มี option ให้ค่อนข้างน้อย ส่วนของ android ก็เป็น UI มาตรฐานของ Material design

2. Google Drive

หน้าแรกแทบจะเหมือนกันเป๊ะเลยครับ ประสบการณ์โดยรวมของทั้งแอพก็เกือบจะเหมือนกันใน 2 platform

ถ้าคลิกที่ไอคอน more ทางขวาของแต่ละไอเทมจะมี action sheet (iOS) bottom sheet (android) ขึ้นมา
สังเกตว่าเวอร์ชั่น iOS วาง title ตรง navigation bar ไว้ชิดฝั่งซ้าย (ปกติ iOS title จะอยู่ตรงกลาง)

หน้าตา sheet เหมือนกันทุกอย่าง sheet หน้าตาแบบนี้เป็นตาม Material design ไม่ได้ตาม HIG เท่าไหร่

สิ่งที่ต่างอย่างแรกคือ ปุ่ม action ตรง navigation bar / app bar ของ iOS จะเรียก action sheet ขึ้นมา ส่วน android จะเป็น menu

กดปุ่มเมนูมุมซ้ายบน drawer ออกมาเกือบเหมือนกันเป๊ะ (ไม่เหมือนแอพ gmail) ต่างกันที่รายละเอียดของ item เฉยๆ

3. Google Plus

หน้าแรกค่อนข้างเหมือนกัน แต่ของ android เพิ่มปุ่มเข้ามาใน app bar ด้านบน ถ้าคลิกจะเป็น Menu ส่วน iOS เอาสิ่งที่อยู่ใน Menu นั้นมาเป็น item ใน drawer

เปิด drawer มา design คล้ายกัน แต่ฟังก์ชั่นไม่เหมือนกันเท่าไหร่

การออกแบบหน้า Settings ของ Android นี่มาตรฐาน ส่วนของ iOS เป็น table ที่ปรับให้เข้ากับ Material design

4. Facebook

โดยรวมคล้ายๆ กันครับ แต่ของ Android จะเอา tabs ไปไว้ด้านบน (เพราะเดิม android ไม่ให้เอา navigation หลักไว้ด้านล่างจอ) ซึ่งจะเห็น pattern แบบนี้เยอะมากในแอพต่างๆ ครับ ใน iOS เป็น tab bar อยู่ล่าง ส่วนใน android เอาไว้บน

สิ่งที่ไม่ได้สำคัญมากทุกอย่างเอาไปกองไว้ในเมนูตรง tab สุดท้าย แล้วปรับขนาดปรับ design ให้เข้ากับ OS นั้นๆ

5. Facebook group

ผมสนใจ app นี้เพราะเป็น app ที่สร้างด้วย React native เลยอยากรู้ว่าเขาใช้แนวทางไหนในการออกแบบสำหรับแต่ละ platform

หน้าแรกเข้ามาหน้าตาอาจจะต่างกัน แต่ฟังก์ชั่นแทบจะเหมือนกันเลยนะครับ ใช้แนวทางเดียวกันกับแอพ facebook คือ iOS tab ล่าง android tab บน

Tab discover โดยรวมฟังก์ชั่นเหมือนกัน แต่ปรับ UI ต่างๆ เช่น ลักษณะปุ่ม ให้เข้ากับ OS นั้นๆ

Tab settings ก็เหมือนกันครับ function เหมือน design ต่าง (แต่ก็คล้าย) สังเกตว่า toggle button ของ android ไม่ใช่ของ Material design

6. Facebook Messenger

Function เหมือน แต่ design ต่างเช่นเคยครับ

Tab bar ios ล่าง android บน เหมือนแอพอื่นๆ
Action หลัก (สร้าง message ใหม่) iOS ไว้บน navigation bar ส่วน Android ใช้ FAB

Tab People เปลี่ยน design ให้เหมาะกับ OS นั้นๆ

Tab Me ก็เช่นกัน

7. Instagram

IG กล้าเอา tab bar ไว้ด้านล่าง! แหกกฎการวาง tab ของ android สมัยก่อน (สมัยนี้ให้แล้วในชื่อ Bottom navigation) จริงๆ IG ขึ้นชื่อเรื่องการทำแอพ android ได้เหมือนหลุดมาจาก iOS มานานแล้ว ตั้งแต่สมัยเปิดใน android ใหม่ๆ

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

ถ้าคลิกจุดที่ว่าก็จะเป็นแบบนี้ น่าสนว่า android ไม่ได้ใช้ bottom sheet (แทน action sheet ของ iOS) หรือ menu แต่ไปใช้เป็น dialog แทน

เกือบทุก tab มี function ข้างในเหมือนกันทั้งสอง platform ต่างกันแค่การปรับให้เข้ากับ platform นั้นๆ ตัวอย่างหน้า Activity

หน้า setting หน้าตามาตรฐาน iOS มาก ส่วนของ Android เป็นหน้าตาพิเศษ ไม่ได้อิงกับ guideline

8. Linkedin

เป็นไม่กี่แอพที่ดูแล้วให้ความรู้สึกไม่ค่อยเหมือนกันระหว่างสอง platform คือเอา tab bar ไปไว้บนสำหรับ android แทน app bar ไปเลย แต่สังเกตดูปุ่มบนนั้นครับ ไม่ค่อยเหมือน tab bar ใน iOS

ถึง navigation หลักจะต่างเยอะ แต่เข้ามาหน้านั้นๆ แล้วก็คล้ายกันอยู่ เช่น tab My network

ถ้ากด tab ใน android จะไปโผล่อีกหน้าไปเลย ไม่ได้โผล่เป็น tab เหมือนใน iOS (อันนี้ก็เป็นท่าที่คนใช้เยอะ)

อัพเดทล่าสุดนะครับ: Linkedin android มีเวอร์ชั่นใหม่แล้ว มาพร้อม UI ใหม่แล้ว

9. Twitter

โผล่มาหน้าแรก ตำแหน่งของสิ่งต่างๆ ต่างกันพอสมควรระหว่างสอง platform มีการปรับหน้าตาให้เข้ากับ platform นั้นๆ

ของ Android ไม่ได้ใช้ระบบ tab แต่ถ้าเราคลิกที่ไอคอนต่างๆ ตรง app bar ด้านบนจะเปลี่ยนหน้าไปเลย (เหมือน linkedin)

หน้า profile ของ iOS จะมีปุ่ม Setting ส่วนของ Android เอาไปไว้ในหน้า Menu ที่คลิกจากปุ่ม More ข้างๆ ปุ่ม Search ตรง app bar

หน้า Setting ทำตาม guideline ของแต่ละ platform

10. Tinder

นี่เสียสละโหลดแอพนี้เพื่อมา test เลยนะครับ ปกติไม่เคยเล่นเล้ยย :3

หน้าแรกฟังก์ชั่นเหมือน ปรับ design ให้เข้ากับ platform แต่น่าสนใจตรงปุ่ม menu ครับ อันนึงใช้ hamburger อีกอันใช้รูปคน

เมนูเปิดมาก็ไม่เหมือนกัน แต่โดยรวมผมว่าก็เข้ากับ platform นั้นๆ นะ

หน้า Setting iOS เป็น UI มาตรฐาน ส่วนของ android เป็นทำใหม่ (เอา Material design มาแค่ toggle)

11. Pinterest

ใช้ท่าเดียวกับ Twitter เลยครับ แปลง tab bar จาก iOS เป็นปุ่มด้านบน แต่กดแล้วเปลี่ยนหน้า

หน้าอื่นก็คล้ายๆ กันทั้งสอง platform ครับ (แต่ android เปลี่ยนปุ่ม Setting เป็นจุดสามจุดแทน)

หน้า settings ของ iOS ใช้ UI มาตรฐาน ส่วนของ android พยายามทำให้เหมือนในเวอร์ชั่นเว็บ

12. Trello

เป็น app ที่ทำตาม guideline ของแต่ละ platform ได้เคร่งครัดดี (ซึ่งผมชอบพวกแอพแบบนี้นะ)

ในขณะเดียวกันก็ไม่ได้ทิ้ง experience แบบที่ได้จากเวอร์ชั่นเว็บ (ทำไหมของ android ไม่มีจุดด้านล่าง – -”)

มี right drawer โดยของ iOS ใช้ UI แบบเวอร์ชั่นเว็บ แต่ของ android เป็น Material design

13. Slack

โผล่มาหน้าแรกค่อนข้างเหมือนกันครับ ใช้ left-drawer เป็น main navigation ทั้งคู่ (แต่ไม่ได้ทำตาม pattern ปกติที่ใช้ hamburger หรือคำว่าเมนู)

เปิดมาแล้ว channel list เหมือนกัน แต่การจัดตำแหน่ง control ต่างๆ ไม่เหมือนกันนะ

มันไม่เหมือนจนเปรียบเทียบลำบากเลยแหะ แต่อย่างน้อยใช้ icon แบบเดียวกัน

แต่อย่างไรก็ดี จากที่ใช้ slack มา ผมว่าเป็น app ที่ทำ UX ได้มี consistency ในแต่ละ platform (web, mobile, desktop) ได้ดีทีเดียวนะครับ

14. Dropbox

คล้ายๆ trello ครับ คือเป็น UI มาตรฐานตาม OS นั้นๆ ส่วนของ android จะสะดวกหน่อยเพราะมี FAB สำหรับอัพโหลดไฟล์ใหม่เลยในหน้าแรก แต่ของ iOS ต้องเปลี่ยน tab ไป Files ก่อน (แต่มันก็ไม่ได้เปลี่ยนยาก คือ tab มันง่ายกว่า drawer)

ตอนจะอัพโหลดไฟล์

ตอนกด manage Files/folder ใช้ท่ามาตรฐานครับ action sheet (iOS) กลายเป็น bottom sheet (android)

15. Feedly

หน้าแรกเหมือนกัน ใช้ left-drawer เป็น main navigation เหมือนกัน

กดเมนูออกมาเป็น UI มาตรฐานของ platform เนื้อหาเหมือนกัน

UI ของหน้า feed list ก็เหมือนกัน (ต่างที่ icon) ที่น่าสนใจคือใช้ Menus (แบบ android) ตรง setting เลย ปกติ iOS ก็มี popover แต่ไม่ค่อยเห็นใช้ใน mobile นะครับ (แต่ tablet ใช้กันเยอะอยู่) ส่วนใหญ่จะเป็น modal, action sheet อะไรไป

16. Buffer

เปิดมาท่ามาตรฐานครับ tab ใน iOS, drawer ใน android

เปิดเมนูมา ฟังก์ชั่นเหมือนกัน ปรับ UI ให้เข้ากับ OS

โดยรวมทั้งแอพก็เป็น UI มาตรฐานของ OS ครับ

17. Grab

แหกไกด์ไลน์ควบ 2 ค่าย ด้วยการทำ tab bar ให้ scroll ได้ ! (จริงๆ สมัยก่อน android มันไม่มี tab bar ด้วยซ้ำนะครับ แต่พี่ Grab เราก็มี)

เปิดเมนูมาหน้าตาและฟังก์ชั่นก็คล้ายๆ กันครับ

18. Lazada

เป็นแอพซับซ้อน แต่ทำ UI มาคล้ายกันมากระหว่าง 2 platform

ส่วน setting หลัก น่าสนใจว่าใช้ custom font ในแอพ (แต่ 2 OS ใช้ฟอนต์คนละตัว)

Main menu ของ iOS เป็น popover (ตอนแรกนึกว่าจะเลื่อนมาจากทางซ้าย) และเป็นคนละฟอนต์กับด้านบน ส่วนของ android เป็น drawer มาจากทางซ้าย

หน้า product detail เป็นหน้าที่ไม่เหมือนกัน ทั้งตำแหน่งและสี (อาจกำลังทำ A/B testing อยู่)

19. Kaidee

เทรนด์เดี๋ยวนี้บอกปุ่มเป็นคำว่าเมนู เพิ่มการกดได้มากกว่าใช้ไอคอน hamburger ของ iOS ช่องค้นหาอยู่กลางจอเลย ส่วนของ android อยู่ app bar (ถึงกดตรงฟิลด์ที่อยู่กลางจอก็เด้งไป app bar)

Main navigation หน้าตาเหมือนกัน

หน้าโปรไฟล์คล้ายกัน ปรับให้เข้ากับ OS เล็กน้อย แต่ถ้าจะเข้ากว่านี้ android น่าเป็น FAB ไม่ค่อยเห็น android เอา main action ไปไว้ app bar ด้านขวาเหมือนกันครับ และอันนี้ปุ่มขายตรงกลางของ iOS กดได้ ส่วนของ android ต้องไปกดมุมขวาบน