3

Product : Universal file holder for a large enterprise

Situation : Navigation side bar with unnecessary file details

The files are tagged so they can be filtered. However, we already have those as filter options. The picture below shows how the tags eat up a lot of vertical space. enter image description here

The stakeholders are unsure about their importance right now. And to be honest, user testing suggests that they are in a kind of blind spot, so I would like to hide them to begin with. So, hiding them under an info icon does not seem to be an outrageous idea.

enter image description here

However, now I'm unsure about the interaction. Should I show and hide at the exact spot? They could show up on hover on desktop (Desktop view below) but how would I show them on mobile?

12
  • What happens when the user clicks on the arrow? What happens when the user clicks on "...more"? What happens if the user taps the title/whole area of the file? Can you show the clickable regions? Jun 13, 2016 at 2:00
  • Thanks to Apple, you can now do the Hover mechanism using 3D touch on iPhone devices. I think for your example, this might be the perfect use-case to use 3D touch for more info. apple.com/in/iphone-6s/3d-touch Jun 13, 2016 at 3:56
  • @BernardoDoré the arrow is share icon which will open a modal view to search for a user and then share with him. Clicking on more shows the description online. The file will open if you click on the entire file..
    – Nodnin
    Jun 13, 2016 at 11:28
  • I'd like to know what will be the correct way to hide the tags. What should be the interaction there ?
    – Nodnin
    Jun 13, 2016 at 15:06
  • 1
    If there is no interaction in the tags I'd show them after the user clicks on "more". The "i" icon gives too much importance imho. You can also use the "i" icon and put everything in there, the description and the tags. This will save you some more vertical space. Jun 13, 2016 at 15:48

2 Answers 2

1

Like mentioned previously, the info tag is misleading. However, I think you were close to your solution with the "...more" option. This option could not only reveal the rest of the description, but also the tags. Like follows:

Default View

Step 1

Detailed View (after tapping "...more")

Step 2

Also, "...more" could be replaced with "Details" or something similar.

0

The "i" icon is not referencing tags. It might be better to use the word "tag" (doesn't take much more space then i but has a clear function) to show/hide the tags.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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