Design is more than just look and feel. It creates and facilitates the experience a user has. And, every aspect of your design, from color to font to haptics, contributes to the greater user experience (UX).
UX is an umbrella term that many tactics and strategies fall under. Interaction design is one piece of it. While UX encompasses all experiences across a brand or product, interaction design is just focused on the interface that a user engages with.
Here are five web design elements that can be used to create positive user interactions.
Hover states are when a portion of the user interface changes in appearance when a user clicks or scrolls over them with the mouse cursor. This appearance change can range from a shift in color to a button moving up or down to an element enlarging.
Hover states are most commonly used for buttons, but can also be used for any interactive element on a page. For example, you should use hover states for tabbed modules, sliders and collapsible elements where the user needs to click for content to be revealed.
Without hover states, it’s not always obvious to a user what portions of a website are interactive. That, in turn, can lead to content being inadvertently skipped over or conversion paths not being followed.
In some cases, you need to delay interactions in order to provide the best user experience. Basically, you need to make sure the trigger for interactive elements is actually indicative of a user’s desire to take that action.
For example, when a user hovers over an expanded navigation it needs to stay static long enough for the user to position their cursor above the link they want to click on.
Sticky elements are portions of a webpage that stay in the same place relative to the user as a user scrolls down a page. Most websites have a sticky navigation menu that stays at the top of the browser window regardless of how far down the page a user has progressed.
This sticky functionality can also be used for features like a search bar, a “back to top” button, CTAs and social sharing links. Making these elements sticky ensures they’re easily accessible for users when a user becomes ready to engage with them.
For instance, with social sharing links on a blog post, users aren’t likely to share content they haven’t read yet and not all users will reach the bottom of the page, but they may find a snippet as they’re reading that resonates with them. If that happens, sticky social share links allow them to promote that content with a single click and not disrupt their reading experience by scrolling to the top or bottom of the page.
Progress indicators help orient visitors to where they are within a page. For example, it could be a bar that fills up as you scroll down the page or a navigation that highlights the section title of what you’re currently reading.
In some cases, these have clickable elements that can actually help the user navigate the site’s information architecture, but in other cases they just help users understand how much content they have left to consume.
Empty space can be a really powerful design tool because that absence of content can help draw the user’s eye somewhere else on the page. Similarly, you can use background shapes to point at and emphasize content and guide users to scroll down a page.
While these things aren’t interactive and shouldn’t have hover states, they still instruct the user about how to engage with a website.
All of these elements work together to create the interaction your users are experiencing on your website. You don’t just want innovative hover states or an impressive looking progress indicator; you want these, along with all of the other elements on your site, to bubble up to create a good overarching design.