Experience AJAX Workshop for Designers June 20, 2006 Ravi Shankar, Oracle Sreedhar Gunduboina, ADP

What is Web 2.0? Lot of current technologies have been around for sometime.. Web Services API.. Around since 1998 Web Syndication- since 1997 AJAX- 1998 Services on the web (payment, information, ..) - 1990s Blogs.. As web diaries/journals around for a long time Online music around since mp3.com Encyclopedias & info databases since Yahoo & Britannica… Then what is next generation internet & Web 2.0? Is it Buzz, Marketing Hype? or Changing attitude ?

Lot of current technologies have been around for sometime..

Web Services API.. Around since 1998

Web Syndication- since 1997

AJAX- 1998

Services on the web (payment, information, ..) - 1990s

Blogs.. As web diaries/journals around for a long time

Online music around since mp3.com

Encyclopedias & info databases since Yahoo & Britannica…

Then what is next generation internet & Web 2.0?

Is it Buzz, Marketing Hype? or Changing attitude ?

Attitude shift from Web 1.0 to Web 2.0 Publisher (Powerful) Users (Humble, Grateful) Publisher (Still in Control) Users (Sharing Information, Demanding More) Publisher (Humble, Sharing content) Users (Empowered, Interacting, Creating) Enablers, Brokers , Networks, Search Engines

Defining Web 2.0 “Web 2.0 is made of people” Key Aspects of Web 2.0 The Web and all its connected devices as one global platform of reusable data and services Data consumption and remixing from all sources, particularly user generated data Continuous and seamless update of software and data, often very rapidly Rich and interactive user interfaces Architecture of participation that encourages user contribution user ownership of data Web 2.0 is an attitude not a technology.

“Web 2.0 is made of people”

Key Aspects of Web 2.0

The Web and all its connected devices as one global platform of reusable data and services

Data consumption and remixing from all sources, particularly user generated data

Continuous and seamless update of software and data, often very rapidly

Rich and interactive user interfaces

Architecture of participation that encourages user contribution

user ownership of data

Web 2.0 is an attitude not a technology.

You are part of web 2.0 You are part of web 2.0 Every time you search, you make google better You are Blogging, Commenting, tagging, Digging, Wikiing People talk about you - Technocrati, coComment, Flickr System Changes Single idea = New business Build in smaller parts Add to the ecosystem Offshore; Small teams; Designers/Developer Blend; Agile; Short turn around

You are part of web 2.0

Every time you search, you make google better

You are Blogging, Commenting, tagging, Digging, Wikiing

People talk about you - Technocrati, coComment, Flickr

System Changes

Single idea = New business

Build in smaller parts

Add to the ecosystem

Offshore; Small teams;

Designers/Developer Blend;

Agile; Short turn around

A confluence of a number of trends Shaking up the page Desktop metaphors; Cinematic visual behaviors The RIA model will evolve to greater heights Focus on User, rich usable interfaces Letting it go free Traditional software needs to be redefined Access to content and services – RSS, APIs The Mashup phenomenon will mature Playing with others The economy of mediating participation & consumption An increasing attention scarcity Online social communities Semantic web, Interactive web, Social Web

Shaking up the page

Desktop metaphors; Cinematic visual behaviors

The RIA model will evolve to greater heights

Focus on User, rich usable interfaces

Letting it go free

Traditional software needs to be redefined

Access to content and services – RSS, APIs

The Mashup phenomenon will mature

Playing with others

The economy of mediating participation & consumption

An increasing attention scarcity

Online social communities

Semantic web, Interactive web, Social Web

Key Technology Constituents Unobtrusive RIA techniques such as Ajax Semantically valid XHTML, CSS or Microformats Advanced UI languages such as XUL and SVG Syndication and Aggregation of data in RSS/Atom Clean and meaningful URLs Weblog publishing Flash Remoting REST or XML Webservice APIs Semantic Web (Tagging) Some social networking aspects

Unobtrusive RIA techniques such as Ajax

