SlideShare a Scribd company logo
1 of 17
Download to read offline
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
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
MEANINGFUL
PACKAGING DESIGN       SHOUTING
FOR WEB                BACK OF PACK
APPLICATIONS
                       UNPACKING
                       EXPERIENCE




                                      5




                   DIFFERENTIATE
MEANINGFUL
SHOUTING           ATTRACT
                   EMBODY THE BRAND




                                      6




                                          3
7




8




    4
SUPPORT THE STORY
BACK OF PACK
               OUTLINE BENEFITS &
               FEATURES




                                    9




                                    10




                                         5
11




12




     6
UNPACKING
EXPERIENCE




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




                                                                14




                                                                     7
15




16




     8
17




              INVITATIONS
RICH
              TRANSITIONS
INTERATIONS
              FEEDBACK




                            18




                                 9
Ajax Interface Design




                                 19




                                 20
BILL SCOTT, DESIGNING FOR AJAX




                                      10
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
23




           USER EMPOWERMENT,
CONTENT    NOT USER FRIENDLY
CREATION
           VALUE CREATION




                               24




                                    12
“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
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.” -Will Wright


                                                   29




                                                   30




                                                        15
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
For more information…




              Functioning Form
                www.lukew.com/ff/
              Drop me a note
                luke@lukew.com




                                    33




                                         17

More Related Content

Viewers also liked

张晓:大数据存储与访问测试基准
张晓:大数据存储与访问测试基准张晓:大数据存储与访问测试基准
张晓:大数据存储与访问测试基准hdhappy001
 
Patterns as Tools for User Interface Design
Patterns as Tools for User Interface DesignPatterns as Tools for User Interface Design
Patterns as Tools for User Interface Designinteractionpatterns.org
 
杨少华:阿里开放数据处理服务
杨少华:阿里开放数据处理服务杨少华:阿里开放数据处理服务
杨少华:阿里开放数据处理服务hdhappy001
 
袁晓如:大数据时代可视化和可视分析的机遇与挑战
袁晓如:大数据时代可视化和可视分析的机遇与挑战袁晓如:大数据时代可视化和可视分析的机遇与挑战
袁晓如:大数据时代可视化和可视分析的机遇与挑战hdhappy001
 
詹剑锋:Big databench—benchmarking big data systems
詹剑锋:Big databench—benchmarking big data systems詹剑锋:Big databench—benchmarking big data systems
詹剑锋:Big databench—benchmarking big data systemshdhappy001
 
翟艳堂:腾讯大规模Hadoop集群实践
翟艳堂:腾讯大规模Hadoop集群实践翟艳堂:腾讯大规模Hadoop集群实践
翟艳堂:腾讯大规模Hadoop集群实践hdhappy001
 

Viewers also liked (12)

Interaction Patterns In User Interfaces
Interaction Patterns In User InterfacesInteraction Patterns In User Interfaces
Interaction Patterns In User Interfaces
 
张晓:大数据存储与访问测试基准
张晓:大数据存储与访问测试基准张晓:大数据存储与访问测试基准
张晓:大数据存储与访问测试基准
 
Real World Design Patterns
Real World Design PatternsReal World Design Patterns
Real World Design Patterns
 
Improving Tag Clouds
Improving Tag CloudsImproving Tag Clouds
Improving Tag Clouds
 
Design Patterns Lw
Design Patterns LwDesign Patterns Lw
Design Patterns Lw
 
Vocabulary Of Patterns
Vocabulary Of PatternsVocabulary Of Patterns
Vocabulary Of Patterns
 
Best Practices For Form Design
Best Practices For Form DesignBest Practices For Form Design
Best Practices For Form Design
 
Patterns as Tools for User Interface Design
Patterns as Tools for User Interface DesignPatterns as Tools for User Interface Design
Patterns as Tools for User Interface Design
 
杨少华:阿里开放数据处理服务
杨少华:阿里开放数据处理服务杨少华:阿里开放数据处理服务
杨少华:阿里开放数据处理服务
 
袁晓如:大数据时代可视化和可视分析的机遇与挑战
袁晓如:大数据时代可视化和可视分析的机遇与挑战袁晓如:大数据时代可视化和可视分析的机遇与挑战
袁晓如:大数据时代可视化和可视分析的机遇与挑战
 
