Designing Powerful Web Applications with AJAX & Other Rich Internet Applications

1. Designing Powerful Web Applications with AJAX & Other Rich Internet Applications David (Heller) Malouf & Bill Scott UI 11 Cambridge, MA October 9, 2006

2. 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)

3. 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

4. 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)

5. 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

6. 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

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. 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]

9. 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

10. 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

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

12. 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

13. 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

14. 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

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

16. 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

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

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

19. Keeping up with the Tech Well it is really up to you … • Books • Blogsphere • Tech Meetups • UnConferences • Conferences … well you are here.

20. 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

21. Time to explore • Empressr – Desktop Presentation • NetFlix – DVD by mail • Meebo – Web-IM • Flickr – Photo Sharing • Zimbra – Web Groupware

22. Section 2 HERE • BILL’s Section

23. Section 3: Design Practice Designing and Communicating Design

24. 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

25. Design-ING • != conceiving, creation, producing • Formalized process • Studio • Divergent unrefined thinking followed by • Evaluation, testing, and reflection

26. 3 basic steps to designing • Sketching • Framework and Language • Refinement

27. Sketching Rapid & Rough Multiplicity CommunicateCONCEPTS What do you see here?

28. Framework and Language Create Structure Navigation LanguageObject Action Modifiers

29. Refinement Details Behavior

30. 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.

31. 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.

32. Discuss: Example Process What Properties through this process did we notice that might apply to the tools we decide to use?

33. 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

34. The Shift

35. Assumption All interaction is course-grained at page level Wireframes capture layout, priority, behavior & content

36. 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.

37. 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

38. 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

39. Drag & Drop Actors Page Cursor Tool Tip Drag object Drag ghost Original location Drop target

40. Drag & Drop Matrix

41. my.yahoo Interesting Moments

42. Adaptive Path: Micro States

43. Yahoo!: Micro States

44. Animation with Visio

45. Animation with Photoshop

46. Section 4: Designing an RIA

47. “I design software” “I’m wearing designer jeans” “interaction design” “design school” “That design looks cool”

48. 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

49. 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 …

50. 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