artificial intelligence 5291510 1920

More Than Just Pretty: How Imagery Drives User Experience

by

Sponsored ArticleMore Than Just Pretty: How Imagery Drives User Experience

As the saying goes, “A picture is worth a thousand words.” Human beings are highly visual creatures who are able to process visual information almost instantly; 90 percent1 of all information that we perceive and that gets transmitted to our brains is visual. Images can be a powerful way to capture users’ attention and differentiate your product. A single image can convey more to the observer than an elaborate block of text. Furthermore, images can cross language barriers in a way text simply can’t.

Images are more than just decoration; they have the power to make or break a user’s experience. In this article, we’ll cover a good number of useful principles and best practices that will help you successfully integrate imagery into your designs. If you’d like to bring your app or website to life with little effort, you can download and test Adobe XD2for free.

Further Reading on SmashingMag: Link

Only Use Relevant Images Link

Every image has a story to tell. Just like it is with writing, it’s better if you know what you want to say before you begin. Compelling images have a unique ability to inspire and engage your audience, but not all images improve the experience. Some of them just take up space or, in the worst case, confuse the user. One of the most dangerous elements in any design is imagery that conveys the wrong message.

6
Images that aren’t related to the topic often cause confusion. (Image credit7) (Large preview8)

Users react to visuals faster than text, so make sure your content matches the supporting visuals. You should select images that have a strong relationship with your product goals and ensure that they are context-relevant.

Images Shouldn’t Create A Visual Noise Link

The principle “more is better” doesn’t apply to images. Don’t put a lot of effort in creating purely decorative images because people usually ignore such images. Instead, choose images that showcase the purpose of your product. Use limited number of striking visuals in your designs — the ones that really capture users’ attention.

Use High-Quality Assets Without Distortion Link

Make sure your images are appropriately sized for displays across all platforms. Images shouldn’t appear pixelated, so be sure to test appropriate resolution sizes for specific ratios and devices. Display photos and graphics in their original aspect ratio, and don’t scale them greater than 100%. You don’t want the artwork or graphics in your product to look skewed, too small or too large.

psdistort9
Left: Degraded imagery. Right: Correct resolution. (Image credit10) (Large preview11)

Responsive websites and mobile apps often struggle with selecting image resolutions that best match the various user devices. It’s quite clear that one image for all screen resolutions and different devices is not enough. However, an image per pixel is too much; cropping images one at a time can be overwhelming especially if you have a ton of images.

So, how can someone automatically choose the optimal responsive image sizes? Hopefully, there are online tools that allow you to manage multiple sizes for an entire folder of images. One of them is Cloudinary1412 which enables you to interactively generate responsive image breakpoints. This tool uses advanced algorithms to easily generate best matching breakpoints for each uploaded image; images are analyzed to find the best breakpoints on an image by image basis, rather than creating all possible image resolutions.

13
Cloudinary1412 is a cloud-based service which is used to batch, crop and resize images. (Large preview15)

Image-Focussed Design Isn’t For Every Page Link

Getting people’s attention with aesthetically pleasing images certainly has value, but it comes at the price of making other elements harder to see and use.

Putting too much focus on images in your designs may create a visual overkill that can seriously distract users from meaningful engagement with your content. You can see this effect in SoundCloud’s app in which the image takes all the attention and you barely notice the two buttons.

16
Screen buttons are overshadowed by the image in Soundcloud’17s home view.

Although image-focused design is appropriate in some cases (e.g. Apple’s homepage), the vast majority of apps and sites should follow a balanced approach — images that are used in user interfaces should support the product, but not obscure other important content or overshadow functionality.

Use Multiple Mediums Link

Both illustration and photography can be used within the same product.

  • Photography is ideal to showcase specific entities and stories. For example, if we need to show not just any flower, but in particular a rose:
    • redrose18
    For specific entities, use photographic representations. (Image credit3528252219) (Large preview20)
  • Illustration is effective for representing concepts and metaphors, where photography might be alienating.
    • flower21
    Illustration conveys an approximation of content to aid comprehension when total specificity isn’t required. (Image credit3528252219) (Large preview23)

Have A Point Of Focus Link

Imagery is a visual communication tool that conveys your message. A clear focus communicates the concept at a glance, whereas a lack of focus makes the image meaningless.

When the point of focus is obscured, the iconic quality of the image is lost:

planesinsun24
Don’t. A lack of focus makes the image meaningless. (Image credit3528252219) (Large preview26)

Avoid making the user hunt for the meaning in the image and ensure that a clear concept is conveyed to the user in a memorable way.

