I am designing a new website, and am thinking about the UX for accessing a personal account page. Is it "better" to have a standalone login page (and then redirects to My Account details), or a Javascript popup which is on top of the My Account page? In the first situation, the interface will be "cleaner" (less potential clutter appearing to the user), but in the second scenario, it might appear like a faster, more streamlined UX. Are these correct observations? Any other reasons pro/con to consider one over the other?

  • So users can already be on the My Account page before they need to login? – Izhaki Apr 28 '15 at 22:45
  • @Izhaki only if navigating there initially. If they are not logged in, then the JS popup should appear, or they should be auto-redirected to a login page. – Conrad Apr 29 '15 at 13:02

Often times you need both.

The pop up sign in (or a drop in panel) is the smoothest experience for most use cases. It allows users to sign in without leaving their current path.

But you will also run into cases where you need to land users on a sign in page. In my experience, this should be the exception, not the standard.

One example of the exception path:
The user follows an inbound link to a registered user function (via an email, bookmark, help link, etc). If they don't already have a session cookie set, you'll want to land them on an intercept sign in page. Be sure to open with a brief but helpful message explaining the interruption.

  • Can you talk about scenario(s) where you have seen the exceptions happen? I am not coming up with any off the top of my head. – Conrad Apr 28 '15 at 22:11
  • @Conrad I added the most common scenario I've run into. – plainclothes Apr 28 '15 at 22:28
  • +1 Also, another reason is if the browser disables javascript, a page redirect is often necessary as a fall-back. – tohster Apr 28 '15 at 22:44
  • Yeah, there's a handful of good, undesirable reasons to have that alternate path ready (^‿-) – plainclothes Apr 28 '15 at 23:04
  • 1
    @Conrad At this point, if you don't like js the web doesn't want you! – plainclothes Apr 30 '15 at 1:47

I agree that both are beneficial, but a separate login page is essential.

The reasons for having a login page on it's own page shouldn't just be to "declutter" but rather it should be decoupled in the case where a "users" primary task(s) have to do with logging in. I think the pop-up works but should be carefully considered, if the login is "in the way" of what the "user" is attempting to accomplish, I can see why the popup is better.

Pairing social understanding

In some of my past social research (primarily United Kingdom/United States) some groups have learned through experience and second hand experience (socially and culturally) that popups are not to be trusted.

Some first hand "users" experienced popups as "unstable", unforgiving, demeaning, and "fragile".

  • Unstable: they leave (especially on mobile) if you accidentally press around it unlike the regular space.
  • Unforgiving: "If I get something wrong, It doesn't come back or wanna help me"
    • as a social scientist this was fascinating for me.
  • Fragile: Since it isn't a real screen I may not have the url to go back to and it may not save anything.

I also recall that auth helper apps including web browsers, ones that keep password data rely on "urls" to autofill data. I recall one of these usability tests where a user attempted to login to MediaTemple (mediatemple.net), which features a "responsive" break point which somehow points , but they had to navigate to the login page . The browser's login did not autofill the initial popup form,

If the width is 985px or smaller then you are given a hamburger menu.

Mediatemple home page 985 plus

After clicking login you are provided with a popup. Notice the autofill does not work on the popup.

MediaTemple login popup

If the width is 986px or greater then you can click the text "Login".

enter image description here

The "Login" text takes you to a private login page where autofill works successfully.

enter image description here

When the user reflected on this, they noted how they used an in-browser password generator, which means that certain users may not ever become familiar with their password. In this case the "user" increased the browser width and clicked login to avoid having to reset their password.

Some sensorial research reveals that digital user interface objects like "pop-ups" have perceived "weight" just as material does. Some of these same "users" translate "pop-ups" as being "cheap", "not-so-safe (for my data)", "light"(could be positive).

The idea here is that while materials can be directly touched, digital user interface objects inherit our understanding of "material". When we figure out that the material glass is fragile, the result is our embodied and thoughtful action around glass becomes careful and strategic. Whether we watch a glass vase shatter into a million pieces, mum and dad insisting we never touch or sit on the glass table, and/or learning the "atomic" structure, serve to teach us how to deal with such a material. The issue with this learned "definiteness" is that it will probably be tougher for people to be immediately ok with standing or jumping on glass or begin believing that it can also stop a bullet.

Whether it's glass or "pop-ups", objects have a history that social groups see and experience differently. Pop-ups may be remembered as being obtrusive web adverts or virus carriers (you won a prize) to being the cause behind the flush of pop-up blocker plugins, this understanding will provide/influence certain "users" with how they understand and engage with your designed solution.

So the goal may be to understand what's already there for "users" and their understanding of "pop-ups" beyond formal rules of cognition or bias.

If you should choose to use pop-ups I believe that the decision should consider looking at how your "users" experience certain components beyond analysing the differences in speed, but also to look at how different groups "understand" components and it's historical context and incorporate this understanding into your design. That may mean building a pop-up form that gives a sense of security and responsiveness or not using them at all.

  • The autofill of usernames/passwords is an important reminder. I use LastPass, and unsurprisingly really dislike it when it won't work on a site. – Conrad Apr 30 '15 at 2:27

How user could go into a page with out log in to ?

I have never seen any major website use pop up for log in ; i think one of main reasons ; it's not accessible. but if are looking to find a solution that user don't leave the page , you could go for drop panel .


What about XSS - cross-site scripting?

Due to security reasons, it is advisable to implement stand-alone plain html login pages (as well as other sensitive pages) with as few external dependencies as possible.

In the current meta of rich javascript applications, that means to actually exclude the login page out from the application and:

  • no linked external libraries hosted on public CDNs
  • no javascript module dependencies from NPM or others
  • no everything that isn't hosted from your own server/files

link: A comprehensive tutorial on cross-site scripting
hackernoon: I’m harvesting credit card numbers and passwords from your site. Here’s how.

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.