IPad user experience guidelines

Source: Internet
Author: User

The iPad user experience is mainly embodied in content and Interaction:

· Dilute the program UI so that users can pay attention to the required content.

· Beautiful content and realistic content.

· Fully utilize the performance of devices to enhance the interaction of content.

Support all orientations

One of the important factors in an excellent iPad program is that it can run in all directions. A large vertical screen can meet the needs of users to browse the content (when the portrait screen is relatively small, the user will rotate the screen to a horizontal screen, so that a line can display more text ). Users do not pay much attention to the minimum device structure (minimaldevice frame; when using the iPhone, when the user holds the mobile phone with one hand, the screen is mostly vertical; while using the iPad with both hands, the Display orientation of the screen is not determined) or the location of the Home button. They do not think the device has the default location. This causes the user to expect the program to run in the current position. Therefore, the program should meet the operational requirements of iPad in all directions as much as possible.

Ensure that the primary content is the focus. When the orientation of the iPad is rotated, the user will feel out of control over the program if the key content is changed.

How to display auxiliary information or functions during rotation. Although the previous one can be ensured, you must consider how to display secondary information. For example, in the mailbox function, emails are sent when the primary content is sent, and the secondary content is the list of contacts and inbox.

The secondary content of the horizontal screen is displayed in the left-side view.

Secondary content of the portrait screen is displayed in the bubble box

Another example is horizontal screen. A game is displayed in a rectangle. When it is rotated to the portrait screen, you need to adjust the display area on the screen. The display space is increased either above or below the display border, used to display auxiliary information, rather than vertically stretching the display area to fill the screen.

Avoid excessive layout changes or unexpected changes. When similar UI layout is displayed in all orientations, retain the original format of information and text as much as possible. In particular, when reading text, it is important to prevent users from finding the desired location after rotation. If you have to re-layout the page, you can use animations to help you understand the changes on the current page. For example, to add or remove a text box when rotating, you can choose to hide the action and simply fade out in the new layout. To help properly design the rotation actions, consider how to interact with them in real life.

Do not use the UI element or define a rotation gesture to complete the rotation action. It should be that the content rotates with the iPad.

Provide a starting image for each display position. For example, images of 1004X768 and 748x1024 are provided to meet the display requirements of two orientations.

Consider whether the program can run in all directions. Some programs can only be displayed on a horizontal or vertical screen. At this time:

· The display program is displayed normally regardless of the orientation of the current iPad. Do not use the UI element to notify the user to rotate the device. Supports 180 degrees of rotation.

· The input rotation can be specially processed. Some games use the rotating device as an operation method. In this case, the Display orientation of the game is not changed when the screen is switched horizontally or vertically.

Enhance interaction

The best iPad app provides a new way of interaction when users perform specific tasks. Do not add functions that are not directly associated with main tasks to fill up the entire screen, but improve the user experience of the program.

For example, if the reading program allows users to retain the path during reading, it will improve the reading experience. instead of jumping to another page, it will use a bubble box to change the path. The program allows users to add bookmarks and comments in the text to help users exchange bibliography or compare reading progress.

Flattening Information

The iPad's large screen and new UI elements can display more information. When used properly, you can avoid too many jumps when searching for information. Therefore, it also changes the iPhone's single-screen display structure.

Use a column. The two levels of content are displayed at the same time, flattening the information.

Use a bubble box. The bubble box on the top can display controls or tools. You do not need to switch the screen to complete the operation.

The section control is displayed on the toolbar. The segment control can display parallel information.

Use the label bar. The label bar displays different types of information or different program modules.

Reduce full-screen Switching

Similar visual elements, and changes content in a region. The general rule is to convert a single view or component without full screen switching to ensure visual stability and help users understand their position.

Enhance collaboration and contact

Users regard the iPad as a private device, but its proper size can enhance real collaboration and sharing.


The more similar the program display and real life, the easier it is for users to understand how the program operates and enjoy it. But it doesn't have to be too precise. exaggerated things usually seem more authentic and can deliver more meaning, as an opportunity to communicate with users and express the nature of the program. Use animations to further enhance the program's realism. In general, the realistic nature of an action is more important than the appearance of a program. actions that do not conform to the laws of physics will confuse users.

Amazing graphics

The high-resolution iPad screen Supports rich, beautiful, and engaging graphics that appeal to users, so you can try to increase the depth and details of the graphics in the program.

Weaken interface controls

Organize the information framework by designing the UI of the program, reduce the number of controls and fade the display effect, and create controls that are consistent with the program style, which is not prominent but easy to discover.

Minimal Modal Dialog Box

The modal dialog box interrupts a user's workflow. You need:

