Touch screen version of the Web Interactive design: Less is the essence of many design

Article Description: Touch screen version of the Web application, the implementation of mobile scene user needs, embodies less that is the essence of many design and performance of the mainstream touch screen interface temperament, can be counted as a preliminary standard. In the design process need to constantly polish the details, enhance the experience, make the design perfect.

Touch screen version of the Web application, the implementation of mobile scene user needs, embodies less that is the essence of many design and performance of the mainstream touch screen interface temperament, can be counted as a preliminary standard. In the design process need to constantly polish the details, enhance the experience, make the design perfect. The next chapter will tell the story in the context of the case.

>> Enhance the details of the experience  

Make the message more readily accessible

Turn the page big discussion

Important numbers in the chest

About the soft keyboard

Big talk screen switch

Let the interface be more "touch mode"

dialog box Design

Discussion of link underline

Save the Way

Do not design the Web page as a client

————————————————————————————————

let the message be more handy, the operating threshold is lower

The Fitzpatrick rule (Fitts ' law,1954) is a human-computer interaction rule. It illustrates that the time to move quickly to a target is a function of the distance from the target and the size of the target. The farther away the target is, the smaller the target area is, and the longer it takes to move to the target. The Fitzpatrick rule applies to the hand or finger for physical touch or on the display using a pointer virtual point.

Microsoft Office 2007 (Word2007, Power Point2007, Excel2007) has an improved design that applies the Fitzpatrick rule well. The upper-right corner of the selected text surfaces the most commonly used rich-text Editing tool panel, and the Transparency of the tool panel increases as the mouse's distance from the target increases.

In the touch screen page design, using AJAX dynamic asynchronous request and local refresh characteristics, can realize the Fitzpatrick law. According to the situation analysis, with the "hand" response to the most urgent needs of users. For example: Mobile QQ touch screen version of the dynamic list of friends design. Display a friend comment for each feed and leave a "comment" and "reply" Action entry to guide the user to participate. Convenient operation, clear feedback will stimulate the interaction between friends. Compare WAP form product interaction, do not need every step page to jump, experience like flowing smoothly.

Turn the page Big discussion

>> Common touch-screen paging control type

>> Page Control Selection

>> Design Case Derivation--text page

The nature of the page turn is "control". A controlled display of the content of a page, to avoid a single user to push too much information, control the page flow, improve the page response speed. In fact, when the user finds the information he expects on the first page, he is "lazy" to turn the page. Soso search results, the user paging behavior in a single search for the ratio of the evidence of this behavior pattern. As a result, the user can not be interested in the lack of information, and his expectations will be drastically reduced. Secondly, the time consumption of the jump page and the flow cost are very sensitive users. Our design strategy is as follows:

• Touch Screen page show more information (touch mode determines the cost of continuous scrolling is very small)
• Select the page-flipping control based on the type of information
• Enlarges the response area of the control to make the operation as lightweight as possible

Touch-screen pages often use page-flipping controls to differentiate interactively by content:

The client can scroll through the list load command by moving the limit gesture at the edge of the list. Web pages are not achievable.

The selection of page-turn control is considered from the content level, content nature and organization mode.

Note: The blue area number corresponds to the number of page-flipping controls above  

Recommendation: Page control optional Form more, in a product with a relatively centralized page control type, generally do not exceed 3 kinds. Thus, reduce the logical complexity of development, and give users a more consistent operation experience.

Design Case Derivation--text page

When designing the page for the reading of the information body, it was assumed that the text contained its page-flipping control just within a screen (320pixelsx480pixels). The experience of body reading can even be like ibook experience. Creative starting point is: to limit the length of the page longitudinal, to ensure that the following modules in the body of exposure. In addition, if a page of text length is not limited to the screen area, page jump when the pages need to roll up quickly to the top of the body area, this jump is easy to cause the user's vision lost.

Yet this delightful vision has brought many difficulties in achieving it. First, the measure of the high limit, it is necessary to count the total number of full-width characters in the full text, which is relative to the consumption of performance; In addition, when the text is equipped with pictures, the picture space is not accurately controlled; Moreover, when the screen switch, the single screen capacity is changing, it is bound to need recalculation and typesetting. Therefore, the decision to turn the text of the page design for the current common vertical extension, that is, numbering 7 corresponding to the way of the page.

important numbers in the chest

416-iphone-safari The first screen height of the vertical screen

200-iphone-safari Vertical Screen Soft keyboard after Exhale left to show height

268-iphone-safari The first screen height of horizontal screen

94-iphone-safari Horizontal screen Soft keyboard after Exhale left to show height

Add that the Iphone-safari address bar is 60 pixels high and can be hidden by program control after the page is loaded.

Android platform models are numerous, screen resolution is uneven, resulting in different model system control size differences, first press not table. In addition, the Android-chrome browser automatically moves to Full-screen browsing mode after loading completes, and there is no additional occlusion in the viewable area of the page. Just avoid the problem where the page controls are obscured by the Android-chrome browser surfacing the tool bar.

About the soft keyboard

The client can control the pop-up soft keyboard type, such as a numeric keypad or a full keyboard, based on the contents of the input box. Web pages are not judged.

When the soft keyboard is exhaled, the current active input box is automatically moved up and is not obscured by the soft keyboard. A soft keyboard that is exhaled from the Iphone-safari browser, with a semitransparent form auxiliary bar (form assistance) that is 44 pixels high. This form auxiliary bar is not hidden by program control.

Make sure the input is fully displayed by qualifying the input area height or supporting the page slide (the system frame cannot be slid).

Long text input--the handheld terminal text input becomes the bottleneck of UGC because of its efficiency and operation difficulty. To improve the writing operation, it becomes a breakthrough to enhance the experience. Touch-screen pages have greater control customization and display space than WAP pages (single-line input boxes). To enlarge the editable region of long text, it is convenient for users to look at the whole situation and to edit locally. The input box height should be set to the soft keyboard pop-up after the full display editable region is advisable.

The soft keyboard of the Android platform's horizontal screen state is an exclusive input state, where the input box and the keyboard button fill up full screen. There is no page occlusion problem.

Here to emphasize: size, in everyone's impression, it seems that only visual designers need to thin pixel. In fact, interactive designers also need a strong sense of design and accumulation, especially in the design of wireless products.

Big talk screen switch

>> client-side screen Switching mode

The way of >> extensive implementation

Main points of >> page design

>> Design Case Sharing

Based on the client-side product design, the screen direction can be determined by the product shape.

A Lock horizontal screen mode (such as game, video) or vertical screen mode (Long page browsing class products);

B Differentiate the display content of the vertical screen (such as the iphone's ipod when the use of horizontal screen display cover Flow mode, when the screen display list or single playback mode);

Open permission allows users to set the vertical and horizontal screen direction induction.

C Open permission allows users to set the vertical and horizontal screen direction induction.

But the Web page can only adapt to the browser itself screen switch. Therefore, in the design of the page should take into account the display of the screen. For example, focus on the first screen effect of the page, you should pay attention to avoid horizontal screen after the loss of information. Large image previews need to preset a default picture size that is common to the screen.

In the product research process, saw two kinds of web page vertical screen cut to horizontal screen of the more extensive implementation. One is equal to enlarge the content of the page (including text and pictures) to fill the horizontal screen page, one is to make a vertical screen page to reserve the width of the horizontal screen, the switch automatically fold line. Both types of front-end implementations are detrimental to the experience.

The main points of the design of the screen display are:

• Quickly respond to
• Natural transition
• Avoid page content that is too large to cause the page to be repainted
• Explicit indication of direction of interaction
• Page position did not jump a large, etc.

Interaction design takes precedence over the best presentation mode of the product. For example, mobile phone Tencent network, mobile QQ space long page suitable for accommodating short title information, vertical direction has a higher efficiency, so the first design vertical screen mode (users will generally choose the best state). The horizontal screen of the page, the front-end to achieve adaptive adaptation. At the same time, the foreground development control page Visual Center is always in the screen, ensuring user controllable. Some special pages require additional design in both states.

Album Display--in Sudoku mode, in addition to the calculation of thumbnail size evenly divided screen, but also to check whether the marginal size can leave a half line thumbnail, to indicate the direction of the user scrolling.

Picture size--take care of the visible area of the horizontal and vertical screens, and define the limit size for the preview of the large image (to avoid a new picture with different dimensions when you turn the screen off). Maximize the visual area, remove the additional visual interference, we have designed an interactive detail: The user clicks the thumbnail to enter the big Picture preview page, after completing the page refresh, the foreground control automatically hides the page head (occupies the space the logo bar and the navigation bar), promotes the browsing picture the experience.

Let the interface be more "touch mode"

Multi-touch experience subversion of the traditional key operation of the greatest charm is direct manipulation. Web design, also pay attention to play the charm of this experience. Let's share the login verification code and score two examples.

Login Verification Code--the basic component of the login page includes the account number and password input box. QQ products for security factors and brush strategy considerations, in unconventional circumstances will appear in the Verification Code input link. The verification code for a PC-side web page must usually be refreshed by clicking on the link.

Let's pause here and think about how the next touchscreen version of the verification code is designed better.

In order to direct the operation and straightforward semantic design, and visual designer hashed together, the final verification code directly designed as a button, click on the verification code itself triggers the refresh.

Scoring-five-star scoring system. The design of a large five stars, implying direct user touch. The results of the score can be clearly fed back to the user, allowing for a clear relationship between the scoring operation and the evaluation system.

dialog box Design

Based on the Iphone-safari and Android-chrome browsers, the System dialog box is configured with only three different modes.

In addition to the above three standard dialog boxes other than the design requirements, you need to paint the implementation. Like what:

• Double input box required in dialog box
• Trigger dialog box content to refresh in real time
• Custom button Name
• Tips for disappearing automatically (Toast)
• dialog box width adaptive screen width, etc.

It is worth noting that, for the sake of high performance, the Self Painting dialog box has certain limitations to the visual design. We should be careful to use irregular shape, reduce the use of pictures.

Throughout the product, there are parts that can call the System Standard dialog box directly, and some must be drawn from the dialog box. Usually, we will follow the unified principle, let the whole product universal set of dialog visual design.

Discussion of link underline

>> Design Principles

>> design Case Sharing--links can touch

>> design case Sharing--search results page

The touchscreen interface avoids underlining the link, because it looks more crowded (see iphone HIG for Web applications). However, the touch screen interface does not have a mouse hover state, so it is clear to distinguish between links and links in the interface. At the same time link and non-link color to maintain a high degree of uniformity, to avoid user guessing and thinking.

The textual information is mixed with the design of the link, to reserve sufficient touch range (above 29pix height). Like the iphone version, ask the link design in my home page.

For the design of the Soso search results page, I thought: Now the search results are basically plain text. A search results module consists of information such as title, content summary, source, time, page format, and so on. Users browse the results page, in fact, the visual information to do a two-step process: rapid separation module, and then in a very short time through the module in the title and summary of the results of the screening of interest. This is why a large number of text-only search results page, the contrast of a large number of text colors, to improve reading efficiency. This color must not be aesthetically considered. At this point, the title link underlined, you can improve the efficiency of module separation. Although the underline links, and hig to the link design requirements, but this scenario will make the page easier to read.

Save the Way

From the WAP page span to the touch screen version of the Web page design, as if to find the feeling of getting rich overnight. But the design of handheld terminals, saving is always a wise performance. Be cautious about traffic, use pictures and styles sparingly. Here's a way to get the savings.

>> Save Flow

Mobile Web pages can not directly display the PC side of the page image. Implementation of the image suppression can be by the front-end CSS compression resolution or by the backend server reconfiguration set of small size picture. The front-end implementation of the way, will allow users to see the adaptation of mobile phone screen small map, but the actual consumption is still the original flow. From the user's interests, we are in the image suppression of the implementation of the recommended background configuration, the server to bear the pressure.

>> Agile Response

Response time is a very important factor that affects the user experience. We can see from the feedback of the mobile browser user that the user is very sensitive to the speed of a fraction second browsing, and enjoy unceasingly. The performance of the browser itself is an aspect. On the other hand, in the design and implementation of Web pages, to continuously optimize the performance of the page, try to save time in every detail processing. Front-end engineers have done experimental analysis: page size within a certain level, response time is not the same as a single request of the page flow ratio. A more than 1KB download request and one more than 100 KB download requests, consuming almost the same response time. Time is spent basically on sending requests and waiting for server responses. The foreground coordinates the resource allocation, can enhance the page efficiency. In addition, from the User experience analysis, the user expects the page content to follow the gesture synchronized display. Therefore, similar to the sliding way of the design, it is best to read the unpublished content to improve the response speed.

Finally look at a picture: a "breath" of the user interface, compared to a long time no movement of the white screen, the experience of the superior is self-evident. The two pages have the same time to load, but the user's psychological perception of latency varies greatly.

Do not design the Web page as a client

There should be two opposing voices on this topic. Some product managers or designers unknowingly design a Web page for a mobile browser with a client-side taste. I agree that mobile Web pages will also be developed toward a similar client experience. But based on the limitations of the current mobile browser, I prefer to separate the Web page from the client-side form area. As mentioned earlier, Web page performance, storage capabilities and the ability to invoke hardware are limited, many places can not match the client. In fact, compared to the client, the Web page can properly load the content of a slightly more complex page information. Web pages should follow the flat structure, the flow of information browsing style.

The above is to touch screen version of the Web page product patchy design share. The purpose of writing this article is to learn from the problem and to promote it in the debate. So please point out a lot of flaws.

Finally, by popular to do the promotion. Invite everyone through the iphone or Android experience mobile QQ space (z.qq.com), mobile phone Search (m.soso.com), mobile phone asked (forthcoming), 3GQQ touch screen version (forthcoming), mobile Tencent Portal touch screen version, and a customized download channel for the Android Platform (Http://sd31.3g.qq.com/g/s?aid=index_a).