2

After selecting data and filters to narrow it down, the user is taken to a 2nd level of the navigation where he is presented with content displayed in a table like in the following image:

Screenshot of the table display

Each row links to a 3rd level of navigation that displays the expanded results. Each row links to its own set of results (e.g. "Type A", "Type B", etc.). However, you can click on the title of each section to access a 3rd level of navigation that contains ALL the expanded results (regardless of their "type").

I am looking for a way to have the user intuitively know that the section title is, in fact, a link (and a very important one).

I would like to avoid adding new elements (arrows, icons, and so on), wait for a user action to indicate it (tooltips) or change too much of the current styling.

  • Without changing styling or adding new elements this is like asking someone to escape from jail without moving. You may want to reconsider whether styling is more important to you (or your client) than usability,and then consider relaxing the constraints – tohster Mar 5 '15 at 15:44
  • If you consider it impossible to do, I would love to hear your input or suggestions. As I stated originally this is a preference, and the mere act of asking I believe indicates the will to improve usability. That being said, the solution I'm looking for is a balance between usability and the least intrusiveness. Thank you! – Johnny Kutnowski Mar 5 '15 at 16:09
  • Johnny, that helps, thanks. Some questions: (a) when you click on a row, does the 3rd-level navigation expand downward (accordion style), slide in as a panel, or take you to a different page?; (b) when you click on the section title does expand down, slide in a panel, or take you to a different page? – tohster Mar 5 '15 at 17:17
  • Everything opens in a new page. There are technical reasons for that as well as usability, but mainly the results in the 3rd-level navigation appear in a card view (like Pinterest) with one card per item. Since we usually display +30 items, I think it makes more sense to load a new isolated page. – Johnny Kutnowski Mar 5 '15 at 17:28
1

If it links to another page, why not use the standard link analogy? The convention is well known for users. Otherwise a small symbol next to the row title in Tohster's solution would also work.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

|improve this answer|||||
  • Actually I like your answer more than mine :-) I've been working too much with mobile stuff where the blue underlined link isn't as common – tohster Mar 5 '15 at 18:56
  • 1
    +1 if you standardize the link styles across all levels. A common link style should be a good indicator. – Poyi Mar 5 '15 at 19:07
  • Though it's a given for the different rows, this doesn't really address what I originally asked which is how do you indicate that the title is, as well, a link. Body text link styling is already introduced and known to the user, but it's not a norm across the website to have a linked section title. – Johnny Kutnowski Mar 5 '15 at 20:35
  • @JohnnyKutnowski What's the current style of your site? If there's a consistent styling for your body text links, you should be able to carry it back up into titles without an issue. – nightning Mar 5 '15 at 20:49
0

I think it's hard to solve this problem without changing styling or adding elements.

However, you may be able to indicate the navigation in a way that minimizes the impact on styling.

  • The basic issue here is, the section titles and row headers are perceived as passive because they almost always are.
  • Therefore, you will need some kind of indicator to show that they are clickable.
  • Color is not a great way to do this, because nowadays color is used for all kinds of active and passive elements.
  • An icon works, but you have to find a way to minimize the visual presence of the icon so as not to disturb the style too much. You would also want the icon to be communicative (so there is some indication of what clicking does).

Here are two approaches that use a magnifying glass (more communicative, but also more intrusive) and ellipses (less communicative but less intrusive):

enter image description here

Hope that helps

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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