UI Best Practices

The logo at the top each page should send the user to the homepage of your site. Assuming your logo is in your theme directory, this is how to display it in the header.php template file.

<a href="<?php echo home_url(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/logo.png" alt="Website Logo" /></a>

Top ↑

Descriptive Anchor Text Descriptive Anchor Text

The anchor text is the visible text for a hyperlink. Good link text should give the reader an idea of the action that will take place when clicking it.

A bad example:

The best way to learn WordPress is to start using it. To Download WordPress, click here.

A better example:

Download WordPress and start using it. That's the best way to learn.

Top ↑

By default, browsers underline links to let the user know what is clickable. Some designers use CSS to turn off underlines for hyperlinks. This causes usability and accessibility problems, as it makes it more difficult to identify hyperlinks from the surrounding text.

Top ↑

Color is another visual cue that text is clickable. Styling hyperlinks with a different color than the surrounding text makes them easier to distinguish.

Hyperlinks are one of the few HTML features that have state. The two most important states are visited and unvisited.

Having different colors for these two states helps users identify the pages they’ve visited before. A good trick for taking the guess work out of visited links is to color them 10%-20% darker than the unvisited links.

There are 3 other states that links can have:

  • hover, when a mouse is over an element
  • focus, similar to hover but for keyboard users
  • active, when a user is clicking on a link

Since hover and focus have similar meanings, it is useful to give them the same styles.

Top ↑

Color Contrast Color Contrast

Color contrast refers to the difference between two colors. Contrast is low between navy blue and black. Contrast is high between white and black. Jonathan Snook provides a color contrast calculator to help you determine the contrast in your website design. The WCAG 2.0 requires a ratio of 4.5:1 on normal text to be AA compliant.

Top ↑

Sufficient Font Size Sufficient Font Size

Make your text easy to read. By making your text large enough, you increase the usability of your site and make the content easier to understand. 14px is the smallest text should be.

Top ↑

Associate Labels with Inputs Associate Labels with Inputs

Labels inform the user what an input field is for. You can connect the label to the input by using the for attribute in the label. This will allow the user to click the label and focus on the input field.

<label for="username">Username</label>
<input type="text" id="username" name="login" />

Labels work for radio buttons as well. Since it works using the id field and not the name, each input for the group gets its own label.

<input type="radio" id="user_group_blogger" name="user_group" value="blogger" />
<label for="user_group_blogger">Blogger</label>

<input type="radio"  id="user_group_designer" name="user_group" value="designer" />
<label for="user_group_designer">Designer</label>

<input type="radio"  id="user_group_developer" name="user_group" value="developer" />
<label for="user_group_developer">Developer</label>

Top ↑

Placeholder Text in Forms Placeholder Text in Forms

Placeholder text shows the user an example of what to type. When a user puts their cursor in the field, the placeholder text will disappear, while the label remains.

<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="John Smith" />

Top ↑

Descriptive Buttons Descriptive Buttons

The web is filled the buttons that have unclear meanings. Remember that last time you used ‘OK’ or ‘submit’ on your login form? Of course you do :) Choosing better words to display on your buttons can make your website easier to use. Try the pattern [verb] [noun] — Create user, Delete File, Update Password, Send Message. Each describes what will happen when the user clicks the button.