3

When it comes to designing the header of a website, it is very common to have something like this:

https://designerlymethods.files.wordpress.com/2013/07/optimizely_loggedout-3-nav.png

Here we have a:

  • [LEFT] Logo
  • [RIGHT] Main navigation menu
  • [TOP RIGHT] Signup and Login links

However it's still not that unusual to find websites like this, where the Login/Signup area is just on the right, after the main navigation links.

http://positionly.com/blog/wp-content/uploads/2014/04/homepage-designed-for-conversions.png
(source: positionly.com)

(Note: forget about the signup form in the home page; I'm just talking about the navigation menu on the top bar)

While the second example from Shopify is making some efforts to highlight the different purposes of those areas by using a darker/lighter color, I don't really understand whether these two approaches are just a matter of preference or there's an evolution process between the two.

Also what do you think are the best practices to follow when designing a header and having to display a main navigation menu and the Signup/Login call to actions?

5

Question: should login/signup appear before or after the navbar?

(question clarified by OP)

In short: If it's in that top right corner, then it doesn't matter very much.
Here's why:

  • Top-right consoles are rarely perceived by users, because the F-Pattern shows that users rarely scan that corner unless they are specifically looking for something.

  • Therefore, if you want to draw user attention to signup/login, then consider another more visible placement or more eye-catching cues (bright colors, large buttons, etc) to accomplish this.

  • If you don't need to draw user attention to signup/login, then I think you can safely optimize for other UX goals like grid layout and simplicity.

Generally, the way I've seen this decision play out:

  1. If the nav bar is short (e.g. Shopify) then signup/login is placed inline with the nav bar because it results in clearer and simpler grid alignment and reduces onscreen clutter.

  2. If the nav bar is long (e.g. Optimizely), then signup/login is placed in another location (where it can be de-emphasized) because designers want to avoid wrapping the nav bar for responsive layouts.

Usually #1 is preferred over #2, but constraints sometimes make it impractical.

Hope that helps (this time round)


Question: Optimizely vs Shopify signup layout?

(original answer)

There is no best practice here.

The best approach depends on what your UX goals are.

For the Shopify website, the main call to action on the page is the sign up form at the bottom. The black callout, green button and blue outlined and focused text box all draw the eye to the sign up form. So it's likely that sign ups are one of (or the) priority goals for their home page.

For the Optimizely website, you've shown only the navbar and not the full page so it's hard to tell whether there is a call to action.... But irrespective, the sign up seems clearly not to be the principal focus of the page so they may have other UX goals such as educating the user to the product, or providing a guided path to a sales call rather than a sign up.

For your site I'd suggest figuring out what's important to you before determining sign up placement. Placement comes at a cost, so if you're tempted to use the Shopify layout to encourage sign ups remember that it comes at the cost of using that valuable real estate to accomplish some other UX goal.

Hope that helps

| improve this answer | |
  • Oh, I'm sorry I didn't specified that: I was still referring to the navigation menu; I didn't even notice it was asking you to register on the bottom area :P. – XCore Mar 9 '15 at 19:54
  • Hahah yep indeed :) | However, you're saying that, still, moving the login/signup area from after the main menu to the top right, is still a matter of design choice, rather than a UX improvement? – XCore Mar 9 '15 at 20:01
  • :O oh okay, thanks :) What I mean is that, shouldn't there be the a clear distinction between the two items (navigation and login/signup)? And therefore, the clearer the distinction (color, position, size,...) , the better? – XCore Mar 9 '15 at 20:05
2

This is a "it depends on the complexity" type of question.

At the end of the day, you want to dedicate just enough real estate for your persistent navigation that is easy for your users to understand. Any more will take away space from your primary content, any less will be too confusing to use.

For a site with a relatively simple navigational structure (e.g. Shopify). You can get away with a single bar nav and use only use color and the divider bar to denote different grouping of items.

For a site with more complexity, subdividing it into 2 bars provides clearer grouping of like items. Optimizely considers new feature notification as important to have at the top. So it makes sense to have 2 sections. Since you have 2 sections already, it naturally make sense to divide your links more clearly using space instead of the divider & color.

Let's look at another example. Suppose your top navigation also includes search besides links and login. There's now far too much to fit into 1 bar. You'll naturally break it up into 2.

| improve this answer | |

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.