It's 2017 and these outdated UX designs and concepts need to be forgotten.
Mike Reed Published 01.12.17
Ah, the magical fold. This is the area of a website or app that users see before scrolling...anything not in this wondrous space will never been seen.
Except it's now 2017...and the exact opposite is true.
First, users scroll. In fact, with the proliferation of long-scroll river pages, users have been so conditioned to scroll that they actually IGNORE content above the fold.
Upon reviewing the analytics data of TMZ.com, Milissa Tarquini found that the most clicked link on the homepage is at the very bottom. She also points out that polls and galleries at the bottom of AOL’s Money & Finance homepage get a lot of clicks in spite of their position. - Blasting the Fold Myth
On mobile it's even worse. Half of the users start scrolling within 10 seconds and 90% within 14 seconds. -Stats from MOVR (published in Luke Wroblewski's tweet).
Think about it...if a popular page of yours has an average time spent of 2 minutes, users on mobile are spending 1:50 of that time ignoring everything that took you 7 meetings worth of time to figure out.
The point: it's ok to spread out content and make the information of user-friendly and digestible. Users will scroll to find what they're looking for.
Here's the conversation that leads to a website adding a "Back To Top" button.
UX Guy: "We really need to make the main nav fixed."
Developer: "I agree but the site architecture wasn't built for this. It's going to take some significant rework to make that happen."
UX Guy (crestfallen): "Oh...well how much work would it be to add a 'Back To Top' button as a stopgap?"
Developer: "Oh that's easy. We can have that up today."
UX Guy: "But we really need to make the nav fixed in the future."
But this never happens. The stopgap becomes the permanent solution, one that users hate and never use. Let's look at the "Back To Top" button from a user's perspective.
So you're basically asking a user to:1. Take an additional, unnecessary action
2. Move away from content they were looking at and might need
3. Scroll to an unfamiliar part of the page
4. Digest all the information in this section
5. Re-learn the nav's design pattern
6. Interact with the nav correctly
7. Hopefully find the browse path they're looking for (this isn't guaranteed)
Shakes head. Not exactly the most enticing premise for a user to click or tap.
You order a burrito. Looks yummy and you're starving. Then you go to the fixins' bar...throw on some sour cream, a little pico-de-gallo, those black olives that looked good. Are those fresh tomato slices? Wow, 10 different types of salsa. Let's try them all.
Then you sit down to eat. Where to hell did your burrito go to?
Welcome to the latest trend in the mobile world. The stakeholders are now at the mobile fixins' bar. Before you know it, your site has a fixed nav, a mobile app download, social share, fixed ad at the bottom with a comments count.
Hey, where the hell did the content go to?
Top / bottom fixed elements are never a good idea on mobile. The risk of an unintended interaction goes up exponentially with this design. Users don't like having the swipeable area reduced either or having to tap a half-dozen times to close out all those fixed elements.
But, worst of all, it squeezes the content of the page back down to a 1998 flip phone size.
Above all else a site is there to function as a means of delivering information and interaction to a user. By squeezing out the content and making it harder to find/interact with, what you're basically saying that the miscellaneous items surrounding the page are more important what they're looking for.
This is a virtual middle-finger to your users.
You're on your bank's login page. Username, password, tap. You get the standard loading.gif and a message that reads "Processing your request. Please do not reload the page."
Then you wait...
You think about reloading the page, but you've already put this much time into the relationship. Can't the damn page commit already?
So you wait some more.
Blind processing is about the most annoying user experiences - because it's complete out of a user's control. It's blind trust. It's only been made worst in recent years by new language like Node.js and the rise of AJAX and websites like YouTube and Facebook. Users are now coming to expect that when they hit the "LOGIN" or "UPLOAD VIDEO" buttons, they should know where the site it at in its processing.
It's never fun when you get to an input on a form and have absolutely no idea what information they need.
I notice this happens a lot on medical and payment sites where the company knows exactly what "account number" means. But, when a user get a bill, there at 8 different numbers on it, none labeled "account."
A better UX: actually provide some context about the information needed.
Want to kill your conversion rate and lose money on your site? Great! Make sure your complex transaction form is on one step.
Humans are linear thinkers. A story has a beginning, middle and end. A to B to C.
Breaking down a form into steps fits nicely into a linear path humans are used to. It helps a user understand WHY the information is required. Too many fields will quickly overwhelm a user. Breaking them down into sections helps simplify the design as well.
Like chapters of a book, it creates an outline and organization that easy to digest and understand.
The final step SPAM
This is more than just bad UX. It's almost criminal in some cases. Yet you'd be surprised how many large sites still use it.
Pre-checked additional signups are incredible annoying to users, decrease conversion rates, and hurt your sites reputation. That's fine if you want to allow your users to opt-in on email marketing but don't force it on them.
This is a case of putting numbers and marketing objectives above the satisfaction and trust of the users. And two months later a website or app wonders why the "Delete Account" button is now the most interacted with element in the product.