Best Practices in iPhone UI Design

Best Practices in iPhone UI Design

When you are designing for the iPhone, you should keep in mind several best practices:

  • Remember the touch! Perhaps no tip is more critical in iPhone UI design than double-checking every design decision you make with the reality of touch input. For example, ESPN’s Podcenter, shown in Figure 4-14, uses a UI that roughly simulates the Apple navigation list design. However, notice the rows are thinner, making it harder to touch the correct podcast item, especially if the user is walking or performing another physical activity.

  •  

     

 

 

Figure 4-14: The shorter cells make it easy for fat or shaky fingers to select the wrong choice.

  • Make sure you design your application UI to work equally well in portrait and landscape modes. Some native applications, such as Mail, optimize their UI for portrait mode and ignore changes that users make to orientation. Third-party iPhone Web app developers do not have that same level of control. Therefore, any UI design you create needs to work in both orientation modes.

  • Avoid UI designs that require horizontal scrolling. If your interface design requires users to scroll from side to side within a single display screen, change it. Horizontal scrolling is confusing to users and leaves them feeling disoriented within your application.

  • Keep your design simple. As attractive as the iPhone interface is, perhaps its most endearing quality is its ease of use and simplicity. Your UI design should follow suit. Avoid adding complexity where you do not need to—either in functionality or design (see Figure 4-15).

Figure 4-15: Multicolor list makes for hard reading

  • Use standard iPhone terminology. You know the saying, “When in Rome.” Well, when designing for the iPhone, be sure you do not bring along the UI baggage you are used to in the Windows, Mac, or the Web world. For example, “Preferences” are “Settings” and “OK” should be “Done.”

  • Use UI frameworks, but use them wisely. iPhone Web app frameworks (see Chapter 3 [of the book "Safari and WebKit Development for iPhone OS 3.0" by Richard Wagner (ISBN: 978-0-470-54966-7, Wrox, 2009, Copyright John Wiley & Sons, Inc.)]) are major assets to the iPhone Web app developer community and provide a major head start in developing applications. However, don’t automatically assume that their prebuild designs are the best way to go for your application. You may find another approach is better for your specific needs.

  • Restrict the use of a black button bar. A translucent black button bar should only be used in your application for displaying modes or views, not for commands. Use the other button types for commands.

  • Minimize the rabbit trail. Because iPhone users are primarily concerned with consuming data, you will want to get them to their destination page as soon as possible. Therefore, make sure you are optimally organizing the information in a way that enables users to get to the data they need in just a couple of flicks and taps.

  • Place text entry fields at the top of the page. When your application requires data entry fields, work to place these input fields as near to the top of the page as possible. Top positioning of text entry fields helps minimize the chances of the user losing context when the on-screen keyboard suddenly appears at the bottom of the screen when the user selects the field.

  • Communicate status. Because your application may be running via a 3G or even an EDGE connection, its response may be relatively slow. As a result, be sure to provide status to the user when performing a function that requires server processing. This visual clue helps users feel confident that your application is working as expected and is not in a hung state.

  • Label the title bar appropriately. Make sure each screen/page has its own title. The Back button should always be titled the same as the previous screen.

  • Unselect previously selected items. When a user clicks the Back button in a navigation-list UI, be sure that the previously selected item is unchecked.

  • Break the rules—competently. Although you should generally adhere to the Apple UI design guidelines that I’ve been discussing in this chapter, not every iPhone application UI needs to rigidly conform to a design implemented already by Apple. You may have an application in which a different look-and-feel works best for its target users. However, if you decide to employ a unique design, be sure it complements overall iPhone design, not clashes with it.

This article is excerpted from chapter 4 "Designing a Usable and Navigable UI" of the book "Safari and WebKit Development for iPhone OS 3.0" by Richard Wagner (ISBN: 978-0-470-54966-7, Wrox, 2009, Copyright Wiley Publishing Inc.)

Tags:

Comments

2 responses to “Best Practices in iPhone UI Design”

  1. Anonymous says:

     Hey, don’t forget the humble Moleskine sketchbook as a great tool for sketching ideas down quickly. And if you own an iPhone UI Stencil it fits really well within the gridded sketchbook. Check out my blog post on the subject : http://blog.lyraspace.com/2010/02/12/using-your-moleskine-for-iphone-ui-design/

  2. Sandor tamas says:

    Hello ther I`will se how this tool ar works ??
    If ther ar possebel for at triel proof ???

Leave a Reply to Anonymous Cancel reply

Your email address will not be published. Required fields are marked *