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)

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

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

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

Drag & Drop

Menu & Tool bars

Windows & Wizards

Panels

Trees

Form validation

Non-HTML controls

Accordian

Combobox

Spinner box

Sliders

Keyboard Actions

Context Menus

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

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]

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

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

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 Empressr

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

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

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

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

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 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?

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?

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.

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

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

Empressr – Desktop Presentation

NetFlix – DVD by mail

Meebo – Web-IM

Flickr – Photo Sharing

Zimbra – Web Groupware

Section 2 HERE BILL’s Section

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

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

!= 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

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/

Sketch

Invitation

Suggestion

Question

Propose

Destructive

Prototype

Attendance

Describe

Answer

Test

Constructive

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.

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.

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 …

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.

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?

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

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

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.

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

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

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

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

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.

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.

Don Norman’s Emotional Design

Location, Location, Location That works for real estate … … for UX Designers … Context, Context, Context

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 .

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

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

Toyota can’t have all the fun …

Big challenges for designers, but the end-game is worth the effort.

Learnability Understanding where I was and where I’m going. Having the RIGHT information at the right time, with the right supporting information.

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

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

Discoverability

Use scent to guide people

Hide complexity to avoid overwhelming people with too much content

Richness allows for fluidity and better invitations

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)

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.

Playful Using your hands in multiple ways Novelty through animation and discoverability Engagement leads to productivity

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”

“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

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

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

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 …

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

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?”

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