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.

Improve this question
4
  • 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, 2015 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, 2015 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, 2015 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, 2015 at 17:28

2 Answers 2

Reset to default
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
4
  • 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, 2015 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, 2015 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, 2015 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, 2015 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 and acknowledge that you have read and understand our privacy policy and code of conduct.

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