Hot answers tagged

36

I've taken the time to draw some wireframed examples that might help you decide on how to design your time-picker control. Below you can see 3 screenshots which show (IMAGE 1) a time-picker control for all units, an increment button, decrement button, numeric input field and unit picker dropdown (if needed.) IMAGE 2: The idea is that you set it up so that ...


16

Another option is a logarithmic slider, like this: download bmml source – Wireframes created with Balsamiq Mockups This is appropriate when the value can span multiple orders of magnitude, but the number of significant figures is low. It will not allow the user to select between, say, 500 ms and 501 ms, so I suspect it might not be what you need. It ...


12

If you are asking for data that usually follows a particular format, then ask for it in that format. Visually people are used to months shown in a calendar, so show it in a calendar, and let them select the months that they want. Visually it is very easy for someone to see whether they have the months that they want like that. Here is a quick example of ...


12

As long as it truly is within a single year, a range slider seems appropriate here. via Kevin Anderson on Dribbble EDIT: The date range picker on the google finance site solves the problem with my previous answer. This example doesn't "snap" to month increments, but a different implementation certainly could.


11

If a range of months could span across the year end, perhaps a circular dial makes more sense. Since you have limited vertical space it would have to be a dropdown though. Something like this perhaps:


9

There are four things to think about here: the meaning of the scale, direction of the scale, end points of the scale, resolution of the scale. Now, it is really exciting how one affects the other: The meaning of the scale There is one common challenge when applying a quantitative measure to a qualitative characteristic of a thing: it is impossible to be ...


8

Do think about whether showing the range is a useful addition. I've never seen a range of ratings displayed like that, so make sure your specific case justifies it. (edit: it turns out displaying ranges was indeed not a good solution to the original problem, so A.K.'s answer makes more sense in that context, but the answer below still applies if that's what ...


7

For controls used rarely, explicit is better than implicit If this widget were being used 100x a day, the answer might be an expert interface where the user can enter values like 10h8m, 1d23h5m etc. But, this is not your use case. You have stated that this widget will be used very rarely. In this case, it's much more important to make the interface ...


6

If you stick to graphic control to set the range, displaying numbers inside the segments will help you. They are convey the idea of the set, rather than single value. Of cousre, test this UI. UPDATE after question was edited According to your edit, I doubt using the range is the best mean. Range is mostly understood as the elements within ...


6

Using many input controls with different measurments is rather not optimal, because user will spend time to decide, which one fits to him. You may trim and move x100ns outside edit: download bmml source – Wireframes created with Balsamiq Mockups If odd value is entered, after leaving focus it is corrected to odd (lesser or bigger). Also in similar ...


6

I think if you are selecting a single range within a single year you can keep it super simple (and easy to use) with a pair of select boxes. Advantages: Minimal Vertical Space Easy to select the month (the user can just tab and type the first letter of the month) Minimal development cost Easy to add helpers (e.g. hints that show number of months selected) ...


6

The reason why the two calendar approach has been adopted so widely and is so convenient to use is because it is in sync with the users' thinking process i.e. when people go for booking a ticket, they know the dates for departure and return of their travel but are not often consciously aware of the duration of their stay. Making them state the duration (and ...


5

I think you've pretty much sold the duration idea, but I'm not sure how it would be quicker on touch devices? Also, I'm not sure why there's a combobox for duration. It's an extra click and I'm not sure what's inside. Perhaps you may wish to borrow some ideas from this design: Notes: I'm sure you can do a better job on the colours. On the calendar, you ...


5

While I have no idea how to implement it, I saw the following on kayak.com recently and it might work for your purposes. There are sliders for Min and Max. IN this case, as you are sliding it displays a graph showing the price of flights for that selection. I've seen similar on ebay motors and other places. I prefer this UI over having separate controls for ...


4

Main problem with the sliders is that ordering is important: you cannot easily move €30 from Channel 2 to Channel 5. I see the following operations as relevant: increasing one channel's budget by decreasing the budget of one other channel increasing (decreasing) one channel's budget by proportionally taking (adding) bits from (to) other channels In ...


4

This original solution is attractive, but I agree with your assessment that it is not scalable. I would also argue that it is somewhat counter-intuitive because of its horizontal but proportional nature. For starters, I would change this interaction pattern to a set of linked fader controls. Something like what's found here for adjusting Bass & Treble: ...


4

I think its a hard question to form one answer to. Pure theoretically, I'd suggest not to rely on the user to know these abbreviatons like h,d,s,... or at least try to lower some cognitive load by explaining the use cleary (as Don Norman likes to call it, put the knowledge in the world instead of in the head). From the moment you introduce a syntax (like +/...


4

If it was me I would design the interface so that the most common (or useful) choices can be selected with the simple click (or tap) of a button/icon and the less common choices would be accessible from a "More" button (or something similar). See a quick mock-up below of what I mean: Selecting the "More" option would bring up a sub-menu with some more ...


3

Consider separating out the number entry from the units


3

I don't know how easy this would be to do in Javascript, nor whether it would be appropriate for your particular application. In an app I've worked on, our design team solved this by having a slider and a specialized text field. The slider covers the typical range of the parameter, but the text field allows a much larger range, and you can click and drag ...


3

Instead of ranges I would use checkboxes (or something similar which looks like less an element of a form) to display the availability of the different qualities of products: download bmml source – Wireframes created with Balsamiq Mockups This idea is close to the one at the end of the answer from Alexey Kolchenko.


3

If the expected audience is math savvy, this is how you could represent an interval: | Average Usage | Average Score | | ------------- | ------------- | | (0 - 1] days | 23.1 | | (1 - 2] days | 120 | | (2 - 3] days | 312 | | > 3 days | 521 | Parenthesis denote exclusiveness, brackets inclusiveness. https:/...


3

This kind of choice should be as simple and intuitive as possible; And i would prefer selected a pre configured option, rather than selection a "start hour" and a "end hour". The pizza hut solution of @NPN seems to go in the right direction Even if specific hour range should be available as an option. User will appreciate that you have simplified its ...


3

to define a range/scope - You can: Use slider Use 2 inputs [begin - end] For values: Min 4 people Min 300 € It's good practise to define in logic of those solution or add additional radio buttons.


2

What about a type of slider control, but with a start handle and end handle? This control will clearly illustrate that they can only select a range of concurrent dates (and not randomly select dates, as either of the options you've shown above implies).


2

Typing is the fastest way to enter the information. There is nothing wrong with letting the user type in the values, provided you have appropriate validation on the field. (If the value being entered was something approximate, I might have suggested a slider, but that would be too fiddly for selecting precise values such as frequencies.)


2

See this picture, a great example how Humble Bundle solves your problem: You see the three main sliders: Developers, Charity and Humble Tip. You can see, how they find a solution for the "Charity" slider, which is divided into two others sliders which can be changed without moving the other sliders - subsliders.


2

Really interesting problem. Hopefully this solution is self-explanatory. download bmml source – Wireframes created with Balsamiq Mockups EDIT It wasn't self-explanatory. The range at any given time is one of: 0us -> 1us 1us -> 10us 10us -> 100us 100us -> 1ms 1ms -> 10ms 10ms -> 100ms 100ms -> 1s Clicking on "shorter" or "longer" alters that scale,...


2

Circling back after 18 months (!!!), we finally have a design we're going to implement, so sharing it back here to close the loop. @Monomeeth had a great answer. We didn't have the real estate for the graphical calendar icons, but I really liked his idea of a flat list of pre-set options and a "Custom" where harder UI could be hidden. I also liked the ...


Only top voted, non community-wiki answers of a minimum length are eligible