I have been asked to draw more attention to the top or main navigation. Home page here.

  • First question: How would you do that? (Boss suggested multi-color boxes.. bad idea to me)
  • Secondly: Drawing too much attention to nav will take away from goal... CTA!

Not sure how to do this and being forced to inject a rainbow seems bad.

  • I feel like the actual problem is too many colors and choices already. Removing and simplifying the overall page will help keep attention in the correct place. – redFOG Jan 15 '14 at 20:31
  • Are you referring to the navigation at the very top, or just to the right of the logo? – Nicholas Pappas Jan 15 '14 at 20:41
  • To the right of the logo. Larger squares. – redFOG Jan 15 '14 at 21:24

The site has an excess of visual noise and violates nearly every principle of visual design. There are too many issues to discuss, so I'll be brief:

  • Too many colours - more colours more problems; they help not conveying information and the eye is immediately attracted to some of them. You are not guiding the eye of the user through the site, instead you are sending them to all sorts of places.
  • Usage of icons - help no one; add visual noise; they are actually confusing and can serve as an example for the interference effect - what does a light bulb has to do with tech info?
  • What's behind the decision to add a clicking hand on some buttons - I have never seen anything like it. Nobody would be able to use any site but yours if people needed that indication. It adds visual noise and also confuse user to think that buttons without the hand are not clickable. Ditto for the 'open in another window' icon.
  • 3rd menu looks a bit like tabs.
  • Carousel animation is attention grabbing, too fast, and annoying. If you know a bit about user behaviour - users just want to get on with their task, they'll have little interest in photos of people standing in a building site.
  • Hard to distinguish the headings from content boxes - they have the same design.
  • What does the size of various elements signify? Why some boxes are big and others small?
  • Exclamation marks damage professional tone. Overall the site gives an impression of hard sale.

In short, get some graphic designer to redesign the site. There are too many issues at the moment. Sorry for the harsh review, but I reckon its for the best.

If you fancy, have a read Visual Thinking for Design, and have a look at the hugely important gestalt principles (perhaps checkout the first few hits on this google search.

  • You are a noble man awarding me with the right answer after such fierce criticism. In return, I've updated my answer with some references that might be useful. – Izhaki Jan 15 '14 at 22:36
  • I agree with you! Here is the problem, as I am the designer. The "boss" or "VP" in charge has all the "ideas" and I am forced to do things good or bad. lol. – redFOG Jan 15 '14 at 22:38
  • As you can see... I had to place 3 different times reference to project water types. Now they want more color on the top nav squares. I am going bonkers. I don't know how to argue this overstimulation anymore than I have. lol – redFOG Jan 15 '14 at 22:41
  • 1
    Just create a design you think is right, post it here for review, then bet £500 with your boss that your design will work better in multivariate user testing. – Izhaki Jan 15 '14 at 22:47
  • HAHA.. great idea, wish he was the type. I am in an industry with engineers and sales staff that are dinosaurs and relics when it comes to web/digital marketing. It's tough enough to sell automated email marketing. But I may just try that! – redFOG Jan 15 '14 at 22:49

You can validate your hierarchy assumptions by using Attention Maps. They are heatmap that shows where user will direct his/her attention and which elements are more visible.

The best way to generate Attention Maps for your design is by:

  • Conducting local eye-tracking studies with dedicated equipment like Tobii (accurate, pretty expensive, time-consuming)
  • Running remote eye-tracking sessions (less accurate, but affordable and quicker)
  • Using AI technology and predict where user will look based on historical data, like VisualEyes app (less accurate, affordable, and instant).

The logo is drawing all the attention and is also a bit disharmonious with respect to the remainder of the visual elements in the site. My suggestion would be to reduce the logo size a bit, introduce some space around the logo. Alternatively, move the logo to the dark box at the top, with "Home", "About us" etc.

Even better, change the logo.

  • I somewhat agree with you, but I am not the dev team and also, I am not at liberty to change their company logo by any means. lol. My task to to get more quotes. "Request a Quote" while supplying enough informative help to choose them. – redFOG Jan 15 '14 at 21:29

You could reuse the bright blue color of the "Clean Water Projects" in the top nav. I see 6 different colors used already and introducing an new color would not help in simplifying the page.

  • This is my issue. Too many colors already to start adding more color on the nav squares. – redFOG Jan 15 '14 at 21:31

Here are a few places that you could get inspiration from:


tuts+ main boxes

Note the multi-color boxes which match what your boss was wanting. Along with that, take a look at the Tutorials link on the main navigation bar:

tuts+ submenu

When you hover over its submenu items the background of each menu item changes to the color of the corresponding box on the page.

CSS Menu Maker : Blue Tabbed Menu

blue tabbed menu

This menu is similar to yours except that it's active page has an active lighter blue tab color. This could work very well in your scheme and be really easy to implement.

Dribbble : Horizontal Menu

horizontal menu

This is simliar to the Blue Tabbed Menu above, but this isn't a tab panel effect, it's simply an active item lighter background color. Also, very easy to implement.

  • I understand the color coordination per category. this is why we actually chose the 4 colors for the water type already. But even at the top of TUTS+ they have common color for all basic nav. Only the categories are color coded. I could see us color coding the four water types, but not all nav. – redFOG Jan 15 '14 at 21:32
  • Actually, Tutorials is highlighted b/c it's the active page. So basically, to draw the minimal attention you require, you need to distinguish between which nav link should be active and the rest inactive. Once you do that, like any of the solutions in my answer, you should be fine. I agree, the multi-color just for multi-color would be weird on your site. You just need a subtle active state for the page you're on. – Code Maverick Jan 15 '14 at 21:51

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.