I am an Android developer and enthusiast with over 10 years of Java development experience. I'm big fan of good design an appreciate well though usability design in applications. Juhani is a DZone MVB and is not an employee of DZone and has posted 104 posts at DZone. You can read more from them at their website. View Full User Profile

A Cautionary Example of Bad Design

11.28.2011
| 5677 views |
  • submit to reddit

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 to hars on 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.

 

From http://www.androiduipatterns.com/2011/11/cautionary-example-of-bad-design.html

Published at DZone with permission of Juhani Lehtimaki, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Mr Tegg replied on Mon, 2011/11/28 - 4:12am

Nice article Juhani,

This definitely highlights a growing issue in Mobile development around trying to develop one app for all platforms. I suspect that this Ikea app has been developed using something like PhoneGap and compiled for both platforms or is simply a wrapper for an HTML5 app.

It's my opinion that although it's a pain to develop for multiple platforms, the best apps on a platform use all the platform specific features and functions and time should be spent (where available) on developing platform focused apps.

Sirikant Noori replied on Fri, 2012/03/30 - 12:54pm

 

I designed 2 apps which consisted of android as well as iOS but i was not being asked for the Android design so all of those designs were dealed by developer to conver them into Android. This might explain some things: I often see Android apps that look they were only ever considered for iOS.

Java Exam

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.