Go into tool-type website--interpretation and typical cases

Referring to the tool-type site, we will first have a question: Thousands of web site sentient beings, exactly what kind of site is a tool-type site? What is the characteristic of it and how is it different from other websites? Search for relevant information from the Internet, there is no specific explanation of the term.

In order to facilitate follow-up research, this first combined with the results of the study before the students, a comprehensive collation, to provide a definition version of the tool-type site for reference:

--the so-called tool-type Web site, as the name implies is built on the Internet tools, is to help people to achieve a specific area of the target needs and provide a certain operating process, to complete the task as the main goal, web-based application tools.
Its main features are:
– For the purpose of accomplishing one or more tasks
-Focus on operational process guidance
– Emphasize fast completion of tasks
– The only way to accomplish this goal is to help users achieve it more efficiently

At the same time, many tool-oriented Web sites are specially equipped with a separate portal, which is focused on information presentation, dedicated to the value of tools, dynamic, etc., and provides login or download entry. Because of the high integration of this portal with the tool page, we also generalize it to the category of tool-type web site, called the tool portal (or the homepage of the tool website).

In order to help us to form a more intuitive concept of the tool-type site, you can differentiate the site into content-oriented and tool-oriented sites based on site functionality. On the comparison between the tool-type website and the content-type website, some students have made a detailed exposition (if you want to know more about the relevant articles), do not repeat them here.

Typical tool sites are: Google series (search, translation, documents, readers ...) ), Tenpay, Alipay, Data Cube, Salesforce, Xero, TA, dnspod, etc.

Typical content-oriented Web sites are: Sina, Tencent Network, Tianya forum and so on.

From the experience point of view, I would like to introduce a few typical examples of tool-type websites.

Monetize is the king of the line

Tool-type site, the most widely used should be we are very familiar with the Google series of products, such as Google search, translation, documentation, and so on, most of the Google search after the introduction of new tools. These tools have greatly facilitated Internet life for netizens.

Expecting so many product lines, it's easy to have different visual styles because of the difference in function attributes. But we see Google in the multiple product system under the visual style, regardless of navigation bar, color system, basic layout structure and so on are very unified, such as all background layer is black and white gray system, all new features are eye-catching red button, all function menu is left.

This kind of consistency greatly reduces the user to the new product cognition, the study cost, achieves the ripe realm ~ manifests the Google Experience team in the brand image and the experience standard strong formulation, the execution ability ~

xero--small and fresh, but very practical.

The following Xero, is a typical small fresh, I love it, from its simplicity and not simple, beautiful but not noisy, very consistent with the site's functional positioning.

Xero is a fully functional accounting tool for small businesses, with output including cash books, General Ledger, invoices and reports. As an accounting tool site, users are most concerned about the demands of course is safe, accurate, so Xero very keen in the portal and product pages in the unified use of the brightness of Blue + green to express, at the same time with the map, the structure of horizontal vertical, well-organized, will be safe, reliable atmosphere to create to the extreme.

In the information display, Xero portal has the typical characteristics of web2.0, such as a large number of white, size and font of the contrast application, and in the product page, the control element vision as far as possible subtraction, for example, the table does not vertical wireframe, chart figure color uniformity, button texture simplification and unification, All the clickable text including the general chain of the first page of the list signed all the unified blue, and so on, do these purposes, is to allow a large number of text data information is not redundant details of interference, so that the theme at a glance, to help users in a clean, comfortable environment to quickly complete the task.

The product was included in the best creator Uis by Nielsen Norman Group.

fork--Creative for brand image plus points

As a tool site, the value of the tool itself to the user can determine the success or failure of the site, but the portal is also like the product window, to attract visitors to quickly understand the use of products, value, and then use. Therefore, the success of the portal also has an important impact on the site. How to play the creativity in the color, the layout, or the mapping aspect, lets the portal as far as possible attract the eyeball, obtains the visitor's favor, is the visual designer's big topic. And the following Ford, in the map creative aspect is a typical, it is a significant feature of the situational design, let a person in front of the light.

Mention of the people will think of the sunflower, said Tencent people will think of penguins, mentioned MailChimp people will think of the Postman Monkey, now mentioned fork, people should think of this lovely in the boat to take the fork of the old fisherman. Perhaps its logo is inconspicuous, but with this spokesperson's foil, this tool, it is unforgettable. If you look at it carefully, you will find in several pages a graphic design associated with this sea theme. See these, even if you are all the way people, will not be curious to can not help point download to use?

It is worth mentioning that the portal page framework using the popular response web design mode, in the browser scaling, mobile phone access is the layout of fine-tuning, reflecting the integrity of visual communication.

About the experience of web portal design, small Ivan students have a more in-depth study, reference here.

wufoo--experience innovation comes from the pursuit of simplicity

Tool-type sites, usually have some more formal uses, throughout this kind of website feel the majority of cold tones, so the first wufoo feel very special, it is a large area using warm color system, rounded angle shape of the radian is also too large, look relaxed and casual. Before we know the reason, we should understand the purpose and value of this product.

Wufoo is used primarily to create online forms, invitations, and simple order payments, and to send invitations and manage schedules. The product side's expectation for Wufoo is that "the main function of Wufoo is to help anyone create HTML forms, but ultimately we strive to be the easiest way to collect information on the Internet." ”

Therefore, the use of warm colors to reflect the affinity, reduce the user threshold, people feel that this is a product that anyone can use-you can use to deal with the work, can also be used to deal with personal things. Not only is the color aspect, in the entire website task Flow interactive frame design also manifests this kind of simple and easy to use the value idea, like right and left turn over option setting, the Novel form field adds the way, the considerate entry guide, is indeed a new experience website.

The website is also listed as the best creator Uis by Nielsen Norman Group.

Tenpay-Create a relaxing atmosphere everywhere

The first time to see the revised Tenpay, very home page this map attracted. Men and women gently snuggle, playing their own mobile phones, look happy, casual. So close to the well-being of the public life scene, is an excellent interpretation of advertising language. At the same time, the whole website style, all give people simple and relaxed feeling. In fact, the revised information structure is indeed more comfortable, more prominent focus, flow more smoothly.

Speaking of this, there is no discovery, tenpay information layout structure, with the previous saw a few cases have a big difference?

The previous Case Tool page, the interface element takes the tree, the table, each kind of control primarily, its layout structure is close to the application, but Tenpay and, their element structure is mainly open, the limit of many control frames, the form shows the form more flexible, the guidance explanation text information more, It is typical of a tool-type website that is close to the page layout. The same type also has Alipay, Tencent Security Center, Recharge center and so on.

So, it's all a tool site, why is there so much difference in element layout applications?

In brief, it is because the former is developed from the experience design thinking of the client, and the latter is based on the design thinking of the early Web page. A simple example, in the former information tips, tend to be more inclined to pop the pay layer of the way, the latter, it is more likely to be in the current page to give guidance on information tips. Now, of course, the difference between the two is getting closer.

New technology development

Subsequent, as the screen resolution is growing (according to CNZZ statistics January 2012 1024x768 's share has slipped to 28.8%, with the 2nd 1440*900 21% Gap has been getting smaller and more diversified trend), the network speed is faster, can be foreseen, These new web technologies will also be used more for tool-type Web sites, such as the response web design just mentioned, such as waterfall flow, such as rich media applications, such as large picture background fill, and so on, the follow-up will also open up new ideas for our visual design, to provide more creative space for improvement.

The above is only a preliminary analysis of the tool-type site, in fact, the tool-type site in the experience design also can be described as a system, there are more in-depth research and learning space, welcome more interested students to explore together.