Folder picker: Some users want to preview contents of the folder but others find this confusing

Question

In our Silverlight application we have a wizard that gives the users the ability to browse to a specific folder on the server and in a subsequent step select the specific files that they wish to process in the previously selected folder.

Initially we based our folder selection stage on the standard Windows FolderBrowserDialog.

^{Image from MSDN: Access the File System with .NET Framework Classes from Visual Basic 6}

When we showed this to some of the users, they said that they found this difficult to use as they couldn't see the contents of the folder during the folder select operation. Often they would select a folder, move to the subsequent step and find, when they could see the files, that they had selected the wrong folder. They would then have to move back and select a different folder and try again.

Clearly this wasn't working and based on the feedback we modified the dialog to additionally show the list of files and not just the list of folders but made the files disabled and therefore not selectable. The dialog was then similar to a standard file dialog.

On a second test with the users we noticed that this caused confusion as some of the users were now attempting to select files in this dialog, i.e. skipping forward a stage. This was a concern that we had when this was proposed as a solution.

Ideally we would merge the stages and allow the user to select the file directory but for technical reasons, that I'll not go into, we are unable to merge the folder and file selection steps into a single step.

How do we square the circle and give the users a preview of the contents of the folder but without them confusing this with an actual opportunity to select those files?

Answer 1

Being on a User Experience Q&A site your last but one section is rather bald:

Ideally we would merge the stages and allow the user to select the file directory but for technical reasons, that I'll not go into, we are unable to merge the folder and file selection steps into a single step.

This is the true User Experience answer to this question, make no mistake about that. I have not heard of any technical issue of this kind that couldn't be solved. From a developer perspective you could use post-backs, async techniques, threading and possibly other techniques to solve this issue.

However, there is a possible workaround which could do the trick. You need to diffrenciate between the actions select folder and select file, possibly like this:

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

Use a modal grey overlay above the files and make it more visibly clear that it is not possible to select files. User should still be able to see the files, but it should be less prominent than the folders on wizard step 1. On wizard step 2, the opposite apply. The next button is only enabled when a file/folder is selected. Use a distinct header (could be combined with a large folder/file icon) on both steps. Test it and see if its better than your previous attempts.