Navigation menu best‑practices for photography websites

Sadly just an afterthought for some photographers, the navigation menu is critical for the effectiveness of a photo website. Even though it takes up just a few pixels, it can truly make or break the site.

This is an important topic for all website owners out there and shouldn’t be taken lightly. My photography website report shows some interesting stats on nav menus used by popular photographers. Creating a weird navigation menu that disrupts browsing habits will lead to weak results. And the emphasis is on “habits”, as you’ll soon learn that familiarity plays a big role in how visitors browse and perceive your website and, in turn, your photography work.

PhotoShelter’s 2013 survey asked photo buyers about the most important elements of a photographer’s website. Easy navigation was their top answer:

This article will help you:

• simplify your site’s structure
• no longer confuse visitors (you’d be surprised…)
• implement navigation best-practices
• understand the reasons behind everything

While these recommendations might not apply to all possible photography styles and niches, I’ve tried my best to cover all best practices and provide clear tips & examples along the way.

Before we begin deconstructing navigation menus, let me briefly explain an important concept in web-design:

Intro: Familiarity

With people consuming a lot more content online these days, and at a much faster pace, their patience is stretched thin. Users expect certain patterns based on previous experiences, and something that goes against that only results in confusion or frustration.

Familiarity allows for easy mental processing, it makes a website easy to understand and use. Besides the quality of the content, familiarity is sometimes what prevents users from leaving the site.

“As a rule, people don’t like to puzzle over how to do things. If people who build a site don’t care enough to make things obvious, it can erode confidence”.
Steve Krug – “Don’t Make Me Think”

Other important user-experience factors will be mentioned throughout the article.

OK, let’s talk about your website’s navigation:

Part 1. Positioning the navigation menu

A. Placement

The golden rule is to place the menu at the top or on the left side of the website. With any other placement, you’re asking for trouble.

Top navigation is most common and usually consists of menu items placed in a horizontal layout, either below or to the right of the website logo.

Vertical menus, placed in a sidebar on the left of the site, are also popular, especially with photography portfolio websites.

This is not meant to be an argumentative comparison between the two types of menu positions, as both are widely used and popular. A few differences are worth noting though:

• Left navigation menus are usually “sticky” (they have a fixed position as you scroll down), but they make the content area more narrow.
• Top navigation menus take up important space at the top of the site, and force users to scroll. Some websites have sticky top menus too, more on that below.
• Dropdowns are harder to use in left-side menus.
• Left-side menu items usually have equal visual importance, whereas in top menus the first menu items attract more attention.

B. Consistency

The navigation menu, wherever you decide to place it, should be in the same position throughout the site. You’re “training” visitors to always expect to find it in the same spot and not hesitate to use it.

When reaching a separate/external part of your site (like an image archive or a blog), the menu items should be identical.

Finding a different menu can be confusing, and users are likely to leave the site. It comes down to familiarity again.
Here’s a no-so-good example. Notice how the header areas (and the navigation items) on the homepage and the blog area are different:

In the blog area, notice how the menu items are different:

And here’s a great example. Identical design & menu, on different platforms (PhotoShelter and WordPress in this case):

You’ll see that familiarity continues to play an important role as we explore other navigation best-practices for photography websites. Let’s get right to it!

Part 2. Choosing your words carefully

A. The words you use as menu items

When reaching a website, people instantly recognize familiar menu items.
Your site should, therefore, avoid using uncommon words in the navigation because they slow down users in taking a decision, and can hurt the site’s usability.

One of the most frequent mistakes is calling your Contact page something like “How to reach me/us”. Or linking to a Services page using “What we do”.

Inventing menu items just for the sake of “creativity” can backfire.
Using simple words always works best.

Examples of menu item word choices: 

Good: About, About Us, Bio
Bad: Info, Learn more, Experience, Skills, History, Company Info

Good: Contact, Contact Us
Bad: How to reach me/us, Get in touch, Send a message, How to contact, Email, Message, Give us a shout

Good: Blog, Articles, Journal
Bad: Latest, Recent, Posts

Good: Galleries, Photography, Portfolio
It depends: Images, Archive
Bad: Photos, Pictures, Pics, Snaps, Collections, Check us out, Showcase

