What is the reason behind the + sign/icons with buttons?

Question

I have seen few high profile site which use + sign/icons for buttons, while other don't.

Does any body know what is the reason behind using sign with buttons, should i use signs/icons with buttons?

Answer 1

Icons on buttons - phew - where to start. I don't want to get deeply into this but I guess the main factor is that a good icon is more easily recognized than the text, especially once it has been 'learned and associated', and therefore a user hardly even has to try and read the text in order to know what the button does.

The icon should be indicative of the action and and where relevant show some direction of flow (back, forward, undo, redo etc). It's very easiy to create a bad icon and do more harm than good by interrupting the user's workflow while they figure out what the heck the icon means!

Some buttons do not need icons because the text is SO widely used and easily recognized, or their (over)use presents the user with more noise than hints. Typically OK and cancel buttons don't have icons (apps with icons here often look gaudy). If there's only one action and it's going to be obvious then sometimes the buttons are coloured rather than iconic - eg the submit button on a form.

Some icons are so synonymous with their brand - such as the facebook f - that you almost know what the button is related to and likely to do before you read the text - or at least it puts you in the frame of mind that the brand owner wants. Putting the logo everywhere means every time you see it, there's another tick in the box for raising the brand awareness in your mind. (Ubiquitous is a top designers terms - I hate it - the word ubiquitous is ubiquitous :)

Although usually it's all about user recognition of action or brand, sometimes an icon allows the text to be shortened to something less clunky, so it's a space saver too.

Often desktop applications have text and icons. When you've learnt their use you'll often tend to look only at the icons and there's frequently an option to turn off text and have icons only - allowing more screen real estate for other things. For similar reasons, where menus have the same option also found in toolbars, the icons provide recognition that the two access routes provide the same functionality. So many times I see icons in one and not in the other despite activating identical functionality.

I'm going to stop now.

Answer 2

As a set of rough rules for symbols in buttons:

• An arrow or '>' symbol helps signify that a user will move, usually to a new webpage
• A 'plus' icon always suggests adding something to an existing thing - such as a new feed to an RSS reader, for example
• Stars usually indicate 'favourite' systems. Users clicking stars expect to stay on your site, just to have a preference recorded.
• Pencils suggest the user is going to input or edit some data (especially textual)
• Right-facing arrows are becoming a common convention for 'expandable' text. See a great example right here, at https://ux.stackexchange.com/faq#reputation

Answer 3

Wizards or apps that have sequential operations often use ">" signs or icons to signify moving forward to the next step.

The Facebook button uses the "F" icon to for brand recognition, although they are already using the "Facebook blue", it adds to the instant recognition factor.

You certainly do not need to use an icon in a button to get the point across, but in specific instances it can help. When doing this:

Make sure your icon or sign is instantly recognizable across demographics

Only do so if it offers a significant advantage over not doing so, as it is easy to get carried away with cluttering up an interface with too many icons.

Answer 4

Symbols on the buttons warn of mutable state

Some clickable things in web pages and applications, like hyperlinks, are immutable. Meaning:

1. you can undo clicking a link (back button)
2. clicking the link again has the same result (go to same page again)

By contrast, certain other clickable things mutate persistent state somewhere (often in a database). Clicking a Send me potatoes every day! button may put you on a mailing list, which can't be undone but rather requires a separate command (such as No more potatoes plz) to stop the madness.

The combination of symbol and text is a warning sign to the web surfer, much like the the coral snake's colorful stripes: