INSIGHTS - February 2019

Floating assets and sticky web design

Web design trends change rapidly as technology advances and our understanding of user experience (UX) deepens. A popular idea at the moment is floated elements. These are website features that float or fix to the top, bottom or sides of your screen, independent of scrolling.

For example, we’re a big fan of the sticky menu. A sticky menu is, you’ll never guess, stuck to the top of the screen. It means your menu is always accessible no matter how far down you scroll.

Other floating items you may have seen are live chat features, often in the bottom right corner, social media links off to the side, and promotions.

Fixing an element to a part of the screen can be intuitive, but there are some ways to get it wrong.

1) Remember your brand

The colour palette of your website is a delicate balance of branding and psychology. It is specifically designed for your target audience. And hopefully, a lot of time and effort went into your brand creation.

When designing floating assets, stick to your brand guidelines. Try to resist tacking them on. It’s always a good idea to go back to your graphic designer and ask them to design the new elements into your site so they don’t look like an after-thought.

2) Sounds are bad

Sound effects are for video games, not websites. Most people won’t hear them anyway and the rest will curse you for it. Audio slows down load times and totally blows your cover when you are surfing the web at work.

Cute click sounds, chirping noises to draw attention or background music are all pointless and annoying.

3) Mind Your Content

The priority of floating assets is often secondary to the content. Be mindful of where they sit and what they cover up, especially on small screens.

Make sure social links are positioned off to the side of your content. If they can’t sit outside your main content area, find another solution. Under the content is not a bad option.

Live Chat can usually be reduced to a small link at the bottom of the page. You may be able to reduce it after a few seconds automatically to ensure that it’s been seen but sits out of the way.

Make sure your floating elements work on every page. They may look great on one page, but cover a critical part of another. You may have to remove them on smaller screens altogether.

Promos in fixed position boxes demand your attention because they completely interrupt your browsing experience. They are like a guy in a koala suit demanding money for whales while you are trying to enjoy a first date. You may like whales, but are so annoyed about the interrupting koala that you suddenly have ‘no cash’. It’s commonly agreed that pop-ups are annoying. These are the same thing. Think carefully before using overly pushy promos or your customers may shop where there are fewer koalas.

Less whistles, more speed

Sticky or floating elements can capture leads and increase conversion rates, but if they confuse the user or hide content, it will undo all your good intentions.

Too many ‘cool’ features will slow down your site. Cool features usually come with a lot of cool javascript. That’s what makes them cool. And slow.

Don’t get carried away with all the bells and whistles. Good content and fast load times are far more important.