Designing Powerful Web Applications with AJAX & Other Rich Internet Applications David Malouf & Bill Scott UI 11 Cambridge, MA October 9, 2006
Breakdown of the day
Section 1: … from the beginning
Defining RIAs & RIA Technologies
How to pick the right technology for your project
Looking at current examples of RIAs
Section 2: Interaction Design for RIAs
AJAX Design Patterns
Section 3: Design Practice
Tools of the trade
Communicate this RIA (exercise)
Section 4: Design your own RIA
What is “design”—the verb?
Design your own RIA (exercise)
What is an RIA?
Give credit, where credit is due …
Macromedia (today Adobe) coined the term “Rich Internet Application” to describe the growing trend of adding media richness (more motion internal to a single page view) due to the creation of applications using their product Flash MX.
The simple answer:
What does it mean for us today?
Emulating desktop behaviors
Client-side (in browser) …
Business logic management
Re-definition of the “page” metaphor
Connection to local machine (optional)
Emulating Desktop Behaviors
Drag & Drop
Menu & Tool bars
Windows & Wizards
Google Spreadsheet Gliffy
Cinematic Effects: Animation for added context
Where am I going? Where was I?
Object state change
Animation for aesthetic reasons is also viable
What happens to our page? “ There is no [page].” - Neo “ There is no page; only pathways” -- Emily Chang & Max Kiesler of ideacodes A page is a metaphor of a moment of uninterrupted context Kayak NetFlix
What’s all the fuss about Web 2.0?
O’Reilly as trend spotter …
RIAs is only one component of the trend
Mashed up & Remixed
Open & iterative
Limited designer role (if at all)
Separately nothing new, but a trend (critical mass) makes it worth noting.
Sir Tim Berners-Lee’s warning not to create new bubble – [The Register – Aug ’06]
The Technologies Behind RIAs
AJAX = DHTML + XML (or JSON)
Others not to be discussed
XUL, CURL, etc.
Pure Browser: DHMTL & AJAX
Nothin’ but browser
Uses very open technologies
Allows for simple richness
AJAX – new info from server without page refresh
Server returns XML
Visualizing the AJAX effect JJ Garrett-Ajax: A New Approach to Web Applications (Feb 2005)
Flash (by Adobe)
Requires an installed plug-in
Created to bring animation and interactivity to the web
Uses vector graphics
Not native, but ubiquitous // open format
Visual development environment
Tied to Flex development environment
Different browsers have different ways of adding extensions to themselves.
Behaves as if a part of the browser
Greasemonkey for Firefox
Del.icio.us Firefox Add-on
Java & ActiveX (with .NET)
Installed applications that can …
run inside the browser window
control the browser
connect the browser to the rest of the local client
Virtual Machines & Frameworks
Java requires a pre-installed virtual machine or emulator. Once installed any Java-base application can run.
Frameworks are a collection of components and controls
.NET requires the installation of the framework
SWING or AWT are two frameworks for Java
Ruby on Rails
Yahoo! User Interface Library (YUI)
Choosing a Technology
Training & capabilities of team against time and resources available for project
The Design (functionality, brand)
Browser to desktop connection
Can my users install something?
Tech savvy enough
Enterprise allow them to
Do I plan on “tweaking” rapidly, or will my product follow a more standard release cycle?
Am I willing to use closed or otherwise non-ubiquitous technologies?
How much integration do I need to add between the browser and the rest of a user’s local desktop environment?
Does my design require cinematic effects between scenes, or just within them? (or none at all?)
At what point do I need to manage calls to and from a remote server in my design?
Keeping up with the Tech
Well it is really up to you …
… well you are here.
Exercise: Let’s start a project
Goal: Pick a technology for your project. This project will be continued.