0

Workout Log

I am building a fitness app and I am having a hard time placing certain components. What makes this app unique is that it can count reps for you and display the time it took to complete those reps.

However, in my current iteration of the workout log, the duration (the time it takes to complete the set of reps) is placed in the far right corner. This is more commonly reserved for time stamps (of when an event has occurred or since occurred).

What alternative approaches are available to either keep the duration component in the same place or alternative ways to display it?

Improve this question
2
  • My first thought would be to have the letters bigger taking up the whole right side as it is counting then when the exercise is complete have it snap up into the corner as a "completed" timestamp.
    – DasBeasto
    Jul 1, 2015 at 18:32
  • I will use something like "43 mins" and "1 hr 21 mins" to signify duration. However, I am not sure if this works in your locale. (Definitely, such a solution will require localization.)
    – Heng-Cheong Leong
    Jul 2, 2015 at 7:21

2 Answers 2

Reset to default
1

Your current design looks solid. I think the placement of the set duration works, but if you're incorporating a time stamp as well, you will need to differentiate them to avoid confusion.

Maybe something like so:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Disclaimer: I was limited in icon selection by the mockup software.

The idea behind this:

  • Stopwatch to indicate duration of set.
  • Check mark to indicate completion time stamp.

To be even more clear, you might consider this type of time format. It's used widely in many applications nowadays as a short-hand way to indicate duration:

mockup

download bmml source

Obviously I'd recommend better icon choices, but a visual distinction might help alleviate user confusion.

Improve this answer
3
  • Interesting, though I do not intend on displaying time stamps along with duration. However, the visual distinction of not only a well used icon (such as a timer, counter, stopwatch, etc.) which would be great, but the visual distinction between 5:00PM (using am/pm notation) and 05:00 (using mm:ss notation) offers more distinction than I had originally foreseen. Thanks.
    – occur
    Jul 1, 2015 at 20:38
  • Oops, my apologies. I must have interpreted the question wrong.
    – Alan
    Jul 1, 2015 at 21:06
  • @occur One aspect to keep in mind is internationalization, where some locales do not use the 12-hour clock, therefore they wouldn't have "am/pm notation".
    – rink.attendant.6
    Jul 3, 2015 at 2:02
0

If possible I'd avoid surfacing time stamps in the UI. It would be easier to understand if every time-looking text ("00:00") represented a duration. If this isn't possible I'd explicit label all time displays:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

and have them all fixed in place. The time outputs that aren't in use would be greyed out to indicate not-applicable.

Improve this answer
1
  • Great, this is my vein of thinking as well.
    – occur
    Jul 1, 2015 at 21:10

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.