# The Scaling Fallacy and Web Design

This entry is part 7 of 15 in the Web Design Theory Session
« PreviousNext »

Put simply, the scaling fallacy is the phenomena where people wrongly assume that something that works at one size will also work at another size. In this article, we’re going to discuss how this fallacy comes into play in the real physical world, and then we’ll explain how to apply the lessons to your own web designs.

## The Scaling Fallacy

Ugh, as if a giant 50 foot tall scorpion could even move, let alone do battle with a demi-god.

I was recently watching the movie remake for Clash of the Titans when this old design principle came to mind. In an early climactic scene, giant scorpions proceed to attack the hero of the movie in an epic battle to the death. The scorpions, scaled to gigantic proportions, were nimble and deadly as you might expect when dealing with such a fearsome foe…

The power of digital special effects nowadays makes it seem entirely possible that such a scaled up monstrosity could occur given the right alignment of Zeus and the Growth Ray from Honey, I Blew Up the Kids (another awesome example of why science and Hollywood should never make babies). However, the reality of a gigantically scaled up monster is physically impossible.

While much is said about tiny insects being able to lift huge weights compared to their relative body size, the sheer reality of that same strength being transferred to a super-sized version of that same insect just doesn’t work in the physical world.

A tiny ant may be able to lift 50x it’s weight, but that doesn’t mean that a massive 1,000lb ant would be able to lift 50,000lbs. The effects of gravity on a tiny insect are virtually non-existent, but gravity becomes a very real power once the size is scaled up. A 1,000lb ant would have a hard time just rolling out of bed in the morning.

The scaling fallacy doesn’t just work on scaling small things to big though – A massive mountain can stand through a thousand rain and snow storms… but a tiny hill of dirt will be washed away by the gentlest breeze.

You get it… what works at one size doesn’t always work when scaled out beyond the original design intentions. The design, function, and usability of just about anything in the entire world are tied to each other by scale. The fallacy occurs when a designer assumes that usability will be retained when a design is scaled up or down.

## Applying it to Web Design

The Scaling Fallacy comes into play in web design in two key areas: interactivity assumptions and load assumptions. We’ll discuss both in a moment, but as you read, I want you to consider how easy these scaling problems are to solve.

As the old saying goes, “hindsight is 20/20“… it’s being able to accurately predict the future that’s so darn tricky.

In the majority of cases, solving these design problems is quite simple (adding a pagination system, protecting a layout from oversized images by using the CSS overflow: hidden property, instructing clients to never mess with the navigation system, etc.). All of these tasks are easy to do… it’s identifying these issues before they happen that requires careful thought and preparation.

Alright, let’s dive into the nitty gritty stuff:

## Interaction Assumptions

Interaction assumptions occur when you create a design based on an assumption that the user’s behavior will be the same at different levels of scale.

The classic example is of a fire escape plan: A general fire escape plan for a small house is simple: exit the building as fast as possible, call the police. The same exit strategy, when applied to a skyscraper office building packed with people would result in catastrophe. The problem isn’t the design per say, it’s the fact that the design hasn’t accounted for the new scale.

#### A Web Design Example

In web design, similar interactivity assumptions can occur when you assume that a client is going to populate your web design with content as you expect them to.

For example, the placement, style and size of a navigation bar may perfect sense when a blog only has 4 or 5 categories, but the same navigation bar becomes nearly unusable when 20 or more links are added:

A navigation bar design, as it’s intended to be used.

The same navigation bar, this time with 20 or so links, making it difficult to read or use.

In this case, the solution is quite simple: instruct the client who is using the website to keep his main navigation links limited to a handful (or use a dropdown menu for additional links).

#### Identifying Interaction Assumptions

Identifying interaction assumptions isn’t rocket science, but it requires a sort of flexible thinking that accounts for different possibilities. In terms of web design, if you design an element under the assumption that it will only be used in a single way (either by a user or the person inputting the content a year after you leave the project), there’s a very good chance that the element will malfunction when it’s used in a way outside of what you intended it for.

Here are just a few examples where simple interaction assumptions are made… these aren’t all of them by any means, but it should give you good idea of how this works:

• Images - Imagine you’ve designed a website that uses all 200px by 200px images. The client later on adds a 400px by 100px image, which breaks the layout.
• Navigation Menus – You design a site with a innovative “docked” menu system that requires a user to hover over a certain area to see the menu… but you neglect to tell the users how to do this.
• Sidebars - You design a sidebar that’s exactly 300px wide, but the client adds images that are 500px wide, breaking the styling.
• Layouts - You design a site that relies heavily on multi-column layout, but the client later on wants to use a layout that uses the full width (without a sidebar).

Most of these problems should be easy to fix… just a few additional lines of code or a simple educational meeting with a client can prevent any problems from ever occurring… but what I want you to take away from this is that you must always anticipate scenarios where your designs are used in ways that you don’t originally plan them to be used.

