Ten user experience design guidelines for ipad applications

As with many excellent products, the success of the ipad application depends on the core value of the product as well as the user experience model and many other factors. In addition to games, most types of applications need to be able to help users solve specific problems in a context environment. It should be simple enough to be easy to use, so that users do not need to carry out complex settings and learning can be successfully started. And the performance of the product in visual appearance, interaction way, emotion connection and so on will directly affect the user to the application experience satisfaction.

In this article, we will share some of the guidelines you need to consider and implement in your design work. We don't talk about the complete design process for creating an ipad application, nor do we spend time on small tips in almost any of the details that a mobile application design article will mention. The main purpose of this article is to help you develop a more rational and correct product design decision in the actual ipad application project.

1. Aim at core requirements and simplify product function

Good ipad apps often allow users to perform one or more very specific task goals in the simplest way possible. You need to select and discard functional patterns in the conceptual phase of the product. Try to use a goal-oriented approach to determine the value of the functionality in the product: the direction and conceptual model of your product, and imagine what typical demand-use cases users will be using in order to record any needs and goals you can think of. Next, brainstorm with your team and try to make a comprehensive list of the features that users might use to accomplish the goals of these tasks. Then, in this list of features, a set of the most streamlined set of features that will ensure the goal of achieving requirements is refined. Finally, you can add some features to this minimized feature blueprint that will help improve the product user experience.

Take a look at some examples. Epicurious This recipe is pretty much in place for the core features-no complex interface and operation, and the user can learn the actual operation and enjoy the culinary pleasures. Especially in the horizontal screen state, the left side is a very clear raw material configuration list, and the right side of the main content area is detailed cooking procedures. Users can also easily record where the current cooking process is going through a drag-and-position tag. In addition, comments on the current recipe and technical tips and other related content are integrated into the bottom of the tab view, which is to ensure that the interface is simple and clear, but also allows users to be able to easily see the content when needed.

Whole Foods is also a type of culinary helper, and if users want to try some recipes, it can help users make the ingredients that they need to be a shopping list. Unfortunately, however, this application ignores the problem of having the same ingredients in different recipes, making the resulting shopping list prone to duplication on certain items. We can see in the screenshot below that the banana Mulberry appears three times:

In addition, do not use a button-type visual interaction elements, in many cases, operation control behavior can be done by hand gestures. For example, iOS comes with a memo that does not have a regular edit mode entry, so users can enter the editing state by tapping the interface, and the content is automatically saved without the user performing the relevant action. The original iOS selection, cut, copy, paste, and other editing functions only need simple basic gestures to complete. The cancellation operation is relatively special, it needs to shake the fuselage; remember hold live first.

2. Create more intelligent and personalized product experience

No one likes to spend money to buy back an application must also have complex settings first to work properly. To make the most of the technical capabilities of the ipad and related web-side services, make a more nuanced and accurate understanding and analysis of the characteristics of the user in the context. Consider whether there is any possibility of the user's geographic information, calendar, microblogging feed, Gmail account subscriptions or contacts and other legitimate use, so that your application can provide users with more intelligent, more personalized content and functions.

Zite is a stunning content-reading application that reads the user's content in Google Reader, Twitter, and delicious accounts, analyzes the user's personal preferences, and, on this basis, recommends related articles in other content sources. I'm trying to authorize my delicious account in this app, within five seconds, it completed an analysis of the articles I had collected and generated a completely personalized magazine based on my interests, allowing me to read more new articles of interest to myself. This kind of application is similar to Pandora and other services, the more you use, the more they understand you, the corresponding content output is more personalized. Although many people think that, compared to Zite, Flipboard UI design and related interactive experience is more attractive, but zite still can be intelligent and personalized advantages.

The following figure is the Zite-generated magazine interface:

3. Note the context environment of the application product

Depending on the core requirements of your product, consider which typical scenario environments users will use. The ipad's common use environment includes restaurants, airports, driving paths, or home kitchens, bedrooms, and study rooms. In the process of planning your product's function and experience model, is it necessary to consider the impact of using scenario factors on existing design patterns? For example, there may be a big difference between the needs of a user in the kitchen and the condition used in the bedroom for the use of recipes.

OpenTable mainly provides service for ordering meals. On its web side, the restaurant search results are displayed in a very traditional list of information. and its ipad client application product concept reflects the mobile application context and functional requirements of the high degree of relevance. The user interface in its default view consists primarily of a map and restaurant list, where users can search for their own restaurants near their current location. Compared to the web-side product model, these features in the ipad application are more in line with the actual needs of users when using mobile devices to complete related tasks.

Awesome Note is also a good example. The default classification provided by it is a very accurate reflection of the common environment and demand use cases for people using the ipad.

