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)

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

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

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

Drag & Drop

Menu & Tool bars

Windows & Wizards

Panels

Trees

Form validation

Non-HTML controls

Accordian

Combobox

Spinner box

Sliders

Keyboard Actions

Context Menus

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

Where am I going? Where was I?

Action completion

Object state change

System progress

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

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]

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

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

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

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

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

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

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

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

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

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

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?

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.

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

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

Empressr – Desktop Presentation

NetFlix – DVD by mail

Meebo – Web-IM

Flickr – Photo Sharing

Zimbra – Web Groupware

Section 2 HERE BILL’s Section

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

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

!= 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

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.

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.

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?

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

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

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.

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

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

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

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”

“ 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

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 …

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

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

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 …

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

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