1

Anyway, I'm a developer by trade, but do most of my own design work. The program I'm currently developing requires that the user "configure" several directories in which several 3rd party executable files reside.

For this, I'd like a single file-upload-like component that

  • is not cluttered
  • is self-contained
  • supports three directory selections
  • supports both standard "browse" click button and drag-and-drop

two bad non-solutions I've thought of:

  • wizard-like guided process
    • bad because annoying and makes it impractical for updating directories if changed
  • three inputs with their own "browse" button
    • OK, but doesn't fulfill the drag-drop requirement

IMO, this implementation sucks, and would never deliver something I consider to be so unusable. I've included a screenshot of the cobbled-together-with-css component. Note: I know that some inconsistencies b/w help text and component exist. Does anyone have any ideas or suggestions on implementing this in an intuitive and attractive way?

component's current state

Improve this question
2
  • "Drop folders here". I see a file icon. ? And the section is titled "Executables Directories". So much confusion here ! – Nicolas Barbulesco Dec 7 '14 at 14:22
  • yes, @NicolasBarbulesco. You're right. But your criticism isn't what I'd consider constructive -- I know it sucks, which is why I posted. I played with many ideas, some of which left artifact. I.E... "Note: I know that some inconsistencies b/w help text and component exist." But I did describe my end goal clearly; the screenshot was included solely to describe the current state -- rubbish. If downvoting a comment were allowed, I'd do just that. – Todd Dec 7 '14 at 18:30
2

Why not have 3 separate drop-areas? You seem to have horizontal real-estate to make it work.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

It would be a challenge to make the dialog balanced, as this heavy control at the bottom will draw a lot of attention.

Possible solutions:

  • Add more contrast at the top - brighter text, brighter icons.
  • Try to make the drop-area as light as possible. Your current design is close. Maybe make the "Add" icon a watermark?


EDIT

If we must have meaningful, full-ish paths displayed after the user has dropped a folder into the control, I suggest something these two states:

mockup

download bmml source

Where the ellipsis would display the full path on mouse-over/click (up to you)

I would leave the "Browse" alone. It's more consistent, and it sort of has a place of its own, as an alternative for this whole control. Wouldn't want to put something internal to the drag-drop mechanism with it's anti-mechanism.

Improve this answer
6
  • Very detailed answer and is almost direct hit, up-v'd. Before I accept, do you have any suggestions as to how I could indicate current selected directories as I have in the screenshot? Therein lies much of my struggle with this component. I feel a list would be somewhat tacky; likewise, i'm not sure tooltip UI would feel "seamless" as the Material paradigm mandates. – Todd Dec 7 '14 at 19:05
  • 1
    There's a reason I left it out :).. This is tricky. First of all: If we fit a full path here, it must not wrap or truncate for typical lengths. Sadly, typical lengths are pretty long. Laying the 3 boxes out vertically would give us horizontal room for full path, but I don't really like that, not UX-wise and not GD-wise. Another possible solution is to display a partial path. Would something like '/dir' or '/ParentDir/dir/' make sense here? If so, it could come inside the box, as to indicate "Modified" state – Navot Dec 7 '14 at 19:18
  • I considered the truncated route, but wasn't completely sold. The software is a desktop client is designed for developers. I've asked several colleagues (some on UI/UX team). The devs unanimously want a "full-ish" file path. I'd def be willing to part with the obvious directories ("./users/toddpress/") in the case of placing inside. What's your opinion of a 1/3 division of the browse button, placing a vertical "more" icon to display more info when clicked? That would look (crudely) something like [ browse |...]. – Todd Dec 7 '14 at 19:31
  • 1
    Please see my edit – Navot Dec 7 '14 at 19:51
  • Beautiful! This is IMO will become great UX. Your help has been invaluable. 260+ inherently lazy developers will appreciate the usability. – Todd Dec 7 '14 at 20:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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