Saturday 26 November 2011

A Cautionary Example of Bad Design

Sometimes it is good to look at cautionary tales of design to avoid doing the same mistakes others have made. I always try to avoid being too harsh about small developers' creations as it is understandable that people doing their hobby projects or building apps alone cannot invest same resources. The app we're looking at today should come with a big enough budget to avoid the many mistakes they have left in the app. The official IKEA Calaogue app.

Visual Design
The first thing that becomes apparent after opening the app is that they haven't bothered to adapt their design to fit Android platform. They have lifted the design directly from their iOS app even copying the iOS icons. If they would have an original design maybe using a similar style on Android could work out. But in this app they have used iOS standard components. The app immediately feels like out of the place on an Android phone.

While some might say that consistency is important I think consistency between apps on one platform is more important than consistency between apps from same developer on two different platforms. Not many people use both iOS and Android.


Not only is the general visual appearance sloppy but attention to detail is too. Closer look at this back button reveals that both of the lower corners have wrong colored pixels. It's not a big deal but mistakes like this make the UI feel low quality.


UI Controls
The direct usage of iOS icons has led to too small controls. Older iPhones had smaller pixel density than hdpi Android phones and therefore the icons, when used unmodified, will endup too small on a hdpi Android phone screen.

The icons on the bottom bar are nearly impossible to tap. Because many phones have fairly bad touch event recognition right at the bottom if any controls are placed there they should be either moved slightly off the bottom or increased in size to make interaction easier.

I also have a special grief about the icons themselves. What does the leftmost icon do? No, you guessed wrong. It opens a bookmarks list.

The main part of this view, which is the app's landing screen, is also very poorly designed. It is a list of catalogues available on the country you have selected (selection can be changed from the globe icon). Even if you download catalogues from other countries they are not visible here. You have to swap between countries. I don't understand the reasoning for hiding the others. There's no shortage of room on this screen and the main content area is already scrollable.

As with the content itself. What is the grey box with availability date? I guess it is the next catalogue but if so why doesn't it say that? Or is it a special holiday catalogue? They both have the same label "Deutschland".



Back Button
The most obvious error they have done is the presence of a back button. On Android that is not needed. Every device ship with a hardware back button and in future the Ice Cream Sandwich will always provide an on screen back button. Having a back button as part of the UI can cause confusion in users. What happens after you press the hardware back button after tapping the on UI back button?


Error Handling
Different error states and input validations are handled very poorly. Take for example the page selection control. Tap the button and user is presented a text field where he or she can type a page number to go. Unfortunately the on screen keyboard hides the bottom bar and the dialog box doesn't give any indication what is the allowed range for the input. Type a too large number and the user is presented with a rude error box telling that he or she is stupid for not remembering how many pages the catalogue has. Never let user input an invalid value if validation can be done in real time!



There's a similar problem on search screen. If user taps the search button after entering too short search string the app pops ups another rude error dialog.

This is another problem that is easy to fix. Simply return an empty search result page telling user the same message. Not having to tap OK is much more smoother workflow for entering another search term.








Data Handling
The app download large data files. Unfortunately the app cannot be installed to SD card and the data files are also stored on the phone's internal memory. Wasting 100mb of the internal memory is a big problem on many phones and will very likely cause many users to uninstall the app.


Another big problem with data handling is also relate to the back button handling. When tapping more info button on a item screen the app fetches information from over the network connection and shows a loading progress indicator. The problem is that pressing back button doesn't cancel the loading process. If network connection is down there's no other way than kill the app to get back to any other screen.




Conclusion
One-to-one conversion of an existing iOS app is not a good idea. In the long run something that might look like an opportunity to save money might turn out damaging the brand. One design doesn't often work on all platforms.




