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

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

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

“ 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

Designing Powerful Web Applications Using AJAX and Other RIAs

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Designing Powerful Web Applications Using AJAX and Other RIAs (20)

More from Dave Malouf (20)

Recently uploaded (20)

Designing Powerful Web Applications Using AJAX and Other RIAs