Page elements and page "transitions" design

In TV works, transitions or transitions between paragraphs and paragraphs, scenes and scenes are called transitions. In order to make the content of the TV TV more organized, the development of the level more clear, in the scene and the transition between scenes, the need for certain methods.

The site is similar, a complete site consists of several pages, and each page is composed of several elements. In order to make the content of the site more organized, operational logic clearer, user experience better, user conversion rate is higher, in different elements and page conversion, also need certain skills.

Transition effect

A fade into the fade

This approach is very common: for example, when music is turned off in a cool dog music box, the sound gradually stops in seconds, rather than disappears immediately; the rotation of the banner of the home page also takes the form of gradual and progressive.

b Process Signal

Represents the current progress, process, or feedback results with a dynamic effect.

· Current progress: The most common is the progress bar effect, clearly showing the current progress, reducing the user's anxiety when waiting.

· Operation Process and feedback results:

For example, delete the items in the Taobao favorites, the product will gradually slide up while the gradient disappears. This action clearly indicates the process and result being deleted without further prompting the user to delete the success.

Excellent network of collection tips, it is a small star animation.

· Visual Guide: In any customer-prudential products in the client, the product added to the shopping cart when the Guide animation, not only the performance of the added process and complete the operation of the feedback results, but also indirectly prompted the location of the cart, two birds.

C Transition Animation

When page elements change, it's best to have some transition effects. For example, the gradual transition of the screen, the dynamic extension of the Drop-down list, the gradual disappearance of the floating layer and so on. A sudden change can give a blunt feeling.

An interesting small example: Taobao favorites, the mouse is slippery, the original triangle will rotate 180 ° into the upper triangle.

D 360 degree rotating products

When users shop online, they want to be able to learn as much as possible about the appearance of the product, and 360° rotation is a better way to meet this demand. In fact, this way has been very early, but has not been how to popularize.

Page Jump

Page jump (whether the original page refresh or new open window) to bring users a sense of pause, affecting the user experience.

A avoid frequent paging

Turning the page can appropriately reduce the fatigue of reading, add a little sense of accomplishment, and give the physical location of the content more obvious (easy to repeat). But it has, after all, interrupted our reading to some extent (especially when the internet is sorry), which may cause users to leave early. Therefore, on some sites with less content relevance, you can try to reduce the number of page turns appropriately-the simplest way is to increase the number of pages displayed, but consider the user's tolerance (different product conditions vary and need to be considered as appropriate).

For example, Sina Weibo's page is very long, when scrolling to the bottom, will immediately load the following content (fast to almost feel). So many times before you see the paging component at the bottom of the page.

Some of the emerging e-commerce sites do not even have the traditional page-flipping components, the entire pages coherent. For example, excellent public network, using the wheel or up and down ARROW keys can continue to browse merchandise.

B Avoid immediate jump

For an operating process, each additional page will increase the user's wastage rate. And clicking on the link means that you have to brush out a new page? Look at these tactic below.

For links with a weaker link:

· Use floating layer: When the description is not long, you can use the floating layer hint instead of opening the link in the new page.

· Use the floating layer + two times link:

When the description of a lot of content, but the focus is not much, you can refine the key information on the floating layer, the rest of the link.

For example, the following example, the mouse over the "view charges", there is a small floating layer, which contains information is refined, can meet the needs of some people. Click on the "View charges" link in the floating layer to open the page in a new window to see more specific information.

Although a bit unexpected, but this can minimize the number of page jumps, so that the continuity of the operation is not too much damage, while reducing user churn.

· Use Anchor link + two links: When the description is many, the focus of the content is also many, you can use this method. Anchor links apply to long pages, but this fast location switch can be a bit unclear, so. But the long page is not suitable for increasing the transition effect of page scrolling, easy to make people Ching. So you can refine the key content in the location of the anchor point will jump to reduce the length of the page, while increasing the transition effect of page scrolling.

For example, Alipay payment page, click on the upper right corner of the "payment encountered problems", the visual area from a gradual transition to B (page slowly sinking), while the B area highlights about 2 seconds, and then gradually restore. If the user still does not find the answer, you can click on the lower left corner of the "more Help" link, in the new page to see more content.

This can not only reduce the number of jumps, but also because of the transition effect, users will be very clear the layout of the entire page and the previous behavior process, not because the screen quickly switch and feel helpless.

Here's a counter example that uses an anchor link:

In Dangdang's "receiving Address Book" Click on "Modify Button", the screen immediately becomes:

Every time I come across this, I feel very abrupt. In fact, the page itself has not changed, but the visual area moved down some. But the user can not see the moving process, only to see the result of the change.

Two point question: 1. Since this page is not long, moving from top to bottom should have at least one transition effect, otherwise the user doesn't understand what's going on. 2. Is it appropriate to use anchor links for similar operational content? See "Modify" This action, the user may instinctively think of the window, but the window can carry a limited amount of information, and the location is not good control (generally appear in the center of the page, from the operation of the trigger area may be far away), then what other ways to solve it?

Let's look at the "expand in page" approach.

For highly correlated operations or links:

· On-page expansion: Suitable for the expansion of existing content, it can instantly feedback the user's operation, bring a more natural experience. Advantages: It can carry more information than the window, transition nature, display the expanded content near the operation area, the coherence is better. Disadvantage: The contents of the following will move with the next, disturb the sense of position.

Back to Dangdang just changed the address of the example, because of the strong correlation, so whether the page to expand the way it?

· The page expands + two times link:

If the content is very much, you can add a link at the bottom of the expanded section.

· Pop-up window:

Applicable to the content is relatively concise, users need to focus attention, and the page element position needs to be fixed. But the window is often located in the center of the page, from the trigger operation area may be more distant.

When you enter a list page, many users are accustomed to clicking on multiple links at the same time and opening them in a new window. First, because the network may be slow, waiting for the new page to open the same time as to return to the list page to look at other content, and second, because the user may be in the list to see more interesting content, so one in the new window open, to avoid missing. And the advantages of the network is handled in this way:

There is no extra new open window, the original page is not completely makeover, the user is not easy to lose, the operation path clearer. The window is faster than the speed of the page, but considering the limited amount of information that the window is loaded on, it is difficult to control the ejection position.

· Pop-up subkey: Between the page expansion and the window, applicable to the content is not a lot, the operation is not very important, and the page element position needs to be fixed. than the window of human nature (pop-up window is generally located in the center of the page, and the popup child is located in the vicinity of the operation area), more stable than the way the page is expanded (page position will not change), the disadvantage is that the content can be carried more limited.

Hint effect

Just the right hint allows the user to produce correct psychological expectations, prevent misoperation, and make the process more fluid and coherent.

A mouse hover tip

In the Watercress Personal homepage, the left Mouse hover column will appear

icon so that we know that this part of the area can be moved.

b Operation Positioning

For easy to operate the interface (especially the mobile interface, the fingers will block to the operating area), need a positioning hint.

When the content is far from the title, also need a positioning hint.

C Error Tips

The error tip is best located near the operation area, otherwise the user's sight needs to move back and forth, destroying the line of sight, operation and thinking.

D Dependency Tips

Just adding a small arrow will make the logical relationship between the different elements much clearer.

Other

In order to prevent the malicious robot login, we have to fill out a variety of singular verification code, not only the machine can not identify, normal people are often so and wrong. Watercress used the English word deformation way, let us in the input of the thinking is consistent, not easy to make mistakes.

Finally want to say is, in fact, there are more things that have not been thought of, only to this, hoping to bring a little inspiration to the viewer.

Article source: Legene's interactive design blog