6

I need to show a series of controls for a timeline bar in touch-screen application. The User will select particular time-frames on a timeline by moving controls at the start and at the end of the time-frame.

There are 2 ways in which these controls will be used:

  • User selects fixed position - time-frame doesn't move.
  • User selects floating position - time-frame moves forward so the time interval from "now" remains fixed.

Currently, we have arrows pointing right to indicate a fixed time, and arrows pointing down to indicate "now" or a time relative to "now"

enter image description here enter image description here enter image description here

Is it easy to understand? Or is there a better way?

  • Could you please elaborate your question. – Kishan Jan 30 '18 at 19:04
1

Let's take an inventory of what information the user needs and what we want them to control.

What they need to know:

  1. What time is now
  2. What time range they an select and in which intervals
  3. How long of a timeframe is selected
  4. When does their selected timeframe begin and end

What they can control:

  1. How much time is selected
  2. When does the time frame end and when does it begin
  3. If one of these times has to be "now"

You really only need one control with one option. You're looking at a mutli-range input with the option to snap one selection to "now". Unless there's some reason not to, you can always show the same three bits of information about their selection (begin, end and duration).

"This is oversimplified. You'd likely include that 4:45pm is "now" and include ticks on the range input with times."

This is oversimplified. You'd likely include that 4:45pm is "now" and include ticks on the range input with times.

1

This was my solution that was accepted by the client

  • green point indicates when we start the measurement and user can't move left from this point.
  • Drop with red point, looking down indicates that position is fixed
  • Drop with blue arrow indicates that position is floating and moves to the right
  • red triangle indicates current time and user can't move right from this point.
  • Dark grey between two drops indicates selected time-frame. enter image description here

Also we used the same design for the next screen that shows discrete views.
It looks like this and includes player which is not part of this question.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.