1

I'm working on a website that allows the user to upload two files from a remote computer and displays the file paths as a confirmation. However, if the file paths are long, the card that holds the file paths can look cluttered. I had a few ideas, but when I implemented them, I was not convinced they were the best solution. Here's what I have tried:

  • Display the file path starting from the first difference in them. For example, the two paths /a/b/c/file and /a/b/d/file would result in c/file and d/file with the base path /a/b/ being displayed above the two paths.
    • Pros: Can save some space on very similar file paths
    • Cons: There is very little savings if the paths aren't similar.
  • Only show the file name, and hover over it to see the full path (with click-to-copy functionality).
    • Pros: The file names themselves are short
    • Cons: Both files potentially can have the same name (but different paths), thus at first glance, it may seem redundant to have the same file name displayed twice on the screen.

Please let me know what you guys have tried, or any suggestions you may have with my problem.

Improve this question
2
  • 1
    There is too little information to know why the file path is needed for confirmation. But to me it looks like you're trying too hard to make an idea work, while taking a step back and looking at the actual requirement could lead to a more fitting design.
    – jazZRo
    Commented Jun 24 at 7:49
  • '...hover over it to see the full path' - How will people who are on touch devices, or people who don't use a mouse get to see the full path?
    – JonW ♦
    Commented Jun 24 at 10:01

2 Answers 2

Reset to default
4

a/../d

may be a good option for this. When the user clicks on the breadcrumb, they will see the whole path (just like windows' finder.

Improve this answer
2
  • I like this idea, but it may have the same issue as the 2nd option. Both files could be in /a/../ thus having the same breadcrumb
    – marco
    Commented Jun 24 at 2:42
  • 1
    @marco the beginning of the breadcrumb is the same, informing the user that it's on the same "drive", and the end is different so it's clear that they're on different folders. How different? That's less important, and easy to find by clicking on the '..'
    – Luciano
    Commented Jun 24 at 9:42
1

Thank you for the question.

You can do it the way you stated earlier with

  1. may be include a little more visual cues like involving small icons for folders.
  2. Define the character limit with a separator of your choice - eg. '/' , '>' , '->' or anything else that shows the direction or the separation jump from one to another. If within those character limits then show full path else truncate the the middle path with dots '...'.

I will think of more and update it further.

Improve this answer

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.