Innovative browse/search/filter UI/UX patterns IDEAS

4 years ago from , UX/UI Digital Product Designer

I am currently designing a file management system for a client. Went with rather standard (real-world tested and proven) concept of having the main content space with file previews in either list or grid, a big search box on the top, left sidebar reserved for filters and right for selected file/folder activity history and details. Something of a mashup between Dropbox, GDrive and Box. Turns out, the client wants something more innovative (think in the likes of Pandora's music explorer, or Prezi for presentations, but not necessarily that direction). To keep it short - do you have any ideas how to innovate in the terms of browsing/exploring/searching and filtering through files and folders? Some different upload patterns? Ideas on what could significantly improve user experience while using GDrive or Dropbox?

Is there something that gets on your nerves every time you use those kinds of products?

Any feedback will be highly appreciated! Thanks in advance!


  • Will Loveland, 4 years ago

    I have designed a communications and documentation management platform in the past which used inline filtering within the search bar and a drop down assistant that guided the users through the various filter options. Similar in a sense to the slack search if you have used it before.

    Using text prompts such as 'in', 'after', 'before', 'has' followed by a qualifier key such as ':' or '+' then the users filter criteria. Very time efficient for power users.

    Obviously depends on the range of items you wish to filter by and how they are structured. But the client was looking for something innovative as well, seemed to make them happy...

    0 points
  • ahder junior, 4 years ago

    In my opinion, that will be based on how many navigations list are. If there are a lot of list, better to use left navigation like GDrive. But it's important to not leave the label. Label is important while so many icon in used because label present the meaning of the icon.

    How about filtering? I think, i won't use filter like Gdrive did, it's to complicated. Try filter section of this : http://prntscr.com/h7oj1o

    When you build a good filter, try to group similarity function.

    Related references, UX design based on research : https://www.nngroup.com/articles/search-navigation/https://www.nngroup.com/videos/icon-usability/https://www.goodui.org/ --> point 47

    0 points
  • Simone Simone , 4 years ago

    You can innovate in many ways in regards to the UI framework and small interaction moments, but I would be careful touching list and grid views (folders are a very strong mental model, which people are extremely familiar with).

    For example, you're forced in a left side nav only if you want to have expandable trees, but Dropbox's nav could be at the bottom of the screen since its just a bunch of links. Upload, download and share a link are all important moments that you can think about (Dropbox on web sucks at sharing a simple link for example). File preview is another one. Here's an example of a contextual file preview I did a while back: http://www.serioussituations.com/archive/img/salesforce_feed_020513_0010_feed-files-filter.png

    Overall, the latest Megaupload iteration was a good example of how to improve on product without disrupting its integrity. I'm sure you can still find some screenshots somewhere.

    0 points