Designing Powerful Web Applications with AJAX & Other Rich Internet Applications

viraginityfumblingSoftware and s/w Development

Nov 2, 2013 (3 years and 7 months ago)

62 views

October 9, 2006

Designing Powerful

Web Applications with AJAX &

Other Rich Internet Applications

David (Heller) Malouf & Bill Scott


UI 11

Cambridge, MA

October 9, 2006

Designing Powerful Web Applications with AJAX & Other RIAs

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)

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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)

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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]

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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


Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Visualizing the AJAX effect

JJ Garrett
-
Ajax: A New Approach to Web Applications (Feb 2005)

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Backend Frameworks


DOJO


Script.aculo.us


Rico


Ruby on Rails


ASP.NET


Yahoo! User Interface Library (YUI)


Atlas


Backbase

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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?

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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?

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Keeping up with the Tech

Well it is really up to you …


Books


Blogsphere


Tech Meetups


UnConferences


Conferences


… well you
are

here.

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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


Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Time to explore


Empressr


Desktop Presentation


NetFlix


DVD by mail


Meebo


Web
-
IM


Flickr


Photo Sharing


Zimbra


Web Groupware

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Section 2 HERE


BILL’s Section

October 9, 2006

Section 3: Design Practice

Designing and Communicating Design

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Design
-
ING


!=

conceiving, creation, producing


Formalized process


Studio


Divergent unrefined thinking followed by


Evaluation, testing, and reflection

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

3 basic steps to designing


Sketching


Framework and Language


Refinement

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Sketching

What do you see here?

Rapid & Rough


Multiplicity


Communicate

CONCEPTS

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Framework and Language

Create Structure


Navigation


Language


Object


Action


Modifiers


Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Refinement

Details


Behavior

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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.


Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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.

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Discuss: Example Process

What Properties through this process did we
notice that might apply to the tools we
decide to use?

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

The Shift

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Assumption


All interaction is course
-
grained at page
level


Wireframes capture layout, priority,
behavior & content


Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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.

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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


Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Drag & Drop Actors


Page


Cursor


Tool Tip


Drag object


Drag ghost


Original location


Drop target

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Drag & Drop Matrix

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

my.yahoo Interesting Moments

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Adaptive Path: Micro States

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Yahoo!: Micro States

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Animation with Visio

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Animation with Photoshop

October 9, 2006

Section 4:
Designing

an RIA

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

“I
design

software”

“I’m wearing
design
er jeans”

“interaction
design



design
school”

“That
design
looks cool”

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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 …


Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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


Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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 …

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

Exercise: Annotate

Design a set of screens that make up one page

1.
Displays both a list objects and single
object

2.
Allows the user to comment on that object

3.
Track commenting

4.
Annotate on media directly

5.
Create a collection and “send” that
collection

October 9, 2006

Questions ?

Resources:

Dave’s Blog:


www.synapticburn.com

Bill’s Blog:


looksgoodworkswell.blogspot.com