4 iOS Rules to Break

Summary: Page control (dots), Submit at top, and the Plus (+) and Move icons are 4 common iOS patterns that cause usability problems in testing.


Large software organizations (such as Apple, Microsoft, and Google) create design guidelines to help both users and designers.

  • On the one hand, designers and developers can get a head start on creating interfaces that will hopefully be good, without needing to invent (and test) all-new UI elements.
  • On the other hand, users get a consistent look-and-feel across applications running on the same operating system if all designers comply with these guidelines.

Following style guides is almost always recommended. But there are some cases where the “official” design does not work well in practice. Nonetheless, for reasons unknown—maybe the recommendation was a trade-off, it wasn't thoroughly researched, or it seemed to be the best possible a solution to a very difficult design challenge—it still made it in the style guide.

The following are 4 common iOS patterns that Apple has used extensively in its apps and that have been followed by many other designers. Some of them are part of the iOS human-interface guidelines. Time and again, we have seen these designs cause usability problems. The Apple gods may strike us down with lightning, but we recommend against following these patterns because they fail in usability testing:

  1. Page control: dots to indicate pages
  2. Form Submit button at the top
  3. Plus (+) icon
  4. Move icon

1. Page Control: Dots to Indicate Pages

Many iOS users are familiar with the page control. The iOS page control is a line of horizontal dots that represent open views or pages. The currently selected page is represented with an opaque dot and the other pages are represented with translucent dots.

iOS home screen uses dots (page control) to indicate the current view
The iOS home screen uses dots (page control) to indicate the current view and the number of additional views (that is, additional pages of apps pages) available. While this is one of the most recognized and common examples of the dots it’s also one of the few cases where they work tolerably well, because users know that they have multiple screens full of a muddled mix of icons that people swipe through in the attempt to locate a desired application. (The overall UX of locating icons is not ideal, but the page dots are not the problem.)

Some apps and sites use this interface element to indicate that users can swipe through pages of content while others use it in a partial area of the page to show a carousel of content. It’s a popular pattern in both mobile-web and app design, but it is also one commonly overlooked by users. In usability testing, these dots are often too subtle in the interface to clearly indicate to users that there is another view of content available. As such, they should never be used for key functionality, such as navigating between features, or as the sole method for accessing information.

use dots at the bottom of the page and swipe
In the iOS app Stock Market HD Stocks and Shares, the only apparent way to navigate between the Watchlist, Wishlist, Sold and My Holdings views is to notice the dots at the bottom of the page and swipe to discover the additional functionality.

While designers and developers can select what colors to use for the tint of the circles, it is difficult to make a small, subtle, and translucent design element stand out on a page. Many designs use these circles on top of busy images, which causes an already subtle design to further fade into the background. If using the dots, help users notice them by increasing the color contrast between the dots and background, and placing the dots on a solid color background when possible.

zappos dots barely visible
The Zappos iOS app uses dots to indicate multiple views of content in the top half of the page. The dots are barely visible on the background of the shoe in the first image and disappear completely into the background picture of the chair in the second image.

Some sites and apps take liberties even with the existing iOS conventions, using squares or other shapes or moving the dots around the page. Users struggle to locate and use these dots even when they follow the design conventions described by the iOS guidelines. Changing the elements to diverge from these standards makes them that much more difficult to identify and understand. If using the dots, center them and place them directly below the elements they control.

Fab app for Android borrows the iOS-inspired dots
The Fab app for Android borrows the iOS-inspired dots, but places them to the right side of the carousel rather than centering them.

Even if users do notice the dots, an essential usability problem remains. The dots allow only sequential access to content, and provide no indication of what the content is. Whether the dots indicate items in a carousel or stand for separate pages in a deck-of-cards pattern, the same usability concerns apply. In particular, carousels using symbols to represent pages limit users’ control over their experience. Users have no way to know what’s coming next and no way to navigate directly to content of interest.

Instead, we recommend:

  • Consider if content should even be accessed via swiping. It may be better accessed via navigation or text links.
  • Cut off a piece of content (text or image) to visually indicate that users can swipe to reveal more information.
