Warning
This article contains language that may be offensive to some readers.
Okay, web designers, gather ’round. It’s time to talk about interactive elements. Buttons, dropdown menus, and hyperlinks. Accordions, sliders, and forms. Basically, anything the user can click or otherwise affect, change, or trigger. They can be triggered by clicking, hovering, typing, or even inputting secret key combinations. (Try entering in the Konami Code on some popular websites)
While a playful surprise like the Konami Code can be fun. You don’t normally want to hide your interactions when it comes to making your site functional and easy to use. Users need to be able to see your interactive elements, recognize them, and know how the hell to use them.
Take links, for example. You know, those nifty bits of text that whisk users away to another corner of the internet? Well, if your links are masquerading as plain text, we’ve got a problem. It may sound obvious with such a simple example, but you need to make your links stand out if people are going to click them. Make your links a different colour, add an underline, bold them—just do something to make them pop from the rest of the content. And for fucks’ sake, make sure the colour changes or something when users hover over the link. It confirms that this is, in fact, a link and not just some part of the text that’s emphasized.
Of course, this being web design, there’s always mobile coming along and fucking shit up. If you think slapping a style change on your element when the user hovers over it is enough, think again. Newsflash: hover effects are a no-go on mobile devices. That’s why, choosing how to make your element stand out initially is so important. It also means that if you were planning on triggering some kind of action on hover, you better have a backup plan for mobile. If the action is purely decorative, like making an icon spin, you could just leave it out of the mobile version. However, if it’s doing something like, say, revealing more content hidden in a dropdown, you’ll want to make sure it can be triggered by a click as well. This is where clear communication with your developer is, once again, super important.
Now let’s take a look at some more complex examples, starting with sliders and carousels. I’ll get into why they’re terrible in a later post but for now, let’s assume you need one in your design. When designing your slider you want to make sure that there are clear, easy-to-use controls. Too many auto-rotating slides can leave users feeling like they’re on a merry-go-round gone rogue. Give them the ability to take the reins with clear navigation elements.
Next up, we have forms. People already hate filling them out so the least you can do is make it easy for them. Make the form fields easy to see, and for the love of God and all things holy, choose a font colour for the input boxes that stands out against the background. Also, make sure you provide clear labelling so they know what to input. Avoid “fun” or “playful” language and just stick to clear, plain directions and provide some sort of indication of which fields are required. Perhaps the most important thing is to keep your fields to the bare minimum of what you need. When users see a long form with lots of fields, they’re far more likely to just say, fuck it, and leave. Finally, don’t forget to design what happens after they hit Submit. We’ll get more into form design in our next post so stay tuned.
Now, let’s talk about video and audio players. First of all. Do. Not. Fucking. Autoplay. Anything. Nobody likes that. On the flip side, if users can’t tell a video from a static image, they’ll never play it. Make sure that there are clear controls to allow the user to play the audio or video when and if they want to. Speaking of “if they want to”, they might not. For that reason, and because search engines can’t read your audio or video content, you should also never include critical or important information in those formats. Make sure that any key information is available as text on the page and use audio and video as supporting elements.
Lastly, consider how properly highlighting your interactive elements can be used to direct users to desired outcomes. For example, how can you make information easier to find? Maybe by adding a search bar and placing it somewhere easy to see, like the header. Do you want to move them through a particular sales funnel? Make the buttons on your call to action stand out more by using an accent colour, different from the regular buttons on the site. Interactive elements are also an opportunity to add some fun and delight which will provide a positive experience for the user, making them more likely to return or consider the site’s products or services. Just don’t overdo it or they could become a distraction.
Takeaways
These are just some examples but the key thing to remember is that the little details matter—a lot. Make sure your interactive elements are obvious. Don’t rely on hover interactions, because they don’t work on mobile. Make things like sliders and forms easy to use and for fuck sake, don’t take away the users’ ability to control how and if they interact with the content. Make the way you distinguish interactive elements a feature for directing users around the page and site.
