Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

  1. create a window in a browser of fixed dimensions or psuedo-fixed dimensions (works a range)
  2. around the exterior of the window create a series of buttons that will filter the content in the middle.
    1. Sectors across the top (Technology -> Telecom)
    2. Regions down the right (Asia -> Aussie)
    3. Asset classes on the bottom (ETF -> Commodities), they don't fit
    4. Macro categories on the left (Political -> Pre IPO), they don't fit
  3. Each of these button filters the content in the middle of the box(the research article title and teaser)
  4. 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:

  1. 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?
  2. 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.
  3. 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?
  4. 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:

Mockup

And once expanded something like this (please ignore the light blue this is snapped from PPT):

enter image description here Disclaimer: I am an engineer by trade, and we don't have UX guy on staff (pre funded startup)/

share|improve this question
1  
"and we don't have UX guy on staff" = I think that's the bigger challenge--especially if you are a startup. Not to be harsh, it feels like an idea based on someone's idea of what the page should look like rather than how a user would actually want to interact with the tool. Step back and ask yourself "how does this benefit the user by adding a rainbow of buttons around the entire section of content"? –  DA01 Jan 29 at 0:04
add comment

5 Answers

My biggest concern with this approach is that, while you are offering all of the filtering options to the user at once, the visual cues needed to guide them in navigating those options, simply aren't strong enough. Even with all of the possible options being visible (and, arguably, because they are all visible), the user is really going to have to work to get a good feel for how the filtering options relate to each other individually (i.e, the differences between each filter), as well how they work together as a whole (i.e., all of the different ways that you can filter the content).

For example, the "Regions" group on the right, is, by far the easiest to recognize of the four groups . . . after a quick look, you get the idea that they represent some kind of set of geography-oriented options. But even with the the fairly consistent grouping, there are visual elements that actually cause you to question that assumption:

  1. There are few visual guides provided to help the user identify what the group represents and where, exactly, it starts and stops. Five of the six options ("Asia" through "Latin America", and "Australia"), all define geographical regions, but "Emerging Markets" is more of a conceptual region. As the user reads down the group (as we are trained to do), the "Emerging Markets" options breaks the geographic "pattern" that has started to form. Now they have to go back and re-read the other options to figure out how this new one fits in with them.
  2. The angled corners on the "Asia" and "Australia" options give a visual indication that that suggests that there is something special about those options, but there is no other information to determine what. Is there something unique about them? Do the represent that the group continues on "around the corner"? Why aren't the other corners ("Technology" and "Economics") angled as well?
  3. The choice of color flow through the entire group of options works against the boundaries of the "Region" subgroup. "Asia" is blue, while all of the other regions are in the "yellow to green" color range. "Australia" is green, but so are the "Asset Class" options that continue across the bottom of the page.

There is nothing inherently wrong with any of the designs that you've chosen to use (visual grouping, color grouping, etc.), but you need to be sure that they support the concepts that they want to get across, rather than fight them. Some examples of ways that you could do that are:

  1. Provide a label to each group, as well as a distinct break between it and the adjacent groups . . . something as simple as the plain text "Regions" (displayed vertically and to the right of the options, for example) and a thin black line to the left of the "Asia" and "Australia" options, would give the user a very clear idea of what that option group represents, rather than forcing them to figure it out on their own.
  2. Keep the presentation of the options consistent and intentional. If there is a difference in the way that one option is presented, it should be clear why. For example, if you like the angled corner options for visual reasons, make all four corners angled so it's clear that the difference is tied to the option simply being in the corner.
  3. If you like the idea of the "flowing colors" across the options, keep that, but use it to reinforce the option groups. You could give each group its own, unique color and make all of the options go from lighter to darker shades of that color. That would provide the "flow" that the current colors provide, but it would also make each group more distinct from its neighbors.

Summary The idea of wrapping the window in filters can certainly work . . . the ability to quickly know all of your filtering options, without having to investigate a series of drop-downs to find them (for example), actually has quite a bit of appeal. But, because you are providing so much information on the screen, in order for it to succeed, EVERY visual element must support the user in understanding and visually organizing it, or it will simply become too overwhelming and confusing to deal with.

On a side note, I would also recommend some form of "tutorial" to help people get used to the format. Even if you nail the UX, that is still a lot of information to process . . . a video of it in action or some initial tooltips or some other kind of step-by-step introduction, could go a long way in easing the users into an information-heavy interface like this.

share|improve this answer
add comment

Thanks for sharing. To be blunt this is a good example of why engineers tend to put together good examples.

You solution is pretty terrible as you're overloading the user with things to look at and throwing lots of options at the user. Users in the west start at the top left of the page and work down, this is the reason navigation tends to be either across the top or down the left of a page.

To come up with the right interface requires doing the right user experience work, which is so much more than UI. It's about understand what the business wants, what the user needs and how they carry out tasks.

share|improve this answer
    