Semantically valid XHTML, CSS or Microformats

Advanced UI languages such as XUL and SVG

Syndication and Aggregation of data in RSS/Atom

Clean and meaningful URLs

Weblog publishing

Flash Remoting

REST or XML Webservice APIs

Semantic Web (Tagging)

Some social networking aspects

Introduction to AJAX

Need for AJAX Is it for Developers or Designers? Issues with web applications Page based High level of granularity Almost all processing on the server High latency Not responsive To take web applications to desktop interaction To increase Web's interactivity, speed & usability Enhance usability & User Interaction

Is it for Developers or Designers?

Issues with web applications

Page based

High level of granularity

Almost all processing on the server

High latency

Not responsive

To take web applications to desktop interaction

To increase Web's interactivity, speed & usability

Enhance usability & User Interaction

Defining AJAX - Asynchronous JavaScript And XML What it is NOT Ajax is not a new technology. What it is is a Web development technique What has enabled AJAX The de-facto standard XMLHttpRequest Ajax incorporates standards-based presentation using XHTML and CSS; dynamic display and interaction using the DOM; data interchange and manipulation using XML and XSLT; asynchronous data retrieval using XMLHttpRequest; and JavaScript binding everything together.

What it is NOT

Ajax is not a new technology.

What it is

is a Web development technique

What has enabled AJAX

The de-facto standard XMLHttpRequest

Ajax incorporates

standards-based presentation using XHTML and CSS;

dynamic display and interaction using the DOM;

data interchange and manipulation using XML and XSLT;

asynchronous data retrieval using XMLHttpRequest;

and JavaScript binding everything together.

How is AJAX different Jesse James Garrett – Adaptive Path

Who is using it Google Google Maps Gmail Google suggest Yahoo! Flickr del.ici.ous 37signals Backpackit Basecamp Tadalist Amazon –A9, Thousand's of businesses

Google

Google Maps

Gmail

Google suggest

Yahoo!

Flickr

del.ici.ous

37signals

Backpackit

Basecamp

Tadalist

Amazon –A9,

Thousand's of businesses

Layers of AJAX Framework Communication libraries DWR, JSON-RPC, DOJO.io.bind() User Interface Toolkits DOJO, RICO, Yahoo UI Ajax based RIA Frameworks Bindows, Smart client, Backbase Web Application frameworks with AJAX Extensions Shale, Echo2, Ruby on Rails XMLHTTP Iframe ……. Utilities & tools

What’s wrong with AJAX Breaking the back button Not giving immediate visual cues for interaction Not using links I can pass to friends or bookmark A big problem for spidering and search engines Too much code makes the browser slow Blinking and changing parts of the page unexpectedly Leaving offline (poor connectivity) people behind Asynchronously performing batch operations Changing state with links (Get Requests) Non obvious navigation to drive non obvious result

Breaking the back button

Not giving immediate visual cues for interaction

Not using links I can pass to friends or bookmark

A big problem for spidering and search engines

Too much code makes the browser slow

Blinking and changing parts of the page unexpectedly

Leaving offline (poor connectivity) people behind

Asynchronously performing batch operations

Changing state with links (Get Requests)

Non obvious navigation to drive non obvious result

What’s wrong with us… Let user to adopt to new UI Conventions Not cascading local changes across the page Mimicking browser page navigation imperfectly AJAX everywhere – overdoing like FLASH Using Ajax for the sake of Ajax Have clear idea about ROI for RIA Finally - Ajax is just another tool

Let user to adopt to new UI Conventions

Not cascading local changes across the page

Mimicking browser page navigation imperfectly

AJAX everywhere – overdoing like FLASH

Using Ajax for the sake of Ajax

Have clear idea about ROI for RIA

Finally - Ajax is just another tool

Design Concepts and Concerns Desktop application metaphor Responsive Specific metaphors (i.e. WIMP) Cinematic interaction with animation What about ubiquitous Web metaphors? Back-button Hyperlink No windows (?) Understand web application vs website Meat is in the details And the details are behavioral And compartmental (no longer are we purely interested in the whole)