· It is necessary to attract user attention.

· Avoid data loss caused by misoperations.

Rethink list

Lists (that is, table views) are often used to display a large amount of data information on the iPhone, and are also very useful for iPad. However, you can use a richer method to display the same information. For example, the contact information in the iPhone is a very efficient list. The contact information on the iPad looks like a beautiful address book. The iPad list can display more information.


The large screen supports custom multi-touch. Even if multiple users use the iPad at the same time, remember that they do not need to respond to nonstandard Touch gestures. If there is one, they only need to execute commands in one way.

Bubble box

The bubble box is similar to the modal view. When the bubble box is displayed, the main view cannot be operated. However, the modal view is modal. However, the bubble box can be used in two ways:

· Mode. When a bubble box appears, the surrounding interface fades out and a clear operation is required to cancel.

· Non-modal. You can also click the Interface Around the bubble box to cancel the bubble box.

If you use a modal view on your iPhone, consider replacing it with a bubble box. The following questions help you determine whether the use of the bubble box is reasonable:

· Do I need different types of input? If yes, use a bubble box. The bubble box is more suitable for displaying a selector or list option.

· Whether the user needs to pass through the multi-level view. If yes, use a bubble box. The results of the bubble box are suitable for displaying multi-level pages because the main view is slightly changed.

· Can tasks be completed only in the master view? If yes, use a non-modal bubble box. The user can click the main view to cancel the bubble box. This allows the user to abort the operation bubble box and return to the main view.

· Tasks require deep user input and are a major function of the program? If yes, you may need to use the modal view. Context conversion of the modal view helps you focus on the task. A large modal view allows you to enter a large number of character segments.

On the other hand, this task represents an important part of the program's functions. However, if you do not need to put your attention into it, the bubble box is a better choice, lightweight vision is more friendly for frequently executed tasks.

Whether a task is executed only once or rarely, just like an installation task. If yes, use the modal view. Users do not mind staying on the current page to complete such tasks.

Limit the complexity of a modal task

Users are happy to complete a subtask in a modal view, because the context conversion is clear and short-lived. However, if the sub-tasks are too complex, you will ignore the director service. When the modal view is displayed in full screen and contains multiple sub-views, this risk will increase. If a modal task must contain a subview, make sure that you are given a separate and hierarchical path to avoid detours. You can exit a modal task in a clear and safe way to anticipate the consequences of this operation.

Dilute File Management

Although the iPad program allows users to create and operate files, this does not mean users should be conscious of the file system. The iPad does not search for files like Mac OS, and users do not have to interact with files on their computers. Users should not consider the file type and location, such:

· The File hierarchy is displayed in the open and save dialog box.

· File access permission information.

A file handler encourages users to preview the content. If the iPad program allows users to create and edit documents, it is best to provide a document type selector for users to open an existing document or create a new document. Ideally, the document selector is:

· Highly graphical. Users can easily identify the required documents when they see the visual form of the document.

· The user uses the least touch gesture to find the desired content. For example, to open a document, you only need to translate the horizontal scroll bar and tap the document.

· Create a new document. When the user does not find the desired document, the selector provides a document creation function instead of searching for this function on other interfaces.

Users are required to save only when necessary.

Users should be sure that their work is saved in real time unless they explicitly cancel or delete it. If the program helps you create and edit documents, you do not need to explicitly execute the Save command. If the main function of the program is not to create content, but the user needs to switch the browsing and editing modes, You can explicitly ask the user to save the modification content. In this case, the "edit" button is provided in the information display view. After clicking it, the button becomes "save" and "cancel. The "edit" button indicates that the current interface is in editing mode. The "delete" button allows you to exit the program without saving the modified content.

Move toolbar to top

Different from the iPhone program, the toolbar of the iPad is on the top, and all functions in the toolbar can be displayed on the wide screen of the iPad.

Start now

You do not have to wait until the iPad starts. When started, the iPad program:

· Display the starting image of the program in the current position to reduce the user's sense of waiting and let the user know that the program is still running.

· Avoid program startup slowdown. It is acceptable to display the brand information in the launch image, but remember that the content is displayed every time the user starts the program. If you need to use a splash screen, it is clear that the display time is not too long and no user interaction is required.

· Restore the last running state of the program.

· Avoid requiring users to provide startup information. Replaced:

Focus on 80% of user needs.

Obtain more information from the system. Retrieving information from the system can avoid input.

The user benefits before entering the information. If the input is inevitable, the user must first obtain valid information.

Ready to stop

Like the iPhone, the iPad program is after the user presses the "home" key, so:

· Store data as soon as possible and reasonably.

· Save every detail of the interface when exiting.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.