Experience Ajax - Workshop For Designers

Slide 1: Experience AJAX Workshop for Designers June 20, 2006 WEB 2.0 & AJAX Ravi Shankar, Oracle Sreedhar Gunduboina, ADP usability.in USID 2007

Slide 2: 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 ?

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

Slide 4: 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.

Slide 5: 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

Slide 6: 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

Slide 7: 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

Slide 8: Introduction to AJAX WEB 2.0 & AJAX usability.in USID 2007

Slide 9: 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

Slide 10: 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.

Slide 11: How is AJAX different Jesse James Garrett – Adaptive Path

Slide 12: 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

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

Slide 14: 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

Slide 15: 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

Slide 16: 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)

Slide 17: 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

Slide 18: 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

Slide 19: 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

Slide 20: 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

Slide 21: 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/

Slide 22: Slides, demo files and resources are available at http://www.usability.in/ajax WEB 2.0 & AJAX Contact us Ravi Shankar, Oracle ravishankar.s@gmail.com Sreedhar Gunduboina, ADP sridhar.s@gmail.com usability.in USID 2007