iOS App Store avoids the use of dots and instead uses cut off
The iOS App Store avoids the use of dots and instead uses cut off elements to show users that the navigational carousels are movable.

2. Form Submit Button (or Equivalent) at the Top

On iOS, the Done button is often displayed in a navigation bar at the top of the page. Sometimes the form Submit button (whether called Submit or something else — for instance, Place Order) is also placed at the top of the form. This pattern has started to trickle into Android apps as well.

Add button that submits form is in the top right corner
Calendar for iOS (left): The Add button that submits the form is placed in the top right corner, in the navigation bar. Todoist (a to-do–list app) for Android (right) borrows the iOS pattern and places the Submit button (the checkmark icon) in the top right corner. (Note also that the form fields violate many of our guidelines: the labels are inside the field, and can you guess what GMT-8:00 stands for?)

Even in iOS apps we recommend against following this pattern for the simple reason that it goes against the natural top–bottom workflow on the page. As users fill in the form, they usually do it top to bottom. When they get to the end of it, they expect to find a Submit button right there, next to the last field they have completed. Most of the time, when people don’t find it there, they get confused and start looking around, not knowing what to do.

In the examples below (Pinkberry and Nordstrom), the Sign In and Place Order buttons need to be pressed after the user has filled in the form. Placing these buttons at the top of the screen is against the natural flow of filling in the form: once done with all the fields of the form, users find themselves at the bottom of the page, left with nothing to do next. Even on a small mobile screen, looking for and finding the corresponding Submit button requires unnecessary extra effort that could be saved if that button was placed at the bottom of the page, under the last field, as it is customary on most forms on the desktop.

(The generally accepted design guideline for any GUI — mobile or not — is proximity between actions and objects, not to place the action button as far away as possible from the data it acts upon.)

working area is disconnected from the Submit button
The working area in Pinkberry for iPhone (left) and in Nordstrom for iPhone (right) is disconnected from the Submit buttons (labeled Sign In and Place Order, respectively), which are placed at the top of the screen.

One of the advantages of having the Submit button in the page header is that, because this header is sticky in iOS apps, users can access the button easily at all times—whether they have filled in all the form fields and reached the bottom of the list, or not. (For the Calendar app it may be reasonable to assume that users won’t bother with all fields, but for a login form it’s not.) In any case, if having the button accessible at all times is important for you, consider instead a sticky Submit button at the bottom of the page, like in the Hotel Tonight app. Yes, you will sacrifice some screen real estate, but in return you will gain a better, more usable interaction flow.

The Pay button at the bottom of the page is persistent and accessible at all times
Hotel Tonight: The Pay button at the bottom of the page is persistent and accessible at all times. This allows users to interact with the page as much as necessary while having consistent access to the payment button, which appears in a predictable and logical location.

Instead, we recommend:

Display the form Submit button (or equivalent) under the form fields rather than at the top of the page.

3. Plus (+) Icon

Throughout many mobile apps, the Plus icon is used to represent a variety of functions. When placed within a top navigation bar, it most commonly means “Add,” but when placed within a table or list of items the icon can signify either adding that item to some sort of list or group, or expanding that list item for more detailed information. When multiple interpretations exist, it becomes difficult for users to consistently understand an icon's meaning.

a Plus icon most commonly means to add a new item
When located in the top navigation bar, a Plus icon (top right corner) most commonly means to add a new item, as used in the MyFitnessPal app to allow adding a friend.

The usability of the Plus icon is highly dependent on where it is located within a UI. When found in a common place, such as a navigation bar, the meaning is usually correctly understood as long as adding new items makes sense for the type of content shown on that screen. However, when the Plus icon appears within the main content of an interface, it can have multiple meanings, which creates confusion for users.

For example, a previous version of the app Any.do displayed the Plus icon alongside the label of existing to-do lists. In this context, it is unclear whether tapping the Plus icon would expand the list to view the items it contained, or if it would trigger adding a new to-do item to the corresponding list. The current version of the app has solved this ambiguity by relocating the Plus to the navigation bar: however it is now used to add an entirely new to-do list.

