User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
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? – Jonathan Strate Nov 19 '13 at 18:47
Depth is unlimited. There are user classes, but only the admin should access the file browser. This is for the admin – onetrickpony Nov 19 '13 at 18:55
I do not see any image here. – Nicolas Barbulesco Dec 13 '13 at 12:56
Whatever you come up with, sketch something different than the local file dialog. So that user do not confuse. – Nicolas Barbulesco Dec 13 '13 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. – vincebowdren Sep 16 '14 at 9:31
up vote 1 down vote accepted

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.

share|improve this answer

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

share|improve this answer
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. – Nicolas Barbulesco Dec 3 '14 at 10:52

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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