Designing Powerful Web Applications - Monterey

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 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

What is an RIA? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

What does it mean for us today? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Emulating Desktop Behaviors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Google Spreadsheet Gliffy

Cinematic Effects: Animation for added context ,[object Object],[object Object],[object Object],[object Object],[object Object],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 NetFlix

What’s all the fuss about Web 2.0? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Technologies Behind RIAs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Pure Browser: DHMTL & AJAX ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Visualizing the AJAX effect JJ Garrett-Ajax: A New Approach to Web Applications (Feb 2005)

Flash (by Adobe) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Empressr

Extensions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Del.icio.us Firefox Add-on

Java & ActiveX (with .NET) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Ofoto

Backend Frameworks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Choosing a Technology ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Deployment ,[object Object],[object Object],[object Object],[object Object],[object Object]

The Design ,[object Object],[object Object],[object Object]

Keeping up with the Tech ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Exercise: Let’s start a project ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Time to explore ,[object Object],[object Object],[object Object],[object Object],[object Object]

Section 2 HERE ,[object Object]

Section 3: Design Practice Designing and Communicating Design

Designing vs. Communicating vs. Documenting ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Design-ING ,[object Object],[object Object],[object Object],[object Object],[object Object]

3 basic steps to designing ,[object Object],[object Object],[object Object]

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

Bill Buxton on Sketch vs. Prototype ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Taken from the notes of J. Spool on BrainSparks Blog of a talk given by Bill Buxton to Boston-SIGCHI. http://www.uie.com/brainsparks/2006/11/16/buxton-on-sketching-and-experience-design/

Framework and Language Create Structure Navigation Language Object Action Modifiers

Refinement Details Behavior Exceptions States Messaging

Designing Behavior ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Sample Process ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Simple Design Exercise ,[object Object],[object Object],[object Object]

Simple Design Exercise ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Discuss: Example Process ,[object Object]

Assumption ,[object Object],[object Object]

Impact ,[object Object],[object Object],[object Object]

Impact ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Drag & Drop Interesting Moments ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Drag & Drop Actors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Fireworks + Acrobat Demo ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Section 4: Why do an RIA Designing an RIA

Why? ,[object Object],[object Object],[object Object],[object Object],[object Object]

Hello! Humans are Emotional ,[object Object],Your emotional state when using a product will effect not just your enjoyment of it, but your effectiveness (at least perceptual) with it. “ Attractive Things Work Better” is the very title of the first chapter.

Location, Location, Location ,[object Object],[object Object],[object Object]

Intuitive ? ,[object Object],[object Object],[object Object]

Legacy of the Web ? ,[object Object],[object Object],[object Object]

RIAs offer Hybridization ,[object Object],[object Object],Yahoo Mail Beta Flickr

Learnability ,[object Object],[object Object]

Security ,[object Object],[object Object],[object Object],[object Object]

Managing Complexity ,[object Object],[object Object],[object Object],[object Object],Baby Name Wizard

Power of Movement ,[object Object],[object Object],[object Object],[object Object],[object Object],Yahoo! Maps (beta)

Playful ,[object Object],[object Object],[object Object]

Design (Big ‘D’) ,[object Object],[object Object],[object Object],[object Object],[object Object]

What is “design”? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Making Design (verb) Work ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Exercise: Criteria From Section 1 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Exercise: Moving forward ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Exercise: Annotate ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Things to think about ,[object Object],[object Object],[object Object],[object Object],[object Object]

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

Designing Powerful Web Applications - Monterey

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Designing Powerful Web Applications - Monterey

Similar to Designing Powerful Web Applications - Monterey (20)

More from Dave Malouf

More from Dave Malouf (20)

Recently uploaded

Recently uploaded (20)

Designing Powerful Web Applications - Monterey