iPhone Apps Design Mistakes: Over-Blown Visuals

Advertisement

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?

“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 Media852. Larger image3.

Paid applications usage over time4
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 Media852. Larger image6.

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

500 million iPhone Apps downloads breakdown10
Hilarious 500 million downloads breakdown11, by Gizmodo. Larger version12 (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

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

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 example13
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 example14

Overdesigned iPhone app example15

Overdesigned iPhone app example16
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

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 example17

Overdesigned iPhone app example18
“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 convention19.

In his paper Intuitive Equals Familiar20 (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?

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 example21

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.

Bloomberg22
Larger version23.

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:

iFitness24
Larger version25.

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 Pages26
Larger version27.

Waste of Time and Money

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 features28. 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…

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?

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

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

↑ Back to top Tweet itShare on Facebook

Alex (@akomarov) is a Russian designer located in Melbourne, Australia. He runs a nimble mobile UX/UI studio, www.komarov.mobi, that helps clients create exciting experiences for innovative mobile products.

Advertising
  1. 1

    Great article, well presented and sooooo right! :)

    0
  2. 102

    Overall great, however I somewhat disagree about the folder tabs vs. UISegmentedController in the Yellow Pages example. This is a case where the iPhone metaphor is the anomaly and is less obvious to users (based on my experiences watching test users interact with my software). Unlike most of the other examples in this article, folder tabs don’t add complexity while reducing information. In fact, I feel they _add_ a dimension of information by being visually connected to the display they are modifying, rather than just being positioned nearby. Apple screwed up in this case; I assume it’s because the folder tab approach does require some careful positioning of graphic elements. But maybe they could have done something similar to scope buttons in UISearchDisplayController?

    0
    • 203

      +1. The UISegmentedControl is intended to filter a single data set, which is inherently different than tabs, which are meant to toggle views.

      For proper use of the segmented control, look at the Recents tab in the Phone app. You can choose “All” calls or filter the results to see the “Missed” ones. But it’s only one set of data: your phone calls.

      Great article though!

      0
  3. 304

    So basically you are saying that you want every app on the store to have apple’s standart look. Because the controls they created are universal and beautiful.
    You will never get sick of all apps looking like your settings list.
    Because people are not looking for new experiences with the iPhone. They want what is easy, quick and common.

    Just like everyone should wear blue jeans and white shirts and get the same haircut, because, think about it, things would me much easier for the hairdresser! He would not have to re-learn how to get a hair done. Cheaper for him AND for his customer!

    You really got to be joking if you call yourself a designer. Fortunately Apple has already done your job for you, mister ;D.

    2
  4. 405

    This article makes some thoughtful points, but three things that bug me about it (and about Smashing in general):

    1) Irresponsible use of visualizations
    What’s with the abundance of introductory charts showing points only tangentially related to the topic at hand? Other than to make the article look well-researched, they don’t help many any sort of useful point. Instead, all they do is imply the existence of a (completely specious) relationship between app usage over time and the way the app’s controls look.

    2) Filler
    I’d like to point out the caption under the “WHOA” sign: “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.” Thanks for telling us what a stop sign is.

    3) Oversimplification – The author has conveniently managed to boil down an entire discipline – interaction design – to simply the efficient allocation of screen real estate, saving clients money, and avoiding the use of eye-candy.

    4) And this is more of a personal pet peeve… stop using and abusing the words “beautiful,” “stunning,” and the like. The aurora borealis is beautiful. A GPS interface is not.

    1
  5. 506

    Wow, very cool article. Well done and written with professionality. Some companies, like this one: http://maxdoro.nl/services/Mobiele%20applicaties.aspx, are really investing a lot in new and more stable applications for iPhones and other Apple products, but I guess there is still a long way to go.

    Greets

    0
  6. 607

    Sorry for my bad English, I’m french :P
    Good article! The relevance of design iphone is important because a design that do not cool it with the phone is iphone iphone will neglect the spirit. I do not defend the iphone because I’m on android but I defend against the design well done and the importance of the concordance of styles.
    If we design iphone, so far as to do a iphone;). So this article is important.
    soon for the design or webdesign iphone and more here. or in my website : http://www.f4-design.fr , in french, :P

    0
  7. 708

    Very Helpful… thanks for sharing these things….:)

    0
  8. 809

    This article is stupid. It’s about over-done apps yet I have yet to have the full article load on my ipad (in safari or skyfire) OR on my MacBook (in safari or firefox). Maybe someone should write this douchebag an article on over-blown web articles.

    OR maybe people who can’t even handle “designing” a fucking simple ass online article shouldn’t cast stones at those who actually are capable of creating functioning iOS applications.

    0
  9. 910

    Good article

    0
  10. 1011

    Great article!

    Currently researching costs associated with application development and also a strong individual/company that could be recommended for construction.

    I appreciate any input.

    0
  11. 1112

    Thanks for this article. ‘has some flaws it complains about, but ok, you made the point clear: Not many programmers understand designing – or law, or machines or politics… They should be quiet and listen to what the experts have to say and learn. That’s how you improve in life.
    What I like on this page is you show screen shots – but not in original iphone/ipod touch size. I find the iphone screens too small and when you show a larger image you don’t see what you would see on a real iPhone screen. – the iphone screen cannot be enlarged! (the 3-finger zoom function is not a lot helpful, I find (It just enhances the unsharpness like a real spyglass).
    Programmers should be forced to program with the eyestraining screen of an iphone (2*3) , then this super tiny texts would less come up – and there would less discussion about it.
    The programmers are often young with still good near-sight and no experience, not even car driving. Often you see “screen in screen screens” making it even smaller.
    The original iPhone apps show it: They all have decent big fonts, no need for super tiny, white on black texts, which the iphone screen not can even handle. There is no need to make things smaller.

    0
  12. 1213

    This is worst design advice.

    This wants to make everything like Soviet Union.

    Uniformity and flatness and un originality are simply boring.

    Wrong path. I hope that all those who compete with my App follow this deranged advice!!!!

    0
    • 1314

      Songleeking, you know nothing about UX or patterns. I suggest reading articles about proper UX design before posting.

      There is nothing wrong with individualizing your app, but it’s another thing to have no idea about real design while building your app. That’s why programmers typically fail (see article) as they program, they aren’t designers. Judging by your response, you are a developer and not a designer.

      this is really no different than the mid-90s when everyone started building webpages. Everyone used animated gifs and repeating backgrounds. It was years later that good design practices came in to being. With iOS, any monkey can make an app and have it published by Apple. It’s a different ballgame if you can actually make something compelling, needed and looks good.

      0
  13. 1415

    You are absolutely right, but have too much faith in people’s intelligence by assuming that they would rate functionality higher than looks when shopping for an application (or anything else, for that matter).

    0
  14. 1516

    Great to see how stupid Apple users are and will download anything just because it’s only 99 cents. It’s really no wonder why developers have so many downloads. It’s not they are putting out good apps. It’s because the price is right in the eyes of the consumer. Any clown will buy a pile of crap for 99 cents if it has an apple logo on it (see appleTV and mac mini ‘server’). yes, I have an ipad2 and use due diligence before buying any app. 99 cents here.. 4.99 app there.. it ultimately adds up. I’d rather use that money to buy some coffee, and not that crappy burnt Starbucks that many Apple fans love, judging by how many snooty people with Mac Books are at Starbucks these days. Great article. I hope the sheep and their developers are listening.

    0
  15. 1617

    I agree that overdesign is bad.
    However, the underlying assumption is that Apple’s current implementation is correct.
    Overlooking the fact that they will change the look of iOS at their whim, and nothing is perfect, I was surprised by your Yellow Pages section where you said the toggle works better than the apps. I heartily disagree.

    “Blue” may mean on, but usually, also, brighter objects are the active objects rather than darker items. So with Apple’s two toggle buttons, it’s actually quite unclear which refers to the content below. Push, pull, but neither actually takes ownership of the content below the buttons. They seem like an unrelated setting.

    With the tabs, (and very similar to tabs in web browsers) the active tab is physically connected to the content, and takes ownership of it through a clear and direct connection. Or, to refer to part of your article: “it is clear that a user interface feature is ‘intuitive’ insofar as it resembles or is identical to something the user has already learned.” The tab feels like a folder and it “holds” the content below it like the contents within a folder.

    Apple may use tabs in a future iOS interface change and then we’ll say “gosh! how intuitive it is.” :) Or they could stay the same. Or, like many aspects of OS-X they could screw up the interface majorly over time- for the sake of over blown visuals.

    0
  16. 1718

    Cool! Let’s make everything look the same…

    0
  17. 1819

    A nice article; What I felt is you are emphasizing on using default controles rather one’s own designs; The point is good that using custom designs, a control lost its self descriptivity;

    0
  18. 1920

    I agree with most of the points except for the Yellow Pages one, which seemed fine to me. The toggle is humongous and ridiculous-looking. I think it’s good to be creative, but for standard components like “Back”, “Search”, etc, just use what’s standard.

    0
  19. 2021

    I wanted to clarify for some other viewers(programmers I am talking to you) that interaction design is different than visual design. The two can often be very separate from each other, like when you make wireframes, you want to stay away from visual elements(even though many times that becomes difficult).

    This article isn’t perfect and I think many commenters definitely complete it in a great and collaborative way, but for the non designers, who do make apps and websites, in my opinion, it is VERY IMPORTANT for you to learn about typography, white space and good user interaction practices. I am a designer and spend much of my time learning how to code, I don’t see why a programmer can’t do with the same with design :)

    0
  20. 2122

    Great article! An informative and fresh insight on mobile design apps. Great use of examples that make this article worth reading until the end part.

    0

↑ Back to top