Download - UI11-RIAWorkshop-Fin
![Page 1: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/1.jpg)
October 9, 2006
Designing Powerful Web Applications with AJAX &
Other Rich Internet Applications
David (Heller) Malouf & Bill Scott
UI 11Cambridge, MAOctober 9, 2006
![Page 2: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/2.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
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)
![Page 3: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/3.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 4: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/4.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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)
![Page 5: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/5.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 6: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/6.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 7: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/7.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 8: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/8.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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]
![Page 9: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/9.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 10: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/10.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 11: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/11.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Visualizing the AJAX effect
JJ Garrett-Ajax: A New Approach to Web Applications (Feb 2005)
![Page 12: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/12.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 13: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/13.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 14: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/14.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 15: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/15.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Backend Frameworks● DOJO
● Script.aculo.us
● Rico
● Ruby on Rails
● ASP.NET
● Yahoo! User Interface Library (YUI)
● Atlas
● Backbase
![Page 16: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/16.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 17: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/17.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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?
![Page 18: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/18.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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?
![Page 19: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/19.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Keeping up with the TechWell it is really up to you …● Books● Blogsphere● Tech Meetups● UnConferences● Conferences
… well you are here.
![Page 20: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/20.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 21: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/21.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Time to explore● Empressr – Desktop Presentation● NetFlix – DVD by mail● Meebo – Web-IM● Flickr – Photo Sharing● Zimbra – Web Groupware
![Page 22: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/22.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Section 2 HERE● BILL’s Section
![Page 23: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/23.jpg)
October 9, 2006
Section 3: Design Practice
Designing and Communicating Design
![Page 24: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/24.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 25: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/25.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Design-ING● != conceiving, creation, producing● Formalized process
– Studio– Divergent unrefined thinking followed by– Evaluation, testing, and reflection
![Page 26: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/26.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
3 basic steps to designing● Sketching● Framework and Language● Refinement
![Page 27: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/27.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Sketching
What do you see here?
Rapid & Rough
Multiplicity
CommunicateCONCEPTS
![Page 28: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/28.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Framework and Language
Create Structure
Navigation
LanguageObjectActionModifiers
![Page 29: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/29.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
RefinementDetails
Behavior
![Page 30: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/30.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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.
![Page 31: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/31.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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.
![Page 32: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/32.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Discuss: Example Process
What Properties through this process did we notice that might apply to the tools we decide to use?
![Page 33: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/33.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
PainWireframing 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
![Page 34: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/34.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
The Shift
![Page 35: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/35.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Assumption● All interaction is course-grained at page
level● Wireframes capture layout, priority,
behavior & content
![Page 36: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/36.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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.
![Page 37: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/37.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 38: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/38.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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 39: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/39.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Drag & Drop Actors● Page● Cursor● Tool Tip● Drag object● Drag ghost● Original location● Drop target
![Page 40: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/40.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Drag & Drop Matrix
![Page 41: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/41.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
my.yahoo Interesting Moments
![Page 42: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/42.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Adaptive Path: Micro States
![Page 43: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/43.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Yahoo!: Micro States
![Page 44: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/44.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Animation with Visio
QuickTime™ and aAnimation decompressor
are needed to see this picture.
![Page 45: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/45.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Animation with Photoshop
![Page 46: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/46.jpg)
October 9, 2006
Section 4: Designing an RIA
![Page 47: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/47.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
“I design software”
“I’m wearing designer jeans”
“interaction design”
“design school”
“That design looks cool”
![Page 48: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/48.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 49: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/49.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Simple Design ExerciseProblem:
I need a device that allows a user to move & select objects, text and graphics in a graphical interface
Let’s work through this …
![Page 50: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/50.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 51: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/51.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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
![Page 52: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/52.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
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 …
![Page 53: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/53.jpg)
Designing Powerful Web Applications with AJAX & Other RIAs
October 9, 2006
Exercise: AnnotateDesign 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
![Page 54: UI11-RIAWorkshop-Fin](https://reader036.vdocuments.net/reader036/viewer/2022062613/5451ced6af7959b5648b8cf4/html5/thumbnails/54.jpg)
October 9, 2006
Questions ?
Resources:Dave’s Blog:
www.synapticburn.comBill’s Blog:
looksgoodworkswell.blogspot.com