While Burlington’s traditional print media outlets (the daily Burlington Free Press and the alternative weekly Seven Days) are strong and well-written, there are also good online sources of news and information. A huge number of people subscribe to their neighborhood’s Front Porch Forum and voice their opinions through that venue, for instance, and our city government does a fairly good job making information available. There’s local politics weblogs: BurlingtonPol.com, the Vermont Daily Briefing, and She’s Right to name a few. And we have CCTV, our local government-access television channel that also streams live on the web during big events.

It’s no surprise to me that the combination of a strong IT sector and easy access to lots of quality information and debate leads to a vibrant and involved community. This was demonstrated well yesterday on Vermont Town Meeting Day 2009, the day when towns across Vermont hold their town meetings and elections. Last weekend, Bradley Holt of Found Line put together a website to aggregate social media feeds related to this annual Vermont political process. tmdvt.net pulled in content from Twitter, Flickr, YouTube, Del.icio.us, and weblogs via Technorati, collecting loads of real-time news and thoughts in one central location. Word of the site spread quickly, and the local news sources joined in, both contributing to the feeds and pulling them onto their own Town Meeting Day news pages.

But beyond the “official” news sources, local community members also took part, tagging their tweets and photos and blog posts appropriately so that they’d show up, and it was their contributions that really made the project take off. By harnessing and encouraging the enthusiasm of the people of Burlington and the rest of Vermont, tmdvt.net instantly became the go-to site for live election coverage. To describe this effect, I’d like to coin the term townsourcing: a localized form of the popular social-web concept of crowdsourcing. I look forward to seeing how it can and will be used more and more to encourage participation in local politics, media, and culture.

Thanks, Bradley, for putting together such a neat experiment, and thanks also to everyone who took part. May next year’s tmdvt be even better!

Yep, you gotta provide your email address.

While building a web form for a client recently, I got into a discussion with other designer friends about the semantic role of those little asterisks: are they part of the form’s essential content, in which case they should be part of the HTML, or part of the form’s usability design, in which case they should be part of the CSS?

One argument is that they’re pure design: the form’s content should merely be the fields and the labels that are essential to understanding what information is being requested. The form will function fine without any required-field indicators, and if a user doesn’t provide a value for one of them, the server-side software will give them an error message. This is the most basic type of functionality, and it’ll work in any web browser, CSS or no. Adding asterisks to indicate which fields are required merely enhances usability, but isn’t necessary to convey the information the form presents.

The counter-argument I was given was that the asterisks are essential content: the form isn’t conveying its full meaning without telling users which fields are required and which are optional. Design aside, it’s necessary from the most basic level to let the end-user know exactly how much information they need to provide.

I’m sure you can tell that I agree with the design argument; I can’t even fully flesh out the content argument, because I don’t completely understand it. However, I’m willing to believe that it’s a valid perspective. Which argument do you agree with, and why? Can you provide a more thorough argument for one side or the other?

He was recently interviews by the local paper, the Valley News, and gave me a shout-out as the designer. Thanks, John!

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.

• 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.

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?

(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?

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.

Jason Kottke doesn’t think offline mode is that important, which is a view I see often coming from tech-industry people who live in big cities (Kottke is in Manhattan), because most large cities have an abundance of open wifi networks available. For those of us who live in more rural areas, though, finding yourself without a connection to the internet is a commonplace occurrence. Since moving to New Hampshire, we’ve had two long-term power outages (too long for our UPSes to handle), and more than once I’ve sat myself down in a public place only to discover that the wifi network I thought I could connect to was too weak, so I’d either have to leave my comfy spot and try to find a place with a better connection, or just attempt to work offline.

Anyway, I look forward to being able to use Docs offline once Google gets its butt in gear (har) and adds Gears support.

Today, I watched a video of Cory Doctorow giving a talk about these topics (his favorites) at Google. You can watch on YouTube if you’re interested. It’s an hour long including the Q&A session at the end, but Doctorow is a compelling speaker and it’s a great talk if you care about information freedom and the future of technology. The reason I bring it up, though, is that thirty minutes into his talk (at 30:45, actually), he offhandedly mentions that he’s “doing some consulting on a movie” that Kirby Dick, the creator of “This Film is Not Yet Rated,” is doing.

So I think that, given Doctorow’s involvement, maybe Dick is actually in the process of making that copyright/software patents/DRM documentary that I dreamed up. You heard it here first!