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.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...

21

Aug.

VR Developer’s Journal Part 1: Getting into VR

This is the first in a new series of Fresh blog posts about Virtual Reality (VR). Eventually we’ll be diving into the more technical aspects of software development for VR; however, this first blog post is more of an introduction, to give you some background and better context to what follows. It’s important to note … Continued

26

Jun.

How to Debug Django Apps

How to Debug Django Apps In the JavaScript world, my primary debugging workflow consists of dropping a debugger or a console.log into the code and seeing what happens in the browser’s developer console. This methodology has always worked effectively for me. However, I have started to work more with Python and Django recently, and though … Continued

25

May.

Adventures in Optimizing Performance

Even if a programmer is very comfortable with their codebase and their technology, they won’t always be correct in determining what portions of the program are running slow. To that end, the first step for optimization with an existing system is profiling or measuring the code base. This ensures that the critical parts slowing down … Continued

Pacific Science Center

application maintenance and development

Pacific Science Center

Cisco

mobile development

Cisco

Deloitte

web design, microsite development

Deloitte

Seattle Public Library

ui/ux design, microsite development

Seattle Public Library