Web Design Usability Guide-How to use pictures successfully

As the saying goes, a picture wins thousand words. Whether this is true or false, pictures are an important part of the Web page. Since embedding picture steps becomes simple, we can see that many of the sites are embedded with many images, some of which show the benefits of using pictures in different ways, but not most sites. Although this is not much of an impact on a design, these images may reduce your chances of selling your product unless you have a good user-induced page or create a good reading flow condition. The picture is the question which the detail is better than the principle, the processing picture should be the designer more needs to understand and grasps the ability.

Web usability expert Jakob Niesen and his company Nn/g did an eye-movement study, summarizing an article called "Photos as Web Content." Their conclusions shocked the design industry and answered a number of questions that had not been answered by previous studies.

　　Web Design Usability Guide-working with images

In fact, users prefer to see pictures that are related to the information they are looking for, so they prefer a page without a picture rather than a page that is bloated with irrelevant images. According to the study, the key to using pictures in Web pages is based on the following basic ideas:

Picture Basic factors: size, composition, quality, exposure rate is a good picture of the four factors. Users are concerned about the quality of the picture, and even the contrast can have a great impact.

Efficiency: If a picture is exciting or interesting, it succeeds. An efficient picture contains several features:

Emotion: In the picture, your product can inspire users to use the desire?

Reasonable: The picture shows the advantages of the product?

Brand: The picture conforms to your brand style?

Passing information: Pictures can pass the correct information to the readers of the website.

Stimulating the user's response: This is actually a bit difficult, but the basic idea is that pictures can help users make decisions and create a desire to buy a product. We'll mention it in the following article.

Simple decorative images are subconsciously overlooked by our brains. Like radar, if images are like filters on radar, then the brain ignores them. Research has shown that images that use real or real products are automatically marked as important by the brain and can be further watched. If you have a personal blog, you would prefer to see your avatar instead of a painting image. People want to see the people who are communicating with them, because this is particularly important for the establishment of trust.

If you own a company, it's a great idea to use pictures to describe a company's employees. It provides the outside world with a very cordial way to understand the company's employees and life. If you can afford it, spend some money on a good photographer, which will add a lot to your company's website. (Remember not to go artsy shots style, especially artsy shots that is irrelevant to what you want to say)

In addition, some eye movement research also shows that if the product picture contains more details, it can bring the better effect. Yes, for example, flat-screen TV ads, although it can play a role, but is this really good enough? Users want to see more details, so please show them.

　　Quality and relevance :

I'll show you some of the results of several different studies below. You will see some sites that mark the hot zone, where the red area represents the attention of the user, while the blue area indicates that the user is ignoring it.

An eye-movement device made on the Adelphias website

In addition to seeing this is an incredibly outdated design, you can see clearly that none of the images have a hot zone distribution. This is because these pictures are purely a filling function. If these pictures are related to the page information, then the hot zone may have a certain change. This example is enough to show how much they waste picture space.

Another example is the eye movement research from the restaurant page of the New York magazine website. As we can see, the quality of the pictures is important, even though the characters are famous chefs in the world. Although the content of the pictures and Web pages is related to some extent, the low contrast and small size of the picture is easily overlooked. So here's the need for a balance, picture quality and relevance are two important guiding principles.

Eye movement Research done on the New York magazine website

The image above is from Jakob Nielsen and Kara Pernice wrote a paper called Images as obstacles a few years ago to thank you for your great work.

　　Bootstrap user

Not all designers have a master's degree in psychology, so few people know how the human brain works. The same eye movement research shows that our focus can be easily influenced and altered by the image. Of course, we are referring to high quality, and related pictures. In a study called "where THEY look", James Breeze shows how images can become part of the reading stream.

They took a baby diaper retailer's website as an example of an eye-movement study on 106 subjects. Next you can see 2 pictures. When the face of a baby in the picture is facing a visitor, most people focus on his face, leaving an impression of loveliness and sweetness.

Research on the effect of baby diaper retailer's website drawing ticket

However, the same ad, the same copy, the same baby, but in different directions, the results have a significant improvement. Not only do you pay more attention to copywriting, but we also see brands and some smaller words (some refund agreements). A refund agreement that is important in a transaction, perhaps one of the selling points, can be paid more attention to.

This picture shows how much effect the image can have.

JCDecaux and look for years, in a study concluded that the results are more confirmed: In an advertisement, the user's eyeball can actually be directed to the key information of the advertisement.

Because many ads have beautiful models, so the general model than advertising products to win the focus of users, users do not focus on advertising products, and are focused on the model, the following study shows that the problem can be solved.

