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

Interface Design Juggling by Dan Cederholm

Notes taken at @media 07 at the Business Design Centre, Islington.

SimpleBits.com

Inspiration to the talk comes from last year in Oregan, which was held at the sametime as a juggling convention.

Juggling is... Keeping everything in the air! Special Announcement ToupeePal - Wig 2.0? toupeepal.com

Color

Start with a small color palette Color is emotional Online Color Tools wellstyled.com/tools/colorcecheme2/ Colorjack Take shades from a nature images Pixelate an image in Photoshop Dan normally starts with a blank canvas Then fill with color Take a start point i.e. a logo 4 colour palette Reuse the colors thoughout the design Then from the color palette select some lighter shades to compliment Link color is important. Keep the link color consistant. Squint at the page

Typography

Great typeography is invisible Web design is 95% typeography Too few fonts? In the renaissance the italian artist only had one font. DO THE BEST WITH WHAT WE HAVE Letter spacing, italicising Georgia - headings Verdana for everything else CSS tags make iti nteresting Good book - The elementso of typographic design Use the best ampersand available - different fonts The element of of typographic design for the web - webtypography.net Used Avenir for logo and search button Veer.com - buy a t shirt, and they'll send you stuff. Myfonts.com - newsletter

Favicons

The most importanty design element of any site, no really subtraction.com tanyamerone.com How to create favicons Three choices Scale the mark down to 16 x16 Choose a fragment of the logo Use something unique Iconographer is a good programme - create in Photoshop and paste into Iconographer

Add detail without adding complexity.

Understamd the limitations of current browsers

Suggest the box

Style elements of the box - add subtle border to backgorgn veerle's blog - good example

Microformats

Microformats are... microformats.org - about us page explains Mark up a contact like this Go to microformats to find the right style for your data - i.e for contacts, events etc hCard - Contact Information Go to the online code creator microformats.org/code/hcard/creator See Simplebits example - works using technorati THIS STUFF WORKS NOW Planting Seeds - Use semantic markup to allow other people to do cool stuff with it SPARQL.org - Scrugy - uses microformats to parse cork'd data - like an 'accidental' API Search for Can your website be your API? ToupePal uses hReview for reviews and hCalendar for events http://simplebits.com/publicatopns/speak/juggling What does the h stand for in hCard etc - means html