In some cases, your user interface needs to host a large number of different controls and present them to the end user. Instead of showing all the available controls at the same moment, you can take an approach where you will progressively disclose more controls on user's demand. This can save you some valuable space and, at the same, increase a user's productivity.
Now I will show you how to implement this UI pattern in a simple WPF application. As always, the same methods, ideas, and principles can be applied to your Silverlight application as well.
Start your Expression Blend 4 and then select New project... From the dialog that appears select WPF and then WPF Application. Make sure that Language is set to C# and Version is 4.0. At the end hit OK.
After your new WPF project has been created you should notice that under Objects and Timeline pane, Window and LayoutRoot grid controls are visible.
1. Click on Window and under the Properties pane change the following things:
Under the Layout section, set Width to 350 and Height to 240
Under Common properties, set Title to Files Search Sample
We will create a simple file search application but without real functionality.
2. On the toolbox, click on Asset Library | Label. Draw a label on your application. With the Label control selected, under the Properties pane locate the Content property (it is under the Common properties section) and set its content to Enter file name:. You can set its height and width to Auto (under the Layout section).
3. Now add the TextBox control in the same way and position it under the previously added Enter file name: label. Go to the Text property under Common properties and set it to none.
4. Add the Button control, position it right next to the TextBox control, and set its Content property to Search.
5. Now you will go and add an Expander control. Select it from Asset Library, draw it, and position it below the TextBox control on your form. Set its height and width to Auto.
6. In the Objects and Timeline pane, click on the Expander control so that you can access the Grid control contained within it. Double-click on the Grid control to make it active. We will add our additional controls into this Grid control. Under the Layout section, set Height to 80.
7. Once again, go to Asset Library and select the CheckBox control. Draw it onto the grid surface (be sure to make it this way, CheckBox must be the child element of the Grid control contained within Expander control). Repeat the procedure and add one more CheckBox control and position it below the previous CheckBox control.
8. Select the first CheckBox control and change its Content property to Search archived files, and set the Content property of the second CheckBox control to Search files in Recycle Bin.
9. Ensure that the IsExpanded property of the Expander is set to false (unchecked) under the Common Properties section. We want to keep Expander collapsed. Also, change Expander Header content to Show advanced options.
10. Hit F5. When your application starts, click on Show advanced options and your application should look like the following screenshot:
 |
Our sample application outlines the basic idea of progressive disclosure. We have created a simple file search interface where a user enters the filename and clicks on Search to search for files. That is the basic use case and it is available right after the user starts the application.
By clicking on Show advanced options, users are presented with two more options that can refine their search results. I have assumed that majority of users will want to use basic search options and just smaller number of them would be interested in searching for archived files or files in the Recycle Bin.
In this example, a progressive disclosure pattern has been implemented using the Expander control. The Expander control consists of two major parts header and grid. The Header part contains a chevron and label (we changed its content to Show advanced options). The Grid part can be considered as a container in which you should put all of the controls that you want to disclose progressively to the end user. In this example, we have added two CheckBox controls with options to refine our search they are not visible right away and therefore, they are not adding any visual clutter and distraction to users. If users do not want to use them, they can easily collapse the Expander control and hide those options.
The first part of this recipe has introduced to the basic idea of progressive disclosure. What follows are more details and design and user experience considerations you should take into account when designing and implementing this pattern in your application.
For the users to have a better understanding of the actions being performed and the changes being made when they click on chevron, it is highly recommended to change label from Show advanced options before clicking on the chevron to Hide advanced options after the user has clicked. Same goes for the other way around.
To achieve that, we need some code. As we have created our project as a WPF C# project, we will obviously write our code in C#.
1. Under the Objects and Timeline pane, click on the Expander control. We will now change its name so that we can access its properties through the code easily.
2. Under the Properties pane, type expOptions in the Name field.
 |
3. We will want to execute different code when users collapse it and when it expands our Expander control. To do that, we will define event handlers for the Collapsed and Expanded events.
4. Click on the Events icon under the Properties pane and you will be presented with a number of events. Let's add our event handlers for Collapsed and Expanded events. To do that, you will just have to type in the name for those event handlers and once you press the Enter key, Visual Studio will start and allow you to add code logic. You can use expOptions_Collapsed and expOptions_Expanded as names for your events.
private void expOptions_Collapsed(object sender,RoutedEventArgs e) { this.expOptions.Header = "Show advanced options"; } private void expOptions_Expanded(object sender, RoutedEventArgs e) { this.expOptions.Header = "Hide advanced options"; }Everything what we are doing here is changing the content within the header part of our expOptions control.
6. Press F5 now and try clicking on the chevron and note how the label will change its content, making it easy for users to understand what has happened and what will their next action cause.
Many developers tend to expose each and every command and feature that they have built into their solution. Some even go as far as to argue that by doing that they will actually show to the end user how powerful and feature-rich their application is. I'd be happy to say that this story was just my exaggeration but I have witnessed such situations too many times. So, we are facing a challenge on how to enable users to use our application and make it feature-rich, but at the same time not to make it too cluttered.
Guess what users will not judge your application's power by the number of buttons, icons, and other UI elements that you have exposed to them. They will judge it, among other things, by how easy it was for them to get to the most needed options really quickly. That will make them feel that they are in control and will result in significant productivity gains.
So, what to do?
The first step is to identify the commands and controls that your users will use in most cases. Make a list of all use cases and assign a value to each of those use cases describing how likely users are to use that very option. You must ensure that users should be able to perform about 70-80% of the use cases easily, without having to look for hidden options within your UI. Of course, that percentage can scale depending on certain specifics, but practice has shown that the aforementioned range works very well. Okay, now you have a list with controls and use cases that your users will use in 70 80% of cases, and the rest will be used much less often. This is a great input and you can use it from this point on to define the look and feel of your UI.
Add those most commonly used controls on your windows or pages.
Remember, these are the ones that will be used frequently by your users, so ensure that they are visible and easily accessible. Now, create a separate section and add the rest of the controls to that section. Hide it and make it hidden by default to your end users. But, be sure to allow users to get to those options in a single click. You might consider using buttons with captions such as More details... or even chevrons (>>) as a part of the button or other control that is being used to show those hidden controls.
It is extremely important that users are able to hide and show sections with additional controls with a single click. If you show additional controls by clicking on Show advanced options, then be sure to enable users to get out from those advanced options by clicking on a button saying something like Hide advanced options.
As I said earlier, controls that are being placed in this "hidden section" will be used rather infrequently, but you must ensure that your users will be able to access them and leave them easily.
If you are using chevrons instead of buttons (and that is what I do personally because I feel that they are visually lighter than buttons, and besides that, buttons are usually associated with launching other windows or executing commands), you must take care of rearranging their "pointing direction" after a user clicks on them.
They should always point in the direction of the action being performed, which means the following: if the chevron is pointing down, when the user clicks on it, additional commands should appear below that chevron and now the chevron should point up.
That will always give a clear understanding to the user what will happen when they click on the chevron. I strongly suggest that you use labels that will reinforce users' understanding of the actions being performed.
|
Look |
Behavior when user clicks | |
|---|---|---|
|
|
Section will expand, hidden options will be shown, and chevron will change its direction to up, and text will change to something like Hide advanced options | |
|
|
Section will collapse hiding the previously exposed options and chevron will change its direction to down, and text will change to something like Show advanced options |