airplane27
Do. A clear focus communicates the concept at a glance. (Image credit3528252219) (Large preview29)

Try to minimize distraction and focus on meaningful elements in your images.

Show Real People Link

Human images are a very effective way to get your users engaged. When we see faces of other humans, it makes us feel like we are actually connecting with them, and not just using a product. However, many corporate sites are notorious for the overuse of insincere photography which is employed to “build trust.”

family30
Don’t. Inauthentic images leaves the user with a sense of shallow, false pretense. (Image credit31)

U32sability tests33 show that purelydecorative photos rarely add value to the design and more often harm than improve the user experience. Users usually overlook such images and might even get frustrated by them.

A very simple rule of thumb is to use high-quality photographs of people who match your app’s or website’s character. Imagery you use should be an authentic representation of your product, company or culture.

fatherdaughter34
Do. Show real, down-to earth people and make sure that they really match your product’s characters. (Image credit3528252219) (Large preview36)

Tips: Link

  • Try to avoid crowd shots; use photos that have a single main subject instead.
  • Strive for images that represent genuine stories. Take photos of your people doing interesting things. If you have a product, consider ways they can interact with that product.

Blend Images With Designs Link

When using images in your design, ask yourself if the images you’re taking will match the aesthetic of your app or website. The homepage for Squarespace37 is a good example of focus on imagery. It’s elegant, clean and uses a huge amount of white space and large, full-screen images to create a bold design that grabs your attention.

38
It’s important to choose pictures that fit the theme of the experiences we create. (Large preview39)

Improve Your E-Commerce Design Link

The product image sells the item. Users often rely on the product image to assess product and it’s features. Regardless of your product, whether it be headphones or toys, product photography is the most important element of any e-commerce website. Ultimately, the more attractive your products look to visitors, the more confident they’ll feel about purchasing from you, and the better your conversion rate will be.

40
The image should be used to get a feel for the product. (Image credit41) (Large preview42)

Make product images beautiful. A good image does all the hard work for you: It captures users’ attention and differentiates your product. However, good product photography requires work. Consider reading the article “Improve Your E-Commerce Design With Brilliant Product Photos43” on how to take quality photographs of your products.

Let products sell themselves. Consider the Gorilla Pod44 example shown below. The photo demonstrates brilliantly the benefits of the product.

45
Large preview46

Display the primary image above the fold. Don’t make users scroll in order to see the main image for a product. The main product image should be anchored in a prominent position in order to merchandise your priority offerings.

For the image to be effective it needs to be big — as big as you can make it. Then, when you’ve maxed out the size of your image, you need to integrate the ability to zoom in on specific details of the product. This is especially important for products like apparel where users are more concerned with detail. The zoomed-in images also need to maintain high quality.

47
Don’t. Zoomed-in view forces the user to look at a specific part. (Image credit5048)
49
Do. Put users in control by allowing them to zoom in as they prefer (both depth and area of zoom is controlled by the user). (Image credit5048)

Express Personality And Trigger User Emotions Link

Imagery can convey the essence of a product or service, but it can surprise and delight, too. Images have the capacity to entertain as much as to inform. If you already have a satisfying customer experience, adding delight to your product helps create an emotional connection with your users. Emotionally powerful imagery is a factor in ensuring that users continue to delve into your experience.

51
Imagery is able to evoke emotional responses in the viewer. A dash of humor can ease the burden and your users might love it. (Image credit52) (Large preview53)

The emotional brain is affected by photos and illustrations, especially of people, and by stories. Speaking about illustrations, even sites or apps that don’t incorporate the drawn style throughout still can use cartoons for these purposes. For example, illustrations can be used for instructions, tutorials and empty states.

54
Choose striking images that capture attention and express personal relevance. (Image credit55) (Large preview56)

Real-Life Scenario: How To Pick Images For Landing Page That Serves A Purpose Well Link

Landing pages are essentially your shop window and in most cases you have only one chance to impress the user. When it comes to landing pages, you want your visitors to have just one task on your page: to convert. Great landing pages are built around solid user experiences and imagery plays important role in building this experience. When users come to your page, they’ll have some kind of reaction. Whether it’s positive or negative, in large part, is determined by what they see.

