Adding a customer field to a UI

The Dilemma

I've always tried to be conscious of building a decent UI while still recognizing that I'm better at critiquing them than creating them. And now, I'm looking at a problem that's been staring me in the face for nigh on eight years.

It's a simple one really. On a web page that adds or edits a "job" or "order" or "project" or whatever, how do I allow users to select and add customers to the job/order/project?

Here's where my critiquing skills come into play. I know plenty of ways others have done it but I don't usually like them. And more importantly, if I *did* like them, it was because it was so seamless that it was unnoticeable. Which doesn't help me either because "unnoticeable" means I didn't remember where I saw it.

This is an internal LOB application so it's a little different than your typical e-storefront. On almost every web page I've been on, the natural progression is:

• Build up your order
• Check-out
• Go to a separate page to login or enter your customer info
• If you're lucky, return to your existing order and carry on

I've skipped a lot of steps here, mostly ones where you try to remember if you've ever shopped at that place before and try variations of common usernames you use, all of which don't &*%$ work so you finally *attempt* to create a new account and only AFTER you enter all your data (and it's a crap shoot whether it'll take a non-US address) you discover your e-mail address is ALREADY IN THEIR &*%*# SYSTEM SOMEHOW!!!1!!.

I digress.

For this internal application, the requirements are similar, yet different. I want to be able to determine whether the customer for the current job is a new one or an existing one, but I don't want to go to a separate screen to do it. (Note: pop-ups, either modal or modeless, count as separate screens, only evil-er.)

In addition, I'd like the ability to, when an existing customer is selected, populate a few extra fields with that customer's default contact information but still provide the ability to override it. This is for cases where, say, a company calls up for a job. You may have done work for them in the past but for someone else. You still want to register the job against the same company but you want to attach different contact information to the job in case you need to, y'know, contact them. 

Furthermore, I'd also like the option of overwriting the default contact information for a company from the same screen.

So yes, I know what I want the screen to do. Just not quite how to present it.

If this was a different field, say a manufacturer or car model or something, this could be solved reasonably well with a drop-down list that has <New Item> as the first option. This is okay for simple fields that don't grow in length very often. For a customer, it won't do. There are just too darn many of them.

So to sum up, I'd like the following on the job entry page:

• Search for existing customers
• If one exists, populate the customer info with default values
• Allow user to override customer defaults for this particular job
• Allow user to override defaults for the customer overall
• If a new customer, automatically save the customer info to the database with the entered defaults when the job is saved
• Do all this on the same page (assuming it can be done reasonably well)

Keep in mind that all these requirements are my own. The client (i.e. my mom and dad and all my brothers) just want it done. They would probably accept a multi-page wizard-like solution but they already mock me for not going into the family business. So I'm not going to give them any more ammunition for the omnipresent "You went to college for this?" discussion.

I do have a solution in mind and will post it shortly. But let's see where this preamble takes us first.

Kyle the Interfaced

Source Click Here.