- Posted by LivingObjects
Perception and reality, the secrets of a fluid WEB application
When you interact with an application, it’s not acceptable to experience waiting times or even worse, timeouts.
Between 100 and 300 ms, there is a slight perception of a delay. Beyond 1 second, your attention starts dropping. More than 10 seconds, you think the application is not working : the number of complaints increase and eventually, if nothing is done, people give up. For commercial web applications 3 seconds is the acceptable limit. Beyond this delay people tend to go elsewhere.
Ten years ago, a spinner on a web page was comforting: the application was taking care of our request and we were almost happy to wait. With the latest high-speed mobile (4G and soon 5G) and fixed (optical fibre) networks, we now expect almost immediate answers: ” Why should I wait a long time the answer for my rather simple request? ”
Today, the spinner is associated with slowness. Latency is not acceptable anymore and well-designed applications should deal with network contingencies. If not, users won’t wait, they’ll pass!
Where did the time go?
In the mountains, there is no gained time but only lost time. This mountain saying means that trying to gain time by removing climber’s security related actions never helps achieve the goal faster. Good work and preparation are the secret for optimizing spent time.
The developer can’t improve the network transmission speed, but he can :
- Optimise data server computation times
- Design an efficient communication protocol between the client and the application server
- Implement the right visual information rendering strategies.
All types of applications will beneficiate from it but optimization becomes imperative as soon as big data is involved.
The following rules are always kept in mind when designing our user interfaces:
Choose the right pace for showing the information
Always leave a reasonable amount of machine resources available (cpu/memory) for other tasks:
In other words, avoid freezing.
LivingObjects applications use complex frontend components: The use of canvas for graphs and, WebGL for maps, data selectors with thousands of objects..,
It is therefore impossible for us to develop according to the principle: “The backend has done its job sending the information, now the web-browser must do whatever it takes to manage it fast!”.
Everyone experienced it at least once: mouse sluggishness, whiteing tab and eventually a popup saying “tab not responding try reloading” .
The following strategies are required:
- Splitting large components into sub-blocks that are asynchronously loaded every 100 ms
- Smart loading of the sub-blocks: starting with the most visible ones
Keep the user captivated
Systematic and instant click feedback has now become the norm for all web applications. Although it is a definite and necessary step forward it is no longer enough, users now request almost immediate answers.
The recently introduced “skeleton screen” strategy is now used by most web giants. Luke Wroblewski first used this term and gave it the following definition:
“A skeleton screen is essentially a blank version of a page into which information is gradually loaded”
The aim is to load almost instantly a skeleton of the web page where text and images that are not available yet are replaced by small grey or neutral colored blocks. When available the actual data gradually comes replacing those blocks. Even though the total loading time hasn’t decreased the user perception has dramatically improved.
This strategy gives the illusion of instantaneity and helps preserve the user’s cognitive engagement.
This research on user experience, first carried out on mobile applications, is also beneficial to web applications for PCs. By respecting the afore mentioned principles, we bring a fluidity of use close to that of a thick client application.
https://developers.google.com/web/fundamentals/performance/rail , guideline given by the Google team on interface design
https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a to understand in more detail how skeleton works