SlideShare uma empresa Scribd logo
1 de 63
Web 3.0 UX Patterns
Emerging Application and Content Patterns
           NYC Ext JS Meetup 9/27/2010
Pat Sheridan

        •     NoVa:JSMeetup
        •     Product Strategy, Three Pillar
        •     www.patsheridan.com
        •     www.threepillarglobal.com

        • @sheridap




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Application Suite User Experience

        • Activity based references over hierarchical
          lookups
        • Federated searches
        • Workflow Elements
        • Visual Asset creation
        • Form Asset creation
        • Multi-faceted data/ User Management
        • Nested Task Workflows
                – Task within a task

©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Application Suite




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Federated Search




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Workflow Applications




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Asset Creation/ Management




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Visual Asset Creation




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Form Asset Creation




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Multi-faceted Data




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Mobile UX




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Mobile UX




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Mobile UX
        •     Branded vs. unbranded UI elements
        •     Native VS. Web feel
        •     Localization
        •     Device Orientation
        •     Device Integration
        •     Transitions
        •     Application ‘Aspects’
                – Evernote
                – Twitter
                – Facebook

©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Digital Content Lifecycle




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Under-the-waterline Integration
        Points
        •     CMS
        •     CDN
        •     Ad server
        •     Analytics
        •     Video Formats
        •     Metadata




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Feature List:
        Features                                                 UX Patterns
        • Intuitive user experience                              • Watch Video
        • Support Social                                         • Search, Browse / Find
          Engagement                                                – By Program
        • Engaging (and                                             – By Schedule
          appropriate ) promo                                    • Recommend (inbound)
          material                                                  – (inbound)
                                                                      (Activity)Popularity
        • Monetization platform
                                                                    – (inbound) Featured (PBS)
        • eCommerce/ Buy Now
          from iTunes                                            • Engage (outbound)
                                                                    – Share/ Social media
        • Localization Support
                – Local Station Links
                                                                 • Customize
                – Local TV schedules
                                                                    – Playlist
                                                                    – Favorite
        • Metrics and reporting
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Conceptual Planning




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Wireframes




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Design Comps




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Editorial Content + Social
        Engagement



                                                                 Facebook

                                                                  Twitter




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Digital Content types




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Design Patterns
        •     Search / find                                      •   Huffington Post
        •     Browse                                             •   BBC
        •     Recommend
                                                                 •   CNN
        •     Related stories
        •     Rate
                                                                 •   Economist
        •     Comment                                            •   WSJ
        •     Discuss                                            •   Fox News
        •     Engage                                             •   Google News
        •     Share                                              •   USA Today
        •     Update Activity/ Real time
        •     Subscribe/ Follow / Join
        •     Ad Placement
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Tone, Voice, Form

        Pattern Relationships
        • Story Form & Ad
          Placement

        • Anything & Ad Placement

        • Engage & Join

        • Activity & Transition



©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Search




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Search




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Search/Find



        Results
          •RED: ads
          •BLUE: web                                             Paginate
          •Grey: results                                         Sort
                                                                 filter
          Groupings:                                             Search within
          •Top stories                                           Search archives
          •Popular                                               Sponsored links
          •Featured                                              Subscribe RSS
          •News/web


©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Browse

        •     Category                                           • Source
        •     Location                                             – Author
        •     Top stories                                          – Columnist
                                                                   – Blogger
        •     Viewer segment
                – College
                                                                 • Story form
                – affinity                                       • Media type
        • Popularity                                               – Video
                – By # comments                                    – Photo essay
                – Most shared

