This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
1
WIKI DESIGNCONSIDERATIONSLUKE WROBLEWSKISILICON VALLEY WEB BUILDER, SEPT. 2007
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
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
“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