Website Design Analysis: three major website design principles that the UI should follow

With the evolution of technology, the art and skills of Web design are constantly evolving. New technologies create new challenges while new challenges require new solutions. We usually work in unknown fields and need to provide new solutions. Considering the limited Web design history, we must go beyond the current field to answer more challenging questions. To this end, we can seek solutions that can help us solve problems by learning from the development history of other unrelated fields, such as music. The following is a small story about Bach in the early 18th century.

Bach and The Well-Tempered Clavier completed a book called The Well-Tempered Clavier (The twelve average law piano set) In January 1972, each volume has a total of 24 Prelude And feignment. It is now hailed as one of the most important works in the history of Western music. At that time, it was impossible to separate music for the 12 main keys. However, Bach composing all 12 audios. It was his set of twelve average piano music sets that finally proved to people that the twelve average music can be used for composing, and its effect is wonderful. People have never experienced it before.

The solution adopted in this process is to redefine the concept of "joint debugging. By modifying a certain interval, each piano key is slightly deviated from the perfect tone, which produces a sound adjustment system that allows people to play the music in all the keys. Sacrifice a small number of individual qualities to achieve a more perfect overall effect, known as the "average law ". Although this case is irrelevant to the website design, the purpose is the same: Make each piano key slightly defective, so that the overall performance of the keyboard is perfect.

　What do UI designers need to do?

In recent years, designing for multiple devices has become the most exciting development in the Web design field. In the past, I mainly focused on whether the website can run normally on two different browsers. Now I want to transfer it to whether it can run properly on a variety of devices with completely different features, these devices have different screen sizes, different performance, different use environments, and different interfaces. Although responsive design and device-tailored websites can help us make designs for different experiences, there are still many times when we have to make unified decisions. At this time, the concept of "average law" may be helpful. This concept is applied in the UI design in a simple process: To design a good experience for a series of different devices, we must allow occasional imperfections on some interfaces. We must make a small compromise to ensure that our design can be well adapted to other environments. Websites with the "average law" feature of the touch-first design should have the touch-style interface in the latest desktop website design. In terms of occupied area, the finger must be larger than the mouse pointer, so the finger needs a larger touch area. To ensure availability, the interaction element needs to be larger. When the area of the Interaction element increases, other elements also need to increase accordingly to maintain a balance. This needs to be set through the margin and padding attributes.

　　

 

The new version of Gmail has a large number of blank areas and additional Padding for buttons. Although it is only designed for desktops, it can also be compatible with Touch devices. The iPad builds bridges between the touch interface and desktop screens of different sizes. The popularity of iPad accelerates the influence of touch screens in desktop interface design. If you observe some well-known products that have just been redesigned, such as Gmail and Twitter, you will find that the Web design is obviously different. They look more plump ". There are more blank areas and more Padding buttons. The above elements seem to increase a lot as a whole. Of course, other factors are also playing a role, such as the steady growth of desktop screen size. When the mouse is provided with "too much" space, and for fingers, the space is just better, our design is complete. We allow Slight deviations from a certain experience standard for better support for all possible experiences. It is worth mentioning that the touch-friendly UI is easier for users who use the desktop mouse. Easy to touch and control buttons, making them easier to be clicked.

　　

 

The Design of Microsoft Metro style is influenced by the touch-first idea.

　　Responsive Design for unified design

Although many discussions about responsive design are about responsive design technology, the response capability itself is not the final goal. It is a means to achieve the goal. The design is responsive for other purposes. It is possible that images transmitted in low bandwidth can be better displayed on a smaller screen to support different content. It may also provide a unified experience for a wide range of devices. Equipped with responsive design trains, you can reach a unified user experience design destination.

Boston Globe has done a great job in this regard.

　　

 

Boston Globe's outstanding application of responsive design to large websites enables a simple design to adapt users to read any device (even Apple Newton) Boston Globe uses ). This is not just the credit of front-end engineers. Media Queries and JavaScript can be used together to achieve this effect.

The case prior to the mobile prioritized design mainly targets image design, but the concept of "average law" should be applied to product design, user experience, and information architecture-almost any other field of design. Let's take a look at the product design and mobile-first design ideas. Starting from the perspective of mobile devices, you need to focus on the most important elements of the product to build products that meet various restrictions in the mobile environment. As Luke Wroblewski stated: "When a team performs a move-first design, it ultimately creates an experience that focuses on the main tasks that users want to accomplish, there is no detour or interface fragment. This is beneficial to user experience and business ." A recent Twitter revision validates these principles.

　　

 

The new version of Twitter uses the simplified design to provide a consistent experience on a variety of devices. One of the goals of Twitter's revision is to provide users with a consistent experience, either on a computer or on a variety of mobile devices. Consistent visual and Experience is a challenge for the UI, but it is a greater challenge for the entire product to achieve consistent experience on different devices. To address these two challenges, the mobile priority design can help us achieve it.

In the Twitter revision, I found an interesting thing, that is, the impact of the Mobile Experience on the overall product design. For example, all action buttons except the "Tweet" button are placed under the "Home", "Connect", "Discover", and "Me" labels. The simplified design works perfectly on small screen devices, and the four projects can also get along with each other in the tab bar ". Although some other features are added to the desktop website, the conciseness Based on the mobile version still exists. Although the desktop version has a lot of space to complete more complex designs, the design still needs to be constrained and better adaptive to ensure a consistent multi-device experience.

Be careful when there is a wolf in the sound tuning System before Bach, the notes that are played at the same time may generate a side ear and a roar. Musicians call this voice a "Wolf ". In interface design, when a visual or interactive element designed for a certain experience is transferred to another experience environment, it will become invalid. Therefore, we call this element "Wolf ". In retrospect, you have struggled to tap a very small mouse-targeted link with your fingers, and read very small text on mobile devices and Touch devices, the interface elements on these devices only rely on mouse clicks. These are the "wolf" on the UI ".

　　

 

The links of these articles only rely on the mouse to complete interaction. They are less likely to be viewed on touch-based mobile devices.

　　

 

New York Magazine provides a nice drop-down menu, but you can only click it with your mouse.

Attention: responsive design, providing specific device-specific experience, can indeed solve many of these problems. If we can adjust the size of a button to adapt to a specific environment, we do not have to accept this heavy and global approach. However, the number of devices we need to support will only increase, and all possible customized solutions will become unreasonable. Even if we can customize the perfect design at the execution level, it is still necessary to consider the adjustable and uniform access design at the conceptual level.

　　Several precautions are listed below

● Responsive thinking, even if you are not implementing a fully responsive design, simply thinking in a responsive way will be of great help to achieve an available and unified design.

● You can use the mouse to click the button that is designed for finger touch. However, the buttons designed for the mouse appear too small when you touch them with your fingers. The Touch-first design ensures that your websites and applications are well migrated to other environments.

● Unified thinking is just like "early testing and frequent testing. During the design process, you should think about how your design runs on different devices as soon as possible.

● Move-first thinking move-first design allows you to focus on things that are about your success. Keeping an eye on the most important features makes it easier to achieve a unified experience on different devices.

● Careful interaction behaviors are not supported in a unified manner on various interfaces. The functionality completed with the mouse may be faulty on the touch device. Operations completed by touch may not be executed with the mouse. But this does not mean that we cannot use them, but we should be clear about their limits.

We hope users can enjoy a perfect experience when using our websites and applications on different devices. We also hope that our labor results will be available in as many environments as possible.

Http://uxdesign.smashingmagazine.com/2012/01/17/designing-well-tempered-web/ via: csdn