Designing the Next Generation of Web Applications

[Live Blogged Notes from UX Week 2006]

Jeffrey Veen

This is about the web. All week we've talked about other things, about larger topics of design.

WEB 2.0 is what he's been talking about lately. There is growing skepticism because it is associated with hype but that's shame. Let's look at the design aspects of this new web 2.0. Let's look at boom and bust cycles to understand boom 2.0.

It makes Jeff nervous to see what we do on the cover of Business Week. Looking at an article about Blogs in corporations. But the definitions they use don't make any sense.

Let's look at historical boom and bust cycles. In the seventeenth century something very similar happened in the Netherlands. There was an innovation, a ton of funding, and a massive change in the economy. The change was in shipping routes and tulips came from Turkey. There was a fungal infection and tulips started growing in crazy colors. People started speculating and investing in tulip bulbs, mortgaging their houses and everything! This of course collapsed.

The invention of the steam engine has similarly intense impacts. It took away the need for the market to be where the resources were. Same with the car and the assembly line.

Even in Tokyo in the eighties. Look at the real estate market there (or here now for that matter).

We all remember the first boom. We remember when the fifth pet stored IPO'd on the web. But this boom was followed by a bust. This is because people assume the hockey-stick growth will continue forever.

If you look at the industry today venture capital is way up, especially at the Angel level. But this can't go on forever. Boom and bust cycles will go on forever. We'll go up and then the market will correct for itself but there will still be lasting change from new developments.

So what can we pull out of web 2.0, what can we take with and do good work because that's the point.

The term comes from O'Reilly media. They were trying to decide what to name a conference and came up with the well-known meme map.

All of these elements: community, the long tail, platform, etc.

So let's stick some of these web 2.0 concepts into the elements of user experience and see what we get.

The Blogger design. It is hip and trendy but what is this thing? This was no longer the original Blogger app, this was now a Google property that new people were discovering every day. They took the features and elements of the application and represented that on the homepage. The structure is the IA end of things. How is the content organized and how is that organization expressed.

A layer up from that is the scope. What do we do that can make it to the web site? What piece is going to need human interaction? What piece will be handled in other realms like call centers or face-to-face interactions? We have to be clear to not let that scope get too big.

And then the highest level: what is our strategy? With all the interest and attention, what do we do?

So let's look at these.

Surface problems are something that everyone has an opinion about. When looking at a redesign this is what everyone comments on. Wow that logo is big or wow that's really blue, not wow the scope is too large.

Let's look at an actual example: We have a bunch of data, how do we explain it someone else? We need to use design to communicate this information. Looking at number we have no context, so let's add some meta-data.

We add a title: Average Rainfall. Now we have gone from data to information. We've added column and row names. Now we have meaningful information.

So let's add a dash of Tufte. Better font. Scale back chart junk. Emphasize the data with bold. Let's add some color where the background color intensity and the number correlate.

So how can we make this better? Should we scale back granularity? Who is the audience? Meteorologists might want all the numbers but maybe a sidebar on Expedia only needs a graph.

Ah, USA Today. Decorating data is not communicating.

Let's replace the numbers with scaled raindrops that still have the varying color intensity. Now we have a design for a particular audience.

For hundreds of years designers were used to having total control. On the web that just isn't true. On the web we can build tools. Maybe we could build an app. Use design techniques to let users control data. We need to step back and give up control and give control to our users.

It's about building trust very quickly.

"Even if a web site is highly usable, provides useful information in a logical arrangement, this may fail to impress a user whose first impression of the site is negative." This is after 1/20th of a second. From Carlton University survey. Also see Emotional Design and Persuasive Technology.

No matter how much work you have done, it's all about trust on the surface.

• Visual appeal
• Cognition & Emotion
• Halo effect

If you start with data you need to give that data to your users. Let them control it and feel like they have control over things.

So let's look at the skeleton of this, putting items on the screen so people can use them.

A few years ago Jeff was comfortable with this. Collaborate on a white board. Draw an interface. Turn this to wireframes. When you click on this, this thing happens. That's it.

For some reason, everything changed. It wasn't a technological innovation. It was companies like Google taking mail and maps and thinking of them as more interactive experiences. There isn't anything technologically new about Ajax, it is about a stable enough platform used by an audience that has matured enough to be able to take this collaboration of technologies and really use it.

Kayak is one of these Ajax enabled search sites. What is great about this is that you can play with the results. This is about users exploring without the penalty of navigation.

Ajax is like "roller skates for the web."

Core principles:

• Discoverability
• Recoverability
• Context
• Feedback

Discoverability: Make finding stuff easy

