Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

Log in fields as supplied

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:

Log in fields in development

All comments and thoughts welcome

share|improve this question
1  
How about a key or a lock with a question mark? Example: here. –  Bart Gijssens Feb 28 at 12:29
3  
If you already have text links for "Login" and "Signup" why not just add the single word "Forgot?". –  AShelly Feb 28 at 19:52

4 Answers 4

up vote 44 down vote accepted

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:

Login Page

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.

Link in error popout

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.

Login Popup

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.

share|improve this answer
    
As a sidenote, that @stackoverflow.com gave me the hope that there was the possibility to get an email account here for a moment. –  Francisco Presencia Mar 1 at 14:03
1  
In option 3, the login form could still easily be centralised. Assuming this is a web page, an <iframe> tag could do this, but most UI APIs provide a similar construct. –  11684 Mar 1 at 16:03
1  
In option 2, it might make sense to pop out the window if keyboard focus stays in the login/password editboxes for more than a few seconds with no input. –  Anton Tykhyy Mar 2 at 10:21
    
@11684 - Yeah, a form could be centralized, though I'd be wary of iframes. The interaction would be different in either case because while the form is "the same" it's context is different. –  Hynes Mar 3 at 2:54
    
@Hynes Then AJAX. I just mentioned the simpler option; of course there are multiple possibilities. –  11684 Mar 3 at 12:20

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).

share|improve this answer

You could always use a '?' icon Question mark 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)

share|improve this answer

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.

Question mark icon inline with field

share|improve this answer
    
A question mark often relates to help or a tool-tip. People know what a user name or password is, but they don't remember or know their uname/pwd. As soon as I see that Q mark, I think "oh some extra info on this field here" –  Mooz May 13 at 22:44
    
That's a fair point. In context I think a user is looking for help, they forgot their username or password. I don't think the question mark is always for educational text. But it's a fair point all the same. Thanks. –  avi May 21 at 19:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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