A look into tool-based websites: the definition of tool-based websites and typical case analysis (pictures and text)
 In order to facilitate subsequent research, we will combine the research results of previous students and provide a definition version of tool-type websites for reference: ——The so-called tool-type website, as the name suggests, is a tool built on the Internet. It refers to a tool based on network application that is provided to help people complete the target needs in a specific field, has a certain operating process, and has the main purpose of completing the target task. Its main features are: – Aims to complete one or more tasks – Focuses on guiding the operation process – Emphasizes completing tasks quickly – Not the only means to achieve the goal, but only helps users to achieve the goal more efficiently At the same time, many tool-type websites are also equipped with an independent portal, which is mainly used to display information and specifically introduce the value, dynamics, etc. of the tools, and provide login or download entrances. Due to the high degree of integration between this portal and the tool page, we also classify it into the category of tool-type websites, calling it a tool-type website portal (or tool website homepage). In order to help us form a more intuitive concept of tool-type websites, we can divide websites into content-type websites and tool-type websites based on their functions. As for the contrast and difference between tool-based websites and content-based websites, some students have already made a detailed explanation (if you want to know more, you can read the relevant articles), so I will not repeat it here. Typical tool websites include: Google series (search, translation, document, reader...), Tenpay, Alipay, Data Cube, salesforce, xero, TA, DNSpod, etc. Typical content-based websites include: Sina, Tencent, Tianya Forum, etc. Below, I will introduce several typical examples of tool-type websites that I like from an experience perspective. Google - Consistency is king For tool-type websites, the most widely used ones should be the Google series of products that we are very familiar with, such as Google Search, Translation, Documents, etc. Most of them are new tools gradually launched after Google Search. These tools provide great convenience to netizens' Internet life. With so many product lines, it would be easy to produce different visual styles due to differences in functional attributes. However, we see that Google's visual style in its multi-product system is very unified in terms of navigation bar, color system, basic layout structure, etc. For example, all background layers are black, white and gray, all new functions are eye-catching red buttons, and all function menus are on the left. This consistency greatly reduces the user's cognition and learning costs for new products, making them familiar with the new products. It reflects the strong formulation and execution capabilities of the Google Experience Team in terms of brand image and experience specifications.  Xero is a comprehensive accounting tool for small businesses, with outputs including cash books, general ledgers, invoices and reports. As an accounting tool website, users’ most important demands are of course security and accuracy, so Xero was very sensitive to use medium-brightness blue + green to express it in the portal and product pages. At the same time, the pictures and structure are horizontal and vertical, stable, creating an ultimate safe and trustworthy atmosphere. In terms of information display, the Xero portal has the typical features of web2.0, such as a lot of blank space and the contrast of large and small fonts. On the product page, the visual elements of each control are reduced as much as possible. For example, tables do not have vertical wireframes, charts have unified colors, buttons have simplified textures, all clickable text including general links, headers and tabs are all blue, etc. The purpose of doing this is to prevent large amounts of text data from being disturbed by unnecessary details, to make the theme clear at a glance, and to help users complete tasks quickly in a clean and comfortable environment. The product was once listed in the 10 Best Application UIs by Nielsen Norman Group.  When people mention China Merchants Bank, they think of sunflowers; when people mention Tencent, they think of penguins; when people mention Mailchimp, they think of the postman monkey. Now when people mention Fork, they should think of this cute old fisherman sitting in a small boat with a fork. Maybe its logo is inconspicuous, but with the contrast of this spokesperson, this tool is really unforgettable. If you look more carefully, you will find that there are illustration designs related to the sea theme on several inner pages. Seeing these, even if you are a person who is not familiar with the same thing, would you be curious enough to click download to try it out? It is worth mentioning that the portal page framework uses the popular responsive web design model, and the layout is fine-tuned when the browser is zoomed in and out or accessed through a mobile phone, reflecting the integrity of the visual communication. Regarding the experience design of tool-type website portals, Xiao Yivan has done in-depth research on this, please refer to here.  Tool-type websites usually have some more formal purposes. Looking at such websites, most of them use cold colors. So when I first saw Wufoo, I felt it was very special. It uses warm colors in a large area, and the arc of the rounded corners is also relatively large, which looks relaxed and casual. Before understanding the reasons, let us first understand the purpose and value proposition of this product. Wufoo is mainly used to create online forms, invitations and simple order payments, as well as send invitations and manage schedules. The product side's expectation for Wufoo is: "Wufoo's main function is to help anyone create HTML forms, but ultimately we strive to be the easiest way to collect information on the Internet." Therefore, using warm colors to reflect affinity, lower the user threshold, and make people feel that this is a product that anyone can use - you can use it to handle work or personal matters. This simple and easy-to-use value concept is reflected not only in the color, but also in the interactive framework design of the entire website task flow, such as the left and right flip-up option settings, the novel way of adding form fields, and the thoughtful entry wizard. It is indeed a website with a novel experience. The website was also listed in the 10 Best Application UIs by Nielsen Norman Group.   The tool page in the previous case has mainly tree, table, and various controls as interface elements, and its layout structure is closer to that of an application. However, Tenpay and its element structures are mainly open, with fewer restrictions on control frameworks, more flexible forms of table presentation, and more guiding text information, making them typical tool-type websites that are close to the layout of a web page. Other similar services include Alipay, Tencent Security Center, Recharge Center, etc. So, if they are all tool-based websites, why are there such big differences in the application of element layout? In short, it is because the former is developed from the client experience design thinking, while the latter is developed based on the design thinking of early web pages. A simple example is that in terms of information prompts of the former, they generally tend to pop up a payment layer, while the latter tends to give information prompts on the current page. Of course, now the two are influencing each other, and the difference is gradually narrowing. New technologies and new developments. As screen resolutions get larger and larger (according to CNZZ statistics, in January 2012, the market share of 1024*768 has dropped to 28.8%, and the gap with the second place 1440*900 at 21% has become smaller and smaller, and is showing a diversified trend), and network speeds are getting faster and faster, it is foreseeable that these new web page technologies will also be used more by tool-type websites, such as the responsive web design just mentioned, such as waterfall flow, rich media applications, large picture background filling, etc., and will inevitably open up new ideas for our visual design and provide more creative improvement space. The above is only a preliminary analysis of tool-type websites. In fact, tool-type websites can also be said to be a self-contained system in terms of experience design, and there is room for more in-depth research and learning. We welcome more interested students to come and discuss in depth. (Text: Tencent CDC) |