Look at the Kayak autocomplete airport box. Not really possible without Ajax but such an effective use of the technology. It helps users avoid mistakes and find what they want.

Look at Google maps. The discoverability of features is a mixed bag here. Realizing that you can drag it around what difficult but once we understood it was impossible to work without it. A fundamental change.

Look at the Panic shopping cart. Is the drag-and-drop shopping cart discoverable? Maybe but innovating in the shopping cart is risky.

Recoverability: Actions should be without cost

Catch errors before they happen. Look at iFilm's sign-up form. It validates e-mail and username uniqueness in real-time as you type. Such a simple example of helping users not mistakes instead of simply recovering from mistakes. They had to take it down because of the back-end engineering challenges. These changes have pretty profound impacts on our teams and our organizations. Can we make them Ajax enabled is not just user experience, it is the whole infrastructure.

Look at Ajax enabled file upload meter. This is a very simple way to help people through the experience of dealing with the web.

Feedback: How does the system respond

We got lazy with this. In the past someone would do something, hit a button, the browser would take the page away, a new page would come back and the user would look for a change. With subtle interactions without reloading pages it can be disorienting. See the yellow-fade effect.

So the structural level, how we organize this data.

Look at your Documents folder on your Mac. You create a folder, you throw stuff in there after your Desktop has too many files on it. But we don't do this any more because search on the desktop has gotten so good. Look at Spotlight and Google Desktop Search.

Instead of living in the Finder, we now live in search. The filing metaphor is breaking down and being replaced by ad hoc personal systems of metadata. What is interesting is how this has migrated to the web. See del.icio.us. You navigate by tags that you have created.

Tags allow us to organize content for ourselve in ways that have arbitrary meaning. Look at flickr tags like on this photo Jeff took of a lizard in the park.

The way people tag content is the structure of flickr. The experience is all about manipulating and exploring this ever-changing structure. Global use of a tag, popularity of tags, clusters, through time, finding people by tagging, friend networks, comments, etc. Instead of finding these connections manually they just happen and they just work.

This is about stepping back and enabling users to have their own experience instead of trying to control every piece of their experience. This is about making tools.

So let's talk about scope.

Scope is increasingly interesting because of commoditization. In 1996 you had to go raise ten million dollars for your big idea. You had to be a category leader. You had huge startup costs and needed to be huge.

Now we buy commodity hardware, use free software, and use pay-for-click advertising. This leaves us with the ability to try out any idea for virtually no money. That's why you see all these new startups with a relatively small amount of startup capital.

Everyone thought maps was solved. But Google Maps came along and took this old problem and solved it in a new and innovative way with a new emphasis on audience participation.

An example is the CMS. These used to be beastly, complicated, and seen as necessary for most content on the web. But they fail. Using simpler solutions to constrain the problem has been very successful. The problems were not about controlling the sea of data, they were about access. What if you start with a blogging platform instead of building a new platform. (This is what web frameworks are all about. If you start with a framework and operate in the happy land of convention then you don't have to worry about configuring things that aren't mission critical.)

These new technologies, something simple as blogging, give us amazing abilities.

One of the other innovations of Google maps was about making the API open. And thus came mashups. For example Chicago Crime. This is citizen journalism by one guy that build a powerful app without having to worry about building a mapping interface.

So let's look at Measure Map. Most people are interested not in the things most analytics apps focus on, instead they want to know who is linking to them. The big idea is that your idea, your site, is just one sliver of the overall experience. People pick and choose all over the place. Embracing the idea that you play well with anyone else.

Who talked to a person to book their travel to come here? Nobody. A layer of the travel industry was wiped out by giving people the ability to book their own trips.

This is happening everywhere. This is about the Amateurization of the economy, the architecture of participation is all about this. If we are going to treat our audience like peers we want to make them experts in whatever they are doing.

A few years ago there was a landmark moment between blogs and journalism. The Dan Rather Bush memo story. Blogs asked "is what CBS is saying is true?" A guy looked at the document and happened to an expert on old typewriters saw that the apostrophe couldn't be made that way. This doesn't mean that the MSM is going away, it mean that there is a radical change in the way media exists in our lives. It was a huge deal.

Powerful tools in the hands of passionate amateurs changes all the rules.

If you can find the inefficiencies that industries have been making money on. Look at Craigslist, it took away the business model for local newspapers.

But back to travel. We put powerful tools in the hands of people. Now the next step is showing them to be expert. For example, flyspy and farecast. Look at TripHub.

Look at what Blogger did. Now look at Vox. They not only make it easy to write, they make it easier to know what to write about.

Yes there will be another correction but there's a lot we can do to avoid the mistakes of the past and can learn from what's going on now.