Since social media exploded into our lives, navigating timelines has become second nature. When a timeline has been done well, we use it without pausing for thought. We don’t need detailed explanations and guides; it’s completely intuitive to our needs. This is testament to the brilliant UX that has gone into creating the timeline. But not all timelines are the same – and there is no set rule on how they should be designed.

Facebook, Twitter and Instagram have spent a lot of resources getting their timelines right, and are constantly updating their designs to factor in new needs and desires. But as timelines go, these examples are fairly basic, focusing on singular entries rather than the continuity of events in time.

Some timelines need to summarise a great number of events and information over varying time periods, ranging from one hour to over a year. For example: digital calendars, personal planning apps, and business, delivery or shift planning programs. The entries in these timelines can belong to different categories, have different states and contain multiple details. They might also require users to take actions, filter or re-organise information in different views, or any other function relevant to the task.

So, what’s the best way to deal with complex timelines? Here are five suggestions based on our experiences.

How to design a complex timeline

1. Find your “pivot”
It might seem obvious, but you need to figure out your main data set – a conceptual pivot around which the corresponding events can be organised. What’s the unit of measurement of your timeline? What’s the set of data your users can use to orient themselves?

With an office planner you might need to list, see and edit your employees’ day schedules. In this example, employees could be your ‘pivot’, and their tasks move the corresponding information.

Example of employees used as “pivot”

2. Show only what’s necessary
Complex timelines usually show numerous events for each screen. Each event can include information like dates, times, places, people, descriptions etc. Displaying it all at once would be overwhelming, so you need to focus on the essential information. In most circumstances, this will be enough for users to understand and differentiate events. If you do need to show more, use progressive disclosure to enable users to easily access secondary information.

An example of a calendar showing essential information. Clicking on single events reveals more information

3. Choose your style
Timelines come in all shapes and representations. There’s no general rule for how they should look.

The style you choose depends on the data you need to show. Your design should provide users with the easiest way to navigate through the content.

For example, if your reference time span is one day and your timeline caters for up to 200 employees per day, it should be organised vertically. In general, vertical scrolling is easier and more familiar than horizontal scrolling.

Timelines come in a variety of shapes.

4. Differentiate content
Colours are an easy and powerful way to differentiate content, especially when using familiar colour-coding, like green for positive and red for negative. Colour coding can be helpful in distinguishing between different categories e.g. holidays, meetings, project work and/or different states e.g. started, scheduled, completed or cancelled.

However, colour alone is not enough, and not only for accessibility reasons. Using too many colours can become confusing and ambiguous. Always accompany colours with labels, icons, initials or whatever tools you have to make the content clear and easily scannable.

An example of using colours and labels to categorise events.

5. Use animations wisely
Animations can make interfaces look more appealing – but use them wisely, especially for services which are meant to be efficient rather than beautiful. Make sure animations help rather than obstruct your users’ interactions. Use them to highlight changes and important content or save users some work. Keep it simple, and let your users move around as they wish, without being restricted.

Conclusion

The general rule for designing complex timelines and services is less is more. This doesn’t mean hiding important information for the sake of beauty. But it does mean making life easier for people and lightening users’ cognitive load. Showing too much is not only overwhelming but it’s also unproductive. We’re not designed to consciously process too much information at once. While it might be tempting to display as much content as possible and let the user decide, this is not always the best call.

Talk timelines

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

Image references

Fig 1: Allocate 
Fig 2: Square up
Fig 3: The Evolution of Western Dance Music
Fig 4: Harvest Forecast app