Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

iPhone Apps Design Mistakes: Over-Blown Visuals

The development of iPhone applications has recently become a hot topic in the design community; everybody tries to come up with some creative idea, port it into a stylish iPhone-alike application and sell it to thousands of users through the iPhone app store. However, many of these applications are poorly designed and therefore miss the chance of providing users with a truly useful product that users would find worth recommending to friends and colleagues.

We want to take a closer look at the design of iPhone applications and showcase some good and bad examples, best practices as well as useful ideas and recommendations for your next iPhone app design. This article is a first post of a new series related to the design of iPhone applications. Please let us know if you are interested in the follow-ups to this article in the poll and in the comments below. How should it look like? What should we improve? Please also feel free to suggest more iPhone app design mistakes in the comments to this post!

Are iPhone apps really not good enough? Link

“It’s only 99 cents. Who cares if it sucks? I’m still trying it.” How many times have you said something like that to yourself before downloading the next promising iPhone app? How many screen-fulls of those apps do you have on your iPhone? 4? 6? 10? And how many of them do you actually use?

On average, only 3% of people who have downloaded an app use it after 30 days. Why? Because the majority of iPhone apps don’t make any sense to users. The situation is similar to that of PC software a couple of decades ago. Have we not learned from our mistakes?

iPhone applications nowadays are designed by developers who seem to care only about their app’s implementation. When an app goes live, its beautiful code or visual design often fail to address real customers’ needs. The result: thousands of useless applications in the App Store that people download and use once and then never again. These applications often don’t make sense to customers because of a poor interaction design.

Free applications usage over time1
Free applications usage over time: Percentage of users returning versus number of days since first used. On second day, 20% returning users; on the 30th day, only 3%. By Pinch Media. Larger image2.

Paid applications usage over time3
Paid applications usage over time: Percentage of users returning versus number of days since first used. It’s not really different from the graph above. Paid applications generally retain their users longer than free applications, although the drop-off is still pretty steep. By Pinch Media. Larger image4.

Applications usage over time5
Users stop using the average applications pretty quickly. Long-term audiences are generally 1% of total downloads. By Pinch Media. Larger image6.

500 million iPhone Apps downloads breakdown7
Hilarious 500 million downloads breakdown8, by Gizmodo. Larger version9 (Copyright: Gizmodo)

It shouldn’t be this way. Developers should be writing applications that people love so much that they would pay $9.99 or even $99.99 for each of them. There’s no programming technique that teaches you how to do this. But there is something else, and it’s called interactive design.

Five Most Frequent iPhone Design Mistakes Link

Many applications share the same design problems that prevent customers from fully enjoying them. Recently, I conducted a review of 100 apps from the App Store and identified the five most frequent iPhone design and usability mistakes, which are:

  1. Over-blown visuals.
  2. Neglecting technological limitations, such as slow Internet connection, slow processors and single-threaded OS architectures.
  3. Confusing navigation (flow, layout and taxonomy).
  4. Confusing the iPhone with a computer. Neglecting to use new iPhone interactions (fingers instead of the mouse; multi-touch gestures; turn, tilt and rotate) and technological features such as phone functions, built-in GPS and accelerometer.
  5. Disregard of context. A lack of understanding of how, when, where and why the mobile device is being used.

Let’s start with the first one in this article and proceed with the next ones in the follow-ups to this article.

Mistake #1. Over-Blown Visuals Link

Probably the oldest, yet extremely popular design problem is overdesign. Designers of iPhone applications often tend to disregard common design and usability conventions by offering users slick and shiny user interface designs that go way beyond their standard look and also way beyond their claimed functionality.

Why make things look, feel and work complicated and why do designers like to re-invent the wheel? The answer is simple: they want the application to be different; look different and stand out from the crowd. Unfortunately, a different look isn’t necessarily helpful for application’s usability and functionality.

So how does an over-design in iPhone applications look like? To better understand it, let’s look at an example:

Overdesigned iPhone app example10
Motion X GPS settings.

