Design principles for Web to WAP porting

From the web side directly to the WAP2.0 form, the outstanding contradiction is that the information architecture is not suitable for small screen devices, vertical pages of the lengthy and WAP2.0 expression constraints.

To enhance the experience of small screen browsing, you should include the following core tasks in your design:

Control information Dimension

A WAP Web page can support a smaller page information dimension. "Mobile device Interaction Design" describes 1-D, 1.5-D, 2-D information presentation methods [1]. It is summed up as 1-D vertical tile and 1.5-dimensional page folding, 2-dimensional thumbnail index and so on to deal with the page dimensionality reduction.

For example: Mobile phone Tencent News page, remove the navigation section, mainly vertically tiled news body content, share reprint, related news recommendation, related search, user thermal commentary, hot news, wonderful recommendations and other content modules. To reduce the page length, you need to collapse the module information. In addition to the content of the news text of the epitaxial reading module only selected show 3 or 5, users need to "see more" or click on the module title for detailed extended reading.

Again such as: Mobile QQ friend dynamic log design, only show the log show 3 lines of text content, the rest of the content folded up. Leads the user into a deep dimension view.

Information layout

The homepage of the first screen is significant to the strategy of the whole station. It is the most important way for users to view the whole station, at the same time, it can establish the visual impression and establish the brand image. Don T makes me look very much stressed that the homepage of the site, especially the page head to clearly show what the site is, what users can do. At the same time, the first screen of resources in small screen equipment is particularly scarce, so often the whole station interaction design of the most important.

The homepage of the small screen device has its special rules. QVGA in the vertical screen mode, in 13th font display, a screen of only 13 rows or so. There is less display in horizontal screen mode. So in the choice of premise (such as Nokia E71 horizontal screen model, can not be vertical screen reading) users rarely like to use the horizontal screen mode to read long pages. The first screen defaults to the top will be the entire station logo and the entire station navigation.

Mobile Sina Homepage Head navigation design is the use of background map to achieve. UCWeb Browser does not support the background image display, directly leading to the left and right structure of the navigation deformation, visual effects loss.

The mobile phone Sohu logo Realization Way is the foreground chart, so in the browser (do not forbid the picture to browse the case) can display the logo, but the first head of the model adaptation problem is still more serious.

Mobile Tencent Network WAP2.0 revision, home first screen design

Analysis: Mobile Tencent Network WAP2.0 the first screen in different browsers on the adaptation effect has been better controlled. The navigation was subtracted from the WAP 1.0 phase of 3 lines to 2 lines, leaving only important product entrances, other channel entrances scattered below the first screen and the News center. The mobile Phone Tencent Web page information layout made an improvement.

Using reasonable navigation

The most common navigation methods on the desktop are the multiple lines of global navigation links, breadcrumbs, menus, toolbars, etc., on the head of the page. Where to tell the user where to facilitate the user to go to other places of the logo are counted navigation. It is generally easy to identify, in the prominent position of the page, the form and position are relatively fixed, long-lasting; Similar navigation in the page has exclusivity, that is, the function of similar navigation should be based on the page needs to make judgments and trade-offs, see the following "bookstore" case.

In the WAP page, the View field is very narrow, the information dimension is very small. With the same amount of information, the length of the WAP page is significantly higher than the Web page. Many WAP product page head and the bottom of the page adopt the design of navigation reappearance. For example, the design of the mobile phone Sina Network layout of multi-line navigation links in the head and the end of the page. Happy 001 and everyone WAP2.0 is designed to reproduce tabbed navigation at the head and end of the page.

Mobile Tencent Network WAP2.0 navigation design, the first problem is how to let users quickly understand the global content and function of the Web page. In the mobile phone Tencent net each channel Homepage's head position has the navigation link which uses for the overview, lets the user have the basic cognition to the channel content. The end of the front page of the channel is "back to the top" to lead the user back to the head. Use multiline navigation links to enter other modules. The two-level page of each channel is multiplexed with breadcrumbs at the head and end of the page.

Mobile Tencent Web Bookstore WAP2.0 before the revision of the navigation problem

Book Book-categories-Subcategories page navigation page cards and breadcrumbs are used with the function of overlap. The front two items in the breadcrumbs can be linked in the top tabbed navigation.

When modified, the Category tab is grayed out as the current selection, indicating the orientation. The original crumbs location to the column title, a lot of simple and clear.

Reduce the key work when browsing

Browse the page to minimize the user scrolling operation. The lower the vertical length of the page, the less the information exposure, the greater the difficulty of operation. Therefore, it is important to rank the importance of information and to look at the primary operational tasks of each page with a stream of thoughts; Also, take full account of the effect of the graphic elements in the page on the focus jump frequency (described in detail in the following interactive detail section).

Take the mobile Tencent network WAP2.0 download channel for example. As shown in the interactive design below: Software introduction page after the head revision, the new download package link. This satisfies a number of requirements: The user has identified the need to download the software before entering the software introduction page, and the model adaptation is also clear. At this point, users do not need to cross the distance between two screens to point to the download package.

Interface visualization

Visualization is an important improvement of WAP2.0 than WAP1.0. The WAP1.0 page cannot control the style and color of the text, only the difference between the link and the non link, support a small number of pictures, and a simple layout style. Browsing WAP1.0 pages, users need to pay more attention to the content of pure text to distinguish their functions, to determine how to operate. The addition of visual control, functional zoning, can help users better understand the function, guide the user's attention. The following key analysis of mobile phone QQ space WAP2.0 new revision design:

In addition, the design should also pay attention to the use of WAP2.0 graphical interface performance, while considering the use of graphical elements of the user is not meaningful.

The color management of the channel is also an important design element of the whole station integration. Many of the channels want their own channel color special processing, such as games, music channels can use a more youthful and lively tone, and financial, military channels want to use highlighting its connotation of color. But this will be on the mobile phone Tencent web browsing experience brought about by the brand image confusion, the visual impact is too large and so on. Therefore, after many trade-offs, the basic unified blue tone of the whole station has been realized.

Resources：

[1] "Mobile device interaction Design", author Matt Jones,gary Marsden (2008.2)

(This article originates from Tencent WSD Blog, please indicate the source when reprint)