Sign Up and Sign In widget on every page: Slide-down Panel or Lightbox

Question

I have a question about implementing a sign up and sign in widget that works on any page on a site (i.e. without redirecting users to a sign in page when they want to log in to interact with content on the current page.) My planned approach is:

• Keep the regular HTML anchors to sign up and sign in pages in the href tag
• Using javascript, provide people who click "Sign In" or "Sign Up" a way to log in without leaving the page

I am planning to make it "slide-down" style: our header will stay in place, but just below it a panel will open with the Sign Up or Sign In form, providing tabs or links to switch between the two forms in the panel. (If the user clicks "sign up" somewhere lower down in the page, the user's browser will scroll to the panel position using a #fragment on the link, smoothing the scroll jump using js.)

However, most websites seem to do this "lightbox" style, in which the whole page is darkened and a box opens in the middle with the Sign Up and Sign In forms.

How would one think through this choice of a slide-down or lightbox for logging in? Which is better?

Answer 1

Its basically as per your need. But yaa if you're asking for suggestions, then personally I feel you should for a slide-down panel. This because if the site is been accessed by smartphone users or probably tablet users then slide-down will be a better option for the users. Where as lightbox would be a cumbersome thing for them to open and see.

Most of the design now are responsive. If you have not thought about it, please look into it and try and make your site responsive.

Checkout the following links:

printsonfly.com/sample/

and instamojo.com for slide down examples.

Answer 2

The lightbox (modal) approach is to create a greater focus on the form to prevent them from doing anything else but Sign in or Sign up while the modal is open.

Your questions seems to be more of style preference, which I'd say it really doesn't matter as long as the flow is considered with usability in mind. Make sure the form is navigable with keyboard, error states are considered and you will want to take into account server-side and client-side validation coordination. Slide-down or pop-up isn't necessarily as important as usability.

Answer 3

In this case is better to use a widget that slide down, so that the user can continue his task on the current page.

Lightbox are better in case you have to interrupt the user journey and redirect the user to a specific part of the website, for example a My Account section.