Download - Wiki Design Luke W
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…