6

Maybe I'm wrong, but it seems to me that the use of icons inside form fields is becoming very popular, especially in signup and login forms:

Form asking for "Email" and "Password", showing a mail icon and a lock icon

Now, for email and password fields, I can see that the "email" and "lock" icons are a very logical solution, but should icons be used to represent "name" and "surname" in a form?

9

Icons and labels

If I was you I would not use icons for these specific fields, Words are (generally) unequivocal in there meaning (They obey conventions) while icons and the metaphores they represent are prone to multiple interpretations.

Judging from your question, Having two icons that will look quite similar (Name & Surname being conceptually abstract and very close to each other) is more likely to create confusion rather than help your users.

Many researchers have shown that icons are hard to memorize and are often highly inefficient. The Microsoft Outlook toolbar is a good example: the former icon-only toolbar had poor usability and changing the icons and their positioning didn’t help much. What did help was the introduction of text labels next to the icons.

In most projects, icons are very difficult to get right and need a lot of testing. For abstract things, icons rarely work well.

Source: UX Myths: Myth #13: Icons enhance usability

Names & cultural variations

It is worth considering that there are multiple naming conventions when it comes to different cultures, for example: not all cultures use “Surname”

Placeholders that Replace Labels

Placeholder text within fields as in your example could hinder accessibility as screen-readers might not be able to use them. In addition to accessibility issues, there are a number of other reasons why placeholders should not replace labels:

  1. Disappearing placeholder text strains users short-term memory.
  2. Without labels, users cannot check their work before submitting a form.
  3. When error messages occur, people don’t know how to fix the problem.
  4. Placeholder text that disappears when the cursor is placed in a form field is irritating for users navigating with the keyboard.
  5. Fields with stuff in them are less noticeable.
  6. Users may mistake a placeholder for data that was automatically filled in.

    Source: Placeholders in Form Fields Are Harmful

  • 1
    Agreed. I've seen some of these forms that use a person icon to represent the name field. But I've never seen it used if you need to break out given and surname. Icons look neater and prettier if your form is very basic. They don't work well for complex forms. – nightning Feb 20 '15 at 17:52
  • True, the closest icon that I have seen that could represent a “name” could also represent "surname" and potentially address ;) – Okavango Feb 20 '15 at 17:57
  • Thanks Okavango for your really complete answer :D The only point I don't agree on is the accessibility problem, since you can have labels (or other html elements) that are visually hidden but still readable by screen readers. – mvicidomini Feb 24 '15 at 20:02
  • NP @mvicidomini and goodluck! – Okavango Feb 25 '15 at 13:54
1

Icons are generally used in buttons for Web and mobile applications for actions. Like email icon for u want use this button to send an email. Using icons in text field like search is valid, however, I feel there are times it's ok to use icons in text field and this case I don't think so.

1

The icons in the example are fairly recognizable. And as they are there along with text, I'd say they certainly aren't harming anything.

However, some things to consider (both pros and cons):

  • email/password are perhaps the most identifiable form pattern on the internet right now. Odds are the icons aren't improving the usability at all, as a email/password pairing is already so incredibly common.
  • email vs. password are sufficiently different enough concepts that distinct icons are fairly easy to figure out. However first name/last name aren't all that different in terms of concept. So it may be very difficult to figure out identifiable icons for the both.
  • as you can guess, I'm somewhat ambivalent to the icons in the example. I'd probably just remove them as they don't seem to add anything to the UX. However, I can see one good argument for them and that's where these fields aren't using visible labels, but instead placeholder text. Once you type in each field, the placeholder text is gone. If the icons remain, that adds a bit of helpful info in lieu of the placeholder text being gone. That said, I rarely, if ever, suggest one forgo visible labels. The rare exceptions I allow for are usually just username/password and sometimes search. As such, for name/surname, I'd want to see visible labels above the fields, making any extra icon likely moot and completely unnecessary.
  • In the end, I still think that in a login form, and for the users this project is aimed to, icons within the fields are useful: they're instantly recognizable and they can serve as labels when the placeholder is gone. But I also agree with all those who wrote that it would not be a good solution for larger forms, or not so common fields, or users with different computer skills. Thanks everybody for your answers and comments! :D – mvicidomini Feb 24 '15 at 20:18
  • @mvicidomini you don't want a hidden label and placeholder text stating the same thing, however. Also, I'm not Okavango :) – DA01 Feb 24 '15 at 20:26
  • Hehe, sorry, I posted the same comment twice by mistake. You're completely right about label and placeholder stating the same thing. It would probably be better having the labels visible, and (if necessary) use the placeholder as a sort of help text, although I don't really see the point in making examples for "email" and "password" (actually, I think they would really mess the things up!) – mvicidomini Feb 24 '15 at 20:38
1

I believe it's important to maintain a design language throughout your site/app. If you use icons on one form but not on another, it may tend to confuse your users, and sometimes even mislead them into believing they're on the wrong page.

I personally would get around this problem of similar fields that don't have uniquely identifying icons themselves, by placing them together and just having the icon on one of them. A great example is the signup form used on www.kitchit.com. Aesthetically too, I think this works better for long forms with multiple fields, especially if you don't have visible labels, as DA01 mentioned. If you have labels, you may want to ditch the icons.

1

I'm not personally a fan of using icons in form fields, but I think it should be pointed out that they are not always just a purely stylistic choice.

One of the reasons icons are increasingly used for email/password forms in particular is: browsers and plugins (like Lastpass) are increasingly insistent on autofilling these fields. And autofill behavior is increasingly difficult or undesirable to block client-side.

So the placeholder text (e.g. 'Enter email') inside the input fields often gets automatically overwritten, and when a user goes to sign in she may be presented with an auto-filled dialog that looks like this:

dialog

In this situation, designers have a choice to: (1) leave the fields without labels and assume the user understands what the unlabeled fields are for; (2) place a traditional text label ('email', 'password') somewhere on the form; or (3) use an icon which will be ignored if the field is unfilled (since there is a placeholder), but serve as a subtle and space-saving indicator to the field's purpose if it is filled.

Personally I do not like the use of icons, but I do think it's important to note that the choice to use them is not an act of stylistic hubris or design whimsy, but can actually be informed by good, solid UX thinking and observation.

  • 1
    What is wrong with option 2? When I see text like 'Password' or 'Search', I expect my input to go in a field next to the text. It's disconcerting to have to overwrite the text instead. – jamesqf Feb 22 '15 at 5:15
  • @jamesqf nothing wrong with text labels. But labels can be difficult to place in mobile or responsive layouts (remember, screen space on mobile display is reduced dramatically when the keyboard is shown). Also, designers correctly note that once a user fills a field in, she has tacitly understood the label so a placeholder is a good way to economize space. That's why modern frameworks like Google's Material Design elect to remove text labels in favor of placeholders: google.com/design/spec/components/text-fields.html# – tohster Feb 22 '15 at 5:26

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.