At various Google Developer Day events in Europe I gave a talk on the State of Ajax, that focuses on the core issue of User Experience and where to go from here.
19. “Google Suggest
and Google Maps are two
examples of a new approach
to web applications that we at
Adaptive Path have been calling
Ajax. The name is shorthand for
Asynchronous JavaScript + XML,
and it represents a fundamental
shift in what’s possible
on the Web.”
Jesse James Garrett
Co-founder, Adaptive Path
20. “Google Suggest
and Google Maps are two
examples of a new approach
to web applications that we at
Adaptive Path have been calling
Ajax. The name is shorthand for
igne
r! Asynchronous JavaScript + XML,
Des
and it represents a fundamental
shift in what’s possible
on the Web.”
Jesse James Garrett
Co-founder, Adaptive Path
34. Jef Raskin
Noted Usability Expert “ e quality of any [so ware] is
ultimately determined by the
quality of the interaction between
The Humane Interface one human and one system.”
35. Jef Raskin
Noted Usability Expert
“If a system’s one-on-one
interaction with its human user is
The Humane Interface not pleasant and facile, the
resulting de ciency will poison
the performance of the entire
system, however ne that system
might be in its other aspects.
36. Jef Raskin
Noted Usability Expert
“If a system’s one-on-one
interaction with its human user is
The Humane Interface not pleasant and facile, the
resulting de ciency will poison
the performance of the entire
system, however ne that system
might be in its other aspects.
38. User Interface
Visual Design
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis
39. User Interface
HCI researchers are nerds!
Visual Design
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis
40. User Interface
HCI researchers are nerds!
Visual Design
Emacs!
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis
41. User Interface
HCI researchers are nerds!
Visual Design
vi!
Emacs!
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis
42. User Interface
HCI researchers are nerds!
Visual Design
!
M icrosoft Rulez vi!
Emacs!
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis
43. User Interface
HCI researchers are nerds!
Visual Design
!
M icrosoft Rulez vi!
Rea l programmers Emacs!
use C++
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis
64. Jakob Nielsen
Noted Usability Expert
“ e basic advice regarding
response times has been about the
same for thirty years:
65. “0.1 second is about the limit for
Jakob Nielsen
Noted Usability Expert having the user feel that the
system is reacting instantaneously,
meaning that no special feedback
is necessary except to display the
result.
66. Jakob Nielsen
Noted Usability Expert “1.0 second is about the limit for
the user's ow of thought to stay
uninterrupted, even though the
user will notice the delay.
67. <script type=quot;text/javascriptquot;>
function getCityByZip(zip) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
processResults(xhr);
}
xhr.open(quot;GETquot;, quot;/fun.endpoint?zip=quot; + zip);
xhr.send(null);
}
function processResults(xhr) {
if (xhr.readyState == 4) {
var parent = document.getElementById(quot;cityParentquot;);
parent.innerHTML = xhr.responseText;
}
}
</script>
75. The Old Taxonomy
Prototype
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.
76. The Old Taxonomy
Prototype
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.
jQuery
New, DOM-centric JavaScript helper
77. The Old Taxonomy
Prototype
dojo
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.
Your Soup-to-Nuts Ajax/Javascript
Platform
jQuery
New, DOM-centric JavaScript helper
80. The New Taxonomy
Plug-in Community Plug-in Community Plug-in Community
scripteka.com plugins.jquery.com dojox
Prototype jQuery Dojo Core
81. The New Taxonomy
Script.aculo.us jQuery UI dijit
Plug-in Community Plug-in Community Plug-in Community
scripteka.com plugins.jquery.com dojox
Prototype jQuery Dojo Core
96. “0.1 second is about the limit for
Jakob Nielsen
Noted Usability Expert having the user feel that the
system is reacting instantaneously,
meaning that no special feedback
is necessary except to display the
result.
100. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
Browser
101. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
Browser
102. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
Browser
103. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
JavaScript
Browser
104. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
JavaScript
Browser
105. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
JavaScript Web Browsing
Browser
106. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
l
e ntia k
Pot lenec
B ott
JavaScript Web Browsing
Browser
115. Jef Raskin “If [a] feature is well–designed,
Noted Usability Expert
and if we use it repeatedly, we
eventually... use the feature
The Humane Interface
habitually, without thought or
conscious e ort.
116. “In operating an interface we
combine or ‘chunk’ sequences of
actions into gestures, which, once
Jef Raskin
Noted Usability Expert started, proceed automatically.
Because we form gestures,
techniques such as having a user
The Humane Interface respond Y or N to an ‘Are you
sure?’ veri cation do not provide
safety: e typed ‘Y’ becomes
part of the gesture.”
121. Some Business Form
First Name: Some Value Foo: Some Value
Last Name: Some Value Gawuzzit: Some Value
Address Line 1: Some Value Lugnutzwit: Some Value
Address Line 2: Some Value Cookie Monster: Some Value
City: Some Value
State: Some Value
Zip: Some Value
ent
res st
P Pa
Form History:
122. Some Business Form
First Name: Some Value Foo: Some Value
History Value Here History Value Here
Last Name: Some Value Gawuzzit: Some Value
History Value Here History Value Here
Address Line 1: Some Value Lugnutzwit: Some Value
History Value Here History Value Here
Address Line 2: Some Value Cookie Monster: Some Value
History Value Here History Value Here
City: Some Value
History Value Here
State: Some Value
History Value Here
Zip: Some Value
History Value Here
go
ent k sa
e t
P res 2 we Pa
s
Form History:
123.
124. Don't forget, RIA's have rich
internet back-ends (RIBs?)
Jonathan Schwartz
CEO, Sun Microsystems
147. The New Java Plug-in
Beta Shipping Today with Java 1.6 “Update 10”
1 Java plug-in now out-of-process
No more locking up the browser UI on launch
Applets can persist across browser sessions
More control over the Applet’s JVM
2 Improved Applet deployment
JavaScript-based “Deployment Toolkit”
Mature JNLP-based Applet metadata
3 A smaller JDK
Micro-kernel gives streamlined download option
158. Future
Present
Ab
leed
edg ing
vers e
of H ion
Past TML
5!
HTML 5 Gears
• Standards • Implementation
• Long term • Battle hardened
• A place for innovation
• All browsers • Cross browser
• No plugin • Plugin
159. HTML 5
<video>
<audio>
<canvas>
<time>
<progress>
<meter>
<menu>
<input type=quot;email | date
| min | max | requiredquot;...
>
postMessage
Drag and drop
160. HTML 5
<video>
<audio>
<canvas>
<time>
<progress>
<meter>
<menu>
<input type=quot;email | date
| min | max | requiredquot;...
>
postMessage
Drag and drop
Ian (Hixie) Hickson
Standards Editor, Google Employee
167. Great
Widgets
Easy
Deployment
Extensive
Customization
Vectors
Ajax
Easy
Remoting
Easy
Programming
Model
168. Great
Widgets
Easy Great
Deployment FX
Extensive
Customization
Vectors
Ajax
Easy
Remoting
Easy
Programming
Model
169. Great
Widgets
Easy Great
Deployment FX
Extensive
Great Mobile
Customization
Story
Vectors
Ajax
Easy
Remoting
Easy
Programming
Model
170. Great
Widgets
Easy Great
Deployment FX
Extensive
Great Mobile
Customization
Story
Vectors
Ajax
Easy Desktop
Remoting Integration
Easy
Programming
Model
171. Great
Widgets
Easy Great
Deployment FX
Extensive
Great Mobile
Customization
Story
Vectors
Ajax
Easy Desktop
Remoting Integration
Easy
State-of-the-Art
Programming
Plug-ins
Model
172. Great
Widgets
Easy Great
Deployment FX
Extensive
Great Mobile
Customization
Story
Vectors
Ajax
Easy Desktop
Remoting Integration
Easy
State-of-the-Art
Programming
Plug-ins
Model