UI11-RIAWorkshop-Fin..

October 9, 2006

Designing Powerful Web Applications with AJAX &

Other Rich Internet Applications

David (Heller) Malouf & Bill Scott

UI 11Cambridge, MAOctober 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)


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


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)


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


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


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


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]


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


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


October 9, 2006

Visualizing the AJAX effect

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


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


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


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


October 9, 2006

Backend Frameworks● DOJO

● Script.aculo.us

● Rico

● Ruby on Rails

● ASP.NET

● Yahoo! User Interface Library (YUI)

● Atlas

● Backbase


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


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?


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?


October 9, 2006

Keeping up with the TechWell it is really up to you …● Books● Blogsphere● Tech Meetups● UnConferences● Conferences

… well you are here.


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


October 9, 2006

Time to explore● Empressr – Desktop Presentation● NetFlix – DVD by mail● Meebo – Web-IM● Flickr – Photo Sharing● Zimbra – Web Groupware


October 9, 2006

Section 2 HERE● BILL’s Section

October 9, 2006

Section 3: Design Practice

Designing and Communicating Design


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


October 9, 2006

Design-ING● != conceiving, creation, producing● Formalized process

– Studio– Divergent unrefined thinking followed by– Evaluation, testing, and reflection


October 9, 2006

3 basic steps to designing● Sketching● Framework and Language● Refinement


October 9, 2006

Sketching

What do you see here?

Rapid & Rough

Multiplicity

CommunicateCONCEPTS


October 9, 2006

Framework and Language

Create Structure

Navigation

LanguageObjectActionModifiers


October 9, 2006

RefinementDetails

Behavior


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.


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.


October 9, 2006

Discuss: Example Process

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


October 9, 2006

PainWireframing 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


October 9, 2006

The Shift


October 9, 2006

Assumption● All interaction is course-grained at page

level● Wireframes capture layout, priority,

behavior & content


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.


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


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


October 9, 2006

Drag & Drop Actors● Page● Cursor● Tool Tip● Drag object● Drag ghost● Original location● Drop target


October 9, 2006

Drag & Drop Matrix


October 9, 2006

my.yahoo Interesting Moments


October 9, 2006

Adaptive Path: Micro States


October 9, 2006

Yahoo!: Micro States


October 9, 2006

Animation with Visio

QuickTime™ and aAnimation decompressor

are needed to see this picture.


October 9, 2006

Animation with Photoshop

October 9, 2006

Section 4: Designing an RIA


October 9, 2006

“I design software”

“I’m wearing designer jeans”

“interaction design”

“design school”

“That design looks cool”


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


October 9, 2006

Simple Design ExerciseProblem:

I need a device that allows a user to move & select objects, text and graphics in a graphical interface

Let’s work through this …


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


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


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 3rd parties

Don’t worry we aren’t doing this whole application …


October 9, 2006

Exercise: AnnotateDesign 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.comBill’s Blog:

looksgoodworkswell.blogspot.com

Date post:	30-Oct-2014
Category:	Documents
Upload:	sampetruda
View:	422 times
Download:	1 times

UI11-RIAWorkshop-Fin..

Documents