Smooth dynamic design

Some websites always excel in content, usability, design, or features. Now the site, interactive design details and dynamic more and more rich. We will share some lessons from various cases and analyze why these simple patterns can be achieved so well.

When we design digital products, we often use design software such as Photoshop and Sketch. Most people have been working for several years clearly knowing that design is not just about visual presentation. Still, many still continue with this "static design." Steve Jobs said so much about design:

"Design does more than just look and feel, but how it works and operates."

Hyperlinks in the network can make people feel happy or disgusted. When you click on a link, it allows you to go anywhere from a product page to a creepy puppet store in the middle of the old town. The result is a failed link attempt.

The most noteworthy of the book's user experience is "linear." The last chapter in the book is based on the previous chapter, you have to read the first chapter in economics as a basis, in order to understand the contents of Chapter II. When you skip the first chapter, you realize you may miss something. Therefore, in the ensuing content will also ignore some knowledge. This "linear" behavior is often subconscious on the web, especially for sites that have been browsing for a long time. By adding a rolling animation, we can solve this problem:

In contrast:

Let's compare the default behavior node of "name" to the animation behavior. Skip content is no longer an unconscious action, but a decision. In fact, there is no animation at the top of the page, but rather you are placing the menu button in the mobile view at 24 frames per second. It took me more than a minute to find out exactly what happened.

REVIEW: In an interface, sudden changes are very confusing for the user process. Do not put the user in the dark, but often show the user what exactly happened.

In the last example we saw that conversions help users understand the speed and direction of a link. There is nothing more uncomfortable for users than a sudden change, because sudden changes do not exist in the real world. Let us look at another example: switch menu. Users can associate the "+" sign with either adding or zooming in. "+" By rotating 45 °, plus a cross, this link element is widely understood to mean "off":

This simple conversion completely changed the meaning of this icon. Such small details mean the distinction between "you do not have to guess what happens next" and "know what the icon means". If you ask me, I would say switching is very user friendly. Also note that the plus sign as a meaning that can be understood is always rotated in the same direction, thus enhancing the flow of information as you browse the web.

Tips: Make your site's elements in any state can be understood.

Many blogs and news sites are not the most pleasing forms of comments. why? Is it because most people are unfriendly? When you're ready to post a comment, you just want to start typing in the comment itself, nothing else. On the contrary, the typical form of a comment is to ask you a variety of irrelevant things, which is very annoying.

To motivate people to make more comments, we can give up the original form and show only the most important element: the area where the comment was made. When users click on this area, you can expand the corresponding form. One real-world example we can find is the beta site of The New York Times:

You can further set up, through the cursor focus to expand this comment bar. However, there is a problem with this approach: A key principle of interaction design is that an activity should form near the area of ​​interest (near the area of ​​interest). We can further design, is to change the comment area to adapt to the user:

You can even pin the comment area, enlarge it accordingly, and move the extra fields below it.

As you can see, this not only reduces clutter but also makes the form of comments more appealing. But all comments before abandoning the old form of it?

In abandoned comments, the scroll bar represents the length of the article itself, not the entire page. A common practice is to automatically load comments when a user reaches the bottom of a page. We should avoid forcing users to click unless there is a good reason to do so.

Tips: Step by step guide the user to understand, in order to reduce the direct display of the contents of the UI components. These components show their characteristics only when needed by the user.

One of the most exciting interactions is the "refresh" approach that soon appeared with the iPhone, pioneered by Loren Brichter, which allows users to update content by dragging the screen backwards (screen). You can see the concept being used on Twitter's mobile device. Once you drag it to the top of your Twitter dynamic page, drag it further and refresh again:

Why is this method so effective? Users need to click the refresh button to load more content into their browser before the drag-and-refresh method appears. When users want to find more content and refresh this behavior, the conscious refresh behavior (ie, click the refresh button to update) becomes obsolete.

Tip: Experience can be made more natural by combining the user's intentions and behaviors.

Sticky tags are another small but useful way to combine user interface elements with meaningful conversions. Let's see how Edenspiekermann uses this technique in its design:

The annotation of the item scrolls along with the content so that the image to the right has always been linked up and down before the next item appears. This behavior is similar to the address book in an iOS system and is especially helpful in providing top and bottom links to very long browsing pages. This transition provides browsers with directional and fluid, up-and-down descriptions.

Tips: Those who do not fit in the window, add a description or title of valuable information content, you can use sticky label group for a long time.

Affinity derives from the concept of cognitive psychology, meaning that the specific characteristics of the object can lead to the viewer.

In the context of user interface design (UI), the European Union's Website Usability Glossary (PDF) defines "affordance" as follows:

"Affordance is a desirable attribute in the user interface, and with this software people can take the right steps to accomplish their goals."

Bumps are often used to enhance visibility. Raised buttons around indicate that people can drag this button. This user experience technology is widely used in iOS camera applications.

In the iOS 6 system's lock screen, bumps around the camera icon indicate that the user can do this. Apple removed it on the iOS 7 system, apparently because users are accustomed to this feature, now the icon looks more like a separate button. However, the operation is still the same: when you drag the button, the lock screen jumps to reveal the camera below. This great technology allows users to recognize this feature in the interface.

Tips: Give the element a high visibility, so that the user can be correctly identified in the interface.

Since Google Chrome was released on iOS, there's an associative way to hide it. As shown below:

One potential assumption is that users track what they are interested in. Once they stop tracking, the screen may need to change up and down, so the navigation controls appear at this time. This technique saves screen space and checks to see if this assumption holds in the example you are using.

The basic idea is that once the user drags the screen down, the browser chrome and navigation controls are automatically hidden. When the user drags the screen up again, the control appears again. This approach not only enhances the screen up and down the associated experience (focus on the content itself) and increase the screen space. Of course, the latter is especially important on mobile devices.

iOS this way to further design. When you reach the bottom of a page, the control enlarges again. This is a good example of combining user needs dynamically in the interface.

Tips: Use the upper and lower interface to enhance the user's attention and hidden screen space savings.

About a week ago, Nikita Vasilyev, a UI designer in Toronto, came up with a pretty good idea. He developed a script element. Although still experimental, the concept is very interesting. Take a look at his video below. (Please bring your headphones, the music is epic.)

When using keyboard navigation, users are often not aware that the focus has changed and require the user to switch to the keyboard and press the Tab key. The animation can guide the user in the page to focus on the correct location. This switchover is subtle but has a significant impact on the target user.

Tip: Regardless of how they are operated, we need to guide the user in the direction of interest.

This is just a few examples, in addition to many other examples. Instead of focusing on the latest and greatest interaction technologies, the key is to emphasize that focusing more on small interaction details can significantly improve the user experience.

If we are to design better digital products, then we need to challenge our current beliefs and see how the interactive model can make life easier for our users. I am not saying that we should reinvent the wheel, but stopping exploring is a very naive idea. Therefore, out of the original comfort zone, you need to constantly explore and test.

Source: http: //daichuanqing.com/