There surely are exceptions to every rule, so take everything with a grain of salt. Whenever you deviate from the norm, make sure you have a good reason for doing so.

Keep clarity in mind: visitors should easily understand what they can expect from every menu item. 

B. Plural vs. singular

Be careful with using plural or singular words. If a page displays a grid of thumbnails of all your galleries, then, by all means, call it Galleries in the navigation, not Gallery.

Similarly, plural works well for: Videos, (Recent) Projects, Tearsheets, Workshops, Events, Prints, Stories, Photo Tours, etc.

On the other hand, use singular for collective or uncountable nouns: Archive, Blog, Shop, Fine Art, Multimedia, Search.

C. Menu items that people always expect

Just about every website has certain pages that are “expected” by visitors:

• Home
• About
• Contact

All the other ones are optional and depend on your specific goals for the site.

“Home” is optional too, but make sure people always have a way to get back to the homepage (usually by clicking on the logo). 

If visitors can’t quickly find the About or Contact pages, they often get frustrated and might leave the site. So if you’re feeling overly creative (by renaming “About” to “What we do”), you’re making things difficult for users, they now have to “decipher” your navigation to find what they’re looking for. Make About & Contact easy to find to ensure a positive browsing experience. 

While we’re on the topic, read my in-depth guides on improving your About and Contact pages.

Some of you might be wondering if it’s OK to not have “Contact” in the navigation if you’re already displaying contact information on the About page or in the site footer, or because you have too many items in your navigation. I don’t recommend sacrificing “Contact” in any of those scenarios, it’s one of the most important links to have in the main menu.

D. Try to use single-word menu items

Sometimes, you do need to use multiple words. A few examples come to mind:

• Fine Art
• Greeting Cards
• Photo Tours
• Client Area / My Account
• Light painting
• Advanced Search

Listing out specific gallery/portfolio names (common on portfolio sites) is also OK.

If you want to list blog categories in the navigation, place them in a dropdown menu under “Blog”. We’re referring here only to top-level menu items. 

Aside from these examples, multiple-word menu items have disadvantages:

• They occupy a lot of space (making horizontal navigation bars too long)
• They take longer to read & understand (and all those split seconds matter)
• They’re almost always unfamiliar (see the intro on the importance of familiarity)

So whenever possible, stick to single-word links in your navigation.

Part 3. The number of menu items

You’re probably sick of hearing that LESS IS MORE, so I’ll try to phrase it differently. 

It’s often said that people are usually able to keep only 5-7 items at a time in their short-term memory, so you should ideally keep the number of menu items as low as that. Having 8 or 9 menu items is a lot more than 7.

If you give users too many options, they might just choose none (or they choose one that’s of less importance in your website’s strategy). With an overwhelming navigation menu, website visitors usually don’t stay too long because of “decision fatigue”, the design doesn’t seem user-friendly to them.

Trimming down your navigation to 5-7 items requires discipline (because you might feel you can’t let go of some pages), but it will pay dividends in the long run.

Take a look at the following lengthy navigation examples (I’ve blurred their branding for privacy):

These photographers have since updated their menus, but, as you can see, they used to have 12, 11 and 10 menu items, respectively.

Wouldn’t you feel a bit confused when trying to browse their sites?

Here are some nice examples instead:

A lot better, right?

How do you decide which menu items to keep?

Great question. When you have a lot of content (or when you’ve grown your site incrementally over time), the natural tendency is to place new stuff in the navigation too, without removing anything. But it all then becomes too cluttered.

There are no quick “tips & tricks” here, you have to decide for yourself based on:

• your goals for the site
• promoting only your best and most recent content
• what main actions you want visitors to take
• avoiding confusion for first-time visitors, while still allowing easy access to repeat visitors

But if you feel you can’t reduce the number of menu items on your site, here are a few strategies you can use: 

1. Use dropdowns, which allow grouping related items together (although they’re sometimes annoying, more on this later in this article).

2. Remove the “Home” menu item altogether (but make sure your logo is clickable and links to the site’s homepage).

3. If you have an eCommerce area, replace “Cart” with a shopping cart icon, people know what it means.

4. Separate menu items into sections, maybe with different colors or font weights (because some are more important than others). If you figure out that some links are “primary” and some are “secondary”, you can group them separately to establish a visual hierarchy.

