Usability issues and optimization recommendations for iOS when 4 UI elements

This week is another article from Nielsen Norman Group. For reference, this kind of article behind the thinking mode and even the spirit is the most to learn, the content itself is second; this kind of thing to see more, the practice of representative products in the case of the more experience, you will find that design this kind of thing, in many times, no clear no dark, no is nothing but a specific product, Specific resources, specific contexts, specific user groups, and all of these factors are in front of the need to constantly weigh, strive for or compromise the possibilities. Enter the text below.

Big software companies, such as Apple, Microsoft, Google, and so on, often offer a range of design guidelines for Third-party app designers. The purpose of this is to:

On the one hand, designers and developers can easily get started with products that meet the "basic standards" in terms of quality, without having to rethink and validate new design patterns and UI elements.

On the other hand, if all the products in one platform comply with uniform design rules, users will also benefit from the consistency of interface appearance and interactive mode.

It's almost an iron rule to follow the design guidelines. But in practice, "official standards" may not be very good for all kinds of situations. We are not sure why some elements appear in the design guidelines, perhaps because the official tests are not thorough enough, or that these elements and patterns are the most basic and adaptable solutions for solving a particular type of design problem.

The 4 UI elements mentioned in this article are used by Apple in their own apps, and some of them are in the official design code, and countless designers will follow these instructions. On the other hand, we (Nielsen Norman Group) are truly discovering the usability problems caused by these elements in our usability tests again and again.

Maybe Apple's gods will use Thunder to hack us, but we still recommend that designers think more about using these UI elements, or try to optimize/replace them, because these elements do have a problem with usability testing:

Page number indicator (small dot)

The completion button in the navigation bar

Plus (+) icon

Drag icon

　　1. Page number indicator (small dot)

The iOS page number indicator, in the form of horizontal dots, is used to represent a series of paging views that can be browsed horizontally. The dots that represent the current view are highlighted, while others are dimmed translucent states.

The first screen of the iOS system, the page number indicator is used to indicate the total number of pages and the current location. We often see this example of using the first screen of the system to demonstrate the use of the page number indicator, in fact, the page number indicator can be perfect for the interface environment is not much, and the system is the first screen is one of them, because the user clearly know that their mobile phone contains many apps so that the first screen You need to view more by sliding sideways.

Many apps or Web pages use this element to imply that users can scroll to view other pages of the same sibling, and some use them in specific areas of the interface to hint at more. Admittedly, this form of page number indicator is popular in both app and mobile Web interface design, but it is also one of the most easily overlooked interface elements for users. In a series of usability tests we do, it's often difficult for users to spot dots that are too small in size, and then miss out on content or function portals that can be looked at by sliding sideways. So, we think that the dot form of the page number indicator cannot be used as the only way to navigate key functions and content.

Although iOS allows you to render these dots into other colors, it is very difficult to make such tiny elements visible at a glance in the interface, unless you can ensure that they are placed on a high contrast solid color background. Many products will be placed in the colorful banner map, so that these are difficult to be aware of the elements unknowingly into the background, further reducing the visibility. If you do this, you must ensure that there is always a high contrast between the dot and the background color, preferably with a solid background.

iOS's Zappos, on the first map, the page number indicator is already very weak, and on the right side of the second bottom picture, almost completely disappeared.

Part of the product is more free to play on the basis of iOS, change the dot to square or other shape, the layout is also more casual. Imagine that even if the user has gotten used to the little dot pattern of iOS, now that they have found the small elements in the interface, they will wonder if the squares represent the dots of the past – the discovery does not significantly increase, and it also creates cognitive difficulties. If you want to use the page number indicator, use the dot pattern that the user is already familiar with, and center it under the corresponding content.

Fab in Android draws on the small dots in iOS mode, but puts it on the right side of the content, harder to spot than the center position.

Even if the user notices the page number indicator, there are some potential problems, such as small dots that let users know how many views of the same type of information are present and where they are, but cannot provide any information relevant to the content itself. In addition, the user control of the interaction is very weak, must be in order to browse each, can not jump directly. So, if these experience elements are important in your needs, then small dots may not be your best choice.

Given some usability issues with the DOT page number indicator, we recommend:

First, consider whether your content is appropriate to navigate in a smooth way, or you can do so by using more complex and flexible navigation methods.

For horizontal slide browsing content, try to use the right edge to expose a part of the way to enhance the "more" hint, rather than relying solely on the page number indicator.

　　2. The completion button in the navigation bar

Many of the buttons in iOS that represent the "done" action are often placed on the right side of the navigation bar, including the Submit button for the form interface. Now this pattern has also begun to subtly affect apps on some Android platforms.

Based on our usability tests, the conclusion, not to mention Cross-platform influence, is that we do not recommend the "complete" button here, for the simple reason that the final operation is placed at the top of the interface, against the Top-down flow of information. When users fill out a form or edit content, the interaction behavior usually occurs from top to bottom, and when they are about to finish, they expect to see the end of the action at the end. In most cases, when people cannot find such a feature at the end, they become confused and start looking around.

