Your SlideShare is downloading. ×
0
Web 3.0 UX PatternsEmerging Application and Content Patterns           NYC Ext JS Meetup 9/27/2010
Pat Sheridan        •     NoVa:JSMeetup        •     Product Strategy, Three Pillar        •     www.patsheridan.com      ...
©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...
©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       ...
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        •     Analyt...
Feature List:        Features                                                 UX Patterns        • Intuitive user experien...
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     ...
Digital Content types©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Design Patterns        •     Search / find                                      •   Huffington Post        •     Browse   ...
Tone, Voice, Form        Pattern Relationships        • Story Form & Ad          Placement        • Anything & Ad Placemen...
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    ...
Browse        •     Category                                           • Source        •     Location                     ...
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              ...
Engage Content                                                                 • Poll                                     ...
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
Upcoming SlideShare
Loading in...5
×

NYC.JS

215

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
215
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Primary Application bar drives which application the user works inAll application use the same conceptual frameworkRecent activity/ Favorites starting pageWorking pageActions toolarSettings panels
  • Primary Application bar drives which application the user works inAll application use the same conceptual frameworkRecent activity/ Favorites starting pageWorking pageActions toolarSettings panels
  • In-line visual editingNodes, assets, and actions on the left accordion
  • Assets created within a show context or independentlyUseful for event micro-site creation and hosted formsToolbarsPalettesDetachable docking palettesIn-line editingWYSIWYG elements
  • Assets created within a show context or independentlyUseful for event micro-site creation and hosted formsToolbarsPalettesDetachable docking palettesIn-line editingWYSIWYG elements
  • 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
  • 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
  • Goal oriented instructionsSplit pane workflow useful for person/user managementIn-line search and filtering over drill-down browsing
  • Story with photoStory with media playerStory with media play + playlistBlogShort forms:QuoteStatsPhoto w/ textphoto
  • Aggregated contentUser defined listList byTag authoractivityPhoto calendarPhoto gallery
  • Npr widgetsTwitter widgetsFb widgetsSunlight foundation
  • Transcript of "NYC.JS"

    1. 1. Web 3.0 UX PatternsEmerging Application and Content Patterns NYC Ext JS Meetup 9/27/2010
    2. 2. Pat Sheridan • NoVa:JSMeetup • Product Strategy, Three Pillar • www.patsheridan.com • www.threepillarglobal.com • @sheridap©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    3. 3. ©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    4. 4. ©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    5. 5. 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
    6. 6. ©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    7. 7. Application Suite©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    8. 8. Federated Search©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    9. 9. ©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    10. 10. Workflow Applications©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    11. 11. ©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    12. 12. Asset Creation/ Management©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    13. 13. Visual Asset Creation©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    14. 14. ©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    15. 15. Form Asset Creation©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    16. 16. ©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    17. 17. Multi-faceted Data©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    18. 18. Mobile UX©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    19. 19. Mobile UX©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    20. 20. 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
    21. 21. Digital Content Lifecycle©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    22. 22. ©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    23. 23. Under-the-waterline Integration Points • CMS • CDN • Ad server • Analytics • Video Formats • Metadata©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    24. 24. 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
    25. 25. Conceptual Planning©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    26. 26. Wireframes©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    27. 27. Design Comps©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    28. 28. Editorial Content + Social Engagement Facebook Twitter©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    29. 29. Digital Content types©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    30. 30. 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
    31. 31. 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
    32. 32. Search©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    33. 33. Search©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    34. 34. 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
    35. 35. 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
    36. 36. Browse + Customize©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    37. 37. Recommend©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    38. 38. Recommend©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    39. 39. Rate / Share©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    40. 40. Rate / Share©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    41. 41. Comment / Discuss©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    42. 42. Comment / Discuss©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    43. 43. Share / Engage©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    44. 44. Short Form Content©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    45. 45. Aggregated Content©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    46. 46. 3rd Party Content/Widgets NPR Twitter Facebook Onespot Sunlight Foundation Every …©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    47. 47. Engage Content • Poll • Quiz©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    48. 48. Story Forms: story©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    49. 49. Story Forms: Blog©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    50. 50. Story Forms: photo©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    51. 51. Story Forms: photo©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    52. 52. Story Forms: quote©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    53. 53. Story Forms: statistic©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    54. 54. Story Forms: story©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    55. 55. Story Forms: story©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    56. 56. Story Forms: story©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    57. 57. Aggregated Content Blocks©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    58. 58. Aggregated content: Photo player©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    59. 59. Aggregated content: Lightbox Gallery©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    60. 60. Aggregated content: Video Player©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    61. 61. Aggregated content: Blogs©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    62. 62. Aggregated content: Lists©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    63. 63. Aggregated content:©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
    1. A particular slide catching your eye?

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

    ×