Here are some great examples of this from some of my past clients:

eCommerce-specific links are great candidates for such a secondary group. 

5. Another great trick is to only show secondary menu items inside those respective sections of your site (where they’re relevant):

Homepage:

Image archive:

Blog area:

Part 4. The order of menu items

The order of navigation links matters too! In horizontal menus, the first items (on the left) usually attract the most attention. The last menu item is also important. In vertical menus, attention is distributed more evenly.

The simple conclusion to follow is this: place your most important links at the beginning of the navigation, the least important in the middle, and “Contact” last.

“Contact” almost always sits last in the menu because that’s where people expect to find it (usually in the far right of a horizontal navigation menu or at the bottom of a vertical navigation menu).

If you have a “Home” (or “Homepage”) menu item, place it first. Otherwise, just start with your most important page/section! (Not sure which of your pages are the most important? Find out which of your site sections is bringing you more revenue/clients, or look at your Google Analytics reports).

Part 5. Menu dropdowns

You most likely know what dropdowns are and what they’re useful for (grouping related links into sets of secondary navigation links). 

You should try to have as few dropdowns as possible, because they are sometimes annoying to visitors and can be difficult to use on some (smaller) devices. If you can avoid them, great.

If, however, you do have too many links to place in your navigation (see above), grouping them using dropdowns is a good way to simplify a cluttered layout.

If you’re going to use them, take these tips into consideration:

A. Visually indicate dropdowns

Top-level menu items should have a small sign that it opens a dropdown on hover. Otherwise, visitors don’t know there’s a dropdown there (unless they accidentally hover over it). This is best accomplished with a downward-pointing arrow or triangle, or a plus sign.

B. Decide how the top-level menu item works

You basically have two options:

• They link directly to pages, as well as display the dropdown on hover
• They don’t link directly, they’re just there as the dropdown “opener”

If you go for the first option, then you also need to repeat that link as the first item in the dropdown (exact same word, or prefixing it with “All”). That’s because when people see dropdowns, they sometimes don’t expect to be able to click on the top-level link and simply skip it.

On vertical navigation menus (on the left side of the website), it’s common for main menu items to never link directly to a page, but instead to just expand the (dropdown) sub-menu items:

C. Try to keep dropdowns to one level (and never more than two levels)

Having more than two levels, makes it really hard to use: with all the hover functionality, visitors have to be really precise with their mouse.

Two levels are acceptable though (dropdown + sub-menus expanding to the right).

D. Make sure dropdowns display properly over content

Sometimes, dropdowns are shown “below” slideshows or other page elements. Test your dropdowns on content-heavy pages.

E. Dropdown links should have hover effects too

Discreet, but visible. Bonus points if the top-level menu item also gets highlighted when its dropdown is being used. 

Part 6. Design recommendations

I’ll keep this short and to the point:

• Use readable fonts (increase the font size to make sure menu items are readable on smaller devices too, and avoid using very thin fonts because they sometimes don’t display well on Windows browsers)
• Use plenty of space between menu items so they’re visually separated (especially if on of your menu items is made up of multiple words).
• Leave enough space above and below the navigation. You don’t want any link targets close to the navigation, let it breathe.
• Don’t place the navigation too close to the menu. They tend to fight for attention.
• Use a text color that contrasts well enough with the site background. If using a background image or texture, make menu items bold.
• Use consistent capitalization (all uppercase is common).

Here are some negative example (that break some of the recommendations above):

Part 7. Footer navigation

Websites with horizontal navigation (at the top of the site) often also have navigation links in the footer (on all pages throughout the site). But the footer links don’t necessarily have to be a repeat of the top navigation links.

Let me try to argue for this idea, in light of new browsing habits and web-design trends from the past few years:

• People already know they can find the navigation at the top, they almost never go to the footer looking for navigation links.
• On desktop browsers, modern themes display a “back to top” link for long pages
• On mobile devices, users can click on the title bar to scroll back up
• Some themes/templates have a “sticky” navigation (that remains on screen as users scroll down)

So if you no longer need to repeat your navigation, what else can you put in the footer?

