In the early days of the web, very few people were talking about user experience.
We were young, we were naive, nay childish in our ways.
We took 5 steps to send an e-mail, or log on to the internet. Today we do these tasks in much fewer steps.
We often bombarded our users with glitzy and comical Flash animations that were all fluff and no content.
Oh, how we’ve grown!
Enter 2015 The Era Of A New Web Of Things
As the UX movement ricochets throughout the most forgotten corners of the web, we adjust to a new reality in our connected world.
A world of screen size agnosticism.
No longer are we building websites for the holy grail of screens, the perfect 960 pixels wide.
In the next 5 years, we’ll be building websites for refrigerators, watches, and toaster ovens. Over time we will be introduced to the internet of things. The internet of things will more than ever require device agnostic design.
We’re roughly a decade into the age of the smartphone and still us web designers and developers suffer from the pains of building device agnostic sites.
I come across sites with a poor mobile user experience on a frequent basis, but if there’s one thing that grinds my gears more than any other mobile UX faux pas, it’s the abuse of the CSS property position:fixed.
Public Enemy #1: Position: Fixed
For those of you who aren’t CSS junkies position:fixed is a property that ensures a particular content area on your website will remain in the same position no matter where you scroll.
Many websites use this tastefully for navigation and header areas. Sometime’s it’s even used in the footer and in less common circumstances on the side.
However, when implemented poorly position:fixed can destroy a website’s usability and cause visitors to bounce faster than they would on an awkward first date.
Note: The purpose of this post isn’t to offend anyone, but rather highlight some of the problems users face on the mobile web. All screenshots were taken with my iPhone 6 while browsing completely random websites. Nobody alerted me to these sites and their usability issues. If your website is listed here, please fix these issues for your users.
I’ve used a semi-transparent red overlay to demonstrate a few examples where the use of position:fixed was poorly implemented and has completely destroyed the usability of these sites.
Meet exhibit one.
In this example we’ve got a social share bar that renders the beginning of each line completely unreadable.
On the bottom of the screen we have a call to action that rests about 30% of the way up from the bottom of the screen. Scrolling through this site was a complete nightmare.
There are better ways to get users to share your content and participate in your CTAs without hampering their user experience.
Meet exhibit 2.
The Call To Action to pair up with experts like Mark Meyer is ever persistent and annoyingly placed smack dab near the right center of the screen.
Had this been placed in the bottom or top corner it wouldn’t be so intrusive when trying to consume the content.
Meet exhibit 3.
Yet another example of poorly placed share icons. Why would I want to share content that I have trouble reading? The best place for these kind of icons would be a fixed mobile footer
Meet exhibit 4.
This back to top button is very poorly positioned. However, back to top buttons can be extremely useful. As a matter of fact, this website uses one too. However, this button is way too far from the bottom of the screen that it actually gets in the way of being able to read the content
Meet exhibit 5.
This is a classic case of, “Can you make the logo bigger?”/Design By Committee
Everything on this website suffers for the sake of the banner ad and obscenely large fixed logo.
Banner ads have notoriously low click-through rates, and this one is especially bad because not only is it fixed but you can’t even read the text when it shrinks down to a mobile size.
Aside from the annoying ad and too large logo let’s not neglect to mention the navigation. Tucked away in the corner and extremely small it’s barely large enough for all but the smallest fingers to actually hit that tap target.
How To Use Position: Fixed Tastefully
- Avoid fixed footers whenever possible. If you must use them, position them at bottom:0 so they block as little screen real estate as possible. If the user must tap twice, so be it. It’s better than the alternative.
- Use position:fixed on mobile to help aid in site navigation only, and not for arbitrary things like banner ads
- If you used fixed positioning for things like calls to action allow the users to X out and remove the fixed element from the screen.
- Use as little space as necessary to get the point across without harming the integrity of the design
- If you have floating social icons on either side of the viewport, make sure there is enough padding on both sides of your content so the content is not obscured by the share icons.
Have you encountered this UX sin in the wild? Or perhaps you’ve encountered worse examples? Let me know your thoughts in the comments below.