Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Design ›› 10 Surefire Ways to Screw Up Your iPhone App

10 Surefire Ways to Screw Up Your iPhone App

by Jeremy Olson
10 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Avoidable design and usability mistakes that can shatter hopes of success on the App Store.

So you want to build the next smash hit iPhone app? Extraordinary design is key to getting the attention of users and of Apple, so if an app exudes a stench of mediocrity, Apple won’t feature it and app shoppers probably won’t download it (even if they do, they won’t share it with others). The following are ten common iPhone app design and usability mistakes that can shatter hopes of success on the App Store.

1. Information Overload

Cluttered GPA calculator UIClutter is scary. Since most people download apps out of impulse, their commitment level is dangerously low—easy come, easy go. Unless users are already highly motivated to figure out an airplane-cockpit-esque interface, most won’t try; they’ll close the app and move on to the next one.

The GPA interface to the right is actually very easy to use if you take the time to understand what is going on. However, it has an overwhelming number of elements on the screen so users perceive it to be complicated and quickly bail.

Kill clutter:

  • Embrace the constraints of a small screen! Zero in on doing one or two functions in an amazingly focused way.
  • Strip out features that are not absolutely essential to the functioning of the app. Less is more.
  • Break the interface up into logical screens and don’t try to do too much on one screen. Though minimizing the number of taps required for a function is always optimal, sometimes functions are easier to understand if they are split up into multiple screens.
  • Only display UI elements that are essential for a given screen to function.
  • Padding and whitespace are your best friends.

2. Just Read the Manual, Stupid

This app might look overwhelming at first…

Overwhelming GPS UI

But we’re in luck: the developer provided a contextual user manual!

Contextual help for the overwhelming GPS UIOnly one problem: iPhone users don’t read manuals.

Users don’t study an app—they muddle through it. If they can’t understand it after a few minutes or seconds of muddling, they’ll probably give up and move on.

Some apps like Weightbot and Outside use the “tour” technique, providing a brief run down of the app’s functionality for first time users. This can be effective if the tour is short and highly engaging. Still, don’t depend on it; many users will skip the tour and jump right into the app.

Grades app screenshots
Screenshots from my app, Grades.

Instead of a depending on a manual, provide dead simple cues throughout the app that show users what the app does and how to use it. Graphical instructions (left) are best because users tend to avoid reading. If you must use words, written instructions are most effective in context (right) rather than in a manual. Your job is to show the user the next obvious step if it is not already apparent in the UI itself (which is the best-case scenario). Throw some humor or personality into instructions for bonus points.

3. Registration Screens

People’s first interaction with a new web application shouldn’t be an interrogation.
     – Luke Wroblewski

The same goes for iPhone apps. Too many apps force users to jump through hoops—registration or login screens, generally—before providing any value. This is acceptable for apps such as those for Facebook or LinkedIn, which are mainly downloaded by folks who are already using the service, but unless users are extremely motivated to use an app, many won’t care enough to give before they receive.

First consider if the extra data or functionality is really worth the risk of requiring users to register. If it really is worth it, think about ways to provide value to the user before scaring them away with a login screen.

Further reading:

4. Neglecting Mental Models

