Many people have seen Marcos Weskamp's brilliant visual design of Newsmap. The site uses the Google News aggregator to rank news stories by popularity across the Web, and then maps them out with the popular items larger, and less popular headlines smaller, all in color-coded categories. Here's a quick screenshot if you haven't seen it, but view it live if you can.
The beauty of the layout is that it allows a user to quickly glance to see what's most popular. But what if you wanted to do the same thing with a set of identically-proportioned graphics? (Like channels of video, CD artwork, or avatar options on a social networking site.) You couldn't use different proportions for the images, as Weskamp does with headlines, without sacrificing the graphics' integrity.
What you could do is use "squared rectangles."
Squared rectangles are rectangles that have been broken up perfectly into squares with no left-over spaces. So-called "perfect" rectangles are those where no two squares are the same size, and are the sort useful here. What follows is a simple example of a 33x32 unit rectangle with 9 squares. The numbers inside each square describe its width and height.
Though these rectangles are always represented showing square subdivisions, you can easily change the proportion of the entire thing to accommodate graphics of a different proportion. In essence, you just squash the grid. Let's look at some examples with some actual content.
Example 1: Which are the top 120x60 banner ads according to BannerReport.com?
To show how a re-proportioned rectangle works, first see how the above rectangle looks at half the height.
Then we fill the subdivisions with ads, with the more effective ads (per Banner Report) filling the larger spaces.
Let's look at two other examples as well, using a 20-part grid and a 22-part grid, respectively.
Example 2: According to Blog Meltdown, what are the color palettes used on the 20 most popular blogs?
Example 3: Who are the most prolific contributors to the Design Journal?
(As of this writing, with ties resolved alphabetically.)
As you can see in the last two examples, the squares can provide more detailed information on a rollover, with the whole thing acting as a hyperlink menu to more information.
As a bonus, here's a quick comp of an iTunes interface on the iPhone that shows Most Played Albums at a glance. If you're familiar with the device, it's easy to imagine using two fingers to "zoom" into the information, and have this grid progressively populated with albums deeper in the ranking.
There are three limitations to squared rectangle grids that bear mention.
- The first is that the exact order of the objects is not easily discernable. It is difficult, for example, to tell at a glance which object is, say, the fourth largest square. While this can be handled with the addition of numbers to the images, this would require users to hunt for a particular one. In rectangles with many squares, this would be frustrating. If your personas need access to an image in a particular position, this pattern is not so useful.
- The second limitation is that the smallest squares are often so small that their content will be unrecognizable in a layout. This is why the pattern is most useful at showing one end of a range of values, not the full spectrum.
- The third is that the fewer the number of squares, the more variable is the progression of sizes. In other words, the squares if lined up don't shrink at a smooth rate, which may bias the sense of importance of the graphic on either side of a big jump. These grids aren't useful for precise size comparisons.
With these limitations in mind, if you want to give your user a general sense of the graphics at one end of a range, in the most space-efficient means possible, squared rectangles are still the way to go.
How do you get one?
There is a geometric/algebraic method to create them from scratch, but it is something of a tricky process.* An easier way to get hold of one is simply to reference any of the squared rectangles which mathematicians and computer programmers have already documented. One thorough online reference is squaring.net, where you can browse the rectangles in a large number of ways, some of which are useful, many of which are quite arcane. Stick with the squared Rectangles and squared Squares, particularly the ones described as "Simple Perfects." The site even lets you select either the number of subdivisions or the rectangle proportions you need, and it can draw examples of a chosen rectangle on demand.
How do you implement one?
Squared rectangles are described in a particular notation, called Bouwkamp code, that consists of a list of numbers. The first number tells you how many subdivisions there will be in the square. The second number tells how many units across the final rectangle will be, and the third tells how many units high. The subsequant numbers describe each square that must be drawn in turn. Each square's upper left corner is anchored to the upper-leftmost corner that has not yet been filled.
To recreate the rectangle with the smallest number of subdivision squares and happens to be itself a square, a mathematical curiosity called the pluperfect square, you would look at its bouwkamp code, which is "21 112 112 50 35 27 8 19 15 17 11 6 24 29 25 9 2 7 18 16 42 4 37 33." Ignoring the first three numbers, you start by drawing a 50-unit square in the upper-left hand corner. Next, draw a 35-unit square whose upper-left corner is the upper-right corner of the 50-unit square. Next you would draw a 27-unit square whose upper-left corner is the upper right corner of the 35 unit square. This makes a cluster that looks like this:
These add up to 112, which is the width of the rectangle, so the next number 8 is placed in the highest and leftmost empty space available. In this case, you would draw an 8-unit square whose upper left corner is the lower-left hand corner of the 27-unit square.
The 19-unit square is next and fits to the right.
This square's right hand edge is flush against the right side rectangle so the following 15-unit square gets tucked up under the 35, and so on and so forth until you have deciphered the square.
This is the manual way to reconstruct squared rectangles. Reconstructing them via code is a more complicated business than I can describe here, but if you are interested, my friend Donal McMullan has posted an open source php version of the code used to build the examples shown in this article at Catalyst's open source repository.
Squared Rectangles is a very specific pattern, but should you find yourself needing such a tricky layout, you'll be glad to have the knowledge handy that the problem has already been solved for you, rather than having to solve it yourself.