Tag Info

Hot answers tagged

49

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 ...


27

@Mayo has, I think, the answer with the clearest affordance. But, if the discount field is going to be used frequently, an approach that has been proven to work with many professional and productivity application is the polymorphic input box. Applications like Microsoft Word, PowerPoint, Photoshop, AutoCAD, Illustrator, and others use these boxes ...


18

You could use a toggle switch ABSOLUTE | PERCENTAGE and have the user select which one he wants to use. For example: (don't mind the $ sign I did it quickly) and let the user select between the two options. This format works very well in use cases that I deal with. Buyers and bidders have to make numerous (100+) decisions in a day. It's easy to select ...


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

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) ...


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 ...


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

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 ...


7

Twitter FTW I've always thought Twitter has the best solution to this. It allows you to hammer out whatever you like, then edit it down to something that fits. It's extremely clear to the user.


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 ...


6

Allow direct editing of the columns headings. Allow direct editing as much as possible. Make the initial table creation as quick and easy as possible but understand this initial creation will likely be modified many times. So to create a table requires 2 numbers, number of rows and number of columns. Then show the table and let the user work on a "live" ...


6

I recommend Gustav's option #2. You can give both, allow both to be editable, and have the counterpart update to reflect the change, either as they type, or upon the input field losing focus. This would also take care of the need to round. I could type 20% for the discount, and then tab to the absolute input field and round to the nearest dollar. In cases ...


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 ...


5

The answers so far all focus on ease of understanding. This is important, but if the tool will be frequently used, ease of use is also something to consider. If the typical user is likely to use this feature many times, I would let the option be set by typing % or a currency symbol directly in the field along with the value. This will allow an expert to ...


4

It sounds like you're starting with an assumption. Before going any further and risking over-engineering, I would take a moment to challenge that assumption. I would take a step back and understand your business requirements. Is there a security concern with letting your user change his name, letting him impersonate different people constantly? Is the ...


4

Permit users to enter IBAN in a variety of formats and syntaxes, and make the application interpret it intelligently. Users probably won’t (and shouldn’t have to) know what format your system is expecting. http://quince.infragistics.com/Patterns/Forgiving%20Format.aspx


4

It depends. If they are all off by a bit, then yea, from a pure visual consistency point of view, they probably should be tweaked to all be the same length. But if they are containing entirely different values, then it may not make sense. For instance, perhaps once drop down is state abbreviations, and the other is a list of ingredients found on a ...


4

They are not cool! In western countries most of people read from left to right, aligning them to the left will increase the speed of people reading them thus completing their goal. There are a lot of good articles on uxmovement about this, also Luke's Werbowski book Web Form Design expalins everything you need to know about web forms...


4

Don't implement bad UX just because it's legacy. Updating several fields on different items and then save all elements in once is a really bad idea. How do you provide feedback to the user that item 1 (fields 1,6,7,8 where saved), item 2 (fields 2,4,5,6) were saved and item 3 (fields 2,3,7 where saved but field 9 has an illegal character) in an all-in-once ...


4

I had fun making this one but I would never be caught dead actually using it... In order to not show preference obscurity comes in to play: 1. No preference here only information 2. Since there is only one thing to interact with go ahead and click on it One might argue that Both is preferred here but that's okay and should help diversify your data set. ...



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