Design a good-natured web page

With the progress of technology, the concept of web design and techniques are also evolving. More and more types of equipment have brought us more and more challenges. The most reasonable way to make the design to the maximum extent possible to adapt to the performance of a variety of equipment and specifications of attributes, which we must consider in the work of the problem.

In the face of such challenges, we feel that the areas of work that we once knew were suddenly full of unknowns, and on the other hand, the old problems that have prevailed are still in front of us. Do we need to devote all our energies to solving the old and new details, or can we look for some "true truths" that are of a guiding nature?

The history of web design is too short, to understand some of the truth, we might as well put the field of vision, let the idea across the scope of design. In fact, we can really find some abstract and more universal ideas and patterns in areas that seem to have little to do with design to help us solve our problems. Psychology and music are the objects we can study and explore. Next, let's take a look at the relationship between Bach and the challenges facing the current web design. Bach.

Bach and "Cleville of Good Temper" (12 average piano set)

In 1722, Bach created a piano set consisting of 48 Prelude and Fugue (24 sizes), which was used primarily as an educational material for young musicians. This album is one of the most important works in the history of Western music and has a far-reaching impact. Bach himself named it "the good-natured Cleville (The Well-Tempered Clavier)".

Why is this album of great historical significance? You know, in the era of Bach, it's not a very orthodox practice to use all the tunes on a keyboard instrument. From a physical point of view, a keyboard with a fixed tone can only play a few specific modes at a time. For the tune system of that time, it was almost impossible to play all 12 modes on the piano.

The laws of physics are difficult to break through, but human perception can be changed, and the solution is to redefine the concept of "blending". Some intervals are adjusted to produce a slight deviation from the standard pitch, creating a new tuning system that allows people to play all the tunes. In order to construct a more reasonable system, the ability to adjust the attribute characteristics of its constituent elements is a systematic "temper".

Bach's average law modifies the natural law, dividing the eight-degree interval into 12-chromatic tuning to facilitate the transfer. This approach can naturally be called "good temper", which is like the pragmatism of classical music.

Good temper

in web design

Web design-oriented target devices are evolving from one single development to the next, which is perhaps the most exciting and worrying thing in the last year or two. This is no longer about whether styles can be compatible in different browsers, we face various factors in the new situation: different devices, different screen sizes, different usage environments, and the UI styles of different system platforms.

Although responsive design (what is a responsive web design?) or design for the designated device can help us to some extent to adjust the appearance and experience of different environments, but not all UI elements or modules can be given flexibility, we still need to use a "fixed" global design in many places. At this time, "good temper" thinking can help. The practical principle is simple: in order for the design to produce the best user experience in a range of different types of devices, we need to make a different degree of compromise between some of the key UI elements in the interface, making the entire page more adaptable to the environment.

Touch Priority

Recently, more and more desktop version of the Web site began to have a touch-screen device UI style interface elements, this practice is a good expression of "good temper" design ideas. In a touch-screen mobile device, we need to directly manipulate the interactive objects in the interface through our fingers. The finger touch mode requires a larger target area than the traditional mouse pointer. With this in mind, we should moderately increase the size of some important interaction elements in the page and, in order to maintain a visual balance, we also need to adjust the spacing between the elements and their respective margins.

As a simple example, Google has significantly increased the size of important interactive elements such as the "Write Mail" button in its new UI, as well as the interface elements such as navigation menus, toolbars, mailing lists, and so on. In contrast to the past, the new design has significantly improved the friendliness of Google's mainline products for touch-screen operations.

To some extent, the ipad has a bridge between touch-screen mobile devices and traditional desktop devices, and its popularity increases the impact of touch-screen devices ' UI style on desktop devices. Look at the recent revisions of mainstream products such as Gmail and Twitter, or take the time to browse through the latest outstanding works in the CSS web design case, and you'll find that the current web design style looks really different from before, and they seem to be more ... Plump。 White more, buttons bigger, everything looks big and flat. But we also have to admit that this phenomenon is also associated with the increasing size of desktop displays.

In this type of design, the space occupied by the interface elements is a waste of the mouse pointer, but the finger touch is just right. This is the "good temper" of the design idea of the core idea, that is, in order to make the interface can be applied to more platform environment, and the "standardization" of the design scheme to fine-tune, and finally reached a compromise state.

And in many cases, this trade-off is not bad for the mouse interaction. A button that is easily touched by a finger can also be easily controlled by the mouse, and the user experience of the entire UI in a traditional device context may improve.

In addition, we are also in order to touch the mobile device and design a text can be in touch experience design for everyone to bring some reference.

Response Design

There are many discussions on the subject, but most of them revolve around a variety of related development techniques. In fact, "responsiveness" is not an end in itself, what we really need is a mechanism that can help the Web site adjust and optimize content, media files, and layout structures according to different device platforms, so that the site can provide an optimal and relatively unified experience model for users in all environments.

