The Gong Show

When I think of the places I would like to live, they are often places where the design emerged from the bottom-up instead of places that were subject to top-down urban planning. Places like SoHo, NY or the Marais, Paris epitomize the beauty of bottom-up design. Top-down design often results in ugly, artificial systems and generic, characterless neighborhoods. By contrast, bottom-up cities take the shape of the needs and desires of their constituents.

Christopher Alexander, a Berkeley Professor who created a body of work about architecture design theory, once wrote:

When the oak tree grows, there is no blueprint, no master plan, which tells the twigs and branches where to go. We know in general that it will have the overall form of an oak… but it is unpredictable… and a town which is whole like an oak tree must be unpredictable also. The fine details cannot be known ahead of time.

I think this captures my opinion of city design very well. As such, I’m incredibly excited about the latest edition to the SimCity franchise: SimCity Societies.

In past SimCity games, you plan a city from the top-down as the Mayor (more like a God figure than a Mayor). As the game develops your decisions will be more successful if they are shaped by the needs of your citizens (more fire departments, less expensive housing zones, etc), but ultimately all the decisions are your own and are made from a top-down approach.

In the latest installment to the SimCity series, SimCity Societies, you shape the design of your city by changing the societal energies of your city. Do you want harsh, efficient architecture design? Then you have to encourage your citizens to value efficiency through obedience. Want a wild party city? Then you should foster creativity in your citizens. Your city will emerge from the needs of your citizens based on their values and personalities.

SimCity Societies is a much more accurate simulation of good urban design than its top-down predecessors. I can’t wait to try it out.

I think a big component driving the current wave of web services (web 2.0) is far greater attention to user experience and usability. Web apps today are easier, friendlier-looking, snappier, and more-intuitive. However, there are a few usability merits of the first dot-com boom that are now lost in this second wave of services. So, I thought I’d put together a quick nostalgic list:

1. Domain Names: Pets.com was ituitive, it represented shopping for pet supplies. If someone made a pet food store in web 2.0, it would be Petterific.com, Petio.com, Pe.ts, or some other peppy, unspellable iteration of the word “Pet.” The domain name system is going to be crushed under the weight of domain squatters and increasingly decentralized web services.
2. Permalinks: A URL used to be a unique means of identifying a particular document on the web. Those days are long since dead… killed, initially by POST requests increasing usage, and finally (and thoroughly) by AJAX services with no respect for URL usage to capture a web app’s state. Now, we are all at the mercy of product designers that are thoughtful enough to put permalink features into their applications. And, if the product designer isn’t so thoughtful? You’re screwed.
3. Alt-Tab: The shortcut keys I use more than any other in Windows is “Alt-Tab,” which lets your flip between open applications. However, now that most of my applications live in my web browser, Alt-Tab is essentially useless. It offers me a choice between Outlook, Excel, and All-My-Web-Apps-In-One-Tabbed-Browser-Window. Pain in the butt for efficient working. I use Ctrl-Tab in the browser to flip between browser tabs, then my muscle memory starts to get confused between Alt-Tab and Ctrl-Tab, and I use the wrong command at the wrong time. In the original boom, people used one window per web service. Granted, this is Firefox’s fault for popularizing tabbed browsing, but I think it’s safe to lump Firefox in with Web 2.0. It was on the Webware’s Top 100 after all.
4. Browser Application Alerts: Services like Meebo which require try to call my attention in a browser window are particularly annoying. They don’t integrate well enough with the OS alerting system (such as making the task bar flash when I have an incoming message, etc). Furthermore, I’m always accidentally closing my Meebo tab when I close the entire browser. Passive web apps which require time-sensitive interaction need a serious usability overhaul.

I definitely don’t want to go back to the days of third-party popup blockers, <marquee> tags, and animated gifs galore… but I do miss some of these usability merits that web 2.0 forgets all too often.

I fascinated by the evolution of the “@___” functionality in Twitter.

When people started using Twitter they saw similarities between the a thread of Tweets and a thread of comments. In a thread of comments, a convention emerged over time that the way to reference “foobar’s” comment in your comment is to write “@foobar”. So, this convention emerged in to Twitter community as well. Initially, Twitter didn’t realize that this would be the way to reference other people’s tweets, so “@foobar” was text and nothing more.

Then Twitter enhanced the “@foobar” functionality by embracing the emergent use of this convention by making the “@foobar” be a hyperlink to foobar’s most recent tweet. The dev team at Twitter saw how the community was using their product in unintended ways and embraced the community’s decision be reenforcing the emergent convention with additional functional.

