User Experience Analysis: Interactive design for ipad user experience

Source: Internet
Author: User
Tags file system require touch contact form

The ipad user experience is mostly about content and interaction:

    • Dilute the program UI so that users can focus on what they want.
    • Beautiful content form, rich sense of reality.
    • Leverage the performance of the device to enhance the interactivity of the content.

Support All Directions

One of the key elements of a good ipad program is that it can be run in all directions. A vertical large screen can meet the needs of the user browsing content (when the vertical screen is small, the user will rotate the screen into a horizontal screen, so that a line can display more text). Users are less aware of the minimum device structure (minimaldevice frame; When the iphone is used, the screen is vertically displayed while the user is holding the phone in one hand, while the ipad is not available on both hands) or the home button, they don't think the device has a default location. This causes the user to expect the program to run in its current position. So the program tries to meet the ipad's operational requirements.

Ensure that priority is focused on the content. When the position of the ipad is rotated, the user will feel lost control of the program as the highlighted content changes.

How to display auxiliary information or functionality when rotated. Although you can guarantee the previous one, consider how to display the less important information. For example, in the mailbox feature, when the primary content is emailed, the secondary content is a list of contacts and inboxes.

The secondary content of the horizontal screen is displayed in the Split view on the left

The secondary content of the vertical screen is displayed in the Bubble box.

Another example, horizontal screen, a game with a rectangular display, when rotating to the vertical screen, you need to adjust the display area on the screen, the game shows the top of the border or below to increase the display space for the display of auxiliary information, rather than vertically stretched the display area to support the entire screen.

avoid changes in layout that are too large or without cause. when all directions show similar UI layout rotations, keep the information and the original formatting of the text as much as possible. Especially when reading text, it is important to avoid the rotation after the user can not find where to read. If you do not want to rearrange the page, you can use animations to help users understand the current page changes. For example, when you need to increase or remove a text box when you rotate, you can choose to hide the action and simply fade out in the new layout. To help you rationally design rotational movements, consider how you interact with them in real life.

avoid using UI elements or defining a rotated gesture to complete the rotation. the content should rotate as the ipad rotates.

provide a startup picture for each display orientation. For example, provide 1004x768 and 748x1024 pictures to meet the two azimuth display requirements.

carefully consider whether the program can be run in all directions. Some programs can only be displayed on a horizontal or vertical screen, at this point:

    • Displays the program for normal display, regardless of the current position of the ipad. Avoid using UI elements to tell users to rotate the device. Supports a 180 degree rotation.
    • You can specifically handle input rotation actions. Some games take the rotary equipment as the operation way, this time the horizontal screen switch, may not change the game the display direction.

Enhanced interaction

The best ipad programs provide a new way of interacting when users perform explicit tasks. Instead of adding some features that aren't directly related to the main task to fill the entire big screen, you're elevating the user experience of the program.

For example, the reading program allows users to read when the retention path will enhance the reading experience, do not need to jump to another page instead of using the bubble box to change the path. Programs can allow users to add bookmarks and comments to the text, helping users to exchange bibliographies or compare the progress of reading.

Information flattening

The ipad's big screen and new UI elements can display more information, and use it properly to avoid too many jumps when looking for information, and therefore change the iphone's single-screen display structure.

use Columns. level Two content is also displayed to make the information flat.

Use the Bubble box. The Bubble box at the top can display the control or tool and complete the operation without having to switch the screen.

A segmented control is displayed in the toolbar. segmented controls can display side-by-side information.

Use the tab bar. the tab bar displays different kinds of information or different program modules.

Reduce full Screen switching

Similar visual elements that change content in a region. The general rule is to convert individual views or components, and not to full-screen switching, to ensure visual stability and to help users understand where they are located.

Enhance collaboration and networking

Users view the ipad as a private device, but the appropriate size can enhance real collaboration and sharing.

Real Sense

The more similar programs show to real life, the easier it is for users to understand how programs operate and like to use them. But there is no need to be too precise, often exaggerated things seem more realistic and convey more meaning, as a chance to communicate with the user and express the nature of the program. Use animations to further enhance the realism of the program. Usually, the real sense of action is more important than the appearance of the program, and the action that does not conform to the physical law will make the user feel puzzled.

Stunning graphics

The High resolution ipad screen supports rich, beautiful, and moving graphics that appeal to users, so you can try to increase the depth and detail of the graphics in your program.

Weakening interface controls

Organize the information framework by designing the UI in the program, reducing the number of controls and diluting the display, creating controls that match the style of the program, which is not prominent but easy to spot.

Minimal modal dialog box

The modal dialog box interrupts the user's workflow and needs to be appropriate:
    • When it is necessary to attract the attention of the user.
    • Avoid the loss of data that is caused by incorrect operation of the user.

