Having an icon to replace 'Forgotten username and password?'

Question

Has anyone come across any instances where an icon has replaced the link text:

'Forgotten your username and/or password?'

I am designing a log in bar that has to go across the top of the website and unsure where to put it if in text format. The supplied designs show:

When implementing this we don't have a search bar, the ordering looks odd and there is no consideration to the forgotten username link. If the text is placed below the bar has too much prominence on the page:

All comments and thoughts welcome

Answer 1

I can think of three possible solutions for you and none involve an icon, which I think is a poor idea. Instead, consider one of these solutions:

---

1. Push all failed login attempts to a separate login page.

Instead of trying to shoehorn error and failed login attempt messaging in a top bar, push users over to a login page with the form filled out with the information they just submitted and the new error state there. On this focused login screen you'll have more room to add in a "Forgot Password/Username?" link. Here's an example of what that could look like:

Pros:

• Allows more space for secondary links like this.
• Centralizes logins into one place so you don't have to recreate different error states across your website/app.

Cons:

• Users are taken temporarily away from the page they were on and you have to make sure to re-route them back to where they were. It's not a huge hurdle, but it introduces complexity.
• Users can't see a forgot password link until they've attempted a failed login. Some users may know they can't remember their password and now you've introduced a frustration in finding a link.

---

2. Use a pop-up to display error messages and have the "Forgot Password" link in there.

Instead of having the top bar change heights, display the link after a failed attempt within a popout window.

Pros:

• The design doesn't have to change.
• The user stays on the page they're on.

Cons:

• Like the previous example, users can't see a forgot password link until they've attempted a failed login. Some users may know they can't remember their password and now you've introduced a frustration in finding a link.
• Smaller screen sizes (i.e. mobile) can become an issue with pop-overs like this. This means you may have to come up with a different solution when your screen real estate is limited.
• Login forms aren't centralized. More maintenance.

---

3. Provide a mini-form in a pop-up window in the top bar.

Instead of trying to redirect users or wait for them to fail at something, hide the form behind a "Log In" popup window.

Pros:

• The initial visual complexity of your top bar is simplified.
• Users gain access to the "full" login form.
• This would scale well for smaller screens (i.e. mobile).

Cons:

• The form is hidden behind a click.
• Login forms aren't centralized. More maintenance.

---

Personally I would go with option 3. Most users tend to stay logged into websites. It's too much trouble to remember usernames and password. By hiding the form within a pop-up, you're making it easily available, but not an initial visual element that a user has to figure out how to deal with. Also this allows you to emphasize the "Sign Up" CTA more. Users with accounts have a higher frustration threshold than user without accounts. On outward facing pages, your content should cater to converting as many non-users to active users.

I would really discourage you from placing labels within your form fields as placeholder copy. It may look nice, but if a user forgets what a field is for, there is no longer any label around to remind the user.

Answer 2

I advice you to be careful with icons without clear meaning. Icons can be very useful when conveying conventional (meta-)information. But when the icon has no conventional meaning, it's very hard to communicate it without any text (and keep it simple at the same time).

This reminds me a bit of the language icon project a few years ago: http://www.languageicon.org/. The icon still hasn't been widely implemented, which shows how hard it is to introduce a (new) icon.

An idea could be to replace the input fields with a text-link to a new page. There you have room for a legible text without making it too prominent. You could also implement a 'remember me' function on that which reduces the need of a login-form on every page (since it's only needed once).

Answer 3

You could always use a '?' icon if space is a problem, as if the user is unaware of what to do a '?' mark icon would be the obvious icon to click on to find out more information. (this does however introduce another click for the user)

Answer 4

Going with what MeeMMeem said, I found this design to be intuitive (it's actually a Joomla extension called SCLogin Enhanced). You can place a question mark icon inline with the input. Bootstrap provides some slick ways to do this.