to the left to the right

Top 5 iPhone design mistakes


Alex Komarov 
29 June, 2009
By Alex Komarov

iPhone application design nowdays

      

How many applications do you actually use?

"It's only 99 cents, it doesn't matter if it sucks, I'm still gonna try it." -- How many times did you say something like that to yourself while downloading the next promising app? How many screens filled with those apps you do you have on your iPhone? 4? 6? 10? How many of those apps do you actually use?

   

Applications often don't make sense to the customers because of poor interaction design

On average, only 3% of people who have downloaded an app use it after 30 days. Why? Because majority of iPhone apps doesn't make any sense to the users. It's similar to the PC software situation a couple of decades ago. Have we not learned from our mistakes? iPhone applications nowdays are designed by developers who look only at the implementation side of the problem. When the app goes live, beautiful code often fails to address real customers' needs. The result: thousands of useless applications in an AppStore which people download once and then never use.

It shouldn't be that way. Developers should write applications that people would like so much so they would pay $9.99 or even $99.99 for it. There's no programming technique that teaches you how to do that. There's something else, and it's called interaction design.

Many applications share the same design issues which prevent customers from fully enjoying them. Recently I conducted a survey of 100 apps from the AppStore and identified the five most frequent iPhone design and usability mistakes:

  Paid applications usage over time

Paid applications usage over time: % of users returning vs days since first used.
by Pinch Media





500 million iPhone Apps downloads breakdown

Hillarious 500 Million downloads numbers breakdown by Gizmodo

Five most frequent iPhone design mistakes

  1. Disregard for the context — a lack of understanding of how, when, where and why the mobile device is being used.
  2. Confusing the iPhone with a computer. Failure to utilize new iPhone interactions (fingers instead of the mouse, multitouch gestures, turn, tilt and rotate) and technological features such as phone functions, built in GPS and accelerometer.
  3. Confusing navigation. (Flow, layout and taxonomy.)
  4. Failure to understand technology limitations such as slower internet connection, slower processor and a single-threaded OS architecture.
  5. Overblown visuals.
   

#5. Overblown visuals

   

What is overdesign

To better understand what overdesign is, let's look at an example:

   
 
Overdesigned iPhone app example

Motion X GPS Settings
   

This screenshot is inconsistent with other iPhone applications

What do you think is wrong with the first screenshot? Many of you will say: "Well, there's nothing really wrong with it, Alex, it is beautiful." I agree it's pretty slick. But, there's a catch — while beautiful, it is inconsistent with the others: it's different. Let's compare this screen to settings screens of other iPhone applications:

   
Overdesigned iPhone app example

Motion X GPS settings screen, compared to settings screens of other apps

Overdesign is a waste of time and money, and it makes your app less intuitive

Being inconsistent with the others makes your product worse for two reasons:

  1. Going against standard conventions makes your application less intuitive. Over-stylized controls look different and require users to re-learn how they work.
  2. It's a waste of time and money. The resourses you spend making it look different and not necessarily "better" could have been used much more effectively.
   

Going against standard conventions makes your app less intuitive

   

We learn new things faster if they have familiar parts

The more familiar parts your app has, the more intuitive it will be for people who use it. (And vice versa.)

Here's an example from a real world: try to make a stop sign more "beautiful", and someone is going to die:

  If we can recognize familiar parts, we can eventually learn how to use the Whole faster. It's similar to the reading concept: we know the alphabet and meanings of words, and we are able to "decode" new books we haven't ever seen before.
Real world example

Sign B, 2, "STOP", shall be used to notify drivers that, at the intersection where the sign is placed, they shall stop before entering the intersection and give way to vehicles on the road they are approaching.
Article 10 of 2006 road signs convention
  Jeff Raskin wrote:    

Intuitive equals familiar

The impression that the phrase ‘this interface feature is intuitive’ leaves is that the interface works the way the user does, that normal human ‘intuition’ suffices to use it, that neither training nor rational thought is necessary, and that it will feel ‘natural.’

However

... it is clear that a user interface feature is ‘intuitive’ insofar as it resembles or is identical to something the user has already learned. In short, "intuitive" in this context is an almost exact synonym of ‘familiar.’

  Communications of the ACM. 37:9, September 1994, pg. 17 “Intuitive equals familiarby Raskin, J.

Overdesigned apps loose customers

Rigorous re-designing of every user interface element makes your application less intuitive. That triggers more user mistakes and lengthens the learning process. Eventually, you lose customers because of that.

   

What about branding?

   

It's possible: unique-looking yet not overdesigned app

It's possible to find a good balance and still make your app look unique without overdesigning. Here's one example:

   
branded but not overdesigned app
 
Emergency Radio

More examples of overdesign

Bloomberg

Overdesigned Example Back to normal
bloomberg app redesigned bloomberg iPhone app
Overdesigned text input up at the top: you can't even understand that this is a field when you first look at it. (Redesigned by Alex Komarov)
Gentle reverting back to the standard input field makes the main screen purpose much more clear and doesn't hurt application style and branding.
 

 

 

iFitness

 

Overdesigned Example Back to normal
iFitness iPhone app iFitness Redesign
The user is supposed to use this screen enter his weight day by day. You should flip through months and days to find the right date with a horizontal swipe, then you should use this five scrollers to enter your weight digit by digit using. And then you press really shy "record" button which you don't really see for the first time and therefore learn about its existense the hard way: by loosing data that you have entered. (Redesigned by Alex Komarov)
99.9% of the users will enter their today's weight. Redesigned interface has one quarter of the controls. The saved screen real-estate can now be used to present useful information such as weight statistics. Date and time can be recorded automatically and the selection of metric vs imperial measurement systems is moved to a information settings screen as least important.

 

 

Yellow pages

 

Overdesigned Example Back to normal
Yelp Yelp
Although tabs work very well on the web... ...standard toggle control will be more familiar to the iPhone users

Overdesign is also a waste of time and money

   

It's difficult to not to lose something while reinventing the wheel

Apple already did an excellent job creating robust set of standard controls. It's very difficult to not to lose something important while reinventing the wheel.

Back to our example:

Big example
   

1/3 of original lost because of overdesigning


The original toggle element has three features that indicate whether it's state is "on" or "off":

     
 
 
 
 
iPhone_re_styled_switch

After re-styling, one third of the meaning was lost.

     Text  
     Shape  
     Color   
 
Restyled iPhone switch with all missing components

Eventually someone noticed that, added color back in as a new UI element.

 
 
















iPhone OS 3.0 introduced accessibility features. Turned on it's simply inverts all colors. Here's what happens with standard and re-designed control:
  
accessible iPhone switch UI element   accessible example element
Color, shape and text survived after inversion.   Only text is left, 2/3 of original meaning is lost.

Even if you haven't lost anything, you still didn't add much value

Summarizing this example: after re-styling there are twice as much UI elements which take over twice as much real estate.

The funny part is: even if you managed not to make the original control worse, you still didn't add much value and you have lost time and money.

   

What you could have spent that time and money on

   

Address your real customers' goals and needs and you will be rewarded fast

Design is all about solving problems. Sometimes when people don't exactly know what problem they are solving, they wander during the design process, and the final result is overdesigned.

To avoid overdesigning you must have a clear picture of the problem that you are trying to solve.

One of the best ways to obtain this picture is to talk to your users (current and potential). Only when know what your customers' goals and needs are, you can architect an application they will love.

Don't overdesign. Be sure that your house has a solid foundation before you decorate it. You will be rewarded with more loyal customers, and higher download rates surprisingly fast.