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.
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.
After clicking login you are provided with a popup. Notice the autofill does not work on the popup.
If the width is 986px or greater then you can click the text "Login".
The "Login" text takes you to a private login page where autofill works successfully.
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.
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.
- no linked external libraries hosted on public CDNs
- no everything that isn't hosted from your own server/files