Thank you for the welcoming comments. I think we can answer some of this as the founder was once employed in the same role as the end user. Essentially we want a way of pushing "personalized" content to the end user. Eventually we can determine some of that through usage patterns, but we really don't want them to have to work to find what they need. Day 1 - that represents a problem, which is what we are attempting to solve here "How do we deliver personalized content not knowing anything about the user" –  akaphenom Jan 27 at 14:39
1  
The answer is that is that all sites provide personalised content by people using the navigation. Personalisation is on of the most talked about but least used solutions to any web site. Requiring the user to put in work before being allowed to then try and find what they are after is a huge barrier to entry. I have worked on intranets that people use everyday and even then a 'widget' approach often is asked for by users and business but, in reality, is hardly used and gets in the way. –  Stewart Dean Jan 28 at 10:09
1  
@akaphenom while it can be a good thing if the founder came from that world, it can also backfire. My favorite example is Homer Simpson's car: simpsons.wikia.com/wiki/The_Homer If you let the customer design the product, that's often what you'll end up with. Rather than have them tell you what the UI should be, you want users to help you define the objectives they have, and the challenges they have getting to them. –  DA01 Jan 29 at 0:12
add comment

The question is large, I would really recommend back-to-basics UX work. However as you've made a genuine effort to isolate specific questions, I'll try be specifically helpful

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?

No. But that's not to say it is a good UI. e.g. the number of UI components that you have at an equal organisational level is above the rule-of-thumb maximum of 7 items

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 UX for stackoverflow is generally highly regarded. If it matches your needs then it should be safe enough.

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?

Yes. The overall overall structure of how you are presenting the entities of the users domain seems inconsistent. One can't just throw in independent bits of good UI and end up with coherent good UX. Need an overall vision.

Does the first wireframe complicate the UX, limit the appearance of the amount of articles we have (~25 a day total - not per BOX)?

Not clear on question here. (But I take it that you are not a fan of the UI as outlined. I would strongly suggest there is a better UI solution.)

HTH

share|improve this answer
    
There is something that rubs me wrong about surrounding the viewport with buttons to filter. I have worked with folks who have used monitors tilted the long way, browsers expanded. I don't know how that works in that scenario. Also if the use case is "Personalized" content I don't think showing every category is personalizing the content. That said if I am told the filters around the outside is a good UX by some experts on UX then I will embrace it, because "what do I know, I am just an idiot engineer" :) –  akaphenom Jan 27 at 15:59
    
@akaphenom Many web pages have a header, footer, left nav bar and right side bar and yet still enough space for their content. If each of you four filter axes is represented neatly then it should not in and of itself be a deciding factor. However do expect it to complicate scrolling. While I'd have large reservations about the UI I have seen –  Jayfang Jan 27 at 17:03
    
... just that the four axes of filter is not in and of itself a killer. In case of vertical monitor orientation it will have more articles visible, but descriptive text would wrap more? Layout should re-flow? Think also of Google Maps and some games as examples of where controls are distributed around the outside of the context. –  Jayfang Jan 27 at 17:18
add comment

A couple of suggestions. First, do not rely on color as many people are color blind and it also is such a strong visual variable that it can override your main content area.

Second, keep your navigation/filters in one area so users can learn where things are much more quickly and without having to move their eyes across the full size of the screen. Only a 2 degree arc of vision is in focus so using all 4 edges actually makes a user move their eyes all over the screen and can wear them out.

Third, use some basic iconography to help reinforce your groupings but keep their labels. These icon hints are then easily remembered on subsequent visits and interpreted much more quickly than reading full words.

Lastly, you mentioned you have the issue of new users and not knowing much about them. You have to have a lot of data points for a bayesian algorithm to really give you good guesses about their interests anyway, so I wouldn't depend on that as a primary way of exposing users to content. Use tags of the content they are looking at to find similar content and then possibly include an automatic filter based on how popular that content is to bubble most relevant info to the top.

share|improve this answer
add comment

I'd suggest reading up on faceted search and the UI's used to implement it. While your product might not fit that exactly, I do feel that your two levels of filtering (the rainbow options combined with the lozenge tabs) is pretty close to that.

And if you've ever gone online shopping, nearly all of the major large retailers use some form of a faceted search UI, so you gain some familiarity points with that.

Is there a guideline or best practice that is being violated by essentially limiting the viewable area size

In that content is probably the key part of what the user is after here, yes, restricting that area is not ideal.

Is there a best practice for browsing and searching tagged content?

See previous comment on faceted search. Also, just browser UIs that offer browsing by tags. There are plenty out there. But also note that tags, in general, are meta to the core functionality. They're rarely the primary means of navigating content. Perhaps relying solely on tags isn't ideal in this case.

Is this confusing or contradictory in nature?

Having two very different UIs that accomplish relatively the same task could be confusing. It would obviously depend on the details, and you'd want to test. My hunch, however, is that you should be able to design a solution that accommodates both objectives with the same UI.

Does the first wireframe complicate the UX, limit the appearance of the amount of articles we have (~25 a day total - not per BOX)?

Ah, so it's a story filter more than anything? I'm going to go back to my earlier comment about tags being meta and perhaps a form of ancillary navigation. I think you need to rethink the IA a bit from the top down. Do you really need 30+ discreet topics? Or could these 25 articles each day be grouped in to larger buckets that are navigable in a much different way? The tags could still be there, but as a bonus...not the primary means of navigation.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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