24
Android vs. iOS 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 dierent cases, choose dierent UI elements to do dierent 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 dierent results when switching between devices. vs.

Android vs iPhone - Differences in UI Patterns and Design

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Android vs iPhone - Differences in UI Patterns and Design

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 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.

vs.

Page 2: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Android app cleaner, less hidden UI» iOS using skeuomorphic design» Android app more branded to Evernote

Page 3: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Android uses the more standard “left side

menu”» Android is using the “notch menu”

Page 4: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Android using notch menu» I like the “now playing” placement on Android» Android has more branding

Page 5: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Android has left slide menu» iOS is using more standard iOS components

Page 6: Android vs iPhone - Differences in UI Patterns and Design

NOTES» iOS using more standard iOS components» I like the mixed search results from Android» Android has more branding

Page 7: Android vs iPhone - Differences in UI Patterns and Design

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).

Page 8: Android vs iPhone - Differences in UI Patterns and Design

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

Page 9: Android vs iPhone - Differences in UI Patterns and Design

NOTES» iOS uses more standard navigation elements» Android screen is visually nicer

Page 10: Android vs iPhone - Differences in UI Patterns and Design

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

Page 11: Android vs iPhone - Differences in UI Patterns and Design

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

Page 12: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Android uses logo with “>” instead of iOS’s

cancel button» iOS search is more visual

Page 13: Android vs iPhone - Differences in UI Patterns and Design

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.

Page 14: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Cart and logo / nav flyout on Android is closer

to the Amazon website (brand patterns vs. OS patterns)

Page 15: Android vs iPhone - Differences in UI Patterns and Design

NOTES» More branding on the Android device

Page 16: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Android combined buttons into the “three dot”

menu

Page 17: Android vs iPhone - Differences in UI Patterns and Design

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

Page 18: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Very branded app on both OSes» Android using the thin underline to show

selected nav item

Page 19: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Android has the standard back, search area,

and notches thats seen across many modern Android apps

Page 20: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Very similar app across OSes» Android design tries to stay away from buttons

(Following the “Buttons are a Hack” philosophy?)

Page 21: Android vs iPhone - Differences in UI Patterns and Design

NOTES» A more blocky design on the Android app» Apps very similar

Page 22: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Android has larger hit areas» Facebook moved the “three dot” menu to iOS» Apps are very similar

Page 23: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Similar branding, but slightly different visual

placement of elements» This case, the iOS gets the left nav, and the

Android does not

Page 24: Android vs iPhone - Differences in UI Patterns and Design

NOTES» Android using “notch” menu» Blocky design on Android