may 5, 2006 // andy lamora confidential copyright 2006, topcoder, inc. next generation development...
TRANSCRIPT
May 5, 2006 // Andy LaMora
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
Next Generation Development
New Paradigms in User Interfaces
May 5, 2006 // Andy LaMora
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
“All crises begin with the blurring of one paradigm and the consequent loosening of the rules for normal research”. -T.S. Kuhn
» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
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
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Overview :: UI Through the Times05.05.2006
UI Shifts Corresponding to Increased User Base
1960s: Punch Cards
1970s: Command Line
1980s: GUI
1990s+: Web
? Next ?
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Overview :: UI Through the Times05.05.2006
1960s: Punch Cards
1970s: Command Line
1980s: GUI
1990s+: Web
? Next ?
But is the Browser really an advance in user interface design?
Let’s look at what was going on before NCSA Mosaic changed it all…
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Overview :: UI Through the Times05.05.2006
» GUI Advances» Desktop Paradigm
» Trash Bin» Tabs» Menu Bars
» Interactivity» Haptic Devices» 3D Displays
PARC Cone Tree, 1991
Robertson, Mackinlay & CardDemonstrating a trend towards rich, real-time interaction.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Overview :: GUIs & Web Impact05.05.2006
Form
Form
Web
Server
Punch
Card
Ticker
Mainframe
The user fills out a form, sends it to a processor, and patiently sips coffee awaiting the results.
What does that remind us of?
» 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 :: Soldiers05.05.2006
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Overview :: The New Paradigm05.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.
» 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
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Definition05.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 :: Definition05.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 :: Architecture05.05.2006
Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005
Ajax Engineis loaded into the
browser
Engine intercepts user events and requests
Engine performs:• Data Validation• Interface Changes• Server Requests
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Architecture05.05.2006
Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005
Can also forward new code, and
serialized objects.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Architecture05.05.2006
Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005
No new technologies; instead, a new way of using them.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Architecture05.05.2006
Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005
In the “old” method, we fire off a request, and lock while waiting for the response.
(Users became used to waiting)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Architecture05.05.2006
Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005
AJAX decouples the request from the response.
(No more waiting; the Engine works in the “background”)
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] The New Paradigm: Ajax :: Some Examples05.05.2006
» Ajax Examples» Google Maps» Google Suggest» MyYahoo» AOL A9» Zillow.com» DesignBais
» 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
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
» Blending Roles?» Functionality now in JavaScript» Who codes the JavaScript?
» Designers?» Middleware Developers?
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
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 Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.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 Boundaries05.05.2006
Ajax Autocomplete
>Some suggestions are returned and presented:
A
>
Andy Dick
Andy LaMora
Anthony Jefts
Arturo Sandoval
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Keep typing, suggestions are refined:
An
>
>Andy Dick
Andy LaMora
Anthony Jefts
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Keep typing, suggestions are refined:
And
>
>Andy Dick
Andy LaMora
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Keep typing, suggestions are refined:
Andy
>
>Andy Dick
Andy LaMora
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Keep typing, suggestions are refined:
Andy
>
>Andy Dick
Andy LaMora
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Keep typing, suggestions are refined:
Andy L
>
>Andy LaMora
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.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 Boundaries05.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 Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
A
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.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 Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
And
We’ll keep typing.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
Andy
Still nothing!
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
Andy
Well now something is happening, but…
>
Andy Dick
Andy LaMora
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
Andy
??? I’m not typing ??
>
Andy Dick
Andy LaMora
Anthony Jefts
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.05.2006
Ajax Autocomplete
>Start typing in a name:
Andy
What the heck is going on…
>
Andy Dick
Andy LaMora
Anthony Jefts
Arturo Sandoval
>
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Worries In Management: Blurred Boundaries05.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 Boundaries05.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 Boundaries05.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 Boundaries05.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.
» 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: MVC05.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.
[ ] Worries In Management: Design Patterns05.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
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
» Metaphors» Usage Model (eg Desktop)» Workflows patterned after model» Icons Indicate Purpose
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Design :: Metaphors & Affordances05.05.2006
» Affordances» Proper use is implied» Subtle employment of familiar cues
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Design :: Example: Control Options05.05.2006
Instructions: Order Your Questions
The Moon is a Planet
Venus is a Comet
Alpha Centauri is a Star
Yes No
Yes No
Yes No
We want to adjust the order that our questions appear in a survey.
(With Ajax, of course)
Our containers can be dragged
around
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Design :: Example: Control Options05.05.2006
Instructions: Order Your Questions
So, it should be clear to the user what can be done – from the containers alone.
But, is it clear what can be done here?
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Design :: Example: Control Options05.05.2006
Instructions: Order Your Questions
Provide affordances that indicate function to the user – invite the correct usage.
Provide the containers with
“grips”.
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
[ ] Design :: Example: Control Options05.05.2006
Instructions: Order Your Questions
The Point: Web UI designers must think like desktop application designers!
Need Ajax Toolkits/Frame
works to provide these
(TopCoder Opportunity?)
» 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.
[ ] Design :: IA Impact05.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
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
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.
[ ] State: IFrame vs. XMLHTTPRequest05.05.2006
» XMLHTTPRequest» Limited browser support» Requires ActiveX on IE» Different Code Bases» Faster for small requests» Designed for the purpose» Easier to parse return data
» Browser Security is an Issue» Zones
» IE: Active X Requirements
» Future standards are in flux
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
[ ] State: Browser Security
The browser security model prevents us from (easily) referencing servers other than the page source.
IE requires ActiveX for XHR. ActiveX is switched off by default (even though MS invented it).
JSON vs XML? Will MS play along?
» Software Frameworks» Java Server Faces» Atlas (Microsoft)» Ruby On Rails
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
[ ] State: Acceptance
» Applications» Google» Yahoo » Internals» ASPs!
» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future
» Service Orientated Architecture» Application Service Providers
[ ] AGENDA
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
05.05.2006
May 5, 2006 // Andy LaMora
CONFIDENTIAL Copyright 2006, TopCoder, Inc.
“...though the world does not change with a change of paradigm, the scientist afterwards works in a different world. “