Webpage Design availability guide-how to use images successfully

　　

 

As the saying goes, a picture is better than a thousand words. Whether it is true or false, images are an important part of the web page. Since the steps for embedding images have become simple, we can see that many websites have embedded many images, some of which demonstrate the benefits of correctly using images from different perspectives. However, most websites do not. Although this does not have much impact on a design, these images may reduce your chances of selling products, unless you have a good page for inducing users or creating good reading flow conditions. Image is a problem where details are better than principles. Processing images should be the ability that designers need to understand and master.

Webpage availability expert Jakob Niesen and his company NN/g made an eye movement research and summarized an article titled Photos as Web Content. Their conclusions shocked the design industry and answered many questions that were not answered by previous research.

　　

 

　　Webpage Design availability guide-Image Processing

In fact, users want to see images related to the information they are looking for. Therefore, they prefer a page without images rather than a page that is full of irrelevant images and looks bloated. According to the research, the key to using images on webpages is based on the following basic ideas:

Basic image factors: size, composition elements, quality, and impression are four major factors to measure a good image. The user pays attention to the image quality, and even the contrast can have a great impact.

Efficiency: if an image is exciting or interesting, it will succeed. An efficient image has several features:

Emotion: In images, can your products stimulate users' desire to use?

Reasonable: Does the image show the advantages of the product?

Brand: Does the image match your brand style?

Transfer Information: images can pass the correct information to the readers of the website.

Stimulating users' response: This is actually a bit difficult, but the basic idea is that images can help users make decisions and generate a desire to buy products. We will mention it later.

Simple decorative images are subconsciously ignored by our brains. Like a radar, if an image is like a filter on a radar, the brain will ignore them. Research shows that images using real or real products are automatically marked as important by the brain and can be further noticed. If you have a personal blog, what you want to see is your real avatar rather than a painting image. People want to see the appearance of people who are communicating with them, because this is especially important for building trust.

If you have a company, it is a great idea to use pictures to describe the company's employees. It provides a friendly way to understand the staff and life of the company. If you can afford it, spend some money to hire a good photographer, which will increase your company's website. (Remember not to adopt the style of art photos, especially those photos that are irrelevant to the content you want to express)

In addition, some eye movement research also shows that if the product image contains more details, the better the effect it can bring. Yes. For example, although the advertisement diagram of flat TV can play a certain role, is it really good enough? Users want to see more details, so please show them.

　Quality and relevance:

Below I will show you several results of different studies. Some websites are marked with hot zones. The red area indicates that users are concerned, while the blue area indicates that users are ignored.

　　

 

Eye animation research on the adelphias website

In addition to the incredible Outdated design, you can clearly see that all images do not have hot zone distribution. This is because these images are purely filled. If these images are related to page information, the heat zone may change. This example shows how much space they waste.

Another example is eye motion research from the restaurant page on the New York magazine website. We can see that although image figures are world famous chefs, the quality of the pictures is also very important. Although images and content on webpages are related to a certain extent, low-contrast and small-size images are easily ignored. Therefore, a balance is needed. image quality and relevance are two important guiding principles.

　　

 

Eye Movement Research on the New York magazine website

From Jakob Nielsen and Kara Pernice, I wrote an article titled "Images as Obstacles" a few years ago. Thank you for your great work.

Guide users

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 changed by images. Of course, we mean high quality and related images. In a study named "you look where they look", James Breeze shows how images can become part of the read stream.

Taking the baby diapers retailer website as an example, they conducted an eye movement Study on 106 subjects. Next, you can see two images. When the baby's face is in the face of a visitor, most people will focus on his face, leaving an impression such as cute and sweet.

　　

 

Research on the Effect of baby diapers retailer website Images