Rethinking the list

The list (that is, the table view) is often used to display large amounts of data in the iphone and is also useful for the ipad. But you can also use a richer way to display the same information. For example: The contact method in the iphone is a very efficient list. The ipad's contact form looks like an attractive address book, and the ipad list shows more information.

Multi-point Touch

The large screen supports custom multi-touch, even if multiple people use the ipad at the same time, remembering not to respond to non-standard touch gestures and, if so, to execute commands in just one way.

Bubbles Box

Bubble boxes and modal views are somewhat similar and cannot be manipulated when the bubble box is displayed. But the modal view is modal. However, bubble boxes can be used in two ways:
    • modal. When the Bubble box appears, the surrounding interface fades, requiring a clear operation to cancel.
    • non-modal. Click the interface around the bubble box to cancel the bubble box.
If you use a modal view on your iphone, consider using a bubble box instead. The following questions can help you determine whether the bubble frame is being used properly:
    • Do you need different types of input? If yes, use the bubble box. A bubble box is better suited to display a selector or list option.
    • Whether the user needs to go through the multilevel view. If yes, use the bubble box. The result of the bubble box is appropriate for multilevel pages, because the changes to the main view are small.
    • Is it possible to complete the task in the main view? If so, use a modeless bubble box. The user clicks the main view to cancel the bubble box, allowing the user to abort the action bubble box and return to the main view.
    • Task requires user depth input and is a major function of the program? If so, you might want to use a modal view. The contextual transformation of modal view helps users focus on tasks, and larger modal views make it easier for users to enter a large number of character segments.

On the other hand, this task represents an important part of the program's functionality, but the bubble box is a better choice if you don't need the user's depth of attention, and lightweight vision is more approachable for tasks that are frequently performed.

Whether the task executes only once or very rarely, just like the installation task. If so, consider using a modal view. Users will not mind staying in the current interface in order to complete such tasks.

Limit the complexity of modal tasks

Users are happy to do a subtask in a modal view, because the context transitions are clear and ephemeral. However, if the subtasks are too complex, the user ignores the main task and the risk increases when the modal view is full screen and contains multiple child views. If the modal task does not include a child view, make sure that the user is given a separate and clear path to avoid detours. Provides a clear and secure way to exit modal tasks, and users can anticipate the consequences of this operation.

Fade file Management

Although the ipad program allows users to create and manipulate files, this does not mean that users should be aware of the file system. The ipad does not have the same file search as Mac OS, and users don't have to interact with files on the computer. Users should not consider file types and locations, such as:

    • File-level relationships appear in the Open and Save dialog box.
    • The access rights information for the file.

A file handler encourages the user to preview the content. If the ipad program allows users to create and edit documents, it's a good idea to provide a document type selector to enable users to open an existing document or create a new document. Ideally, the document selector is:

    • highly graphical. users can easily identify the documents they need when they see the visual form of the document.
    • The user uses the fewest touch gestures to find the desired inner Let's do it . For example, opening a document simply translates the horizontal scroll bar and the swipe document.
    • the ability to create a new document. when the user does not find the desired document, the selector provides a function to create the document rather than to the other interface for this feature.

Require user to save only when needed

Users should be sure that their work is saved in real time unless they are explicitly canceled or deleted. If the program helps users create and edit documents, it ensures that users do not need to explicitly execute the Save command. If the main function of the program is not to create content, but to allow users to switch browsing and editing mode, you can explicitly ask the user to save changes. In this case, the view in which the information is displayed provides the Edit button, which becomes the Save button and the Cancel button after a light click. The conversion of the Edit button reminds the user that the current interface is edit mode, and the Delete button lets the user quit the program without saving the changes.

Toolbar move to Top

Unlike the iphone app, the ipad's toolbar is at the top, and the ipad's wide screen shows all the features in the toolbar.

Start now

The ipad program starts without waiting for the user to start. When started, the ipad program:

    • Display the program in the current position of the start picture, to reduce the user's sense of waiting, so that users know that the program is still running.
    • Avoid slow start of programs. It is permissible to display brand information in the startup picture (launch image), but remember that when the user starts the program, it will be seen every time. If you do not want to use the splash screen (splash screens), make it clear that it is not too long and does not require any user interaction.
    • The last health of the recovery program.
    • Avoid requiring users to provide startup information. Instead, the following are:
      • Focus on 80% of user needs.
      • Get more information from the system. You can avoid input by fetching information from the system.
      • The user benefits before entering. If the input is unavoidable, it is also necessary for the user to get valid information first.

Always ready to stop

Like the iphone, the ipad program after the user presses the "home" key, so:

    • Save data as quickly and reasonably as possible.
    • 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: and provide relevant evidence. A staff member will contact you within 5 working days.