Surveillance Playback — The evolution of timeline

Hi guys, I work in a surveillance solution company in Taiwan, and would like to share with you guys some designs in this field. Unlike web interface we interact with every day, surveillance products are used among fewer professions so the interface design is not often discussed, many of them are still hard to use and have room for improvement.

Surveillance product is used for safely. It is two-folded, to monitor live and act immediately in response, and to access footage in the past when looking for events that had already happened. The former is the live view function, and the latter is called the playback.

Let’s talk about the playback. Due to storage size, keeping a 24 hours recorded footage is not preferred to users, it is often set to record only events users assign to the camera, such as when motion happens in a particular area, when people faces are detected, or when the alarm goes on. These events can happen many times a day with different recorded length. In order to retrieve the desired footage, here are some of the interface design out there.

Event Listing

The event listing design is one of the origin design in the industry. For example, this is our company’s DVR software interface. User have to choose a camera (1), a date (2), and events that happened on that date will appear on the event list (3). Clicking on event will show the footage.

GeoVision DVR software interface

There are some inconvenience in this design. First, it can’t display several camera footage at a time period on the same time, forming an comprehensive view of the environment. Second, it is hard to switch between dates and camera, making browsing events difficult.

So why is it designed this way? Mostly it is because of the technology restriction due to storage hardware or camera device.

However, there are still some techniques to make the design better, such as adding filter and search functions for events. More important, use a “all in one page” design, put select camera, select date, and event list all in one page close to each other. Don’t use step by step approach, it will drive user insane going back and forth in those pages to search for an event.

Time Section
Time section improves the event list design. It uses split views so now it can display many camera footage at the same time in a certain time period. This is our company’s Linux NVR software for example.

The flow is now reduce to two steps, choose the date(1) then the time section(2), and all event footage will play simultaneous during that time section.

GeoVision SNVR software interface

Though better than the event list design, it is still confusing in some point. The time section will be filled when event/events occurred on any camera, which is hard to indicate which camera the event/events belongs to, how long the event is, and how many events occurred in that time period.

Timeline design aims to solve these issues. Below is GeoVision VMS 9.0 software. There are now two timelines, above is the selected camera timeline(1), and the below is the timeline of all cameras(2).

GeoVision VMS 9.0 software interface

This design now can let user realize which camera has events and how long the event is. Also, it is easy to browse for it allows users to drag the timeline across dates.

So where to go from here? What do you think?

Originally published at on November 18, 2014.