Tag Info

Hot answers tagged

60

I would progressively reveal details to a user as they need them. Consider what would your smart defaults would be? Are there assumptions that you can make that would get most users most of the way there? A couple you could consider: Sunday and Saturday are typically off days for US workers. Is this true for you? If so, then let's go ahead and default them ...


48

I would suggest a miniature progress wheel at the end of the input that only displays once a search is going on. I've seen this behavior before (I believe on user name boxes) and I believe that progress wheels are so clear that everyone will understand that something is going on. Once a user types, hide it briefly (or grey out to reduce flicker) and then ...


42

Don't do that, there are different approaches to filling out values, and for some it would be disruptive. For example if the user just wants to change the last digit... A good, non-disruptive alternative would be a small "clear input" button.


36

I would try to use the Google Calendar approach. You spread out the days with an acceptable level of detail/resolution and then the users just drag to mark the time ranges. If a higher level of detail is required, they can fine-tune each time. It took me about 5 seconds to enter these 6 time ranges.


35

You could have the input value selected when the user clicks on the input. This way the user can just press backspace or start typing to change the value or copy the value instantly.


24

In theory the correct answer is no upper limit for name lengths. Allow the user to enter whatever their name is using whatever characters are available to them so that you will never run into a circumstance where someone is prevented from entering their valid real name. In practice that is not possible to implement. There have to be limitations. These ...


14

The term used for these format-constrained inputs is masked inputs or mask input. Here is a demo which includes a broad range of masks (date, time, phone number, etc). If you Google 'masked input' you will find plenty more examples. http://igorescobar.github.io/jQuery-Mask-Plugin/ And a screenshot for posterity in case the link dies in the future. It ...


12

Simple 2D visual arrangements The visual arrangement of any set of related or similar items will always be subject to some inspection order since deliberate inspection of visuals involve a scan path (subconscious visual processing, particularly of the peripheral view, happens in parallel; but high-level items of interest are scanned using a serial movement ...


11

If I understood you right, then you are practically working on an autocomplete field. The standard for those is to offer search results like with a dropdown on the bottom. Therefore the easiest thing would be to add searching... as first item in the drop down whenever a search is performed. Maybe animate the … / three dots . .. ... (reset) ...


10

Don't over-engineer. Both options you described are very well known and accepted. I don't think that first or second is important in this particular context and both elements are perceived equally already. A new pattern on the other hand would have to be learned and therefore make it harder to use your site.


8

I'd say yes, absolutely. When presented with a larger box, the visual implication is that the text ought to be longer and well thought-out. Take this site we're on now as an example. We're meant to type out researched, thoughtful replies that may very well be several paragraphs long. The initial box is sized to fit several paragraphs to encourage this. ...


8

If you are showing all fields at once, grouping them in a way to show relationships is important. Don't forget to disable items that are not relevant given the current selection, and be sure that your input fields have units (i.e., "years"). download bmml source – Wireframes created with Balsamiq Mockups You can compact the form a bit, if it is ...


7

I would agree repeating the blue button isn't ideal, and not just for the reason it feels cluttered and overwhelming. Also it feels laborious because you have click each button in order to submit it. Basecamp provides a really nice option here for you. Here they give a few lines to input a few email addresses and once you put in 3 email addresses, the form ...


7

The goal of indicators like this is to inform the user when something is different. So, let the form tell you how you should approach it. In general if most of your form is required, state that up front and then flag Optional fields accordingly. Inversely, if most of your form is optional but a few are required, flag the required fields. This short post ...


7

Every example you gave would work. One might work better within your design than the other. Your users won't really care about the way the search input pops up. The best search fields are bug free are easy in use give relevant results help users find what they are looking for (auto fill or alternatives) So I would focus more on functionality and less on ...


7

In the West we start writing and reading from the left and move to the right. As such, if the input would exceed the visible space of the input box, it makes logical sense to start from the left. If your centred search only allows for X characters, which would not take it past the bounds of the input box then the centred text-box could work. If you were ...


7

The most effective placeholder text I've seen is on the Polar sign up form. The placeholder text is an explanation of why the field is there or what the requirements for the field are. I can think of a couple reasons for this: Most people already know what a "First Name" is without you giving them an example. We don't expect to see full sentences in ...


7

How you choose to mark fields as required input is not a part of material design. You've already noticed that some applications choose to use the validation error "This field is required" after the fact while others choose to do it another way. Regardless of how you choose to indicate required fields be sure to give some sort of immediate feedback to the ...


6

Input masks are often done poorly as you describe, but done right they can be very helpful by reducing typing and showing expected formats. Doing them right is key. Maybe I have an input for social security number, which is always in the form [nnn-nn-nnnn] so I may display the field with the dashes already present in the mask [ - - ] but if I do so I ...


6

Ceefin's answer makes a very good point. By focusing too much on the details you can overlook what actually matters about UX, which is what the user experiences. And there's no more frustrating experience than a form that asks a simple question, then doesn't let you answer it. This kind of over-validation is horribly common with postal addresses-- I've ...


6

You mention that other fields are validated but not the region field, that your primary motivation is for mailing addresses. If this helps you at all, only one of those countries you mention in your list of examples (USA) uses the region name in the mailing address. I took an entirely unscientific examination of a random set of industrialised or ...


6

I think you could take a more subtle approach by displaying a countdown progress-bar as in the mockup below: The benefit of using this pattern is that it conveys information about how long the action will take to complete while also conveying information about how each task compares to others (if needed) and it is also easily viewed at a glance. The ...


5

What I've come up with is using this slider, I've set the default values to 8:00 and 17:00, i think this is much easier to use than having to type in dates manually. Also I might overriding the start/finish default times with the average from previously filled in forms once we have some data to use, but that's just an idea at the moment.


5

Pre-filling input elements with valid default values is a great idea. However, deleting those values when you click on the element is an extremely poor UX choice. You are making the assumption that the only reason someone 'clicks' on an input element is to change the value. That's not so. Entering a field via the keyboard triggers the same events as using ...


5

Given the diversity of names, I wouldn't... set a floor or ceiling limit on name length, OR even break the name into two separate fields. Depending on the country / cultural background of a person, they may have a more Westernized [first-name] [surname] name, but they may not. Why possibly bar users from entering their complete name because of arbitrary ...


5

As The technologies are changing and evolving we can experiment so many designs to perform the same task rather than use a red star in front of the required field , Its a good practice according to the ux point of view not to make the optional and required field messed up , make them separate and let the user fill the necessary information . Most probably ...


5

How about this: Type the first letter of your gender [___]


5

Material design is silent on required fields. However, the Material Design documentation shows this interaction example for a required field: Additional suggestions: I am not a fan of the asterisk because it doesn't communicate 'required' clearly and can cause anxiety or frustration with users, especially if no tooltip or legend is provided. Material ...


4

I think this could end up being a matter of opinion. I do not select everything. I think that selecting everything gives more chances to delete things that the user may not want to delete and sometimes Ctrl+Z may not work or may not work as expected, so things may be lost forever. If the user wants to delete or replace everything, even when it may take a ...


4

Method B is far most efficient You should always display the "edit" function the nearer as possible of the concerned field. Especially in your case where you have only one field editable The delete function can be placed at the end of the row because it act on the complete row. Both of these must be displayed when you roll-over the row not only the ...



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