Tag Info

New answers tagged

0

How about after the initial form is filled out, all the information is layed out in one place un-editable, and later each field can be edited individually from where it is displayed, or the entire form can be edited at once if need be, kind of like Linkedin's profile pages.


5

Anyone who does fast data entry regularly as part of there job (from sales reps to screen traders) will prefer to do everything via the keyboard. You are on the right track with the tab order, but there are a few more things you can do. Tabs are great for moving field, but you can also have a higher level navigation (shortcut keys***) to allow users to ...


1

In tasks where users need to go through a series of steps to complete a task, the key to improving the conversion or success rate is to reduce the complexity of the task, whether it is perceived or actual complexity. Putting two forms in front of the user asks them to make a decision before they even get to assess the difficulty of the task, and puts a lot ...


1

"It depends." Who are your users? Are they devs or normal people? If they're devs they can assess the security themselves. Admittedly that's unlikely though, so: Hope for the best, prepare for the worst In development and design, you often have to treat your users as if they're 2 and don't know what a mouse is. (Not to their face, though, clearly.) In ...


2

I worked as Creative and UX Director at a large eCommerce company for many years and I can tell you that: A) There is no clear figures on the effectiveness of the payment gateway. (After all, as a buyer, that doesn't alter the safety of the transaction, so what do I care?) B) There are studies (conveniently conducted by the SSL companies) that show a ...


0

It depends, frankly, whether you're more interested in the UX or pleasing your bosses. You could try having a good old chat with them if you really think two forms are bad, but you'll need something to persuade them with. If you want to make them happy: put both on one page but gray the 'continue without login' form out until the user clicks that option. ...


2

It's not explicitly two forms, since credentials are intuitive enough that users are able to recognize the username/password boxes with a low cognitive load. I actually agree with having login forms on the same page, because if you always click on continue without logging in, you are just adding an extra step for that user. But, just because they are on ...


2

The relevant WCAG 2.0 guideline is 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A) A possible technique to achieve this is G167: Using an adjacent button to label the purpose of a field: When a button invokes a function on an input field, has a clear text label, and is rendered adjacent ...


1

First, actually consider your security. Is your form safe from reasonable levels of attack? If there's a chance data could get out, stop and fix that first. Are you SSL certified? Are your POSTing your data? Are you taking all reasonable steps to ensure safety of the data? Anyway, onto the problem at hand. If you've got a design scheme, as a general rule ...


0

First, you should check your initial assumption that plain vertical layout of the form is good for your users: some of the fields are related to each other and some of them likely allow very short input and, thus, can be grouped on the same line. If you are confident, that all fields should be put on separate lines of the form, you are asking this question ...


3

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


-3

Yes, for aesthetic purposes, the text boxes and combo boxes should all be the same width. It is possible to style the combo box so that the field portion is a fixed width and the hidden dropdown portion is a variable width to match the content. See this stack overflow answer for an example.


1

Generally speaking, it is a bad thing to omit a label for the reasons you state. However, the search box is a slightly different edge case here. In general it is the first form on the page and screenreader users will often jump to the first button on the page (the 'search' button) and then shift+tab (or whatever shortcut key they use) to move over to the ...


5

There is an official aria-label attribute that seems to do what you're looking for. You would probably label the input field like this: <input name="q" aria-label="Search query"> I haven't been able to find out whether or not screen readers support it.


23

This post from Hubspot shows some interesting results for the number of form fields vs converstion: http://blog.hubspot.com/blog/tabid/6307/bid/6746/Which-Types-of-Form-Fields-Lower-Landing-Page-Conversions.aspx They then (partially) break this down by input type. It's interesting to note that conversion appears to go up with from 1 to 3 fields and ...


1

Here is a good piece on the required marked vs. optional marked fields: http://uxmovement.com/forms/why-users-fill-out-less-if-you-mark-required-fields/ Marking the few optional field takes the onus of the user so much, and aesthetically having numerous red stars next to your fields does not make for an easy to absorb form.


4

This depends on what kind of information you're trying to gather. In general, the correct number of required fields is the absolute minimum number of fields required to make a record usable. If you are collecting information about a new user in your system, you may need only an email/username and a password. Without a username or password, a user record ...


50

It is a general question that can be answered with a general answer: One more than is actually required by the business is too many. In other words, make sure all the required fields are essential to allow the user to progress. All too often, the required fields are only required in the sense that someone on the business side wanted the field, rather than ...


0

I'd say the best thing to do would be something like this: download bmml source – Wireframes created with Balsamiq Mockups You could also do a small arrow outside the text field, like it's done in the Windows 7 login screen. You probably would want to restyle the button... maybe making it blend into the textbox until you hover over it. The ...


0

My recommendation, and where I believe all data entry and interaction is headed is in the intelligent, dynamic presentation of fields based on context. Here is the simplest possible example... EXAMPLE A registration form, presents itself as quick and easy, with three fields (improving enagement) Then adds fields as the user completes the task. ...


0

Like many others have said, think about grouping. Also, principles of hierarchy come into play a lot with those groupings. Clear headings for information groups are key when you're asking for a lot of information on a form. I recently had a very data-heavy form that was part of a large, complex approval process that forces the completed form to move through ...


1

When your designing your form think of it as how am I going to get the user from A to B in the easiest and most pleasant way possible. I would consider breaking the form up into steps via javascript so the form does not look lengthy and daunting on the user. Try and keep them focused on the fields by moving any labels inline and the descriptions to the ...


-1