This story is a great example of the power of the iterative design process. Build a feature, release early, see how your users actually use your feature, rebuild or add functionality in response to the observed usage, release again (early), repeat. This process is crucial to the success of any web service.

This story is also a great example of the power of emergence in feature requests. The “@foobar” feature bubbled up from the community; it was not a top-down directive by a product manager at Twitter. Many of the great features in my favorite products bubbled-up from third-party hackers through the community, such as:

• Geotagging in Flickr: There were a number of third-party tools to geotag photos in Flickr via the API before Flickr release their excellent first-party implementation.
• Tags on MBL: One of my favorite MyBlogLog features is the ability to tag someone else’s profile page publicly for all to see. It adds rich metadata, and even makes for a fun rudimentary message system ;) However, MBLTagger, a third-party mashup predated and predicted MBL tagging functionality. In some ways, I liked the MBLTagger functionality even better than the first-party implementation because it extended tags out the MBL faceroll widget too.
• WordPress Autosave: There may be multiple sources of inspiration for WordPress Autosave… however, prior to WordPress implementing a first-party auto save feature. I was using a GreaseMonkey script called Textarea Backup. It was crucial! Saved your work in textfields online every 10 keystrokes. I still use Textarea Backup in MovableType.

As major web properties continue to open up in deep, meaningful ways (first Facebook, then LinkedIn, now MySpace) I think emergent functionality is going to become an even richer vein of impressive functionality than before. For example, had Flickr been as integrally open as Facebook, there would have been no need for Flickr to re-implement geotagging of photos after a third-party had already put together a good implementation. But, Flickr’s API was too superficial, so no matter how good a third-party implementation of geotagging photos turned out to be, it was never integrated enough to hit mainstream usage in the Flickr community. Well, that’s all changing now as APIs allow for deeper integration (everyone copying Facebook). And, so I’m really excited to see the features that are developed as a result.

I attended the ITP Spring Show yesterday. ITP stands for Interactive Telecommunications Program, and I previously wrote about it when a friend of mine gave me a tour of their workspace (a loft in Tisch).

Here’s a few pictures from some of the more photogenic exhibits.

A number of the projects featured cellphones as remote controls, which I thought was very inventive. The idea behind all of them was that there is a game in front of you, and to participate in the game you have to call in to a number displayed on the game. Then, once you are connected, you speak into your phone in order to control the game and achieve your goal.

I thought this interface was creative and good sense because public controls in arcades often get damaged. So leveraging the controls that almost everyone carries makes sense. Plus, a voice interface is more immersive than buttons and dials, which is good for a gaming atmosphere.

Lots of forward thinking going on here. It’s no surprise that a service as innovative as Dodgeball came out of here.

I stumbled across the Bright Nights display in Union Square Park (map for non-locals to NYC). It was beautiful!

Bright Nights is an interactive visual display on the ground in the middle of Union Square Park. High power projectors are suspended 30 feet in the air pointed down at the ground. Snowflakes, curls, circles and other small icons design by Tord Boontje flow around on the ground.

Like the surface of water, when nothing is distrubing the image on the ground, it looks calm. But, as soon as someone walks onto the display it interacts with the person in one of many ways: the icons attract to the person, the icons repel away from the user, the icons pile up (like leaves) as the person pushes them around, or the icons flow in a stream around the user. I’m sure there are other interactions, but those were the ones I could identify most easily.

There has been some press about Bright Nights.

I took a video of the attraction algorithm in action and posted it on YouTube. Watch as the little icons attract towards a user that walks onto the display: (link for those reading in an RSS feed)

I also took a picture of the description:

Here’s the artist’s rendition of how people would interact with the projections:

When I took CS247A (Interaction Design Studio) at Stanford, we all created interactive gateways for our final projects. One team created a display very similar to this one. Unfortunately I can’t find a permalink to their web presence, but check out the course if you’re at Stanford.

I’m bullish on the HCI concept of link scent.  I first learned about it when a co-worker of mine at Homestead.com when to User Interface Engineering (UIE) conference in San Francisco and reported back on what he learned.

The idea behind link scent is simple.  Users don’t click on the best link on an interface to perform their task.  Instead, they click on the link that looks like the link most likely to perform their task based on a quick, cursory scan of the page.  The links on a given page give off a scent, small hints, that users use to judge if it’s the right link to click.