In the following case (Pinkberry on the left and Nordstorm on the right), the user needs to click the login or push button after filling out the form. Such a layout is what we call the Top-down information flow, the user's full attention to the form and gradually move down, and finally found in the end of the place without any complete operation, the rest is vacant. You know, even on a small screen device such as a mobile phone, it takes a lot of extra attention cost to look around for a UI element, and it's most intuitive to put the completion button directly at the bottom of the content.

And, of course, from another aspect, the pattern that puts the completion button in the navigation bar has its own advantages: because the navigation bar is fixed at the top, the user can click on it at any time while editing the content, and when the content area is longer, the button placed at the top is not obscured by the keyboard. If the user does not have to complete the full content to complete the operation, then you can consider the completion button at the bottom, and will move as the keyboard up and down the corresponding movement. The disadvantage of this approach is that it takes up a certain amount of vertical space, but the advantages are also obvious: that is, intuitive, and at any time to remain visible, at the same time, compared to the top right side of the position, it is easier to single hand click operation.

In view of some usability problems with the completion button in the navigation bar, we recommend that you place the button at the bottom of the content, and if the content is longer, try fixing the button position and not being blocked by the keyboard so that the user can click on it at any time.

　　3. Plus (+) icon

The more apps you see, the more you'll find that in different environments, the plus icon often represents a variety of different functions. When the plus sign is in the navigation bar, the "new" feature is usually represented, if it is placed in a list cell, it is either meant to be added to a group, or to expand the details. Whether in the same app's different interfaces, or between different apps, the same element carries different functional meanings, which is a burden on the user's cognition and memory.

The availability of the plus icon depends to a large extent on its position in the interface. When located in the navigation bar, the plus sign usually conveys the exact meaning of creating a new content that is the same as the main content. However, when the plus sign appears in the main content, many meanings may be confusing to the user.

For example, in one version of Any.do, a plus icon is placed on the right side of the to-do grouping heading. In this environment, you don't know if clicking on the icon will expand all of them or create new items in this group. In a recent release, they put the plus sign in the upper-right corner of the interface, explicitly creating new things.

Whether it's a web or a mobile app, a plus icon in the content of the interface is often used to indicate that the content can be extended to view more information and sometimes used with arrow icons. Using the plus sign to trigger other types of functionality is likely to disrupt the user's accustomed expectations. For example, in the LinkedIn app, depending on the location, the plus icon nested within the ring represents the ability to focus on or join a group. In our usability tests, many users click on the button to see the details, but find themselves looking at the other side of the story, and then feel puzzled.

Depending on the type of product and the behavior of the target user, the plus icon in your app may be best suited to express a particular functional meaning. In any case, try to avoid using it anywhere in the app, because depending on where you are, it's easy for users to interpret it as a different meaning, or to do something that is inconsistent with what they've been accustomed to knowing.

　　Given some usability issues with the plus sign icon, we recommend:

The navigation bar is a relatively secure location, and using the plus button in other locations requires usability testing to ensure that the user understands the functional meaning you want to express correctly.

To completely avoid the potential problems with the plus icon, you might want to avoid using it completely, instead, through the arrows to represent the details of the extension, through simple and clear text buttons to clearly and accurately convey other functional meaning.

　　4. Drag icon

Like many other icons on mobile devices, drag-and-drop icons do not intuitively reflect the meaning behind them. We find that many users do not understand that the icon represents the element that can be dragged and moved, and that the three horizontal lines arranged vertically are also easily mistaken for some sort of menu icon. In fact, this metaphor is a drag-and-drop stripe on an object, as if you put your finger on it to drag the whole object without slipping. Typically, the user needs to press this icon to make the object go into a certain activation state and drag it to the right place.

In usability testing, we found that users are more likely to click on the object itself than to hold down a small, ambiguous icon. An icon is too small for an object such as a list cell, and if the user must drag the entire unit by holding it down, the increase in interactive costs is inevitable. In addition, the user also thinks that a unit whole triggers only one behavior, that is, whether you drag a small icon or a cell itself, you can drag it.

Yahoo! Finace uses the standard iOS drag icon, which allows the user to move the unit into a drag state by using the icon. Although the list unit itself is a larger, more operational, and intuitive object, the user cannot reach the target of triggering the drag by using the cell itself.

In addition, let's stress that the drag icon is really too similar to our familiar Hamburger menu icon:

Objects that are of the same shape or too similar are triggered in a very different event, which can be confusing and disturbing. While the industry is increasingly arguing about burger icons, more and more users are getting used to the "click on the three-line icon to expand the navigation menu" mode. Frustration and confusion arise when they find that behavioral outcomes are inconsistent with what they are accustomed to and expected to do.

Given some usability issues with drag-and-drop icons, we recommend:

At least allow the user to long by the target unit as a whole can also achieve drag-and-drop targets, rather than only limit the interaction area on the drag icon.

On the other hand, for the Hamburger menu icon, you can try a more explicit expression, such as adding three dots to the front of the three line, or the "menu" heading to the icon.

　　Summary

Deviation from the "official", "common" design patterns, always makes people feel uneasy, and with the model of the consistent also can help users reduce learning costs. However, whatever design specifications you decide to follow, we recommend that you pass the necessary usability tests to verify that these patterns really apply to your own products and target users. At the very least, in our own research process, we've seen a lot of users encounter enough usability issues to cause us to think about the 4 common patterns mentioned in this article.