101 — Using Images to enhance UX
Your guide to using images in Interface Design
--
Photographs can be a powerful way to seize users’ attention and communicate the value for your product. They are more than a mere piece decoration and have the power to make or break a user’s experience.
Compelling images have a unique ability to inspire and engage your audience
A product that has used the true potential of photographs is Spotify. Spotify has wiped out all the music-streaming services, and is the only one surviving the battle against the mammoth — “Music runs deep in our DNA” Apple Music.
In 2015, Spotify launched a brave new identity by using duo-tone photographs of their artists. This has marked the start of an era of fascinating marketing campaigns.
A picture is worth a thousand words.
We often miss the role of images in building a great UX. Often as UX designers, we pay more attention to the structural information, usability of navigational flows, the calls to action and labeling, pushing images to a second thought. Let us be honest, how many times have we used a placeholder image box with a big cross in the wire-framing stage (I’ve noticed people doing this till the prototype is made).
But not all images enhance the experience. It’s tough to get accustomed to using them rightly, but once you do. You're done for a lifetime.
So from our collective learnings on various projects at 1THING, I’ve prepared small tips for you to consider before you take up your next design project:
1. Design content first
Its going to be a difficult call but my making it a habit of including imagery or proto-content from the start of the project can really guide the rest of the team to think alike.
The kind of image that the wireframer in the team thinks of, might be different from what the prototyper has in mind. It is a good practice to use tags in your design notes, to describe your thoughts on the kind of image that is to be used. Making yourself devote time to thinking about these choices will provide direction on using imagery and this habit will go a long way to improving the UX of the final product.
2. Consider your layout
Basic layout considerations include avoiding rude cut-offs and choosing imagery that balances the layout and format of the design you are using. There might be a ‘duh’ moment is this, but making sure an image is in the correct format ratio will go a long way to enhancing usability. Stretched images are distracting.
3. Specific is better than generic
Using Images appropriately in interfaces isn’t as easy as it sounds. You need to have a reason to fill up that prime real estate, that is why you’ve got to be specific.
One of the reasons, why stock photography has become a cliche is due to the generic and vague nature of the images — such as a man working alone with his Mac at a fancy coffee shop.
New services like Adobe Stock Premium, Unsplash, etc bring a higher quality set of images to the table — with exceptional, lush photography and relatable scenarios. These services have the added advantage of being integrated with various design tools that we use.
Unsplash is the favorite bet for most designers currently, and mine too. Read Mikael Cho’s article on how Upsplash scaled to over 150M downloads.
I’m sharing my collection of best royalty free images; some provide specific to needs of food photography, startups, animals, travel-based, etc. Here is the link.
4. Consistent Style
A picture, an icon, an illustration, a screenshot, all visual communication in your design leaves a profound impression on the user. Visual communication has the supreme power of directly connecting with a user in a flash. Using them you can drive UX with immersive storytelling skills, a sense of context, and eventually humanize your app. So take the time to ensure that every part of your visual communication isn’t dealt with lightly. Each visual content in your product is fortifying user experience, and each tiny detail matters.
5. Design with Accessibility
As a designer, we must make sure the product is usable by the widest range of people possible, and that’s why image accessibility is important.
The challenge to equip images with readable text over them has become easier with a range of tools helping us measure the accessibility of our design. Cat Noone’s Stark is one such tool to test your design with color-blind simulator and contrast checker for Sketch. As a general rule, overlaying text on an image works best on minimal images with lots of whitespaces.
6. Performance affects UX
I’ve always heavily focused on why designers should work closely with developers and understand how things work for them. Something simple for a designer might involve a drastic effort by the developer.
Images and icons heavily impact the user experience by increasing the loading time. The designer must make sure the images they provide are optimized for web and loading easily even in lower data speeds. Making sure that the images you use are optimized for the web, will reduce the waiting image users.
Have you ever seen what a great experience Whatsapp provides even in the remotest areas with low data speeds, while all other apps struggle to load?
TinyPNG and Image Optimizers are my personal picks. Guys from Image Optimizer have also built a Sketch plugin for compressing your exported PNGs. SVGO is another plugin you can use to compress the SVG assets.
7. Deep Focus
Use images as a visual communication tool and reinforce your message. You should have an iconic point of focus in your imagery. A clear focus reaches out the concept at a glimpse, opposite a lack of focus makes the image meaningless and confusing.
The most powerful iconic images consist of a few meaningful elements, with minimal disturbance.
Thinking about imagery in terms of usability might seem a bit comic, but let’s face it, you will certainly factor in these point before starting your next project. Creating a good UX means paying attention to the smallest of the details and imagery is certainly one of them. Being a little thoughtful and attentive from the beginning will go out to make a pleasurable experience for the users.
