Ugly user interfaces

Question

I have seen numerous ads/sites poking fun of a cluttered user interface by setting it up side by side with, say, Google and having a caption like: this is your site / this is theirs.

That’s all very funny, but actually, Google only needs a textbox and a submit button.

What about when your page is a data entry form, say an order entry form, or a new employee entry form?

I can’t think of a way to build a form that requires a lot of data entry without a clutter of textboxes, dropdownlists, checkboxes, etc.

Of course I could use put just one textbox per page, and have a 50 page data entry form or wizard, but I don’t think that would go over well with the end users.

Anyone found a way to create a data entry form that collects a lot of data but doesn’t look ugly?

Answer 1

If a good user interface on this kind of thing is very important (it often, isn't, really) then a screen that changes as the user progresses, revealing fields as needed, is often a good way to go. Some wizard screens that chunk things up might be appropriate as well.

But as I said, it generally isn't very important in business apps. The information has to presentable, and familiar (and this kind of screen is definitely familiar). Often business users want more fields on one screen so they can define the values in one shot, instead of having to go to different screens.

Also, the large amount of fields is often appreciated by power users would do entry a lot, where multiples screens just slow things down.

That being said, Google has a complicated screen. It is the advanced search link. What they are doing is keeping it simple for the simple use case. If you have an app used by hundreds of thousands of people, then a simple use case is most definitely worth its own screen. If you have a business app likely to be used by no more than a few hundred people in its lifetime, not necessarily.

Answer 2

Instead of trying to choose between Super-Cluttered and Super-Empty, why not try and lean towards a nice compromise? If you can separate you data-entry form into some logical "pages" that group together much of the similar fields (Name information, Address information, previous Job History, etc. etc.) then you can find ways to space out what you have better per page and not make it look so cluttered.

Answer 3

You've answered your own question. If you have a lot of questions you need a lot of space. Whether that space comprises of physical screen area or "space-time" (ie, clicks to change the form) is the ONLY logical option (other than not asking some questions).

Answer 4

I'm no aesthete (I'm a programmer, not a designer), but, talking of Google pages, have a look at the advanced search page -- not a thing of beauty but not an eyesore either, even though it's a form allowing entry of lots of data. Decently aligned text-entry fields, clearly marked "tip" at their side for explanation, multiple fields on the "one or more" line, real-time feedback on the query the form is letting you prepare, "collapsible" regions for the optional entry of data that is more rarely needed. I think it's a reasonable combination of techniques.

Answer 5

It is obviously true that you would need at least N input controls to get an input of N input values. However, if N is sufficiently large, it is quite possible to mess things up and make it unusable by lack or organization.

For example, imagine how confusing it would be if you had a large order form, and your home address zip code was between the credit card expiration data and the shipping method.

There are a lot of resources about how to organize forms (many good ones from before the period of the web; organizing a printed form is also an art).

In my opinion, the most important things are: 1) Organize into clear visible sections, so the reader immediately know where to go or have a general idea of what information he would have to provide.

2) Take Hick's law into account - Organization can help search. You wouldn't put your "print" command under the edit menu or put all the commands in one long pull-down menu. Think about where you place every input.

3) Make it easy to see what things are optional and what the expected format is. Don't wait for the validation to show the user that he needs a 9 digit zip code.

4) Organize inputs in the same section so that you can perhaps do auto-fill. For example, if I put a 5 digit zip code or a state, automatically pick US for me. Attempt to fill details from zip code, etc.

5) Use the correct input widgets. If there are four options, don't let the user type, put a clear box.

6) Test on various displays.

7) Save forms while they're being filled so that user can continue if session crashes.

Answer 6

Using tab pages and accordions is also a good way to reduce clutter.

Answer 7

Form design is becoming more of a science now. You can embed JavaScript to watch mouse motions and time keypresses and mouse clicks. There have also been eye-tracking studies to see which layouts are easiest for people to figure out. I recently read Luke Wroblewski's Web Form Design and it walks through examples of form redesigns that were done based on evidence. It even shows eyetracking on sample forms so you can se the elements that slow people down.

It's a great book. Shows layouts that work. Tells when you should give help and when you shouldn't. How to phrase instructions. How to deal with form errors. And so on.

There are about a half-dozen 4 1/2 star design and usability books on Amazon. If you make web sites with forms, you should keep up with the state-of-the-art, just as you'd keep up with innovation in coding, deployment, and testing best practices.

Improving usability on a page can make a huge difference in revenue, as conversion rates go up. Knowing the problems that case people to bail out of a form is crucial.

Answer 8

Make sure that:

• TAB and SHIFT-TAB do what the user will expect
• Related fields are grouped together
• You let the user enter data in their preferred format (if they want to enter a phone number using "-" and "()" for example, let them), then convert the data into your internal preferred format
• Make good use of fonts, colors, dividers, and so on, so each group of fields to be entered are locally uncluttered.

Think of remote controls. Some remote controls are a collection of undifferentiated buttons, all the same shape and size and color. Some remote controls have clearly divided groups of buttons, using button size, shape, color, and so on, to make it obvious at a glance where the buttons are for each purpose.

You can have two remote controls that each provide equivalent functionality, yet one looks cluttered and the other doesn't. A cluttered look is about more than just how many fields there are.

Answer 9

Beauty is in the eye of the beholder.

• Google is lovely because it has just one text box, two buttons, and some links to other features.
• Google is also lovely because Advanced Search is there if you want it, and not if you don't.
• Google is also lovely because you can embed it in a personal home page and get all sorts of neato widgets that you, yourself, select.

In all cases, Google conforms to the user, rather than asking the user to conform to the Google.

That's the essential nature of good design - fitting the user.

I've seen users point to some pretty hideous screens and even paper forms and say - "please make it just like this, because this has everything I need, nothing I don't, and I know just where to find all of it". To them, the frightening, cluttered screen is just perfect. I'd hate it.

In many cases, a customizable screen (like Google home page) is a win, because users can make it as complex or as simple as they like. But only if you can find an elegant way to offer the customizability without distracting from the main task. For example, the google home page customization links are a very small peice of real estate compared to the search area (easily 1/3 of the screen space) or the widgets.

And google starts with the simplest of options (www.google.com) and lets the user dig until they find a suitable complexity level.

You can't please all the people all the time on the first click, but you can please most of the people on the first click, and more of them on the next click...

Answer 10

As bethlakshmi said, you have to fit the interface to the users. If they're your own HR department, make it a single big form with lots of links to related forms so they can get a quick overview and fill in lots of fields quickly. If they are your customers, move any useful but non-critical fields to a separate, optional, page (e.g., Flickr). If they are casual web users, prune to the absolute minimum that is useful to anyone, and add an easy way to get to the more advanced features (e.g., Google).