3

I need two login screens, one for the Customer and one for the Administrator. Both screen has the same branding. The only differentiate factor I am showing is a Admin icon with Star and Customer Icon without star.

As per UX standards any other way we can depict this?

7
  • 1
    In the login Screens : Is it a good idea to give in the textfield default Administrator Username Text.... and Customer Username grey out text Jan 20, 2016 at 10:27
  • Please add any additional information to the question
    – user31143
    Jan 20, 2016 at 10:29
  • 1
    Are these login screens accessed through different path and/or are they located in different places in navigational architecture? Jan 20, 2016 at 10:39
  • Is there any reason you can't have a single login page and simply have the backend redirect the user to the correct landing based on their credentials? It will save you work by only needing one screen to maintain and it will keep users happy as they won't see confusing extra login areas they don't care about.
    – DasBeasto
    Jan 20, 2016 at 14:36
  • I agree with @DasBeasto. The backend should allow the user to be taken to the proper dashboard instead of having multiple login pages?
    – Majo0od
    Jan 20, 2016 at 16:06

4 Answers 4

1

You can keep the same colorschemes, but flip them around. A VERY noticable would be to swap out black and white. Here's a rough mockup based on StackExchange:

enter image description here

0

Showing the admin username text by default is not a good idea for security reasons.

If you must differentiate the two log in screens with same branding around it - you could definitely add a star or a wrench icon etc to differentiate visually.

You can use small changes in the UI like shown below to differentiate between two types of logins available. As suggested by some having one log in screen and routing based on credentials is best approach..

Or if this is really important requirement for you for whatever reason, you can also use different buttons (keep same branding around the login panel) for "Admin Login", "Customer Login", or "Log in"

enter image description here

enter image description here

1
  • Thanks @ PK2016. I will try something similar and send it for review. Jan 21, 2016 at 9:05
0

I disagree on the previous answers. It depends on your customers/users.

For example, we have a platform where customers and users have to sign in. The login page is identical. Heck, the login portal is identical. No branding, no bells and whistles, just type in username and password. Never had an issue.

The reason why is clear: logging in isn't a problem, it's how does the person logging in get there and what is the expectation. For the former, we provide links to customers and users in a number of different places, all publicly available, all leading to the same place. For the latter, customers expect to log in from our main webpage (big button that says "login here") or from a direct link. Users expect to log in from a link on their personal pages, or a bookmark we offer.

In all cases, there's the opportunity to enter the platform easily and to do what you need to. Remember, login is for security, not a barrier to entry. Keep it simple and quick.

2
  • Thanks, but I am taking about a corporate zone - something similar to service desk where via single login we have a customer portal and separately we have a admin portal. I think a demarcation is required but I agree it should be a subtle one. Jan 21, 2016 at 9:08
  • We do b2b enterprise-grade software. It may seem like a requirement, but it isn't. The only reason it does is because customers want it, but there's no real reason for a separately styled login.
    – Jamezrp
    Jan 21, 2016 at 15:36
-1

You can try using a gear or wrench icon instead of the star icon to identify an admin user.

Google image search examples:

https://cdn0.iconfinder.com/data/icons/icostrike-characters/512/admin-512.png

http://findicons.com/files/icons/977/rrze/720/user_admin.png

3
  • Can you elaborate on this answer? Why is this the better approach?
    – Majo0od
    Jan 20, 2016 at 16:03
  • @Majo0od, Gear and wrench symbols are more commonly associated with an admin status (user who can modify settings) vs. a star icon which is usually used to identify a quality score. The question was very specific "any other way we can depict this" therefore me suggesting alternative options had seemed appropriate without further elaboration. Jan 21, 2016 at 13:50
  • You do need to elaborate because UX is all about reasoning. Without letting people know your thought process, it becomes meaningless when you're sharing knowledge.
    – Majo0od
    Jan 21, 2016 at 13:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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