Designing With Data
There’s a lot of discussions going on about data driven design (also known as data informed design) – using analytics to make design decisions. Here’s how we use data to inform design at a low-level such as “how long should should we make this artist name label?”.
Data can be of great help us when designing our products – to ensure they look their best at all times. Here I’m going to breakdown a simple problem: what data could we use to inform how we display artist names?
- What are the range of string lengths the UI needs to support? What is the shortest artist name and what is the longest?
- What is the frequency of name distribution? Are they equally spread, or are they clustered around a particular range?
Some of this is covered over in our Style Guide but this post will go into a bit more detail.
Getting the data
The first part involves actually having access to the data in the first place. Luckily, the Design Team at Songkick has access to our staging datacentre. I use Sequel Pro to run basic queries on the database.
> SELECT name FROM artists
The list of artists is then exported to a Google Docs spreadsheet and we can start to do things like character counts and frequency distributions.
In a spreadsheet it’s easy to use the LEN function to calculate the length of a string. You can then sort the data, and use COUNTIF to see the distribution of names.
On Songkick, artist names vary from 1 character ? (yes that’s a question mark) to 61 characters The World Is a Beautiful Place & I Am No Longer Afraid to Die
The frequency distribution of artist names can be visualised as follows:
We need to make sure the artist name can be displayed across the ecosystem of products no matter what length it is. Artist names appear in lots of places in Songkick so it’s important to have the data to design this properly across the board.
The frequency distribution shows us where a sweet spot may lie and where we can expect the design to be most stressed.
From the data, we now know that 99% of the top 25,000 most popular artists have a name which is less than 30 characters. We can use this information to inform the design of fringe cases e.g. we could ellipsis artist names at 30 characters which would affect <1% of artists. This is how we designed the artist screen on the iOS App – the limit is actually 31 characters after which the name has an ellipsis.
The data allows us to test how a design might perform at it’s most stressed points. For example, a particular design might look really well balanced if the text is around 10-30 characters. However, as that text length changes, it will begin to stress the design.
On Songkick.com desktop web, we’ve designed the H1 so that our longest artist fits within 2 lines. We know that all the current artists in the world are going to fit onto 2 lines or less. Of course, another artist could come tomorrow who has a name of 100 characters which would push this on to more lines. The current design would handle it, but it probably wouldn’t look as balanced and would push some core content out of the viewport.
On mobile, the design is more stressed with longer artist names and this is something we would look to address in a redesign.
This approach can be applied anytime you have to design for variable content. You might not get it right first time (especially when there’s no existing data) but it can be a worthwhile exercise once the data starts pouring in.
Feel free to contact us if you have any questions.
Karim (@karimtoubajie), Songkick Design Team