Load assumptions are a little bit different – they occur when a designer assumes that the stresses on a given system will be the same at every scale. Load assumptions happen a lot on the development side of a web design project; Making assumptions that an image heavy web design that works when 1,000 people visit the site a month can be blown out of the water when more than a million people visit in a day and put additional stress on the server. The same principle can apply to the actual visual design of a site too…

For instance, you design an image gallery layout that is incredibly easy to browse when there are just 10 images… but by failing to provide a proper “pagination” system, the entire layout becomes difficult to browse when more than 25 images are added.

A pagination system is perhaps one of the simplest examples of tweaking a design to account for scale.

The solution is pretty simple in this case: by adding a simple pagination system, the very same design can be made “scalable” with a few small tweaks. A numbered pagination system is added, and whallah!, your design is usable again… at any reasonable scale. You would only encounter the scaling problem again if your library of images exceeded the reasonable limits of the pagination system… at which point you would have to consider a more refined tagging and search system.

Identifying load assumptions is pretty simple too: just imagine that any specific part of your design being stretched to it’s limits in terms of content… then plan accordingly. The solution might be a design or UI tweak (like the pagination example), but it also might be as simple as instructing users what the limits are. If your design only allows for 100 images and there’s nothing that you can do about it, just tell the users that up front. See how simple that is?

## Screen Size Assumptions

The last type of assumption that I’d like to describe is one that most of you are familiar with: screen size assumptions. This topic alone is worthy of it’s own blog post (more on this next week), so I’ll try to keep this brief:

If you’re designing a website and never stop for a moment to test out how it looks in a different resolution, stop right now and do it!

Long gone are the days where 75% of internet surfers are browsing on a 1024×768 monitor. Nowadays, people are surfing the net on screens of all shapes and sizes… from tiny iPhone screens to massive HD televisions.

Designing a website under the assumption that everyone out there has a certain screen size isn’t just short-sighted, it’s undermining the core usability of your site. While it might not make sense to create a different website for each different type of device out there, it’s certainly worth taking an hour or two to at least consider how your site will fare on different screen types and resolutions.

Finding just a few adjustments that you can make during the design phase of a site will save you a lot of grief in the long run. Here’s just a few quick tips for avoiding screen-size assumptions:

• Don’t rely on complex menu systems that require a mouse to accurately use. Hint: 8pt font isn’t finger-friendly.
• Consider adding a mobile-friendly fallback theme to a WordPress site.
• Avoid designing “full screen” sites (sites where the core content occupies more than 960px wide) unless the site can scale itself down for smaller screens.
• Don’t use Flash for core navigation, unless you have a damned good reason (or an HTML fallback method)
• When in doubt, make all of your body text 2 points bigger… it won’t hurt the readability on normal monitors, and mobile users will actually be able to read your text.

## Avoiding the Scaling Fallacy

No plan of battle ever survives contact with the enemy.

The only real way to avoid the scaling fallacy is to constantly be on the lookout for it. Throughout the design process, you should be aware of your own tendency to make these sorts of assumptions.

Don’t just design under the assumption that everything you create in Photoshop or Fireworks will stay the same when the website gets launched. Unless you are on a project where you’re going to be the sole entity that designs and adds content to the site, chances are high that someone, at some point, will add content that will break your expectations for how that design was intended to be used.

Likewise, avoid designing things that only work in a severely limited scale. As we all know, making customizations and revisions to a web design can be a painful, arduous and expensive process… designing under the scaling fallacy only makes these problems multiply as you’ll be required to revisit your old designs as often as people’s behavior falls outside of your own assumptions.

## Conclusion

That’s it for now! I hope everyone finds this post useful… The Scaling Fallacy is one of those enigmatic principles that’s easy to explain in the abstract, but hard to nail down in concrete designs… so it takes lots of practice and constant vigilance to avoid the major pitfalls that come from the assumptions that we discussed.

If you liked the post or have something to add, post it below in the comments. Cheers!

Brandon Jones is MDNW on Themeforest
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
• www.phpdesign.si Jure

Very well written.Webdesigntuts+ is really one of my favourite websites about web design.All of your articles are on high level and easy to read and understand.Thumbs up!

Jure

• http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

Thanks Jure – Glad you liked it :)

• kankaro

great article nice and concise explanation… truly a magnificent tuts on the web… god bless you and your works always… :D

• Rory

Great article for newcomers to web design.

• http://jeremyhixon.com Jeremy Hixon

It is very difficult but necessary to anticipate all the possible misuses of a website design, especially if you’re planning on mass-distribution of your design as a theme. I believe we should always support our work and without forethought and proper consideration you’re looking at a lot of time spent tweaking unanticipated bugs or dealing with unhappy end-users who don’t know and probably don’t care about “why” it doesn’t work in their given situation.

• Brock Nunn

