iPhone Apps Design Mistakes: Disregard Of Context

Advertisement

The iPhone will always be part of a much bigger picture. How well you address human and environmental factors will greatly determine the success of your product. All too often, iPhone developers create products in isolation from their customers. In order to create really appealing applications, developers must stop focusing only on the mechanisms of the apps. Zoom out: understand the person using the application, as well as the complex environmental factors surrounding that person.

To better understand the context of these design challenges, we’ll highlight several levels of human and environmental factors.

Also consider our related articles:

Level 1: You Are Here. To Create An App That Customers Love, Zoom Out

Level 1: The app itself.
This is how many developers view their apps. As a developer, you have a vision of what your product should look like and why customers will turn their attention to it. However, if you observe your product so closely, you may put it in the wrong context and design it for the wrong purposes and for the wrong users. This is why you need to zoom out.

My App

Level 2: A person is using this app.
That person has specific goals and challenges. In the section below we’ll start by exploring some of the most prominent — and most ignored — human factors pertaining to the iPhone. We’ll discuss basic physical ergonomics, visual limitations and common design mistakes.

A person using the app

Level 3: That person is using this app in a specific environment.
Step back and you’ll see that the app is a part of a complex social environment. It plays but a relatively small role in communication between people and helping people accomplish bigger goals. This is where the social components comes into play: networking, community, social-driven websites and applications and many other things create the environment — or the context — in which the application will be used.

Crowd

Level 4: The environment is part of a greater culture.
Your ability to address the unique needs of different cultures will affect the success of your product. Ignoring them is too expensive, especially if your app sells worldwide. Here it is important to understand that the environment is a part of global networking. You need to be aware of cultural differences, traditions and metaphors in order to create an application that will not only gain popularity in certain local circles, but will also have a global success.

Globe

Level 2: Understand The Person’s Needs And Limitations

Woman using app

“Measure twice and cut once”: an effective strategy indeed. For you, the iPhone app developer, this means that you have to step back and answer these questions before you start coding:

  • Who will be using your application?
  • What are the capabilities of that person?
  • What are the limitations of that person?

Answering these questions will broaden your perspective and prepare you to address your customer’s needs. A whole Human Factors profession is dedicated to just that.

Basic Physical Ergonomics

Here are a couple of the most important physical-, cognitive- and ergonomic-related truths about the iPhone.

1. Our fingers are not mouse pointers.
Remember this property of our fingertips: their surface area is not equal to one pixel. In many applications, tappable objects are way too small, making the interface frustrating to use. Here’s one example: in iFitness, different muscle groups are indicated with red pins. Tapping a pin brings up the name of that muscle. And if you tap the name, you get a list of exercises that develop that muscle.

iFitness

The pins are twice as small as those used in the Google Maps app. Tapping the pin you want is very hard, because the surface of your fingertip covers an area of three or more pins. You end up tapping repeatedly on the area, enabling random pins, wishing you could sharpen your finger. After more than a few tries, you get lucky and hit the right one.

Pins in iFitness
Which of these pins will be activated when you tap on it?

Here are some ways to solve these ergonomic challenges:

  1. Make buttons and other tappable objects bigger.
  2. If making a button bigger is impossible, then enlarge the clickable area to be bigger then the button itself.
  3. Reduce the number of options on each screen, and make the selection process sequential (e.g. Arm Muscles → Biceps).
  4. Implement multi-touch gestures within the interface. For example, selecting a muscle group in iFitness would be made easier by introducing a two-finger zoom feature.

2. We’re not superheroes, unfortunately.
App designers need to take vision limitations into account. Mobile phones tend to be used in places with worse lighting conditions than computers. Think about those people who will be using your app on a bumpy bus or train or walking down a sunny street. Even if the technology is useful and perfectly executed, people will be reluctant to use the app if they find it hard to see what’s going on. Here are a few examples of potentially useful apps that do not account for vision limitations.

TweetDeck

Tweet Deck

Fish-tycoon

Fish-tycoon

Here are some ways to avoid these mistakes:

  1. Choose only the elements that are absolutely necessary. Make them bigger, and get rid of everything else. If needed, create additional screens with fewer options.
  2. Remember that pixel dimensions on the iPhone are smaller than those on your computer screen. So, screenshots viewed on your computer’s iPhone emulator look larger than they would on the iPhone itself, even though the resolution is the same.

iPhone vs. Simulator
The author holds an iPhone (163 ppi) in front of Apple Cinema’s 30-inch display (~100 ppi). Your iPhone screen layout may look fine on a computer emulator, but don’t be fooled: it will appear much smaller on the iPhone because of its smaller pixel dimensions.