Following the advice “show, don’t tell” and:

  1. Choose imagery that fits your message.

    It’s important to choose images that can simply explain the concept of the product or service. That doesn’t mean that the image needs to say everything — the image seen alone might not even seem to be clear, but it should logically fit when it’s connected to everything else on the page. It should visually reinforce the message you try to deliver to visitors.
  2. Show images in the right place.

    If the image supports a high priority goal, it should have more visual emphasis; conversely, images related to secondary goals should have less emphasis. The most important images should be anchored in a prominent position (i.e. above the fold), and should be a primary point of focus.
  3. Choose striking visuals that capture attention.

    Focus on selecting the most compelling images you can find. As Steven Snell mentioned, “A vivid, striking image will last in the minds of visitors. Text may be read and forgotten, but a strong image will be remembered.”
  4. Use emotionally powerful imagery.

    Your images should be emotionally persuasive — have an emotional impact and reinforce the feelings you are trying to create. After all, emotion often overrides logic when it comes to decision making.

Below is an example of landing page by Intercom57, a service that allows you to communicate with your customers more efficiently. The landing page takes a reasonably complex idea and makes it easy to understand how the product works, and why it might be beneficial.

58
Intercom uses illustration to compare the the old way of working, versus a simple approach. (Large preview59)

Conclusion Link

Thinking about images in terms of their usability is important. All visual communication in your design leaves a cumulative impression on the user.

Compelling images have a unique ability to inspire and engage your audience to provide useful information. Take the time to make every image in your app or site reinforce user experience.

Recommended Reading Link

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app63 is made for a fast and fluid UX design process, creating interactive navigation prototypes, as well as testing and sharing them — all in one place.

You can check out more inspiring projects created with Adobe XD on Behance64, and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free65.

(ms, vf, yk, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2011/10/the-dos-and-donts-of-infographic-design/
  2. 2 https://adobe.ly/2iHiSBS
  3. 3 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/
  4. 4 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
  5. 5 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/01/1-large-opt.jpg
  7. 7 http://hubpages.com/business/11-Vintage-Food-Ads-Featuring-Creepy-Soulless-Children
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2017/01/1-large-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/12/psdistort-large-opt.png
  10. 10 https://www.adobe.com/products/photoshop.html?promoid=KLXLS
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/12/psdistort-large-opt.png
  12. 12 http://www.responsivebreakpoints.com/
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/01/4-large-opt.png
  14. 14 http://www.responsivebreakpoints.com/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/01/4-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/01/5-preview-opt.png
  17. 17 https://soundcloud.com/
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/12/redrose-large-opt.png
  19. 19 https://stock.adobe.com/
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/12/redrose-large-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/12/flower-large-opt.png
  22. 22 https://stock.adobe.com/
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/12/flower-large-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/12/planesinsun-large-opt.png
  25. 25 https://stock.adobe.com/
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/12/planesinsun-large-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/12/airplane-large-opt.png
  28. 28 https://stock.adobe.com/
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/12/airplane-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/12/family-preview-opt.png
  31. 31 https://material.google.com/
  32. 32 https://articles.uie.com/deciding_when_graphics_help/
  33. 33 https://articles.uie.com/deciding_when_graphics_help/
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/12/fatherdaughter-large-opt.png
  35. 35 https://stock.adobe.com/
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/12/fatherdaughter-large-opt.png
  37. 37 https://www.squarespace.com/
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt.png
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2017/01/12-large-opt.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-large-opt.png
  41. 41 https://dribbble.com/mutlu82
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/01/13-large-opt.png
  43. 43 https://www.smashingmagazine.com/2010/08/improve-your-e-commerce-design-with-brilliant-product-photos/
  44. 44 http://joby.com/gorillapod
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-large-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/01/14-large-opt.png
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/01/15-preview-opt.png
  48. 48 https://www.thinkwithgoogle.com/
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/01/16-preview-opt.png
  50. 50 https://www.thinkwithgoogle.com/
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-large-opt.png
  52. 52 https://basecamp.com/
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/01/17-large-opt.png
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2017/01/18-large-opt.png
  55. 55 http://emptystat.es/
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/01/18-large-opt.png
  57. 57 http://intercom.com
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/01/19-large-opt.png
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2017/01/19-large-opt.png
  60. 60 https://articles.uie.com/deciding_when_graphics_help/
  61. 61 https://www.smashingmagazine.com/2010/06/how-to-use-photos-to-sell-more-online/
  62. 62 https://www.nngroup.com/articles/image-focused-design/
  63. 63 https://adobe.ly/2iHiSBS
  64. 64 http://adobe.ly/1U9LS0E
  65. 65 https://adobe.ly/2iHiSBS

↑ Back to topTweet itShare on Facebook

Leave a Reply

Your email address will not be published. Required fields are marked *