2

I'm tackling one uxd problem on my company's website. We're basically capturing lots of user information through a web-based form with many input types. Now, we want to make the process as easy as possible and more importantly, less hassle.

I have a few ideas in mind about the trade-offs, here are some of our current considerations that I would seek advice from you guys:

#1 Generally, what is the best UI/UX hack to make a page full of form inputs less scary (and more easy to follow) than it looks?

My Solution: I categorize inputs into groups, each group has a "percentage bar" to indicate the completion status. I cheat it a bit to increase the completion percentage purposefully (i.e. 10% -> 70% -> 80% -> 90%).

#2 Users might get frustrated and fill in bad data - how should we prevent this?

My solution: on every text input focus, I place in a message to encourage them to fill out good info and assure that they're nearly done with the form.

#3 Responsive vs mobile version. Would it be better to make the form responsive or use the mobile version for it?

My solution: if users use mobile phone, I would reduce the form length a great deal while giving them the ability to save the form as a snapshot and restore it later when they're on desktop/tablet version.

What are your thoughts?

Improve this question

4 Answers 4

Reset to default
1

Ideally, how forms should be managed on a web app, is a question whose answer depends severely on the subject and the type of data it deals with. Apart from that, I have always felt that forms are one of the very few things that have made the transition from paper to the screen with more or less no changes.

Dealing with them, needs a strong knowledge of your userbase first. That decides the tone of the form which has a huge hand in making it more engaging. Because the form is going to be large, peppering it up with small one liners to make the process more interesting can be considered.

Tabbing is one of the first things that comes to our minds when dealing with large forms. True. But messing it up has a high rate of probability if not carefully handled. Tabbing should be applied only when the the fields can be distinguished according to an important criteria; like call to action (Sign up | Link accounts | invite friends ), source (Personal information | Bank details | Card details) etc. Make sure that they follow a logical flow from the business perspective of the form.

Multi-column layouts can be considered but only when you can logically cluster a few fields together (Full name - (First - Middle - Last)). They can be very powerful to make the user feel that the form is short when properly done. Visually grouping them strongly amplifies the effect.

About progress bars and milestones. It is very important to note that forms are one of the very few elements in a wb app that talk back to a user. So it is best that you are honest to the user about the progress. With abstract methods like progress bar, you can cheat to a certain range but it should be kept to a minimum. Explicit methods like text on the other hand should be completely honest. False impressions can have a spam*my* feel which will create a more frustrating experience. You can try other ways to keep the user's attention pinned; maybe like giving him sufficient reason to make him want to fill the form.

Coming to the 21st century, since we are talking on UX(;)) use methods like autocomplete, remember details, import details etc as an added dimension to optimize the time of the user on the app.

Hope it points you in a better direction :)

Improve this answer
1

Asking a lot of information sounds like something might be wrong in your process. I know it's easier to build a single giant form and collect all the answers at once but you need to make sure that you're asking questions at the right time.

When you're signing up a user, do you really need home address or phone number? If not, remove these fields from the form and ask them at a later time when you really need them.

If you really need to ask these questions, always have microcopy or tooltip that explains why you need this bit of information. ie. "Phone number is required so that you can receive quotes for your request."

Imho, tooltips are lighter-weight and reduces the cognitive overload since they're not visible unless you interact with the form element.

Improve this answer
0

It depends on the type of data you get fed from the user/clients(whatever be the word you coin). It is known that people will have a few data linked with their mail or social accounts and can take in the data (if the data is much more related to personal). Else we can make the user to skip a few and can make them fill later or when it is required.

Am not sure what sort of data you play with. As a freelancer i gave a few thoughts of mine.

Improve this answer
0

Interesting question, I've had a similar issue recently!

The first thing that comes to mind (though similar to your first solution) is to divide the form into several (categorized) steps and guide the user through the form (a wizard, sort of), showing the progress after each completed step.

The second thing that comes to mind, depending on if you have any optional fields: is to show the mandatory fields on one page and ask the user if he/she wants to fill out some optional fields in a second step, telling the user that it might improve the experience/service you are providing.

Hope this was of any help, and good luck! :-)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.