Level 3: Understand The Challenges Specific To The User’s Environment

Crowd

Goals and Environment

Your app will usually play a relatively small role in helping the user achieve a bigger goal. The better you understand what goals people have and what they need to achieve them, the better you can design your app to satisfy those needs. Mobile phones are often used in loud, distracting environments. A simple stroll through town brings plenty of noisy distractions (cars, dogs, mail carriers, etc.). Consider the following examples. Which voice memo app would do a better job?

Apple Voice Memos   iTalk
Apple Voice Memos vs. iTalk

Although Apple Voice Memos looks nice, iTalk addresses the average user’s goals and environment much better. Think about it: why would someone prefer to record a voice memo over writing a note? The audio format has fewer advantages than simple text. You can’t scan, edit or enhance audio files as easily as you can text. In most scenarios, text is a much more convenient format in which to exchange information.

So, why and, more importantly, when would people use voice memos? When they are not able to type. The most common time is probably while driving.

According to the New York Times4‘ summary of the Virginia Tech Transportation Institute5‘s findings, drivers who text have a 23-times greater risk of a collision than drivers who don’t text. Which application would be easier to use in this case? The one with the big shiny mic and the record button that is small and hard to reach (especially for right-handed people)? Or the one with the red record button half the size of the screen? Certainly the latter.

Confirming for the user that the recorder is activated is important, too. Which interface communicates the device’s status more clearly? Where do you tap when you’re done?

Voice Memos Active   iTalk active
Apple Voice Memos vs. iTalk

Based on which design works better overall, iTalk wins. Apple Voice Memo looks great when you’re checking it out on a friend’s phone but performs poorly in a real-world context.

Mobile Phones, Networking and Community

The mobile phone is, without a doubt, a social tool. The greater the number of people involved, the more engaging the experience is. Think about it: if you were the only one with a phone, it wouldn’t be very useful. YouTube, Facebook and Twitter are driven by the understanding that we are social beings — we want to share! Imagine how dramatically designs that foster greater social interaction could change the mobile world.

With the seemingly endless ways to capture and share information, many people feel overwhelmed with information. To help them cope, designers must exploit the iPhone’s platform to make their applications as efficient as possible. Here are some inspiring examples:

Bump

bump

“Bump makes swapping contact information and photos as simple as bumping two phones together. No typing, no searching a list for the right person, no mistakes.” (iTunes Store description)

Mover

Mover App

“Ever wished you could send something to the iPhone right next to you? Do it with style with Mover.”

Loopt

Loopt

“Loopt transforms your mobile phone into a social compass to discover and navigate the world around you. Use Loopt to see who’s around, what to do, and where to go.”

How Loopt works (video):

Level 4: The Environment Is Part Of A Greater Culture.

Globe

Your ability to address the unique needs of different cultures will affect the success of your product. Ignoring them is too expensive, especially if your app sells worldwide. Design should adapt to regional challenges. Jacob Nielsen, a leading usability expert, gives us an illustration of this6:

“In Sweden, the Automatic Teller Machines have very large buttons. I hadn’t noticed this particular design element on previous visits, which have usually been in warmer months. In 1996 I was in Stockholm in February and immediately realized why the ATM buttons are so big: you can press them wearing thick gloves.”

Such insights are gained only by understanding the product in its real-world context. Here is the graphic designer’s point of view:

“… Understanding the object in context moves graphic design from a purely formal arena to a social and political one.”
Steven Heller7 and Karen Pomeroy in “Design Literacy,” Allworth Press, New York, 1997.

More wisdom from Nielsen8:

“A system must match the user’s cultural characteristics. This goes beyond simply avoiding offensive icons; it must accommodate the way business is conducted and the way people communicate in various countries.”

Apple studied American users and addressed their goals. That’s why the iPhone is so popular in US. But it hasn’t succeeded in Japan. The handset is selling so poorly there that they are giving them away for free9.

Conclusion: Excellence Comes From Hard Work

Designing a great app isn’t a simple task. Jacob Nielsen recently asserted that “the mobile user experience is still miserable10.” Extracting user insights from testing is a challenge. People have difficulty telling you what they want; they usually only know it when they see it. But developers don’t have to tackle user research alone. Interaction designers are trained to find relevant user groups, talk to customers and read between the lines. They understand how real-world context affects an application’s design.

It takes a lot of leg work, but your efforts to understand user needs will be rewarded. The forefront of mobile technology is an exciting place to be.