<<: Tomcat8 uses cronolog to split Catalina.Out logs
>>: CSS setting div background image implementation code
Recommend
jQuery implements form validation
Use jQuery to implement form validation, for your...
Using JavaScript in HTML
The <script> tag In HTML5, script has the f...
MySQL 5.7.19 installation tutorial under Windows 10 How to change the root password of MySQL after forgetting it
Take MySQL 5.7.19 installation as an example, fir...
How to uninstall MySQL 5.7.19 under Linux
1. Find out whether MySQL was installed before Co...
New ways to play with CSS fonts: implementation of colored fonts
What if you designers want to use the font below ...
Method and introduction of table index definition in MySQL
Overview An index is a table of correspondence be...
How to implement Mysql scheduled tasks under Linux
Assumption: The stored procedure is executed ever...
Which scenarios in JavaScript cannot use arrow functions
Table of contents 1. Define object methods 2. Def...
Two ways to build Docker images
Table of contents Update the image from an existi...
Solution to the timeout problem when installing docker-compose with PIP
1: Installation command pip install docker-compos...
MySQL 5.7 installation and configuration tutorial under CentOS7 64 bit
Installation environment: CentOS7 64-bit MINI ver...
MySQL common backup commands and shell backup scripts sharing
To back up multiple databases, you can use the fo...
Tutorial on how to install and configure the unzipped version of MySql under Windows 10
Install the unzipped version of MySql database un...
How to simply encapsulate axios in vue
Inject axios into Vue import axios from 'axio...
The table tbody in HTML can slide up and down and left and right
When the table header is fixed, it needs to be di...