UI Pattern

Question

I have a repeating User interface pattern in my application. An example is collection of 5 years address data. I need to collect data for 5 years and then move on. Can anyone point me to any good UI design sites to achieve this sort of functionality.At the moment I have a Form view at the top and the details view at the bottom which is clunky and would like sometng more useable.

Answer 1

The best UI pattern actually involves the UserControl (if using VS / .Net). It allows you to create a re-usable control. Say you need 5 years worth of employment. Rather than create each control individually for all 5 years, create a single UserControl and re-use it 5 times.

This pattern gives a lot of flexibility because not only are you able to put control-specific code within the UserControl, you are able to code additional methods in the form that contains the UserControl.

If the UserControl is not available to you, I would recommend breaking your UI into groups of related functionality. For instance:

class Employment : GroupControl // <-- inherit equivalent of whatever control group available
{
    public TextBox Name {get; set; }
    public TextBox Employee {get; set; }

    private TextBox name;
    private TextBox employer;
    // more controls

    public Employment()
    {
        // set all control properties
        // equivalent InitializeComponents();
    }
}

class MainForm : Form // <-- inherit equivalent of whatever form container available
{
    public Mainform()
    {
        // iterate 5 instances of Employment class
        this.Controls.Add(new Employment);
    }
}

Answer 2

reuse of the same control is a sensible idea. But my assumption is that you want to know how to display entry for n number of addresses.

from a ui point of view, start with just one address entry form (control) and have the ability (a button?) to add another if needed. don't get rid of the button though - it will be needed for each additional address (and date period it was valid for) that is required.
position each new address control immediately under the existing one(s) and avoid pages refreshes, etc. if in any way possible. consider scrolling if need be to ensure the new control is visible. use other methods as appropriate to indicate the new control has been added, but for the sake of your users - please not a message/dialog box.
you may also want to consider auto populating consecutive occupancy dates.

Answer 3

If I understand correctly, you need to have an "add UI" which can be N entries.

In your example you're adding an arbitrary number of addresses for the last 5 years.

The StackOverflow Answer UI is one example (add an arbitrary number of responses to a question), and it provides the "add" mechanism inline as opposed to going through a separate screen/UI widget.

You can find something similar on the Infragistics Quince site here.

Answer 4

As for simply pointing to a couple of good UI design pattern pages, here's my list:

• Infragistics Quince
• UI patterns
• Yahoo Design Pattern Library
• welie.com
• Smashing Magazine has a couple of articles on UI design patterns, too.

You can also check the homepages for the O'Reilly books

• Designing Interfaces
• Designing Web Interfaces