Your SlideShare is downloading. ×
0
Android vs. iOSWhile using Android over the past couple of weeks i’ve noticed some things when comparing my top apps to iO...
NOTES» Android app cleaner, less hidden UI» iOS using skeuomorphic design» Android app more branded to Evernote
NOTES» Android uses the more standard “left side    menu”»   Android is using the “notch menu”
NOTES» Android using notch menu» I like the “now playing” placement on Android» Android has more branding
NOTES» Android has left slide menu» iOS is using more standard iOS components
NOTES» iOS using more standard iOS components» I like the mixed search results from Android» Android has more branding
NOTES» Facebook tends to try to copy pixel for pixel    when they can.»   Android version has a blocky design - which is  ...
NOTES» Android using the “three dot” menu icon    where iOS uses the arrow»   With Android you can more easily see the    ...
NOTES» iOS uses more standard navigation elements» Android screen is visually nicer
NOTES» iOS profile more visual - has news feed in a    different area»   Android style, again blocky»   Search more noticeab...
NOTES» Twitter took the “move the iOS bar to the top”    shortcut for Android»   More branding on Android»   Seeing a lot ...
NOTES» Android uses logo with “>” instead of iOS’s    cancel button»   iOS search is more visual
NOTES» Very different layouts» On Android Google kept the Android specific    pattern to “notch” the username»   Almost reve...
NOTES» Cart and logo / nav flyout on Android is closer  to the Amazon website (brand patterns vs. OS  patterns)
NOTES» More branding on the Android device
NOTES» Android combined buttons into the “three dot”  menu
NOTES» More branding on the Android» Obviously trying to keep the apps very close    to the same design»   Using the Andro...
NOTES» Very branded app on both OSes» Android using the thin underline to show  selected nav item
NOTES» Android has the standard back, search area,  and notches thats seen across many modern  Android apps
NOTES» Very similar app across OSes» Android design tries to stay away from buttons  (Following the “Buttons are a Hack”  ...
NOTES» A more blocky design on the Android app» Apps very similar
NOTES» Android has larger hit areas» Facebook moved the “three dot” menu to iOS» Apps are very similar
NOTES» Similar branding, but slightly different visual    placement of elements»   This case, the iOS gets the left nav, an...
NOTES» Android using “notch” menu» Blocky design on Android
Upcoming SlideShare
Loading in...5
×

Android vs iPhone - Differences in UI Patterns and Design

53,675

Published on

While using Android over the past couple of weeks i’ve noticed some things when comparing my top apps to iOS. Both iOS and Android, in different cases, choose different UI elements to do different things. I wanted to catalog some of them here.

Overall I’d say that mainstream Android apps have improved over time, and in many cases (Spotify, Evernote, NPR, and Amazon) I liked the Android versions better. Also with design trends moving to blocky designs and flat colors (like Windows 8) - Android looks more modern in a side-by-side comparison to its iOS counterpart.

If anything this shows that there are very few standard patterns that are used 100% of the time on each OS, but there is risk of confusion from someone expecting one thing - like they have an iPad tablet, but an Android phone - and getting different results when switching between devices.

Published in: Design
8 Comments
89 Likes
Statistics
Notes
  • Could you redo this presentation with current UI? A lot has chanced since Q1 2013.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thats Indeed very nice comparsion on android vs apple menu style's
    you can also check the different kinds of menus in android and there purpose at
    Option MenuContext MenuPopup Menu
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks Jeremy, very helpful presentation
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Here's a UX comparison between Android and iOS standard widgets, with links to the documentation on the relevant Apple / Android websites. It's a nice way to get started learning all the technical terms.

    http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-6-and-android-4/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks - this was very helpful and saved me a lot of time!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
53,675
On Slideshare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
948
Comments
8
Likes
89
Embeds 0
No embeds

No notes for slide

Transcript of "Android vs iPhone - Differences in UI Patterns and Design"

  1. 1. Android vs. iOSWhile using Android over the past couple of weeks i’ve noticed some things when comparing my top apps to iOS. Both iOS and Android, in differentcases, choose different UI elements to do different things. I wanted to catalog some of them here.Overall I’d say that mainstream Android apps have improved over time, and in many cases (Spotify, Evernote, NPR, and Amazon) I liked the Androidversions better. Also with design trends moving to blocky designs and flat colors (like Windows 8) - Android looks more modern in a side-by-sidecomparison to its iOS counterpart.If anything this shows that there are very few standard patterns that are used 100% of the time on each OS, but there is risk of confusion from someoneexpecting one thing - like they have an iPad tablet, but an Android phone - and getting different results when switching between devices. vs.
  2. 2. NOTES» Android app cleaner, less hidden UI» iOS using skeuomorphic design» Android app more branded to Evernote
  3. 3. NOTES» Android uses the more standard “left side menu”» Android is using the “notch menu”
  4. 4. NOTES» Android using notch menu» I like the “now playing” placement on Android» Android has more branding
  5. 5. NOTES» Android has left slide menu» iOS is using more standard iOS components
  6. 6. NOTES» iOS using more standard iOS components» I like the mixed search results from Android» Android has more branding
  7. 7. NOTES» Facebook tends to try to copy pixel for pixel when they can.» Android version has a blocky design - which is the current design trend (think Windows 8).
  8. 8. NOTES» Android using the “three dot” menu icon where iOS uses the arrow» With Android you can more easily see the number of likes/reposts
  9. 9. NOTES» iOS uses more standard navigation elements» Android screen is visually nicer
  10. 10. NOTES» iOS profile more visual - has news feed in a different area» Android style, again blocky» Search more noticeable on Android» Android using the thin underline to show selected nav item
  11. 11. NOTES» Twitter took the “move the iOS bar to the top” shortcut for Android» More branding on Android» Seeing a lot of “pull to search” on iOS vs. having a search UI element always visable on Android
  12. 12. NOTES» Android uses logo with “>” instead of iOS’s cancel button» iOS search is more visual
  13. 13. NOTES» Very different layouts» On Android Google kept the Android specific pattern to “notch” the username» Almost reverse - Android has a row of icons at the bottom where the iOS does not. You could argue that the functionality is so different from standard iOS this bar would confuse on an iPhone.
  14. 14. NOTES» Cart and logo / nav flyout on Android is closer to the Amazon website (brand patterns vs. OS patterns)
  15. 15. NOTES» More branding on the Android device
  16. 16. NOTES» Android combined buttons into the “three dot” menu
  17. 17. NOTES» More branding on the Android» Obviously trying to keep the apps very close to the same design» Using the Android “>” logo as a back button
  18. 18. NOTES» Very branded app on both OSes» Android using the thin underline to show selected nav item
  19. 19. NOTES» Android has the standard back, search area, and notches thats seen across many modern Android apps
  20. 20. NOTES» Very similar app across OSes» Android design tries to stay away from buttons (Following the “Buttons are a Hack” philosophy?)
  21. 21. NOTES» A more blocky design on the Android app» Apps very similar
  22. 22. NOTES» Android has larger hit areas» Facebook moved the “three dot” menu to iOS» Apps are very similar
  23. 23. NOTES» Similar branding, but slightly different visual placement of elements» This case, the iOS gets the left nav, and the Android does not
  24. 24. NOTES» Android using “notch” menu» Blocky design on Android
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×