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

  • Why is it important for the user "to make a conscious decision"? Whatever benefits it may be have must be weighed against the costs: you're adding user work and an opportunity for input error, in addition to making the feature harder to understand. Defaults are generally good usability. It's the usual solution for master-detail, so that's what users expect. Commented Aug 29, 2012 at 15:38
  • Because there is no good default "Category". If I set it to a random one most users will probably not bother thinking about choosing the correct Category and create entries with a wrong Category. Although not entirely the same thing as in my use case in Gmail they also have a blank space/state when you initially open your inbox. Once you chose a mail it will update the detail view with the content.
    – timeu
    Commented Aug 29, 2012 at 15:50

2 Answers 2


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.

  • In addition, here is another great article on how 37 Signals managed their "blank slate" project when designing the new Basecamp. 37signals.com/svn/posts/… Commented Aug 30, 2012 at 2:17
  • Thanks for the feedback and the links. Actually I have another use case which is exactly what you show in your Axure mockup. So I think you understand the question. I was also looking for some real life examples that can provide inspiration on how to style/design this blank space, but unfortunately I couldn't find any good ones. I already saw the examples in ui-patterns before but they are more about creating initial content rather than asking the user to select something to get more info.
    – timeu
    Commented Aug 30, 2012 at 7:56

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.

  • Ok you might be right in that specific use case. Maybe it makes sense to select a default value and display everything initially. However I am more interested in how this "ask the user to select something to display more info" blank space part can be solved regardless of this specific use case.
    – timeu
    Commented Aug 30, 2012 at 7:59
  • @timeu: Oh, okay. I added a general solution to the beginning of my answer. That's what I'd recommend trying for, say, displaying usage statistics for a user-supplied word in a text box. Commented Aug 30, 2012 at 12:28
  • Thanks for the good suggestions (i.e. circle placeholder for the PieChart, etc). For example Basecamp uses "cartoonish/painted" placeholders for blank space (public.basecamp.com/1679267/projects/178-bcx-blank-slates/…).
    – timeu
    Commented Aug 30, 2012 at 12:48

Your Answer

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

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