Designing Powerful Web Applications Using AJAX and Other RIAs

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
Understanding Patterns
AJAX Design Patterns
Design Principles
Section 3: Design Practice
Tools of the trade
Designing
Communicating Design
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:
Connected
Distributed
Local
Intelligent
Moving

What does it mean for us today?
Emulating desktop behaviors
Cinematic Effects
Client-side (in browser) …
Data management
Business logic management
Re-definition of the “page” metaphor
Required connection to local machine (optional)

Emulating Desktop Behaviors
Drag & Drop
Menu & Tool bars
Windows & Wizards
Panels
Trees
Form validation
Non-HTML controls
Accordian
Combobox
Spinner box
Sliders
Keyboard Actions
Context Menus
Google Spreadsheet

Cinematic Effects: Animation for added context
Where am I going? Where was I?
Action completion
Object state change
System progress
Animation for aesthetic reasons is also viable
LaszloSystems

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

What’s all the fuss about Web 2.0?
O’Reilly as trend spotter …
RIAs is only one component of the trend
Other components
User generated
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
DHTML – HTML + JavaScript + CSS
AJAX – DHTML + XML
Flash
Browser Extensions/Plug-ins
Java
ActiveX
Others not to be discussed
XUL, CURL, etc.
Backend Frameworks

Pure Browser: DHMTL & AJAX
Nothin’ but browser
Uses very open technologies
Allows for simple richness
AJAX – new info from server without refresh
A JavaScript call makes a query to the server
Server returns XML
JavaScript manipulates CSS to reformat XML in place on existing screen

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
Goowy

Extensions
Different browsers have different ways of adding extensions to themselves.
Behaves as if a part of the browser
Toolbars
Status bars
Sidebars
Menu add-ons
Greasemonkey for Firefox
Google Notebook

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
IntraLinks

Backend Frameworks
DOJO
Script.aculo.us
Rico
Ruby on Rails
ASP.NET
Yahoo! User Interface Library (YUI)
Atlas
Backbase

Choosing a Technology
Deployment Environment
Local clients
Enterprise considerations
Iteration cycles
Development Environment
Training & capabilities of team against time and resources available for project
The Design
Browser to desktop connection

Deployment
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?

The Design
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 …
Books
Blogsphere
Tech Meetups
UnConferences
Conferences
… well you are here.

Exercise: Let’s start a project
Goal: Pick a technology for your project. This project will be continued.
Criteria for the design
Application Service (Hosted)
Infinite Audience
Business-to-Business community
File Management System
Moving lots of files
Collaborative
Media Centric
Criteria for Development
Old-school software engineering;
Highly formally educated group

Time to explore
Empressr – Desktop Presentation
NetFlix – DVD by mail
Meebo – Web-IM
Flickr – Photo Sharing
Zimbra – Web Groupware

Section 2 HERE
BILL’s Section

Section 3: Design Practice Designing and Communicating Design

Designing vs. Communicating vs. Documenting
Designing –conceive an idea through a design process.
Communicating
Get buy in
Collaborate to ensure proper implementation
Documenting
Archive ideas
“ Hit by a bus” contingency

Design-ING
!= conceiving, creation, producing
Formalized process
Studio
Divergent unrefined thinking followed by
Evaluation, testing, and reflection

3 basic steps to designing
Sketching
Framework and Language
Refinement

Sketching What do you see here? Rapid & Rough Multiplicity Communicate CONCEPTS

Framework and Language Create Structure Navigation Language Object Action Modifiers

Refinement Details Behavior

Designing Behavior
Time: Behavior cannot be static
It is not “flow” between contexts;
happens within a context
Multiple states
Sometimes Fluid motion
Hard to communicate “intra-contextual” behaviors using static renderings
More difficult to test it.

