I'm looking for a pattern for toggling between different periods of time. Currently I've prototyped an example which is a single button that, when tapped, will cycle through 3 time periods: by month, by quarter and by week. Cycling through the time periods adjusts a goal number that is set by the user (ie 100/month, 300/quarter, 25/week). I'm having trouble finding other examples of a pattern similar to what I've mocked up.

We've done a little but of user testing with this example, and they seem to be confused at first but immediately understand the functionality after tapping it. Is there something that I can do to add more affordance to this interaction, whether it's a different button/toggle style, an added icon, etc? Or is there a completely different, better pattern altogether? Screenshots or links to established patterns are greatly appreciated!

  • 3
    Can you provide a wireframe or screenshot of the interface you are describing? Commented Feb 25, 2013 at 20:30

5 Answers 5


I'm not sure if I understand the context of use correctly, but what you're describing sounds to me like how Google Calendar does reminders. enter image description here

I think Google gets it exactly right here. Note that the units drop down (minutes, hours, days, etc) appears at the end of an action so that the entire form, when filled out describes in English what the user wants to have happen. I can't tell from your description how this would map to your problem exactly, but the key to Google's successful example is the convenient natural language interpretation of the form. The user isn't thinking "what units do I want?" but rather completing a logical sentence.

Note that in this example Google uses a drop down, not a button as you describe. Buttons connote confirmation of an action. They are affirming a decision (e.g., OK, Cancel...). If your user clicks a button labeled "minutes", they will usually do so because they are confirming that minutes is in fact the unit they want. This is exact opposite of what your button means (i.e., I don't want minutes, give me some other unit), which will be very confusing to your users. Don't use a button to "cycle" through the units. Drop downs are much better here because the user is able to ultimately select (that is to confirm) the choice that he or she wants.


I've been working on a similar problem. Google Calendar has an excellent set of tools for shuttling back and forth in time, but I also like this tool from Fitbit (the activity tracking device) ......

Fitbit, day mode

Fitbit, week mode

Note how amounts change with the time period.

Always in favor of putting the options in plain sight. Why not have buttons for quarter, month and week instead of one button? The single-button, multi-press method reminds me of setting my old Casio watch -- not an ideal user experience.


I agree with Benjamin that the drop down is a good solution here. An alternative, if you want to show the options without user interaction, or if you can show the options with an icon, is to use a series of linked buttons. For example in the classic text-editor toolbar alignment buttons:

Toolbar text-alignment buttons in LibreOffice

You can only click one of these four, and the current selection will be deselected if another is clicked. This isn't communicated through the UI, but if the options are clearly mutually exclusive, the user will understand.

The buttons are probably more efficient (scan-and-click vs click-scan-click for the dropdown), but if you use labels instead of icons, you lose some of the punch, and end up using a lot of space.

A final consideration is how often users will change the default setting. If this is rare, then to hell with efficiency. If it's common, then maybe the screen real estate is worth it.


This is how Outlook does something similar.

I'm not sure what this part of the question

"... adjusts a goal number that is set by the user (ie 100/month, 300/quarter, 25/week). "

means or how it would affect the appropriateness of this UI for the situation.

enter image description here

The calendar images work like radio buttons. Each image shows the time period that will appear in the Outlook calendar.


Toggle buttons are generally most suited to representing objects with two states, so it was no surprise that the users were initially confused, since there is no way to work out how many different states or modes are hidden away. But the fact that users pick up the concept immediately means that at least it is easy to understand, probably because the rest of the user interface works well together. If there are constraints like screen space or other issues then maybe you don't need to change it.

But if you want to, there are some alternatives to consider here: firstly you can show all the states (if there are only a small limited number) and select them using radio, toggle or next/prev buttons; secondly, you can create a dropdown list as suggested. What would be important to take into account are the number of options that are currently available, and whether there will be more items to be introduced in the future (e.g by day or by fortnight).

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.