Designing Powerful
Web Applications with AJAX &
Other Rich Internet Applications
October 9, 2006
David (Heller) Malouf & Bill Scott
UI 11
Cambridge, MA
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Breakdown of the day
●
Section 1: … from the beginning
–
–
–
●
Section 2: Interaction Design for RIAs
–
–
–
●
Understanding Patterns
AJAX Design Patterns
Design Principles
Section 3: Design Practice
–
–
●
Defining RIAs & RIA Technologies
How to pick the right technology for your project
Looking at current examples of RIAs
Tools of the trade
●
Designing
●
Communicating Design
Communicate this RIA (exercise)
Section 4: Design your own RIA
–
–
October 9, 2006
What is “design”—the verb?
Design your own RIA (exercise)
Designing Powerful Web Applications with AJAX & Other RIAs
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:
–
–
–
–
–
October 9, 2006
Connected
Distributed
Local
Intelligent
Moving
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
(optional)
Designing Powerful Web Applications with AJAX & Other RIAs
Emulating Desktop Behaviors
●
Drag & Drop
●
Menu & Tool bars
–
Accordian
●
Windows & Wizards
–
Combobox
Panels
–
Spinner box
–
Sliders
●
●
●
●
Trees
Form validation
Google Spreadsheet
October 9, 2006
Non-HTML controls
●
Keyboard Actions
●
Context Menus
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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]
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
The Technologies
●
●
●
●
●
●
●
DHTML – HTML + JavaScript
+ CSS
AJAX – DHTML + XML
Flash
Browser Extensions/Plugins
Java
ActiveX
Others not to be discussed
–
●
XUL, CURL, etc.
Backend Frameworks
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Visualizing the AJAX effect
October 9, 2006
JJ Garrett-Ajax: A New Approach to Web Applications (Feb 2005)
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Backend Frameworks
●
DOJO
●
Script.aculo.us
●
Rico
●
Ruby on Rails
●
ASP.NET
●
Yahoo! User Interface Library (YUI)
●
Atlas
●
Backbase
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
–
October 9, 2006
Browser to desktop connection
Designing Powerful Web Applications with AJAX & Other RIAs
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?
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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?
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Keeping up with the Tech
Well it is really up to you …
●
Books
●
Blogsphere
●
Tech Meetups
●
UnConferences
●
Conferences
… well you are here.
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Exercise: Let’s start a project
●
Goal: Pick a technology for your project. This
●
Criteria for the design
project will be continued.
–
–
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Time to explore
●
Empressr – Desktop Presentation
●
NetFlix – DVD by mail
●
Meebo – Web-IM
●
Flickr – Photo Sharing
●
Zimbra – Web Groupware
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Section 2 HERE
●
BILL’s Section
October 9, 2006
Section 3: Design Practice
October 9, 2006
Designing and Communicating Design
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Design-ING
●
!= conceiving, creation, producing
●
Formalized process
–
Studio
–
Divergent unrefined thinking followed by
–
Evaluation, testing, and reflection
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
3 basic steps to designing
●
Sketching
●
Framework and Language
●
Refinement
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Sketching
Rapid & Rough
Multiplicity
Communicate
CONCEPTS
What do you see here?
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Framework and Language
Create Structure
Navigation
Language
Object
Action
Modifiers
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Refinement
Details
Behavior
Designing Powerful Web Applications with AJAX & Other RIAs
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
–
October 9, 2006
More difficult to test it.
Designing Powerful Web Applications with AJAX & Other RIAs
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.
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Discuss: Example Process
What Properties through this process did we
notice that might apply to the tools we
decide to use?
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
The Shift
Designing Powerful Web Applications with AJAX & Other RIAs
Assumption
●
●
All interaction is course-grained at page
level
Wireframes capture layout, priority,
behavior & content
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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.
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Impact
●
●
Interaction is characterized by direct
manipulation, lightweight actions and inpage actions
Nuances are multiplied
–
invitation
–
activation
–
deactivation
–
affordances
–
constraints
–
timing
–
delays
–
rate of feedback
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Drag & Drop Actors
●
Page
●
Cursor
●
Tool Tip
●
Drag object
●
Drag ghost
●
Original location
●
Drop target
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Drag & Drop Matrix
Designing Powerful Web Applications with AJAX & Other RIAs
my.yahoo Interesting Moments
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Adaptive Path: Micro States
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Yahoo!: Micro States
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Animation with Visio
QuickTime™ and a
Animation decompressor
are needed to see this picture.
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Animation with Photoshop
Section 4: Designing an RIA
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
“I design software”
“I’m wearing designer jeans”
“interaction design”
“design school”
“That design looks cool”
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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 …
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
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 3rd parties
Don’t worry we aren’t doing this whole
application …
October 9, 2006
Designing Powerful Web Applications with AJAX & Other RIAs
Exercise: Annotate
Design a set of screens that make up one page
1.
Displays both a list objects and single
object
2.
Allows the user to comment on that object
3.
Track commenting
4.
Annotate on media directly
5.
Create a collection and “send” that
collection
October 9, 2006
Questions ?
Resources:
Dave’s Blog:
www.synapticburn.com
Bill’s Blog:
looksgoodworkswell.blogspot.com
October 9, 2006