Posted by Fallbacks, If it’s not something you’ve really thought about now is a good time. With users being on so many different devices and interacting with your product all over the world from a subway to a remote island what happens when it goes wrong? What happens when the website doesn’t load correctly? or 1 part of the app or website is slower than the rest. A lot of the things I bring up in this post are developer jobs, but any good UX designer should be using the product they design. Maybe your QA team (if you have one) tests of all kinds of devices, but do they test on different networks and download speeds. Whatever the case its easier to think about the solution to the potential problem rather than fixing it after release.
So what are some examples of times you need fallbacks?
Page Jumping: One of the most common and most annoying things I see all the time, that could easily be prevented. You’re loading a website, you think it’s loaded and start to read, then BOOM! page jumps some crap just loaded up above. Its really jarring and disrupts any flow or enjoyment you where having. The thing that typically causing this is some kind of delayed popup or ad loading from another server if it’s near the top of the page and a user is working down its going to cause problems. Even large uncompressed web-ready images can cause this problem, and shift all kinds of stuff on the page around. Solution? If you know how big the thing that could potentially load slowly is, you can code that space into the page and use a placeholder until it has loaded. If you don’t know how big the thing will be then you either need to set a limit, get it to load faster or employ some smart code to figure out the size.
Slow Website Because of Large Image: I’m sure you’ve had the frustration when you’re loading a website and its loading slow, then some massive images load and the whole thing pops into place. The website is loading and hanging on the images, this can also lead to page jumping and other issues. Solution? Lazy loading, Go to google images if you’re internet is slow enough it won’t load anything but colours to start with. Then from the top down it loads a higher res image, then finally the actual full-res thumbnail. Even when you click the thumbnail you’ll notice its pixelated until it loads fully. This is superb, it gives the user the opportunity to find what they want without slowing down. Luckily loads of websites do this these days and if your website is not one of them, Get on it!
Displaying Wrong Data: This is the actual main reason I started thinking about this because it happened to me. If you’re on a website or app trying to find information, whatever you do don’t display the wrong information. I would rather see nothing or an error message than something completely wrong and in my case kind of scary. So I wake up for work one morning, just about to head out for work. Good idea to always check the weather before you head out for the day, the connection must have been wonky because when it said “TORNADO” at 6 am I kinda freaked out.
I look out the window… looks fine, get a better connection and it turns out its actually a pretty standard day for Montreal. Why on Earth would this be the fallback for a bad connection or weird GPS signal? Imagine if you where a stock trader and the stocks you invest in are shown to be plummeting, you call everyone “Sell, Sell, Sell” check your phone later to see its all fine. Solution? Show an error, spinner or nothing if you are not 100% sure of your data. Because the outcome could be a lot worse.
No Confirmation, Double-Clicking: Did it go through? If I click again will it charge me again? should I just wait? These are the kinds of places you do not want your users to be, no man’s land. You must have fallbacks for when things go wrong If I hit confirm payment or a send button you have to tell the user if something or nothing is happening. Solution? Build in timers, loaders, spinners, error messages and so forth to keep the user’s mind at ease.
Layout Changes When Loading: Depending on the way a website is coded, mobile first, desktop first, frameworks, WordPress, sometimes you might come across a site that seems to change its layout as you load it. Similar to the jumping page problem above but even more disconcerting, just when you want to click the link, it loads in a sidebar, or changes the width of an element. A whole manner of things could load in and its all about priority. Solution? Ensure the most important CSS and layout styles are loading first and always at the top of the page. Never load any layout CSS at the bottom.
Lack of Error Messages: If your website requires a complicated password or has some weird restrictions on an input form, tell the user BEFORE they start typing. Don’t make the user feel dumb because they tried to put in a normal password which didn’t meet your specific requirements. Solution? Empower and inform your users on the things that are not seen everywhere, weird forms, requirements, drag and drop, slidey things, just give people a heads up.
A good example of a website that needs strong passwords and a useful way to let use user know how strong their password is:
404 pages with dead ends: Not something you could normally think about but most websites have one and they are normally terrible. I like 404 that are funny or make a pun about something those are great, but you have the help the user out of this hole. Many 404 page will give you the error, and expect you to hit the back button or use the general navigation. Why cant we help them get what they want? Solution? Show them helpful information, the biggest thing on the page should not be 404 error, but “where to go next” or “where you looking for this?”. Help guide the user to the place they wanted to go or get them as close as you can, its worth it.
AirBnB have a good 404 page, with helpful links. But go easy on the “Oops” guys.
The Take-Away
If there is anything to take away from this post its this: Prepare for the worst, Prepare for the slow and the unknown. Think of all the things that could go wrong and if it’s worth taking the time to address it. I’m not saying spend a weeks work for the edge case, but keep these things in mind and test on a range of devices and networks. If it makes the overall user experience better, you will be a better UX Designer and design better experiences.