System to selectively render transitions and animations on a browser, based on the device's computational capabilities
Publication Date: 2016-Jan-06
The IP.com Prior Art Database
Disclosed is a system that can selectively render animations and transitions on a browser, based on the computational capabilities of a device and the resources required for rendering. The system ensures that animations and transitions are rendered at the ideal frame-rate depending on the device.
Page 01 of 6
System to selectively render transitions and animations on a browser , based on the device's computational capabilities
Users are accustomed to visually appealing interfaces with interactive elements such as drag-and-drop, animations and element transitions like slide in, fade out, bounce etc. These require significantly more processing power than static elements which are common in web applications. Devices with sufficient computing power can render such animations and transitions in a smooth manner, but on other devices they may result in a jittery experience plagued with lag and low FPS (frames per second). Due to the poor experience, users often leave the web application or page before they can use it based on the content and features. Due to the diverse nature of devices accessing content on the web, it is not possible to design animations and transitions that run in the same manner and provide the same experience across all devices. On the other hand, completely eliminating these elements would also be counter-productive as the competitive edge provided by an enhanced user experience is lost. The illustrations below depict the difference in user experience on a high performance device (Figure 1) versus a low performance device (Figure 2).
Figure 1. Example page rendered on a high performance device
Page 02 of 6
Figure 2. Example page rendered on a low performance device
The proposed solution allows developers to decide at run time how to render computationally expensive elements. These decisions are based on the device's capabilities viz., how much memory is available, processor capacity, current load on the device etc. Devices which are capable of running these elements provide the best possible experience. On other devices, although the experience may not be the best possible, the content is not hindered by factors like jitter and low frame-rates (FPS). The user experience would gracefully degrade from high end devices to an entry level devices. This ensures that any elements intended to augment the content and functionality, do not attenuate it in any way i.e., users on high performance devices have an enhanced experience whereas users on lower capacity devices do not move avoid the application on first sight. This is similar in principle to responsive web design which is used to style content based on a device's dimensions and other properties.
The system uses a combination of factors like RAM available, CPU cores free/in use
Page 03 of 6
and current load on the system to determine whether the browser can run an animation or transition. These factors alone are not sufficient to decide whether an element can be rendered or not, hence these are used primarily used to determine if a device meets the minimum requirements to run such elements. For example a device where 90% of the CPU is already in use, may not be able to run even the simplest of transitions. The key piece of information is the time taken by the "benchma...