We are debating the next wave of design for our application. We are a company that works in the world of institutional finance and our product is around presenting research. One idea that has come up is to
- create a window in a browser of fixed dimensions or psuedo-fixed dimensions (works a range)
- around the exterior of the window create a series of buttons that will filter the content in the middle.
- Sectors across the top (Technology -> Telecom)
- Regions down the right (Asia -> Aussie)
- Asset classes on the bottom (ETF -> Commodities), they don't fit
- Macro categories on the left (Political -> Pre IPO), they don't fit
- Each of these button filters the content in the middle of the box(the research article title and teaser)
- the arrow pointing up and to the right is a placeholder for a trigger that will remove the surrounding category buttons and expand the content to the full page, adding a toolbar on the top (searching) and clickable tags down the right showing the categories that are either favorites or trending.
I guess the questions would be along the lines of:
- Is there a guideline or best practice that is being violated by essentially limiting the viewable area size by surrounding it by buttons and having a scrollable area with in there?
- Is there a best practice for browsing and searching tagged content? The second screen shot is inspired by stackoverflow and their favorites and trending tags. This is the view once the user "expands" from the first wireframe. We needed to a concept of a watchlist (named groups of tags), as that is fairly common in financial services.
- The boxes around the outside wire-frame essentially trigger a filter on the article content. This is the same functionality of the tags on the expanded view - but we only show favorite OR hottest trending tags - bot the entire set. Is this confusing or contradictory in nature?
- Does the first wireframe complicate the UX, limit the appearance of the amount of articles we have (~25 a day total - not per BOX)?
I think having the boxes across the bottom limits the impact of a users ability to choose a monitor and orientation that works for them, it we are placing a constraint on their display for usage on our site. OR not allowing the browser to optimize the display.
We intend for this to work in modern (IE > 8/9) browsers and iPad2,3/Safari browsers.
Please help (thank you).
Wireframe of the design:
And once expanded something like this (please ignore the light blue this is snapped from PPT):
Disclaimer: I am an engineer by trade, and we don't have UX guy on staff (pre funded startup)/