©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Browse + Customize




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Recommend




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Recommend




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Rate / Share




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Rate / Share




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Comment / Discuss




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Comment / Discuss




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Share / Engage




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Short Form Content




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Aggregated Content




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
3rd Party Content/Widgets
        NPR                                   Twitter            Facebook   Onespot
                                                                            Sunlight Foundation
                                                                            Every
                                                                            …




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Engage Content

                                                                 • Poll
                                                                 • Quiz




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Story Forms: story




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Story Forms: Blog




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Story Forms: photo




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Story Forms: photo




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Story Forms: quote




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Story Forms: statistic




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Story Forms: story




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Story Forms: story




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Story Forms: story




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Aggregated Content Blocks




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Aggregated content: Photo player




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Aggregated content: Lightbox
        Gallery




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Aggregated content: Video Player




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Aggregated content: Blogs




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Aggregated content: Lists




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Aggregated content:




©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved

Mais conteúdo relacionado

Destaque (7)

Windermere Real Estate January 2010 Sales Charts (Palm Springs Area)
Windermere Real Estate January 2010 Sales Charts (Palm Springs Area) Windermere Real Estate January 2010 Sales Charts (Palm Springs Area)
Windermere Real Estate January 2010 Sales Charts (Palm Springs Area)
 
How Agile Solves Project Management Problems
How Agile Solves Project Management ProblemsHow Agile Solves Project Management Problems
How Agile Solves Project Management Problems
 
Pmi Project Management Core Problems Uet Dec 22 09
Pmi Project Management Core Problems   Uet Dec 22 09Pmi Project Management Core Problems   Uet Dec 22 09
Pmi Project Management Core Problems Uet Dec 22 09
 
Software Engineering Practice - Project management
Software Engineering Practice - Project managementSoftware Engineering Practice - Project management
Software Engineering Practice - Project management
 
Ideal project and resource management system
Ideal project and resource management systemIdeal project and resource management system
Ideal project and resource management system
 
Top 10 Microsoft Project Problems
Top 10 Microsoft Project ProblemsTop 10 Microsoft Project Problems
Top 10 Microsoft Project Problems
 
Meltwater tweetakademie 120411
Meltwater tweetakademie 120411Meltwater tweetakademie 120411
Meltwater tweetakademie 120411
 

Semelhante a NYC.JS

#SocialMadness - Social Media Best Practices
#SocialMadness - Social Media Best Practices#SocialMadness - Social Media Best Practices
#SocialMadness - Social Media Best Practices
Starmark
 
How internet marketing can increase your business
How internet marketing can increase your businessHow internet marketing can increase your business
How internet marketing can increase your business
Chris Appleton
 
Mobile Apps for Events - PCMA Heartland
Mobile Apps for Events - PCMA HeartlandMobile Apps for Events - PCMA Heartland
Mobile Apps for Events - PCMA Heartland
Jessica Levin
 
Context Aware Everything!
Context Aware Everything!Context Aware Everything!
Context Aware Everything!
Duo Consulting
 
Caviar Technology on a Ramen Budget
Caviar Technology on a Ramen BudgetCaviar Technology on a Ramen Budget
Caviar Technology on a Ramen Budget
Jessica Levin
 
Notes Version: The Mobile Database And Multichannel Integration
Notes Version: The Mobile Database And Multichannel IntegrationNotes Version: The Mobile Database And Multichannel Integration
Notes Version: The Mobile Database And Multichannel Integration
Vivastream
 
IE DIgital Marketing (Google+ v2)
IE DIgital Marketing (Google+ v2)IE DIgital Marketing (Google+ v2)
IE DIgital Marketing (Google+ v2)
Diego Sánchez
 
online and offline reputation management
online and offline reputation managementonline and offline reputation management
online and offline reputation management
Praful Baweja
 

Semelhante a NYC.JS (20)

#SocialMadness - Social Media Best Practices
#SocialMadness - Social Media Best Practices#SocialMadness - Social Media Best Practices
#SocialMadness - Social Media Best Practices
 
Reputation Management - Giliian Muessig
Reputation Management  - Giliian MuessigReputation Management  - Giliian Muessig
Reputation Management - Giliian Muessig
 
Fourpin+
Fourpin+ Fourpin+
Fourpin+
 
Trends & Technologies Shaping Online Marketing
Trends & Technologies Shaping Online MarketingTrends & Technologies Shaping Online Marketing
Trends & Technologies Shaping Online Marketing
 
