Layout question regarding "Select existing record or create new one" pattern

Question

I want to create a wizard for creating new data.
In one of the steps the user is supposed to select an existing record or create a new one.
There are of course different ways to solve this.

I am leaning toward this solution.

^{download bmml source – Wireframes created with Balsamiq Mockups}

On the left side you can see the records in the form of cards with additional text. (Typically the user won#t have too many records to choose from hence I use cards instead of a datagrid/list) On the right side is a simple form. Because it is so simple I don't want the user to switch the context so it should be possible to fill out the couple of form inputs inline.

The layout should work in different screen resolutions. I guess the right part will have a fixed width and I can use a fluid design for the left part. For a wide screen monitor/high resolution devices this seems to be fine. However for smaller resolutions this layout might be a problem.

An alternative solution/layout would be to have a tab panel and only display either the "Select existing record" form or the "Create new record" form. However on a wide screen monitor I would have a lot of whitespace.

Answer 1

Your suggestion of using a tab panel is good. Showing the user everything at once is likely to confuse/overwhelm them. Showing only the minimum amount of data required is called progressive disclosure and is desirable:

http://en.wikipedia.org/wiki/Progressive_disclosure

Regarding the empty space, I would fix your layout to somwhere around 980px. Having a liquid layout that stretches to full screen is not useful, and will create awkward spaces and readability problems with super long lines of text.

Liquid is much more useful when content is scaling down. Take a look at the sites below, and watch how they scale all the way down to mobile (responsive design), but they stop scaling up around the 980 mark (some might be more than 980, but none go full screen.

http://thenextweb.com/
http://www.time.com/time/
http://5dinstitute.org/

The one exception to the rule is when sites have full screen images for maximum impact, but even then, any text will stop at a fixed width as below:

http://thegreatdiscontent.com/

Answer 2

I think your solution is a good one. My one concern about it is whether or not it is sufficiently clear that there is a major choice to be made (i.e. between choosing an existing record or creating a new one).

A couple of ways to make the choice more obvious would include:

1. applying a faint shading to the top section, to visually link the two key choices and to also separate them from their sub-questions; or, better still
2. do as Richard Tan suggests and actually ask a question to determine which way they want to go only then show the relevant sub-questions.

The advantage of the second option is it focuses the user on one task at a time (make the choice, then complete the details), thereby reducing cognitive load. It also, as he says, makes the interface less daunting and confusing, and works with a variety of window-widths. The potential disadvantage is that the user can't see the records to choose from when deciding whether or not an existing record suits. Don't know whether that's something that they are likely to need in this case.

I wouldn't recommend tabs because tabs are conventionally for things that don't have inter-dependencies. But in your case, one tab only applies if the other tab doesn't, if you know what I mean.

Hope this helps,

Jessica