Web 3.0 UX Patterns - Presented at Sencha New York Meetup September 2010
- 1. Emerging Application and Content PatternsNYC Ext JS Meetup 9/27/2010Web 3.0 UX Patterns
- 2. NoVa:JSMeetup, Co-FounderProduct Strategy, Three PillarSheridap.tumblr.comwww.threepillarglobal.com@sheridapPat Sheridan
- 5. Activity based references over hierarchical lookupsFederated searchesWorkflow ElementsVisual Asset creationForm Asset creationMulti-faceted data/ User ManagementNested Task WorkflowsTask within a taskApplication Suite User Experience
- 18. Mobile UX
- 19. Mobile UX
- 20. Branded vs. unbranded UI elementsNative VS. Web feelLocalizationDevice OrientationDevice IntegrationTransitionsApplication ‘Aspects’EvernoteTwitterFacebookMobile UX
- 23. CMSCDNAd serverAnalyticsVideo FormatsMetadataUnder-the-waterline Integration Points
- 24. Feature List:FeaturesUX PatternsIntuitive user experienceSupport Social EngagementEngaging (and appropriate ) promo materialMonetization platformeCommerce/ Buy Now from iTunesLocalization Support Local Station LinksLocal TV schedulesMetrics and reportingWatch VideoSearch, Browse / FindBy ProgramBy ScheduleRecommend (inbound)(inbound) (Activity)Popularity(inbound) Featured (PBS)Engage (outbound) Share/ Social mediaCustomizePlaylistFavorite
- 26. Wireframes
- 27. Design Comps
- 28. Editorial Content + Social EngagementFacebookTwitter
- 30. Design PatternsSearch / find BrowseRecommendRelated storiesRateCommentDiscussEngageShareUpdate Activity/ Real timeSubscribe/ Follow / JoinAd PlacementHuffington PostBBCCNNEconomistWSJFox NewsGoogle NewsUSA Today
- 31. Pattern RelationshipsStory Form & Ad PlacementAnything & Ad PlacementEngage & JoinActivity & TransitionTone, Voice, Form
- 32. Search
- 33. Search
- 35. BLUE: web
- 37. Popular
- 38. Featured
- 39. News/webPaginateSortfilterSearch withinSearch archivesSponsored linksSubscribe RSS
- 40. BrowseCategoryLocationTop storiesViewer segmentCollegeaffinityPopularityBy # commentsMost sharedSourceAuthorColumnistBloggerStory formMedia typeVideoPhoto essay
- 42. Recommend
- 43. Recommend
- 44. Rate / Share
- 45. Rate / Share
- 48. Share / Engage
- 51. 3rd Party Content/WidgetsNPRTwitterFacebookOnespotSunlight FoundationEvery…
- 63. Aggregated content: Photo player
- 64. Aggregated content: Lightbox Gallery
- 65. Aggregated content: Video Player
Editor's Notes
- #8: Primary Application bar drives which application the user works inAll application use the same conceptual frameworkRecent activity/ Favorites starting pageWorking pageActions toolarSettings panels
- #9: Primary Application bar drives which application the user works inAll application use the same conceptual frameworkRecent activity/ Favorites starting pageWorking pageActions toolarSettings panels
- #11: In-line visual editingNodes, assets, and actions on the left accordion
- #13: Assets created within a show context or independentlyUseful for event micro-site creation and hosted formsToolbarsPalettesDetachable docking palettesIn-line editingWYSIWYG elements
- #14: Assets created within a show context or independentlyUseful for event micro-site creation and hosted formsToolbarsPalettesDetachable docking palettesIn-line editingWYSIWYG elements
- #16: 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
- #17: 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
- #18: Goal oriented instructionsSplit pane workflow useful for person/user managementIn-line search and filtering over drill-down browsing
- #45: Story with photoStory with media playerStory with media play + playlistBlogShort forms:QuoteStatsPhoto w/ textphoto
- #46: Aggregated contentUser defined listList byTag authoractivityPhoto calendarPhoto gallery
- #47: Npr widgetsTwitter widgetsFb widgetsSunlight foundation