Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am designing a web-based application where you can add entries, and each of them have some 20 fields.

For the most part, after adding an entry, it won't have to be edited afterwards. But the option to edit any field still has to be present. Also, there should be a way to perform a search on any of the fields and pull matching records.

How can I design these forms so they don't end up looking like the third one here?

enter image description here

share|improve this question
1  
Take a look at the older questions in the tag Forms. –  dnbrv Mar 8 '12 at 5:05
    
If you're doing an application that registers customer information for example, you have to enter the information "somewhere"... The system's not going to guess it. I think the true problem with the "Your company's app" screenshot above is not the number of fields per se, but that it's too cluttered and the buttons are all over the place which is bad UI design. Let's keep in mind that sometimes you DO need a lot of fields and that doesn't necessarily make it bad UI design, you just have to organize them in an ergonomic fashion, on separate pages if need be, in an easy way to work with. –  Wadih M. Mar 8 '12 at 14:18
add comment

3 Answers 3

up vote 9 down vote accepted

The reason that Apple's and Google's products look the way they do is because they took design decisions. Instead of looking for features to add, they are looking for features to remove.

As this is a very general question, all I can offer is a very general answer.

  1. Do your users need so many fields? - I can't imagine a case in which one single information unit requires 20 different data fields. Start with eliminating and combining fields. If you're redesigning an already working app, ask to see 10 random forms from the past few weeks. If you see fields left empty (or filled with rubbish because they cannot be skipped), maybe you can leave them out.
  2. Are there fields that only advanced users use are that all users use rarely? - Out of 20 fields, you can probably find a few. Defer those to secondary screen, where they don't clutter and interfere with the main user workflow. Like in the previous tip, if you have access to real data, take advantage of it to see if there are fields that are rarely used.
  3. Follow form design best practices - Read Luke Wroblewski's article that Mr. Angeltveit linked to, and also take a look at this article about web forms' traps and tricks.

Like with everything else - sketch, test and iterate until you find the best form combination. Good luck!

share|improve this answer
add comment

1) Read about Gestalt principles, especially the principles of grouping. This will give you some insight on how the brain will interpret the visual organization of your page.

enter image description here

2) Read Luke Wroblewskis article on web form design (or his book). This will teach you how to create functional web forms.

enter image description here

share|improve this answer
add comment

Google and Apple also took the approach that users wanted to do 1 thing with their product, and made that 1 entry and 1 control to do it.

So, as per Yosef ( and Krug, of course ) take stuff away until it becomes a problem, then get round the problem, and keep taking stuff away, until you cannot get round the problem. And start with a focus of "what do people want to do with this", not "what can we get from people".

IME, focussing on the end user is both rare and highly productive. Google and Apple do, and they are not doing too badly for it - not only in terms of revenue, but in terms of user love. MS, OTOH, do not do this very well, and are losing market share, and have never had user love like Apple.

You can make some money, short term, with a crappy product. You can only make money long term ( these days ) with a good product.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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