Timeline: What is Timeline in UI Design and How to Use it?

An old saying tells us that time is money - and it could not be closer to the truth! Since the beginning of time, societies used different methods of tracking time. Whether it was by following the way the sun moved the position of shadows throughout the day, or by building massive clocks in public squares, tracking the passage of time has been a necessity for society. 

But knowing what time it is is just a small fraction of our relationship with time. People need to plan and organize their schedules, and to have clear ideas about the important events in their lives. While agendas and notebooks are great methods of organizing and planning, they have migrated into the digital world with the help of UI UX designers. And this is how digital timelines came about, but what exactly are they?

The timeline is a UI design component that can be used to visually track future and past events in chronological order. Timelines can be used in various contexts and for multiple purposes, such as historical timelines, project management, and to easily visualize processes.

Many UI UX designs take timelines into consideration because they are useful for both the user interface and for enhancing the user experience. 

1. Default

The default timeline is straightforward as it shows a series of events that have happened or will happen. It makes planning and conceptualizing more accessible to users because they have a visual representation of events in a simplified form. It takes a horizontal distribution of steps that are labeled and follow a chronological sequence. This is the type of timeline in UI design most used in dashboards.

2. Without Description

These types of timelines take a more minimalistic approach, as the events are exclusively labeled with a heading that does not have an additional description to it. Timelines as such are suitable for steps or events that do not need a lot of context, such as wishing a friend happy birthday. For example, we could integrate a timeline of this type into the UI UX design of a website that is related to simple processes, such as delivering a product in the same country where it is produced.

3. Expandable

Often times users need to elaborate on entries in a list - this is where expandable timelines are used. They are an effective way of integrating more details into a timeline, and can enhance user experience 

4. Vertical

This type of timeline is very similar to the default one - the only difference between them is that this one displays the events on the axis vertically, as opposed to the first one which was horizontal.

5. Vertical and Expandable

These timelines are the same as the horizontal expandable ones, the only difference being that the events are shown on a vertical axis.

6. Alternating 

Timelines can also display their elements in an alternating sequence. This can be applied to websites and apps that have more peculiar aesthetics. 

As UI UX designers, we need to be familiar with the parameters and rules that should be respected during the design process of timelines for apps and websites.

• Color. Because timelines are UI elements, they need to support the overall visual identity of the website or app they are integrated into. The colors chosen for the elements should also match their description - for example, if an entry in the timeline is more urgent, red would be a suitable pick.
• Text. The words that are used to describe each point of the timeline should be descriptive and straightforward. It is generally advised to use as few words as possible for the headings so that the timeline does not become overly convoluted.
• Icons. The most commonly used shape for the icons that appear on the timeline is the circle because it is associated with dots on a list.
• Briefness. Timelines are meant to simplify lists and processes for users, so adding large and detailed bodies of text to each point would be redundant. 

• Important Events. The main role of a timeline is to showcase a list of events that are relevant to the user. Whether it is a birthday, a holiday, or the beginning of the university year, timelines come into hand. 
• Planning. Timelines are helpful for planning out tasks and activities in the future - which makes them suitable for subjects such as project management. Let’s say that we had an important role in a big corporation and we were presented with the task of organizing the following semester for the company. Features like timelines would be of utmost importance in this case, because they make the organizational aspect more manageable. 
• Simplifying a Process. We would generally implement a timeline for a list that exceeds three events. This is done in order to ensure a more accessible understanding of a process. There are many situations in which a process seems complicated to grasp - that is until we break it into sequences and events that follow a logical and chronological order. 

We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.

“You press the button, we do the rest.” – Kodak.

Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.

Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!