Designing Powerful Web Applications Using AJAX and Other RIAs


Published on

This is the slide deck from the workshop given at UI11 on October 9, 2006. This presentation was given with myself (David Malouf) and Bill Scott (AJAX Evangelist @ Yahoo!).

The goal of the course was to teach people the basics of Interaction Design and then how to apply those principles to design using RIA technologies like AJAX and Flash.

Published in: Technology, Spiritual
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Designing Powerful Web Applications Using AJAX and Other RIAs

    1. 1. Designing Powerful Web Applications with AJAX & Other Rich Internet Applications David Malouf & Bill Scott UI 11 Cambridge, MA October 9, 2006
    2. 2. Breakdown of the day <ul><li>Section 1: … from the beginning </li></ul><ul><ul><li>Defining RIAs & RIA Technologies </li></ul></ul><ul><ul><li>How to pick the right technology for your project </li></ul></ul><ul><ul><li>Looking at current examples of RIAs </li></ul></ul><ul><li>Section 2: Interaction Design for RIAs </li></ul><ul><ul><li>Understanding Patterns </li></ul></ul><ul><ul><li>AJAX Design Patterns </li></ul></ul><ul><ul><li>Design Principles </li></ul></ul><ul><li>Section 3: Design Practice </li></ul><ul><ul><li>Tools of the trade </li></ul></ul><ul><ul><ul><li>Designing </li></ul></ul></ul><ul><ul><ul><li>Communicating Design </li></ul></ul></ul><ul><ul><li>Communicate this RIA (exercise) </li></ul></ul><ul><li>Section 4: Design your own RIA </li></ul><ul><ul><li>What is “design”—the verb? </li></ul></ul><ul><ul><li>Design your own RIA (exercise) </li></ul></ul>
    3. 3. What is an RIA? <ul><li>Give credit, where credit is due … </li></ul><ul><ul><li>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. </li></ul></ul><ul><li>The simple answer: </li></ul><ul><ul><li>Connected </li></ul></ul><ul><ul><li>Distributed </li></ul></ul><ul><ul><li>Local </li></ul></ul><ul><ul><li>Intelligent </li></ul></ul><ul><ul><li>Moving </li></ul></ul>
    4. 4. What does it mean for us today? <ul><li>Emulating desktop behaviors </li></ul><ul><li>Cinematic Effects </li></ul><ul><li>Client-side (in browser) … </li></ul><ul><ul><li>Data management </li></ul></ul><ul><ul><li>Business logic management </li></ul></ul><ul><li>Re-definition of the “page” metaphor </li></ul><ul><li>Required connection to local machine (optional) </li></ul>
    5. 5. Emulating Desktop Behaviors <ul><li>Drag & Drop </li></ul><ul><li>Menu & Tool bars </li></ul><ul><li>Windows & Wizards </li></ul><ul><li>Panels </li></ul><ul><li>Trees </li></ul><ul><li>Form validation </li></ul><ul><li>Non-HTML controls </li></ul><ul><ul><li>Accordian </li></ul></ul><ul><ul><li>Combobox </li></ul></ul><ul><ul><li>Spinner box </li></ul></ul><ul><ul><li>Sliders </li></ul></ul><ul><li>Keyboard Actions </li></ul><ul><li>Context Menus </li></ul>Google Spreadsheet
    6. 6. Cinematic Effects: Animation for added context <ul><li>Where am I going? Where was I? </li></ul><ul><li>Action completion </li></ul><ul><li>Object state change </li></ul><ul><li>System progress </li></ul><ul><li>Animation for aesthetic reasons is also viable </li></ul>LaszloSystems
    7. 7. 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
    8. 8. What’s all the fuss about Web 2.0? <ul><li>O’Reilly as trend spotter … </li></ul><ul><li>RIAs is only one component of the trend </li></ul><ul><li>Other components </li></ul><ul><ul><li>User generated </li></ul></ul><ul><ul><li>Mashed up & Remixed </li></ul></ul><ul><ul><li>Open & iterative </li></ul></ul><ul><ul><li>Limited designer role (if at all) </li></ul></ul><ul><li>Separately nothing new, but a trend (critical mass) makes it worth noting. </li></ul><ul><li>Sir Tim Berners-Lee’s warning not to create new bubble – [The Register – Aug ’06] </li></ul>
    9. 9. The Technologies <ul><li>DHTML – HTML + JavaScript + CSS </li></ul><ul><li>AJAX – DHTML + XML </li></ul><ul><li>Flash </li></ul><ul><li>Browser Extensions/Plug-ins </li></ul><ul><li>Java </li></ul><ul><li>ActiveX </li></ul><ul><li>Others not to be discussed </li></ul><ul><ul><li>XUL, CURL, etc. </li></ul></ul><ul><li>Backend Frameworks </li></ul>
    10. 10. Pure Browser: DHMTL & AJAX <ul><li>Nothin’ but browser </li></ul><ul><li>Uses very open technologies </li></ul><ul><li>Allows for simple richness </li></ul><ul><li>AJAX – new info from server without refresh </li></ul><ul><li>A JavaScript call makes a query to the server </li></ul><ul><li>Server returns XML </li></ul><ul><li>JavaScript manipulates CSS to reformat XML in place on existing screen </li></ul>
    11. 11. Visualizing the AJAX effect JJ Garrett-Ajax: A New Approach to Web Applications (Feb 2005)
    12. 12. Flash (by Adobe) <ul><li>Requires an installed plug-in </li></ul><ul><li>Created to bring animation and interactivity to the web </li></ul><ul><li>Uses vector graphics </li></ul><ul><li>Not native, but ubiquitous // open format </li></ul><ul><li>Visual development environment </li></ul><ul><ul><li>Tied to Flex development environment </li></ul></ul>Goowy
    13. 13. Extensions <ul><li>Different browsers have different ways of adding extensions to themselves. </li></ul><ul><li>Behaves as if a part of the browser </li></ul><ul><ul><li>Toolbars </li></ul></ul><ul><ul><li>Status bars </li></ul></ul><ul><ul><li>Sidebars </li></ul></ul><ul><ul><li>Menu add-ons </li></ul></ul><ul><li>Greasemonkey for Firefox </li></ul>Google Notebook
    14. 14. Java & ActiveX (with .NET) <ul><li>Installed applications that can … </li></ul><ul><ul><li>run inside the browser window </li></ul></ul><ul><ul><li>control the browser </li></ul></ul><ul><ul><li>connect the browser to the rest of the local client </li></ul></ul><ul><li>Virtual Machines & Frameworks </li></ul><ul><ul><li>Java requires a pre-installed virtual machine or emulator. Once installed any Java-base application can run. </li></ul></ul><ul><ul><li>Frameworks are a collection of components and controls </li></ul></ul><ul><ul><ul><li>.NET requires the installation of the framework </li></ul></ul></ul><ul><ul><ul><li>SWING or AWT are two frameworks for Java </li></ul></ul></ul>IntraLinks
    15. 15. Backend Frameworks <ul><li>DOJO </li></ul><ul><li> </li></ul><ul><li>Rico </li></ul><ul><li>Ruby on Rails </li></ul><ul><li>ASP.NET </li></ul><ul><li>Yahoo! User Interface Library (YUI) </li></ul><ul><li>Atlas </li></ul><ul><li>Backbase </li></ul>
    16. 16. Choosing a Technology <ul><li>Deployment Environment </li></ul><ul><ul><li>Local clients </li></ul></ul><ul><ul><li>Enterprise considerations </li></ul></ul><ul><ul><li>Iteration cycles </li></ul></ul><ul><li>Development Environment </li></ul><ul><ul><li>Training & capabilities of team against time and resources available for project </li></ul></ul><ul><li>The Design </li></ul><ul><ul><li>Browser to desktop connection </li></ul></ul>
    17. 17. Deployment <ul><li>Can my users install something? </li></ul><ul><ul><li>Tech savvy enough </li></ul></ul><ul><ul><li>Enterprise allow them to </li></ul></ul><ul><li>Do I plan on “tweaking” rapidly, or will my product follow a more standard release cycle? </li></ul><ul><li>Am I willing to use closed or otherwise non-ubiquitous technologies? </li></ul>
    18. 18. The Design <ul><li>How much integration do I need to add between the browser and the rest of a user’s local desktop environment? </li></ul><ul><li>Does my design require cinematic effects between scenes, or just within them? (or none at all?) </li></ul><ul><li>At what point do I need to manage calls to and from a remote server in my design? </li></ul>
    19. 19. Keeping up with the Tech <ul><li>Well it is really up to you … </li></ul><ul><li>Books </li></ul><ul><li>Blogsphere </li></ul><ul><li>Tech Meetups </li></ul><ul><li>UnConferences </li></ul><ul><li>Conferences </li></ul><ul><li>… well you are here. </li></ul>
    20. 20. Exercise: Let’s start a project <ul><li>Goal: Pick a technology for your project. This project will be continued. </li></ul><ul><li>Criteria for the design </li></ul><ul><ul><li>Application Service (Hosted) </li></ul></ul><ul><ul><ul><li>Infinite Audience </li></ul></ul></ul><ul><ul><ul><li>Business-to-Business community </li></ul></ul></ul><ul><ul><li>File Management System </li></ul></ul><ul><ul><ul><li>Moving lots of files </li></ul></ul></ul><ul><ul><li>Collaborative </li></ul></ul><ul><ul><li>Media Centric </li></ul></ul><ul><li>Criteria for Development </li></ul><ul><ul><li>Old-school software engineering; </li></ul></ul><ul><ul><li>Highly formally educated group </li></ul></ul>
    21. 21. Time to explore <ul><li>Empressr – Desktop Presentation </li></ul><ul><li>NetFlix – DVD by mail </li></ul><ul><li>Meebo – Web-IM </li></ul><ul><li>Flickr – Photo Sharing </li></ul><ul><li>Zimbra – Web Groupware </li></ul>
    22. 22. Section 2 HERE <ul><li>BILL’s Section </li></ul>
    23. 23. Section 3: Design Practice Designing and Communicating Design
    24. 24. Designing vs. Communicating vs. Documenting <ul><li>Designing –conceive an idea through a design process. </li></ul><ul><li>Communicating </li></ul><ul><ul><li>Get buy in </li></ul></ul><ul><ul><li>Collaborate to ensure proper implementation </li></ul></ul><ul><li>Documenting </li></ul><ul><ul><li>Archive ideas </li></ul></ul><ul><ul><li>“ Hit by a bus” contingency </li></ul></ul>
    25. 25. Design-ING <ul><li>!= conceiving, creation, producing </li></ul><ul><li>Formalized process </li></ul><ul><ul><li>Studio </li></ul></ul><ul><ul><li>Divergent unrefined thinking followed by </li></ul></ul><ul><ul><li>Evaluation, testing, and reflection </li></ul></ul>
    26. 26. 3 basic steps to designing <ul><li>Sketching </li></ul><ul><li>Framework and Language </li></ul><ul><li>Refinement </li></ul>
    27. 27. Sketching What do you see here? Rapid & Rough Multiplicity Communicate CONCEPTS
    28. 28. Framework and Language Create Structure Navigation Language Object Action Modifiers
    29. 29. Refinement Details Behavior
    30. 30. Designing Behavior <ul><li>Time: Behavior cannot be static </li></ul><ul><li>It is not “flow” between contexts; </li></ul><ul><li>happens within a context </li></ul><ul><li>Multiple states </li></ul><ul><ul><li>Sometimes Fluid motion </li></ul></ul><ul><li>Hard to communicate “intra-contextual” behaviors using static renderings </li></ul><ul><ul><li>More difficult to test it. </li></ul></ul>
    31. 31. Sample Process <ul><li>Sketch on paper/whiteboard </li></ul><ul><li>Scan/Photograph into digital environment </li></ul><ul><li>Trace (or re-draw) using computer tool </li></ul><ul><li>Use “ blocking ” tool to define framework </li></ul><ul><li>As further detail is required to refine framework fill in blocks using a higher fidelity drawing tool. </li></ul><ul><li>Add interactivity so that behavior can be experienced , evaluated, tested, and reflected upon. </li></ul>
    32. 32. Discuss: Example Process <ul><li>What Properties through this process did we notice that might apply to the tools we decide to use? </li></ul>
    33. 33. Pain <ul><ul><ul><li>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 </li></ul></ul></ul>
    34. 34. The Shift
    35. 35. Assumption <ul><li>All interaction is course-grained at page level </li></ul><ul><li>Wireframes capture layout, priority, behavior & content </li></ul>
    36. 36. Impact <ul><li>Full page refresh is replaced by small content updates. </li></ul><ul><li>Hyperlink, Submit are replaced by a full range of interactive events. </li></ul><ul><li>Characterized by micro-interaction and micro-updates leading to micro-states. </li></ul>
    37. 37. Impact <ul><li>Interaction is characterized by direct manipulation, lightweight actions and in-page actions </li></ul><ul><li>Nuances are multiplied </li></ul><ul><ul><li>invitation </li></ul></ul><ul><ul><li>activation </li></ul></ul><ul><ul><li>deactivation </li></ul></ul><ul><ul><li>affordances </li></ul></ul><ul><ul><li>constraints </li></ul></ul><ul><ul><li>timing </li></ul></ul><ul><ul><li>delays </li></ul></ul><ul><ul><li>rate of feedback </li></ul></ul>
    38. 38. Drag & Drop Interesting Moments <ul><li>Page load </li></ul><ul><li>Mouse hover over draggable object </li></ul><ul><li>Mouse down on draggable object </li></ul><ul><li>Drag initiated (mouse down, mouse moves >= 3 pixels) </li></ul><ul><li>Drag over valid target area </li></ul><ul><li>Drag over invalid target area </li></ul><ul><li>Drag over original location </li></ul><ul><li>Drop accepted </li></ul><ul><li>Drop rejected </li></ul><ul><li>Drop on original location </li></ul>
    39. 39. Drag & Drop Actors <ul><li>Page </li></ul><ul><li>Cursor </li></ul><ul><li>Tool Tip </li></ul><ul><li>Drag object </li></ul><ul><li>Drag ghost </li></ul><ul><li>Original location </li></ul><ul><li>Drop target </li></ul>
    40. 40. Drag & Drop Matrix
    41. 41. Interesting Moments
    42. 42. Adaptive Path: Micro States
    43. 43. Yahoo!: Micro States
    44. 44. Animation with Visio
    45. 45. Animation with Photoshop
    46. 46. Section 4: Designing an RIA
    47. 47. <ul><li>“ I design software” </li></ul><ul><li>“ I’m wearing design er jeans” </li></ul><ul><li>“ interaction design ” </li></ul><ul><li>“ design school” </li></ul><ul><li>“ That design looks cool” </li></ul>
    48. 48. What is “design”? <ul><li>Design as noun (I like that “design”) </li></ul><ul><ul><li>Is the result of a conceived idea, whether or not it was actually “designed” </li></ul></ul><ul><li>Design as verb (I “design” software) </li></ul><ul><ul><li>A process of creativity </li></ul></ul><ul><ul><li>Non-linear </li></ul></ul><ul><ul><li>Assumes there is more than one elegant solution to any single problem </li></ul></ul><ul><ul><li>Considers the measurable and the aesthetic </li></ul></ul>
    49. 49. Simple Design Exercise <ul><li>Problem: </li></ul><ul><li>I need a device that allows a user to move & select objects, text and graphics in a graphical interface </li></ul><ul><li>Let’s work through this … </li></ul>
    50. 50. Making Design (verb) Work <ul><li>Divergent thinking </li></ul><ul><ul><li>Skew, bend, melt, tear … change! </li></ul></ul><ul><li>Evaluation is separate from Ideation </li></ul><ul><ul><li>Put your judge on hold </li></ul></ul><ul><li>Multiple minds </li></ul><ul><li>Model, Model, Model </li></ul><ul><li>Taking the road least traveled can bring you back to the freeway </li></ul><ul><ul><li>Process ideas in disconnected ways </li></ul></ul><ul><ul><li>Connect disconnected ideas in separate exercise </li></ul></ul>
    51. 51. Exercise: Criteria From Section 1 <ul><li>Criteria for the design </li></ul><ul><ul><li>Application Service (Hosted) </li></ul></ul><ul><ul><ul><li>Infinite Audience </li></ul></ul></ul><ul><ul><ul><li>Business-to-Business community </li></ul></ul></ul><ul><ul><li>File Management System </li></ul></ul><ul><ul><ul><li>Moving lots of files </li></ul></ul></ul><ul><ul><li>Collaborative </li></ul></ul><ul><ul><li>Media Centric </li></ul></ul><ul><li>Criteria for Development </li></ul><ul><ul><li>Old-school software engineering; </li></ul></ul><ul><ul><li>Highly formally educated group </li></ul></ul>
    52. 52. Exercise: Moving forward <ul><li>Need to share corporate media objects across different enterprises </li></ul><ul><li>Need to collaborate on these objects </li></ul><ul><ul><li>Annotate </li></ul></ul><ul><ul><li>Version </li></ul></ul><ul><ul><li>Append </li></ul></ul><ul><li>Need to publish out to 3 rd parties </li></ul><ul><li>Don’t worry we aren’t doing this whole application … </li></ul>
    53. 53. Exercise: Annotate <ul><li>Design a set of screens that make up one page </li></ul><ul><li>Displays both a list objects and single object </li></ul><ul><li>Allows the user to comment on that object </li></ul><ul><li>Track commenting </li></ul><ul><li>Annotate on media directly </li></ul><ul><li>Create a collection and “send” that collection </li></ul>
    54. 54. Questions ? Resources: Dave’s Blog: Bill’s Blog: