The three major web site design principles that the UI should follow

With the evolution of technology, the art and techniques of web design are evolving. New technologies create new challenges, and new challenges require new solutions. We usually work in uncharted areas and need to give a new solution. Given the limited web design history, we have to go beyond the current realm to answer more challenging questions. To this end, we can learn from other unrelated areas of development history, such as music, from which we can help solve the problem of the solution. A short story about Bach in the early 18th century is listed below.

Bach and the "The Well-Tempered Clavier" 1972, Bach completed a book "The Well-Tempered Clavier" ("12 average music piano set"), divided into two volumes, each volume has 24 Prelude and Fugue. It has now been hailed as one of the most important works in the history of Western music. At the time, it was completely impossible to compose the 12 main keys separately. Bach, on the whole, composes all 12 tones. It was his set of "12 average piano pieces" that ultimately proved to people that the "12-average law" could be used to compose music, and that it was a wonderful effect that people had never seen before.

In this process, the solution is to redefine the concept of "blending". By modifying a certain interval, each of the keys deviates slightly from the perfect tone, creating a tuning system that allows people to play the tune music on all the keys. Sacrificing a small amount of individual quality to achieve a more perfect overall effect is called the "average law". This case is not related to the design of the website, but the purpose is the same: make each key is slightly defective, so that the keyboard overall performance perfect.

What do UI designers need to do?

In recent years, designing for multiple devices has become the most exciting development effort in the field of web design. Previously focused on whether a Web site can function on two different browsers, it now shifts to whether it can function properly on a variety of devices with completely different characteristics, with different screen sizes, different performance, different use environments, and different interfaces. While responsive design and customized sites for devices can help us create designs for different experiences, there are still many times when we have to make a unified decision. At this point, the concept of "average law" may help. This concept is used in UI design for a simple process: to design a good experience for a range of different devices, we must allow some interfaces to appear occasionally imperfect. We have to make a small compromise to ensure that our design is well adapted to other environments. Touch-First design with the "average law" characteristics of the site has the touch interface should be to the most recent desktop design. In the occupied area, the finger is larger than the mouse pointer, so the finger needs a larger touch area. To ensure availability, the interaction elements need to be larger. When the area of the interaction element increases, the other elements need to be increased accordingly to maintain balance. This needs to be set through the margin and padding two properties.

The new Gmail design has a large number of blank areas, the button set an additional padding. Although it is designed for the desktop only, it can also be well compatible with touch devices. The ipad builds bridges between the touch screen and the different sizes of desktop screens. The ipad's popularity has accelerated the impact of touch screens on desktop interface design. If you look at some of the most recently redesigned products, such as Gmail,twitter, you'll find that web design has become markedly different. They look more "plump". There are more blank areas, the buttons have more padding, and the elements on the top seem to increase a lot. Of course, other factors are also playing a role, such as the steady growth of desktop screen size. When the mouse provides "too much" space, and for the fingers, space just good, our design even if finished. We allow a slight deviation from the standard of an experience to gain better support for all possible experiences. It is worth noting that a touch-friendly UI is easier to use for users of the desktop mouse. Easy touch control button, easier to be clicked.

Microsoft Metro Style design has been influenced by the idea of touch first

Responsive design to achieve the goal of unified design

While much of the discussion about response design is about responsive design techniques, responsiveness is not the ultimate goal. It is a means to an end. Design is responsive and is designed to achieve some other goals. It is possible to support different content, to serve images transmitted in low bandwidth, and to better display layouts on smaller screens. It is also possible to provide a unified experience on a wide range of different devices. A train with responsive design can reach the destination of a unified user experience design.

Boston Globe website has done a great job in this area.

Boston Globe brilliantly applied responsive design to a large web site. Responsive design strategies enable a simple design that adapts to any device the user reads Boston Globe (that is, Apple Newton). This is not just the credit of the front-end engineers. This can be achieved with the use of media queries and JavaScript two technologies.

Prior to mobile priority design, the case for graphic design, but the concept of "average law" should be applied to product design, user experience, information architecture-almost any other area of design. Let's look at product design and mobile priority design ideas. Start the design process from a mobile device perspective and build products that meet the limitations of your mobile environment, and you need to focus on the most important elements of your product. As Luke Wroblewski says: "When a team moves a priority design, it ultimately creates an experience that focuses on the most important tasks that the user wants to accomplish, without any mealy or fragmentation of the interface." This is beneficial for both user experience and business. "Twitter's latest revision validates these principles.

The new Twitter version uses a minimalist design and has a consistent experience on a variety of devices. One of the goals of Twitter's revision is to provide users with a consistent experience, both on the computer and on a variety of mobile devices. Getting a consistent vision and experience is a challenge for the UI, but a consistent experience with the entire product on different devices is a bigger challenge. In response to these two challenges, mobile priority design can help us achieve.

In the Twitter makeover, I found an interesting thing about the impact of the mobile experience on the entire product design. For example, in addition to the Tweet button, all action buttons are arranged under four tabs of Home, Connect, Discover, and Me. This simplistic design works perfectly in small-screen devices, and four items can be "Together" in the tab bar. In a desktop Web site, some additional features are added, but simplicity based on the mobile version still needs to exist. Although there is a lot of space on the desktop version to complete more complex designs, the design still has to be constrained and better adapted to ensure a consistent, multiple-device experience.

Be careful of the "wolf" in the tuning system before Bach, the music is played at the same time at the discordant intervals of the notes will produce an ear, roaring sound. Musicians call this sound "wolf howl". In the interface design, when the visual or interactive elements designed for an experience are transferred to another experience environment, we call this element "wolf". Recall that you have struggled with your finger to click on a small, mouse-designed link and painfully read small text on mobile devices and touch devices, and the interface elements on these devices depend only on mouse clicks. These are the "Wolves" on the UI.

Links to these articles depend only on the mouse to complete the interaction. When viewed in a touch-sensitive mobile device, their possibilities are reduced.

New York Magazine offers an easy-to-use, aesthetically pleasing pull-down navigation menu, but you can only click it with your mouse.

Note-response design, which provides a specific experience for the device, can indeed solve many of these problems. If we can adjust the size of a button to fit a particular environment, then we don't have to accept this unwieldy, holistic approach. But the number of devices we need to support will only increase, and all the possible options for customization are about to become unreasonable. Even if we can customize the perfect design at the executive level, it is still necessary to consider the adjustable, unified access design at the conceptual level.

Several considerations are listed below

Responsive thinking even if you are not implementing a fully responsive design, simply reacting in a responsive way can be useful for implementing a usable, unified design.

Touch-Priority thinking the button that is designed for the finger touch can also be clicked with the mouse. But for the mouse design button, touch with the finger will appear too small. Touch-priority design to ensure that your site and application are well migrated to other environments.

Unified thinking is the same as "early testing, often testing." In the design process, you should think about how your design works successfully on different devices as soon as possible.

Mobile-priority thinking mobile priority design allows you to focus on the things that matter to your success. Maintaining a focus on the most important features makes it easier to achieve a unified experience on different devices.

Careful interaction behavior is not uniformly supported in various interfaces. The ability to perform with the mouse may be problematic on the touch device. Actions done by touch may not be performed with the mouse. But this does not mean that we cannot use them, but we should be aware of their use restrictions.

We want users to have a perfect experience with our sites and applications on different devices. We also hope that the fruits of our labor can be used in as many environments as possible.

Original link: Designing the Well-Tempered Web via:csdn