home logo

The connection between buttons and microcopy

diomari-madulara

Most modern websites are designed with built-in buttons, and they are primarily utilized for proceeding further with an action on a website. For instance, if you are integrating a call-to-action feature on your website, then, you should add an action button next to the CTA to provoke a website user to proceed further with the action.   One of the top rules of thumbs for integrating a button to a website requires you to follow input fields for data that should allow a website designer to use change buttons. However, if there are no input fields used, then, there is no need to use a button. It gives off an impression that linking on the website is safe for a user, and it wouldn’t tamper with its privacy and security at any cost.  

Rules for selecting the right words & designs for button labels:

When creating buttons for a website, you should pay importance to how they appeal to a reader/visitor. If you choose incorrect or misleading terminology for your buttons then, it would lead to confusion and slower task times, which is unacceptable for your website. The following rules reflect on the actions to take when developing buttons for your site.  
  • Use action verbs
  • The lack of action verbs would have a nullifying impact on the user; therefore, you should proceed further with a button that features action verbs to achieve a profitable outcome. If the user follows an action verb, then, it would convey the purpose of the action button. It would enable them to take action without paying attention to confirmation dialogue on the screen.
  • Using precise diction
  • You cannot simply choose a combination of words for buttons on your website. A website designer should choose an action verb with a specific connotation. In case, the diction of the action button isn’t precise or clear; it could be misleading towards a website visitor.
  • Using task-specific language
  • Choosing generic and vague button labels could confuse users, and they wouldn’t know what to do next if the label is not clear and task-specific to them. A user might be inclined to know the result of their actions, and using task-specific language is one way to mitigate the problem.
  hello image  

Error messages

Not having an “error message” on your website is a red flag for most savvy website browsers, and it may lead them to think that your website is a scam. UX/UI mistakes are inevitable, and when a user is stuck while browsing your website, an error message should guide it on the occurrence of an error.  
  • Be clear and precise
  • Error message displayed on your website should be clear, precise, and it shouldn’t be ambiguous to your users. A user should be able to understand the error without reading too much into the situation. On the contrary, if the error message is indistinct and a user is unable to find the purpose of the message, then, your error message is rather useless. A user doesn’t have any clue on fixing the problem, which may lower the performance of your website.
  • Be short and meaningful
  • Error messages should be inclusive of crucial information, and you should avoid using filler words and other words to elaborate the reading time of the message. Instead, you should be concise and write a short description that would appeal to the users, and it should instantly guide it on how to resolve the problem. Avoid repeating words and try not to over-communicate the error extensively to the user.
  • Refrain from using technical jargons
  • Most users aren’t familiar with using technical jargons or technical description of the problem. If your error message contains technical terms, then, it could confuse the user. Instead, you should use plain and simple language without implementing the problem using technical terms. However, if the need to use technical information is inevitable, you can use a troubleshooting section to guide the user.

Empty states

An empty state is an effective strategy to improve the design and structure of your UX design, and it comprises of screens that lack information. In other words, empty states refer to the empty screens that would eventually have content on it, once the site has earned adequate traffic.

Tags

Microcopy

Share this article

This might interest you

Engagement role in microcopy