However, the results of the same advertisement, the same text, and the same baby are obviously improved in different orientations. Not only do you pay more attention to the text, but we can also see the brand and smaller words (Some refund agreements. A refund agreement is very important in a transaction and may be a selling point.

　　

 

This figure shows the effect of the image.

After years of JCDecaux and THiNK research, a study concluded that the above results are even more confirmed: In an advertisement, users' eyes can actually be directed to the key information of the advertisement.

Because many advertisements have beautiful models, most models win the attention of users more than advertising products. users do not focus on advertising products, but on models, the following research shows that this problem can be solved.

　　

 

Research on advertisement eye movement of Sunsilk Products

The results of this study are very clear. The initial advertisement (left side) only has a very small focus on the brand and product of the product. In fact, it is only 6% less. Then, after the advertisement is modified and re-tested (the picture on the right), even though the product LOGO is placed at the bottom, more than 84% of people are more interested in products and product brands. This is a 14-fold improvement. In my opinion, it is a very big difference.

　　

 

Images must be purposeful

Images not only guide users' attention, but also allow users to describe a lot of information about the product in just a few seconds. An extremely famous example is Square, a small peripheral of a smart phone that supports mobile phone or tablet Card swiping.

　　

 

Users can learn many features of this product within several seconds. They already know the connection method between devices, the product size, the compatibility between products and which devices, and the interaction interface after swiping the card. The long and boring product introduction made a clear picture. This is a classic and excellent example.

Also, Apple's ads for macbook air are another good example. As we all know, mac air is very small, very light and well-made. However, if you do not know these features, you can also learn the information instantly.

　　

 

Macbook Air short and efficient ad charts

Trust is the key

If you open an online store, always remember that trust is very important. No one will shop at sellers they don't trust, which is why amazon and ebay are so popular because they are world-renowned brands and provide different refund guarantees, they also have distinctive security features. Buyers trust them because they know that if sellers do not follow the rules, they will be punished. If you have an online store, you can win the buyer's trust.

What does this have to do with images? According to the research on the conversion rate of landing pages in Paras choupa, trust can be built through images.

　　

 

It is incredible that an online marketplace sells Brazilian and Caribbean paintings. On this website, a small change has increased the conversion rate from 8.8% to 17.2% and 95%. How is this done? In the past, merchants did not use thumbnails of paintings, but used the painters corresponding to the works as product images. They believe in the store because they believe that the quality of the painter's work does not need to be questioned. By simply presenting the painter's profile picture, customers realize they are buying (Painting) from real people like themselves)

Choupa also mentions another user who has an online case set website. By replacing the contact icon on his website with his own image, the conversion rate increased from 3.7 to 5.5, resulting in a 45% improvement. He concluded that visitors can immediately notice which images are common images, reducing the credibility of the website. It can be seen that real portraits on the Internet have created an emotional hub for people.

Optimization

Before finishing this article, I would like to briefly mention some technical problems in website images. First, I want to emphasize that optimization is really important.

According to data in February this year, the image proportion accounts for 61.9% of a webpage, and the average size of a page is 1.29 MB. It takes a long time to download large images, which affects page loading. According to jakob nielsen, one-second response time is the time limit that the user thinks they want to accept.

　　

 

February 15, 2013 data: Average webpage size

Before uploading an image to 1stwebdesigner, we will always save it as a webpage through PHOTOSHOP, which can reduce the file size of the image and maintain the quality of the image. You can also use SMUSH. IT. It is a free online tool and provides a WORDPESS plug-in. Before you upload an image, you can perform any of the preceding operations to reduce the total size of your website. This means that the webpage can be loaded more quickly, thus reducing the user's frustration when loading the webpage.

Width and height

The last technical aspect I want to talk about is to specify the width and height in the Image Tag. The reason is very simple. A page always loads text first and then images. Therefore, an image with no specified width or height is marked with a small thumbnail before being fully loaded. When an image is loaded, the thumbnail is stretched to its original size, interrupting the text that the user may be reading. At the same time, the image may also shift the user's focus during the stretching process, which will make a lot of visitors feel impatient.

By specifying the width and height of the Image Tag, you can ensure that the thumbnail can be stretched to its full size and appear in its position before the image is loaded. This is a small detail, but it is indeed a good experience.

　　

 

However, some people think that this is an old technology and is not efficient in the era of rapid development of mobile browsers. I agree with this, so you can only choose not to specify the width and height on the response page, but do not forget to change the image size at different resolutions, you do not want a 700 pixel-wide image 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, correct use of images is very important. As you can see in the above example, poor images will be ignored by users, but if you can find the right images and place them in the right places, then they will bring you amazing results.

Source: 1 stwebdesigner

Original article title: How to Use Images Successfully-Web Design Usability Guide

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

This translation is only used for learning and communication purposes. For non-commercial reprinting, please indicate the translator and source, and keep the complete link of the article in the translation. If your translation is incorrect, you are welcome to give your opinion.