1 yahoo! user interface library nate koechley @ oracle user experience april 17th, 2006

50
1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

Upload: richard-oneal

Post on 13-Jan-2016

218 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

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

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

3

Web 1.0: Browser as Paper

Page 4: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

4

Web 2.0: Browser As Platform

Page 5: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

5

A Dramatic Transition

Page 6: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

6

People expect less online.

Page 7: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

7

But we are online…

Page 8: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

8

… and tied to the browser.

Page 9: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

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

10

how?

Page 11: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

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

12

We must

improve our technology

Page 13: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

13

(we need a robust platform!)

Page 14: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

14

and

raise expectations

Page 15: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

15

(so users are confident!)

Page 16: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

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

17

Six

commitments

to the platform

Page 18: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

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

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

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

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

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

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

24http://flickr.com/photos/niznoz/81087641/

DESIGN

DEVEL

Page 25: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

25

{design}

from Implementation Models

to Mental Models

Page 26: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

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

27

Alan Cooper’s GUI design canon

Page 28: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

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

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

30

½

Page 31: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

31

Note! Good experiences

aren’t plugged in…

Page 32: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

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

33

Developers can provide

powerful primitives and

compounds…

Page 34: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

34

but designers create

idioms and

love

Page 35: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

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

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

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

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

39

Page 40: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

40

Page 41: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006
Page 42: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

42

Page 43: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006
Page 44: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

44

Page 45: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006
Page 46: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

46

Page 47: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006
Page 48: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

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

49http://developer.yahoo.com/yui/articles/gbs/gbs.html

Page 50: 1 Yahoo! User Interface Library Nate Koechley @ Oracle User Experience April 17th, 2006

50

The Seasons Are Changing