What do you think is wrong with the design in this first screenshot? Some of you may say, “Well, nothing is really wrong with it. It’s beautiful.” I agree, it’s pretty slick. But, there’s a catch: while beautiful, it is also inconsistent with other apps. It’s different. Let’s compare this screen to the settings screens of other iPhone applications:

Overdesigned iPhone app example11

Overdesigned iPhone app example12

Overdesigned iPhone app example13
Motion X GPS settings screen, compared to the settings screens of other apps. (Click to enlarge.)

Noticed the difference? Being inconsistent with other products makes yours worse for two reasons:

  1. Going against convention makes your application less intuitive. Over-styled controls look different and require users to re-learn how they work.
  2. It’s a waste of time and money. The resources you have spent to make your app look different, but not necessarily better, could have been used much more effectively.

Breaking Convention Makes Your App Less Intuitive Link

The more familiar the parts of your app are, the more intuitive the app will be for whoever uses it. If we recognize the parts, we will be able to learn how to use the whole faster. It’s like reading: knowing the alphabet and meanings of words allows us to “decode” books we haven’t seen before.

Here’s an example from the real world. Try to make the stop sign more “beautiful” and people will inevitably start dying:

Overdesigned iPhone app example14

Overdesigned iPhone app example15
“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 convention16.

In his paper Intuitive Equals Familiar17 (Communications of the ACM. 37:9, September 1994, page 17), Jeff Raskin, an American human-computer interface expert best known for starting the Macintosh project for Apple Computer in the late 1970s, writes:

“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.’”

Drastically re-designing every user interface element will make your application less intuitive, which will lead to more user mistakes and a longer learning curve. Eventually, you will lose customers because of it.

What About Branding? Link

Is there place for branding in applications that are strictly following general design guidelines and usability conventions? Definitely! It is possible to strike a balance between having a unique look but not over-designing. Here’s one example:

Overdesigned iPhone app example18

Let’s take a look at an example of overdesigning by Bloomberg. Here, we have an over-designed text input field at the top. You can barely recognize this as a field when you first look at it. The version on the right hand side is much better. A standard input field makes the screen’s purpose much clearer, while remaining consistent with the application’s style and branding.

Bloomberg19
Larger version20.

Here is another example by iFitness. Users are supposed to enter their weight day by day on this screen. But you have to flip through the months and days with a horizontal swipe to find the right one, and then you have to enter your weight digit by digit using five separate scroll fields. And then you have to press the very modest “Record” button, which you miss at first anyway and only find the hard way: after you have lost data. Much better:

iFitness21
Larger version22.

99.9% of users will want to enter today’s weight. This redesigned interface has one-quarter of the controls. The screen space that has been saved can now be used to present useful information, such as weight statistics. Date and time can be recorded automatically, and the selection of the metric or imperial system of measurement, which is not terribly important, has been demoted to a settings screen.

The Yellow Pages app uses tabs, which work well on the Web, but standard toggle controls are more familiar to iPhone users.

Yellow Pages23
Larger version24.

Waste of Time and Money Link

Apple has already done an excellent job of creating standardized controls. Losing some of that functionality is almost guaranteed if you try to reinvent the wheel.

Back to our earlier example:

If we take a closer look, we’ll see that one-third of the screen space we would have had is now lost because of over-designing.

iPhone OS 3.0 introduced accessibility features. One of the modes is White on Black. Here’s what happens to our controls after inverting colors:

In the original control, color, shape and text survived color inversion. However in re-designed one, 2/3 of original meaning is lost. Now there is only text.

In sum, this redesign has given us twice as many UI elements, taking up twice as much real estate. The catch is, even if you haven’t made the controls worse, you still haven’t added much value and you have lost time and money in the process.

That Time and Money Could Have Been Spent On… Link

Design is all about solving problems. Sometimes, when people don’t know exactly what problem they are solving, they wander in the design process, and the result is over-designed. To avoid that, you must have a clear picture of the problem you need to solve.

