The use of hand-painted style in web design to improve the user experience of the website

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

[Core tips] How to apply hand-painted style to Web pages to improve the user experience

In this article, we'll discuss how to apply a freehand style to a Web page to improve the user experience of the site.

Recognition degree and realism

Hand-painted style is very conducive to the display of human nature color, the formation of a unique degree of recognition, to bring users a sense of reality. When you receive a postcard from a friend, you always want to see the card handwritten, with the unique handwriting of the friend, not the computer. A handwritten note is always more casual and intimate than a computer-typed piece of paper.

In web design, the truth is the same: the use of hand-painted and handwritten style can make products appear more unique, more authentic and more trustworthy. Here are three examples of how the hand-drawn style brings recognition and realism:

Unique look and feel

First, the hand-painted style brings a unique look and feel. The famous prototype diagram and Wireframe tool Balsamiq are typical representatives. The Balsamiq is powerful and complex, and its look and feel is very simple, the application of hand-painted style allows users to recall the basic paper and pen sketch, so that users focus on the basic feature rendering, rather than the details of the product appearance. At the same time, this appearance also formed the unique style of Balsamiq itself.

Recognition degree and personalization

Hand-painted style brings a higher degree of recognition, allowing users to remember your product. For example, the famous Code editor notepad++ new logo on Windows:

The Chameleon body pattern not only aptly shows the function of the product itself (the accumulation and change of the highlighting code), but also the icon itself is quite cute, captures the user's attention, helps the user to separate the notepad++ from the competitor's editor product area.

Humanization and Intimacy

Hand-painted style brings humanity and intimacy. Tell the user that there is a living person behind the content, and that these people have carefully refined the details of the product to make it look more authentic and trustworthy.

The famous children's math practice on the IPad Mathboard the blackboard's impressions, and children can even write numbers directly on the blackboard with their hands. This setting makes arithmetic exercises less cold and boring, with a touch of human color, more easy-to-use, more attractive.

Information Communication and content construction

The way information is communicated determines whether the user will see and understand the information. Hand-painted styles can convey information more effectively and clearly. Here are three examples:

Explain product features

It may take several lines to describe a product feature, and a picture is enough if you use hand-drawn words. The famous application Testing service TestFlight a four-note sketch to match text descriptions when introducing features on its website. In the transmission of product characteristics of the information at the same time make the site become illustrated, more readable.

Show workflow

Instead of explaining the first step in the product operation with a large piece of text what is the second step to do, give each step with a clear hand drawing, increase readability, greatly reduce the amount of text.

Bootstrap user

The use of hand-painted icons can effectively guide users to all parts of the product and site. For example, stamped, which we introduced earlier, uses cartoon-style images on its website to guide users to all kinds of web pages.

Team Show

Users will always want to know the site, product or service behind the people, so a love team to show the page is particularly important. The only way to provide contact is not enough, but also to show users how they want to contact the group of people have a personality and temperament, to make the team appear approachable and trustworthy. For this purpose, it is a good practice to use hand-drawn pictures. For example--

The team members of the familiarity familiarity Factory show how to:

Polecat the whole display way:

And Grove's real photo with the handwriting font display:

Story telling

Hand drawing the earliest and most commonly used function is to tell a story ~ Whether it is to explain the function of the product, or to deepen the user's impression of the product, using hand drawings for storytelling is an effective way.

For example, the famous prototype mapping tool Axure home hangs such a user experience personnel and product manager work Self spit groove of the simple strokes. Very good to arouse the user's sympathy, enhance the user's favor to the product.

Tourist Eye uses three comics to explain its product features.

Draw the attention of the user

If you want to attract users to click somewhere, then hand-painted punctuate and arrows will be a good choice. For example:

Sometimes, it is possible to use multiple arrows:

Of course, to pay attention to enough, misuse of hand-painted arrows, the effect is counterproductive

Original address: http://www.geekpark.net/read/view/167258