Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,709 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.

  • Be the first to comment

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 />

×