master/detail view blank state/detail view when nothing is selected

Question

I have a following view/form:

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

Basically it is a form where I can fill out some information for a new record.
When the user selects a Category from the ComboBox I want to display a list of items on the right side and a PieChart on the left side. However initially nothing is selected so somehow I have to fill the blank space and cope with the blank state respectively.
I can think of two solutions:

1. Instead of the PieChart and the List I show whtie space with a text overlay which says something like: "Select a Category to display information".
2. I could have an empty PieChart and some example entries in the List, put a grey overlay over it and put the above text on top of it (see the mockup).

Solution 1 is easier to implement but I have a lot of white space. Solution 2 is harder to implement but provides the user with a sense of what kind of information is going to be displayed.

Of course I could preselect a Category and fill in the blank initially but prefer to leave it empty because I want the user to make a conscious decision about the Category.

Is there another solution for this problem? I tried to search for some real world examples but I couldn't find any good ones. Maybe somebody has some examples which provides some inspiration especially from the design/UI/styling point of view (Typography, which color for the overlay, etc).

Answer 1

I think I understand your question but please clarify me if I am wrong. I believe this has to do with what to do with the blank slate without leaving it boring or un-motivating to the user? I believe this comes down to your goal / objective over the fear. I am going to go with solution 1. Leading the user visually rather than with direct instructives, in my opinion, decreases the push and increases the pull. The same technique is used in game shows when the host shows the participant the prize before they choose the answer. This is a loose example but I would agree with solution 1. There are a number of ways that I would do it though depending upon what I was trying to accomplish or help the user accomplish.

Here is a great article about it: http://ui-patterns.com/patterns/BlankSlate

If you do not want them to see content or sample content I would simply use a symbolizing graphic of each resulting area and maybe show a light dashed line in place of the border of each resulting area. This is sample I threw together in Axure. The text may be a little light and you may get creative and use a color icon and an arrow but either way the user is being directed visually.

Other suggestions:

1) Fill the content completely in both places and place a blur which completely blurs the data but gives the user a clear understanding of its make up.

2) Add a default category to the dropdown that includes or shows ALL categories initially and place the category field in close proximity to the category list results (ex. Above the list container) with a clear label (ex. "Choose a category to filter") or (ex. "Filter Categories"). the options of the language are limitless and should be based off of your defined user.

Answer 2

As a general approach to the design process, start with the simplest and add complexity only if indicated by user research.

If you have nothing, show nothing

A large blank space is usually a pretty good clue that you’ve nothing to show and input is needed, like a form with an empty text box. As long as the blank space is visually associated with the Category drop down (e.g., a frame comprises both), and the Category drop down label sufficiently communicates what the user gets (e.g., “Performance of Product Category: _ “), then no other prompting is necessary.

A simple blank space reduces the amount of reading and thinking the user has to do (your Option 1), and avoids the user confusing fake list data for real (your Option 2, second half). Users won’t necessarily know gray or other fading means “example” or “fake.” They might think it only means “disabled” (i.e., the values are real but can’t be edited), or maybe they think it’s just static graphic design, since gray-on-gray is a recent fashion in web sites and the user may have never seen the area when it has real data.

A large blank area may even motivate the user to select a category precisely because the blank space “doesn’t look right” and the user will seek to balance. If you do want to provide a stronger indication of what the blank area displays and you can’t show a default Category value to serve this purpose (see below), then display blank graphs and fields. That is, show the axis and titles of the graphs, but zero data (e.g., a white circle for the pie graph like you suggest), and show the column and/or row labels in the list, but blank list items.

Avoid having nothing -pick a default

However, unless usability testing has shown users ignore the Category dropdown, don't assume they will and build a substandard UI that only raises new problems such as the ones you describe, plus the ones I list in my comment.

There seems to be this myth in web app design that defaulting contributes to more errors than not defaulting. I don't think there's any evidence of that, except maybe for some very specific situations (e.g., Likert radio buttons in opinion surveys). It's likely true that more users confronted with a default value leave the control on that value than users select that value when they are forced to choose, but that doesn't necessarily mean users are making an error; it may only mean users don't care much what value it is.

Even if testing shows users erroneously ignore the Category, look for other solutions to the problem before opting for a solution that contributes to user effort, error, and confusion. That cure can be worse than the disease. For example, maybe you need to improve graphic connection between Category and the detail regions (it's pretty weak in your wireframe). Or maybe you need a better names for the options of Category so users know what they mean and what they'd want.

So your solution may be #3. Set the Category drop down to the first item on the list, which should probably be the most frequent, important, or illustrative choice (even if it is only slightly moreso than the others).

BTW I wouldn't assume the Gmail solution is a good one, even for Gmail. Lot's of big companies who you'd think would know better don't.