User Experience (UX) Tips (Buttons Vs. Links)

It is very important to know when to use links and buttons in your website. Both share some common properties like the clickable feeling, refreshing the page, navigating to another pages, performing specific tasks according to the user’s actions, so what’s the difference between them? Although all of these similarities of their behaviors we can say that links always used for navigation between pages, while buttons are used to perform a user action like adding, updating or deleting data, now end users become familiar with this concept, when they see a link in your page they are sure it is a navigation link to another page before they hit it, so try to keep this in mind in order to put things in their right places.

Tips for having better links:

1. Always make the links style is different than any text in your website. By default links become with the blue underlined font style like this and the cursor is turned into a hand instead of the normal text cursor.
2. Try to make users realize the links in your page without an extra effort by placing them in good places and styling them with differently.
3. It’d be better to hide your link under a self describing label, for example: don’t use the famous Click here label for navigating to another page but use labels that describe its content  something like : Google
4. Provide tooltips for your links in order to give the user some information about the contents of that link.

Tips for having better buttons:

1. Be sure that your button have a self describing label for the action that’s going to take place after clicking it.
2. Provide tooltips, precautions or hints so that the user knows what’s next after clicking that button.
3. Don’t make your buttons look like links in their style, don’t lose the mouse hover, mouse up or mouse down effects on the buttons.
4. Don’t use buttons for navigation or as menu items, use links instead.

User Experience (UX) Tips (Confirmation Messages)

Confirmation messages is one of the basics to have a better UX for your application, while you are designing your confirmation messages many things should be taken into consideration so let’s list them.

1. Message position: place your message in a place that is visible to any user and I do recommend to put it at the top of your page, so you will find it after the page refreshes.
2. Message color: this is very important to distinguish between the success and error messages, so set the color of the message to be Green for success and Red for error.
3. Message icon: having an icon that describe the content of the message is so important, for example you can set the icon for the error messages to be X (cross).
4. Message content: be sure that your message’s content describes correctly the action has been done whether it’s an error message or a success message.
5. Be sure to display messages after any action from the user, this will make him feel more comfortable with your application and will make him believe that the application is responding correctly to his actions.