Should icons be used to represent "name" and "surname" in a form?

Question

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:

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?

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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:

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.