Create a good tool-type site 3 big strokes!

There are more and more tool-type websites today (58 City, Cloud disk, product home and so on, in the process of grinding the details, there are children's shoes summed up the tool-type site design goals and 3 design framework, the whole idea is worth learning, students in addition to learning professional knowledge, you can also look at the logic of the author to solve the problem, will be helpful to career development.

　　What is a tool-type web site

Let's start with Wikipedia on three sets of concepts:

Tools: Refers to the equipment that can facilitate people to complete their work.

Application: Computer software used to help a user complete a separate or a set of related work.

Web application: An application that accomplishes one or more tasks across a network by using Web and Web browser technology, typically using a Web browser.

This shows that the application is the Computer field tool, the tool-type site can be defined as a hosting one or more Web Applications Web site. It focuses on allowing users to complete a range of tasks, such as registration, payment, and so on.

　　User needs of home page

The user of the homepage basically can divide into three kinds: the new user who does not understand, the new user who is interested, the old user.

For new users, they are bound to ask these questions:

What am I supposed to do here?

What does this website offer that is important to me?

There are other questions for users who are already interested:

How should I start?

Do I have to register? If yes, how should I register?

On the whole, the home page should answer the questions of the new users and help them find the entrance to the function, while for the old users, they need a more obvious and quick login.

　　The goal of the home page

The book Designing for the Social web uses a number of steps for user use: not knowing--interest--first use--general use--emotional. and the front page for the first three steps is vital!

In this view, the home page has two goals:

Let users who do not know understand the site and generate interest, ultimately to facilitate the user to use.

Let interested users start to use as soon as possible.

　　The design of home page

In the actual work we will encounter several different types of tool-oriented web site, for its content of the site, its home page manifestation of the different forms.

　　Centralized Application Type

This type of Web site is essentially a group or groups of Web apps that are more functional and relatively simple and do not produce large amounts of user data.

　　1. Core structure

The most used features will be displayed on the home page for the user is the fastest entrance. The user through the logo, banner, website statement and so on to understand the nature of the site, and then is to find their own functions.

　　2. Registration/Login Module

Because users do not want to distract themselves from remembering usernames and passwords, or because they are too focused on what they are doing, they are in principle allowed to log on only when necessary. But if most functions need to be logged in first, then it is necessary to display the login form directly on the home page.

　　3. Case studies

58 city has two level directory: City directory, functional directory. Users can easily find the desired functionality through these two levels of catalogs. However, most of these functions do not need to register, so the home page does not have an obvious login module.

Tencent Recharge Center

The core module of the homepage is still in the directory structure, so the user understands the main business of the website and how to start his own task.

Remove some of the operational requirements and get a more pure recharge site:

　　Data management type

This type of Web site is essentially a large web app. The function process is complex, will produce a large amount of data, often carry a powerful data management function.

　　1. Core Framework

In order to facilitate the user to control and manage the content of their own creation, the first page of the strategy will typically lead the user to create accounts or download the client (download the next step of the client is also registered), and then start the task. To persuade a user to start a task, it typically includes the following modules:

　　Value statement: explain the function and meaning of the website, quickly dispel the visitor's doubt.

　　input-Output: Tell users what they can get, so that visitors to the use of products are expected, and build confidence.

　　Video Introduction: let users quickly and comprehensively understand the site.

　　authoritative recommendation/typical user: let the user generate empathy, enhance the trust of the product.

　　call to Action: when visitors are interested, let them start using them in a timely manner.

These modules are in fact divided into three layers to convince users to use the product:

Although these modules are listed, the actual situation is not all necessary and ultimately depends on the user's confidence in the product. Evernote can convince users at grade One, Dropbox's page has only one video introduction.

　　1. Registration/Login Module

This kind of website registration and login module are very important, on the one hand the number of registered users is generally far greater than the number of new users, on the other hand, a large part of the degree is to register, the old user has a fixed entrance can be. But which one do we need to emphasize on the home page?

The problem depends more on the business objectives of the product. Under the influence of product strategy, also has a large number of registered users and users log in frequently products, Gmail's homepage emphasizes login, and Facebook's homepage emphasizes registration. We also see that the home page of the 115 network plate and Huawei screen is obviously different:

However, the login module is best not to jump the page, otherwise it will increase the operating costs of old users.

　　2. Case studies

MailChimp

The home page contains the value statement, input-output, video introduction, typical users, action calls and other modules, and strongly persuade users to start using products.

　　Independent operation type

Such sites are often a small web app that can accomplish tasks in a few steps.

　　1. Core Framework

Often only a few simple controls and instructions can complete the task. Because of the low cost of use, users will also be happy to try to use.

　　2. Registration/Login

This kind of website generally does not need to register or the simple registration, also may the registration need content throughout in the task operation to discard the registration module.

　　3. Case studies

Minus

When users enter the page, they can quickly understand that this is a sharing site, as long as the picture is dragged into the Web page and fill in the information to start using.

Senduit

The simple step guideline tells the user the function and operation of the website, and does not need to register when using.

　　Conclusion

The homepage of the website needs to answer the user some very important question, can let the new user be willing to use our product.

This paper mainly discusses the design goal and three kinds of design framework of the homepage of the tool class website. But in the actual project also needs to carry on the analysis to the more concrete scene, considers the operational demand, to the individual module interaction to scrutinize, finally can obtain one to attract the user, the retention user's valid homepage.