Related posts

Please consider our related articles:

Special thanks to Larissa Itomlenskis.

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
  2. 2 http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/
  3. 3 http://www.smashingmagazine.com/2009/08/11/how-to-create-your-first-iphone-application/
  4. 4 http://www.nytimes.com/2009/07/28/technology/28texting.html?pagewanted=1&_r=1
  5. 5 http://www.vtti.vt.edu/PDF/7-22-09-VTTI-Press_Release_Cell_phones_and_Driver_Distraction.pdf
  6. 6 http://www.useit.com/papers/international_usetest.html
  7. 7 http://www.hellerbooks.com/docs/books2.html
  8. 8 http://www.useit.com/papers/international_usetest.html
  9. 9 http://www.wired.com/gadgetlab/2009/02/why-the-iphone/
  10. 10 http://www.useit.com/alertbox/mobile-usability.html
  11. 11 http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/
  12. 12 http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/
  13. 13 http://www.smashingmagazine.com/2009/08/11/how-to-create-your-first-iphone-application/

↑ Back to topShare on Twitter

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

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Good to know these stuff

  2. 2

    I love reading this kind of stuff, more please! And what about an article about how to optimize websites for iPhone and mobile devices?

  3. 5

    Interesting stuff..

    Thanks Guys :)

  4. 6

    Excellent article. So often the context of web- and mobile applications is overlooked and this article clearly explains why it must not.

    Love articles that makes me think before designing :)

  5. 7

    Great points!

  6. 8

    Well done! Honestly I thought I was the only person who had these issues.I wonder if anyone will listen?

  7. 9

    too bad these so-called “aps” are really just stupid games. The iphone has become nothing more than a gameboy on steroids. If i wanted a kids toy i would have purchased a gen1 sidekick.

    I’m actually listing mine for sale on craigslist at the moment.

  8. 10

    This is a great piece of advice. The biggest issue most mobile sites have is the same – context. There’s generally no reason to make your site just ‘viewable’ on a mobile device. Most people, when mobile, come to your site for a specific piece of content – make sure you know what those are and give it to them.

    Good article!

  9. 11

    It would be nice is “mover” worked, but I have yet to have it do anything. Bump on the other hand is a great app

  10. 12

    all this blah blah blah about iphone apps. Now let’s hear some about them Android apps. =)
    U know, you can have multiple apps open at once in Android, I think thats called multitasking. Wonder if apple knows what that is ;P hehehehe

  11. 13

    This is a great look at the anthropology behind application design! Thanks for putting it in a human perspective.

  12. 14

    great article especially when so many devs are making apps nowadays…which creates a huge amount of job opportunities for designers who are used to designing web stuff for large screens, but havent had a ton of experience with mobile interfaces.

  13. 15

    I realise that many designers are drawn to Apple wares, but there’s no need to give undeserved promotion of the iPhone when discussing optimization of web pages for mobile browsers and designing phone apps (particularly in this article, where the points raised could be equally applied to Android and Symbian app design considerations).

    This is the same as when bad journalism leads to mentions of “iPod” instead of “MP3 player” or “audio player” in newspaper copy.

  14. 16

    I think the Apple Voice Memos vs. iTalk was a poor comparison. You sole argument for iTalk being a better app seems to be an oversize button among other poorly placed and constantly moving controls.

    I Agree that an easy to access interface can be a more pleasing option. iTalk’s interface changes depending on what you are doing. You said that you would use this app when you “are not able to type. The most common time is probably while driving.” People would not want to use an interface that changes in that type of situation.

    With Apple Voice Memos the buttons stay in the same area but change functions during use, making it easier to navigate. For example, the record button becomes the pause button when recording while the “view list” button becomes the stop button. You only have two buttons to work with to control the whole app and can go in and rename/organize your recordings later.

    This is just my opinion from constantly using Apple Voice Memos while driving to and from work. Easy to use, simple and effective interface.

    • 17

      Thanks for this comment, I agree with you that iTalk needs some work.
      Here a reason why I think that Apple Voice Memos does worse job fulfilling the main goal of the user:
      Unlike iTalk, Apple voice memos UI is modal (buttons stay in the same place but change functions during use), and because of its modality, it leads to modal errors.
      More info about modal and modeless interfaces here: http://en.wikipedia.org/wiki/Mode_(computer_interface)

      To be perfectly honest, iTalk UI is somewhat modal too though: button changes but still stays in the same place. So I guess you right, it is not an example of a perfectly designed app, but the point is that there’s less modality and it better accounts for ergonomics, thus it is easier to use and causes less user errors.

      I think the best UI for a voice recorder would be the one with two big Record and Stop buttons. Or maybe even without any buttons, just voice activated: when you start talking it starts recording, easy enough!

  15. 18

    what’s up with the womans arm???

  16. 19

    @ Sam November 16th, 2009 6:10 am
    Errr, maybe this was an article about iPhone App Design Mistakes, not Design Mistakes for Android and PalmPre etc?

    Good article, it’s helping me (along with Getting Real by 37signals – every single developer should read it) develop my first app.

    Timbo

  17. 21

    The important thing to remember is that design and usability are 2 different disciplines. A lot of designers think they’re usability experts, but they’re not. If you want to give your app the best possible chance of succeeding, consult with a real usability expert and you’ll get far better results.

  18. 22

    Hi there,
    is always nice to read good articles.Regarding the way an app is made, most developers, the real ones, are not the only ones who know “how to”.
    I think an important part developers teams are the users, they can develop a thousand ways to use an app an help that app grow. The human behavior is, or it should be sometimes unexpected.
    There are few guides we can throw out and some will follow, but a new approach and a new idea are the future of apps developing.
    Having usability on first place will not get us always on the wave of creation process.
    Sometimes, some of the general rules are a handicap!
    Got to go…
    Have a great day and good luck !

    • 23

      Very true, sometimes if users are the part of dev team, it’s hard to interpret users feedback, because usually they can feel that there’s something wrong with the product or idea, but they can’t put their finger on it.
      That’s why there is a need of for a designer who can act like an “interpreter” between devs and their potential customers.

  19. 24

    @ Tim M November 16th, 2009 5:48 pm
    You’re missing my point—this article, and indeed many other iPhone-based ones on Smashing Magazine, gives great advice that is equally applicable to other mobile platforms. As both a developer of mobile applications for many platforms (iPhone, Android, Symbian, BlackBerry) and a web designer who has recently been required to work on touch interface accessibility, I know that the insight given in most of the iPhone articles at Smashing Magazine could reach a much broader audience if they were more generally about development for mobile devices and didn’t pay lip service exclusively to one product.

    Elsewhere at Smashing Magazine, web design user experience articles don’t just cater to those designing on a Mac (or, for that matter, only end-users running Safari), so why should this be any different for mobile development, where the design ideals are similarly not determined by the platform? The iPhone isn’t some special case; other smartphones have touchscreens, cameras, an accelerometer. multimedia storage, a built-in web browser and GPS functionality, and these phones all share the same common problems of users who, understandably, want to use their phones’ applications while they’re walking, in dim environmental light, or at times when constant screen visibility should not be necessary for usability (e.g. dictating using iTalk while driving). As this article points out, these should all be considered while designing a mobile application. In short, ALL mobile development needs careful consideration to make good apps, regardless of the platform. Even if the iPhone apps shown here were kept as examples, the use of more universal words like “smartphone” and “handset” in place of “iPhone” would give these mobile design articles more appeal to developers on other platforms. As previously noted, Apple already get more attention than they deserve.

    • 25

      Couldn’t agree more with you!
      I was trying to speak about mobile design in general in this article, but since the iPhone is sort of a “hot” thing right now, I decided to use only iPhone examples.

      Will write more about mobile design in general in my future articles, I promise!

  20. 26

    What a great overview of mobile application design. Many people overlook how many challenges a designer must overcome to provide a decent, easy to use product.

  21. 27

    I’m not sure that this is the best article that SM has ever churned out.

    The points were great, especially the first one, but I’d have liked to see even more points, criticising more apps. I felt like SM were afraid to criticise app developers too harshly.

    For example I didn’t understand what was wrong with tweetdeck’s design at all.

  22. 28

    to be fair, the tweetdeck screenshot is only the overview when you switch between “tabs” – much like in MobileSafari. I always liked that the font even readable in this view, but anyhow you just tap on it and it goes full screen.

    • 29

      Good point, I know about that feature, but it came with one of relatively recent updates, so when I was writing the article (in August) the app didn’t go full screen which was extremely unpleasant. =)

  23. 30

    The claim that the iPhone hasn’t succeeded in Japan is simply wrong; beyond the corrections posted in the linked article, the Japanese technical press continues to review it favorably, and Softbank’s released information indicates very solid appeal. Its performance there can only be considered sub-par if we set par by its meteoric rise in the US.

  24. 31

    Thanks for this great article. Some of the tips/ cases were presented nicely.

↑ Back to top