How internet marketing can increase your business
How internet marketing can increase your businessHow internet marketing can increase your business
How internet marketing can increase your business
 
Perso.na
Perso.naPerso.na
Perso.na
 
Mobile Apps for Events - PCMA Heartland
Mobile Apps for Events - PCMA HeartlandMobile Apps for Events - PCMA Heartland
Mobile Apps for Events - PCMA Heartland
 
The Five Ws of Corporate Social Media
The Five Ws of Corporate Social MediaThe Five Ws of Corporate Social Media
The Five Ws of Corporate Social Media
 
Context Aware Everything!
Context Aware Everything!Context Aware Everything!
Context Aware Everything!
 
Becoming a Blog and Social Media Entrepreneur
Becoming a Blog and Social Media EntrepreneurBecoming a Blog and Social Media Entrepreneur
Becoming a Blog and Social Media Entrepreneur
 
Caviar Technology on a Ramen Budget
Caviar Technology on a Ramen BudgetCaviar Technology on a Ramen Budget
Caviar Technology on a Ramen Budget
 
Notes Version: The Mobile Database And Multichannel Integration
Notes Version: The Mobile Database And Multichannel IntegrationNotes Version: The Mobile Database And Multichannel Integration
Notes Version: The Mobile Database And Multichannel Integration
 
IE DIgital Marketing (Google+ v2)
IE DIgital Marketing (Google+ v2)IE DIgital Marketing (Google+ v2)
IE DIgital Marketing (Google+ v2)
 
DERVİŞ DEMİR GOOGLE
DERVİŞ DEMİR GOOGLEDERVİŞ DEMİR GOOGLE
DERVİŞ DEMİR GOOGLE
 
Implementing a social media strategy
Implementing a social media strategyImplementing a social media strategy
Implementing a social media strategy
 
E commerce Tactics - A Zappos.com Analysis
E commerce Tactics - A Zappos.com AnalysisE commerce Tactics - A Zappos.com Analysis
E commerce Tactics - A Zappos.com Analysis
 
online and offline reputation management
online and offline reputation managementonline and offline reputation management
online and offline reputation management
 
Le Web 2010
Le Web 2010Le Web 2010
Le Web 2010
 
Socializing the association
Socializing the associationSocializing the association
Socializing the association
 
Kmp blogging presentation
Kmp   blogging presentationKmp   blogging presentation
Kmp blogging presentation
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Último (20)

Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 

NYC.JS

Notas do Editor

  1. Primary Application bar drives which application the user works inAll application use the same conceptual frameworkRecent activity/ Favorites starting pageWorking pageActions toolarSettings panels
  2. Primary Application bar drives which application the user works inAll application use the same conceptual frameworkRecent activity/ Favorites starting pageWorking pageActions toolarSettings panels
  3. In-line visual editingNodes, assets, and actions on the left accordion
  4. Assets created within a show context or independentlyUseful for event micro-site creation and hosted formsToolbarsPalettesDetachable docking palettesIn-line editingWYSIWYG elements
  5. Assets created within a show context or independentlyUseful for event micro-site creation and hosted formsToolbarsPalettesDetachable docking palettesIn-line editingWYSIWYG elements
  6. Assets created within a show context or independentlyUseful for event micro-site creation and hosted formsForms can use elements from pre-defined or configured collectionsCustom create fields for each client
  7. Assets created within a show context or independentlyUseful for event micro-site creation and hosted formsForms can use elements from pre-defined or configured collectionsCustom create fields for each client
  8. Goal oriented instructionsSplit pane workflow useful for person/user managementIn-line search and filtering over drill-down browsing
  9. Story with photoStory with media playerStory with media play + playlistBlogShort forms:QuoteStatsPhoto w/ textphoto
  10. Aggregated contentUser defined listList byTag authoractivityPhoto calendarPhoto gallery
  11. Npr widgetsTwitter widgetsFb widgetsSunlight foundation