One of the best ways to get that picture is to talk to your users (both current and potential). Only when you know your customers’ needs will you be able to build an application they’ll love.

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

(Hopefully) coming soon: #2 iPhone’s Technological Limitations. What Apple hasn’t told you.

Would you like to read a follow-up to this article? Link

Please let us know if you are interested in the follow-ups for this article in this poll and in the comments below. Did you like this post? What would you like to change? What should we improve? Please also feel free to suggest more iPhone app design mistakes in the comments to this post!

<br /> <a href=”http://answers.polldaddy.com/poll/1801174/” mce_href=”http://answers.polldaddy.com/poll/1801174/”>Would you like to read the follow-up to this article?</a><span style=”font-size:9px;” mce_style=”font-size:9px;”>(<a href=”http://www.polldaddy.com” mce_href=”http://www.polldaddy.com”>surveys</a>)</span><br />

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/free-full.jpg
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/free-full.jpg
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/paid-full.jpg
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/paid-full.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/by-category-full.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/by-category-full.jpg
  7. 7 http://gizmodo.com/5133070/iphone-app-store-hits-500-million-downloads-we-break-down-the-numbers
  8. 8 http://gizmodo.com/5133070/iphone-app-store-hits-500-million-downloads-we-break-down-the-numbers
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/chart.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/overdesigned.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/big-full.jpg
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/big-full.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/big-full.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/error-full.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/error-full.jpg
  16. 16 http://www.unece.org/trans/conventn/Conv_road_signs_2006v_EN.pdf
  17. 17 http://www.asktog.com/papers/raskinintuit.html
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/branding.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/ex1.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/ex1.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/ex2.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/ex2.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/ex3.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/images/iphone-design-mistakes-overdesign/ex3.jpg
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Alex is a mobile Product and UX Designer. He is a co-founder at Minimum — a nimble app design and development studio, and a product designer at Chat Center.

