Your SlideShare is downloading. ×
Designing Powerful Web Applications - Monterey
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing Powerful Web Applications - Monterey

4,834

Published on

A version of the Designing RIA's workshop that Bill and I gave at UI11 and the Web App Summit. Not including Bill's section 2.

A version of the Designing RIA's workshop that Bill and I gave at UI11 and the Web App Summit. Not including Bill's section 2.

Published in: Technology
2 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,834
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
2
Likes
28
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. Designing Powerful Web Applications with AJAX & Other Rich Internet Applications David 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
      • 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 Gliffy
    • 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 NetFlix
    • 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 Behind RIAs
      • DHTML + HTML + JavaScript + CSS
      • AJAX = DHTML + XML (or JSON)
      • 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 page 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
      Empressr
    • 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
      Del.icio.us Firefox Add-on
    • 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
      Ofoto
    • 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 (functionality, brand)
        • 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 = exploration + formal critique prcess
        • Divergent unrefined thinking followed by
        • Evaluation, testing, and reflection
    • 26. 3 basic steps to designing
      • Sketching
      • Framework and Language
      • Refinement
    • 27. Sketching What do you see here? Rapid & Rough Multiplicity Communicate CONCEPTS
    • 28. Bill Buxton on Sketch vs. Prototype
      • Sketch
      • Invitation
      • Suggestion
      • Question
      • Propose
      • Destructive
      • Prototype
      • Attendance
      • Describe
      • Answer
      • Test
      • Constructive
      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/
    • 29. Framework and Language Create Structure Navigation Language Object Action Modifiers
    • 30. Refinement Details Behavior Exceptions States Messaging
    • 31. 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.
    • 32. 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.
    • 33. 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 …
    • 34. 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 fill in some of the blanks …
      • Location/Context
      • Users
      • Objects
      • Flow
      • Etc.
    • 35. Discuss: Example Process
      • What Properties through this process did we notice that might apply to the tools we decide to use?
    • 36. 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
    • 37. The Shift
    • 38. Assumption
      • All interaction is course-grained at page level
      • Wireframes capture layout, priority, behavior & content
    • 39. 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.
    • 40. 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
    • 41. 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
    • 42. Drag & Drop Actors
      • Page
      • Cursor
      • Tool Tip
      • Drag object
      • Drag ghost
      • Original location
      • Drop target
    • 43. Drag & Drop Matrix
    • 44. my.yahoo Interesting Moments
    • 45. Adaptive Path: Micro States
    • 46. Yahoo!: Micro States
    • 47. Animation with Visio
    • 48. Animation with Photoshop
    • 49. Fireworks + Acrobat Demo
      • Use Frames
      • Export to PDF
      • Annotate in PDF
      • Each frame is “an interesting moment
      • Sense of time
      • Sense of motion
      • Can be converted to “interactive” using linking in PDF.
      • Can embed movies into PDF for cinematic effects
    • 50. Section 4: Why do an RIA Designing an RIA
    • 51. Why?
      • Simply put … because you can.
      • There is very little “should” here
      • Looking back at John Maeda’s Laws of Simplicity
        • Always question the addition of anything, even if it leads to the reduction of something else.
      • Let’s look deeper at some good reasons why.
    • 52. Hello! Humans are Emotional
      • Don Norman’s Emotional Design
      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.
    • 53. Location, Location, Location
      • That works for real estate …
      • … for UX Designers …
      • Context, Context, Context
    • 54. Intuitive ?
      • Creating an intuitive application is all about matching expectations of the user.
      • Understanding the context of use is the best way to come as close as possible to do that.
      • The desktop is a constant. The Operating System is the heart and soul of the desktop experience .
    • 55. Legacy of the Web ?
      • Strong legacy with web metaphors
        • Back button (or just “history”)
        • Hyperlink
    • 56. RIAs offer Hybridization
      • Toyota can’t have all the fun …
      • Big challenges for designers, but the end-game is worth the effort.
      Yahoo Mail Beta Flickr
    • 57. Learnability
      • Understanding where I was and where I’m going.
      • Having the RIGHT information at the right time, with the right supporting information.
    • 58. Security
      • Using windowing enhances security
        • I know that I really didn’t leave
        • I know when I’m done I’ll be going back to where I started
      • Security allows for more risk taking
    • 59. Managing Complexity
      • Discoverability
      • Use scent to guide people
      • Hide complexity to avoid overwhelming people with too much content
      • Richness allows for fluidity and better invitations
      Baby Name Wizard
    • 60. Power of Movement
      • Sometimes contrasts in color, shape, alignment are not enough
      • Moving objects catch our eyes and our mind’s attention
      • Time is perception
        • Motion (and change) = activity
        • Perception of system working if not faster, at least working for my benefit.
      Yahoo! Maps (beta)
    • 61. Playful
      • Using your hands in multiple ways
      • Novelty through animation and discoverability
      • Engagement leads to productivity
    • 62. Design (Big ‘D’)
      • “I design software”
      • “I’m wearing design er jeans”
      • “interaction design ”
      • “ design school”
      • “That design looks cool”
    • 63. 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
    • 64. 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 (AKA: sketch, sketch, sketch)
      • Taking the road least traveled can bring you back to the freeway
        • Process ideas in disconnected ways
        • Connect disconnected ideas in separate exercise
    • 65. 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
    • 66. 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 …
    • 67. 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
    • 68. Things to think about
      • Manage complexity through progressive presentation
      • Motion aids learnability
      • Prirotize information and tasks within a single context
      • “ Do I need a new context?” “Why?” “Why not?”
      • “ What is the nature of my data for this context?”
    • 69. Questions ? Resources: Dave’s Blog: www.synapticburn.com Bill’s Blog: looksgoodworkswell.blogspot.com

    ×