Really great article Brandon! This is a problem that is often so difficult to deal with. I have a client that I am designing for. Every time we had a conversation about the way the sight looks, she was insistent upon how big everything on her screen was and how she had to scroll near endless amounts to got the content she needed.

As a result, I discovered that she was using an old CRT monitor and her resolution was maxed at 800×600. Not exactly my finest moment as I had to inform that there were larger monitors in the world.

-Cheers!

• http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

Hehe! Sounds like a frustrating situation… this is one of those cases where the best thing to do is pull up a chart showing how few people still use 800×600 monitors… and then cross your fingers and hope that the client sees the sense in finding a screen with even just a slightly larger resolution. The alternative way to handle it would be if he/she insisted that her core audience is all using 800×600 monitors, at which point you can just rebuild the design at a smaller size… hopefully at the client’s expense.

Thanks for the comment Brock!

• David Hughes

Great article! Well written and easy to understand. I really appreciated the example that you used to open this write-up.

Are there any sites out there around the net that allow us to view web-sites through various mobile phone resolutions?

• http://www.chromacolours.com Jay Kaushal

A very well researched and to the point article Brandon.

This is the most common problem when I am hired to design websites. Clients had to be educated on various sizes first of all so the site shows good on all kind of monitors and resolutions. From my experience most of the clients settle for 1024×768 resolution with site centred so in big monitors left and right space shows on sides. And this kind of site still work good even on mobiles and iPad. Clients who have these cool gadgets give a positive review about its functioning.

Generally clients hate horizontal scrolling of site so I avoid to go ahead 980px as far as width is concerned and so far hardly got any complaints. You are right with a mixture of iPhones, iPads, monitors of every size and resolution the scaling thing has to be considered first and a viable solution have to be found.

Your suggestion of “Consider adding a mobile-friendly fallback theme to a WordPress site” is something I will start folllowing for my future works.

Once again thanks for the great insight :)

Jay

• http://www.sackaynakpro.com/ Micro Saç Kaynak

great explain for that articles, thanks a lot mate =)

• anon

great article but the clash of the titans reference is a bit uhm far fetched? I mean it’s a freaking movie :D

• Will

This is tangential to the point of the article…but it is an article about fallacies.

The effects of the earth’s gravity on a tiny insect are not “virtually non-existent”. The effects of gravity are the same as those experienced by the largest organisms.

If you multiply a length by x, the volume is multiplied by x^3. This means that if an organism is scaled to be twice as long, twice as tall, and twice as wide, its surface area will be around 4 times greater but its mass will be closer to 8 times greater. The ratio of linear:area:volume is changed.

The extra weight means an organism needs more muscle mass (or hydraulic power) for even the most basic movements, a stronger (and heavier) skeleton, and a stronger heart. The reduced surface area to volume ratio is going to affect thermoregulation and in the case of organisms that “breathe through their skin” (like insects) or use book lungs (like arachnids – http://en.wikipedia.org/wiki/Book_lung) it will leave them starved of oxygen once they get to a certain size. The respiratory system of these organisms is simply not efficient enough once the organism is scaled up past a certain size.

The size of the largest living insects and terrestrial arachnids is heavily influenced by the current physical constraints of the environment. Insects used to be much larger in the distant past because the concentration of oxygen in the atmosphere was significantly greater. If the force of gravity were to change then so would the theoretical maximum size of organisms.

• http://www.scsconnect.sg IT Professional

Great tips. I love the way you inserted the “quotes”. The article is so readable and clear. Thanks.

• Catalin Macovei

Great article . “Long gone are the days where 75% of internet surfers are browsing on a 1024×768 monitor.” – this is not true if you’re outside US. The web designer should first find out from the clients information like: what’s the average of your user, man or woman and info like that because when you create a web design for a website that most of the user will have 30-45 years old you’ll have to consider that 30-40 we’ll maybe use IE6, most of them will not use mobile, smart phones. Think a little outside US for a moment.
I’ve been reading tons of articles from this site and tried to “educate” my customers but will no result.

• Obsc

Even so, wouldn’t you like your website to also be compatible with those other users? If you’re taking the time to build a website, you might as well build it right.

• http://www.ideabox.es Freddy

Thank for this article Brandon. I guess this would a good subject for a tutorial.
Most of the time the problem is also about teaching clients about limits of web design and how to use their page to avoid ruin a design… I know… Difficult :)

• Amr Emara

Great article and clear examples

Thank you

• http://www.studiorav.co.uk Ravi

Very informative and enlightening article. I think it’s fair to say most UI’s and designs will be based on certain assumptions and there will be occasions where they can ‘break’. The thing about webdesign also (especially in recent times) is you can view the same page but in a multitude of resolutions/formats etc. I think the good thing you point out is that the designer should make an effort to think more about this.

• JudyK

So.. .how do I actually design my website totally compatible to all screen types? What’s the concept about? What is the rule?
Thanks!