Emerging Application and Content Patterns<br />NYC Ext JS Meetup 9/27/2010<br />Web 3.0 UX Patterns<br />
NoVa:JSMeetup, Co-Founder<br />Product Strategy, Three Pillar<br />Sheridap.tumblr.com<br />www.threepillarglobal.com<br /...
Activity based references over hierarchical lookups<br />Federated searches<br />Workflow Elements<br />Visual Asset creat...
Application Suite<br />
Federated Search<br />
Workflow Applications<br />
Asset Creation/ Management<br />
Visual Asset Creation<br />
Form Asset Creation<br />
Multi-faceted Data<br />
Mobile UX<br />
Mobile UX<br />
Branded vs. unbranded UI elements<br />Native VS. Web feel<br />Localization<br />Device Orientation<br />Device Integrati...
Digital Content Lifecycle<br />
CMS<br />CDN<br />Ad server<br />Analytics<br />Video Formats<br />Metadata<br />Under-the-waterline Integration Points<br />
Feature List:<br />Features<br />UX Patterns<br />Intuitive user experience<br />Support Social Engagement<br />Engaging (...
Conceptual Planning<br />
Wireframes<br />
Design Comps<br />
Editorial Content + Social Engagement<br />Facebook<br />Twitter<br />
Digital Content types<br />
Design Patterns<br />Search / find <br />Browse<br />Recommend<br />Related stories<br />Rate<br />Comment<br />Discuss<br...
Pattern Relationships<br />Story Form & Ad Placement<br />Anything & Ad Placement<br />Engage & Join<br />Activity & Trans...
Search<br />
Search<br />
Search/Find<br />Results<br /><ul><li>RED: ads
BLUE: web
Grey: results</li></ul>Groupings:<br /><ul><li>Top stories
Popular
Featured
News/web</li></ul>Paginate<br />Sort<br />filter<br />Search within<br />Search archives<br />Sponsored links<br />Subscri...
Browse<br />Category<br />Location<br />Top stories<br />Viewer segment<br />College<br />affinity<br />Popularity<br />By...
Browse + Customize<br />
Recommend<br />
Recommend<br />
Rate / Share<br />
Rate / Share<br />
Comment / Discuss<br />
Comment / Discuss<br />
Share / Engage<br />
Short Form Content<br />
Aggregated Content<br />
3rd Party Content/Widgets<br />NPR<br />Twitter<br />Facebook<br />Onespot<br />Sunlight Foundation<br />Every<br />…<br />
Engage Content<br />Poll<br />Quiz<br />
Story Forms: story<br />
Story Forms: Blog<br />
Story Forms: photo<br />
Story Forms: photo<br />
Story Forms: quote<br />
Story Forms: statistic<br />
Story Forms: story<br />
Story Forms: story<br />
Story Forms: story<br />
Aggregated Content Blocks<br />
Aggregated content: Photo player<br />
Upcoming SlideShare
Loading in …5
×

Web 3.0 UX Patterns - Presented at Sencha New York Meetup September 2010

2,580 views

Published on

Here's a copy of my presentation delivered at the first Ext JS New York Meetup in September 2010.

My talk covered the emerging trends for successful enterprise class UX design, focusing on the tension between simplicity and complexity.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,580
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
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
  • Web 3.0 UX Patterns - Presented at Sencha New York Meetup September 2010

    1. 1. Emerging Application and Content Patterns<br />NYC Ext JS Meetup 9/27/2010<br />Web 3.0 UX Patterns<br />
    2. 2. NoVa:JSMeetup, Co-Founder<br />Product Strategy, Three Pillar<br />Sheridap.tumblr.com<br />www.threepillarglobal.com<br />@sheridap<br />Pat Sheridan<br />
    3. 3.
    4. 4.
    5. 5. Activity based references over hierarchical lookups<br />Federated searches<br />Workflow Elements<br />Visual Asset creation<br />Form Asset creation<br />Multi-faceted data/ User Management<br />Nested Task Workflows<br />Task within a task<br />Application Suite User Experience<br />
    6. 6.
    7. 7. Application Suite<br />
    8. 8. Federated Search<br />
    9. 9.
    10. 10. Workflow Applications<br />
    11. 11.
    12. 12. Asset Creation/ Management<br />
    13. 13. Visual Asset Creation<br />
    14. 14.
    15. 15. Form Asset Creation<br />
    16. 16.
    17. 17. Multi-faceted Data<br />
    18. 18. Mobile UX<br />
    19. 19. Mobile UX<br />
    20. 20. Branded vs. unbranded UI elements<br />Native VS. Web feel<br />Localization<br />Device Orientation<br />Device Integration<br />Transitions<br />Application ‘Aspects’<br />Evernote<br />Twitter<br />Facebook<br />Mobile UX<br />
    21. 21. Digital Content Lifecycle<br />
    22. 22.
    23. 23. CMS<br />CDN<br />Ad server<br />Analytics<br />Video Formats<br />Metadata<br />Under-the-waterline Integration Points<br />
    24. 24. Feature List:<br />Features<br />UX Patterns<br />Intuitive user experience<br />Support Social Engagement<br />Engaging (and appropriate ) promo material<br />Monetization platform<br />eCommerce/ Buy Now from iTunes<br />Localization Support <br />Local Station Links<br />Local TV schedules<br />Metrics and reporting<br />Watch Video<br />Search, Browse / Find<br />By Program<br />By Schedule<br />Recommend (inbound)<br />(inbound) (Activity)Popularity<br />(inbound) Featured (PBS)<br />Engage (outbound) <br />Share/ Social media<br />Customize<br />Playlist<br />Favorite<br />
    25. 25. Conceptual Planning<br />
    26. 26. Wireframes<br />
    27. 27. Design Comps<br />
    28. 28. Editorial Content + Social Engagement<br />Facebook<br />Twitter<br />
    29. 29. Digital Content types<br />
    30. 30. Design Patterns<br />Search / find <br />Browse<br />Recommend<br />Related stories<br />Rate<br />Comment<br />Discuss<br />Engage<br />Share<br />Update Activity/ Real time<br />Subscribe/ Follow / Join<br />Ad Placement<br />Huffington Post<br />BBC<br />CNN<br />Economist<br />WSJ<br />Fox News<br />Google News<br />USA Today<br />
    31. 31. Pattern Relationships<br />Story Form & Ad Placement<br />Anything & Ad Placement<br />Engage & Join<br />Activity & Transition<br />Tone, Voice, Form<br />
    32. 32. Search<br />
    33. 33. Search<br />
    34. 34. Search/Find<br />Results<br /><ul><li>RED: ads
    35. 35. BLUE: web
    36. 36. Grey: results</li></ul>Groupings:<br /><ul><li>Top stories
    37. 37. Popular
    38. 38. Featured
    39. 39. News/web</li></ul>Paginate<br />Sort<br />filter<br />Search within<br />Search archives<br />Sponsored links<br />Subscribe RSS<br />
    40. 40. Browse<br />Category<br />Location<br />Top stories<br />Viewer segment<br />College<br />affinity<br />Popularity<br />By # comments<br />Most shared<br />Source<br />Author<br />Columnist<br />Blogger<br />Story form<br />Media type<br />Video<br />Photo essay<br />
    41. 41. Browse + Customize<br />
    42. 42. Recommend<br />
    43. 43. Recommend<br />
    44. 44. Rate / Share<br />
    45. 45. Rate / Share<br />
    46. 46. Comment / Discuss<br />
    47. 47. Comment / Discuss<br />
    48. 48. Share / Engage<br />
    49. 49. Short Form Content<br />
    50. 50. Aggregated Content<br />
    51. 51. 3rd Party Content/Widgets<br />NPR<br />Twitter<br />Facebook<br />Onespot<br />Sunlight Foundation<br />Every<br />…<br />
    52. 52. Engage Content<br />Poll<br />Quiz<br />
    53. 53. Story Forms: story<br />
    54. 54. Story Forms: Blog<br />
    55. 55. Story Forms: photo<br />
    56. 56. Story Forms: photo<br />
    57. 57. Story Forms: quote<br />
    58. 58. Story Forms: statistic<br />
    59. 59. Story Forms: story<br />
    60. 60. Story Forms: story<br />
    61. 61. Story Forms: story<br />
    62. 62. Aggregated Content Blocks<br />
    63. 63. Aggregated content: Photo player<br />
    64. 64. Aggregated content: Lightbox Gallery<br />
    65. 65. Aggregated content: Video Player<br />
    66. 66. Aggregated content: Blogs<br />
    67. 67. Aggregated content: Lists<br />
    68. 68. Aggregated content:<br />

    ×