0

My fixed top navigation bar has five links of equal sizes: the three on the left go to content-related pages; the two on the right access user account functions. One link, "Register," opens up the user registration page. The other, "Login," however, produces a modal view in the horizontal center of the screen. This seems like maybe it is inconsistent because the other navigation links take you places, but the login link does not. However, I feel like I implemented this pattern subconsciously mimicking other sites I had already visited.

Do you think that one link opening a modal while the others navigate to a page feels "wrong?" And either way, can you suggest a better place to present the login link that that will somehow make it more obvious that a modal view is coming?

2 Answers 2

3

I have previously designed an interface which had the exact same header links. A basic wireframe of what I finalized upon is shown below

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The reason for the design of the login/signup link were:

  • A button indicates an action as opposed to link divs which are for navigation

  • A bright CTA colour and a unified button increases the likelihood of users actually clicking on it and logging in / registering

Clicking on the login/signup button opens the login modal window. if the user wants to register, a clicking on 'register here' opens the register modal window. The modal window for registering worked for our web app since we did not require large form filling at the time of registration. Apart from the necessary stuff, all the background details were being filled by the user as and when required only.

mockup

download bmml source

1
  • 2
    Thanks for the visuals, I should have included some in my question - and I agree the button makes more sense Commented May 31, 2014 at 12:04
1

It's easy to overthink these types of questions but in my experience we ux professionals are often the only people for whom this might jar.

I would suggests that your users would expect "something" to happen when they clicked LOGIN, and whatever that was, as long as it provided a clear, simple and recognisable login prompt, I doubt they'd have a problem understanding or completing the task.

Personally I'd run a few simple tests with it (or with a prototype of it) and see if people are confused. My guess is that they wouldn't be, as there's still a strong and clear correlation between them clicking the link and the modal window appearing...

Try a few simple guerrilla usability tests, across various devices if possible. Otherwise try running AB tests on the site if it's already live.

One other consideration: do the two links in the right have to have the same level of visual prominence as the rest of the navigation?

Also, there's a separate argument to be had around the validity of modal windows, but I'm not going to comment on that without seeing the specific instance you're designing. Sometimes they're bad, other times they work fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.