Groceryiq is a shopping list type of application, it is an important feature is to allow users to follow different stores to summarize and select the goods they need to buy, very consistent with people in the actual shopping needs of the mental model.

4. Consider multi-user and multiple devices

Family members often use the same ipad to accomplish their own needs, and it is common for the whole family to sit together and use the same scenes. Unlike mobile phones or personal computers, the ipad's personal color is relatively weak, it is more like a coffee table magazine, has a strong share. In many types of ipad applications, account management functions are essential, including the most basic account switching, as well as the current login status of the account prompts. For some content-class applications with a multiple-device version, an important role in account management is to keep content synchronized with devices such as the ipad and the iphone.

For example, Flipboard allows multiple users to log on through different accounts and displays the name of the current login account on the home page.

Looking at FedEx's ipad apps, though, the overall style of the interface is very gloomy, but the information on the login account can still be clearly identified.

And ebay's clients are slightly inadequate in this regard, users must click on the top left "my ebay" to browse the current account information.

5. Create a reasonable interactive mode

You can try all kinds of complex and dazzling interactions in games and other entertainment types, but for other types of applications that are often used, try to keep it simple and routine in terms of navigation structure, browsing style, and corresponding visual interaction patterns. While innovation in interactive mode is an important factor in driving a successful application, it must not adversely affect the usability of the product itself in pursuit of a differentiated experience.

Martha Stewart Living Magazine's browsing style is a great way to combine creativity with usability. The x-axis scrolling operation is used to view different article pages, and the scrolling on the y-axis is used for browsing through an article. A brief introduction to the current article page appears above the page queue, and users do not need to enter a single article to understand the approximate content. The scroll bar at the bottom of the queue can clearly reflect the position of the page that the current focus points to in the book. These seemingly simple and straightforward ways of doing things can provide users with a good interactive experience that is simple to use and to perceive.

It is recommended that you experience and experiment with various ipad applications to see how well they interact. In fact, you can find a lot of detail functions that can reflect the idea of interaction design in a number of general application details. For the most typical example, we can see some of the differences in the following screenshots: The difference in how the article is closed (Huffington Post, New York times, Zite)

Many people dock their left thumb near the top left corner of the screen while the ipad is flat, and the zite design makes it easy to do when the current article is closed. In addition, users can click anywhere outside the article container to close the article interface. Such schemes are resilient, and users who are accustomed to using the ipad in other postures can operate effortlessly. The New York Times ipad app allows users to close the article by means of a double finger, and the toolbar at the bottom of the article also contains buttons to return to the homepage, and the toolbar is automatically hidden after a few seconds after the article's interface remains open. The kneading method is more free than the Close button, and does not require the user to operate on an interactive element, but its drawbacks are obvious: users may need to temporarily change the position and posture of their hands to ensure that one hand can perform gestures freely.

In the process of trying and experiencing all kinds of applications, be aware of how you feel in detail, especially those that make you feel good about yourself, or those that make you feel very uncomfortable or even interfere with the operation process. Find applications that are in the same domain as your product, analyze their functionality and experience patterns, and consider how to differentiate themselves in their products. In many ways, the ipad application is still a certain frontier, the application market will continue to emerge a variety of novel dazzling functions and interactive mode; In this case, more need to be pragmatic attitude to plan their products user experience design scheme, to avoid blindly unconventional.

6. Provide home view

People are used to the concept of home page. The home view usually helps users to make an overview of the product's functionality and provides them with a quick access to common operations. Home page can give users a sense of security, so that they explore the function and browsing content without fear in the application software lost direction.

Let's take a look at NASA's visualization Explorer, which does not have a home view, and will be brought directly into the latest content after the user opens it. To view other articles, the user can click on the arrow at the end of the article to see the order, or by clicking on the lower left-hand corner of the icon to bring up the list of articles, in which to choose. The degree of freedom to view through the list of articles is higher than the first, but it is still limited by the size of the container, and each article entry in the list can contain only a small thumbnail and a short article title, where the user cannot directly get an introduction to the article itself.

By contrast, pulse experience is much better. Its homepage view is a content navigation, users can view the latest articles in a list directly from different content sources, and each content entry includes a large thumbnail, article title, and profile (depending on the article itself), and the user can clearly determine which content is of interest to them. In the horizontal screen state, when the user selected an article, the entire homepage navigation interface will move to the left, the full content of the article will be expanded from the right. This is a very consistent interaction experience, and the user does not feel that the index and content are in two unrelated interfaces. While the vertical screen, the navigation structure will be in a single article to the bottom of the interface; Although this approach is similar to NASA's approach, pulse always allows users to view the articles in the queue with a larger and clearer list of article entries.