A mental model is “an explanation of someone’s thought process about how something works in the real world.” (Sorry, Wikipedia’s definition was simpler than Don Norman’s.

Comparison of the two versions of RedLaser
RedLaser version 1, vs. RedLaser version 2.

RedLaser version 1 allowed users to search the Internet for deals by snapping a photo of a barcode on virtually any product. It was a great concept, but didn’t capture users’ imaginations—it didn’t work the way bar code scanners work in the real world. A few simple tweaks changed everything.

The RedLaser team found a way to sense bar codes without having to snap a picture, making it work just like a regular bar code scanner—a familiar mental model. Hold your iPhone up to the code and, beep, you’ve got it. It clicked. It’s not an abstract app that compares prices on products, it’s a barcode scanner, on your phone! That was remarkable enough for users that word-of-mouth alone carried Redlaser version 2 to the top of the charts and kept it there for months. Read the whole story in my interview with the RedLaser guys.

Mental models matter.

Further reading:

5. Breaking Conventions

unconventional app UI designCreativity is important, but designers should know why a rule exists before you break it. Apple took a lot of time to figure out how to build great touch UIs, so you are doing yourself a great disservice to ignore their standards. If an app UI breaks conventions too frequently, it may feel foreign on the iPhone.

To avoid breaking conventions:

  • Use an iPhone or iPod every day. Designing with conventions in mind will eventually come naturally.
  • Read Apple’s Human Interface Guidelines (HIG) and periodically do HIG checkups on your app.
  • Write native code. Code in Cocoa and Objective-C rather than using tools like PhoneGap to code in HTML, CSS, and Javascript. PhoneGap is a great tool for developers to build iPhone apps with web technologies. There’s nothing strictly wrong with using PhoneGap, except that it makes apps that generally don’t feel as snappy as native apps. But the worst convention-breaking apps are usually developed using these kinds of technologies. Apple makes it hard (although not impossible) to break UI conventions when coding with their native technologies, whereas PhoneGap makes it very easy not only to break conventions but also to use standard UI elements in very non-standard ways. In addition, oftentimes tools like PhoneGap make it harder to do things like animate between screens—a convention that native apps get automatically.

Important: this absolutely does not apply to certain genres like games and entertainment, where users expect and crave a completely custom experience.

6. Overdoing It

Apps like ConvertBot, Postage, and Camera+ show how a beautifully crafted, custom UI filled with metaphor and magic can make for incredible user experiences where part of the fun is figuring out how the interface works. They each have a pronounced personality. However, unless you are the next Mark Jardine or Wolfgang Bartlme, proceed with extreme caution.

The problem is, developers envision the UI on the left, but often end up with the one on the right:

In general, know your limits as a designer and try to strike a good balance between convention and branding a unique, enjoyable experience.


My GPA, Gas Cubby, Grades

MyGPA uses the system defaults with little customization, from the controls to the colors. Looks fine—just a bit boring.

Gas Cubby modifies the look of the default controls. It has a unique look with custom colors, textures, and graphics, without overdoing it.

Grades uses a more ambitious drawer/paper metaphor with standard, albeit customized, controls.

Don’t be a drone, be creative. Go the extra mile to make every interaction, transition, and error message fun and unique but also be realistic about your own ability to execute those concepts. A simple design, perfectly executed, trumps a poorly executed custom design.

Further reading:

7. RIP Basic Graphic Design Principles

Why don’t these apps look professional?

Great design has a lot to do with subjective taste, but there are some basic principles that, if followed, ensure an app will look professional. If ignored, disaster ensues.

Contrast: Both of these examples have poor contrast between the background and the content.

Repetition: The last two rows in the lefthand example break the font size pattern, and the righthand example doesn’t have much repetition at all—it lacks patterns in fonts, spacing, colors, and alignments.

Alignment: Left alignment generally looks more professional than centered alignment (lefthand example) or no alignment (righthand example).

Proximity: Very weak spatial groupings (especially in the righthand example).

For easy recall, you can use the, ahem, somewhat inappropriate acronym. You can figure it out yourself.

Aside from the basic principles, Mike Rundle points out that there are other execution-related details like uneven padding, blurry edges, and broken patterns that make a design wrong, objectively.

Further reading:

8. Forgetting to Design for the Mobile Context

Okay, so saying “the mobile context” is a bit misleading. There are a plethora of contexts a mobile app may be used in: at the store, during class, while driving, in the bathroom (you know its true)… the list goes on. Figure out which contexts the app will operate in, and design with them in mind. If the app caters to folks at the wheel, better make sure your controls are obvious and huge or you may end up with scathing reviews posted directly from the ER.

Though contexts vary, there are some general mobile design principles that are often ignored:

  • Design big, bold, and minimal. Folks generally aren’t paying full attention to the interface and are often using it while doing something else. They don’t see the interface, they see a blur. Make the important elements pop.
  • Beef up the font size. Don’t let the simulator deceive you; fonts look much smaller on the actual device. Be careful not to limit testing to retina-display devices like the iPhone 4. Smaller fonts look great on retina displays but absolutely fail on older devices.
  • Do one thing really well and trash the other features. If you’re porting a desktop app or website to mobile, don’t just optimize for mobile; rethink the entire experience.
  • Our fingers are very big and imprecise so make targets big.
  • When designing forms, don’t forget the digital keyboard is going to take up about half the screen when the user taps on the first field.

These mockups have two things in common: they are both beautiful and they both fail when the digital keyboard slides up.

Further reading:

9. Being Lazy

You want to include a feature. You’re running out of time but something is better than nothing so you build it the lazy way, planning to make it better later.

Almost all the advertised functionality in the MyCharlotte (pictured right) app really just links to websites that open up within the app, some of them not even optimized for mobile. The result: a dismal rating on the App Store.

“That info is on a webpage somewhere. Just display it in a webview inside the app!” Or, “Let’s just put all that info in a big .png image and utilize the phone’s pinch-to-zoom interaction to let the user pan and zoom around find what they are looking for!”

Not a good idea.

Don’t sacrifice perfection at the altar of a feature that can probably wait. You may think users will appreciate the extra feature, but consider this: users cannot hate a feature that doesn’t exist but they certainly will complain about a feature that was poorly implemented.

Also, as the RedLaser guys pointed out in my interview with them, it is a lot easier to get publicity for version one of an app than for version two, so don’t use the old “we’ll make it better later” excuse.

10. Not Doing Usability Testing

If you forget everything else, don’t forget this. Even the best designers are often amazed at how things they thought were dead simple completely baffle users. The best part is that usability testing doesn’t have to be expensive or complicated; you can gain tremendous insights from informally testing an app on friends, family, and coworkers.

By showing an early Grades mockup (pictured right) to classmates, it was clear that nobody could figure out what that bottom bar represented. After trying out many variations, we eventually realized that the bottom bar was too much of a distraction from the main interface.

There are lots of great tips for conducting usability tests but one of the most important is to let the users do the talking, and let them figure things out on their own. Interact with them just enough to get them started and to keep them going, but remember that you won’t be there to help them in the real world.

Conclusion

Building a successful iPhone app is no small undertaking, and steering clear of these ten mistakes is just part of the equation. A solid idea and solid marketing are also extremely important. This list comes from obsessive observation of hundreds of iPhone apps as well as first-hand experience of designing and programming apps. It should help you design an app that stands out from the rolling sea of mediocrity in the App Store and becomes loved and shared by myriad happy users around the globe. Though this list covers some of the more important design issues, there are plenty of other important mistakes to avoid. Please discuss, elaborate, and add to the list in the comments.

post authorJeremy Olson

Jeremy Olson, Jeremy has always been right at the intersection of design and software. As a homeschooled kid, he always loved art and was delighted to discover software development as an outlet for his creativity. After ten years of building software, Jeremy landed his first big success at the age of 19 as a Sophomore at UNC Charlotte when he built an iPhone app called Grades. Apple not only featured Grades on the App Store homepage, but awarded the second version the coveted Apple Design Award in 2011 and Grades has since become one of the most popular Education apps on the App Store, being featured in national press such as Fox News and the Huffington Post. Now a senior, Jeremy has transformed his company Tapity into a full time business and his team works with startups and big brands alike to craft delightful apps for iOS.

Tweet
Share
Post
Share
Email
Print

Related Articles

As consumers’ privacy concerns continue to grow, so should our attention to addressing privacy issues as user experience designers.

Article by Robert Stribley
Designing for Privacy in an Increasingly Public World
  • The article delves into the rising importance of addressing privacy concerns in user experience design, offering insights and best practices for designers and emphasizing the role of client cooperation in safeguarding user privacy.
Share:Designing for Privacy in an Increasingly Public World
9 min read

Navigating the Creative Landscape.

Article by Adri Mukund
Unveiling the Influence of Cognitive Biases on Design Decision-Making
  • The article explores the influence of cognitive biases on design decision-making, outlining various types of biases and offering strategies for mitigating their impact to foster inclusivity and objectivity in design processes.
Share:Unveiling the Influence of Cognitive Biases on Design Decision-Making
6 min read
Article by Chris Kernaghan
Do Founders Even Care About Design?
  • The article emphasizes the importance of design in startup success, highlighting the risks of ignoring user feedback and the necessity of effective communication between founders and designers.
Share:Do Founders Even Care About Design?
6 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and