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

Designing Powerful Web Applications - Monterey



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.



Total Views
Views on SlideShare
Embed Views



4 Embeds 36

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



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Designing Powerful Web Applications - Monterey Designing Powerful Web Applications - Monterey Presentation Transcript

  • 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
    • 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 Gliffy
  • 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
  • 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
  • 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 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
  • 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
  • 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
  • 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
  • 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
  • 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 (functionality, brand)
      • 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 = exploration + formal critique prcess
      • 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
  • 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/
  • Framework and Language Create Structure Navigation Language Object Action Modifiers
  • Refinement Details Behavior Exceptions States Messaging
  • 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.
  • 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 …
  • 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.
  • 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
  • The Shift
  • 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
  • Drag & Drop Matrix
  • my.yahoo Interesting Moments
  • Adaptive Path: Micro States
  • Yahoo!: Micro States
  • Animation with Visio
  • Animation with Photoshop
  • 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
  • Section 4: Why do an RIA Designing an RIA
  • 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.
  • 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.
  • Location, Location, Location
    • That works for real estate …
    • … for UX Designers …
    • Context, Context, Context
  • 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 .
  • Legacy of the Web ?
    • Strong legacy with web metaphors
      • Back button (or just “history”)
      • Hyperlink
  • 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
  • Learnability
    • Understanding where I was and where I’m going.
    • Having the RIGHT information at the right time, with the right supporting information.
  • 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
  • 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
  • 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)
  • Playful
    • Using your hands in multiple ways
    • Novelty through animation and discoverability
    • Engagement leads to productivity
  • Design (Big ‘D’)
    • “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
  • 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
  • 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
  • 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?”
  • Questions ? Resources: Dave’s Blog: www.synapticburn.com Bill’s Blog: looksgoodworkswell.blogspot.com