The world of web design seems to have a cyclic nature. Some fascinating new technology gets released, designers rush to experiment with it, marketers get excited and latch onto the experiments with a view to exploiting the potential, and the poor old users have to endure yet another design trend boom, with all the decline in UX that comes along with it. Eventually everything that was wrong with the trend becomes self-evident, and usability experts finally manage to get a word in edge-ways.
Studios then, if they have any sense at all, spend a lot of time removing all the embarrassing examples of their creative largess, and everything settles down until the next trend boom hits us. Contributing to this fiasco are clients and the marketing people who prompt them. “Why can’t I have a giant image at the top of my page?” they want to know. “What’s wrong with putting a snowfall animation just like that other site I saw?”
A truthful answer of “Because it sucks!” isn’t likely to please them. Consequently, many a beleaguered designer caves in to the client’s request, even when they’ve already reached the point where they know it’s a bad idea. So, how do you avoid being pulled into one of these destructive trends when your client is insistent? It’s probably the case that you can’t afford to simply send them on their way, so you’ll need a means of dissuading them from the wrong course of action, which will then allow you to steer them towards the correct path.
Here, then, is our guide to overcoming design trend madness, so you can get to work developing solutions that help your clients be more successful, instead of simply helping them look a bit more snazzy while they shoot themselves in the foot.
This design trend can be considered risky, not actually dangerous. If it is used appropriately and sparingly, it’s not necessarily a bad thing. Unfortunately clients usually want the opposite. The want big, supposedly impressive animations that demand attention from the user. There’s typically not room in this scenario for the subtle understatement that really is impressive.
We won’t say you shouldn’t use animated backgrounds or animations in general. What we will say quite strenuously is that if you do use animations, you should use them judiciously. Don’t simply repeat the mistakes of the past. There’s a reason why the hey-day of Flash sites was very limited.
There are four usual ways to incorporate animated backgrounds into pages:
- HTML5 canvas animation methods – these can be tricky. While they unquestionably work and are usually low bandwidth, low server stress solutions, they can be a problem on the client side, where they may turn into resource hogs. It’s not unusual to see a simple animation using 100% of CPU and memory resources, depending on browser quirks and coding skill.
- Adobe Flash – definitely not recommended. This software requires a plug-in to work in a browser, which is just the first of many drawbacks. It suffers from major compatibility problems, is even more prone to bugs than HTML5 rendering, and presents serious security and privacy concerns. Using it also stamps you as a dinosaur of the website design world. That doesn’t mean you’re big and scary. It means you’re on the way to extinction.
- Animated GIF – works if you keep it simple. Using a GIF well is not easy. Most people use too many frames and don’t use simple enough images for each frame. Another possible drawback to using a GIF is the limited number of colors you can use. If you use a GIF, it must load smoothly and loop perfectly.
- HTML5 Video Player – this is only viable if you can meet three conditions:
- Complete silence
- Perfect looping
- Entire clip is less than 300kB in size
Not surprisingly, most people find it difficult to create a usable video that’s less than 300kB in size. You can achieve it by using a very low frame rate, no audio layer, and high level compression. For an example of excellently done video background, visit Kailis Bros.
Unnecessary Use of Animation
Background animations can be a little bit annoying in that there’s no way to turn them off, but at least if you do them correctly, they’ll be just that… in the background. But there’s another way people use animation which is a lot worse. The time to use animation is when you want to provide a practical demonstration of something or when you are providing some kind of entertainment content. When you use it as decoration, you need to be extremely careful, especially if that animation is on an endless loop.
Animation is useful for attracting attention, but that can also be its greatest weakness. Too much animation, or animation used in the wrong place, and it will be more of a distraction than an enhancement. Something to think about carefully is that someone, somewhere, is paying for the hosting of the Logan Group website. Our timbers are appropriately shivered at the thought of this.
We’re honestly not trying to turn this article into a showcase of the most awful website designs known to mankind since the dawn of living history, but there are some sites that just need to be seen once in a life time, and the SimpleClean website is one of them:
Note the masterful use of animation. If those dancing jugs can’t convince you to buy, probably nothing could. The key to successful animation is to use it sparingly, tastefully, and appropriately.
Blocking the Way
Surprisingly, this has become increasingly prevalent. It involves preventing a user from accessing free content unless they undertake some action your client desires them to undertake, usually signing in from their social media account or subscribing to a newsletter. It’s so far beyond unethical that there’s not even a suitable word for it. The identities of some of the culprits of this bad trend can be a real surprise, because they’re not the kind of candidates you’d expect. Coursera for example:
A user following the link to learn more about financial aid would not expect to see a log in prompt, but that’s exactly what happens:
The problem with this behavior is that we’re requiring a commitment from the user before we’ve provided the information that would help them make up their mind that they want to commit. It will drive away some people who might have otherwise been interested in signing up later, if we’d shown them the information without making any demands.
Begging for Subscriptions
This is similar to the above trend, except that it doesn’t stop the user from performing an action. However it is a serious enough problem that more than 96% of survey respondents indicated that they find the behavior annoying and less than 1% felt inclined to comply with the request. That kind of resistance doesn’t happen without a good reason. Seriously, quit begging people to sign up for things. If you must request subscriptions do it with more decorum. We must remember that users on websites are also visitors, this means we’re not supposed to push things on them, we’re supposed to be hospitable hosts providing a welcoming and friendly atmosphere. Subscription boxes are fine, but make them passive. Don’t just shove a box in front of the user’s face demanding that they sign up.
Polyunsaturated Font Colors
There’s an unofficial war going on between writers and visual artists. The basis of this struggle is actually simple: writers design content to be read, visual artists design content to be seen. The latter have no real interest in whether the user actually reads the content, as long as it looks cool. And therein lies the rub if you actually have a message that you want to get across.
So what these visual artists do when they’re given open slather on a website design is they use really washed out colors like gray on white, and the palest of pale blue for links. Just about anything built with Twitter’s Bootstrap uses these hideously unsaturated colors. If this trend continues, it may well be pertinent to invest in optometry stocks.
This screenshot from the Pomona College Museum of Art website may look fine when sitting directly in front of an LCD monitor, but all you have to do to make the text completely unreadable is stand up:
If you care about your content, make it readable. If you make it too pale, it will be harder to read, and that applies especially to viewing on LCD screens. Now think about users connecting on mobile phones. Imagine that user looking at the screen in bright sunlight. Can they see your content easily and read it without getting a headache? If not, you should be working on your contrast so they don’t have to.
There is a case for gray on white, but it needs to be a very dark shade of gray, not a shade of gray that’s nearly white. As for pale blue links, let them die, and die quickly. You can get a lot of useful information from Johannes Itten’s The Art of Color, which is a very in-depth guide to everything you could possibly need to know about how colors work together.
Around the time that Retina displays first became a thing, no less an entity than Forbes magazine was claiming that we’d all have to start designing specifically for that type of display, ensuring all our images would be no less than 200ppi. Apparently the greatest of all sins is to allow Apple consumers to be disappointed (which leaves a lot of confusion to be cleared up regarding the story of Eve).
The terrible thing is that a lot of you did start rolling out designs with high pixel counts, with the result that websites are getting more bloated and slow. But what you may have missed is that you don’t have to care a single jot about Retina users when it comes to your website designs. They make up a mere 12 to 16% of the market according to the latest available statistics, not nearly enough to make them special. That’s in direct opposition to retina users, which is about 97% of the market (approximately 3% of humans are estimated to be blind).
Now the interesting thing is that Retina users are a clear minority (for the moment, anyway), and the whole point of Retina wasn’t that our web pages should be “Retina ready”—whatever the hell that means—but that the photos users took with their cameras would be extra crispy and videos would play back smoothly in beautiful high resolution.
The idea that we should inconvenience 88% of the market to make our sites look extra glorious on Retina displays is ludicrous, even to users of Retina displays. Why? Because they don’t want to wait extra time for your page to load either! It’s just stupid to think that because a device can display images in high resolution, it should be made to do that all the time. Most images look perfectly fine at ordinary resolution on a Retina display. Save the hi-res stuff for when you actually need it.
Dropping Text Altogether
This is another one that Forbes seems to have been encouraging, since the same article recommended replacing text content with video and images, although they did caution that it wasn’t appropriate for every site. Obviously if you do this, you’re creating a lot of problems for yourself.
The screenshot below is from a company called Wee Society. Yes, fine, it’s a website for kids, and there’s certainly a case for using lots of bright images on a kids site, and certainly a case for not being too heavy-handed with the text. But in this case they’ve taken this idea a bit too far, providing no text at all, which definitely isn’t a good trend to follow in web design.
Web sites are supposed to be mainly text, reinforced with images and video to support that text. Just because a bunch of marketing guys decided to flip things around doesn’t mean they were right. This attitude has contributed to the bloated site problem, and the SEO drawbacks are obvious. Even worse, the users will not immediately be aware that the “text” they are looking at is not text, and when it doesn’t behave the way they expect, they’ll be frustrated. A good host does not frustrate visitors.
What we’ve stepped through in the above points is some of the more odd trends that have emerged recently in web design, and ones that clients are often likely to request, along with the usual ones of including big images, huge carousels of images, and other strong visual elements like that. By being aware of the more negative aspects of these trends, you’ll be able to put forward a good case for why the client may want to reconsider the requested features. You’ll also potentially give yourself room to put forward some more constructive advice that will actually help your client to get the best site representing them.