4

I have currently the login form shown below and I'd like to add a UI element that the user can click in order to retrieve their fogotten password.

However I'm not sure what element to use and where to place it.

Any suggestions?

Translation of the labels:

Caption: Credentials checking First label: Username Second label: Password Button text: Login

Current login form

4

Generally this is shown as a link, especially on the web as it's a Secondary Action. LukeW has a good article on the topic: Primary and Secondary Actions in Web Forms.

Link as a control, not a "link" is occasionally contentious, but it's a very clear way to present a secondary, less common action without interrupting the normal workflow or introducing confusing extra buttons.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The nice thing about the link format is it encourages you to read the text before clicking it. Too often in dialog boxes people just click whichever button looks to be the "default". Here there's only one button, the "default", sign in, so there's little room for confusion.

The Primary Action is usually put at the "end" of the form, hence the bottom right positioning here, typically the place you can find the "confirm"/"okay"/etc. button. But what's really more important is that it is clearly the "submit" button and the other action is clearly secondary; if the link and button were replaced, the button still has significantly more visual weight.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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