詹剑锋:Big databench—benchmarking big data systems
詹剑锋:Big databench—benchmarking big data systems詹剑锋:Big databench—benchmarking big data systems
詹剑锋:Big databench—benchmarking big data systems
 
翟艳堂:腾讯大规模Hadoop集群实践
翟艳堂:腾讯大规模Hadoop集群实践翟艳堂:腾讯大规模Hadoop集群实践
翟艳堂:腾讯大规模Hadoop集群实践
 

Similar to Wiki Design Considerations

Designing for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual EcosystemDesigning for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual EcosystemLuke Wroblewski
 
Designing.for.todays.web
Designing.for.todays.webDesigning.for.todays.web
Designing.for.todays.webNika Stuard
 
Web 2.0 Government 2.0
Web 2.0 Government 2.0Web 2.0 Government 2.0
Web 2.0 Government 2.0Zoe Laycock
 
Clearspring Widgetsphere
Clearspring WidgetsphereClearspring Widgetsphere
Clearspring Widgetsphereeraz
 
Developing the MIT Mobile Web
Developing the MIT Mobile WebDeveloping the MIT Mobile Web
Developing the MIT Mobile Webshu beta
 
Coworking 7th Floor
Coworking 7th FloorCoworking 7th Floor
Coworking 7th Floorfabiomasetti
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)Ergosign GmbH
 
10 Things You Probably Didn't Know About Plone
10 Things You Probably Didn't Know About Plone10 Things You Probably Didn't Know About Plone
10 Things You Probably Didn't Know About PloneJazkarta, Inc.
 
The Way Forward: What's next for content strategy
The Way Forward: What's next for content strategyThe Way Forward: What's next for content strategy
The Way Forward: What's next for content strategyKaren McGrane
 
Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages Luke Wroblewski
 
webken "IA" for Web Directors 20100306
webken "IA" for Web Directors 20100306webken "IA" for Web Directors 20100306
webken "IA" for Web Directors 20100306Takashi Sakamoto
 
10 Things About Plone - Software Freedom Day 2008
10 Things About Plone - Software Freedom Day 200810 Things About Plone - Software Freedom Day 2008
10 Things About Plone - Software Freedom Day 2008Jazkarta, Inc.
 
Cohere: Towards Web 2.0 Argumentation
Cohere: Towards Web 2.0 ArgumentationCohere: Towards Web 2.0 Argumentation
Cohere: Towards Web 2.0 ArgumentationSimon Buckingham Shum
 
New Zealand Software Association
New Zealand Software AssociationNew Zealand Software Association
New Zealand Software AssociationChris Sparshott
 
Web 2.0 Managerial Economics
Web 2.0 Managerial EconomicsWeb 2.0 Managerial Economics
Web 2.0 Managerial EconomicsAvinash Singh
 
Nolan Wright: Appcelerator's World-Class Ecosystem
Nolan Wright: Appcelerator's World-Class Ecosystem Nolan Wright: Appcelerator's World-Class Ecosystem
Nolan Wright: Appcelerator's World-Class Ecosystem Axway Appcelerator
 
the next generation of marketing technology platform
the next generation of marketing technology platformthe next generation of marketing technology platform
the next generation of marketing technology platformcleveg
 
Page Heirarchy - Luke Wroblewski
Page Heirarchy - Luke WroblewskiPage Heirarchy - Luke Wroblewski
Page Heirarchy - Luke Wroblewskiguestb27917
 
Linked In Exec4r
Linked In Exec4rLinked In Exec4r
Linked In Exec4rCSRA, Inc.
 

Similar to Wiki Design Considerations (20)

Designing for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual EcosystemDesigning for Web 2.0: The Visual Ecosystem
Designing for Web 2.0: The Visual Ecosystem
 
Designing.for.todays.web
Designing.for.todays.webDesigning.for.todays.web
Designing.for.todays.web
 
Web 2.0 Government 2.0
Web 2.0 Government 2.0Web 2.0 Government 2.0
Web 2.0 Government 2.0
 
