May 5, 2006 // Andy LaMora
Next Generation Development
New Paradigms in User Interfaces
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
May 5, 2006 // Andy LaMora
“All crises begin with the blurring of one
paradigm and the consequent
loosening of the rules for normal
research”. -T.S. Kuhn
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
AGENDA
05.05.2006
»
»
»
»
»
»
UI: History Channel Overview
The New Paradigm: Ajax
Ajax: Worries in Management
Design: Return of the Lost Art
State of the Art
Future
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
AGENDA
05.05.2006
»
»
»
»
»
»
UI: History Channel Overview
»
»
»
»
UI through the times
GUIs & the Web Impact
Stalwart Soldiers
The New Paradigm
The New Paradigm: Ajax
Ajax: Worries in Management
Design: Return of the Lost Art
State of the Art
Future
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Overview :: UI Through the Times
05.05.2006
? Next ?
1990s+: Web
1980s: GUI
1970s: Command Line
1960s: Punch Cards
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
UI Shifts Corresponding to
Increased User Base
[ ]
Overview :: UI Through the Times
05.05.2006
? Next ?
1990s+: Web
1980s: GUI
1970s: Command Line
But is the Browser
really an advance in
user interface design?
1960s: Punch Cards
Let’s look at what was going on before
NCSA Mosaic changed it all…
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Overview :: UI Through the Times
05.05.2006
»
»
»
GUI Advances
Desktop Paradigm
» Trash Bin
» Tabs
» Menu Bars
Interactivity
» Haptic Devices
» 3D Displays
Demonstrating a trend towards
rich, real-time interaction.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
PARC Cone Tree, 1991
Robertson, Mackinlay & Card
[ ]
Overview :: GUIs & Web Impact
05.05.2006
The user fills out a form,
sends it to a processor, and
patiently sips coffee
awaiting the results.
Form
Web
Server
Form
Punch
Card
Mainframe
What does that remind us of?
Ticker
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Overview :: Soldiers
05.05.2006
»
»
Many Efforts Continued…
»
»
»
Applets
Flash
Web Start
But:
» All require new run-times
» Lack tight browser integration
» Require learning new technologies
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Overview :: The New Paradigm
05.05.2006
Asynchronous JavaScript + XML
AJAX
»
»
»
»
Browser is the run-time.
Has access to all browser elements/functions.
NO new technologies required.
Frees us from requirement to submit entire page.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
AGENDA
05.05.2006
»
»
»
»
»
»
UI: History Channel Overview
The New Paradigm: Ajax
»
»
»
Definition
Architecture
Examples
Ajax: Worries in Management
Design: Return of the Lost Art
State of the Art
Future
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
The New Paradigm: Ajax :: Definition
05.05.2006
Asynchronous JavaScript + XML
» Defines an Approach:
» Standards-based presentation (CSS, XHTML)
» Dynamic Display/Interaction via DOM
» Data manipulation with XSLT
» Asynchronous data/code retrieval
» Bound in JavaScript (ECMAScript)
AJAX is not, itself, a new technology.
AJAX is a term that identifies a method to load and
manipulate data from a server in a web browser, without
reloading the entire page.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
The New Paradigm: Ajax :: Definition
05.05.2006
“All crises begin with the blurring of one
paradigm and the consequent
loosening of the rules for normal
research. “ -T.S. Kuhn
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
The New Paradigm: Ajax :: Architecture
05.05.2006
Ajax Engine
is loaded into the
browser
Engine intercepts user
events and requests
Credit: J.J. Garrett, Ajax: A New Approach to Web
Applications February 2005
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
Engine performs:
• Data Validation
• Interface Changes
• Server Requests
[ ]
The New Paradigm: Ajax :: Architecture
05.05.2006
Can also forward
new code, and
serialized objects.
Credit: J.J. Garrett, Ajax: A New Approach to Web
Applications February 2005
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
The New Paradigm: Ajax :: Architecture
05.05.2006
No new technologies;
instead, a new way of
using them.
Credit: J.J. Garrett, Ajax: A New Approach to Web
Applications February 2005
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
The New Paradigm: Ajax :: Architecture
05.05.2006
In the “old” method, we fire off a request, and lock while
waiting for the response.
(Users became used to waiting)
Credit: J.J. Garrett, Ajax: A New Approach to Web
Applications February 2005
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
The New Paradigm: Ajax :: Architecture
05.05.2006
AJAX decouples the request from the response.
(No more waiting; the Engine works in the “background”)
Credit: J.J. Garrett, Ajax: A New Approach to Web
Applications February 2005
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
The New Paradigm: Ajax :: Some Examples
05.05.2006
»
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
Ajax Examples
» Google Maps
» Google Suggest
» MyYahoo
» AOL A9
» Zillow.com
» DesignBais
[ ]
AGENDA
05.05.2006
»
»
»
»
»
»
UI: History Channel Overview
The New Paradigm: Ajax
Ajax: Worries in Management
»
»
»
Blurred Boundaries
MVC: Help from an old friend
Design Patterns: Control at last
Design: Return of the Lost Art
State of the Art
Future
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
»
Blending Roles?
» Functionality now in JavaScript
» Who codes the JavaScript?
» Designers?
» Middleware Developers?
Consider an Autocomplete Example *…
* Inspired by Thomas Fuch’s(?) Flash-based demonstration:
http://www.phppatterns.com/stuff/latency.html
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Start typing in a name:
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Start typing in a name:
>
A
Our Ajax Engine is triggered by the key_up event,
and sends a request to the server to filter the
name list on “A”.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Some suggestions are returned and presented:
>
Andy Dick
>
A
Andy LaMora
Anthony Jefts
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
>
Arturo Sandoval
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Keep typing, suggestions are refined:
>
Andy Dick
>
An
Andy LaMora
Anthony Jefts
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Keep typing, suggestions are refined:
>
Andy Dick
>
And
Andy LaMora
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Keep typing, suggestions are refined:
>
Andy Dick
>
Andy
Andy LaMora
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Keep typing, suggestions are refined:
>
Andy Dick
>
Andy
Andy LaMora
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Keep typing, suggestions are refined:
>
Andy LaMora
>
Andy L
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
That’s the one, so I hit tab to select it.
>
Andy LaMora
>
Andy LaMora
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Great!
But is a real world example?
What if our network lags?
Lets try something more realistic:
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Start typing in a name:
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
>
A
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Start typing in a name:
>
An
Hmmm…. Our engine is still processing requests,
but there are no results. Network must be slow.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Start typing in a name:
>
And
We’ll keep typing.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Start typing in a name:
>
Andy
Still nothing!
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Start typing in a name:
>
Andy Dick
>
Andy
Andy LaMora
>
Well now something is happening, but…
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Start typing in a name:
>
Andy Dick
>
Andy
Andy LaMora
Anthony Jefts
>
??? I’m not typing ??
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Start typing in a name:
>
Andy Dick
>
Andy
Andy LaMora
Anthony Jefts
>
Arturo Sandoval
What the heck is going on…
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
Now if I hit tab, I get the wrong name:
>
Andy Dick
>
Andy Dick
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
What Happened?
Our Ajax Autocomplete module was too naïve. It didn’t
know, or forgot to remember:
NETWORK LATENCY VARIES WITH TIME
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
»
Three factors introduced error:
»
HTTP transport
» Rely on Request/Response model
»
Asynchronous Communication
» Every request is independent
» No transaction to bind our request/response pairs
»
Network Lag
» Our first requests returned last;
» {1,2,3,4} returned {4,3,2,1}
» But could have been any order at all.
» Latency varies with time!
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Blurred Boundaries
05.05.2006
Ajax Autocomplete
»
So, what kind of problem is this anyway?
»
User Interface?
»
Design?
»
Network protocol?
One could assign sequence numbers to the requests, of
course. However, there is no “standard” solution as yet.
Ajax introduces some new project management problems, and
requires some thought viv. project contributor roles.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: MVC
05.05.2006
»
To The Rescue: MVC
» Model View Controller in UI
» Each GUI Item developed on MVC
» Callback Functions
» Element Identifiers
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Worries In Management: Design Patterns
05.05.2006
»
Raising the Bar on JavaScript Development
» Thinking about Roles
» Opportunity: Better Code
» Design Patterns
» Command Pattern
» Observer Pattern
»
Attention to Division of Labor
» Programmers Program
» Designers Design
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
AGENDA
05.05.2006
»
»
»
»
»
»
UI: History Channel Overview
The New Paradigm: Ajax
Ajax: Worries in Management
Design: Return of the Lost Art
»
»
»
Metaphors and Affordances
Example: Control Options
IA Impact
State of the Art
Future
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Design :: Metaphors & Affordances
05.05.2006
»
Metaphors
»
»
»
Usage Model (eg Desktop)
Workflows patterned after model
Icons Indicate Purpose
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
»
Affordances
»
»
Proper use is implied
Subtle employment of familiar cues
[ ]
Design :: Example: Control Options
05.05.2006
We want to adjust the order that our questions appear in a survey.
(With Ajax, of course)
Our containers
can be dragged
around
Instructions: Order Your Questions
The Moon is a Planet
Yes
No
Venus is a Comet
Yes
No
Alpha Centauri is a Star
Yes
No
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
Design :: Example: Control Options
05.05.2006
So, it should be clear to the user what can be done – from the
containers alone.
Instructions: Order Your Questions
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
But, is it clear
what can be
done here?
[ ]
Design :: Example: Control Options
05.05.2006
Provide affordances that indicate function to the user – invite the
correct usage.
Instructions: Order Your Questions
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
Provide the
containers with
“grips”.
[ ]
Design :: Example: Control Options
05.05.2006
The Point: Web UI designers must think like desktop application
designers!
Instructions: Order Your Questions
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
Need Ajax
Toolkits/Frame
works to
provide these
(TopCoder
Opportunity?)
[ ]
Design :: IA Impact
05.05.2006
»
Impact on Information Architects
»
Sovereign vs. Page-Based Interaction
Should it behave like a desktop program?
Do we need to communicate state?
»
Best use of Rich Behavior
Use affordances to suggest next steps.
Colors and responsiveness indicate state: OnBlur()
»
Mindful of MVC/Labor Divisions
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
AGENDA
05.05.2006
»
»
»
»
»
»
UI: History Channel Overview
The New Paradigm: Ajax
Ajax: Worries in Management
Design: Return of the Lost Art
State of the Art
»
»
»
IFrame vs. XMLHTTPRequest
Browser Security
Acceptance
Future
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
State: IFrame vs. XMLHTTPRequest
05.05.2006
»
IFrames
» Wide Browser Support
» Consistant Code Base
» Can be faster for large requests
» Can lessen zone problems
» Very hard to debug
» Back-button support
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
»
XMLHTTPRequest
» Limited browser support
» Requires ActiveX on IE
» Different Code Bases
» Faster for small requests
» Designed for the purpose
» Easier to parse return data
[ ]
State: Browser Security
05.05.2006
»
Browser Security is an Issue
» Zones
The browser security model prevents us from (easily)
referencing servers other than the page source.
»
IE: Active X Requirements
IE requires ActiveX for XHR. ActiveX is switched
off by default (even though MS invented it).
»
Future standards are in flux
JSON vs XML? Will MS play along?
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
State: Acceptance
05.05.2006
»
Software Frameworks
» Java Server Faces
» Atlas (Microsoft)
» Ruby On Rails
»
Applications
» Google
» Yahoo
» Internals
» ASPs!
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ]
AGENDA
05.05.2006
»
»
»
»
»
»
UI: History Channel Overview
The New Paradigm: Ajax
Ajax: Worries in Management
Design: Return of the Lost Art
State of the Art
Future
»
»
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
Service Orientated Architecture
Application Service Providers
May 5, 2006 // Andy LaMora
“...though the world does not change
with a change of paradigm, the scientist
afterwards works in a different world. “
CONFIDENTIAL Copyright 2006, TopCoder, Inc.