Mobile Client Search Engine: Improve the user's search experience on the mobile side

Article Description: the gorgeous transformation of simple pages-search App Product design.

The simple use of web search engine is always a good example in the design of Web products. It cleverly uses large white, a search box entrance, link arrangement form and brand logo to match each other, in a page to provide users with an excellent user experience. Powerful product features also make it a necessary tool to surf the Internet, helping users to explore the unknown network world.

With the rapid development of mobile internet and the rapid expansion of Mobile information, users ' demand for mobile search engines is increasing. So search engines are starting to brew their own mobile phone products. Compared with the PC, the handset side hardware is more limited, the use scene is more diverse, the interaction form is richer, therefore the simple webpage page transplant already cannot satisfy the user to the handset search engine the demand. So the simple page also began to become gorgeous, have designed their own independent clients. How do you design a simple page when you turn it into a client-side software? The following will be the step-by-step for you to reveal these product design strategy.

"Organize" the product structure, let the brand characteristic highlight out

The design of the mobile client is different from the web design. Because of the size of the screen and the impact of mobile end performance, the product structure and the Web page will be more complex, more levels. The challenge for the product is that the user has become accustomed to the way the web is being used, and they are unwilling to expend the effort to adapt to a new interactive product. Then when the search engine from the PC to show the form of the mobile phone end, how to organize these structures and levels, so that users can quickly understand the product structure, clear perception of its brand characteristics, is particularly important.

Google's product architecture consists of 4 major components, as shown above: Search areas, more application portals, category switching, and browsing toolbars. Compared with the Web page, the product's organizational structure is more, the client can no longer use the web end of the global static white layout form. But the designer cleverly utilizes the gesture operation to carry on the superposition change between the layer and the layer, matches the search area with the page end almost identical layout form. "Google" of the organization, so that users in the first use of mobile phone Google search products can share the web side of the mental model, reducing the cost of learning.

Bing's mobile search client organization not only perpetuates its layout features on the Web, but also highlights its brand-name daily photo service, which is the everyday picture push. Through a daily push to the client a high-definition picture, with the picture on the note information, enhance the client and user interaction, but also through its increased user's expectations of the software and stickiness (such as users will have expectations: tomorrow's picture will be what?) I must remember to look at it.

Second, some of Bing's details on the color palette make it very distinctive with its mobile platform, Windows Phone 7. As the Setup page shown above, Bing navigation the style of the bar and list on iOS and compares it to the WP7 on the right. This kind of organization design, has grasped the use habit of the brand advocate, also from the product design manifests its own characteristic.

"Split" information level to enhance the efficiency of the mobile end display

In the use of web search engine on the PC side, the search suggestions will be displayed after the user input, in which the server will be based on a certain algorithm will be the user often search words and the server is often the search keyword issued as a search proposal. But at the mobile end, because of the increase in input costs, so the search engine client chose to split the information level. By decomposing the different requirements of users in different situations, the content of the display is presented in stages, and the goal of choosing more opportunities is realized after the user has entered again.

Google is comprised of two states in the search for keywords. The first is to enter the input mode after the trigger box, which will display the search history with the icon, and the second is to display the search suggestions after the keyword is entered, click Recommend to launch a search for related keywords. The "+" on the right also achieves the goal of splitting the search proposal, allowing users to get more search advice by getting the right keywords on the box, and to launch a more accurate search.

Bing's search process is similar to Google's and is divided into two phases, but the details are handled slightly differently. Bing's search box is triggered to display the search history, but the records are divided by category, and at the bottom provide bookmarks and more historical entries. By splitting the portal, provide users with more points of opportunity.


When the keyword is entered, the search history with keywords is prioritized in front and divided by type, and the server sends out a search proposal highlighting the input characters and the characters that have not been entered. This split way makes it easier for users to differentiate from the visual level.

"Hide" secondary function, make the product task clear.

Search engine in use, in addition to the search text box in the input keyword after the search, by switching the classification of the search to limit, but also search engines are often used in the function. But on the handset side, because of the screen size limit and the search demand change, the type function and the main search task, compared to the priority level will be reduced. So in the product design will choose to hide the secondary function, so that the main task of the product clearer.

When the general client hides, it chooses the Drop-down list or the way the bubble pops up. And this new version of Google search client innovative search box to the top of the content and search classification hidden. By gestures to the right to pull out the search classification, so that users can be very fluent in any scene to initiate the search, and to achieve the purpose of classification switching. The "Hide" method makes the content level of the screen appear clearer. Enhanced interactive experience between users and clients.

And Bing's search classification is hidden in the input box in other pages of the presentation. When users select a category on the home page to search, then click on the Search box classification can be modified. This classification can be modified to show more levels, such as the "restaurant" of this search classification, users can also be more detailed to be through the name, near or the price of the search. But also because of the level of increase, users can not expect the next time there is a classification, as well as the number of levels of categories. So be very careful with this design approach.

"Additional" mobile product features, let the client move up

Compared with the PC, mobile phone products have more voice input, camera photography and geographical positioning of the mobile product features. The search engine from the end of the page to the mobile phone, they have attached to the characteristics of these mobile products, so that the client's search methods more mobile.

The process of voice search is generally the use of mobile phone products microphone trigger input voice, through the acoustic contrast system to identify the keyword to search, and launch a search. The introduction of voice search reduces user input costs, but also allows users in the case of handheld clients, while walking side search, and keyword Input method more natural, more mobile.

Google's voice search on the basis of this consideration of the mobile input environment characteristics. The user typically initiates a speech search in the event of a move, so the results of the speech search may be inaccurate due to ambient sound effects. Therefore, in the search results page, allow users to change the words similar to the pronunciation of the search, or the words entered the word after editing to initiate a search. Improved the accuracy of voice search in mobile search.

A photo search allows the user to initiate a search after taking a photo from a mobile phone camera. After a user takes a picture of a photograph, a photo search can identify the picture from three dimensions, a dimension is an object on a picture, a search for items, such as a shopping search or a location search, and the same or similar pictures, mainly from color and picture themes; Three is the text information on the picture, select this dimension, Users can choose to translate the text information or search for such vertical operations. The photo search helps the user to make the search picture, where the user can go where he is photographed and where he is searched. So that search can be everywhere.

Sum up. When the search engine from the end of the Web ported to the mobile phone to do client software, the product design considerations should not only be consistent with mobile phone mobile characteristics, but also on this basis to enhance the user on the mobile end of the search experience. Therefore, the simple Web page has been a gorgeous transformation to more suitable for the development of mobile platform characteristics.