2

I'm making a customisable timer using tiles (work period + break period, repeatedly). I want to emphasise the fact that these tiles are sequential (i.e, left to right, up to down). There are a maximum of 8 tiles. I would consider using arrows but that becomes a problem for the arrow between the top-right and bottom-left.

Also, I have two other queries about this:

  1. Is it obvious that the green-colour text is a tile for a rest period?
  2. How can I make it clearer that the "New Tile" button is a button? It doesn't have a background and instead a dotted border (which is difficult to see because it's not that thick)

The tiles

Thank you!

Improve this question
1
  • Color alone should not be used as a user-interface feature. (A) A large number of people are color-impaired in their vision, perhaps even more than those who know it. (B) When staring at a panel of colors, human vision will begin to perceive wrong colors (a lesson learned early by astronauts in the space race).
    – Basil Bourque
    Commented Feb 28 at 17:27

1 Answer 1

Reset to default
2

A grid is inherently 2-dimensional. Communicating a preferred direction in a grid is difficult, communicating an explicit and repeating timeline even more so.

I'd avoid grids for this purpose altogether. If you have something with a beginning and an end, a literal timeline would be helpful.

Google calendar screenshot

If it's something which would loop back on itself, a time circle would be helpful.

time circle mockup

In both cases, the size of the item is proportional to the actual time taken, and adjusting them can be as easy as dragging the edges of the block.

For a time circle, the length of the loop is probably the only thing which doesn't have a satisfying modification method, and probably needs a "total length of routine" input somewhere.

Improve this answer
1
  • Thanks for this! When I say "repeatedly", I just mean that in a session, you repeatedly have work periods and break periods until you finish the session - the session itself is not repeated. An example session would be something like: 25m work -> 5m break -> 30m work -> 10m break -> 15m work. I would use the circle design but it seems like it'd be lengthy for a user to set up. Instead of using a grid, would it be better to use a row of tall tiles? Though, this would make the duration be iffy to work with. I ideally want to fit this into a rectangular space of the same dimensions as the grid.
    – myself
    Commented Feb 25 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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