Best Sign In Page Ux Features For Your Website
Ten excellent sign in page designs
1 - The Sliding Sign in / Sign up form
2 - Tabular Sign in / Sign up form
Continuing this theme, if you don’t like the sliding option, try the tab option. It’s a little more formal feeling which might suit a bank or an institutional website like a university for example.
Chris has created a very effective little form that is minimalist in style and easy to use. Not quite sure why he has three password fields on the sign-up form but the concept is strong.
If you’re using DID to authenticate, you don’t need to differentiate between sign in and sign up forms if you don’t want to. Simply ask the user to input their email address and DID will sign in an existing user or sign up a new one automatically. However, sometimes you need a separate sign up page to capture other information about the user or maybe ask them to accept some terms and conditions in which case, either the tabs or the sliding option is good user experience design for displaying both options.
3 - Animated Input Placeholders
Labels be gone! I just love animated input placeholders like these by Leonid Arestov. They stylishly move out the way of your typing when you’re ready to fill in the form. They say a design is finished when there is nothing left to take away. Well, Leonid Arestov has achieved that because the form has no unnecessary clutter like labels or tooltips. Everything you need to know is in the placeholder. Some placeholders disappear when you start typing which is ok but you might forget what you’re being asked to input. This solution combines good user experience with minimalist design and I love it.
4 - Stylish Design
Sometimes there’s just no substitute for style. Checkout ‘Login’ by Aryana Shakibaei. I don’t know what it is but I want in. The input spacing, invisible borders, cool grey, minimalist instructions and a single bright accent colour partner to create a sign in page that is very inviting. And to top it all, Aryana includes a natural, well lit photograph to reinforce the brand message for the underlying service. Where do I sign?!
5 - The Popup
A foolproof way to avoid disorientating your user is to sign them in right on the page they’re already looking at. Why navigate them away to some other page and leave the user frantically clicking ‘back’ to try to find what they were looking at in the first place?
Enter, the popup sign in. I particularly like this one by Vel Kumar. It’s quite a large pop up which gives space to do everything the sign in needs to do but it doesn’t completely fill the page. The designer also has the option as well to blur out the page content with CSS while the user signs in. This particular design also incorporates the sliding sign in / sign up form design so the user can choose between them.
6 - The Full Page Sign In
If you didn’t like the popup, try the full page instead. Block out all unwanted distractions and create a sense of space with the full page sign in. In this design by Mo’az Mohsen, there is ample white space around the form partnered with an attractive illustration and accent colour down the left hand side. I particularly like how the illustration escapes the background border to bring some life to the picture.
7 - Bright and Bold
So many site themes are subtle these days so now for the antidote - bright and bold sign in. I just love the purple and orange palette used for the buttons, there can be absolutely no doubt what you’re being asked to click on. I also like that the ‘forgot password’ link is large and obvious too.
So often, the ‘forgotten password link’ is hidden somewhere on the page only to be clicked if you really can’t remember. It feels like admitting you’ve forgotten is somehow shameful and the link you need is made small and feint like it’s an awkward necessity no one wants to admit we really need. Well, not where Chouaib Blgn is concerned.
Forgotten? No problem, here’s the link, you can’t miss it. Of course, if you’re using DID’s passwordless authentication then you don’t need a password input field or a password reset option either.
8 - Dark theme
Dark themes are so on trend right now because they can reduce eye strain and draw on your device battery and this is one of my absolute favourites. It’s dark but it’s so much more than that. Eva Del Casale has found a background purple that when laid over an image with a transparency has an ethereal feel to it. The little stars twinkle and also note how the password box lines up with the horizon perfectly. Very clever. The choice of peach as an accent colour really works for me. It’s bright and clear to see and works so well with that purple. This dark theme works really well and doesn’t just conform to the bog standard white on black.
9 - One Field at a time
Sometimes, three fields in a list can be daunting and we all know that sign in is off-putting generally for users. This is a good workaround, instead of displaying all three fields at once, Arul Manikandan only shows the field the user needs at the exact moment they need it.
If you’re using DID for your passwordless authentication you’ll already know that DID only ever has one field anyway - email and if the user has setup device authentication, signing in is faster than ever.
10 - Humour
Last but not least, try adding a little humour to the mix. Signing in is tedious so make it more human. Be happy!
More from DID
Building The Best Magic Link
Magic links are a passwordless solution that is gaining popularity. How do we apply best practises to using them in our applications.
Creating great authentication user experiences and why it matters
What makes for a great authentication user experience and what’s wrong with what we’ve got right now?
DID is an Identity Provider, that authenticates users by verifying access to either an email address or securely stored private key.