Designing Powerful Web Applications with AJAX

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 designthe 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 EffectsAnimation 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
Whats all the fuss about Web 2.0?

• OReilly 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-Lees 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 users 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 Lets 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

• BILLs 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 Language Object Ac
tion 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
• Im 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
• Lets 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

51
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

52
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 3rd parties
• Dont worry we arent doing this whole
  application

53
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

54
Questions ?

• Resources
• Daves Blog
• www.synapticburn.com
• Bills Blog
• looksgoodworkswell.blogspot.com