Image by Miss Zhang
We underestimate photography in UX when it comes to web/mobile design. It is another brilliant form of captivating and engaging users.
Recently, photography has played a more significant role on the internet, furthering web design as a visual medium. Beautiful photography advances into 2018 as a timeless technique, mainly as HD screens are more affordable.
UX approach to photography
As UXer’s we should be looking at photography as a powerful tool to help communicate and differentiate a product or service from competitors – vision is the most significant human sense and is the quickest way to grab users’ attention.
Firstly, we need to understand the distinctions between photography and UX Design. Photography is subjective whereas UX Design focuses on the needs of others (not yourself).
“Photography is self-focused, the design is outward-focused” Together Incredible
In this article, we’ll take a look at trends of web photography with the focus of users at the forefront of our mind.
Eye-Catching Hero Images
Full-width hero images have been trending for a while now due to the value of creating an immersive experience straight away. You have 7 seconds to grab a customers attention as they enter your website. In that time they should be able to figure out what the site is about or curious to find out more.
“Irrelevant, unnatural and low-quality images don't contribute to making your message clear and attractive, as users regularly ignore them” Dr Jakob Nielsen
The images should be high-quality, exciting and work in conjunction with your content. When using text-on-image, ensure that the central part of the image is prominent and the text is understandable.
Tip: Use only HD images for the hero area that stimulate the imagination. There’s nothing worse than a large, low-quality photo.
Image from Eginstill
Storytelling in UX is not a creative writing activity. Our stories are designed from research, understanding the audience and their requirements. This in-depth knowledge drives successful solutions.
Visual storytelling helps to clarify the mood and instantly brings the image to life– 46% of marketers say photography is critical to their marketing strategy. If you fail to create a story, you also lose the tone, brand and connection with the users.
Lonely Planet - Middle East
Images that complement your text
Use predictive visuals to enrich the user experience. The photos you use should help customers thoroughly understand what you are communicating and help reinforce your ideas.
Eye-tracking studies by Nielsen Norman Group has shown that people are drawn to informative photos when the images get associated with the user’s current task. Images that appear to be solely decorative, they will be overlooked.
Be mindful when placing text over an image, consider both the text colour and the colour of the image. Images with light coloured backgrounds are not well suited to white texts because the colours are too similar. The image will need a darkening effect to provide enough contrast.
Tip: Content with relevant images gets approximately 94% more views than content without relevant photos.
Have a point of focus
It is vital that a clear concept is conveyed to the user in a significant way because a lack of attention makes the image meaningless. Colour and composition is a great way to give visuals a definite focus.
Tip: The most influential images consist of a few significant elements, with minimal distractions.
Image by Anurag Arora
Consistency helps to establish credibility and trust. Take some time to think about what your images say to your customers. What style best promotes your brand? What is the demographic? Will colour palette help propel a bold message? What photographer has the aesthetics you need? Choose your style before you start, this will empower you to create a cohesive look through the whole website.
Optimize for performance
Loading time on a website can be an issue, studies show that up to 40% of visitors click the back button if a site takes longer than three seconds to load.
Remember, not all your visitors will be on high-speed connections and slow page load time will not only affect your ranking with Google but will stop people returning to your website. Images should be optimised for web, try to keep them below 70kb where possible.
Tip: Make sure your images are appropriately sized for displays and across platforms. The pictures and text should be high resolution and tested for specific devices.
Key things to take away
Your photography maybe stunning, however, if this does not engage the user it is irrelevant, we need that human connection. For this, you need to remember the following ideas:
❌ Avoid unrelated and non-realistic shots unless the messaging supports this clearly (stock images).
✔ Use one or two large impressive pictures instead of lots of little ones
✔ High-quality only!
✔ Choose photos that stimulate the user and instil a memory
✔ Choose strong images that compliment your story.
Image by Karl Fredrickson
“There is no unique picture of reality” Stephen Hawking
Consider your business goals and user needs
Pictures are faster than words. When selecting images or collaborating with a photographer, ask yourself the following questions:
❓ What are the benefits of using the particular image?
❓ Does it help the user understand the message you’re trying to communicate?
❓ Does it showcase your product or service well?
❓ Does it add value?
❓ What impact will this have on the campaign?