Understanding the Use of Images & Icons in UI Design

Images and icons are the visual elements that help ease recognition. These elements drive emotional attachment to the content. You must have seen websites using a balance of written content and visual elements. Images and icons create a unique visual identity of a product that has everything to do with its appearance and feel. Good use of visual elements and a good user experience really enhance the overall good and feel.

Understanding the Use of Images & Icons in UI Design

Proper usage of images and icons is needed in UI design, thus it’s very important for you to have detailed information about it. So in this article, we’ll be looking into some amazing concepts and ideas for using images, icons, and illustrations on the website/app.

1. Images in UI Design

Whenever users scan any website or app, they actually look at the layout, navigation, and content along with the way each of these is presented. In research, it is found that “Humans process images and visual content 10x faster than text content”.

Let’s look at an example:

Visual Processing Example

In the above image, a rectangle when shown as an image is recognized fast as compared to after reading the definition. This is what we call visual processing and this is why the use of relatable images makes information processing faster and easier for the user. 

Images help in recognition rather than recalling which actually a good designer should do– choose to recognize rather than focus to recall.

While going ahead to pick the images to put on the website or app, always be clear with the following question in your mind:

• Are these images relatable to the context of the website?
• Where and when is it appropriate to put imagery?
• Will adding an image under this section enhance the storytelling?
• Is there a point in adding images at all for the context?
• Would adding imagery ease the understanding?
• Does the image describe the brand?

Once you are clear, know what different types of imagery you can use for the website/app you’re designing for.

Types of Images

Here is a list of different types of images we have for the user interface. This list would help a designer in understanding what places can be an appropriate option to place images:

1. Hero Banners: These are used at the top as a banner for any product or article. These are the images which actually used to engage user attention with catchy headings or characters in the banner. 

2. Marketing Banners: These are promotional banners that are added between posts to grab user attention to the best deals and offers.

3. Thumbnails: These are the small images used to represent a large image, and help in managing a large number of images in a group. Provides better scanning.

4. Product Photos: Generally used to showcase multiple images of a product. Can be seen in any e-commerce or shopping application. 

5. Avatars: Images that represent user profiles. As a designer, you should be well aware of when to use Imagery or Illustration as both are generally confused with each other but serve different purposes of use.

6. Images: These are high-resolution pictures that are used to show a specific idea around. These are very specific such as pictures of the sea or ocean. Images can be used when:

• When you have a vision in mind i.e theme-based design
• Need to showcase a product 
• Design requires a specific detail.
• When you want to attract human emotions via faces

Note:  Real human images attract more attention than human drawings or vectors. There is a specialized segment in our brain that only processes emotions, so to capture better attention use real faces.

7. Illustration: These are high-resolution vector drawings that are used to show the conceptual idea around. These are customized vectors that are created for a particular concept based on the requirement. 

These can be used when:

• When you have a concept in mind
• Use of graphs while data visualization
• Need to showcase something personalized i.e Apple’s Memoji
• When designs are customized
• When you want to tell a story

Tips to Use Images Effectively

Here are a few tips to use images effectively – 

• Always use relevant images that convey clear a message
• Ensure the contrast
• Emphasis on using real faces to attract user’s  attention
• Choose high-resolution images

While using images in your designs, always make your images equally accessible to everyone as they drive traffic and user experience. Effective use of imagery can enhance the overall user engagement with your product.

Benefits of Using Images in UI Design

Using images in UI design can bring several benefits, such as:

• Quick and easy recognition
• Consumes less space
• Enhances and matches the product aesthetics
• Improves brand identity, i.e system icons
• Global Acceptance
• Avoids the need for translation

Apart from this, selected icons should have consistency. There are various resources available from which you can get icons but using different icons together disturbs the optical balance and the design looks very immature. Always maintain consistency while using the icons. Icons alone should be enough to communicate the concept. 

2. Icons in UI Design

Icons are the representation of any entity or concept. Such as a Home icon to represent a landing page. These are the simplest and most aesthetic elements that we can use in design. Icons bring the best of both worlds(text and images). Using icons effectively, may improve user experience, and also enhance the look and feel of a product.

Types of Icons

We have different types of icons which are used to help quick and easy communication as compared to text. Let’s look into each type.

• Globally Resembled Icons: These are globally accepted and known icons. Using these icons alone would be enough to convey the message. Such as traffic signs, and emergency and danger signs are widely known and have a defined message associated with them.
• Referenced Icons: These are the icons that are created to refer to an existing physical product/idea. Such as the piggy bank icon is associated with physical piggy banks and the bulb icon is associated with the concept of idea.
  
• Learned/Arbitrary Icons: The icons which we learn on the go, along with their use in our daily life. Such as heart is associated with like, this is what we have learned from social media. The hamburger menu icon is something we have a mental model of being a secondary/additional source of options.
  
• System Icons: These icons are also called operating system icons, these are named so because they represent a particular os. I.e Android, Windows, or IOS. Such icons created OS familiarity among users. For example, Apple’s setting icon is very easy to recognize on all IOS devices, and similarly, the window’s window logo is known to be the home button.

Design of Icons

• Filled Icons: The icons which are completely filled with one prominent color or a gradient. Filled icons are generally less preferred as they have a more playful mode. It can be difficult to fit the design of a product. To use them you have to create one for yourself to match the theme.
  
• Stroked/Outline Icons: Icons only have the outline of a shape, these have more modern and adaptable to the theme. 
  
• Icons with Uniform Outlines: Icons that are enclosed inside a frame or box. Preferred to use when showing active state but not suggested to use too often due to the reasons that:
  • These icons have a lot of noise
  • Being enclosed inside a box creates clutters
  • Have poor fixation points due to which these icons are hard to scan when the shape of the icons and enclosed box are of the same shape.
    
• Icons Without Uniform Outlines: Icons that aren’t enclosed inside a frame or box. They are just the icons that are most preferred to use often due to the reasons:
  • These icons do not have a lot of noise
  • Have high fixation points due to irregularities in the shape of the icon, which makes scanning information very easy.
    
• Labeled Icons: The icons, which are not alone, have labels mentioned with them. Using these icons is a good practice to follow, as they help avoid confusion between clashing or conflicting icons. The label generally comes at the bottom or below the icon. It is found that by adding labels with icons, around 88% of users were able to easily understand and interpret the meaning as well as the usability of icons actually increases. 

One thing which every designer should keep in mind is that don’t always just rely on the icon as icons that are used to convey difficult or complex meanings are hard to design. Such as icons are alignments, novice users might not be familiar with such icons before. Therefore along with such icons, it is always a suggestion to use the action text. For example, Left aligned icon with text mentioning “Left aligned”, such as Microsoft Word.

Conclusion

It’s a wrap for this article, we hope you find it helpful. This article will help you to step into the world of designing. For any beginner in the field of design knowing such detailed information is good to know and sets a strong foundation. So the next time you are using any image or icon in your designs, use this article as a checklist.