7. Use pop-up effects cautiously

The ipad, which is designed to help users access the content and navigation structure of the pop-up layer, is pretty good. However, if used poorly, this interaction pattern can also cause a little trouble in the operation process. In the design, be sure to the pop-up layer to do the height and width of the limit, as far as possible to avoid putting too much information in it. Again, we take the awesome note as an example, but this time the angle is relatively negative. As we mentioned earlier, the default folder classification is very much in line with the needs of the user, but the relevant editing of these folders needs to be done in a pop-up layer. The folder is presented in a way that is almost identical to the main interface, but is slightly different in size; for this important set of interactive objects, if repeated in the same visual representation in the same interface, will be largely confusing to the user. And for the visual style of the folder and related editing operations, such a pop-up layer seems a little narrow.

In fact, from the container size and space utilization point of view, we have seen the NASA Post list pop-up layer also has the same problem.

In some cases, opening a new interface alone is more reasonable than a pop-up layer. Unless the relevant actions in the pop-up layer have contextual dependencies that are difficult to block in the current interface, they can be put in a new interface--more space available, more reasonable layout, and easier reading and manipulation.

Of course, it is also a common solution to split the screen vertically and place the navigation structure or related features in the left-hand sidebar.

Houzz:

Martha Stewart Living:

Flipboard:

8. Avoid using unnecessary splash screen

In the traditional web, many websites use flash or other technology to create "splash screen", they are mostly meaningless, and to spend a lot of time to load, users easily lose patience and turn away. For apps running on mobile devices like the ipad, meaningless splash screens can be even more frustrating. If your application needs to load a lot of content at startup, and you decide to show a splash screen during this time so that the user's perception of the wait behavior is reduced, at least don't let it stay too long. It's a good idea to show some of the things that have been loaded in the splash screen, so that users can maintain a relatively coherent interaction even during the wait process.

Zite's performance in this regard is still great, it will display some of the loaded article thumbnails in the splash screen to attract the attention of users, while more other content is still loading.

9. Correct and reasonable use of gesture operation

Cool and practical gesture manipulation is an important way to interact with the ipad, but make sure you use it in the right place at a reasonable density in the product. For example, if the main interaction object in the current interface is a list view of a merry-go-round that needs to be triggered by sweeping gestures, then there should be no more global sweeping gestures for the interface.

If the interactive behavior that is triggered by gestures is difficult to be easily perceived by the user, it is best to give hints in a conspicuous place. Zite is also doing a great job in this area, and in the Content Classification list view, the tips in the lower right corner make it easy for users to understand that the next step is to flip through a flick.

DISCOVR is an application of the genre of musical discovery, which integrates the cues of gesture manipulation directly into the interactive object, the red circle labeled Tap me.

When enough information is obtained, the text in the red circle changes to "Tap and hold Me", prompting the user to complete the next action with a long press. This approach allows users to quickly and directly master key operations without having to leave the current interaction process.

10. Make touch-sensitive interface elements easy to identify and touch

Jakob Nielsen's "read-touch-wrong" issue in the ipad usability report is quite common in ipad apps. This is the third time that Mr. Nielsen has appeared in our article. The previous two issues related to the early prototyping and user testing of the product and the mobile user experience design.

The so-called "reading-touch Wrong", that is, refers to the interface of the text size can be guaranteed clear and easy to read, but for the touch operation still appears too small, the user in many times it is difficult to accurately touch, or do not know where to do touch operation. The screenshot below comes from the ad interface of Martha Stewart Living, where a list of header lists with arrow icons is clickable, but it is hard for users to detect this because the arrows are not a common icon to represent clickable actions, and they are placed on the left. In your design, you must be clickable touch of the interactive elements are clearly marked out, it is best to be eye-catching and beautiful, so that users do not need to find and think about their role.

The picture area above the cool hunting interface is actually a set of picture sets that can be swept, but it's hard to see. In fact, you might want to show a small part of the next picture on the right side to let the user know that this is a set of pictures that can be browsed continuously.

In addition, iOS itself in this area also has to do a bad place, we must be decisive to spit. You know, double click the Home button to pull up multiple taskbar from the bottom of the current interface, but there is also a set of control Panel for music playback on the left side of it, and the switch that locks the screen to rotate is also available by default. It's too covert. There is wood, why not provide some visual hints?

original site to compile the article. If you want to reprint, please specify: This article from the is for Web English original: Http://uxdesign.smashingmagazine.com/2012/01/31/te ... Translator Information: C7210-web design and front-end players, is now working in the Mass Comment Network product Department user Experience Design Group (UED) product design