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

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.

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