Research on eye movement of Sunsilk product advertisement

The results of this study are very clear, the initial advertising (left), only a small focus on the product's brand and products, actually less than 6%. Then after the ad has been modified and tested (right), even though the logo is on the bottom, more than 84% people are more concerned about the product and the brand. This is a 14 times-fold ascension, which in my view is very much different.

　　Pictures need to be with purpose

Not only does the picture guide the user's attention, but it also transcends the text in just a few seconds to describe the product's lot of information. An extremely famous example is square, a small peripheral that supports smartphones or flat-panel swipe cards.

With the figure above, users can learn a lot about the features of this product in a matter of seconds. They already know the connection method between devices, the size of the product, what the product is compatible with, what kind of interactive interface the card will have, and so on. The original long and boring product introduction let a picture explain clearly. This is a classic, very good example.

Also, Apple's ad for the MacBook Air is another good example. Mac Air is known to be small, light and beautifully crafted. But if you do not know these features, you can also instantly learn the information in the image below.

Macbook air Short and efficient advertising map

　　Trust is the key.

If you open an online mall, always remember that trust is very important. No one buys from businesses they don't trust, which is why Amazon and ebay are so popular because they are globally renowned brands and offer different money-back guarantees, and they also have distinctive security features. Buyers trust them because they know that if sellers do not obey the rules, they will be punished. If you have an online mall, be sure to win the trust of buyers.

What does this have to do with pictures? According to Paras Chopra on the landing page conversion rate of research, trust can be created through the picture.

An online mall selling Brazilian and Caribbean paintings is an unbelievable thing. In this site, a small change in the conversion rate from the original 8.8% to 17.2%, 95% of the increase. How is this done? The original merchant did not use the thumbnail of the painting and used the corresponding painter as a product picture. The reason they believed in the store was that they thought the quality of the painters ' work was not questionable. By simply showing the artist's avatar, customers realize that they are buying from a real person like themselves.

Chopra also mentions another user with an online case set site. By replacing the contact icon in his website with his own image, the conversion rate increased from 3.7 to 5.5, resulting in a 45% increase. He concludes that visitors can detect at the first time which pictures are ordinary pictures, and reduce the credibility of the site, visible on the Internet, the real portrait of people to create an emotional hub.

　　Optimization

Before concluding this article, I would also like to briefly mention some of the technical issues in the site image. The first thing I want to emphasize is that optimization is really very important.

According to the data of February this year, the picture proportion occupies 61.9% of a webpage, the average size of a page is 1.29 trillion. Large pictures will take a long time to download, the load on the page has caused an impact. According to Jakob Nielsen, the response time of one second is the time limit that the user thinks he wants to accept.

February 2013 15 Data: web page Average Size

Before we upload the image to 1stwebdesigner, we always save the page format through Photoshop, which can reduce the file size of the picture and maintain a certain quality of the picture. The same function, you also use smush.it. It is a free online tool and he also offers a wordpess plugin. The total size of your site will be reduced if you perform any of the previous actions before uploading the image, which means that the page can be loaded faster, reducing the frustration of users loading the page.

　　Width and height

The last technical aspect I want to say is to specify the height of the picture tag, for the simple reason. A page always loads the text and then loads the picture. Therefore, a picture without the specified width will be marked with a small thumbnail before it is fully loaded. When the picture is loaded, the thumbnail stretches to his original size to break the text that the user may be reading. At the same time, the image in the stretching process will also cause the user may be focusing on the position shift, which will make a lot of visitors feel no resistance.

By specifying the width of the picture label, you can make sure that the thumbnail stretches to his full size and appears in his place before the picture is loaded. It's a small detail, but it's a really good experience.

However, some people think that this is the old technology and in today's mobile browser high-speed development era, this is not efficient. I agree with this, so you can just not specify a wide height in the response page, but don't forget to change the size of the picture at different resolutions, and you don't want a 700-pixel-wide picture to appear on a 640-pixel-wide device.

Conclusion:

If you want to have a successful website, especially if your website can bring benefits to you, it is very important to use the picture correctly. As you can see in the example above, the poor images will be ignored by the user, but if you find the right pictures and put them in the right place, they can bring you amazing results.

Original source: 1stwebdesigner

Original title: How to use Images successfully–web design Usability Guide

Original address: http://www.1stwebdesigner.com/design/images-on-web-design-usability-guide/

This translation is intended for learning and communication purposes only. Non-Commercial reprint please specify the translator, source, and retain the article in the translation of the full link. If the translation is improper, you are welcome to submit your comments.