It works similarly to the file HTML input, but browses files or folders stored on the server, and it's mainly used to browse image gallery folders.

I need some ideas on how to design the UI for it, before coding it. This is what I came up with so far:

enter image description here

Clicking on the arrow would go up one level (parent directory), and clicking on any directory name would open that directory. The "select" button makes the selection and closes the input, and it's only visible on mouse over.

Another option is a thumbnail list like in Windows Explorer: click opens, double-click selects, maybe with another select button below the list because dbl-click is not so obvious.

I want it to be easy for the end-user to understand how to use the input, and allow him to make a selection with as few clicks as possible. I'm not that much into user experience, so any suggestions are welcome :)

  • How many folder levels are available? Is there any way you can figure out the directories for the users instead of making them browse around to find what they want? Nov 19, 2013 at 18:47
  • Depth is unlimited. There are user classes, but only the admin should access the file browser. This is for the admin Nov 19, 2013 at 18:55
  • I do not see any image here. Dec 13, 2013 at 12:56
  • Whatever you come up with, sketch something different than the local file dialog. So that user do not confuse. Dec 13, 2013 at 12:57
  • @NicolasBarbulesco: I disagree; the local file dialog is an excellent model, both because it's been refined for many years to be a good file chooser UI and because the user will be familiar with it. There shouldn't be any confusion; the user is an admin, and can cope with the server having its own file system. Sep 16, 2014 at 9:31

2 Answers 2


Pattern Tap has an example pattern of the file browser from Pixelapse. This file browser was updated recently and the Pixelapse team gave some insight into design considerations on their blog:

"Browsing through projects is now much cleaner. We removed unnecessary UI chrome and slimmed down the interface to put your designs front and center. Navigating into a project keeps you in context, allowing you to quickly invite others. And folders show a count of the items in them, so you know at a glance what you’re looking for."

They have a sample gallery posted but to see the full file viewer in action you'll need to create an account.


If you're using a small width then simply use the back button type functionality. Place a back button in the top left corner with a label next to it:


download bmml source – Wireframes created with Balsamiq Mockups

  • This is a good and simple idea. But avoid the word Back in the name of the button. The user does not always come from the parent place. Dec 3, 2014 at 10:52

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.