Desktop application metaphor

Responsive

Specific metaphors (i.e. WIMP)

Cinematic interaction with animation

What about ubiquitous Web metaphors?

Back-button

Hyperlink

No windows (?)

Understand web application vs website

Meat is in the details

And the details are behavioral

And compartmental

(no longer are we purely interested in the whole)

Design Concepts and Concerns There is no page; only pathways Shaking up the page - Desktop metaphors Cinematic visual behaviors Time is now our driving axis Key design parameter to be explored Think in terms of time and context Designing for different States In classic web, design decisions are built into the browser. In Ajax, they are explicit choices by the designer dataflow analysis (State chart diagram) Understand what user wants Do not break what the user is focusing on Manage attention effectively

There is no page; only pathways

Shaking up the page - Desktop metaphors

Cinematic visual behaviors

Time is now our driving axis

Key design parameter to be explored

Think in terms of time and context

Designing for different States

In classic web, design decisions are built into the browser.

In Ajax, they are explicit choices by the designer

dataflow analysis (State chart diagram)

Understand what user wants

Do not break what the user is focusing on

Manage attention effectively

Design Concepts and Concerns Letting it go free Access to content and services -- RSS, APIs Build in reusable blocks, visualize big picture Encourage participation Rate Review Comment Tag Blog Feed Re-mixing & Mashing Combining different content sources Letting people use your content source Enabling content and services to be mixed

Letting it go free

Access to content and services -- RSS, APIs

Build in reusable blocks, visualize big picture

Encourage participation

Rate

Review

Comment

Tag

Blog

Feed

Re-mixing & Mashing

Combining different content sources

Letting people use your content source

Enabling content and services to be mixed

Design Concepts and Concerns Innovate process, methods & tools Design Validate Document Communicate Changing our approach Prototyping and Documenting New patterns for people designing for the web Know the tech, work closely with development Breaking down interaction > structure > presentation Can’t test for use in the context without interaction Understand the big picture, design for the user

Innovate process, methods & tools

Design

Validate

Document

Communicate

Changing our approach

Prototyping and Documenting

New patterns for people designing for the web

Know the tech, work closely with development

Breaking down interaction > structure > presentation

Can’t test for use in the context without interaction

Understand the big picture, design for the user

Rich Internet Apps & Alternatives Plug-in based Flex, SVG Browser Based XUL XAML UIML Laszlo XML Big Tickets Adobe Apollo / AIR Microsoft Silverlite / WPF/E Sun JavaFX Google Gears

Plug-in based

Flex,

SVG

Browser Based

XUL

XAML

UIML

Laszlo XML

Big Tickets

Adobe Apollo / AIR

Microsoft Silverlite / WPF/E

Sun JavaFX

Google Gears

Resources O’Reilly - Web 2.0 - http://www.oreillynet.com Jesse James Garrett – AJAX - http://blog.jjg.net/ AJAX Patterns - http://ajaxpatterns.org/ AJAXIAN - http://ajaxian.com/ AJAX Matters - http://ajaxmatters.com/ AJAX info - http://ajaxinfo.com/ AJAX Lessons - http://www.ajaxlessons.com/ Functioning Form - http://functioningform.com/

O’Reilly - Web 2.0 - http://www.oreillynet.com

Jesse James Garrett – AJAX - http://blog.jjg.net/

AJAX Patterns - http://ajaxpatterns.org/

AJAXIAN - http://ajaxian.com/

AJAX Matters - http://ajaxmatters.com/

AJAX info - http://ajaxinfo.com/

AJAX Lessons - http://www.ajaxlessons.com/

Functioning Form - http://functioningform.com/

Slides, demo files and resources are available at http://www.usability.in/ajax Contact us Ravi Shankar, Oracle [email_address] Sreedhar Gunduboina, ADP [email_address]