This is a guest post from an anonymous writer, who is a loyal user of Apple products and a veteran iOS developer.
I discovered the ICS Paper Cuts blog today and I was looking through some of the screenshots they had of Android Ice Cream Sandwich. As an iOS user since the first iPhone arrived, I don’t have much exposure to Android on a day to day basis. So it was an eye-opening experience for me to see just how bad the UI looks compared to iOS. I’m stunned that even after 4 major versions, the “the world’s most popular mobile platform” (according to Google) still looks like it was designed by first year CS students. It inspired me to do some side-by-side comparisons of Android vs. iOS to illustrate just how amateurish Google’s UI is. A previous post on Android Gripes showed how bad many third party apps look on Android compared to iOS, but here we’ll be looking only at UIs developed by Google and Apple themselves. Fandroids, you can’t blame this junk on lazy third party developers or inept carriers. This is 100% Google’s fault.
(Note: I don’t have an Android device of my own, so I’m comparing the Android screenshots from ICS Paper Cuts with similar ones I made myself in iOS. And before you Fandroids whine about how I can’t criticize ICS without having used it, keep in mind that your OS should be intuitive enough that a new user like me can understand immediately what’s going on just by looking at it. iOS lives up to that standard, so that’s the standard I’ll be holding Android to as well.)
First up is the standard alarm clock app:
Honestly, where to begin? On the left (iOS), you have a beautifully designed screen with the header “Alarm.” There are three alarms set, each clearly marked “ON” so you know they’re enabled. On the top you can see two controls that are subtly darkened and sunken into the title bar to make them appear like buttons to be pressed. One is marked “Edit” that will no doubt let you edit the alarms. The other is marked “+”. While it’s not as intuitive as “Edit”, it doesn’t take that much brainpower to realize that it will let you add a new alarm. Under the time for the first two alarms, you can see what days each is set for: Weekdays and Weekends. Nice. At the bottom of the screen is a shaded, labeled tabbed interface that clearly shows where you are in the context of the app. The whole UI is super clean and intuitive. The tasteful gradients, textures, and shadows make the interface appear polished and tangible, like something waiting to be touched. Quite impressive.
Now let’s look at the screen on the right (Android). First impression: a flat black square with a bunch of stark white lines. Ugh, it reminds me of a terminal screen. In the upper left you’ve got the header text “Alarms” with a clock icon. In the upper right you’ve got two icons: a check mark and some dots. One symbol is white and one is slightly grayish. Are they buttons? It’s not clear, since they look just like the title text. And if they are indeed buttons, who knows what they do. One might assume the check means “Save”, but if that’s the case, shouldn’t there be a corresponding “Cancel” or “X” button? Nowhere. So I can save, but I can’t cancel? And it’s anyone’s guess what those three dots are for. They look disabled anyway, so I’ll just ignore them.
Next, we have a big “Add alarm” text with a “+” next to it. This looks almost exactly like the header text. Am I supposed to tap that to make a new alarm? If so, why does it look like header text instead of a button that can be pressed? Ridiculous. Below that, we have the three alarms. Ok, a little bit better. I can see the times and the days they’re activated for. But the nice touch of showing “Weekdays” and “Weekends” is not there; instead it lists out all the days. A minor thing, sure, but reveals a lack of polish. Now, are these alarms activated or not? I would assume they are, since there’s no “OFF” or other text indicating otherwise. But then there are these faint gray boxes to the left of the alarms. They look like they could be checkboxes. What are they for? If an alarm is not checked, is it off? Or are the checkboxes just a convenience for selecting multiple alarms and performing an action on them (e.g., like checking a bunch of emails in Gmail and deleting them)? It’s not that clear. The checkboxes also look like they’re disabled controls, since they’re not bright white like the “Add alarm” button. And they’re not even horizontally centered. Laughable. Finally, at the bottom of the screen you’ve got three more symbols. They don’t look like buttons, just plain icons on a flat black background. And unlike the tab bar in iOS, there are no labels, so it’s anyone’s guess what they do. Are they related to the app? The arrow looks like a “back” icon, but the other two don’t look like anything. The pentagon in the middle looks like it could be an up arrow. Does it take you up a level in the app? And what about the two boxes on the right? Sorry, I’m stumped.
The entire Android alarm clock UI is flat, uninspired, and confusing. What can be tapped and what can’t? There’s no shading or texture to quickly let me know. What’s header text vs. a button vs. a list item? They all look exactly the same. If I was teaching an intro class on UI design and a student turned this into me, I’d give it a D. Come on Google, this is pathetic. It’s not that difficult to make a button look like a button!
Next we have the WiFi list:
In the iOS app we have a control that obviously looks like an on/off switch to toggle WiFi. We then have a list of networks, with the currently connected network in a different color and a checkmark next to it. It seems clear that if I tapped another item in the list, the checkmark would transfer to that item and that network would then be selected. Each item also has a signal strength indicator, and a lock if it requires a password. Finally, there’s a button with a right arrow symbol. It’s not immediately clear what this button does, though one could reasonably assume that tapping it takes you to more details about the network. Overall, this is a very intuitive UI.
Now let’s look at Android. Again, everything is flat; it’s not clear what’s a button and what isn’t. The on/off slider (I’m assuming it’s a slider?) doesn’t look like something that can be manipulated. It looks like a decorative element showing you that WiFi is on. As for the list, which network is currently active? There’s no checkmark or highlighting like iOS. Instead you have to read the text to see that one of them says “Connected”. Horrible. Also, I assume tapping a network will connect to it, right? If so, how do I view details of a network without also connecting to it?
Each item has an unnecessary amount of detail about the security protocols used for the network. Sure, it’s a noble effort to let people know how secure a network is. But honestly, how many regular users know or care what WPA2 is? When Average Joe wants to get on the Starbucks WiFi, he’s not going to say to himself, “oh, that’s only secured with WEP, I better not use it.” If you want to let people know that a network might not be secure, as a UI designer it’s your job to do the work for them. Don’t assume Joe knows the difference between WEP/WPA/WPA2. Instead, figure out how to translate that technical jargon into something a regular user can understand.
Finally, the scan/add network/more buttons on the bottom are a joke. The spacing is horrible; they don’t look anything like buttons; two of them are text-only and another is icon-only; and there’s absolutely no reason why “Advanced” has to be a single item in a popup menu. Ludicrous.
Moving on, let’s check out a screen in the settings app:
In iOS, related items are grouped together, and each section is clearly delineated thanks to the contrast between the white rows and the textured gray background. Item text is easily differentiated from header text. The former is bold and black, while the latter is bluish gray and etched into the background. Each setting has a clear on/off switch or else a gray arrow indicating that tapping it will lead to an adjustment of that setting. The entire UI is clean and obvious.
Android, on the other hand, is a jumbled mess. All of the text looks similar, so you can’t easily differentiate item text from header text from explanatory text. It’s not at all obvious which items are grouped together, since everything is just separated by white lines, and the spacing is horrendous. I don’t know which items can be tapped and which can’t, and why some have icons next to them and some don’t. Some text is indented and some isn’t. What a disaster.
I could go on with more examples, but I’ve had enough. I’m really amazed at how bad Google is at UI design, and even more amazed that people put up with it. Considering how practiced Google is at ripping off fundamental ideas from iOS (multi-touch, swiping, momentum scrolling, pinch to zoom, on-screen keyboard, etc.) you’d think they could do a better job of ripping off good UI practices also. But no; here they are 5 years after Apple first showed them the way, and they’re still failing miserably at it. Embarrassing.
