How to build an effective UI for analytics
Since I first joined AppLovin more than four years ago, our UI has gone through many changes as the company has grown to a point where we process over 50 billion requests a day. Here are a few things that I’ve learned about efficiency, data visualization, and the importance of simplicity that apply to anyone building a UI that relies on large data sets and presents complex analytics.
Make the site efficient and responsive
Our business requires that we present enormous amounts of data to our end users (developers and advertisers). The UI has to be incredibly responsive; it has to fetch data and display it in a timely manner, whether that’s for a three-month analytics report, or within a specific date range for every app for a publisher, or a list of every ad in an advertiser’s campaign.
So how do we do that?
✔ Cache as much as possible
There are a lot of pages on our website in which the data the user sees does not change often. There really is no need to hit the database constantly with every request. Because of that, almost all of our database queries are stored in cache. This is highly beneficial for us because it improves our database performance and returning results from cache is much faster.
✔ Return larger dynamic data via AJAX
For data sets that are large in size and dynamically changing, we like to return them to the user via AJAX. This allows the pages to load instantly. (We also cache these results, but they’re cached for a much shorter amount of time because they constantly change.)
✔ Offload data logic to the client side
Deploy effective data visualization
After you have the data and it has been structured properly, the question always becomes, How do you display it in a manner that the user can understand it? Also, When is it right to use a certain data visualization (i.e. chart, bar graph, pie chart)? Here are some visualizations AppLovin uses, and in what context:
Use charts to display a data set over a progression of time between specific date ranges. Grant users the capability to compare multiple data sets from different days. For example, they should be able to compare today’s performance against any previous day.
Use tables to display more detailed, purely numbers-driven information regarding large data sets. Allow for sorting and pagination and the option of increasing how many results are shown per page.
We like to use dashboards to give the user a high level view of what is going on without them having to do too much thinking. For example the moment a developer logs in, they can see right away in big, bold, colorful text the number of impressions and clicks, as well as how much money they have made.
Integrate HTML5 into the web application
HTML5 allows you to build UI components that provide a richer user experience. Here at AppLovin, we have taken advantage of HTML5 by integrating it into core parts of our website. Doing so gives our internal team and our users the ability to increase production and efficiency. Here are some of these examples in our UI:
✔ Drag and drop
A user can create ads by uploading assets (images and videos). Before HTML5, creating ads was tedious: an advertiser would have to upload each image/video individually and sequentially. But with HTML5’s Drag and Drop API, we have created a UI where a user can click a button which opens up the file directory where the assets are located, or they can just take an entire directory and dump it into our UI.
✔ Asynchronous file upload
With HTML5’s File API, we are also now able to do all sorts of cool things in regards to uploading assets. Using the API’s File Reader object, we can read the contents of any asset and instantly show a preview of the image/video that a user has uploaded. Once that is done, we pass the uploaded asset asynchronously to the server via AJAX using a Formdata interface. Uploading 20 images and videos takes about 10 seconds. This has sped up our ad creation process dramatically, which is of course key to advertisers.
✔ Dataset attributes
These are just some of the tricks of the trade when it comes to building an effective UI for analytics. Again, it really boils down to deploying specific strategies to ensure that the UI is extremely responsive; making the most of data visualization, including charts, tables, and a dashboard that are user-friendly; and leveraging HTML5 to create a rich user experience. The bottomline is that effective UI is all about giving your users what they need to effectively interface with your product.