Designing for Android and iOS
What was your first phone?
My first daily or frequent use of a phone was a dirty-white colored rotary phone my parents had hanging in our kitchen. It had a dangly cord that would drape across the kitchen while my mom talked to her friends and cooked us food at the same time.
The food was delicious, btw. ;)
What was your first smartphone? Or, if you’re old enough, what was your first cell phone?
In my formative years, up to the age of twenty-one, I didn’t have or want a cell phone. Imagine that — a tech dork who doesn’t want a cell phone!
My first cell phone came from my boss forcing me his extra to keep just-in-case he needed me when I worked at my first software dev shop.
A couple years after that, a friend gave me a hand-me-down Palm Treo and that was my intro to smartphones. The Palm Treo was MASSIVE. It was like a Blackberry on steroids. I seriously felt like Zack Morris from Saved by the Bell, but in the 2000s with a calculator for a phone.
When Apple announced the first generation iPhone, I was ecstatic and pre-ordered it immediately (because lines are dumb).
I used iPhones for a while.
I dropped one in a toilet.
I broke, replaced and upgraded others for a while before switching to the Google Nexus family a few years ago.
Now, I’m back using an iPhone and still have the Android for development purposes (as we’re constantly helping companies design and develop cutting-edge digital products *wink* at Adjust Creative).
Depending on the complexities of the information that needs to be presented, sometimes we have to design two or more interfaces for different devices and sometimes we can retain a design metaphor and brand across multiple devices effectively.
This article is a look at similarities and differences in user interaction design to understand the best approach at making an app for two very popular devices — a Google Nexus 5 running Android Marshmallow (6.0.1) and an Apple iPhone 6s running iOS 9 (even though iOS 10 is around the corner so I’ll have to update this article). I’m going to cover my feelings and observations in brief on User Experience, User Interface Design, Interaction Design of the two platforms.
Note: the interaction is the same when you drop either in a toilet.
I’m writing this article in August 2016, so I imagine by the time you read it — it will probably be dated. But, that’s ok, it’s still relevant right now and a fun topic to analyze!
Boutique vs Pragmatic — the eternal argument…
Like other Apple products, iOS still feels more elegant and like it has been crafted for me. Google’s Android still feels a bit clunky and VERY LOUD with color choices and too much white space around icons.
Bold colors on Android are not only kind of distracting sometimes, if the designer of the product or app isn’t great at understanding the guidelines and context, can be abused or misused and result in a UX disaster.
On iOS, content feels more important than global/standardized navigation — but I think they should be weighted better.
I like that the content is king — but the icons being just outlines really doesn’t make them more out of the way — it just makes them look tiny, noisy and forced.
The things that I like about iOS and their Human Interface Guidelines are a lot of the things I like about modern design in general which are minimalist, but not without personality. For instance, I love the use of blur on iOS instead of “shadow”. It gives me a very comfortable and glassy feeling.
Older screenshots that I didn’t take myself, borrowed from this article. But, illustrate the point.
However, where it falls apart on iOS is inconsistent use of a back button from app to app. Sometimes there is text with a big ol’ left caret, sometimes it’s just the caret, and sometimes it’s not even either of those but some squished text with an arrow squeezed up in the top left where the cell phone carrier information usually is — which makes ZERO sense!
Image taken from a great article on the same topic, A Tale of Two Platforms by Chris O’Sullivan.
I also think I like Android’s use of icons as interaction indicators instead of iOS’s tons of tiny text and icon pairing. Not only is it easier for me to see and looks less cluttered — I feel like it’s extremely appropriate in a global civilization where trying to design for every language becomes a nightmare.
I dislike how many steps it takes for me to interact with notifications on iOS and Android notifications in the top bar get a little scary when you haven’t looked at the phone for a while and the entire top bar is filled…
I also dislike the fact that Google’s material design has pushed to keep important elements hidden behind a hamburger. Out of sight, out of mind plays into this far to often — even as a person who uses the device as much as I do. Luckily, this has been updated in their Material Design guidelines.
If it has smooth moves or reacts, I like it more.
Transitioning from app to app
In terms of motion design for transitioning to and from apps, the homescreen and other parts of the system, Apple’s zoom animation style feels more appropriate when navigating to and from home and app to app unlike Android’s unmasking or sliding up from the bottom.
But, the sliding drawers for notifications on Android feel more appropriate.
Overall, iOS gives me a sense of “traveling smoothly” and without being obnoxious to get to different parts of the platform.
Since Google has released the Material Design Guidelines, consistent color change states for active vs inactive icons as well as toggles, text and other things within 3rd party apps feel like they are getting more and more consistent in terms of design patterns.
Some of those patterns are now starting to make their way into iOS as well — for better or worse.
iOS has a lot of consistency, but it feels like a fair amount of the apps abandon their guidelines or don’t follow their lead in terms of animation and gestures. Maybe I’m just noticing that due to the sheer number of applications available for the iPhone.
Gestures & Feedback
The Android OS has always had a head start on certain features. I feel like gesture-based navigation patterns are and were better on Android. iOS has gotten WAY BETTER over the years.
Still, some things that Google has designed for user feedback with gestures makes a lot of sense.
The best example is the immediate response animations.
When I tap on something within Android — I see a “hit area” with a subtle ripple effect and when I pull on a list or other pullable element and it’s at the end of it’s scroll, the “end of the road” pull feedback helps me quickly understand what’s happening and to move on.
One of the other gestures that I love about the Android OS has to do with Notifications and settings, which I outlined earlier.
They’re also a lot easier to find on Android. When I pull down from the top with a quick swipe, I can see my current notifications. Then, if I pull a second time, I get the common quick settings shown earlier.
From this view, if I want to go to detailed settings and advanced options, I can tap the gear icon and do that. This just feels better.
I’m also a huge fan of just swiping left or right to remove notifications from my pending collection and pulling on them to open up quick options within Android. That also seems more logical than swiping then tapping.
But, it’s just a different pattern, not really better than iOS.
(Note: in Android 7 it seems that they’ve added some icons above the Notifications to jump quickly to certain settings.)
On the iOS side of things, I love the 3D touch gesture to quickly peek at things to get context before interacting with them. I also really like when there are “hidden actions” to do more complex things that can be uncovered by swipe type gestures. The problem I see is that it’s inconsistent and I think they get lost a lot of times.
Let’s see some pics!
Let’s take a look at some visual comparisons of the designs of both system level and 3rd party app designs.
Notifications from the lock screen
Notifications are a bit more streamlined in Android. They appear the same and act the same everywhere they show up — the lock screen, the notification tray and as a popup.
I just flip them away to make them disappear or tap and pull them to interact.
In iOS — I can’t do that — I have to choose an option after swiping. Also, from a purely design, they feel a bit more like action items in Android and more like a list of things that have happened in iOS.
Luckily, it looks like in iOS 10, Apple has completely overhauled the notifications and the notification system resembles Android functionality very closely in terms of UI.
But, they’ve taken a step further and added 3D touch for rich interactions to the notifications.
Although it’s a little scary sometimes, I like being able to see the new notifications numbers floating on the home in iOS. On the flip side, I like the ability to Google search everything right there at the top and not have to flip over to the left to start searching for things — if I’m not using Siri or Google Now.
Common Settings: Quick Menu
Quick Settings are very similar in terms of functions. To reveal, in iOS, you swipe up from the bottom and in Android you swipe down from the top.
On Android, as stated before, once for notifications and a second time for settings.
But, those two quick gestures are fast and feel comfortable.
One of the things that I do like about iOS is continuity within standard operating system settings and app settings. The design metaphors are similar on all of the OS level applications.
This is just my opinion, but, I also feel like they get rid of unnecessary white-space — whereas Google has an abundance of white-space.
“Ok Google” vs “Hey Siri”
I love Google Now.
I know it’s kinda creepy — but it really does start to become amazingly helpful the longer you use it and the more information it has about you and the way you interact with digital services. It knows that I take cabs, where the traffic clusters are, what news I might be interested in based on what I’m talking about in email and Facebook.
Siri is also pretty valuable, but doesn’t send information about you to the cloud and is more safe feeling, but less useful in certain contexts.
The camera UI for both is so similar. They have slightly differing capabilities, but I’d say overall they feel about the same.
Note: I know these are not the same view of the calendar. I did this on purpose to show how drastically different they are in terms of UI design. On iOS the calendar is smooth, streamlined and easy to look at. Android’s calendar on the other hand is complex, way too colorful and gives me anxiety.
In my opinion, the calendar is where Apple really wins. Being a busy and also a design-focused person who cares about how things look and feel — Android’s calendar is terrible.
I’ve consistently tried to find a better calendar to replace it.
For a while I was using the closest thing Android has to iOS calendar: Sunrise Calendar. Sadly, Sunrise was discontinued by Microsoft and I had to move to Cal.
Text messaging is another area where Apple gets it right and Google has been struggling for quite some time. Not only is the functionality fantastic, but the design is pleasing on iOS. Even better, in iOS 10, the messaging application is getting some of those features that Facebook Messenger users love — rich animated texting.
Google has struggled with Google Voice integration, what app to use for SMS & MMS, group texts and other technology and infrastructure issues.
That aside, the design for Hangouts just plain sucks for my taste and I can’t stand that bold green color. It feels like the designer wasn’t finished…
Just get it together Google. This is the area you need to be much better at — text & media messaging…
Clock / Timer / Alarms
I like both and the differences are very obvious. I think in the Android version, colors are easier to read in the morning when I’m frantically trying to throw the phone across the room.
3rd-party Apps With Similar UI Design Patterns
Uber & Lyft (almost exact)
Not only are the Uber and Lyft apps almost indistinguishable from each other on the separate devices — they also look SO SIMILAR in terms of a product.
Instagram is so close. There are very subtle differences and they are mostly around icon style. But, I really like that they abandoned the “ios nav icons should have accompanying text” philosophy. It really makes it feel less busy around the nav area.
Bank of America
I’m not sure why the colors are darker on Android, but that’s interesting to me. Other than that it’s really similar with Material Design-inspired forms on Android.
3rd-party Apps that share app guts but use the UI Design Patterns of the respective platform
Grubhub is almost the same UX flow. Like Bank of America above, they use a couple of Material Design elements, but they don’t really feel implemented on purpose.
Trello is an interesting one. It’s got many of the same patterns in the meat of the application. The clear differences are the very core differences of iOS and Android — navigation and menu system placement and Trello seems to get it right. I don’t like that Green button on the right.
Like the last few examples, Spotify has the same major features and user flow with different navigation metaphor. Everything that is “Spotify” functionality has similar interaction patterns.
My favorite part about Spotify is this: Do you see that gradient behind the player controls on Android but not on iOS? That’s not what Google would do.
The thing that’s interesting is that after using both, I think the hidden menu on Android hinders me and what I’m looking for on Spotify.
Apps with Different UI Design Patterns
The Facebook app is maybe the most different from platform to platform. You can see years of evolution and analytics being put into practice here. The design patterns follow almost exactly how the users of each OS use the app based on A/B testing and continuous iterations.
Twitter — like Facebook — is very closely following the guidelines from each of the respective operating system developers. The most interesting thing to me about Facebook and Twitter is that EVEN THE DATA FEEDS are different on different devices..
Some of the design pattern choices could have been made because of a staggered release. (Robinhood released on iOS first and then released on Android later.) They do a great job at not only branding and trying to be disruptive, but also following the design guidelines from Apple and Google almost EXACTLY for each app.
Not only that, they do it very, very well.
Where is my damn phone number?
It’s 2016 and I don’t have time to memorize phone numbers. My phone takes care of it for me and I can concentrate on things I’m good at. This is a struggle for me when talking to say, a phone or utilities company representative and I need to give them the phone number of the phone and I can’t find it.
Android hides the phone number in an illogical place:
Settings > About Phone > Status > SIM Status > My Phone Number
iOS hides the phone number in a logical place:
Settings > Phone > Phone Number
Not enough transparency on iOS..
I know it’s a cliche, but I’m a computer nerd and I like to have more control over how and when I use files. Not having a file system is very annoying.
I’ll explain one of my reasons for this complaint:
I write and record a lot of music. When I’m done for that day — I’ll bounce my music down to an mp3 and put it in a shared folder on Google Drive so all the people I’m collaborating with or want feedback from can have the most current files.
On Android, I can easily download those mp3s and play them with the default apps or 3rd party ones. However, on iOS, due to the lack of transparent file system — I’m not be able to do that and am forced to download 3rd party software to interface with cloud storage or convert things in iTunes and sync the phone.
Now, this may sound like a lame complaint — but for someone who uses computers and technology as much as I do — it’s very frustrating to not have the ability to download files on whatever device I need those files currently to manipulate, read, upload somewhere or email to someone that needs it.
Android still has bugs… still..
Maybe it’s just because Android is more transparent about it and shows me when bugs happen, but it feels like there are at least 1–2 bugs every time I have do a lot with the phone at once.
I could probably go on, but let’s not be negative. ;)
Android and iOS are both fantastic and very similar — but very different. If a person has only used one of these devices (or is currently using one daily and not the other), there will be noticeable differences and frustrations. As a technology enthusiast and professional interaction designer, even I am frustrated when trying to jump back and forth and expecting thing A to happen but getting thing B.
I think for minimal function apps like Instagram it’s not a bad thing to have one design with subtle differences; and for innovative applications or games that will need a person to learn a new behaviour anyway — why not design it the same.
However, as the complexity of an application grows, the OS interaction and design patterns become VERY important to design around and Facebook is a great example of making those types of decisions based on real user feedback and iterative platform updates.
Have you used both iOS and Android as your daily device?
What do you think about the differences between the two experiences?