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.

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?


share|improve this question
    
@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 '13 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 '13 at 23:29

3 Answers 3

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

share|improve this answer
    
+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 '13 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 '13 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. –  Alexey Kolchenko Nov 11 '13 at 8:43

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.

share|improve this answer
    
Do you mean something that would automatically display on page load, or on hover? –  toxalot Nov 9 '13 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. –  Luiz Vieira Nov 10 '13 at 1:10
up vote 0 down vote accepted

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.
share|improve this answer
    
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 '13 at 23:21

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.