Sample Process
Sketch on paper/whiteboard
Scan/Photograph into digital environment
Trace (or re-draw) using computer tool
Use “ blocking ” tool to define framework
As further detail is required to refine framework fill in blocks using a higher fidelity drawing tool.
Add interactivity so that behavior can be experienced , evaluated, tested, and reflected upon.

Discuss: Example Process
What Properties through this process did we notice that might apply to the tools we decide to use?

Pain
Wireframing Ajax is a [expletive]... We have to determine all of the things a user might do, and wireframe the blessed moments of each possibility. - Jeffrey Zeldman, Web 3.0

The Shift

Assumption
All interaction is course-grained at page level
Wireframes capture layout, priority, behavior & content

Impact
Full page refresh is replaced by small content updates.
Hyperlink, Submit are replaced by a full range of interactive events.
Characterized by micro-interaction and micro-updates leading to micro-states.

Impact
Interaction is characterized by direct manipulation, lightweight actions and in-page actions
Nuances are multiplied
invitation
activation
deactivation
affordances
constraints
timing
delays
rate of feedback

Drag & Drop Interesting Moments
Page load
Mouse hover over draggable object
Mouse down on draggable object
Drag initiated (mouse down, mouse moves >= 3 pixels)
Drag over valid target area
Drag over invalid target area
Drag over original location
Drop accepted
Drop rejected
Drop on original location

Drag & Drop Actors
Page
Cursor
Tool Tip
Drag object
Drag ghost
Original location
Drop target

Drag & Drop Matrix

my.yahoo Interesting Moments

Adaptive Path: Micro States

Yahoo!: Micro States

Animation with Visio

Animation with Photoshop

Section 4: Designing an RIA

“ I design software”
“ I’m wearing design er jeans”
“ interaction design ”
“ design school”
“ That design looks cool”

What is “design”?
Design as noun (I like that “design”)
Is the result of a conceived idea, whether or not it was actually “designed”
Design as verb (I “design” software)
A process of creativity
Non-linear
Assumes there is more than one elegant solution to any single problem
Considers the measurable and the aesthetic

Simple Design Exercise
Problem:
I need a device that allows a user to move & select objects, text and graphics in a graphical interface
Let’s work through this …

Making Design (verb) Work
Divergent thinking
Skew, bend, melt, tear … change!
Evaluation is separate from Ideation
Put your judge on hold
Multiple minds
Model, Model, Model
Taking the road least traveled can bring you back to the freeway
Process ideas in disconnected ways
Connect disconnected ideas in separate exercise

Exercise: Criteria From Section 1
Criteria for the design
Application Service (Hosted)
Infinite Audience
Business-to-Business community
File Management System
Moving lots of files
Collaborative
Media Centric
Criteria for Development
Old-school software engineering;
Highly formally educated group

Exercise: Moving forward
Need to share corporate media objects across different enterprises
Need to collaborate on these objects
Annotate
Version
Append
Need to publish out to 3 rd parties
Don’t worry we aren’t doing this whole application …

Exercise: Annotate
Design a set of screens that make up one page
Displays both a list objects and single object
Allows the user to comment on that object
Track commenting
Annotate on media directly
Create a collection and “send” that collection

Questions ? Resources: Dave’s Blog: www.synapticburn.com Bill’s Blog: looksgoodworkswell.blogspot.com

http://www.slideshare.net	51
http://techno-sphere.blogspot.com	3
http://synapticburn.com	2
http://stratagility.com	2
http://10.150.200.76	1
http://localhost	1
http://www.slideshow.com	1
http://www.stratagility.com	1
http://www.bee-box.com	1
http://elliotjaystocks.com	1
http://gmodules.com	1
http://www.indianpad.com	1
http://10.150.200.102	1

Designing Powerful Web Applications Using AJAX and Other RIAs

by David Malouf on Oct 10, 2006

Accessibility

Categories

Tags

Upload Details

Usage Rights

13 Embeds 67

Statistics

Designing Powerful Web Applications Using AJAX and Other RIAs — Presentation Transcript