12

My current login page looks like this: Login page

I chose green and grey basically at random, and am wondering how to to represent them properly. The login button is the main action, since this screen will only display to users typing in a URL directly, which I think should mainly be existing users.

How can I show this?

closed as primarily opinion-based by Devin, Mayo, locationunknown, maxathousand, SteveD Jan 30 '17 at 11:37

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    There are two questions, if I understood correctly. Main one: How to represent a form to log-in and register in the same screen, what fields to hide, etc. Second one: How to denote one of the buttons over the other, and probably also, which to mark over the other. Did I misunderstood? – Alvaro Jan 26 '17 at 14:37
  • 1
    I've removed the 2nd part of this post. Quetsions posted here should only contain one question. – JonW Jan 26 '17 at 15:26
  • 3
    Note that for the question @JonW edited out: Depending on the confidentiality grade your users expect, revealing the existence of an account registered on a certain email address could be a breach of privacy. For example, if your website is an adult website catering to certain niche markets, your users probably expect that someone can't figure out the existence of their account based on what the website does when attempting to use their email to register a new account, login to the service, reset the password. – Nzall Jan 26 '17 at 21:53
  • 1
    @Nzall Confidentiality isn't so important for this, but shouldn't a user when trying to register be told if the email is in use? Or is it better to allow duplicate accounts with the same email address? – macleos Jan 26 '17 at 22:21
  • 2
    Also - black text on darkish green background is discouraged, as it doesn't adhere to WCAG standards (too little contrast) – junkfoodjunkie Jan 27 '17 at 10:57
25

The color of the login button should match the primary color of your style theme.

Apparently, you're using material design. If your theme, for example, uses blue (#2196F3) as a primary color, your primary action buttons should also be blue so they are contrasting the rest of the page and are easily distinguishable.

login page with blue colored log in button and colorless and borderless registration button

The "Register" button which is the secondary action in the page should be less prominent than the primary action, therefore not colored. You can view color style and button guidelines from google material design.

Google material design style guidelines for the buttons and their color

  • 3
    Very good reference on the color, it depends on the color scheme of the app +1. However, I am not that sure about mixing a Raised button and a Flat one. – Alvaro Jan 26 '17 at 14:53
  • 2
    @Alvaro Open the button guidelines page and read the section about persistent buttons. They advice the following: Do not use raised buttons within persistent button areas. – Kristiyan Lukanov Jan 26 '17 at 15:43
7

Your "call to action" doesn't have to be green, it just has to be consistent. Start with your design guide if you have one or create one if you don't and provide a consistent look and feel across you application/site.

  • 1
    +1 for this answer, additional information for @mnbvc you could use your main color of your app also as your primary CTA, such as airbnb, if you want to use green color which is good color that represents safety, secure, site that i know using the green color for their CTA is facebook. – Rob H. Yamin Jan 26 '17 at 15:56
  • 1
    @RobH. www.roh.org.uk uses green for CTA and red for theme – Nicholas Shanks Jan 26 '17 at 17:36
  • 1
    @NicholasShanks yeah thank you for adding some example, green also could represent "Go" which is we can see on traffic light (a conventional meaning to everyone). – Rob H. Yamin Jan 26 '17 at 17:59
6

Only very few actions are commonly associated with a specific color. These four "colors" (counting gray as a color for sake of simplicity in wording) are examples for those that can induce an understanding of what an UI element does just by the color:

  1. Red for ending: cancel (end the action), delete (end the existance), close (end the application/popup), hang up (end the call) to name the most common ones.
  2. Green for approval: accept call, confirm action.
  3. Blue font for hyperlinks
  4. Gray for a disabled state

For login or register, there are no common colors (at least as far as I know). So rather than trying to use the color to describe the action, just use the difference of colored vs. not colored, where the color should be the defining color of your theme.

In general, only color one "default" button per view. The default button is the one that people are usually going to use (in a psychological way, you could also argue it is the one you want the people to use).

For the login form, that would be "Login", since you register once but login every time. Hence, the color of the register button should be "none" (just a link or a white button, if you want to stick with a button), whereas the color of your login button is dependent on your "corporate design".

Aside from all that, I'd like to highlight one general aspect of coloring, especially since the "random" design you provided is the best example for it:

At all times, keep in mind that roughly 5% of any user group are color blind. For your example, those people would see two gray buttons.

2

Isn't the confusing thing that a new user wanting to register is being presented with a request for a non-existent password? Or is he being asked for a password that he will be registered with when he presses that button, in which case how does he know he has typed it correctly?

So I would have thought that the first thing the user sees should simply have two buttons LOGIN (to existing account) and REGISTER (as a new user). Having the bracketed texts on the screen near the buttons might also be useful. LOGIN will then simply ask for user-id and password, REGISTER for whatever else is wanted before you create a new user.

If it's a question of not wanting more than one round-trip to the server for efficiency reasons, just have the email and password fields hidden until the LOGIN button is clicked. Possibly likewise for REGISTER and its associated fields, if it's not a multi-screen registration process.

Alternatively present a LOGIN-only screen with an obviously-different "Not yet registered? Click here to create your free account" (or whatever) styled as an obvious hyperlink, not a button.

There's one other thing missing: "I've forgotten my password" (hyperlink)

After all that I'm not inclined to think that the colour of the buttons matters provided they aren't in the error - warning - alert spectrum of expectations (usually red through yellow). Personally I like blue. The overall colour theme of the site is relevant here.

1

In addition to @KristiyanLukanov answer, when the buttons are disabled don't use color.

  • Disabled: Buttons shouldn't have color if they are not enabled.

disabled buttons

  • Enabled: Both buttons can use the accent color or only one, if you want to emphasize it.

enabled buttons

Not the answer you're looking for? Browse other questions tagged or ask your own question.