I just listened to a great episode of the 99% Invisible Podcast called McMansion Hell: The Devil is in the Details. If you haven’t ever heard of 99% Invisible, it’s a podcast “about all the thought that goes into the things we don’t think about — the unnoticed architecture and design that shape our world.”, as they describe themselves. As my real designers will quickly attest, I’m not a designer, but I do geek out a bit on the concepts and philosophy behind good design and user experience design, and this podcast is amazing at giving a fascinating glimpse behind the design decisions that influence the way we interact with the everything around us every day.
This episode was all about McMansions, those imposing and ostentatious houses that are generally considered by critics of architecture and design snobs to be an abomination to good design and architectural principles. As the podcast points out, they serve two functions: displaying ostensible wealth and allowing for customization of floor plans and features.
The criticism they make of McMansions is that they lack any cohesive architectural style, and that the ad-hoc design only serves the purpose of conveying wealth and accommodating poorly built, and poorly considered, customizations. That comes at the cost of low quality material, poor architectural execution, and low aesthetic value. The idea is to build big houses with lots of expensive looking features that evoke wealth and taste, but ironically a truer measure of taste and wealth when it comes to homes is the use of quality material and thoughtful design, making the very nature of a McMansion antithetical to its purpose.
I think McMansions are a perfect analogy for a trend in website design and development that is not only popular but ubiquitous now. And this trend has unseen detrimental impact to the performance of websites and digital marketing efforts for untold masses that have fallen into the trap of building a McWebsite. Ok, I just made that term up, but it’s still a “thing”.
A McWebsite is a website that was built based on an ostentatious template filled with bells and whistles that was purchased from a marketplace like Themeforest and then personalized in a Content Management System (CMS) like WordPress. It’s not that the use of a template is inherently bad, though there are drawbacks to that approach, but it’s the type of themes that have become popular that are filled with flashy functionality like parallax scrolling, sliders, scrolljacking, lazy loading, counters everywhere, and video hero images. In fact, this Brooklyn Theme for WordPress has almost all of those features I mentioned.
It’s just like the McMansion; people buy that theme because of all those flashy features, because they mistakenly think it signals that your site is modern and high-tech, but the truth is those things are antithetical to modern and high-tech principles, especially when they are being used without a specific purpose in mind.
Let’s use parallax scrolling as an example. Parallax scrolling is when you have a fixed background image with another layer of content that moves over the background image when you scroll. Well, a purist would say that technically it’s when the background image moves at a different speed than the other layers of content but colloquially it’s both. Tons of themes use parallax because it looks cool and fancy to users and laymen, but rarely is there a design purpose for it and having it there for no reason is only distracting to users.
Here’s an example of a theme using Parallax for no purpose. Let’s say you buy this theme, and then what, put a picture of a rack of servers taken from a cool angle, or maybe a cloud of some sort, or a pretty phone operator with a cool headset on it? To what end? If your users need to see that imagery for context of what you do, you’ve got bigger problems with your website. The problem compounds when you have a theme that checks off a bunch of the fancy features all on one website. It’s too much.
Conversely, here’s a case where parallax has a justifiable purpose. This site is for a game called Firewatch. One of the game’s key features they use to stand out from a crowded market is their visually stunning graphics. They don’t come out and directly tell you that their graphics are visually stunning and that that’s what makes them different, they show you with an elegant website design that uses parallax scrolling that immediately engages and captures your attention and encourages you to scroll right to their most important content. The rest of the site is very clean and simple, so the parallax has the desired impact without overwhelming the user or coming off as gimmicky.
When our designers submit their work for a project, we don’t evaluate it on aesthetics alone; we ask them to defend their design decisions. That’s because the purpose of design is to support function. We rarely make design choices based purely on aesthetic but rather how well they support the use case first. Of course we care about aesthetic, but great aesthetic comes from using modern design principles while developing creative solutions to design challenges.
That’s why everyone looks at Apple as the gold standard when it comes to product design. Every element of the design from UX to materials design supports the functionality and intended affordances of the device. Your website should be designed to enable the user to complete the tasks you want them to complete, and poor design can inhibit that ability. This can lead to higher bounce rates, fewer conversions, and poorer website performance overall.
When a website’s design is bad, you know it. It becomes blatantly obvious because it’s getting in the way of you doing what you want to accomplish. A great example I think many can relate to is visiting the websites of local news affiliates on mobile. They’re usually not responsive so you need to pinch and zoom and scroll right and left. They have videos that load slowly and play immediately. But that’s if you can even get past the 2-3 pop up ads that take over the whole screen that you can’t “x” out of.
But here’s the thing, when you hit a good website, you never even notice the website’s design. You may stop and think, “oh wow, this looks nice”, but you never consider the painstaking process some designer labored over to make the right design choices that all came together to make your experience on that website pleasant while enabling you to easily access the content you want or to accomplish the task you went there to achieve. That’s because it’s done so well that the workflow feels effortless.
It’s like the guys from 99% Invisible said, and it bears repeating, it’s “about all the thought that goes into the things we don’t think about — the unnoticed architecture and design that shape our world”.
Lots of partners have McWebsites because they think they make them look high-tech, and because they’re inexpensive and partners usually have budget constraints when it comes to building a website. So what’s the takeaway? The next time you’re in the market for a website and budget won’t allow you to build a custom site the way it should be done, the template route can still be a good avenue but don’t buy into all the bells and whistles of the McWebsite.
Hey, if you appreciate the warning about McWebsites, maybe you should share this article to save your friends from a terrible fate!
