Tag Info

Hot answers tagged

31

Well, I guess there is a maximum number of miles someone can travel in a year, since there are a finite number of seconds in year, and one cannot exceed the speed of light. A more practical limit may be 1000 miles every three days, which would be about 100,000 miles in a year. I suggest using a normal slider but with a logarithmic scale. i.e. equal spaced ...


28

I've always been enamored at the way the iOS quicktime application works when viewing MP3s in Safari, and I think this method can be adapted for your use. We can stay with a normal slider bar - perhaps the handle could be changed from the normal circle to show a difference. We can add tick marks to the bar and numbers that change on either end. Then, ...


20

One interesting solution that hasn't been proposed yet is a sort of "odometer" that the users could set to the desired number. This would have the benefits of preventing users from having to scroll through smaller numbers to get to larger ones, allowing users to be as precise as they wish, and being as simple as plain text entry without messing with a ...


19

When a person dials an actual phone number with their phone, do they type 1-555-555-555 or do they type 5555555555? The only reason for forcing a fixed format is because your back-end can't determine the format it needs. Which is an implementation problem and you're forcing the lack of technical nous onto the end user. That's like saying "we aren't capable ...


7

Reading @Henrik Ekblom's comment about circular controls reminded me of how the Timer app works on Android phones (image below is from the Timely app). You can add as many minutes/hours to the timer as needed by continuing to drag the cursor in a circle around the clock. Obviously the circular format works a lot better for clock-like functions, and it could ...


6

I suggest you replace the slider with a dial by removing the thumb indicator and adding arrowheads on either side so it looks something like this: I use a program at work that uses a similar dial to control frequency during an online simulation, and I've never seen anyone get confused with it. Here's the interface:


6

A single input field is always easiest for the user — whether it's for a phone number, first and last name, social security number, or any other value that you may think of as being divided into "parts". Luke Wroblewski has written many articles about this with plenty of data to back it up. Design your page for the user, not the database. If you ...


6

Ultimately, it's a trade-off: Method A has the advantage of being concise, but Method B has the advantage of being consistent. (I'm the UX guy at SmartyStreets where we deal with addresses a lot.) I like Method B better, and here's why: The address is displayed in a familiar format that the user can quickly scan for correctness. The user does not have to ...


5

The state you describe appears to happen when a user is away from keyboard or no longer actually doing something. What would be appropriate is to put a gray overlay over the screen/survey with a messagebox in the center, modal dialog. This will show a kind of disabled state and allows you to put a timer and explanation in it. Something like "It appears ...


4

It seems like your users need something that first selects a less detailed milage area, with big steps. When that area is selected it's time to fine tune. One way of doing that could be something like my image below shows. As soon as the user clicks and drags in the span control (A), the red marker follows and a more fine tuned area (B) shows up. The user ...


4

If you don't have a default, you probably shouldn't use radio buttons, or Bootstrap radio button groups. In fact, it's your choice of controller here that's creating the problem. One possible solution is simply to present the options as being visually distinct and use appropriate labeling to indicate that an answer is required and the options are mutually ...


4

Instead of presenting the user with 7 radio buttons, I would suggest using a dropdown. A reference for mobile would be the Apple HIG - "Consider using a pop-up menu if you need to display more than five items."


3

EDIT Whatever number the user enters into the text box, that is the middle value of the slider. They can tweak that number by sliding left (for less miles) or right (more miles). How much distance to place between the middle number and the upper and lower ranges is up to you. In your case, there is a maximum number. 1 Year is 365 Days or 8,760 Hours ...


3

I like your general idea, but it seems that your users are not getting the metaphor. Which leaves you with two options: Make it very skueoumorphic, hoping that they will get the hint. Instead of using a slider, use something which looks like a physical lever that can be pushed more or less to the left (or right), and beside it a spinning number display ...


3

I might be missing something (you might have been referring to this when you said "standard +/- values"), but this seems like the perfect use case for a spinner: The design of the spinner is such that "the appearance of the spinner at a given time does not represent the quantity of the associated value" (Wikipedia). Thus, you wouldn't run into the problem ...


