1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.
-
Upload
richard-oneal -
Category
Documents
-
view
219 -
download
0
Transcript of 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.
![Page 1: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/1.jpg)
1
Yahoo! User Interface Library
Nate Koechley@ Oracle User Experience
April 17th, 2006
![Page 2: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/2.jpg)
2
changing seasons
on the webhttp://flickr.com/photos/getthebubbles/107463768/
![Page 3: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/3.jpg)
3
Web 1.0: Browser as Paper
![Page 4: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/4.jpg)
4
Web 2.0: Browser As Platform
![Page 5: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/5.jpg)
5
A Dramatic Transition
![Page 6: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/6.jpg)
6
People expect less online.
![Page 7: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/7.jpg)
7
But we are online…
![Page 8: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/8.jpg)
8
… and tied to the browser.
![Page 9: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/9.jpg)
9
So we must
level the playing field.
http://www.flickr.com/photos/probek/44480413/
![Page 10: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/10.jpg)
10
how?
![Page 11: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/11.jpg)
11
it takes 2 things
http://flickr.com/photos/latitudes/104286031/
![Page 12: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/12.jpg)
12
We must
improve our technology
![Page 13: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/13.jpg)
13
(we need a robust platform!)
![Page 14: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/14.jpg)
14
and
raise expectations
![Page 15: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/15.jpg)
15
(so users are confident!)
![Page 16: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/16.jpg)
16
Nuts and Bolts
http://flickr.com/photos/snood/129758197/
![Page 17: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/17.jpg)
17
Six
commitments
to the platform
![Page 18: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/18.jpg)
18
1] Meet properties where they are today. Facilitate incremental
enhancement(“Transitional Internet Applications”)
![Page 19: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/19.jpg)
19
2] Provide a broad, inclusive platform for Web 2.0’s “Rich
Internet Application” development
(a la carte, not framework)
![Page 20: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/20.jpg)
20
3] Extensible and adaptive, to meet the needs of our diverse
product portfolio(lots of different contexts)
![Page 21: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/21.jpg)
21
4] Support all A-grade browsers – an evolving and still demanding challenge
(Graded Browser Support)
![Page 22: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/22.jpg)
22
5] Scale to Yahoo!’s scale and scope
(industrial grade)
![Page 23: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/23.jpg)
23
6] Be responsive and accountable to our community of
designers and engineers(your P1s are our P1s)
![Page 24: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/24.jpg)
24http://flickr.com/photos/niznoz/81087641/
DESIGN
DEVEL
![Page 25: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/25.jpg)
25
{design}
from Implementation Models
to Mental Models
![Page 26: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/26.jpg)
26
{development}
from Heterogeneous Environments
to Compelling and
Consistent APIs
![Page 27: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/27.jpg)
27
Alan Cooper’s GUI design canon
![Page 28: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/28.jpg)
28
[primitives]
[compounds]
[idioms]
click, drag, keypress
double-click, right-click, select
ctrl-c = copy,ctr-z = undo
![Page 29: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/29.jpg)
29
[primitives]
[compounds]
[idioms]
Connection Manager (Ajax)Connection Manager (Ajax)
Event UtilityEvent Utility
Dom CollectionDom Collection
Drag & DropDrag & DropAnimationAnimation
DHTML WindowingDHTML Windowing
Menu ControlMenu Control
SliderSliderTree ControlTree Control
Calendar ControlCalendar Control
AutoCompleteAutoComplete
The Yahoo! User Interface Library
![Page 30: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/30.jpg)
30
½
![Page 31: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/31.jpg)
31
Note! Good experiences
aren’t plugged in…
![Page 32: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/32.jpg)
32
… they are crafted by thinking
about people, NOT
technology
![Page 33: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/33.jpg)
33
Developers can provide
powerful primitives and
compounds…
![Page 34: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/34.jpg)
34
but designers create
idioms and
love
![Page 35: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/35.jpg)
35
but designers create
idioms and
love
setting it free…
http://www.flickr.com/photos/ck3/98186198/
![Page 36: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/36.jpg)
36
YUI Library Open Source ReleaseReleased on YDN under wide-open BSD license
2/06
![Page 37: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/37.jpg)
37
YUI Library Open Source ReleaseReleased on YDN under wide-open BSD license
2/06
![Page 38: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/38.jpg)
38
YUI Library Open Source ReleaseReleased on YDN under wide-open BSD license
2/06
• Good press from key influencers: WaSP, DOM Scripting Task Force, O’Reilly Radar, Slashdot, Boing Boing, many more
• Top entry on delicious, high profile on Technorati
• Exponential spike in YDN traffic during release
• >36K downloads of library in first two weeks
• YDN-javascript group membership: ~1000
![Page 39: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/39.jpg)
39
![Page 40: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/40.jpg)
40
![Page 41: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/41.jpg)
![Page 42: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/42.jpg)
42
![Page 43: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/43.jpg)
![Page 44: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/44.jpg)
44
![Page 45: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/45.jpg)
![Page 46: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/46.jpg)
46
![Page 47: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/47.jpg)
![Page 48: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/48.jpg)
48
Graded Browser Support
• 3 Grades of Browser Support
A-grade support (advanced support)
C-grade support (core support)
X-grade support (the X-Factor)
• http://developer.yahoo.com/yui/articles/gbs/gbs.html
![Page 49: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/49.jpg)
49http://developer.yahoo.com/yui/articles/gbs/gbs.html
![Page 50: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006.](https://reader035.fdocuments.net/reader035/viewer/2022070410/56649ebb5503460f94bc3150/html5/thumbnails/50.jpg)
50
The Seasons Are Changing