Sponsored By Aspose - File Format APIs for .NET

Aspose are the market leader of .NET APIs for file business formats – natively work with DOCX, XLSX, PPT, PDF, MSG, MPP, images formats and many more!

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

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

This entry was posted in Conscientious Coding, User Interface. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • http://nah Nostradamus

    I think you have to show the user the page in a ready to input state. Like the ms office. So when the user want to create new customer, they just type in there, or if the user want to search a particular customer, provide a search screen, you don’t need to load the list of customers, the supplied search criteria will be much faster. Select a customer you want to view. If the user want to modfy the record they just click the edit button.

  • Kyle Baley

    @Morten: I will take a look. I remember looking through that whole area of Microsoft a few years ago when I was looking for a decent accounting package and I got thoroughly confused at what each product was supposed to do.

    @ Ayende: Leave it to you to reduce my next post to four lines.

  • http://morten.lyhr.dk Morten Lyhr

    Sounds like you are looking for a Lookup field, but that opens a new view.

    If you are interested in effective GUI, look at MS Dynamics NAV, formerly Navision.

    I know a lot of users(non it minded), that praise Navisions ease of use.

  • http://www.ayende.com/Blog/ Ayende Rahien

    Have a customer name / id (whatever is used more often) field.
    Allow to do google suggest style typing into it.
    When they select an existing one, load the stuff from a db into a set of fields for the particular .
    If they don’t, load empty values.