7

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.

mockup

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.

2 Answers 2

3

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/

5
  • Thx for the feedback and the links. Regarding liquid vs fixed layout: This is a web-application with a lot of charts and visualizations where it makes sense to use the available screen estate. I don't think that a fixed layout is necessarily the best thing for these kinds of web-apps (they are most suitable for descriptive web-sites). For example gmail, google analaytics and other web-apps make use of the entire screen. I can use fixed width for text blocks and combine this with responsive/fluid layouts. For example I can have 4 cards in a row in widescreen and only 1 for a mobile view.
    – timeu
    Jan 29, 2013 at 12:00
  • Example for fluid/liquid layout for fullscreen: twitter.github.com/bootstrap/examples/fluid.html
    – timeu
    Jan 29, 2013 at 12:05
  • 1
    Ah yes, well if you're going to actually use the full-width for something useful, then I would definitely use up all the available real estate. I still think displaying both options at the same time is daunting for the user. I think the tabs are a solid idea, so long as you make the tabs prominent enough that the user will know they have a 2nd option. Another way could be to ask the user to select from the 2 options before displaying anything. E.g. There could be 2 buttons, and after clicking on one, the relevant data would be shown.
    – Rich
    Jan 29, 2013 at 12:08
  • Yes, that was actually the third option I was considering. I will try both Tab Panel and split view approach and see how it looks.
    – timeu
    Jan 29, 2013 at 12:15
  • Just edited my answer upon some new information I discovered. Check out the link: en.wikipedia.org/wiki/Progressive_disclosure
    – Rich
    Jan 30, 2013 at 2:00
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

3
  • thx. good comments. I agree on what you said about the tabs. I think they might confuse the user more than they help (proably also easy to oversee). Going with option 2 allows me to show directly the create form interface when the user doesn't have any existing records to choose from and skipping the select existing record alltogether. Do you know of any existing sites that implement something like that? I only found this: desdag.blogspot.de/2012/06/progressive-disclosure.html and this: sixrevisions.com/user-interface/…
    – timeu
    Jan 31, 2013 at 8:56
  • There are many places that do progressive disclosure – it's subtle so you might not notice it. For example, the payment type question on e-commerce sites then reveals the right sub-questions (e.g. for credit card versus paypal). Similarly, choosing billing address different from shipping address reveals billing address fields. For a live example, get a quote from www.colesinsurance.com.au/home-insurance and say "yes" to ownership question, and say that you have a freestanding house. Cheers, Jessica. Feb 2, 2013 at 0:45
  • Another example of progressive disclosure: donations.redcross.org.au/SGOrders/Create Feb 3, 2013 at 6:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.