Monday February 25, 2008

Getting Tough on Tufte

by Matt Donovan in Article

10 comments

A little over a month ago, Edward Tufte posted some thoughts on Interface design and the iPhone. He and his crew made a short video highlighting how the iPhone’s elegant interface makes great use of its high resolution display. He also points out areas where there may be room for improvement. You should watch the entire, full resolution video, but for the purposes of this article, here’s a quick clip of Tufte’s critique of the iPhone’s weather application.

The weather app uses large icons to communicate the temperature and bulky graphics to display the main data points (e.g. sunny, windy, snowy, etc.). Given the iPhone’s intense resolution, Tufte believes there is a lot more room for data on the screen.

---

The Controversy

Here’s the general theory – to clarify, add detail. Clutter and overload are not an attribute of information, they are failures of design.
-Edward Tufte

Some controversy has bubbled up around this criticism, mostly focusing on whether Tufte’s assertions take into account the iPhone’s purpose as a mobile device. Namely, that it’s for people who are not sitting at a desk and aren’t intent on analyzing deep data – they just want the most important info at a glance.

On one hand, the iPhone does a fantastic job of presenting the most relevant info quickly and clearly. No interface in the OS requires much more than a glance to fully digest. On the other hand, Tufte is dead-right when he says, “Clutter and overload are not attributes of information – they are failures of design.” People read news papers like the Wall Street Journal and (thanks to the mobile web) visit all kinds of websites and disseminate all manner of complicated information on busses, in cars, or while strolling through the park. As the world becomes more permanently plugged into the matrix, it’s short-sighted to suggest that a mobile device is better suited to present less detailed information.

---

Assessing the redesign

The weather app is dern pretty. But Tufte’s right – it would benefit from some more detail and the pretty (albeit bulky) graphics take a up a lot of space.

To be sure, Tufte’s redesign is lacking some required elements like the pagination indicator, information button, and Yahoo! logo. Aside from either removing or disregarding those elements, he manages to pack a lot more info into this display.

While some of Apple’s iCandy may be superfluous, there is something to be said for designing information at the emotional level. Tufte disregards emotion and elegance in his treatment of this interface:

1. The inclusion of the original graphics strictly as shrunken copies is a little cold.
2. The daily weather icons are too small to discern.
3. Simply shrinking down what was previously the main content feels a little thoughtless.
4. While red and blue do communicate cold and warm, the original color scheme is more pleasant.
5. Extra information has been added, but the typography – though sturdy – is tough to scan.
6. The map is cool. It’s also humungous.

---

One step further

So there are some shortcomings on both sides. The argument that the mobile web requires less detail is a bit weak. However, the notion that simply creating clarity through added detail is the end-all to information design is a bit robotic. Instead of arguing, we should be iterating. The solution is to take it (at least) another step.

Here’s a stab at a third iteration, building on Tufte’s redesign. Surely even more than this can be done to beautify the added information, but the new comparison illustrates several improvements:

1. The map has been sized down to accommodate more weather details on the right and to increase readability of the temperatures at the top.
2. The icons have been enlarged to a decipherable size and the temperature list has been given a little more prominence.
3. The main content has been reorganized to feel less crammed and to more thoughtfully group similar information (i.e. highs/lows are all in one column).
4. The original color palate has been restored through the high/low temps.
5. The details at right are now in Helvetica, in keeping with the general font palate for the OS.
6. Some attention has been paid to leading and font-weight to improve scan-ability.
7. The main weather icon has been repositioned to create some depth to the interface, thus reviving some of its original elegance.

Clarification by adding information is valuable at every stage of design. Like Tufte says, if the information is good, don’t throw it out – fix the design. Now, whether the information displayed in these iterations is good or not is an argument for another day. For now, the content has been added, the new constraints have been identified, and it’s time for the visual designer to boot up MS Paint and get back to work.

Comments on “Getting Tough on Tufte”

1. Christian Bradford said:

   “Instead of arguing, we should be iterating.”

   Quotable, you are. ;)

   Soon the iPhone SDK will be out and someone (you) can build this.

