1

1

WIKI DESIGNCONSIDERATIONSLUKE WROBLEWSKISILICON VALLEY WEB BUILDER, SEPT. 2007

2

Luke Wroblewski

Yahoo! Inc.• Senior Principal, Product Ideation & Design

LukeW Interface Designs• Principal & Founder• Product design & strategy services

Author• Site-Seeing: A Visual Approach to Web Usability

(Wiley & Sons)

• Upcoming: Best Practices for Form Design(Rosenfeld Media)

• Functioning Form: Web applications, productstrategy, & interface design articles

Previously• eBay Inc., Lead Designer• University of Illinois, Instructor• NCSA, Senior Designer

http://www.lukew.com

2

3

WAYS WE INTERACT WITH THE WORLD:

• Locomotion

• Conversation

• Manipulation

-TERRY WINOGRAD, STANFORD

4

Web Transitions

1. Locomotion to digital representationsof physical entities• Directories & portals, Yahoo!• Company sites & brochure-ware

2. Digital manipulation of physical goods• E-commerce everywhere• Amazon, eBay

3. Digital services• Enable conversation & manipulation• Display surfaces• Content creation• Aggregation• Entertainment

-Types of digital services: TOM CHI, YAHOO!

3

5

PACKAGING DESIGNFOR WEBAPPLICATIONS

MEANINGFULSHOUTING

BACK OF PACK

UNPACKINGEXPERIENCE

6

MEANINGFULSHOUTING

DIFFERENTIATE

ATTRACT

EMBODY THE BRAND

4

7

8

5

9

BACK OF PACKSUPPORT THE STORY

OUTLINE BENEFITS &FEATURES

10

6

11

12

7

13

UNPACKINGEXPERIENCE

PHOTOS FROM FLICKR USERS KATIELIPS, PEALCO, AND *NATHAN

14

8

15

16

9

17

18

RICHINTERATIONS

INVITATIONS

TRANSITIONS

FEEDBACK

10

19

Ajax Interface Design

20BILL SCOTT, DESIGNING FOR AJAX

11

21

Drag and Drop. Drag and Drop Modules. In Page Editing. In PageCustom Editing. Direct State Editing. Grid Cell Editing. Inline CustomEditing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom

Editing. Inline Text Editing. Persistent Portals. Inline Reordering.Indication. Busy Indication. Cursor Busy. In Context Busy. In ContextProgress. Inline Status. Auto Complete. Balloon Error Tip. Deferred

Content Loading. Dynamic Goal. Narrowing Choices. Refining Search.Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop

Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. OpacityFocus. Configurable Module - Faceplate. Configurable Module - Flip It.

Configurable Module - Inline Configure. Configurable Module - SlideOut Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling.

Expandable Paging Boundary. Fresh Content. Hover Detail. In PlaceDrill Down. Inline Assistant. Inline Validation. Validate Then Suggest.On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling

Modules. Auto Save. In Context Tools. Remembered Collection.Remembered Preferences. Auto Form Fill. Rating an Object.

Transition. Brighten Transition. Cross Fade Transition. Dim Transition.Expand Transition. Fade In Transition. Fade Out Transition. Flip

Transition. Move Transition. Self-Healing Transition. CollapseTransition. Slide Transition. Rich Internet Object. Available. Selected.

BILL SCOTT, DESIGNING FOR AJAX

Drag and Drop. Drag and Drop Modules. In Page Editing. In PageCustom Editing. Direct State Editing. Grid Cell Editing. Inline CustomEditing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom

Editing. Inline Text Editing. Persistent Portals. Inline Reordering.Indication. Busy Indication. Cursor Busy. In Context Busy. In ContextProgress. Inline Status. Auto Complete. Balloon Error Tip. Deferred

Content Loading. Dynamic Goal. Narrowing Choices. Refining Search.Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop

Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. OpacityFocus. Configurable Module - Faceplate. Configurable Module - Flip It.

Configurable Module - Inline Configure. Configurable Module - SlideOut Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling.

Expandable Paging Boundary. Fresh Content. Hover Detail. In PlaceDrill Down. Inline Assistant. Inline Validation. Validate Then Suggest.On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling

Modules. Auto Save. In Context Tools. Remembered Collection.Remembered Preferences. Auto Form Fill. Rating an Object.

Transition. Brighten Transition. Cross Fade Transition. Dim Transition.Expand Transition. Fade In Transition. Fade Out Transition. Flip

Transition. Move Transition. Self-Healing Transition. CollapseTransition. Slide Transition. Rich Internet Object. Available. Selected.

22

INVITATION

TRANSITION

FEEDBACK

12

23

24

CONTENTCREATION

USER EMPOWERMENT,NOT USER FRIENDLY

VALUE CREATION

13

25

“What I hope I’m most remembered for is gettingpast the idea of user-friendly. I don’t think peoplewant friendly computers. What they want is a senseof power to get their job done.” -Ben Schniederman

26

User Friendly

14

27

User Empowerment?

28

15

29

“Most user-created content is crappy. As wecreate better tools, we’ll increase the value ofthe output of those tools.” -Will Wright

30

16

31

Constraints Balance Systems

• Quality Control• Lightweight interactions =

lightweight content

• “Burying the submit button [incommunity Web sites]encourages fewer, but betterposts.” -Derek Powazek, Designfor Community, 2001

• Barriers to Entry• "The best check on bad behavior

is identity.” -Mark Zuckerburg,Facebook Founder

32

Wiki Design Considerations

• Packaging Design for Web Applications• Meaningful Shouting• Back of Pack• Unpacking Experiences

• Rich Interactions• Invitation, Transition, Feedback

• Content Creation• Empowerment• Barriers to Entry

• More…

17

33

For more information…

Functioning Formwww.lukew.com/ff/

Drop me a noteluke@lukew.com