View time range selection on datagrid with limited space

Question

I have a datagrid that shows realtime data. How ever, Users should select to see if they want 'Last 5 minutes' data or 'Real time' Data. I did this using radio buttons, however it doesn't fit and is not working.

What can i make it to do this better or minimalistic ?

Answer 1

If you use a dropdown, you'll save space. Be aware that there are some tradeoffs.

Pro:

• saves space
• allows for additional choices (if extra ranges are added in the future)
• allows for longer label (since only one is shown at a time)

Con:

• only one choice shown at a time
• discoverability of the control

Because you can only see one choice, you could experiment by adding some graphic distinction to indicate interactivity. One way is to add a border. You can also experiment with color as well.

Answer 2

If choices fit into the space, use segmented controls:

If choices are more than the space allows, or more than 5, use drop down.

Segmented controls do not hide the filter options behind a click, all options are visible in the interface. However, as the number of options increase it starts becoming visually busy and hard to read, opt for the dropdown.