I'm not sure regarding the code your using but I think if you'll have a small guidelines tooltip that will state that says not to use special characters in the first and last name that will be a nice UX , though i dont know what the application your using .. and not sure how you will apply it there ..(this forum has a tooltip like that for the password type ...


5

Yes you should! Your suggestion about having a validation rule would be a very bad idea. Did you know, the world's most common last name is 王? Here is a classic article that you need to read: http://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/ All of these assumptions are wrong: (...) People’s names are written in ...


0

Wrapping checkbox inside LABEL tag is a good markup, since clicking 'label' will trigger the checkbox click even in IE8. Otherwise you will need to use JavaScript workaround to fix the same, which is additional code to your website.


0

Think Google. One search box with incremental filtering/autocomplete!. If you can even include personnel pictures along with the results, even better. It's quick and effective.


2

How many inputs should be presented on each page? And does this depend on categorisation of inputs? My thought is the grouping of the inputs is more important than the number. For example, the workflow for setting up an iOS device is divided into screens for language, Wi-Fi, location services, etc. The number of inputs for each grouping is less ...


0

The UX here depends on the type of input , user have to provide. Radio button [ 1 ] Check-box [ 1 ] Selection from a drop-down [ 1.5 ] Text inputs small ( 3 or less word in single field ) [ 2 ] Text inputs big ( 4 or more in single field ) [ 2.5 ] Now check your form pages, and try to use the elements in such a way that the sum stays less than 6-8 ...


2

U.S. Department of Health and Human Services has created and maintains a wonderful website: http://www.usability.gov. It contains a wealth of UX resources of various types, including the ones from a government organization perspective (see section "Guidance and Government-specific Resources" at http://www.usability.gov/how-to-and-tools/index.html). Hope it ...


1

How about just bolding the ones which are "YES" and others greyed out.


0

I'd just display the attributes which apply and hide the ones which do not. Makes the list easier to read and you don't have to worry about styling the thing extensively for readability. This does not apply if users really need to compare veterans against each other (are Joe and Dean both Vietnam veterans).


2

You could try to group related, relevant information together and leave out mutually exclusive items. As it is a read-only format there's not a lot of use in displaying the mutually exclusive NO answers (and possibly also some other NO answers). I'd suppose that if Veteran is answered with NO all other Veteran related answers are obsolete and of no good ...


1

Here's one alternative option (obviously the actual madlibs form design will be different in your case, but hopefully you can see how you might allow the user to optionally add or remove a "sentence" of form controls): download bmml source – Wireframes created with Balsamiq Mockups


2

How about an (red) "NO" icon or a (green) "Yes" icon to the left of each line? This way you save vertical space, but at least keep visual consistency (providing that you keep both icons the same width). Is there any other solution, like filtering the results to only show the positives or negatives, if that is what the user is after? This way you'll ...


1

The technical term for that is "Incremental Filtering". It's always hard (particularly in mobile) to show big sets of data, but IF the user is going to know who to send this to right away, for example, if the user is going to have the addressee already in mind, the expected behavior is for the user to start typing the friend's name, and this is optimum. I ...


0

I did some research while I was waiting for answers... http://uxfindings.blogspot.com/2014/06/is-numeric-spinner-best-name-for-this.html


1

I just designed multiple screens registration form in the iOS app. First we wanted to make it as single screen but then after little research I find out that it is much more comfortable for users when you split all informations in logical steps (2-3). It could be even more effective for the app developer. Let me explain. When user come to the registration ...


3

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


2

A clearly defined label stating what input is required by the user should prevent the problem of max length of the input field. There may well be people over the age of 99 using the internet now, so perhaps max length should be 3


1

I feel that the best solution would be to use a watermark (gray text in an input when it's empty) with the text 0-99. This clearly states that: Input has to be a number The range is from 0 to 99 There are even ready-made solutions for this, like jquery-watermark.


0

Make sure that the user can use any kind of input; mouse or keyboard (or touch for that matter). And through visual hints like: The width of the input field A representative-icon on the left side of the input field A placeholdertext/icon Possible (i)-icon on the right with hover-info Visually wrapping input boxes in a container You should be able to help ...


0

If I had to pick between these 2... I Personally would vote for the option on the right since this is a more hierachical/logical way of presenting question/answer relationships. By quickly scanning the form, it is easier to differentiate question from answer. However if you want to align text to the input vield, it would be more appropiate to create a ...


-1

I vote for right, but if possible reduce the left-margins of the text inside the comboboxes.


0

The most succinct - and generally most commonly used - way to distinguish a required field in forms is to use an asterisk next to the label (*). This way a user can easily distinguish which fields are required and which are not. So for example this pattern could look like: Label * [ input with placeholder/code hint text] If you think this could ...


0

While the option on the right creates a class-difference between label and the value. It also creates a visual confusion because of the alignments. Now we can align the labels with the border of the input-box, we can't do the same with the values. Best possible solution would be to align label and the value together, and create the class-difference between ...


1

The list as you have shown is called List View or Table View. The method, which you have shown is inserting a new record to the existing view.


0

This isn't based on any research except for the fact that my eyes are melting from the ugliness of the option on the left. The label should definitely line-up with the edge of the input box.


1

I have a couple of ideas. One possibility is to embolden the placeholder text of the required ones. That may not be very intuitive but it should at least indicate that there is a difference and they may be able to then infer from the fields that those are required and the other aren't. Likewise, you could italicize optional fields. Another is to add ...


0

If inputs has border then You can play with border color for example required a bordered black and additional in gray color. Or use * sign for placeholder text and label


1

One idea, if applicable based on your data set and architecture, could be to have : one single quick search field using predictive typing and live refresh of search results. Your users could then start typing, say, "repl 113" and the predictive typing would suggest "replenishment" as they type the "l" (in real time during typing, so difficult to render ...



Top 50 recent answers are included