Developer and curmudgeon Hank Williams, whose opinions about the generally sorry state of computing generally jive with my own, is totally with me on the “context is key” idea. His conclusion?
The point is that almost every piece of information we collect has a trail to other bits of information. Right now we can’t see those trails. And so, our data spaces, be they our Gmail archives, or our hard drives, or our Delicious tags, etc., are really more like old attics with years of junk covered in thick dust. Modern software technology can and should do better.
When you sit down at a computer and engage in an activity, no matter what it is, it must inevitably fall into at least one (and often more) of these three categories:
- Production
- Creation
- Relaxation
The “real world” analogues to these categories are art, craft, and (for lack of a better word, since I don’t want to just reuse “relaxation”) entertainment. All life pursuits have elements of these categories. Art is driven by imagination. Craft implies more hard work and focus on technique. Entertainment is of psychological value, as a de-stressing agent, and can fuel both art and craft.
So, on your computer. Writing an email to your mom? Creation and relaxation. Looking up a recipe? All three. Doing your taxes? Production. Editing a home video? All three. Making graphics for the website your boss needs? Creation and production. Playing a videogame? Relaxation. Making weekend plans with a friend? Production and relaxation.
What does this mean for interaction design? How can programs understand what activity you’re engaging in and optimize its suitability for that activity? This gets back to context, which I’ve written about before and will write about again. If I’ve been chatting with a friend and then switch to my web browser and look up movie times, my computer should know that I’m in relaxation mode with a hint of the production, and make subtle changes to how it reacts to my activities: if I then start to look for someone’s email address, it should know to suggest friends, and preferably local ones, before coworkers. If I’ve been writing work-related code for a solid hour and then switch to my IM buddy list, it should know that I probably want to talk to my coworkers about something and, perhaps, enlarge their names in the list slightly. These are subtle touches, but easily doable, and if enough of them are consistently added across your entire computing platform, the overall enhancement to usability and simplicity could be tremendous.
Obviously this requires a level of computer “understanding” of your data and actions that hasn’t been reached yet, but there are strides in that direction. Social networking tools and community websites are making your relationship data available for programmatic access, so determining who’s a friend and who’s a coworker is becoming easier. By watching your calendar and work-related activities throughout each day, your computer can learn when you’re generally working, and take that into account when making schedule-related suggestions. By checking the location of your geotagged photos and matching the photo’s descriptive terms (tags, title, etc.) with other items in your data-profile, software can guess where certain people live or where certain activities take place.
This is all part of your computer being context-aware. Once the intercommunication between applications and (secure) exposure of your data to approved applications is comprehensive, your computer will be able to use its knowledge to make whatever aspect of computing you’re engaging in — creation, production, or relaxation — simpler, faster, and better.
With two local teams (I’m from New York and now live in New England) on their way to Superbowl XLII in Arizona, football has been on my mind more than usual lately. I’m generally not an avid football fan, but I’ve taken more of an interest this year as the juggernaut Patriots have surged their way past record after record, so I’ve spent a significant number of hours in the past few months watching the televised broadcasts of the games. While the game itself is enjoyable, there’s always one thing that bugs me: the informational on-screen graphics that the various networks use to display the current game state all seem to be missing something.
Score isn’t everything
When I look at the TV and a game’s on, there are a handful of key data points I want to gather as quickly as possible so that I’m up to speed with the game and can pay more attention to the action than to the numbers. That’s the supposed purpose of the infographics: to provide a quick snapshot that I can instantly parse into a game state, to mentally construct a symbolic understanding of the game so far, which I will then use to fully understand the meaning of the teams’ current actions in the larger context of the entire game. These are the data points that I believe any football fan needs to build an accurate mental snapshot:
- Quarter: how far along is the game?
- Time left: are we nearing a break?
- Score: who’s winning, and by how wide a margin?
- Possession: which team has the ball?
- Down and Yardage: is the offense running out of chances to make progress?
- Ball position: how close is the offense to scoring?
Additionally, the graphic needs to be designed to take the following accessibility factors into consideration:
- Obtrusiveness: is there a good balance between readability and screen coverage?
- Contrast: is the graphic readable by viewers with poor vision?
How they do it
The three major networks that broadcast NFL games—Fox, CBS, and NBC—each have their own style of infographic, although Fox and NBC use a similar design, and while theirs are better than CBS’s, they’re still not great. Here’s why.
CBS
CBS chose to go with a shape-shifting graphic that hovers in the upper corner of the screen. Its default layout shows the Quarter, the Time left, the Scores of the two teams (using abbreviated team locations), and Possession is indicated by a tiny yellow dot. Occasionally, a black bar appears at the bottom of the graphic that shows the Down and Yardage, but this information comes and goes seemingly at whim. At other times, a yellow “Flag” indicator appears at the bottom, and sometimes other information about drive length, possession time, individual player statistics and such appear at the bottom or at the end of the “arm” of the graphic. Ball position is never shown. Occasionally, the information-rich arm disappears, leaving only the “NFL CBS” logo. Woe to the viewer who tunes in when that’s the only thing displayed on-screen!
The CBS graphic is somewhat Obtrusive, since it hovers in the corner of the screen, set well away from the edges, obscuring a portion of the camera’s view of the field. However, it does have good Contrast: the text is all white on black or black on white.
One nice subtle touch is that the arm switches direction to indicate the direction of the current offensive drive; unfortunately, doing this requires the graphic to swap from the top left to the top right of the screen, an inconsistency that I think is harmful; consistency is key.
NBC
NBC’s graphic lies Unobtrusively along the bottom edge of the screen. It reads naturally left-to-right in a single line, and you can immediately figure out the Score and the Quarter and Time Left. The section containing the Down and Yardage, however, is dynamic. Sometimes it shows nothing, sometimes the Down and Yardage, sometimes a yellow “Flag”. Nowhere is Possession indicated, which strikes me as a major oversight. The text has good Contrast, however, and the inclusion of the team logos is a nice addition.
Fox
Fox takes a similar approach to NBC, only their graphic stays almost at the top of the screen, and is narrower than NBC’s, making it very Unobtrusive. Contrast is decent, although the small fonts hurt readability. Scores, Quarter, and Time left are all constantly displayed and easy to find, but once again, the Down and Yardage displayed here is in a section of the graphic that is constantly in flux. The rightmost third of the graphic (showing “Playoffs – Divisional”) is unchanging, and could be put to better use providing more contextual information, such as the Ball position. Possession is indicated with a bold, high-Contrast outline, making it easy to tell which team has the ball.
How it should be done
The (fictional, of course) Yin Yang Network takes a similar approach to that of NBC and Fox, but enhances it by adding all the necessary information that the others leave out. On the left, we have the Scores, including team logos and team location abbreviations. Possession is indicated by a colorful highlight around one team (and on the bar above it), and Ball position is listed next to the team currently in possession. In the center is the necessary network logo. On the right is the Down & Yardage, beneath which can appear a conditional “Flag” marker (but never anything else). To the right of that can occasionally appear the play clock, when it is close to running out. And finally, on the far right, we have the Quarter and Time Left, fulfilling all our informational needs.
And as for accessibility, the graphic is thin, partially translucent, and sits at the very top of the screen, making it as Unobtrusive as possible. The fonts are big, bold, and Contrast well with the background, making them easily readable by even viewers with poor vision or colorblindness.
While I have no illusions about any network adopting my design, I figured it was a good exercise to compare what’s being done and see how it could be improved. What do you think? Is my design better or worse than the others? Have I missed any considerations? What would you have done differently?
I’m a big fan of Jef Raskin, the thinker behind the concept of the Humane Interface, which basically encourages a lot of the same stuff that I brought up in my Reimagining series: the computer should take human fallibility and imprecision into account at all times, and allow humans to do what humans do best while the computer handles the stuff that humans struggle with. His son Aza has followed in his footsteps, starting the company Humanized, and building the Enso software that attempts to incorporate many of Jef’s ideas, albeit in a sort of minimal way.
(Three of Humanized’s four principals were just hired by Mozilla, which probably means Humanized will shut down, but Mozilla’s interface will probably improve. Congratulations to everyone involved!)
To generate interest and press, Humanized recently developed and released Songza, a simple website that lets you search for music and play it in the browser. It makes use of several Humane principles: transparent zero-interaction “monolog” boxes, pie menus, and text labels instead of icons (mostly). This is great! It’s a simple and useful demonstration of how a Humane interface can be quickly and easily understood by people even when they’re not used to it, and it shows how nicely it works. In this sense, it’s a success.
I consider myself a “power user” of the web. When I find a website that performs some function I enjoy, I try to incorporate it into my life as seamlessly as possible. One thing I use often, for instance, is Firefox’s Smart Keywords feature, which lets me specify a keyword that I can use to quickly send a search to a specific website. I’ve set up dozens and dozens of these, so that finding the information I want is just a few keystrokes away: I can type “google jef raskin” to do a Google search, or “wp jef raskin” to look him up on Wikipedia, or “amazon jef raskin” to find his book on Amazon, or “dict humane” to find a definition, or “wu chicago, il” to find the weather at the Humanized offices. Once I’ve set these up and used them a few times, they become habit, and I barely have to think; looking up the information I want from a site I trust is utterly simple, and the computer has “learned” how to use its smarts to help me achieve my goals more quickly. This is the essence of a Humane interface: turning the user’s interaction with the interface into a benign habit that requires no thought.
To set up Smart Keywords, Firefox has created a simple process: you right-click on a form field, then select “Add a Keyword for this Search…” and then specify the keyword you want to use. It works on any standard web form, and Firefox figures out all the nitpicky details for you. Handy, no? Well, when I tried this with Songza, something went wrong: Firefox didn’t offer me the option of adding a keyword for the Songza search form. Viewing the source showed me the problem: the Songza search form, contrary to standard web design practices, doesn’t specify an action. The whole interface is handled by javascript and Flash: when you push the search button or press enter, the text you’ve entered isn’t sent to the server via HTTP, it’s grabbed by javascript and sent to the server using AJAX in the background. Hence, Firefox has no idea what’s going on, and can’t automate it for me, thereby denying me the expected simplicity of turning Songza into one of my habits.
To further aggravate things, there’s no reason why the site should be designed this way. It would be dead simple, from a programmer’s perspective, to make the form send a GET request back to the main page, and make the main page automatically handle it. Then, voilá, the form works as a standard web form, Smart Keywords work, and people can even link directly to search results. Add an auto-play option, and when I want to hear a song, all I have to do is type “songza perpetuum mobile” and, seconds later, it’ll be playing for me. (“Perpetuum Mobile” as performed by the Penguin Café Orchestra is a beautiful song. If I could provide a link here for you to listen to it directly on Songza, something like http://songza.com/perpetuum%20mobile, I would.)
It frustrates me that Humanized is trying so hard to effect a sea-change in how people interact with computers, but they (at least with Songza) aren’t trying to play nice with standard functionality at the same time. I understand that a paradigm shift often requires cracking a few eggs, so I don’t expect everything to go smoothly as they try to show how the Humane Interface is better than the current accepted computer UI, but I don’t think it’s wrong of me to say that their attempts should try to work with the current system as much as possible. People are going to be more impressed, and more enthusiastic, if your groundbreaking interface also does all the handy little “power user” things they expect, and provides as many avenues to habituation as possible.
Edit: You know what? I feel so strongly that this would improve Songza that, if any of the Humanized guys happen to read this post and want to take me up on it (and give me access to their code, of course), I’ll gladly do all the work necessary to add the above functionality to the site. How about it?
It’s rhubarb season here in New Hampshire, where everything garden-wise apparently happens later than the rest of the country. For the past couple weeks, though, our rhubarb patch has exploded and now there are more big, thick, cheek-puckeringly sour stalks of rhubarb than you can swing a knife at. Twice now I’ve whipped up a dish of my mom’s delicious creamy rhubarb crisp, and both times it’s come out excellent.
The recipe is simple; it’s basically the filling for a rhubarb pie with the topping from an apple crisp, and it takes mere minutes to throw together. But be warned: both times I’ve made this so far this year, the entire dish has been emptied by the next day.
Creamy Rhubarb Crisp
Cut enough rhubarb into approximately half-inch pieces to fill a 9-by-13 casserole dish. In a bowl, mix the following:
- 1 cup sugar
- 4 tablespoons flour
- 1 teaspoon nutmeg
- 1 tablespoon tapioca flour (or corn starch or arrowroot powder)
- 1 tablespoon butter
- 2 well-beaten eggs
Stir the mixture into the rhubarb until all the rhubarb is coated. Then, in another bowl, mix these:
- ¾ cup brown sugar
- 1 cup rolled oats
- ½ cup flour
- 3 tablespoons butter
Spoon it over the top of the rhubarb, then bake (uncovered) at 350° F for an hour.