The response scheme can not be separated from the global user experience design. As we mentioned in the previous article, although this kind of scheme can help us to adjust the design to different environment to some extent, but not all UI elements or modules can be given elasticity, we still need to weigh an optimal global solution through the "good temper" design idea in many places. In this regard, the Boston Globe (Boston Globe's) website is a good example.

You can try to use different types of devices to access this site, or directly in the desktop device constantly adjust the size of the browser window to observe the page's response adjustment rules.

The responsive strategy allows the same design to be adapted to various types of display devices, and users can even browse the Boston Globe page via an old Apple Newton handheld. However, this is not only a front-end development achievements, in fact, this strategy reflects a highly adaptable design thinking is the most important.

I think if we only need to design for desktop devices, the final solution should be more pure, including visual effects and interactive experiences. After all, in this case, we have enough time and resources to make a design approach as perfect as possible. Once we have to take into account the different types of equipment environment, we have to make a certain degree of trade-off to "play all the mode."

Interested students may wish to refer to our previous related articles, the response web design concept and practice of in-depth understanding:

What is a responsive web design? How to proceed? Implementing responsive web Design via CSS3 Media query get out of the maze of mobile Internet-Methods of Web site mobility Case study – Product requirements and design processes for responsive Web sites mobile priority design

The previous topic mainly favors the visual design of the page. In fact, "good temper" design ideas can also be reflected in product design, user experience, information architecture and many other aspects. Let's take a look at the mobile priority strategy in the product design.

In this concept, we will start from the point of view of mobile product design work, and always around the mobile platform hardware and software features to create the most consistent with the mobile device context of the product basic functions. As Luke Wroblewski in the book "Moving First,"

If a team carries out design work based on the principle of mobility, its products will ultimately experience a high degree of task-driven. Users can focus on the key tasks that need to be accomplished without being distracted by the plethora of irrelevant factors in the traditional desktop version of the Web site product. This is good for the user experience and business development of the product.

By extending this design strategy beyond the scope of the mobile experience and rising to the level of the entire product, we can find the obvious "good temper" feature in it. The concept is well illustrated by Twitter's latest revision.

One of the main goals of Twitter's revision is to achieve a consistent experience pattern among different types of devices. The unification of the appearance of the interface is only one aspect, more importantly, it can achieve this goal in the whole product experience level. A mobile-first design strategy ensures that the relevant work is moving in the right direction.

We can clearly feel the impact of the mobile experience model on the whole product design in the Twitter revision. For example, the four navigation labels, "Home", "Connect", "Discover", and "Me" at the bottom of the client, are suitable for small size screen sizes of mobile devices, which is a reflection of the optimized tuning of the product's information architecture for the mobile environment. The same navigation structure also appears in the Twitter desktop version of the Web site. We can see in the screenshot above, although the desktop environment with the mobile device has a larger interface display space, but the size and appearance of these navigation elements are almost identical with the client, but in the overall layout of the adjustment. It can be said that the entire desktop version of the design is in part to be able to maintain with the mobile version of the experience consistency and deliberately limited.

Beware of Wolves

In the natural law system before the Bach average law, those notes that do not play in the current mode usually produce a very harsh effect. Musicians at the time liked to liken the situation to wolf bark.

Using this vicious concept, we can refer to the visual or interactive elements in the user interface that apply to certain platforms, but which in other environments can disrupt the product experience, as "wolves." When you use a mobile phone to browse the Web page, those are designed for the mouse pointer is difficult to touch through the fingers of the link, those small to almost no discernible shape of the text, those who rely on mouse hover and trigger the display of UI elements ... These are the Web interface wolves in the context of mobile devices.

In the New York Times ' single article page, the right side of the body is usually a collection of shared links, each of which has a height of 12 pixels. When we look at this page in the iphone, we find that this size is really easy to make a mistake, and it's almost impossible for you to accurately touch the right target object. For these functional link units, it is best to give at least 44 pixels in width and height, as required by Apple in the iOS HMI design specification.

For the navigation structure shown in the following illustration, mobile device users generally express great pressure. This Drop-down menu form of UI components is very common in traditional devices, but because it requires a mouse hover to trigger a pop-up, this form usually does not work properly in a touchscreen mobile device.

Summary

Finally again, although the response design or design for the designated device can help us to some extent to adjust the appearance of the page and the way of experience, but not all UI elements or modules can be given flexibility. It is necessary for us to adjust the buttons or some other global interface components to some kind of compromise, so that the page can provide the optimal and relatively consistent experience mode for different devices, whether in the whole or in detail. There is also a very real factor that we can not ignore, even if we have enough resources to create highly targeted designs for different types of devices, users will also be able to convert their previous experiences into subconscious expectations and take them to another device when they use the device. So the problem of experiencing consistency is that we have to take that seriously.

Touch Priority: The button or link that fits the finger on the size is also suitable for mouse clicks, but otherwise. So touch-first design ideas can ensure that the page in most platforms can have a good experience. Response Design: Responsive design is enough to help the site adjust and optimize content, media files, and layout structures according to different device platforms, but at the same time, We also need to weigh an optimal global solution in many local UI elements or modules to move first: Start product design from a mobile point of view, and always surround the software and hardware features of the mobile platform to create the basic function of the product that fits the context of the mobile device. The ultimate experience is highly task-driven. Pay attention to the interaction in detail: pay special attention to the interaction patterns in the details that don't have cross-platform capabilities. One of the most common problems is that touch-screen devices typically do not support the hover state of a traditional device.

Bach believes that people have the right and the ability to play music in the way they think fit, and he has proved this to the world through a good temper of the law and a great music set based on the law of averages. We hope that no matter what kind of equipment people use, they will be able to perceive the best product experience, we want our website products in terms of availability and accessibility, and so on to achieve optimal.

Original site to compile the article. If you want to reprint, please specify: This article from the is for Web English original: Http://uxdesign.smashingmagazine.com/2012/01/17/de ... Translator Information: C7210-web design and front-end players, is now working in the Mass Comment Network product Department user Experience Design Group (UED)