What are the advanced tips for lifting a single page scrolling experience?

Flattening has become mainstream, simple wind can be seen everywhere, panorama large picture + single page design has become a synonym for tall. Random combination of several general trend of design techniques seem to be able to achieve a forced lattice of good sites, grinding details seem unnecessary, really is this? The details are filled with demons. Today, the Ui/ux designer from Vtex Lab, Rodrigo Muniz, wrote about the user experience in one-page scrolling design, and if you're a detail-grinding obsessive, this article is your medicine ...

We've seen too many of these sites, with High-definition, fine, big-picture backgrounds across the screen, filling your horizons. Yes, everyone likes this kind of style, this is also the popular design trend. But is the design really all the same?

We opened this page, the picture is very good, the color is comfortable, but the view moved to the bottom of the page-why is there such a button flashing to tell me to "scroll down"? We all know how to browse the Web, okay? This reminder is as cumbersome as labeling "dot Me" on the button.

High-Definition large image + "downward scrolling" = lazy design

"If you need to explain your design, then this design is a failure." ——— Milton Glaser "

Such a design breaks the natural perceptual process of user-exploratory interaction. Everyone knows how to scroll through the Web, this is subconscious behavior, so this redundant "scrolling down" can be said to break the basic mental model of web browsing, this "lazy design" is a typical affordance design problem.

What is the availability design? The article on "affordance (availability) and design" explains this:

Affordance is a word created by James J. Gibson, Gibson is one of the most important cognitive psychologists of the 20th century, and his ecological visual perception and direct perception have opened up new territory for cognitive psychology. Affordance is afford (provide, give, undertake) the noun form, the environment affordance refers to the environment can provide the animal's attribute, whether good or bad, so I think "availability" is a suitable translation. The example of Gibson used to explain affordance is this: if the surface of a piece of land is close to horizontal (rather than slanted), close to flat (rather than raised or sunken), and fully extended (relating to the size of the animal), if the material on the surface is hard (related to the weight of the animal), We can call it the base, the field, or the ground, which can stand up (stan-on-able), allowing four or two-legged animals to remain upright, which can walk (walk-on-able) and run (run-over-able), It is not as sink-into-able as the surface of the water or the surface of the swamp is to a certain weight of animals. The four properties listed-horizontal, flat, stretched, and hard-are the physical properties of this surface, if they are measured in terms of the weights and measures used in physics, but for the support of specific animals, they must be related to animals to be measured, they are not abstract physical properties, they are for the specific animal , which is related to the posture and behavior of animals, so affordance cannot be measured as we do in physics.

From the perspective of availability, browsing Web users is the web design of the design of the object, simple and rough "point me" or "scroll down" is undoubtedly an awkward experience and visual noise, it and "design" the word is far from the deep.

It's not art, it's not design, because you're explaining it.

Huge has done a research on one-page scrolling design, poking through the full text here.

Huge's research shows that users skip over a lot of content on a Web page when the user experience's availability design is broken. The use of arrows and the "PAGE DOWN" hint does reduce the likelihood of users ignoring the following, but the user experience can be reduced, in other words, this design works but not good enough.

Whether it's "scrolling down", "click me to turn the page" or a simple downward arrow, it's a lazy design, a rough solution.

"But my users are going to have a big HD page scrolling!"

Yes, but there are no problems with large HD and single page scrolling, the problem is on arrows and hints. There are many solutions better than arrows and hints.

Use dynamic to communicate with users

Using dynamic elements in a large HD image can be a more elegant reminder of the user's "content below." As with many design problems, the perfect solution does not exist, but it can greatly enhance the existing user experience.

In the first case, the bottom of the big picture crept out of the screen, as if telling the user, "Hello, I'm here, and if you want to see it, scroll down."

If you use the design of parallax scrolling in the web design, then you can fully parallax scrolling characteristics, so that "probe" when the effect appears, the background image is also timely narrowing, this not only to achieve the purpose of reminders, but also the entire page of the special effects more consistent.

If the bottom content is composed of multiple blocks, then the action can also be done:

Control the content, do not hide

Google fit, from Google's Android platform Health app, is a good case in which the card-style content reveals a head that tells you that there is more to the bottom of the circular information map. This approach is intuitive and elegant, does not use additional elements to convey information to the user, but also ensures that the topic content has enough space to present.

This design is not just proposed, in fact, in the early 2006 years, Jared Spool has already explored the design of this outcrop to the Web scrolling browsing the availability of design impact.

Considering the existence of old computer and old version browser, the dynamic effect does not necessarily run well. This time, you can use a few lines of CSS code or JS code to solve this problem, such as setting the height of the background image of the entire browser view height of 90%, exposing the content can be.

If you keep the background unchanged, what happens to the lower content in the form of a low transparency and a background overlay? In fact, this does not affect the visual center position of the beautiful background image:

This design is the most important control is not transparent, too high will be distracting, too low, users will ignore the content below. When the user scrolls down, the opacity increases, and the experience is not too bad.

Conclusion

Simple design or minimalist design is not easy, there is no doubt. Those seemingly simple solutions often seem to be "too lazy" for designers, and those really good designs are often very attentive to detail and experience, reducing a bit of noise and usually requiring a lot of effort to replenish.