Improve the use of hand-drawn style in user experience Web Design

[Core tips] How to Apply hand-drawn styles on webpages to improve the user experience of websites

In this article, we will discuss how to apply hand-drawn styles on webpages to improve the user experience of websites.

　　Recognition and Realism

Hand-drawn style is very helpful for displaying human colors, forming a unique recognition degree, bringing users a sense of reality. When you receive a postcard from a friend, you always want to see that the card is handwritten with his/her unique handwriting instead of printed on a computer. A hand-written note is always more casual and close than the paper written by a computer.

In web design, the principle is the same: hand-drawn and handwritten style applications can make the product more unique, more authentic, and more trustworthy. The following are three examples of recognition and realism in hand-drawn style:

　Unique appearance and feeling

First, hand-painted style brings a unique appearance and feeling. The famous prototype diagram and wiremap tool Balsamiq is a typical example. Balsamiq features are powerful and complex, and its appearance and feelings are very simple and clear. hand-drawn style applications enable users to recall the basic sketch, allowing users to focus on the presentation of basic functions, instead of focusing on the product appearance details. At the same time, this appearance also forms the unique style of Balsamiq.

　　

 

　Recognition and personalization

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

　　

 

The chameleon subject pattern not only properly shows the features of the product itself (highlighting the accumulation and changes of code), but also the icon itself looks quite cute and captures the user's attention, this helps you to differentiate Notepad ++ from your competitor's editor products.

　　Human nature and closeness

Hand-painted style brings a sense of human nature and closeness. Tell the user that there are people behind the content presented by the product, and these people have carefully examined the details of the product to make it look more authentic and trustworthy.

　　

 

The famous children's mathematical exercise application MathBoard on the iPad is used to review the blackboard. Children can even write numbers directly on the blackboard by hand. This setting makes arithmetic exercises less cold and boring, with a trace of human color, easier to use and more attractive.

　　Information Communication and content construction

The information transmission method determines whether the user can see and understand the information. Hand-drawn style can convey information more effectively and clearly. The following are three examples:

　　Explain product features

It may take several lines to describe the features of a product. If you use hand-drawn words, a graph is enough. The famous application testing service TestFlight used four tabs to describe features on its website. While delivering product feature information, the website also becomes illustrated and easily read.

　　

 

　　Display Workflow

It is better to configure a clear hand drawing for each step to increase readability and greatly reduce the amount of text used to explain what to do in step 2 in product operations.

　　

 

　Guide users

You can use hand-drawn icons to effectively guide users into various sections of products and websites. For example, Stamped, which we introduced earlier, uses cartoon pictures to guide users into various types of webpages.

　　

 

　　Team presentation

Users always want to know the people behind websites, products, or services. Therefore, it is especially important for a team to display pages with love. It is far from enough to provide contact information. We also need to show users the personality and temperament of the people they want to contact, so that the team can be approachable and trustworthy. To achieve this goal, it is a good practice to use hand-drawn images. For example --

How to present The Knock Factory team members:

　　

 

Overall Presentation of Polecat:

　　

 

And how to display Grove photos with handwritten fonts:

　　

 

Story

The earliest and most common feature of hand plotting is to tell a story ~ It is an effective way to explain the features of a product or to help you better understand the product.

For example, the Axure homepage of the famous prototype graph tool has such a simple figure that the user experience staff and product manager work on themselves. It can resonate with users and enhance users' preference for products.

　　

 

Tourist Eye uses three picture links to explain its product features.

　　

 

　　Attract user attention

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

　　

 

Sometimes, you can use multiple arrows:

　　

 

Of course, be sure to stop it. Abuse hand-drawn arrows will result in counterproductive results --

　　

 

Address: http://www.geekpark.net/read/view/167258