• Save
Designing Powerful Web Applications - Monterey
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Designing Powerful Web Applications - Monterey

  • 8,486 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,486
On Slideshare
8,449
From Embeds
37
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
2
Likes
29

Embeds 37

http://www.techgig.com 24
http://www.slideshare.net 10
http://gpintranet.dnbgp.dnb.com:8081 1
http://www.techgig.timesjobs.com 1
https://www.linkedin.com 1

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