Published on | Prototyping: From UX to Front End — Medium Boluwatife Ben-Adeola

Now for full disclosure, this is more of a collection of already utilised strategies on designing login pages, than it is of new insights into how to do so. However, it is important to expose the motives behind most of the seemingly unintentional design approaches. As the saying goes; “There’s nothing new under the sun…”, but it isn’t much use if we don’t know what’s under the sun in the first place – or why its there. Ok that’s about enough justification for me writing an article on other people’s genius.

So the general message is that, the art (yes, its an art) of creating login/signup pages is not random! Or at least should not be, to get optimal results. It is a very important element to the entire experience of an application that should -must- be inline with the current objectives of the application as a whole.

I’ll be taking on a few of the factors that determine the layout of this page.

1 ) Platform of access : Website Or App?

Now the influence on this is based on a rather obvious reality; most users visiting the desktop version of your platform, are most likely new customers. These folks want to get a hang of what exactly you’re about before making the decision to use their time(and bandwidth) to download a the native app. This is kind of a rule of thumb, that an app is a loyalty tool; people download it when they’ve come to appreciate your service and want to enjoy all of the benefits an app has to offer like instant notifications and all. That said, it makes sense to assume MOST people coming to the app are returning users, and MOST people coming to the website for access are newbies. So what should this tell you about how to build the first page both of these groups see when they visit their respectively likely platforms? Let me give this its own paragraph so it has a lasting impression:

Build a sign-in-centric page for native apps and a sign-up-cerntric page for the desktop version!

The purpose of this is simply to please the majority of each both groups where they are most likely to be found.

A few examples of this rule at work, incase you’ve always missed it.

The red boxes are for allocated sign in space and the purple for allocated sign up space.

As you can see from the picture, there is an obvious preference for sign up against sign in terms of allocated space on each page.

Same color convention is applied here as with the previous image.

The exact opposite is the case for mobile apps of the same networks!

2 ) Size Of Network

This is for a case where you have both groups of returning and new users flocking equally to the same destination, usually the website. However, you may not have this equal influx of both groups at the same time. Meaning when you just roll your service out, you’ll definitely(hopefully) have a lot of new users, and not that many existing ones (beta testers and the dev team that built it.) So, who do you think it makes more sense to make provision for? New users of course, and how? Well this is another teaching moment here, so i’ll take my time spell it out again:

At the early stage of your platform create a sign-up-centric page!

As obvious as this may seem, a lot of designers(mostly developers) just put up the common template they’re used to seeing for landing pages, which is that of a sign in page. But the problem is, the only reason why you saw that app that gave you inspiration for what yours should look like is because the app already has a grown network! Thats why you’re on it in the first place! So we mostly don’t get to see what our favorite networks looked like when they were just growing and in need of numbers, like we are right now. So you’re not taking advice from the wrong people, just taking it at the wrong time. Perhaps if we went back in time with these platforms to see what they were like when they were where you are right now you’ll get an idea of what to do.

Well lucky for you, i happen to own a D’lorean(for those unfortunate enough to not have seen the movie, i’m talking about a time machine), and will do you the favour of taking you back in time with one of the best networks.

1 — 2008, 2 — 2009, 3 — 2012.

Okay, so yeah, it’s twitter.

#1–2008 — This was their first ever landing page, just rolling out with their new idea the sign in form is hardly decorated and sidelined(literally). But you see them focussing more on telling you what the new platfom is about, with a nicely colored call-to-action button telling you to sign up, and another red CTA button, telling you to watch a demo video about it. Not to much emphasis on the sign in yet because they know the focus right now is to get their first members. And for the few who have already joined? Well, they can figure out where the sign in form is.

#2–2009 — Okay, so they got some attention and a reasonable amount of members, and almost immediately(a year after launch) show some more consideration for the existing users, which are now a reasonable amount to give attention to UI features. But the sign up button still reigns supreme right in the middle, in the ever vibrant lemon green.

#3–2012 — Started from the bottom now we’re here! So they have a steady flow of new comers and a larger collection of existing users. How does this reflect on the landing page? By giving equal amount of attention to new and existing users. Why? Because the new users must always be catered for, but now the size of the existing user base is too large to ignore and not to take care of, ensuring its easy for all of them to continue to use the platform they have come to love!

So you see an issue can come about when a designer looking around for a good concept for a landing page of a new network stumbles across this twitter page and thinks to herself: “Genius! put sign in and sign up together! Let’s do that too”. But uh… NO! Because you’re not remotely where twitter is in terms of new-to-existing-user ratio, so you can’t adopt their methods. The lesson of this story? Okay another teaching moment! So the usual methods are in order:

Sometimes there is more wisdom for you looking into the past than the present when learning from a design.

3) The outliers

Of course we always have those guys that just can’t conform to a pattern that you discovered and make you look like you cracked the code of all UI/UX. No, they have to go ahead and break the rules and do their own thing. These include landing pages like Facebook, which despite an enormous exisitng user base, still give preference to new comers with the sign up space. And like our very own medium, which as a result of being in an early stage of user base growth, have even their native app with a sign- up-first design. But we can understand their approach though. So i guess they kind of conform to the user-base-size rule (#2).

Sign in taking less preference even in the mobile app

Alright then, so the final message is, don’t treat the sign in/sign up page like some bookkeeping procedural design that really deserves no thought to it, because every design decision, no matter how mundane, deserves intent and a purpose from you.Final words… Talk to other members of the team, listen to the strategy for the product as a whole and see how your design decisions can help achieve that all starting from the first, but usually overlooked friend of ours — the login page. Or sign up page, but i had to use just one for a more dramatic ending. 🙂

Getting the login page right was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Getting the login page right

Cool stuff, every week

More Articles