A hyperlink is a link from one page or file to another, usually activated by clicking on a blue, underlined word or image. Hyperlinks allow people to easily navigate digital products, and a standard stylization makes links instantly recognizable when the text is blue and underlined.
Here are a few things to keep in mind when adding hyperlinks to your mockups:
1. An uncluttered page is easier to read. Hyperlinks can keep your designs organized, making it easy for users to navigate your product. However, adding lots of hyperlinks can reduce readability and impact usability. Choose hyperlinks thoughtfully so you don’t overwhelm and distract your users with too much blue text.
2. Meet user expectations. If text is underlined and blue, it should always be a link! Don't confuse your users by ignoring common conventions.
3. Not all links look the same. As UX design has evolved, so has the way that links are represented in digital products. Sometimes, a company’s brand standards mean their links won’t be blue. Images can also be hyperlinks. For example, many users now expect the logo on a company’s website to link to the homepage. Even without underlined text, users expect the logo to work like a link.
4. Use descriptive links. Hyperlinked text should give users an accurate idea of where it will take them. Avoid hyperlinking the word "here," and use a descriptive phrase instead, like "French Quarter Reservation Confirmation." Descriptive language allows users to make informed choices.
Buttons let users take specific actions, like “Cancel” or “Save.” Here are a few best practices to follow when using buttons in your mockups.
1. Make buttons look like buttons. Buttons should be easily recognizable as buttons through their shape, size, and color. Most buttons are rectangles or circles, so a star- or heart-shaped button could confuse users. Here are four of the most common button styles:
2. Be consistent. Use the same type of button consistently throughout your product. For example, if you use a ghost button on your app’s homepage, you should use that same style on every screen. Consistency helps users recognize which elements are buttons.