© Wiki Engineering...May 09, 2016 · © Wiki Engineering . © Wiki Engineering . © Wiki Engineering
Wiki Design Luke W
-
Upload
ross-lawley -
Category
Technology
-
view
118 -
download
7
description
Transcript of Wiki Design Luke W
![Page 1: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/1.jpg)
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
![Page 2: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/2.jpg)
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!
![Page 3: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/3.jpg)
3
5
PACKAGING DESIGNFOR WEBAPPLICATIONS
MEANINGFULSHOUTING
BACK OF PACK
UNPACKINGEXPERIENCE
6
MEANINGFULSHOUTING
DIFFERENTIATE
ATTRACT
EMBODY THE BRAND
![Page 4: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/4.jpg)
4
7
8
![Page 5: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/5.jpg)
5
9
BACK OF PACKSUPPORT THE STORY
OUTLINE BENEFITS &FEATURES
10
![Page 6: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/6.jpg)
6
11
12
![Page 7: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/7.jpg)
7
13
UNPACKINGEXPERIENCE
PHOTOS FROM FLICKR USERS KATIELIPS, PEALCO, AND *NATHAN
14
![Page 8: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/8.jpg)
8
15
16
![Page 9: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/9.jpg)
9
17
18
RICHINTERATIONS
INVITATIONS
TRANSITIONS
FEEDBACK
![Page 10: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/10.jpg)
10
19
Ajax Interface Design
20BILL SCOTT, DESIGNING FOR AJAX
![Page 11: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/11.jpg)
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
![Page 12: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/12.jpg)
12
23
24
CONTENTCREATION
USER EMPOWERMENT,NOT USER FRIENDLY
VALUE CREATION
![Page 13: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/13.jpg)
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
![Page 14: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/14.jpg)
14
27
User Empowerment?
28
![Page 15: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/15.jpg)
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
![Page 16: Wiki Design Luke W](https://reader034.fdocuments.us/reader034/viewer/2022051412/54c7f2484a795921328b46ae/html5/thumbnails/16.jpg)
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…