16 comments:

  1. The two apps I designed that had both iOS and Android versions I was never asked to do an Android design, the designs were converted to Android by the developer. This might explain some things: I often see Android apps that look they were only ever considered for iOS.

    ReplyDelete
  2. I remember arguing with one client about the "Back button" issue. As above, the design was created for iPhone and just reused for Android.

    ReplyDelete
  3. The same happened to me. It seems that the designers care more for iOS apps. Then it's up to the dev team to convert the UI to Android. Which is wrong. And the managers want the app to look the same on both OSes. For example we had to explain that there is no need for a back button on UI because there is a back button on the phone. And so on ...

    ReplyDelete
  4. I have experience where (the client's own/chosen) designers know every side of web design and Photoshop but have limited understanding of differences between iOS and (specially) Android.

    Waiting for the day the graphic deliverance will include icon set for ldpi/mdpi/etc..

    ReplyDelete
  5. Another annoyance is a problem with the german umlauts. When you switch you language to german the back-button in the "My Downloads"-section is labeled "Zurück" instead of "Zurück". Same with the delete-button and the size-label. (This is almost all text shown on the site!)

    ReplyDelete
  6. I agree with the author that the inclusion of back buttons and small iOS buttons is bad Android design but the rest of the complaints seams to be equally true for the iOS version as well? Or are iPhone people expecting this kind of poor functionality?

    The discussion of whether treat Android as a second grade platform is very much like what happened in webdesign a couple of years ago. Websites where designed, developed and tested on and for IE on Windows everyone else was ignored... Luckily this changed! :-)

    ReplyDelete
  7. Hi all,
    Thanks for the comments! It's really interesting to see how pervasive this approach is.

    Christian, you're right, or course. I believe, however, that many of the issues in the Android version are direct consequence of not having platform specific design and assets available. Also, lack of understanding Android platform internals (how to store data, SD cards etc) and how to handle scalability (wrong button / icon sizes / density issues) have caused the Android app to be much worse than the iOS counter part.

    I'd really like to let decision makers in companies to understand that having an iOS app doesn't mean that the "spec" is ready. In the IKEA's case 457 people has rated the app one star. They have 871 reviews with 1-3 stars. Average is 3.2. Treating Android as second grade platform will have a negative effect to their brand.

    ReplyDelete
  8. I have experienced the same thing but as a user. The app to look up when your next bus is running is a direct iOs port and has an on screen back button. Worst part is: the "real" Android back button kills the app like iOs' home button...

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. just wanted to point out this is a really good post, also if someone can post about having a Mobile Web app porting to Android and the same stuff happens somehow the Project Manager thinks that Android gives more flexibility so he/she adds more features on it and sometimes copies most of the design in the Mobile Web. Hopefully they can understand the difference of one platform design / available features to one another.

    ReplyDelete
  11. Seriously as a Developer I fight with clients every day over the differences between the two. We have produced a few apps and always present the client with an iOS design and an Android design and they ALWAYS insist on us building the Android app with the iOS design.

    It's the client, not the developer, who wants to see one consistent look across their app. The developers building apps for both platforms, use both platforms and know they should be different. We insist on it with the client but in the end they are the ones paying.

    ReplyDelete
  12. I agree, there is no need for the back button, but it is not *wrong* to use it!

    The users are not idiots, the back button functions the same with the hard key.
    If you press both of them, you will go 2 levels back.

    So simple.

    ReplyDelete
  13. Konstantinos, I'd argue that it is wrong to use back button unless there's a very good reason to do so. I don't think that users are stupid but I also don't think that anything that can cause confusion should be done. I believe that users on Android have used in UIs without them. Now, when a UI has a back button it is out of the ordinary and a normal reaction is to wonder what the difference between the two buttons are. ie. why is there a back button even though no other apps have it?

    To us, developers, functionally it is very easy to explain and understand the two approaches and that they are the same (if implemented right). But we shouldn't force our users to think.

    ReplyDelete
  14. It's the power of iOS, they have true Guidelines and a strict Validation. That contribute to make iOS the reference. And as Android is always the second choise, budget is lower, and a full redesign cost to mutch... Android == Geek users and old J2ME users. That's why iOS is the reference.

    ReplyDelete
  15. "Android == Geek users" - If that statement were true there would be a lot of geeks in the world ;)

    It is true that Android app has been the version that has been implemented second after the iOS version is ready. It is easy to see how it is possible that when decisions are made the differences between the platforms are downplayed when trying to save money.

    Personally, I don't think that the iOS's way of strick guidelines is the only way to go or even the best way to go. My next post will be about "how Android apps should look like" and I'll go more into details why I like this open way of UI innovation and dynamic ecosystem that slowly finds the patterns that stick. Just looking back one year when I first started writing this blog we see how much things have changed. Good patterns have became common and bad ones are getting rare. I believe that this will only continue.

    ReplyDelete
  16. This is a great post. On a side note, seeing the out of place iOS elements is a reminder of how good design can make lesser design look really dated and silly. I'm speaking of iOS in general. I like form to follow function. The shininess and raised appearance of iOS is just so distracting to me. I suppose it always was. I use stock android and whenever I go back I'm stunned that people think it's good. It would be nice if someone made polarized glasses that could cut out the iOS glare.

    ReplyDelete