In this article, we will talk about making digital products more user-friendly. Reviewing your interface and adjusting visual feedback can not only influence user’s comfort positively while interacting with your product but in some cases, it can also increase the sales or help you to win a new customer.

Illustration from Ouch

 

What is Visual Feedback

Visual feedback is a visual output from a system that allows the user to interact better with the system.

The main goals of working on visual feedback are to show the user that:

  • they can interact with the product (app, software, online tool, website)
  • their interaction with the product has been detected, interpreted and processed.

Nevertheless, these days when people interact with dozens of apps and websites on a daily basis, it is also essential to establish contact with the user – to make your product not dull, but visually and emotionally attractive using photos and illustrations. For example, onboarding and notifications can be those contact points.

The landing page of  Photo Creator tool

Icons, Buttons & Tabs for Visual Feedback Improvement

Highlighting is essential to direct users’ attention to changes, and to show which particular element has focus, which of them are selected, to indicate if an element is particularly important, or is undergoing change, or to prompt users to act on an element.

In some cases, a simple edit like changing the color of an icon, a button, or a tab after a user has interacted with it will be enough.

Source

Though, the choice of color can influence the meaning of the interaction result for the user. An icon or a button that went grey associates with becoming inactive; this way, a user feels that they are moved to the next step. 

The same time grey color of the Number icon or a tab can mean that this is where a user is located now in your interface if it is the only one that stands out. However, it is quite rarely used or at least combined with an alter text color, for example.

 Source Courtesy of Dribble

Source

Another quite easy way to improve interaction is by adding an icon and text to notify users that can interact with your product in a particular way. Remember Instagram Stories with a link to a website. There you can see an icon of an arrow plus a text.

Because otherwise, no one would guess how to get to the website.

By the way, the usability of this interaction can obviously be enhanced since frequently, brands and bloggers need to add Swipe Up text or gif to get the attention of their followers or potential clients. So there is room for improvement, though at the moment it is in users’ hands only.

Icons that you choose should be easy to understand. Sometimes in a chase of a beautiful design, we can miss the fact that the icon is not as clear as it seems to us. 

In these screenshots of KineMaster app store, it seems that everything is fine at first glance: users know where they are located, icons are not too small. However, at second glance, you can notice that most of the icons haven’t a transparent meaning. Everyone can understand Text and Music icons, but what the Prize icon or the Diamond icon mean? None of these four highlighted icons mean anything to me as a user of several video editing apps, and they don’t help at all. And because of the absence of the category text name on the screen, I can’t connect a specific icon with a meaning for future interactions.

Besides the meaning of the icon can be incomprehensible because of the design of the icon itself when the size is too small.

This Video Conference Gradient icon is beautiful and detailed, though it can look not clear enough in a small format in the app, for example, and it would be better to use something simpler such as an iOS icon.

Users interact with your software, app, or website for a reason, and they should be able to fulfill their goals as easy as possible, by having icons and buttons marked and visible clearly.

Interaction problems appear when elements do not behave as expected. And it doesn’t matter how often someone uses your product. People always expect certain results of their actions. Humans store information in their long-term memory of how things behave. You can check how the issue was resolved in other products, and find the most appropriate way for yours. In most of the cases, there is no need to invent something new in terms of interaction and visual feedback. Because users already have an idea of how something should work based on previous experiences.

Animation Usage to Improve Visual Feedback

The animation is another way to help users to navigate through your product and interact with it. Designers are incorporating animation as a functional element that improves UX. Functional animation strengthens the design and has very clear and logical purposes, including reducing cognitive load, preventing change blindness, and establishing better recall in spatial relationships.

Two of the most popular and useful animations probably are loading bars that show how fast a process goes and set expectations for the timing — and shaking password fields that notify users that they have entered the wrong password. But there are plenty of other situations that need to have visual feedback.

For example, for e-commerce apps, it is crucial to clarify Add to Cart interaction. Make sure that you have shown a user that changes were applied. Otherwise, this interaction will cause doubt and as a result, repetitiveness of the action and frustration. The user can find out that they have put twice-triple more products in their cart, and that’s annoying and feels like a waste of time.

 Besides the meaning of the icon can be incomprehensible because of the design of the icon itself when the size is too small.

An unusual add-to-cart interaction created by Johny Vino

Source

Nevertheless, as Windows Guidelines say: don’t display feedback unless it is necessary. In some cases, excessive usage of visual elements might be the reason for the user’s lack of attention. Too many notifications, icons, pop-ups, animations on one screen can cause one desire — to shut down your product. So while thinking about what to improve, keep in mind that maybe the less, the better.

How to Improve Emotional Response?

There are different ways of adding emotionally affecting qualities to your digital products. You can put a human face on a boring information page with the help of illustrations or even funny stock photos. Almost every website uses cute 404-page images, but what about Empty Cart or Order Confirmed pages? 404-page (luckily) doesn’t appear so often, so why not to use other pages and screens to build a connection with your users?

Source

Source

Source

Source

Images can make something that usually fails to grab users’ attention to be a source of humor in a simple interaction with a product. First, it can gain attention to what is happening, so that users understand that their interactions are detected, interpreted, and handled. Second, it can add a positive vibe to simple interaction and drive your customer closer to your product and brand.

Trivial pop-ups Save and Delete files can evoke emotions or a smile all well.

Source

A photo on a webpage or app can target both: emotional response from a user and a simplification of identifying what page or screen your user looking at exactly.

Source

Source
Source

 

Bottom Line

There is almost always room for improvement of visual feedback. Listen to your users, hold usability testing to find your weak spots, find a neat way to help your users to understand that their interaction was recognized, was successful or failed, lower their frustration level, study other digital products’ solutions, and when it’s possible, show the human face behind your product.

 

Guest Author:

Anastasia Grebneva, the digital marketer with diverse experience

 

**The views & opinions expressed in this guest post are of the guest author’s and do not necessarily reflect the opinions & views of the Design Roast community as a whole.**

Buffer

About the author

Lexie Lu

Hello! My name is Lexie and I have a fervor for design, writing, and coffee. I graduated with a dual major in Creative Writing and Commercial Design, and through those grueling study hours (facilitated by coffee, of course) I always found time to write for myself.

My posts feature design trends throughout all industries and show how the field is always changing. There’s never a dull moment in the design world!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.