1

My client publishes 7 industry directories. The website has pages that are common to all of them such as the product page which explains the different formats. It then has a section for each industry.

There's a sidebar on every page of the site that contains a menu with links to the industry sections. The client updates their own text (using Adobe Contribute) and I am seeing an increasing number of phrases similar to "Click on an industry directory link on the top left to...".

Aside from the fact that that is really bad for accessibility, it feels wrong to me to tell the user to go somewhere else on the page and click the link there. But it would be ugly and not very maintainable to duplicate the list of links in context every time.

The Problem (in my mind)

  • the "click on ..." phrase is too wordy
  • depending on device, links may not be located on the left or the top
  • it's confusing or completely inaccessible to screen readers, keyboard users, mobile/tablet users
  • the fact that someone thinks the explanation is needed illustrates a flaw
  • the choices can't be added directly in context because of space issues, redundancy, and maintainability (the list of industries changes fairly often)

Screenshot
Here's a screenshot of a mock up. There are two places on this page, indicated by the red arrows, that direct the user to use the links on the left. All the pages in the top and bottom menus are for generic pages. The industry pages include some deeper links in context.

Screenshot

Question

What's the best way to direct the user from a generic page to an industry-specific page without repeating the choices in context?


2
  • @toxalot would u mind to visit nikon.com ? see, how the design is channeling an individual visitor to individual division's site as per his interest e.g. camera / optics/ precision electronics. This is a great approach, IMO, if it matches ur context.
    – kmonsoor
    Nov 9, 2013 at 23:09
  • @kmonsoor The approach used by Nikon would require a complete redesign/restructure which isn't an option at the moment. And it doesn't address the issue of how to refer to an industry-specific link in context on a generic page.
    – toxalot
    Nov 9, 2013 at 23:29

3 Answers 3

7

Problem

I think the current design is so problematic, that your client feels it intuitively and tries to force users to pay attention to directories which are in the side navigation block.

Indeed, users' attention is far from side navigation, see attention flow on the image.
enter image description here
.
The flow is rather hypothetical, but has some scientific background.
.
.
.

There are so many distractors, that even textual calls like Click on... have no effect, see image below.
enter image description here
.

Solution

As you write in comments, the complete redesign is not possible now, then you could use quick and dirty fix for the issue. The idea is to minimize distractors and make the directories as main content of the page.
enter image description here

3
  • +1 Nice visual. Did you use a tool to determine the attention flow or was that done manually based on knowledge/experience?
    – toxalot
    Nov 10, 2013 at 23:18
  • I don't think swapping the blocks will work well with the rest of the site, but I will be suggesting several changes to the client based on a combination of your ideas and mine.
    – toxalot
    Nov 10, 2013 at 23:20
  • @toxalot The flow is based on heuristics. The main idea of quick changes is to remove user attention distractors and give more focus to target area with space and visual cues. Nov 11, 2013 at 8:43
0

It feels like the text is intended to help the user navigating the site, like a hint on the first time she access the page.

If that is the case, you could use a tooltip speech bubble to display the text "Click here to..." pointing to the sidebar.

2
  • Do you mean something that would automatically display on page load, or on hover?
    – toxalot
    Nov 9, 2013 at 22:18
  • I meant on page load. But, after you updated with a mockup, the idea of a speech bubble no longer makes that much sense... Sometimes people are just redundant. Did you ask the customer why she included that message? Perhaps you could just ask customers to avoid putting those messages. Also, regarding the ad area, if you want to draw attention to something specific, make it display what is the section and be clickable. Nov 10, 2013 at 1:10
0

Here's what I ended up doing.

Problem: the "click on ..." phrase is too wordy
Solution: change the wording to "select an industry"

Problem: links may not be located on the left or the top
Solution: change left/top to sidebar which is a more layout-independent word

Problem: it's confusing or completely inaccessible
Solution 1: add a new landing page that lists all the industries and link to that
Solution 2: use a fragment identifier to link to the sidebar, highlight the industry links when sidebar link is activated

Solution 1 requires an additional page which is not desirable since maintainability is a concern. Solution 2 uses the existing links.

Solution 2 Example

This solves the problems mentioned above and directs the user from a generic page to an industry-specific page without repeating the choices in context. It doesn't address the issue that there may be a design flaw causing this explanation to be needed at all. However, it's a simple fix and I think it's user-friendly for all types of users.

HTML

Select an industry from the <a href="#industries">sidebar</a> to...

CSS

#industries:target {
    /* change the colors, add a drop shadow,
       or other CSS that increases visibility of this section */
}

Notes

  • The :target pseudo-class is not supported on IE < 9.
  • CSS transitions could be used to enhance the changes.
1
  • This is the accepted answer because it addresses the primary issue of how to direct the user from a generic page to an industry-specific page without repeating the choices in context.
    – toxalot
    Nov 10, 2013 at 23:21

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.