I’m pleased to present the new TGR: now with more green!
I’ve spent some time over the past few weeks learning a little CSS, PHP and Java (and I apologize for being so late to that party). I’ve been experimenting behind the scenes with TGR and tonight I’m excited to make those changes official.
So, what’s new? The most obvious change is the design. All the styling here is done via CSS, so your experience will depend on your browser’s abilities to render that code. Any modern browser should have no problems at all.
But… if you’re using Internet Explorer, TGR ain’t going to look too pretty. In fact, it’ll look pretty boring. Don’t worry, it’ll still work just fine (I spent a lot of time making sure of that!) but in much the same way that a DB9 will “work just fine” if you fill it with regular. IE users, for the sake of all the people doing wonderful things with new web technologies, please do both them and yourselves a favor by upgrading to a modern browser. If you need a suggestion, my preferred browser on my Mac is Apple’s Safari, though Camino is a fine alternative. On Windows, my choice is Google’s Chrome but Mozilla’s Firefox is quite popular as well.
I’ll probably continue to tweak the design over time – so don’t be shocked if a beautiful #009944 hyperlink becomes a similarly stunning shade of, say, #009a4c. There are also some new tabs up top – data, finance, math and risk – corresponding to the major themes I seem to gravitate toward. Those are in response to a number of readers’ requests that I make certain information more accessible, and I’ve got some other tricks planned for the future (pending demand, of course) that will leverage TGR’s new platform.
Which brings us to the most important change of all, one which is largely invisible – TGR now runs on Thesis, an excellent and highly extensible Wordpress framework designed with modularity in mind – and that’s important for someone like me, whose attempts at coding more frequently break the site than enhance it. Thesis has made it possible for me to ease into coding for the web, rather than having to wade through someone else’s indecipherable PHP or start from scratch. I highly recommend it for anyone looking to take control of their Wordpress blog or site.
Speaking of blogs and sites, there isn’t much of a difference between them these days and in the near future I hope to take advantage of TGR’s newfound versatility to host more projects and applications here. More on that when I figure it out myself…
As always, thanks for visiting, don’t be strange and most importantly: don’t panic.
-J
House Minority Leader Boehner recently released this “infographic” (I use the term loosely) in order to demonstrate his frustration with the House Democrats’s heath proposal:
The chart really is an absolute nightmare: the colors, layout, and hidden connections contribute to an absolutely impossible-to-read image, which is exactly what Rep Boehner wants.
Recently, Robert Palmer, a graphic designer in California, took it upon himself to untangle this mess. Here is his version of the chart (click to zoom):
Now, neither chart makes a strong case for or against the policy itself; both attempt merely to show all the affected parties. But the fact that Robert Palmer was able to lay out an extraordinarily clear picture of all participants demonstrates that Rep. Boehner’s chart was intentionally obfuscated in order to mislead and confuse. The only other explanations are that whoever put it together a) didn’t understand the layout or b) didn’t understand how to present it. Ignorance, in this case, is not bliss.
When we are handed data or statistics, we have an enormous power to construct convincing arguments and clear presentations of otherwise complicated ideas. To abuse those tools (and the public’s faith in those tools) by using them to construct a bad analysis is a poor policy choice – not only is it easily falsifiable, but it erodes the ability to effectively communicate at all.
Lies, damn lies and statistics… the two charts above claim to show the exact same situation. Undoubtedly, there are many more graphics that could be constructed – are any of them actually “right”? Hard to say, but I feel that the first chart is “wrong” without question because it breaks every rule of effective design. The tax may well be a beaurocratic nightmare, as Rep. Boehner claims. And Palmer’s chart does not show a lack of bureaucracy, it merely lays out the connections clearly. But by constructing a graphic which willfully corrupts its own message, Rep. Boehner undermines his argument: if his chart shows a tangled mess but Palmer can untangle it, then the public will conclude that Boehner was wrong. He would have done better to have shown Palmer’s chart in the first place and claim that there are too many connections on it – that way any refute would live only in the realm of opinion, not demonstrable fact.
Why are academics’ websites so poorly designed? In fact, they go beyond bad design and border on unuseable.
Taleb’s disasterous fooledbyrandomness.com epitomizes the phenomenon. One of the images is actually displayed upside down! Andrew has pointed out that my marquee example was not to be, but do not be distracted by the beautiful celebrities: Taleb’s site belongs on Geocities circa 1998!
Do they really not know there are people (say, these fine folks) who can help fix this problem?
An article in Friday’s NYT called “Let the Kid Be” was accompanied by this graphic:
I don’t like this presentation because I think it is misleading. But first, a little history:
You may remember last year a JP Morgan chart was circulated which showed the deterioration of bank’s market values. The old and new market values were represented by shaded circles. Unfortunately, JP Morgan chose to scale each circle’s radius with regard to the market values, rather than the circles’ areas, which made the decline appear much more dramatic than it actually was (since area is proportional to the square of the radius). The firm caught a lot of flak for this mistake and reissued the chart with the circles properly scaled.
It’s a similar problem to that faced by the NYT’s graphic artists. And here’s the truth – the NYT chart is technically correct. The area of the inside boxes is in the proper proportion to the are of the grey outer boxes. But if I showed you the red box in the upper left, with no label, and asked you what percentage of the grey box’s area it represented, would you say 58%? I would have said somewhere between 80% and 90%, and way overestimated the proportion.
The truth is, I feel that both the JP Morgan and NYT charts are very wrong. Each chart is attempting to communicate a 1-dimenional value (meaning it is just that: a singular value). Why, then, are they using 2-dimensional diagrams? I call it “over-charting” and I disagree with it. If any of the measured variables changed, these charts would change in a non-obvious (meaning non-linear) way, because they divide the change in that variable across two different dimensions. For example, if the number of people in the NYT’s “Less” category went from 4% to 8%, then the area of the square would double. But it would do so by increasing each of its two dimensions – its length and width – by a factor of the square root of two. Hardly intuitive.
Both charts should display their values using one-dimensional metrics like line charts, bar charts, or pie charts. “Wait a second!” you cry, “Bar charts and pie charts are two dimensional, as they represent values with areas!” That’s true, but they only contain quantitative data along one of their dimensions. The other dimension is purely for differentiating between qualitative variables. This means a change in the values will get reflected completely and linearly in only one dimension, not two. If we really want to start considering pie charts as two dimensional, than the NYT graphic above is surely three dimensional: it uses two dimensions (height and width) to display percentages, and a third dimension (space) to differentiate among the three categories.
So, glossing over the necessary dimensionality to differntitate between qualitative variables, a one-dimensional chart is one that only reflects quantitative changes in one dimension. An optional second dimension is purely for visual purposes, and may be disregarded as long as it is constant across all variables. Consider this representation of the NYT data:
Very simple and easy to understand, isn’t it? Note that each of the bars is indeed a two-dimensional object. But they only contain quantitative information in one dimension: height. If more people were in the “Less” category, its bar would grow taller; if the number of ”More” responders decreased, its bar would get shorter. No bar ever gets wider, and so the graph updates in only one dimension.
A pie chart is very similar in construction:
Again, the values are represented by areas which are visually two dimensional. But unlike the JP Morgan chart’s circles, they only change in one dimension: angle. Critically, the change in angle linearly impacts the area reflected in the chart. 50% area is represented by an angle of 180 degrees. Want to show just a 25% area? Cut the angle in half to 90 degrees. Simple. As with the NYT example, the JP Morgan chart would have had to decrease its radius by the square root of 2 in order to reflect a halving in market value.
By now it should be becoming clear why the NYT chart is misleading – it distributes its values over more dimensions than necessary. It’s a simple heuristic, and an important one in accurately conveying data: only use as many dimensions as you need. There’s actually something called the Curse of Dimensionality and while it doesn’t have much to do with this example, it’s message rings clear: don’t use more dimensions than you have to. Even if it looks cool.
I just saw this article about Google’s data-driven design philosophy. It seems Google will not make design choices unless they are backed by quantitative findings that the change is a measurable improvement; users vote with their clicks.
Adhering too rigidly to a design philosophy guided by “Web analytics,” Ms. Dunn [of the Stanford Institute of Design] said, “makes it very difficult to take bold leaps.”
And as much as it may sound jarring, the customer is not always right.
“Customers sometimes do not know what they want,” said John Seely Brown, the co-chairman of the Deloitte Center for Edge Innovation, a research and consulting organization based in Silicon Valley. “It can be dangerous to just listen to what users say they need.”
This quote reminded me of an interesting story about eBay: eBay’s website originally had a yellow background, until one day the company decided it would rather have a white one. Overnight, they implemented the white background and the next morning woke up to screaming protests from upset users. These were people who had spent hours – days! – tweaking their storefronts to the point that they considered their mini-sites to be their own rather than property of eBay. For the parent company to suddenly swoop in and adjust their backgrounds was inconceivable. The outrage was so intense that eBay restored their former yellow background right away.
But the company wasn’t going to give up so easy, and over the next few months engineers gradually reduced the website’s “yellowness.” Each night, eBay’s background shifted imperceptably toward white. Most importantly, no one complained, even when the website finally became a pure white after a few months of gentle tweaking.
The moral of the story – people like what they know. We don’t really mind change all that much; we just overwhelmingly fear what we don’t know. Gradual introduction of new features (unless people “know” they want them) can successfully introduce the necessary comfort level that leads to their acceptance.
Exhibit B: Facebook’s experience with major UI changes. However, Facebook has responded by acquiescing to users and allowing them to vote on prospective changes – it remains to be seen whether this approach will be successful or truly necessary.
By the way, the answer to the title question is: very rarely.
Update: I was unable to remember where I read the eBay story, and the only documentation I’ve found is this blog post on gradual redesigns. Maybe they also rewrote history while I wasn’t looking…
When I was in school, we read a paper on “damaged goods” – products which a manufacturer has intentionally disabled in order to price discriminate or drive revenue elsewhere. Now, Jorge Garcia’s blog (you may also know him as Hurley), demonstrates the phenomenon in the wild via this accidental economics lesson:
Kudos Smarte Carte
On the new design.
Not only is the newer cart shorter in length, but it also doesn’t have that raised lip at the end to hold luggage in, like the old one did.
Now it’s almost IMPOSSIBLE to balance even two bags on it.
So more people will be forced to get a second cart.
Cha-Ching!
You can check out Jorge’s blog
here.