2. Joshua Brewer said:

   Brilliant! I loved most of Tufte’s commentary but felt funny about the weather redesign. This extends his ideas and executes them beautifully. I would completely remove Gill Sans, however. It’s the only piece of this design that feels out of place.

   Nicely done.

3. Christopher Fahey said:

   Thanks for linking to my thoughts at graphpaper.com, and for adding to the conversation! My complaint was largely about the Stocks app — his weather solution showed a little more promise, as you’ve demonstrated.

   The key is not just adding detail or more information. They key is providing easy access to the specific additional information most users will need, to prioritize the kind of information the information displays.

   Hidden within the comments over on Tufte’s site, actually, is link to an excellent iPhone weather web app that I am now using regularly instead of the built in app. The graphic design isn’t to my taste, but the information design is crisp and smart. By default, it shows the temperature throughout the day, which is IMHO far closer to the by-far-predominant iPhone use case (“What do I need to wear before I go outside?”) than the built in app or the examples you’ve mocked up. A second tab gives you the “Next Few Days”. The cool imagery is tucked in under a third tab where it belongs, as a nifty and sometimes useful edge case tool — not one of the core use cases.

   Changing cities is a little harder than the basic iPhone weather app. As is viewing an animated storm map. But the most useful tools are easy as pie. By making a list of use cases in order of how useful they are, and then making sure the top use cases are as easy as can be in the design — even if the bottom-of-the-list use cases are harder or even impossible to do — is the key to this great app.

   Check it out here: http://iphone.my-cast.com

4. Matt Donovan said:

   @Joshua – Why you gotta hate on Gill? :)

   @Christopher – I agree, the hour-by-hour weather is incredibly useful. What I was trying to do here was take some good information another step further in it’s design. As I mentioned, it may very well not be the best information for the application, but that’s another discussion entirely.

5. Jason Beaird said:

   There is a lot of wisdom in what Tufte had to say, but I understand the controversy around his criticism. While the interface may be a bit “thin”, it is still very efficient. Providing more detail, when the user only wants the essential facts clarifies nothing. In conversation, we only ask someone to clarify if expected details were left out. I think the right way to marry Tufte’s concept with Apple’s intentional simplicity would be to give the user the option to go deeper; perhaps with even more information than what you’ve shown here. With that said, I really like what you’ve done with the third iteration. I’m about to immediately disqualify myself from this conversation, but if I had an iPhone, I’d prefer more data over just the essential facts.

6. chuck said:

   I agree with Joshua about Gill – I would use only Helvetica to keep it in line with the other OS apps and style points. Everything else is a definite improvement – over both the original and Tufte’s remake. Good work and write-up, Matt!

7. Matt Donovan said:

   @chuck – I used Gill Sans because Tufte claims he likes it for really small type. Ironically, I used Helvetica for the even smaller type in the right column. Ultimately, I’m typographically retarded and this is just evidence of that.

   @Jason – If I had an iPhone, I wouldn’t disqualify you ;) Regarding your point about detail – it seems like making deeper data an option or a setting is necessary at some point. I think really great design relegates that to extreme edge cases though. In other words, the app should just work how most people expect it to the first time without changing the settings. The current weather app probably does that. I guess the question is, if there were more information, would that seem unexpected?

8. Julian Schrader said:

   When I first saw Tufte’s redesign, I completely understood his point to add more information. But I also immediately hated his execution. It looks and feels like some crappy Windows Mobile app. Furthermore I think that the average user is okay with the data he or she can get with Apple’s widget — but I’m sure there are folks who simply want or need more.

   That’s where your redesign comes into play… I like it – well done! :-)

9. Kraemer said:

   You all did see this, right?

   Rock on, Mr. Tufte! Rock. On!

10. Ken Martin said:

    @Christopher: Thanks for noticing the iPhone for My-Cast beta we made available. I’m the project lead on that… it’s been fun to work on. We’re busily assessing what we should do with the iPhone, what we like about our beta, what we don’t like. If those of you who have looked at it have thoughts you’d like to share, I’d love to hear them. Thanks!