I inherited a system in which users will be able to view the latest files added based on the departments they belong to. It allows the user to create filter/folders/smart tiles ( we will call it tiles ). These tiles are added horizontally as created. Please see the mock up below


download bmml source – Wireframes created with Balsamiq Mockups

However, the dilemma arises when the user creates more than 3 of these times.


download bmml source

How can I accommodate all the tiles without horizontal scroll?

I thought of the idea of overflow of tiles to another row, but then the selected folder and the files downstairs don't remain contextual.

I hope my question is clear , Thank you for your help

  • 1
    IT looks to me like you're going to need to implement some sort of scroll or limit the amount of tiles a user can create. You've ruled out a second line (quite rightly) so there's no where else to go. You could, however, look at compressed scrolling systems like Apple's 'Cover Flow' for example - That might allow you to 'see' all the tiles but would also allow you to stack more into the space. Commented Sep 14, 2016 at 19:13

1 Answer 1


Is this for a mobile environment (or perhaps a responsive one)? Horizontally scrolling elements or even nav items are becoming fairly common... reference Google's search on a phone-sized device:

enter image description here

Notice that the list of options below the search query itself is mid-scroll... there are about a dozen options, and the user is clued in to that fact by partial items and a subtle gradient effect on the right-hand edge. You could do something similar with your tiles.

Unless the tiles include images or more robust information that your wireframes indicate, however, it DOES seems as if you could also reduce their size to accommodate more before the scroll is necessary.

Obviously more information would be needed to properly comment - how many of these are your users likely to create? Three? Thirty? Do you have past behavior to reference, or can you talk to them and ask them about their use cases?

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.