• Contact information. Make it as easy as possible for people to get in touch.
• Social media icons. There actually is an “expectation” to find social links in site footers these days, so use that to your advantage.
• Subscribe links (email, RSS feed)
• Links to main pages. Not the whole menu, just a few of your most important site pages if you want to give visitors an extra incentive to browse there.
• Extra pages that didn’t make it into the top navigation but might still be useful.
• Terms and conditions / Privacy Policy / Usage Agreements etc.
• Private area links (My Account, Cart, Lightboxes, etc.)
• Copyright notice

Part 8. Mobile navigation

Navigation on small screens raises a few more design decisions (for mobile-friendly websites). Without all the screen real estate, specific navigation layouts have emerged with the rise of responsive themes/templates.

Depending on the complexity of your site’s header area, you can:

A. Still display the menu links in a simplified way

B. Use a “hamburger” button (that expands the menu when you click on it).

In both cases, it obviously becomes very important to keep the number of menu items to a minimum, and to try avoiding menu items whenever possible (see notes above).

Furthermore, tapping on mobile screens requires a larger target, so make sure menu items are spaced out appropriately. Also careful with how dropdowns are implemented, since there is no “hover” action on mobile devices.

If you want to learn more about optimizing mobile navigation menus, I’ve selected a few great articles for you to read: 

• Best practices for navigation on the mobile web
• 11 ways to improve the navigation on your mobile site
• 10 ‘Tried And Tested’ Practices For Smooth Navigation On Mobile Websites

Part 9. Final tips & best practices

A. Define your goals first

Working on your navigation should come after you’ve properly thought about your goals for the site, and what you want people to do there.

With the goals in mind, you build the site structure and the navigation to allow visitors to reach the desired destination in as few clicks as possible (your contact pages, your galleries, etc.)

B. The logo should always link back to the homepage

A common web-design pattern lately is to use the logo and a quick way to get back to a site’s homepage when you get “lost”. So make sure your logo is clickable and links to the front page.

This has a small benefit: it allows you to no longer have “Home” in the navigation menu, making it simpler.

C. Thoughts on sticky navigations

Fixed headers (“sticky navigations”) always get shown when you scroll down a page, they’re a nice new trend in web-design.

To get a better understanding, here’s an animated GIF preview of one in action:

The recommendation here would be to keep it as small as possible, so as not to take up too much vertical space. People on small laptop screens can have problems seeing your page content if your header always takes up a lot of space as they scroll down.

D. Social media / external links

When people see a menu item, they expect it to link to an internal page of the site. So having “Facebook” there as a link (looking like the rest of the menu items) is confusing. That means nothing like this:

People expect those menu items to link to pages on your site, not to point them externally.

The only way to include social media links in the header would be to have them as (recognizable) social media icons, and visually separated from the menu (maybe above or below the main navigation line).

It’s acceptable to sometimes link to an external blog of yours (or another portfolio site you have), but never link to other people’s websites in your main menu.

E. Search boxes in the header

If the search functionality is really important for your site, then, by all means, make it a prominent feature in your header area:

A more discreet option, and this ties into our topic of navigation, is to include a small search icon into the menu (usually to the far right).

Here’s an animated GIF of how such a search box could work:

But remember that a header search box will not solve a site’s navigation problems.

F. Indicate the current page

This one’s easy to understand: when glancing at the navigation, a user should know what page he/she is already on:

This is less important, but you get bonus points if that highlighted menu item (indicating the current page) is not longer an active link (so you don’t link to the current page).

G. Updating your navigation

Whenever you add or remove content from your site, be sure to also update your navigation accordingly. Too many times, photographers make structural changes to their site without also updating the main menu, so don’t make that mistake.

This is especially important for hybrid sites (integrating two different platforms, like WordPress and PhotoShelter): changes in one area need to also be made in the other area, so the navigation is consistent and up-to-date throughout the site.

Outro

So there you have it. This has been my entire list of recommendations for improving your photo website navigation.

Best practices do not apply to every possible context and website design. But if there’s one takeaway I want to leave you with, it’s this: simplify your site’s navigation menu as much as possible & avoid any possible confusion. Users browse based on past experiences, so this is not the place to be overly creative. Instead, just help users find your content in a quick & efficient way.

If you found this article useful or have any follow-up questions, use my contact form to leave me a quick message or leave a comment below.
– Alex