3

This PDF has some good tips for form design. This article mentions some opinions about this specific question. Previous question and another previous question. I also dislike pagination on a long news article, but that's because I'm trying to consume the content & it slows me down. When you want people to produce the content for a form you want to ...


3

The fact that Option B forces the user to review the address is a feature, not a bug. Getting the address wrong is usually quite costly to both the user and the website owner--something is going to get shipped the wrong place, mail will not get received, or at least a credit card will be denied. Hence it is important that the user checks that the address ...


2

For starters I would recommend against using inline labels in form fields as they pose a number of problems to users Users need to remember what the inline label in each form field was when they start entering content as the label disappears. I know you did mention you have on hover interaction but on hover doesn't work on mobile and you are imposing an ...


2

As JonW rightly pointed out, trying to define the fold is going to be a challenge with the surfeit of devices out there and you would be stuck trying to fit in as much content in a relatively small space (irrespective of the fold dimensions you choose). You could make a strong case that your form page design is like a single page design which basically ...


2

I get a lot of "above the fold" with a fairly arbitrary minimum height in my workplace as well (ours is based on the screen height of company-distributed laptops). What we've gotten away with arguing is, as long as the key element (form in this case) appears partially on the page, it will be obvious to the user that they need to scroll to see the full ...


2

While (as @inkmarble mentioned) clicking may be more effort compared to a mouse-over we now also have to keep in mind the growing amount of users on touch-only devices. With the current state of the art, there simply is no way to mouse-over an icon on a touch device, thus making this help information inaccessible to this user group. Example: I recently got ...


2

Put a logarithmic scale on the slider. Larger values rarely need to be precise, so you can put a quite large upper limit on it. Take the largest conceivable value for this input, add 50%. In response to the system wanting volume rather than substance, I will restate what I said in the above paragraph. The question wants a scrubber/slider-style control, ...


2

The exact answer depends on your users (who are they and what services are the likely to be signed up for?) and your use case (you wouldn't want Facebook login on a business site, for example). If you want to research this, it is easy to find demographic information for social media sites. For example, take a look at this PewResearch report. Ultimately, ...


2

I would recommend an "accordion" style form. Namely: Select a provider: [ Provider drop down v ] Or [ Add a new provider ]. When the user clicks the button (or the hyperlink, whatever you prefer), the form slides apart to reveal the new provider form. That information is submitted at the same time the main form is submitted, and you can handle the sequence ...


2

The problem here is the design itself Besides the problem you have encountered, this design is just plain confusing, and it requires a lot of effort to look at and figure out what the actual and target levels are, since they aren't always in the same place. Instead of displaying all five levels, only display two boxes, in two columns: the target value and ...


2

Maybe you should separate the target and the actual pointers to make it more clear? Sometimes (I for one) spend far too much time trying to do things too minimalistically - as in this case; get two values to show up on the same area instead of just separating them...


2

Force a more conscious choice on between system defaults and custom values. On form 2, I would have a checkbox that says "use defaults" or "use system calculated values", selected by default, and make the values grayed out and uneditable when this is selected. If this option is selected, a user will would expect the defaults to change to whatever is ...


2

Go with Example 1. One field for the phone number. Do some quick client side regex on the number the user entered, to account for any egregious errors to save an unecessary call to your server for 800 digit entries or garbled text. Ultimately, you are validating the web form data on the server and sanitizing it before dropping it into your database.


2

I would suggest you keep one input field, but use a mask for the text: -You can use Placeholder attribute from HTML5 (If you are working in a web App) for showing a example number.


2

My guiding principles for this are as follows, vis-à-vis users: Show them what you expect Take whatever they give you Show them what you’re taking The best way to accomplish all three with HTML5 and jQuery is to borrow this plugin. I’ve added type="tel" mainly to give mobile users a keypad instead of a keyboard, and placeholder="(999) 999-9999" as a ...



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