For a link to have good link scent, it should have lots of cues that indicate what lies beneath that link.  The cues can be the title of the link, the URL in the status bar on hover, the alt text on hover, the content around the link, the size of the link, the location of the link… this is not an exhaustive list, but it’s a useful summary of the cues designers should use to create good link scent.

Additional analysis of link scent is available. Also, check out “The way scent works” on this page from the UIE site.
I know this theory sounds very intuitive (so intuitive that it’s uninteresting), but so many sites get link scent wrong.  Dead wrong.  So we need terminology and analogies like link scent to help designers understand their mistakes and build better sites.

I attended ad:tech today at the Hilton New York. It was very entertaining to watch advertising experts advertise to other advertising experts. The walls, hallways, tables, escalators, food, couches, and even people were saturated in advertising.

The advertising was so dense, that the lack of advertising actually made a booth stand out significantly. For example, one group took their booth space and created a lounge for people to hangout on leather sofas and chat. As you sat there, booth reps would try to casually engage you in conversation, but they were relatively passive and certainly unoffensive. It was a breath of fresh air in the whole expo.

Anyway, I mention this story to make a point. Untrained designers often think that to bring attention to particular topic, brand, concept, instruction, or other point of focus, one must surround that object of attention with as much crap pointing to it as possible. They want to say “Look at me, I’m important,” but in the process they are surrounding their message with noise and distractions.

However, the opposite is far more effective. If you want to focus your user’s attention on something, surround it with nothing. Completely blank space. No flashing arrows, no color gradients, no sun bursts. An object sitting in the middle of nothing is a remarkably effective way to grab attention, and I ran usability tests both at my old job and in academia to prove it.

This conclusion is counter-intuitive, but as you look around at sites with good design, you can see they almost always adhere to this principle. If you want to get your users to do something, see something, read something, etc, then surround that thing with nothing. Both Google’s homepage and Google’s AdWords do this with great success. A List Apart uses lots of white space very effectively, and most would agree they are king when it comes to good design in the web 2.0 / blogging world. Look at a recent self-identified failure like overstock.com for a nice example of failing to use white space to draw attention and focus the user.

I miss mechanical feedback on the recent slew of “cutting-edge” consumer electronics (CE) devices I have used. CE designers recently have been using flat buttons with pressure actuators (non-mechanical) instead of mechanical feedback buttons because they are sleeker or sexier, but, for me, they’re just less usable.

For example, I want a volume dial on my ipod that physically moves, so I can gauge how much I am adjusting the volume using my hand instead of my ears. On my iPod 4G I have to guess-and-check my way to an appropriate volume when I am adjusting the level while not looking at the screen, like when my iPod is in my bag. If I had mechanical feedback, I could adjust the volume more accurately.

This is a subject I care about because I once worked for a gaming mouse manufacturer. I liked the concept, but hated the device because half the buttons didn’t provide adequate mechanical feedback.

This subject is on my mind because I just read an interesting article on mechanical feedback vs non-mechanical feedback devices.

(Image by splorp on Flickr)

The official Firefox 2.0 release is now available on the Firefox download site, but their public-facing pages won’t list Firefox as available for download until tomorrow according to BetaNews.

I downloaded and installed it. Unfortunately, the upgrade broke my del.icio.us toolbar, which is currently incompatible with FF 2.0. I’m sure that compatibility issue will be fixed quickly; it’s just a small glitch. Other than that one problem, the upgrade process was painless.

The best new feature is definitely the built-in spellchecker. Finally! I’ve been aching for this feature for a long time. It works in real-time as you type, and the recommended choices are pretty smart based on my initial use.

The other big feature that solves a significant usability problem with FF 2.0 is a list of recently closed tabs in the “History” menu. I frequently accidentally close a tab, and then smack my forehead in disbelief that it’s not a simple problem to “undo.”

The look and feel didn’t change substantially, but that’s a good thing IMHO. Very often in UI design, a designer will re-design an interface claiming that the new design is “better.” Whether or not a design is “better” is often subjective, but the design is usually quite different, and different is inherently worse because it requires relearning behavior and breaking muscle memory habits. So, I’m glad pretty much everything is in the same place it used to be.

There is one exception to the consistent UI. The “x” to close a tab is now on each individual tab instead of over on the right side of the tab bar where it used to be. I prefer the new location (I had my Firefox setup to place the “x” on the tabs by modifying the about:config), but I imagine this will affect some users’ habits. Hopefully the change will be well-received once people re-train their reflexes.

Overall, I’m very enthusiastic about the latest Firefox release. Go get it now.