Computer Administrative Debris
Edward Tufte recently posted a video analysis of the iPhone interface on his website. If you haven’t seen it yet, I highly recommend taking a look.
My favorite part is when he offhandedly states, “The white frames are too thick and should be in gray and only a single pixel thick,” as he’s scrolling the thumbnail browser. I imagine Edward Tufte working as a design supervisor at Apple, watching over people’s shoulders, scolding young designers for not displaying enough information. I’m sure he would run a tight ship where every pixel would have a meaningful purpose.
Actually, I lied, my real favorite part is a term Tufte uses frequently in the video, “computer administrative debris”, usually as he’s noting the lack of it on the iPhone’s UI. That’s a great way to describe all the crap on our interfaces, the important stuff that enables users to perform complex tasks in a tiny two-dimensional workspace. Things like windows, menus, tabs, check boxes, toolbars, scroll bars, etc.
One of the challenges of interface design is to reduce computer administrative debris while maintaining a high standard of usability. Of course, the difficulty of this challenge is related to the complexity of the application. Pro apps are going to have more computer administrative debris than consumer apps simply because they have more features. The iPhone and Apple TV-type applications have it easy in this sense, because their users are mostly browsing content. The developers don’t often need to provide them with a context to adjust or create the content. Most desktop apps, on the other hand, are all about providing that context. Still, there are some things that desktop application developers can do to trim the amount of debris on their interfaces.
Top: Flying Meat’s consumer image editor, Acorn
Bottom: Adobe’s pro image editor, Photoshop
Features
As Jeff Atwood points out in his post, Every User Lies, users don’t actually use most of the features of the applications they buy. They want to, and might even tell you that they do, but they usually don’t. Jeff’s advice is good. Observe. Figure out what is critical for your users to get their work done and go from there. Also, don’t be afraid to say no to feature requests if you’re in the position to do so. Keeping the feature set streamlined is a simple way to reduce the amount of computer administrative debris your users will have to wade through to get a simple task done.
A good example of this is Flying Meat’s consumer image editor, Acorn. Pictured above are both Acorn and its comparable pro application, Adobe Photoshop. They’re both shown at their initial states, just after I opened an image. Acorn is clearly more approachable because there is less debris on the screen. Its feature set is not nearly as rich a Photoshop’s, but Acorn’s developer, Gus Mueller, knew that his users were not going to use all of those features anyway. He made a succinct feature list and because of that he is able to minimize computer administrative debris on his interface.
Organization
Pro and prosumer apps, like Apple’s Aperture, are in a constant state of struggle with computer administrative debris. They are the applications with the most features, but with some organization, even they manage improve their computer administrative debris to content ratio over time.
Top: Aperture 2
Bottom: Aperture 1.5.6
Pictured above are Apple’s Aperture 2, which came out this week, and its predecessor, Aperture 1.5.6. The Aperture 2 team did some re-organizing for this release. The most notable organizational improvement is the shifting of the Adjustments and Metadata widgets over to the source list area. The arrangement that we see in 1.5.6 is no longer possible. Users will never see the source list, adjustments, and metadata debris at the same time. The Aperture team understood that the users will never need to access more than one of these features at a time, so they made the decision to consolidate. Using tabs as an organizational tool, they reduced debris.
Directness
Tufte makes an important observation about the iPhone when he talks about computer administrative debris. For many features, the iPhone uses the content as the interface and users interact with it directly rather than through interface widgets. Again, the fact that users of the iPhone are mostly browsing makes it easier to do this, but there’s something to be learned from their model.
A simple example of letting the users interact directly with content to trim debris is drag and drop, something we’re all familiar with by now. By letting users either pick up items from one container and drag them into another or reorder items in a single container, we reduce the need for buttons or action menus. Less debris. Apple’s iMovie 08 boasts, “Drag-and-drop moviemaking”. In fact, Apple’s entire iLife and iWork repertoire is full of examples of interacting directly with content instead of through menus, buttons or text fields, greatly reducing the amount of computer administrative debris on their interfaces.
Apple’s Keynote
Keynote, pictured above, has a very clean interface with little debris because users interact directly with the interface representations of the content. Can your interaction model be more direct? When could users interact directly with content instead of through text fields or action menus? This is a tough one and often requires some creative coding, but its worth it.
Free of Debris (not really)
It’s not possible to completely eliminate widgets from a desktop application, but we have the tools we need to reduce the amount of unsightly and distracting computer administrative debris on our interface designs. With the introduction of gesture events and CALayers in Cocoa, the Mac developer’s toolbox is becoming more sophisticated and we have lots of room to be creative and innovative.
Users are also becoming more sophisticated and their expectations are evolving. It won’t be long until the mere sight of a pop up menu will be enough to make them quit an application and never open it again. Trust that they can handle an unorthodox interaction model. They might be liars, as Jeff Atwood points out, but they learn quick if they’re presented with a well thought out and executed design. The iPhone interface proves that and as Tufte notes over and over in his video, there is often no computer administrative debris in sight.
February 16th, 2008 at 12:18 am
Nice article. The Aperture screen shots are both pretty horrifying in this context: look at them again and note just how little of the screen’s real estate is used for photos: most of the screen is just gray window dressing and controls that you never use concurrently. What the screen shots don’t show is Aperture’s superior “full screen mode”, which hides all this “debris”, substituting smaller, less obtrusive floating palettes that the user calls up as needed. In contrast, Adobe Lightroom has a unique user interface system that encourages the user to show and hide different control areas as needed: it’s really a pretty great GUI that is significantly aided by remarkably thoughtful typography. I believe both these products represent the leading edge of “major application” interface design, despite their respective warts.
February 16th, 2008 at 1:01 am
Aperture also has a “show me the photo only” mode, with the debris relocated to minimal “HUD”s, so the screen shots above don’t give you a complete feel for the app.
February 16th, 2008 at 1:05 am
That makes me wonder, are there any commercial apps for mac that are 100% fullscreen? Besides video games. Come to think of it, Front Row and Time Machine are fullscreen and they both deal with the transition very nicey. Seems like UI is going to get more and more interesting in the near future.
February 16th, 2008 at 1:30 am
Cathy: famously, there’s a few fullscreen apps for the Mac.
Writeroom the text editor is one:
http://hogbaysoftware.com/products/writeroom
Acorn claims a fullscreen mode, too:
http://flyingmeat.com/acorn/
February 16th, 2008 at 1:41 am
Ok, I just downloaded Writeroom and it’s awesome.
I mean, it doesn’t have any controls or widgets anyway, but it really is nice to have the screen totally dedicated to typing. It’s very dramatic!
February 16th, 2008 at 4:07 am
I’m not able to subscribe to your blog. Is there a problem with the RSS feed?
February 16th, 2008 at 4:14 am
Yes, I added a pluggin for caching that messed up the feed. Should work now.
February 16th, 2008 at 11:55 am
Aperture in full screen mode is glorious
February 18th, 2008 at 5:08 am
computer administrative debris…
If you haven’t read it already, Cathy Shive has done a nice piece summarizing the words of Edward Tufte on the iPhone and applying it to a desktop context. In particular, both focus on bringing content to the front of the user perspective. …
February 18th, 2008 at 3:53 pm
i know you alluded to this in the post, but i wanted to emphasize that comparing something like acorn to photoshop is pretty apples and oranges. photoshop’s new interface is extremely well done, and allows the user to show or hide as much of the interface as she likes. it also does a great job of keeping palettes lined up and organized, and is, in my opinion, far ahead of other apps in this regard.
acorn, on the other hand, does not have close to the depth of features, which is largely the point, and that’s great. but for those of us who use photoshop’s wealth of features i think they’ve done a great job of simplifying and organizing all the debris.
February 19th, 2008 at 2:50 am
Widget-Based Thinking…
If our goal is to minimize the conceptual distance between the user’s mental model of the application (remember, the developer’s mental model is almost irrelevant) and what they need to do to meet that model, then restricting ourselves only to what t…
February 23rd, 2008 at 8:16 pm
Mellel is another word processor that offers a full-screen mode. I’ve always appreciated Mellel’s interface and the full-screen option allows even more concentation.
I appreciate the link to Tufte’s impressions of the iPhone and its interface. It really is amazing how a good UI enhances productivity and satisfaction…something that I’ve noticed (from a negative side) the more I’ve had to use Windows at work.
March 14th, 2008 at 9:30 am
Congratulations on being linked from a Gruber article. ☺
(Sorry for the double-post—I forgot to run Markdown the first time. I’d appreciate it if you’d delete that botched attempt, if you please.)
August 3rd, 2008 at 4:38 am
Thanks for the post
October 16th, 2008 at 7:54 am
The Aperture screen shots are both pretty horrifying in this contextshots don’t show is Aperture’s superior “full screen mode”, which hides all this “debris”, substituting smaller, less obtrusive floating palettes that the user calls up as needed. In contrast, Adobe Lightroom has a unique user interface system that encourages the user to show and hide different control areas as needed: it’s really a pretty great GUI that is significantly aided by remarkably thoughtful typography.
It makes me wonder, are there any commercial apps for mac that are 100% fullscreen? Besides video games. Come to think of it, Front Row and Time Machine are fullscreen and they both deal with the transition very nicey. Seems like UI is going to get more and more interesting in the near future.
If our goal is to minimize the conceptual distance between the user’s mental model of the application (remember, the developer’s mental model is almost irrelevant) and what they need to do to meet that modelI believe both these products represent the leading edge of “major application” interface design, despite their respective warts
Aperture also has a “show me the photo only” mode.
——————————–
amsn
October 16th, 2008 at 10:01 am
Hi amsn,
I also believe that those fullscreen apps are the leading edge of UI on OS X, despite the fact that they’re not very functional yet.
About Aperture - their fullscreen modes are great, but I wanted to focus on how they dealt with the clutter (debris) in their main workflow window from one release to the next. They managed to reduce it significantly without removing any of the features or changing the UI in a dramatic way, so I think they deserve lots of credit for that. It also goes to show how some thoughful organization can improve our window designs.
Indeed, Lightroom is very clever about hiding and revealing parts of the UI. If anyone is making a large, singled-window UI, it’s a great app to look at.
Thanks for the comments
October 31st, 2008 at 7:42 am
The thing is, without a title and navigation bar, the user is missing a lot of important context. When I visit a web site, I’m happy to see a small banner across the top with a few navigation links, because it quickly gives me some important context about the content I’m looking at, and about the site itself. It’s not strictly necessary, but that’s fine as long as it doesn’t get in my way, and lets my focus on the content. And the way most sites implement a navigation bar, it disappears as soon as you scroll the page, like the URL bar in Fennec. So it’s not persistently in your face, or wasting important screen space.
The other thing a navigation bar does is give you some idea about where the links lead. When I follow a link labeled “about” from someone’s blog, I have a pretty good idea where it’s going to take me.
So, by all means, let’s eliminate useless administrative debris. But be careful; you aren’t just moving functionality, you’re also removing important contextual information.
————————————————————–
randall
SEO
November 2nd, 2008 at 5:21 am
Thank you for your site
I made on photoshop backgrounds for youtube, myspace and more
my backgrounds:http://tinyurl.com/5b8ksl
have a great day and thank you again!
September 9th, 2009 at 5:23 pm
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.
September 10th, 2009 at 4:02 pm
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.
September 10th, 2009 at 6:09 pm
I love your site.
Love design!!! I just came across your blog and wanted to say that I
September 11th, 2009 at 5:38 pm
Sign: umsun Hello!!! rcuwwymhyw and 90ssgfhphzye and 8853I like your blog. cool post!
October 18th, 2009 at 6:38 pm
chet!!!!!
February 1st, 2010 at 5:21 pm
Cool stuff. Nuff Said.