Long before I worked on the web, I specialised in training photographers how to use large format, 5×4″ and 10×8″ view cameras – film cameras with swing and tilt movements, bellows and upside down, back to front images viewed on dim, ground glass screens. It’s been fifteen years since I clicked a shutter on a view camera, but some things have stayed with me from those years.
In photography, even the best lenses don’t focus light onto a point (infinitely small in size) but onto ‘spots’ or circles in the ‘film/image plane’. These circles of light have dimensions, despite being microscopically small. They’re known as ‘circles of confusion’.
As circles of light become larger, the more unsharp parts of a photograph appear. On the flip side, when circles are smaller, an image looks sharper and more in focus. This is the basis for photographic depth of field and with that comes the knowledge that no photograph can be perfectly focused, never truly sharp. Instead, photographs can only be ‘acceptably unsharp’.
Acceptable unsharpness is now a concept that’s relevant to the work we make for the web, because often – unless we compromise – websites cannot look or be experienced exactly the same across browsers, devices or platforms. Accepting that fact, and learning to look upon these natural differences as creative opportunities instead of imperfections, can be tough. Deciding which aspects of a design must remain consistent and, therefore, possibly require more time, effort or compromises can be tougher. Circles of confusion can help us, our bosses and our customers make better, more informed decisions.
Acceptable unsharpness
Many clients still demand that every aspect of a design should be ‘sharp’ – that every user must see rounded boxes, gradients and shadows – without regard for the implications. I believe that this stems largely from the fact that they have previously been shown designs – and asked for sign-off – using static images.
It’s also true that in the past, organisations have invested heavily in style guides which, while maybe still useful in offline media, have a strictness that often fails to allow for the flexibility that we need to create experiences that are appropriate to a user’s browser or device capabilities.
We live in an era where web browsers and devices have wide-ranging capabilities, and websites can rarely look or be experienced exactly the same across them. Is a particular typeface vital to a user’s experience of a brand? How important are gradients or shadows? Are rounded corners really that necessary? These decisions determine how ‘sharp’ an element should be across browsers with different capabilities and, therefore, how much time, effort or extra code and images we devote to achieving consistency between them. To help our clients make those decisions, we can use circles of confusion.
Circles of confusion
Using circles of confusion involves plotting aspects of a visual design into a series of concentric circles, starting at the centre with elements that demand the most consistency. Then, work outwards, placing elements in order of their priority so that they become progressively ‘softer’, more defocused as they’re plotted into outer rings.
If layout and typography must remain consistent, place them in the centre circle as they’re aspects of a design that must remain ‘sharp’.
When gradients are important – but not vital – to a user’s experience of a brand, plot them close to, but not in the centre. This makes everyone aware that to achieve consistency, you’ll need to carve out extra images for browsers that don’t support CSS gradients.
If achieving rounded corners or shadows in all browsers isn’t important, place them into outer circles, allowing you to save time by not creating images or employing JavaScript workarounds.
I’ve found plotting aspects of a visual design into circles of confusion is a useful technique when explaining the natural differences between browsers to clients. It sets more realistic expectations and creates an environment for more meaningful discussions about progressive and emerging technologies. Best of all, it enables everyone to make better and more informed decisions about design implementation priorities.
Involving clients allows the implications of the decisions they make more transparent. For me, this has sometimes meant shifting deadlines or it has allowed me to more easily justify an increase in fees. Most important of all, circles of confusion have helped the people that I work with move beyond yesterday’s one-size-fits-all thinking about visual design, towards accepting the rich diversity of today’s web.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
23/12/2010
I love this analogy, Andy. I use a similar method with my own clients to determine the level of support for certain design elements. I use a three-tiered approach as well:
* Crucial
* Nice-To-Have
* Unimportant
Things that are critical to branding or web site goals are considered “crucial” and typically include colors, logo presentation and quite often typography. Things which are considered “nice-to-have” often include gradients, rounded corners and drop shadows. Anything else is considered “unimportant,” but only after careful scrutiny.
It’s very inspiring to see other designers arriving at similar techniques through different means. Thanks for sharing and Merry Christmas to you and yours.
Vote Helpful or Unhelpful
23/12/2010
I really like this idea, obviously IE would have to get a square of confusion..
p.s. why doesn’t this blog use HTML5 input types!
Vote Helpful or Unhelpful
23/12/2010
Great article! I’ve saved countless hours of browser tweaking simply by making the initial ‘time’ investment needed to explain this concept to clients.
Vote Helpful or Unhelpful
23/12/2010
It was a pleasure reading the article. Circles of Confusion also makes you think about what is key to the visual identity. Nice example of this: http://www.flickr.com/photos/a2591/sets/72157625508262011/with/5275112697/
Vote Helpful or Unhelpful
23/12/2010
Hello Andy, thanks for impress us. I’m the french CEO of a little startup that creates content websites, earning money only with traffic.
The thing is that we also have circles of confusion in the developpment process. Here is what happened every time : we define the functionnalities that we want to have and start the developpment. But the developpers try to be creative and always give us reviews on new functionnalities that can be implemented.
We lost a lot of money in the past trying to make as many functionnalities as we can. Now, we are trying to make the functionnalities as little as possible and that works pretty fine. That’s your circles ! Thanks !
Vote Helpful or Unhelpful
23/12/2010
Very interesting read. Merry Christmas to everyone!
Vote Helpful or Unhelpful
23/12/2010
Great stuff – and a very sensible approach to coping with the multitude of browsers and devices out there (and Internet Exploder).
Maybe less good (in terms of time saving) if a brand sees rounded corners and gradients as more important than colour and font?
Vote Helpful or Unhelpful
23/12/2010
I’ve once taken a personality exam, which concluded that my personality type tries to avoid conflict… and that’s a fair conclusion based on what I do with gradients. As a web designer, I try to make gradients as interesting as possible, sometimes with just very subtle nuances. For example, instead of going from color A to Z, I’ll do colors A to B to C to D to Z… and maybe I won’t do the typical 50/50 color ratio either. Sometimes, I’ll mix it up to where 3/5 of the top is one color and the remaining parts are the other colors. With that said, one way I stick closest to the circle is through image sprites. I figure, any website I build will have a least 3-4 images built into a sprite. Since I’m already doing the legwork for that, I just combine my gradient images to that sprite, which might bump it up 3K or so in filesize. Now, with lots of CSS lines, I could come very close to my original gradient image, but it’d require lots of extra time and it wouldn’t work on every single browser version. Anyway, I’ve found image sprites to be a very happy medium to the gradient brouhaha that develops whenever you try to get something signed off.
Vote Helpful or Unhelpful
Impress us