Clearspring Widgetsphere
Clearspring WidgetsphereClearspring Widgetsphere
Clearspring Widgetsphere
 
Developing the MIT Mobile Web
Developing the MIT Mobile WebDeveloping the MIT Mobile Web
Developing the MIT Mobile Web
 
Coworking 7th Floor
Coworking 7th FloorCoworking 7th Floor
Coworking 7th Floor
 
UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)UX & RIAs: UI Design Challenges (ERGOSIGN)
UX & RIAs: UI Design Challenges (ERGOSIGN)
 
10 Things You Probably Didn't Know About Plone
10 Things You Probably Didn't Know About Plone10 Things You Probably Didn't Know About Plone
10 Things You Probably Didn't Know About Plone
 
The Way Forward: What's next for content strategy
The Way Forward: What's next for content strategyThe Way Forward: What's next for content strategy
The Way Forward: What's next for content strategy
 
Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages Design Patterns: Defining and Sharing Web Design Languages
Design Patterns: Defining and Sharing Web Design Languages
 
webken "IA" for Web Directors 20100306
webken "IA" for Web Directors 20100306webken "IA" for Web Directors 20100306
webken "IA" for Web Directors 20100306
 
10 Things About Plone - Software Freedom Day 2008
10 Things About Plone - Software Freedom Day 200810 Things About Plone - Software Freedom Day 2008
10 Things About Plone - Software Freedom Day 2008
 
Cohere: Towards Web 2.0 Argumentation
Cohere: Towards Web 2.0 ArgumentationCohere: Towards Web 2.0 Argumentation
Cohere: Towards Web 2.0 Argumentation
 
New Zealand Software Association
New Zealand Software AssociationNew Zealand Software Association
New Zealand Software Association
 
Web 2.0 Managerial Economics
Web 2.0 Managerial EconomicsWeb 2.0 Managerial Economics
Web 2.0 Managerial Economics
 
Nolan Wright: Appcelerator's World-Class Ecosystem
Nolan Wright: Appcelerator's World-Class Ecosystem Nolan Wright: Appcelerator's World-Class Ecosystem
Nolan Wright: Appcelerator's World-Class Ecosystem
 
the next generation of marketing technology platform
the next generation of marketing technology platformthe next generation of marketing technology platform
the next generation of marketing technology platform
 
Page Heirarchy - Luke Wroblewski
Page Heirarchy - Luke WroblewskiPage Heirarchy - Luke Wroblewski
Page Heirarchy - Luke Wroblewski
 
Ux Success
Ux SuccessUx Success
Ux Success
 
Linked In Exec4r
Linked In Exec4rLinked In Exec4r
Linked In Exec4r
 

Recently uploaded

How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubaikojalkojal131
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case StudySophia Viganò
 
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一Fi ss
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作7tz4rjpd
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 

Recently uploaded (20)

How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case Study
 
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
定制(CQU文凭证书)中央昆士兰大学毕业证成绩单原版一比一
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 

Wiki Design Considerations

  • 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. 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. MEANINGFUL PACKAGING DESIGN SHOUTING FOR WEB BACK OF PACK APPLICATIONS UNPACKING EXPERIENCE 5 DIFFERENTIATE MEANINGFUL SHOUTING ATTRACT EMBODY THE BRAND 6 3
  • 4. 7 8 4
  • 5. SUPPORT THE STORY BACK OF PACK OUTLINE BENEFITS & FEATURES 9 10 5
  • 6. 11 12 6
  • 7. UNPACKING EXPERIENCE PHOTOS FROM FLICKR USERS KATIELIPS, PEALCO, AND *NATHAN 13 14 7
  • 8. 15 16 8
  • 9. 17 INVITATIONS RICH TRANSITIONS INTERATIONS FEEDBACK 18 9
  • 10. Ajax Interface Design 19 20 BILL SCOTT, DESIGNING FOR AJAX 10
  • 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. 23 USER EMPOWERMENT, CONTENT NOT USER FRIENDLY CREATION VALUE CREATION 24 12
  • 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. User Empowerment? 27 28 14
  • 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. 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. For more information… Functioning Form www.lukew.com/ff/ Drop me a note luke@lukew.com 33 17