Beyond AJAX by Jesse James Garrett Notes

Jesse James Garrett from Adaptive Path

Notes made at @media07, Islington, London

Their work:

Flickr, Creative Commons The elements of user experience - check it out book also available. jig.net - visual vocabulary Blog - comes from one of founders of adaptive path Jesse coined the word - "AJAX". Web 2.0 - need bright coloured logo - lol

What is the web good for (or at)?

Example, early TV, modeled on Radio, and Live theatre. As tv evolved, in the mid 1950's there was a flowering of activity and innovation. 10 years on the evolution of the web, similar flowering.

It'a a big web out there, be a part of it

We are contributing to the web when we put something out there. Most compelling example is Flickr - Because they acknowledged the existence of a larger web. i.e. Uploaders, Web tools and publishing, prints and yahho intergration.

Interfaces, not pages - applications, not sites

Allow people to manipulate data, away from the "page metaphor" model. KAYAK shown as an example - aggregating results from many web sites, and manipulate results

Products that get better with use

Web is most powerful when people are connected together. YouTube shown as an example. Showing the band, "OK Go" - Here it goes again. Made their own video, put it on YouTube, and the video endded up on MTV. It won a grammy! Not only did it further OK Go but also YouTube - then google bought it for 1billion dollars.

Delivering rich experiences

In ancient greece, Ajax was a mighty warrior, a missile from the cold war. First email was from a Dutch soccer fan. lol People want to define AJAX in a specific technical way - which misses the point. But can be characterised by two points:

1. asynchronous interaction model - we are not just trying to retrieve a page anymore
2. Browser-native technologies - If you asked someone to create a rich interaction on the web, all the caveats such as using windows xp, with service pack 2 - lol

Favourite metaphor for AJAX - "Roller skates for the web!" - Bruce Sterling Javascript creates a sense of fluidity. Replicate the feeling you get from using ggoogle maps. The story begins in 1886, Scientific American Supplement - a new photographic apparatus. Did not work, as George Eastman, who created a continuos roll of film, instead of plates. He said, "You press the button, we do the rest". He constructed technology to work with his film, he dubbed the product - "The Kodak". He reduced the 19 steps from the SAS article to 3 steps. Even the marketing experience was simplified. He hid the complexity from the user. It transformed the industry, unimaginable before. People didn't see the possibilities, map sites were as good as they were in 1998. GMail was the first AJAX app. This got Yahoos attention, felt threatened because of Yahoo mail. They called a meeting, compared their stuff to the dynamic interfaces of google. Yahoo maps was not on the list.

How do you create a transformative product?

What do you want users to say after you have developed - "Can't live without it." Steve Jobs given as an example. "Over simplified quote". When a new technology comes out. WordStar screen shot given as an example, and when compared to a typewriter. i.e. video cassette recorders, How do we get past technological mindset. Then you get into the problem, and you rely on product features - showing Microsoft word with all the tool bars turned on. The blinking unset clock "The really great person will keep on going - and create a beautiful elegant solution, that works." Steve Jobs, 1984 Stop relying on technology Stop relying on features Rely on user experience instead! Eastman could have replaced plates with film, but instead he stood back and created something special. TiVo shown as an example, they could have just replicated the Diamond Rio pmp300 - first mp3 player, modeled on a cassette player. The record industry tried to ban the pmp300. 3 years later, the Apple iPod, did less, cost more but then took over the market. The success is due to the fact that the iPod acknowledged the way that users interact with technology.

We respond to products as if they are people

Products are people too

We develop a powerful, emotional connection with the product. The products that work best, are ones that have a distinct personality. Shell is a term for user interface. Users only care about the user interface - the rest is magic.

The best Web 2.0 apps start with the user interface

"Designing from the outside in" - Tim O'Reily i.e.

Experience Strategy

• Google calendar started out - fast, visually appealing, and joyous to use.
• Drop dead simple to use.

Google Calendar has already overtaken the no2 player. They set a star to sail their ship buy Apple have created an end to end system, beyond what the ipod on it's own can deliver. Flickr experience - check out Flickr's about page! i.e. We want to help people ie, the role that the product plays in the lives of the users.

The experience is the product

FOWD - Designing for Web Apps

Ryan Singer of 37signals in Chicago, has helped create such celebrated products such as Basecamp, Backpack and Campfire. Not only is he a good designer, he is also a great speaker and I enjoyed his Future of Web Design presentation.

Ten tips for better signup forms

Making stuff up is hard

Ask easy questions first, this helps build momentum. Asking for a name is easy, asking for them to create a username is not.

Username is taken, try this…

Use AJAX to do live checking on usernames. e.g. Rockstar1966 is taken…

Keep it simple

Design the form with the minimum amount of information possible. Disregard passwords at this stage.

Words are your friends

Keep it friendly and conversational. i.e. "Which room would you like to reserve?"

Form Validation

(262) 914 - 5802 and 262 914 5802; are the same number. Make it easy to enter information in any format.

Muse Me

Show examples beneath form fields. i.e. beneath a "Company" form field, you could have "Apple, HP, BMW" .

Tell me what I'm gonna get

Remind people of why they sign up.

Kind Error Handling

Do not use BIG RED CAPITAL LETTERS, instead try this:
Please check the following:
Your NI Number.

A Warm Welcome

The whole experience should be comfortable, the first time a user signs in, they should get a special welcoming page. i.e. "Thank you for signing up".

Just give me the keys

Generate a brief sign up email, then move the getting started guide to the app.

Conclusions

Momentum, think about users, signup doesn't stop at submit, users don't worry about the tool, they just want to do their "thing" — let them get on with it.