WIKI DESIGN
       CONSIDERATIONS
        LUKE WROBLEWSKI
        SILICON VALLEY WEB BUILDER, SEPT. 2007




             ...
WAYS WE INTERACT WITH THE WORLD:
   • Locomotion
   • Conversation
   • Manipulation




-TERRY WINOGRAD, STANFORD


     ...
MEANINGFUL
PACKAGING DESIGN       SHOUTING
FOR WEB                BACK OF PACK
APPLICATIONS
                       UNPACKI...
7




8




    4
SUPPORT THE STORY
BACK OF PACK
               OUTLINE BENEFITS &
               FEATURES




                             ...
11




12




     6
UNPACKING
EXPERIENCE




      PHOTOS FROM FLICKR USERS KATIELIPS, PEALCO, AND *NATHAN   13




                          ...
15




16




     8
17




              INVITATIONS
RICH
              TRANSITIONS
INTERATIONS
              FEEDBACK




                   ...
Ajax Interface Design




                                 19




                                 20
BILL SCOTT, DESIGNIN...
Drag and Drop. Drag and Drop Modules. In Page Editing. In Page
  Custom Editing. Direct State Editing. Grid Cell Editing. ...
23




           USER EMPOWERMENT,
CONTENT    NOT USER FRIENDLY
CREATION
           VALUE CREATION




                  ...
“What I hope I’m most remembered for is getting
past the idea of user-friendly. I don’t think people
want friendly compute...
User Empowerment?




                    27




                    28




                         14
“Most user-created content is crappy. As we
create better tools, we’ll increase the value of
the output of those tools.” -...
Constraints Balance Systems

• Quality Control
    • Lightweight interactions =
      lightweight content
    • “Burying t...
For more information…




              Functioning Form
                www.lukew.com/ff/
              Drop me a note
  ...
Upcoming SlideShare
Loading in...5
×

Wiki Design Luke W

3,056

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,056
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wiki Design Luke W

  1. 1. WIKI DESIGN CONSIDERATIONS LUKE WROBLEWSKI SILICON VALLEY WEB BUILDER, SEPT. 2007 1 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, product strategy, & interface design articles Previously • eBay Inc., Lead Designer • University of Illinois, Instructor • NCSA, Senior Designer http://www.lukew.com 2 1
  2. 2. WAYS WE INTERACT WITH THE WORLD: • Locomotion • Conversation • Manipulation -TERRY WINOGRAD, STANFORD 3 Web Transitions 1. Locomotion to digital representations of 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! 4 2
  3. 3. MEANINGFUL PACKAGING DESIGN SHOUTING FOR WEB BACK OF PACK APPLICATIONS UNPACKING EXPERIENCE 5 DIFFERENTIATE MEANINGFUL SHOUTING ATTRACT EMBODY THE BRAND 6 3
  4. 4. 7 8 4
  5. 5. SUPPORT THE STORY BACK OF PACK OUTLINE BENEFITS & FEATURES 9 10 5
  6. 6. 11 12 6
  7. 7. UNPACKING EXPERIENCE PHOTOS FROM FLICKR USERS KATIELIPS, PEALCO, AND *NATHAN 13 14 7
  8. 8. 15 16 8
  9. 9. 17 INVITATIONS RICH TRANSITIONS INTERATIONS FEEDBACK 18 9
  10. 10. Ajax Interface Design 19 20 BILL SCOTT, DESIGNING FOR AJAX 10
  11. 11. Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom Editing. 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 Context Progress. 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. Opacity Focus. Configurable Module - Faceplate. Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill 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. Transition. Expand Transition. Fade In Transition. Fade Out Transition. Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide Transition. Rich Internet Object. Available. Selected. 21 BILL SCOTT, DESIGNING FOR AJAX INVITATION TRANSITION FEEDBACK 22 11
  12. 12. 23 USER EMPOWERMENT, CONTENT NOT USER FRIENDLY CREATION VALUE CREATION 24 12
  13. 13. “What I hope I’m most remembered for is getting past the idea of user-friendly. I don’t think people want friendly computers. What they want is a sense of power to get their job done.” -Ben Schniederman 25 User Friendly 26 13
  14. 14. User Empowerment? 27 28 14
  15. 15. “Most user-created content is crappy. As we create better tools, we’ll increase the value of the output of those tools.” -Will Wright 29 30 15
  16. 16. Constraints Balance Systems • Quality Control • Lightweight interactions = lightweight content • “Burying the submit button [in community Web sites] encourages fewer, but better posts.” -Derek Powazek, Design for Community, 2001 • Barriers to Entry • quot;The best check on bad behavior is identity.” -Mark Zuckerburg, Facebook Founder 31 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… 32 16
  17. 17. For more information… Functioning Form www.lukew.com/ff/ Drop me a note luke@lukew.com 33 17
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×