How to build an effective UI for analytics

by Tariq Ahmed on Jun 17, 2016

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

We’ve found that it’s beneficial to let the client side take care of as much of the data logic as possible. If we see that data that is returned to a user is a full data set, we offload all computation from the server side and have the client side take care of it. For example, when it comes to building tables, we have a custom javascript table plugin that determines if sorting and pagination should be done on the client side or on the server side. This keeps us from having to make unnecessary ajax requests. Also you do not need the database to waste time on pagination and sorting.

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:

✔ Charts

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.

✔ Tables

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.

✔ Dashboards

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

Dataset attributes allow us the ability to embed custom data into HTML elements: users can now store complex application data which their  javascript can utilize. This has been highly advantageous when it comes to rendering complex tables. The user has the ability to interact with the table and do inline edits and perform other actions without having to leave the page.

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.

Tariq Ahmed is AppLovin’s user interface architect.

We’re hiring! Apply here.