Designing Powerful Web Applications - Monterey

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
LaszloSystems

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
Empressr

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
Ofoto

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

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

Designing Powerful Web Applications - Monterey

by David Malouf on Apr 26, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 20

Statistics

Designing Powerful Web Applications - Monterey — Presentation Transcript