Skip to main content

Writing User Interface (UI) Elements

Writing titles and headings

Be consistent with how you phrase titles. If your site has several pages, stick to the same naming convention for scannability, such as:

  • Nouns: Policies, Teams, Offices
  • Verbs: Register for an event, Submit a form, Schedule an appointment

Headings shouldn’t be too long or too short. Give a clear and concise summation of what the content under your heading is about.

Writing introductions

Include a short paragraph summary about the content to help the reader confirm whether they’re in the right place, and improve search engine indexing. Use the same language your audience uses or would expect them to use on a search engine.

Writing instructions

Use clear verbs to tell readers how to interact with interface elements. What do you want them to do?

  • Choose from drop-down menus.
  • Select or deselect checkboxes and radio buttons.
  • Select buttons.
  • Follow, open, go to, or find descriptive links.

We emphasize the name of the interface label with the <strong> HTML tag which displays as bold in our theme:

  1. In the File menu, choose Save.
  2. Select I agree.
  3. Select Continue.

Don’t use orientation language in steps like “on the top left of the screen” because people using different devices may not have the same UI elements in the same place and that can cause more confusion than it aims to help.

Don’t use the words “click” or “tap,” those words suggest that you know what device your user is using. Use “select” instead. That’s pretty universal.

Try to avoid using “see” or “view,” as not everyone consumes content visually.

Writing hyperlinks and buttons

Make your hyperlinks descriptive

Hyperlinks need to be descriptive enough to signal to the user what they are going to find when they select the link. For example, a link description that says “click here” doesn’t tell you very much by itself. You don’t really know what’s going to happen when you “click here”, and if there are multiple “click here” links on the same page, it’s difficult to tell what is what. This is especially the case for users of screen readers, who can listen to all hyperlinks on a page out of context.

If you’re viewing the links on a page in context, you may be able to figure out what they mean. However, it’s still not as clear as it could be. Adding in some additional context to the link makes it both more accessible for assistive technology and more usable for everyone.

So instead of “click here,” use something like “learn more about descriptive links!”

Make your hyperlinks unique

When there are links with the same description but go to different destinations, that is really confusing for some users. Most people would expect links that share the same description to go to the same place. For example, Boise State News and OIT News can’t both have link text of “News.” Instead, if Boise State News is called “News”, then OIT News should have “OIT News” as the link text to make them two unique links.

For more information on writing accessible links, review the WebAIM article about Links and Hypertext (see how descriptive that was?).

Avoid using anchor links if possible

Anchor links look the same as normal hyperlinks, so most users expect them to link to a different page. The “jump” experience can be confusing to people with different abilities (especially with Panels content). And, if something may be confusing to most people, it may be even more confusing for those with different abilities.

We’re not saying that you can’t use anchor links, but keep in mind that, by doing so, you may be impacting your user experience for some of your visitors.