Visual Cues & Microinteractions in Law Firm Web Design

Little things can have a big effect on how users navigate through a web page, and what they pay attention to or ignore. Subtle cues, like the direction subjects are looking in a picture, splashes of color, or even small arrows can be used to direct visitors to the most important parts of a page.

Similarly, microinteractions can direct visitors to clickable or swipeable items. And they can act as confirmation of an action performed.

All these small things together keep visitors focused and engaged, and help them feel supported by the website design.

Improve UX and Maximize Conversions with Visual Cues

Visual cues, also known as direction cues, can come from almost any element on your site. Thanks to the shape and size variations, these cues carefully direct visitors toward important content and encourage them to take specific actions.

There are two types of visual cues: explicit and implicit. Explicit visual cues are directional and can be easily spotted on the page, while implicit visual cues subtly highlight particular elements. Using both types of cues can optimize the performance of your website and provide your visitors with a good experience.

Examples of Visual Cues

The following five elements can act as effective visual cues:

Lines, curves and pointers (arrows, finger pointers) help point your visitors in the right direction. Rather than have your visitor randomly wander your website, lines can draw their attention and redirect them to a form, important information or a call to action.

Call to action buttons (direction providers) encourage visitors to interact with an app or website. Calls to action appeal to visitors’ curiosity and can serve to give them a sense of accomplishment. A CTA is most effective when it is engaging and interesting.

Text emphasis, which can be created by varying font size, weight and color, captures readers’ attention and influences how they scan your site. Having good visual hierarchy within textual elements directs the viewer’s eyes to the most important, basic information first before giving them the option to browse further. Text emphasis can also be achieved by using implicit cues, like white space and contrast.

Examples include sizing headlines proportionally larger than body text, using bulleted lists and sub headings to break up text and choosing color schemes that highlight links and calls to action.

Instructional text is just as valuable as text style. Buttons that instruct the visitor to do something are often the most clicked on areas of a page. Instructive words such as, “Contact Us,” “Discuss Your Situation” or “Download Now” inform visitors what their next step is, and yield better results than links with more generic language.

Photography is another great way to quickly draw your visitors’ attention to specific parts of your web pages. Humans are instantly drawn to large photos, colorful photos and photos of human faces. Since monitors are both at lot larger and a lot smaller than they use to be, you also must be mindful of the quality of your photos and how they compress and display on different screen sizes.

Microinteractions - Little Things That Matter

Microinteractions are events with a single purpose — to improve the user experience by creating moments that welcome, delight and engage your visitors. Microinteractions are small moments that accomplish one task, and one task only. Examples include, liking a Facebook post, doing an online search, swiping a card, pressing a button and changing a status.

Although they are small elements, well-designed microinteractions can differentiate an extraordinary website from an average website. Microinteractions communicate to the visitor whether actions can be or have been performed, and they provide immediate visual feedback. This teaches visitors which actions are appropriate without frustrating them.

Components of Microinteractions

Microinteractions are comprised of four parts:

Triggers prompt microinteractions. There are two ways to initiate triggers: user-initiated and system initiated. User-initiated triggers requires the visitor to take action, while system initiated triggers occur when the software detects specific criteria.

Rules decide what occurs when a microinteraction is triggered.

Feedback is anything the visitor sees, hears or feels while a microinteraction is taking place.

Loops & Modes determines the meta-rules of the microinteraction when conditions change.

When Should You Use Microinteractions?

Here are some top microinteractions to include in your website:

Data Input is an important element of any app or website. Interactive features can keep a visitor engaged while inputting data such as passwords, or while creating accounts. Inline form validations may not be the most exciting microinteractions, but when they are present, visitors are less likely to be frustrated when filling out forms.   

Animations attraction the attention of your visitors and highlight features, so important content is not overlooked. For a smooth user experience, you need to consider color, shape, special effects, placement and texture.

Current system status tells your visitors what is happening on the page by displaying feedback. This can be a graphic in the background, loading animation or playing a sound.

Calls to action can function both as visual cues and microinteractions. CTAs are intended to be interactive and encourage the visitor to want to continue to browse the site.

Tutorials guide and educates visitors by highlighting base features and important controls for easy understanding.

How to Make Your Microinteractions Awesome

Now that you know how important microinteractions are, you will want to think about what you want those microinteractions to achieve. Here are some things to consider:

Think like your visitor. By putting yourself their shoes, you can better figure how to make your website a welcoming and positive experience. Think about user experiences that will pique your visitors’ interest and encourage conversion.

Quick response time is something that your visitors will expect. Microinteractions need to activate within 0.1 seconds, or otherwise the interaction will be dissociated from the initial action.

Repetition will help the webpage keep-in-line with your visitors’ expectation. Familiar patterns and just a few surprises results in a positive user experience.

Simplicity is essential to avoid confusion for your visitors. Aim to communicate your message as quickly, effectively and concisely as possible.

Considering a Website Redesign?

A well designed website, with thoughtful visual cues and microinteractions, provides excellent user experience and can improve your conversion rate. Not only do these web elements make your website more aesthetically pleasing, they also have real, logical functionality. The next time you update your website, consider adding some of these elements.