Touch screen and user experience: impact on the nature of Design

More and more people use mobile phones or tablets to browse Web pages. The website needs to be adjusted so that people can read their content without the mouse or keyboard. Generally, the response is "Isn't it just another independent mobile phone user interface !", In the past, this solution was quite effective when mobile phones were relatively small, but it was very short-sighted for big screen mobile phones and tablets.

This article will show you how to design websites through several regular or unconventional websites to make the user experience more "Touch-friendly.

Focused website VS responsive website

Websites or apps that are affiliated to many websites are designed for touch screen users. So that they can focus on such users. However, since the websites are separated, the URLs that the website depends on may cause the user to open the wrong link or the mobile user to open the link and find that the page cannot be found.

The biggest problem is that the mobile version often lacks the characteristics and information of the common version, which is a little less appealing. Website features and interactive interfaces are simplified, buttons become larger, and options are reduced. This can be solved through responsive design. The responsive site design takes into account the display problem of different platforms, so as to achieve a display without losing quality. The advantage is that you only need to design one site, instead of designing another mobile version.

The essence of design is different

Before designing a webpage, consider the essential difference between the touch screen and the desktop. Hitting a page on a touch screen is meant to scroll, but on the desktop you need to slide your scroll wheel. Trackpad is a touchpad that uses Apple's interactive touch technology. Apple tries to use it to change the traditional operation mode. However, Apple's products are at a disadvantage whether PC users or MAC users are generally using rollers or slide.

The buttons on mobile devices must be larger, in order to be accurate. There is no more annoying situation than "you want to open a link but suddenly click it wrong and you need to return it. In addition, because there is no cursor, you do not need to comment on the link. All in all, you need to be "clickability ".

Another point is about the accuracy of the input of mobile devices, because the touch screen is either resistive or capacitive with different sensitivity. The sensitivity of the resistance type is lower. Therefore, the design must be combined with two different screens to consider different design positioning for different mobile devices.

Screen positioning and Aspect Ratio

The screen resolution is varied, and the rapid development of the technology market leads to the diversification and specialization of screen sizes. The screen sizes vary with manufacturers. Look at the screen of the smart watch. It is no longer a quadrilateral screen. By rotating, the mobile screen not only shows portrait vertical), but also shows Landscape Painting horizontal), which makes it more complex.

The answer to the question is the liquid layout, which can be self-adjusted for different scenarios and can be changed for horizontal and vertical display. Some websites use this Adaptive Layout to greatly change the website appearance and optimize control. It also exploits the potential of screen orientation.

The scroll wheel of the mouse is designed to facilitate vertical movement, since Apple supports more innovative forms of touch sliding to pull down the page, rather than using the scroll shaft. Many users use touchpad or touch screen. As for horizontal slide with more innovative ideas, let alone. Most apps adopt horizontal sliding. The most successful horizontal sliding case so far is Kindle. So why not implement it in your web UI? Many single-page websites have only one horizontal axis, But buttons are usually used to guide users to slide, because many users may not understand the operation method.

In the design form, horizontal sliding and vertical sliding may be very similar, but the rational use of them can achieve multi-axis scrolling, which may not be implemented in the browser. Many users prefer single axis, because it is easy to find the direction of multi axis, and the Single Axis only needs to be drawn back to return to the main navigation bar. This may not be so easy for dual-axis websites, because the navigation bar needs to be static, so use the HUD style navigation bar.

What interaction interface should your page adopt?

Obviously, every user interface is applicable to various types of websites. Therefore, ask yourself the most basic question: who is your target user? What do you want to promote? What kind of impression do you want to create? Young people prefer touch screens, while older users may prefer desktops, but older users may also need larger buttons and clear user interfaces. There is also a revolutionary user interface. If no one can understand how to use it, it is meaningless. Therefore, remember that the purpose of creating a user interface is to let users know how to use it at a glance.

Radial menu

A radial menu, or pie menu, is a circular context menu that uses context expansion in multiple directions, rather than a menu that provides further options by extending the width.

This is an intuitive design that prevents users from getting lost in a wide variety of sub-menus ". Another advantage is that compared with the conventional drop-down menu, the touch screen user can better control the operation, because the lateral operation is more accurate than the hitting operation. If a radial menu is used, the website will greatly improve the user experience of touch-screen users, and the extended button switch makes people think of the console in the game. The radial menu simplifies lengthy menus and becomes a simple form, increasing the efficiency and ease of use of the website.

The radial menu is an excellent context information display experience. For example, you can see a food image on the website using this menu. Click this picture, then there are options for forwarding, recipe links, Food Ingredients List, and image saving. However, you must be cautious when using such menus to ensure the applicability and conciseness of the menus. Otherwise, the user will feel overwhelmed by the flood of "menus with logos and words. Static radial menu is better than dynamic, because static is better and convenient to choose, as to the dynamic back of the textbook is Phong (http://phong.com/), very messy operation experience.

Anthropomorphic

The appearance and functions of anthropomorphic copying objects are designed to create an intuitive interactive interface, which is no longer popular recently, especially since Scott Forstall resigned from Apple, in a flat design, Jony Ive takes over iOS and may take over OS X in the future. Anthropomorphic push Apple to an unprecedented level of intuitive operation design. For example, Contacts on Mac looks like an address book, or Newsstand and iBooks on iOS looks like a shelf. This design is easier for users who use touch-based interaction.

The familiarity brings a sensory intuition. This is the key to preparation. Users can immediately know how to interact by combining this kind of similarity with real objects. A good anthropomorphic design allows users to understand the topic at a glance, know what the page is for, and do not need to highlight the prompt box.

Dial-Up interactive interface

This is a combination of the interfaces of many elements above. The whole user interface is simple dialing, which looks very similar to the radial menu, but it has a center and expands the options, dial-Up rotation for single-choice. This is very useful in music-type websites/apps. It is very convenient to select, pick, and adjust the volume by dialing. The dial-up UI is used in the SHSK 'H (http://www.shskh.com/www/) column to facilitate the user to choose the desired audio track.

Minimalism

Minimalism is to cut the interface as much as possible until there are some necessary elements left. It is very convenient for mobile users because it reduces loading time and traffic and allows users to quickly find the required information on a fresh interface. Today's minimalism is not only "subtraction" on websites, but also forms a new form called "flat design"

The key to flattening is that people no longer focus on user intuition as the core concept, because they have learned the interactive interface and become familiar with operations, therefore, the current design should go beyond the concept of "guiding users to do it. The interactive interface eventually becomes a tool instead of a mentor. The flat design features bright color blocks. In iOS7, the "angle" gives way to a colorful flat design.

Finally, I want to end this article with a website that is somewhat distinctive. Thibaudhttp: // www. thibaud. be/) is a creative developer who once designed websites like Pikibox. The Thibadu website mentioned here is very "Touch-friendly" and does not limit the applicability of desktop users.

The simple design results are very beautiful. Professional and complete personal information is displayed, and it is very interesting to operate. At first glance, you will know how to operate this website. Of course, a large part of the design power is also handed over to the user, the user can change the location of the navigation bar, adjust its space location. The computer version provides four page forms. I suggest you try it.