Our brain is very attentive to moving objects: many websites have realized this and now use CSS to animate the way their content appear on the screen. What if instead of integrating the « movement of inanimate objects », we choose to modify the data in real-time? Impact on the users would be much bigger. The good news is, real-time is not strictly reserved to NYC traders in suits & ties anymore! Real-time data is everywhere: In social media, transportation, the collaborative economy, private sales, etc. Updating data is both very practical, and has a real business value for both the broadcaster and the receiver of that data.
Nowadays, we find animated graphical user interface (GUI) in most Web and Mobile applications. It can be animated buttons which have small effects and change shape when the user clicks on them, or animated text fields that change background color when selected, etc. The question is: can we go a little bit further and also animate the data?
Naturally, the first thing everyone does, including me while writing this blogpost, is to start by looking at the moving stick figure above. It is the role of our « reptilian brain » to draw our attention to moving things. The reason is simple and dates back to the beginning of humanity where anything that moved was either food or danger.
In our case, animation is meant to catch the user’s attention. For example, a button is animated to show that an action has been performed. The same way, data can be animated to show the user that important information has changed.
Animation of your application is also a great way to fight this new illness commonly known as "Repetitive Refresh Syndrome".
The refresh button and spinning wheel are breaking the relationship between the application and the user because it forces the user to perform an action then have to wait. You can find this in most current Newsfeed applications with the pull-to-refresh gesture, or the countdown before refreshing the data. Animation can help fight this negative effect and create an even stronger bond between an application and its users.
If we’re going to animate data, we might as well do it in real-time. But what does that really mean?
Just 5 years ago, real-time mostly related to the world of finance and trading (variations of the stock exchange prices, share quotations, financial transactions, etc.). Today the world has changed, and we all consume more and more information which we would like to access in real-time.
This image presents a few examples of current or potential real-time data usage:
As we have just seen, displaying real-time data in your applications makes for a richer user experience, but it can also make you richer… well, at least it can allow you to save money.
The perception of real-time is, of course, a notion relating to the individual, and in human perception, this 0.5 second has a tremendous importance. There are three origins to this concept.
The first origin is linked to the reaction time of our brain. The reaction time of reflexes in a human being is between 100ms and 0.5s.
A man stepping on a pin, for example, will first experience pain, then a primal reflex taking 100ms which will lead to him removing his foot. Primitive reflexes acquired during childhood get closer to the 0.5 second mark.
The second origin is linked to human interactions. Interactions between two human beings is in the range of 0.5 second as well.
Scientific studies have found that a yes or no question will get a response in about 100ms, whereas an open question will get a response in around 0.5s.
It is also important to note that human interactions are interactions which carry the most emotions.
The third origin is linked to the way our memory functions.
There are three types of memory in our brain:
Moving from one memory to the next, there is a huge degradation in the information that the brain will keep.
In summary, both primitive reflexes, human interactions and sensory memory, are always in the order of 0.5 second. Why is this important for us? In order to develop Web & Mobile applications which will convey the most emotions to the user, we need to reach this 0.5 second threshold in terms of response time.
The graph above shows the scale of the emotional impact on a user depending on the application’s response time:
Since about a year and a half, mobile Internet has superseded computer Internet. Nowadays, most Internet data is received in real-time on smartphones, and the main challenge faced is the latency, mostly network latency.
The graph below shows the round trip delays (ping time) in transporting the data:
Data round trip over mobile 3G is about 150ms, so 5 times slower than over optic fiber.
And for HTTPS, you have to multiply these figures by 3, because data will require 3 round trips: the first for SSL negotiation, then the second for securing the connection, and the last one to transfert the actual secured data. So for a secured connection over 3G, it already takes about 450ms just to receive the first useful piece of data, just under the 0.5 second threshold.
In order to reduce the latency as much as possible, we will have to fine-tune our application depending on the context, a bit like a Formula 1 car:
To summarize, we consume more and more data primarily via mobile, using HTTP 1 protocols dating back from the 90’s when mobiles didn’t even exist, with the need for secured connections adding even more latency.
In this article, we have learned why animating data in Web & Mobile applications are important in order to attract new customers and even more so, to maintain them. We have also seen how real-time data can help avoiding the frustration of having to refresh & wait to receive the latest information, and the importance of the 0.5 second mark to create a relationship between an application and its users. Finally, we have seen that our online world is shifting from computers to mobile devices, introducing new problems to solve.
So, do we have ways to overcome these problems and be able to efficiently push & animate data on both Web & Mobile? The answer is YES! With the rise of the WebSocket and Server-Sent Events (SSE) technologies, we now have some powerful tools to transform polling APIs into push APIs. For a sneak peek, you can read a previous article on our blog: Push: SSE vs WebSockets
Try streaming any JSON REST API within 30 sec
curl -v "https://proxy.streamdata.io/http://stockmarket.streamdata.io/prices/"