the meaning of the Plus icon was unclear
In a previous version of the Any.do iOS app (left), the meaning of the Plus icon was unclear, as it could be interpreted as either allowing the expansion of the list or adding an item to a specific list. In the current version (right), the Plus icon is part of the top navigation bar, and is now used to add an entirely new to-do list.

Leveraging the Plus icon to trigger actions is particularly harmful when the user misinterprets what will occur. Since the Plus icon is regularly used on the web and in mobile apps to communicate that a list can be expanded—together with the arrow and the caret—users often do not expect that same Plus icon to actually perform some sort of action. In the LinkedIn mobile app, a Plus icon in a circle is used to Follow a company or Join a group depending on where it is located. In usability testing, several users were surprised when they accidentally joined groups they were intending to merely get more information about.

LinkedIn app reuses the same Plus icon throughout the app
The LinkedIn app reuses the same Plus icon throughout the app for a variety of functions. On the main home screen shown above, the Plus icon can be tapped to follow a company (without confirming this is what the user intended). When searching in the app, the Plus icon can also be used to quickly join groups. Thankfully the questionable icon is omitted from the search results for People or Jobs, as that could lead to some interesting consequences.

Avoid adding the Plus icon haphazardly throughout an app, as it can be interpreted in several different ways depending on its exact context within the interface.

Instead, we recommend:

  • While the navigation bar is a fairly safe location, displaying the + icon in other areas in a design must be tested with users to ensure the meaning is correctly understood.
  • The only way to fully avoid the issue is to also avoid the icon, and to use an arrow or caret for expandable lists, and text labels for buttons triggering any action associated with a list item.

4. Move Icon

move icon
Move icon

Like many icons for mobile devices, the move icon does not clearly reveal what it does. By looking at it you probably will not recognize that this icon will move an item in a list. The 3 horizontal lines used for the Move icon may represent a list, or maybe, as one reader pointed out, "ridges prevening the finger from slipping off the item while dragging it." When this icon appears within a row of a list, users are supposed to tap the icon and hold it while dragging the related item to its rightful place in the list. There are a few usability issues with this pattern.

When items are movable in a list, users expect to tap directly on an item (word, button, etc.) and drag it. They don’t expect to need to touch a small, hard-to-decipher icon instead and drag that. The icon is a much smaller and harder to tap target than the item in the list itself is. So it increases the interaction cost and makes users work harder to tap and drag than they should need to. Additionally, in list views, users expect all the elements in a row to be associated with the same action: in other words, they think that dragging the item or the icon should do the same thing.

app displays the shadow text of the item as it moves
YAHOO! Finance uses Apple’s iOS recommendation for moving items in a list. Tap the 3-horizontal-line icon on the right (left) and drag and move the selected item. The app displays the shadow text of the item as it moves (middle) and the change takes effect (right). The list items themselves are a much larger tap target, but tapping and dragging them does not work.

Finally, nearly the exact same icon recommended in the iOS style guide has come to mean something completely different on the mobile web and elsewhere: The “hamburger” icon looks incredibly similar to the move icon.

move and hamburger
On the left is a Move icon, on the right is a hamburger menu.

It can be disconcerting and confusing to people when the same thing, or what is perceived to be the same thing, is used to invoke different commands. If the hamburger menu continues to gain traction, more users will learn that clicking three horizontal lines opens a menu (even if they may still overlook this feature more often than we would like). But this is not how the move icon works. This disagreement hurts users’ ability to recall what the icons do after they have already used them.

Instead, we recommend:

  • Make it possible to tap and drag items in place without needing to click a particular icon to do so.
  • Instead of the hamburger icon alone for a menu, display it with the word Menu to indicate that a menu will open, or use the word Menu alone.

Conclusion

Deviating from well-researched interface patterns is usually not recommended. It is better to follow the probable best practices, knowing that consistency and knowledge transferred from use of other iOS apps will prime users’ expectations. With any guidelines or style guides, doing usability testing can demonstrate or disprove if the guideline works well in your own design. Through watching people use these designs, we have witnessed enough consistent issues to recommend against using these 4 patterns.


Share this article: Twitter | LinkedIn | Google+ | Email