Timelines have broken out of the social media mould and are now starting to appear everywhere. We’re all used to seeing them as a snapshot of our life, but in business, timelines are being used to display everything from financial information to shopping histories. The great thing about timelines – and the reason for their surge in popularity – is that they’re able to display complex information, simply. But, this requires a lot of work to get right.

Consider a timeline that needs to schedule hundreds of employees with different roles, needs, and work statuses. The timeline needs to be helpful, functional, informative and easy to use for multiple purposes, across different domains and departments. And it needs to serve a business purpose – eg reduce wasted time, enable information sharing, increase customer loyalty etc.

That’s a big ask. Before you start designing, you need to talk to users to establish the multitude of requirements and pinpoint problem areas. Then interpret this research in a way that can be universally understood. Your goal is to create something that people will want to use, that makes their life easier, and enables success.

With this is mind, here are ten points that will help you design better real time applications.

Ten steps to timeline success

1. Understand the interconnectivity of timeline and pixels
A timeline user interface (UI) is going to include a lot of elements and may span 24 hours or more. It’s impossible to show this level of information in any detail that is useful to the user, even if you added in zoom functionality. Zooming comes with its own problems as it can be disorientating to move between zoom states, i.e. be zoomed in on one page, then move to another that’s zoomed out.

• We usually work on a five-hour timeframe. This lets us narrow our frame of focus and build UI elements that are easy to read.

• We also use the frame of one pixel per minute. This is helpful when it comes to handing designs over to developers as it reduces any complicated maths in the coding. From here, we are able to plan what space could be used for our timeline and what could be used for a side panel list.

2. Design for the worse case scenario
Spend some time highlighting the worse case scenarios so you can plan solutions in advance. Talk to users, ask questions and dig deeper as they may not always think small details are important. But in reference to a timeline, considerations such as designing for the smallest timeframe may impact typography and layout. Other things to consider are what if times clash, how will this look?

3. Do the “one line challenge”
Set yourself a challenge of reducing key information to one line. Short, succinct details are much easier to read and process, and therefore more useful. Try enforcing a limited word count through the design – for example, in the past we’ve used a 40x60px box to display information. Be creative in how to save space. Use initials rather than full names and, for things like employee codes, cash cards, or car registrations, limit digits to the last three or four. If you need to include more information, add ellipses (…) to show that clicking onto the next layer will display further details.

4. Keep things clean
Clean, clear designs are crucial for timelines. If they are too busy, users can become overwhelmed and be distracted from key information. A white background is an obvious choice. Colours can then be used to highlight features and guide the eye.

5. Make it easy to scan
Visual legibility is crucial. Timelines usually display vast quantities of information, which need to be presented in an easy-to-understand format. This means structuring content intuitively and drip-feeding information in a way that can be quickly interpreted. For example, columns can be used to align text and enable users to jump from one piece of information to the next. When reducing information, it’s important to have clear signposts guiding people to click to view full details.

6. Define a visual hierarchy
Consistency is key. Your design needs to guide people’s eyes to important information. But at the same time, it needs to follow a pattern and colour code that can be easily deciphered. Choose a neutral colour to display everyday and continuous content, and stick to this throughout the design. Use bright colours to draw attention and highlight key content. Keep smaller elements such as dates and time the same size and font on every page. Use opacities to bring forward and set back information.

7. Establish a colour palette
There are no set rules for which colours you use – that’s up to you and what works for your business (though they need to be accessible – see point 9). But you need to stick to whatever palette you choose across every page and element. In one project, we used a restricted traffic light colour palette to apply meaning to different layers of information. The benefit of this is that there is an innate understanding of the semiotics of these colours, making the design more intuitive.

8. Use symbols
Symbols are a great way to represent further levels of information. They can even sit within your colour code and form groups, simplifying data and making information easier to interpret. Symbols can be visual, for example, a van for journeys, or simply the first letter of what you need to represent i.e. ‘L’ for Loading.

9. Help the user with a key
It’s not normally possible to rely solely on universal symbols and icons. Each timeline, and the information it displays, is unique. So, as a designer, you often need to create new, project-specific symbols and icons. To help users understand these, especially in the initial, learning stage, it’s best practice to include a key. As the learning stage is usually quite short it’s best to position your key away from the main interface. Users will soon understand what the symbols means and after a while are likely to ignore the key button completely.

10. Test for colour blindness
Globally, 1 in 12 men and 1 in 200 women have colour blindness, with reds and greens being commonly misinterpreted. To make your design accessible, it’s important that it doesn’t solely rely on colour coding. Try combining colours with symbols or texts so there’s more than one way to interpret information.

That’s our round up of how to design better timelines. Keeping these points in mind will help you design robust and resilient applications that are a joy to use and help people achieve more.

Talk timelines

Get in touch to discuss how we can help your business, service or product. Email us at info@newtidea.com

Recent articles