Development

Optimize Your Application’s Perceived Performance

October 24, 2017

Once you’ve created an application, how do you benchmark performance? Does performance hinge on how fast and efficiently the application actually works – at the code level – or does it hinge on whether or not a user interprets it as performant?

There is a difference between perceived performance and real performance. Perceived performance is the way the user perceives an app’s speed. It is often more important than the actual speed of the app. Think of perceived performance as a better point of User Experience (UX) feedback and performance as a code optimization to improve speed.

A Comparison Between Two Scenarios

First let’s assume:

  • Both examples have equally great overall code performance. They have been optimized to an identical degree.
  • The use case is reordering rows in a table.

Option 1: Without Perceived Performance

In this scenario, the user performs an action while a back-end response updates the table.

action without perceived performance

This is the very traditional way of updating content. The downside is that a user might end up waiting for a long time before getting a response. Depending on the internet speed, he or she might feel like this is not a very fast app. Worse yet, the user might not know if the app crashed.

Option 2: With Perceived Performance

This alternative uses two-way feedback to inform the user that the table is being updated while the code works on the back-end. By being shown a loading spinner over the checkbox, the user is made aware of the fact that his or her request is not finalized, but is still being processed.

action with two way feedback

Adding these disabled states prevents the user from editing a field that is in the process of being updated (Note: a “disabled state” is a button that isn’t currently active or clickable – Google has stylistic recommendations about how to make disabled buttons look in their guide to Material Design). Additionally, the application is set up to save the previous state so the user can revert it in case of a back-end error.

So, Does it Actually Feel Faster?

Yes! Research shows that varying levels of animation have an impact on perceived performance, with the end result of users willing to wait longer for the experience to load.

Having feedback in the form of motion and animation, such as contextual transitions, makes the user feel like the app is fast and that it is reacting to the user’s input. This improves the overall user experience.

More on Perceived Performance

The example shown may not apply to all situations, but you can start thinking about using this UX tool more often to mask latency and other factors that impact a user’s satisfaction with an application.

Other things that you could do to improve perceived performance are:

  • Add an :active css state to buttons
  • Add loading bars and spinners
  • Use smooth animations to mask loading times.

Interested in reading more about using motion and animation to impact usability? Download our white paper, The Future of Motion in Digital Experiences.

Want to read more about how we approach the art of optimization at Fresh? Check out Your Guide to Website Optimization.

Do you have insights or experiences of your own? Let’s continue the conversation! Comment below or get a hold of us today.

 

Xavier Reyes

Front-End Developer

You might also like...

10

Nov.

How to Get Started with the Internet of Things (IoT)

We live in a time when most of the hardware we use is connected to the internet. “Smart devices” started with phones and TVs, but there are now many other internet-connected devices like cars, refrigerators, and home automation systems. The Internet of Things – or IoT – is growing as an industry, with new devices … Continued

20

Oct.

Announcing Fresh Consulting’s WCAG 2.0 PHPCS Linter

Today, Fresh Consulting is announcing the release of our WCAG 2.0 PHPCS Linter. The linter is a set of rules (or sniffs) for PHP Code Sniffer which can automatically detect and alert when certain WCAG 2.0 violations are detected in code. WCAG 2.0 supports designers and developers in meeting the guidelines and success criteria of accessibility. The … Continued

15

Aug.

Continuous Integration Testing

What Is It? A tool (continuous integration server) performs automated testing. “Integration” refers to combining individual developer changes with the existing shared code base. The purpose is to see if changes can be combined or if they conflict. When Should it be Done? Should be conducted with every code push (also called a “commit”) to … Continued