Follow @akomarov on Twitter.

  1. 1

    Over-designed is a description that sits uneasily with me. It reminds me of those that described Mozart’s music as having “too many notes”.

    It’s inconsistent with other iPhone app designs… different. Oh no! We can’t have that! If we’re talking familiarity with interface elements, it’s a couple of years of iPhone apps versus, in this case, what.. 70 years of plastic push-buttons and toggle switches? Looking at this app in more detail, it seems to want to mimic to feel of rugged piece of outdoor equipment, all buttons and dials. It’s a stylistic choice. It’s self-consistent throughout and consistent with it’s theme.

    ‘Rochelle Dancel’ above said: “it is an absolute waste of time and money if you create something very beautiful that no one can use (in this case, anyway!).” Really? No one can use this? It looks fairly simple to me. I can wrap my brain around something that isn’t default grey and blue, and so can most people – most real people, ie. non-ux designers and the ux designers who happen to apply common sense to the seemingly increasingly indoctrinated belief in the idiocy of all end users. Too often, different is automatically wrong and dangerously so, not just… different. Dismissing this bad example of the point, ie. an interface that is, despite it’s evil differentness, actually pretty simple and visually intuitive, without thought of it’s own design context is narrowminded.

    Forget the word over-designed. How about dogma. How about another word: homogeneity. And another: over-simplification. And a phrase: lacking imagination. One last word: boring.

    1
  2. 2

    Wow, very nice article as usual. Have not seen this type of article yet. Maybe this will help with all of the over designed iPhone apps.

    0
  3. 3

    Great tips, thank you!

    0
  4. 4

    Rochelle Dancel

    July 21, 2009 2:38 pm

    Nice article!

    Completely agree – it is an absolute waste of time and money if you create something very beautiful that no one can use (in this case, anyway!).

    I wonder if the same thing will happen when more are aps are made available for the Blackberry.

    0
  5. 5

    Yes, only 3% uses Motion X GPS after 30 days because of its visuals, not because it’s marginally useful to begin with.

    I kind of see where the article is coming from, but I don’t see alot of it really applicable to success in this marketspace – Motion X will do as badly with a simpler design, and the Yellow Pages will do just as well with tabs instead of making it look like a native app.

    E.g. content, content, content. Most apps probably only have 3% original users after 30 days because they weren’t much to use to begin with.

    I’d blame the general quality of apps and ideas before I’d delve further. I’d even go as far as to say that the app store and its monetary promises brings the worst out of many developers.

    0
  6. 6

    This is great!
    What should we do about games then? Where it’s either harder to use standard controls because of using OpenGL or where it’s all about fun and standard controls aren’t that fun-)

    And also: the purpose of most of the apps is to make people buy them, not necessarily stay with them for long. So screenshots have to be prettyfied as much as possible.

    I know it’s not right, but this is where reality goes.

    0
  7. 8

    Benjamin A. Wendelboe

    July 21, 2009 2:54 pm

    Great points, and I couldn’t agree more!

    0
  8. 9

    Carlos Marin

    July 21, 2009 3:08 pm

    Excellent article: so true about standard controls.

    The “Whoa” road sign made me laugh.

    0
  9. 10

    Nice article. Highlights the importance of usability in control design.. something that’s often overlooked in the web design world.

    0
  10. 11

    reading on iphone and dont see images

    0
  11. 12

    From my experience I can say that there’re many iPhone devs out there right now (me including), who wish some help from designers. Because only few devs can design. What a great world it would be if we could work hand in hand. What a great apps would come out… :-)

    0
  12. 13

    George Egonut

    July 21, 2009 3:25 pm

    Great article, and I’m looking forward to reading more in this new series. Also, can we get a series devoted to webOS dev, or perhaps mobile app dev in general? There’s certainly a separate but related set of issues that must be taken into account for all movile development, and I think we’re going to see a huge rush of developers making apps for the Palm Pre, since webOS uses HTML, CSS, and Javascript.

    0
  13. 14

    Excellent! Thank you.

    Hopefully developers will read and understand…

    0
  14. 15

    excellent as always, i really enjoy this original post
    no more collections, this are origian and useful posts

    thanks

    0
  15. 16

    Alexander, nice article, but the figures at the beginning do not show anything about the quality of the apps in my opinion. They show what the iPhone really is: A pure fun device that has nothing to offer for creative people like designers, coders, writers of love poems, makers of music etc. what they couldn’t do much better with a piece of paper. Besides the phone and the music function nothing will be used longer than a short period of time, even if a apps were wonderful.

    0
    • 17
    • 18

      I have some apps I use a lot since years: So there is serious usage possible, – if they are well designed, readable, with scalable text, and not otherwise annoying.
      But these are just an extra on a fun device for kids.
      “If kids can do it, I can do it” – hopefully better.

      0
  16. 19

    I know it is convention but I find those on/off switches very confusing.

    The switch is a bit grayed out and reads “off” so does that mean toggling the switch turns it off or its off right now. (I know the answer – the switch off. The text is representing current state and not future functionality – just like all the other standard ui elements.) Maybe its just me but I always have to think about it for a sec.

    0
  17. 20

    Ian Storm Taylor

    July 21, 2009 4:23 pm

    I uninstall apps or move apps to the very back screen when they have ugly icons. People need to put a little effort into matching the style setup by all of the other icons on the iPhone. It’s like having a different icon style for every folder and document type on your computer… its annoying!

    Even if an app has nice functionality, it won’t go on my home screen is it doesn’t have a nicely matching icon. And I keep a different version of the RSS reader than they one I use on my home screen because it looks so sexy.

    0
  18. 21

    Ian that’s pretty much the only reason I jailbreak my phone, ability to customize the look and feel of the phone to make things more consistent. The Matte UI theme gives you quite a standard look, and has over 2000 icons available for it.

    0
  19. 22

    Dusan Vlahovic

    July 21, 2009 5:16 pm

    Good article, looking forward for the next ones!

    0
  20. 23

    Jason Swartz

    July 21, 2009 5:32 pm

    Excellent review with really helpful visuals, I can’t wait to send this out.

    0

↑ Back to top