Website design is a constant process. In today’s online environment, your business website isn’t a single stable design. It’s a combination of features and pages that are continually added to and modified. New blog posts, new content pages, and of course new user interface (UI) features. Every few months, a new feature comes out that become wildly popular and business websites scramble to adopt them. More conservative sites take their time, seeing which features work well in practice and selecting the ones that work with the brand and other design elements already in place.
UI Elements – What’s Trending
Are you are on the cutting edge of feature adoption? Do you carefully consider each new feature for your website based on how your user will be impacted? Live chat, sticky footers, and featured side panels are among the recent trends that have been added to thousands, if not millions of business websites. The central theme has become floating assets, pieces of the website that are always on screen and follow the user as they scroll and navigate.
In these numerous implementations, there is an unfortunate number of examples of features that have been implemented poorly. It’s not that their programmers were incompetent or even that the assets look bad. The vast majority of floating UI mistakes are simply because someone forgot to test the new elements thoroughly. Here’s how you can avoid these mistakes:
1) Overlapping Page Content
By far, one of the most common mistakes made with floating assets is spacing. Floating assets sit above the page content and, in some cases, it looks good when they overlap the design that was already in place. However, you can always tell when a website designer failed to test their updates when a floating asset manages to block a key piece of content. More often than not, this can be found on the blog pages.
Blogs are where customers find the business website organically without having to look for the business itself first. However, they are also all-too-often considered an afterthought by the website designers and even the businesses themselves. When a new cool floating feature looks good on most of the main content pages but manages to block a significant portion of text in the blog, you know the latest web developer didn’t stop to test how the element looks on every page.
2) Margins for Sticky Headers and Footers
Sticky headers and footers are currently all the rage. Rather than having a line of navigation buttons at the top and a line of information at the bottom of the page, these assets are visible and available no matter where in the page your website viewers have scrolled to.
The vast majority of the time, these headers and footers look great. But the sticky header/footer appearance in the centre of the page isn’t a problem. The problems occur at the actual top and bottom of the page.
If you have recently added a sticky header, there is a chance that one or more of your website pages already have a header design that will clash with the floating sticky header and you might even be blocking your page titles in some cases. The same goes for sticky footers at the bottom of content pages. There are many examples of the sticky footer blocking the last few lines of a blog or essential end-of-page elements that were not initially designed to have such features.
Thorough testing and thoughtful page margin creation are necessary when adding sticky headers and footers.
3) Clutter with Page Elements
Finally, there’s the issue of clutter. Rather than being a single UI element, clutter happens when new floating elements are added to every page on the site without consideration for how they will look in combination with the features that already exist.
Some websites add too many floating assets as a whole. There is a sticky header/footer, a floating side panel, a lead qualifying pop-up, and a live chat panel that together, take up almost as much space as the actual page content itself. In other cases, the page content will already be visually busy, and even two additional floating UI pieces will make the page look cluttered rather than professionally designed.
Testing UI Elements
Testing is a vital phase when adding new UI elements, especially floating elements that will be present on every single page of your site. For more expert advice on how to keep your business website cutting-edge, clutter-free and cleanly designed, contact us today!