I'm redesigning an interface to control an exercise game. The interface is going to be something like this (and exists on a PC, not mobile). Right now, we've gathered that our users want to be able to control these options, but I'm afraid our interface is too complex/cluttered.


download bmml source – Wireframes created with Balsamiq Mockups

The facilitator has the option to enable forced breaks (ie. the game stops for a period of time) based on some criteria. We decided on the numeric steppers so that we can have fixed increments.

My question is this, what is a good way to allow the user to set all these rules? This snippet is only a piece of a larger interface and I'm worried that overall it puts too much load on the user.

  • Have you looked into how your users vocalize these items - for example: "I want to workout for 150 repetitions with 2 minute breaks every 10 repetitions, with no bonuses". This can help you construct a flow that might be more straight forward. Also, can each section have different units (repetitions, attempt, minutes) set? Commented Apr 14, 2014 at 20:46
  • Each section can have different units, depending on the user's preferences. This falls into the category of our users want the ability to make all of these decisions without knowing exactly how they want to do that
    – Perchik
    Commented Apr 14, 2014 at 21:04

3 Answers 3


I think that there are two directions that you may follow to make this setting less cluttered:

  1. It seems like it's a good idea to treat settings like a meaningful phrases, but using desktop controls makes it unreadable. You may try to replace them by links (every user nowadays is familiar with links so it will not confuse). Doing this you will make your settings page much more clear and readable (avoid headers too — they are simply duplicates the text in the sentence).


  2. You may try to use a predefined set (based on some statistics) of values for every option instead of flexible values, I mean something like this:


    It will not only reduce the number of actions users should do but also will give them a meaningful set of predefined options (which are carefully selected with testing, etc).

  • I like the links idea, as our users tend to balk at any kind of predefined choices. In our previous iteration, we had most of this restricted to just a few options and our users expressed strongly that they felt like the tool had potential to replace them if they couldn't make decisions at this level of granularity. The headers were included solely to provide a way to enable breaks clearly. Is there anything that says you shouldn't only have one checkbox on the page?
    – Perchik
    Commented Apr 14, 2014 at 21:22
  • @Perchik Concerning the only checkbox: I wasn't sure there are another settings in your app but, yes, the only checkbox looks not so good so you may try something like this: glui.me/?i=k6jtw6cmj846n9h/2014-04-15_at_10.44_2x.png Commented Apr 15, 2014 at 6:44
  • Oh that's a good idea too. Depending on how the rest of the interface is designed, I'll either use this method, or checkboxes if we have other ones in the page.
    – Perchik
    Commented Apr 15, 2014 at 13:15

I like Alexey's idea, because the number and thing measured form a pair. So instead of showing controls for "50" and "repetitions" separately, the user instead edits "50 repetitions". My only concern is that links have a particular meaning and their use here is not standard. For example, I've been in situations where I had to wonder what the link would do, would it take me elsewhere and make me lose my form data or would it do a pop-up?

In your case, are there other areas/screens whether the link style behaves like a link? The style should beehave consistently, so user can learn how it works easily.

Also, another option is to put an edit action on the whole row, for example a row that many people will leave on default.

  • Good point about the links. In this case, there are no other links in the application, so I think we can get buy with it
    – Perchik
    Commented Apr 15, 2014 at 13:13

enter image description here

Hi! So you have the slider which will increase/decrease only at fixed values. Now, suppose I want to set my duration for Break as 2 minutes.

  1. I set the slider at 2 and I click on the button "Duration for the Break is". As I know that the label for this action is always going to be in "minutes", it can act as a fixed label for me. I wouldn't need to select any of the radio buttons.

  2. I want to set the break after every 10 repetitions.What I do is increase the slider to 10, and then select "Repetition" as a radio button and click on "After Every".

Similarly, I select the value that I want for each of the "Action" and just hit the button for which I need to enter that value.

Constructive feedback is most welcome.


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.