web 3.0 ux patterns - presented at sencha new york meetup september 2010
Post on 15-Jan-2015
2.049 Views
Preview:
DESCRIPTION
TRANSCRIPT
Emerging Application and Content PatternsNYC Ext JS Meetup 9/27/2010
Web 3.0 UX Patterns
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
• NoVa:JS Meetup, Co-Founder• Product Strategy, Three Pillar• Sheridap.tumblr.com• www.threepillarglobal.com• @sheridap
Pat Sheridan
©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
• 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
Application Suite User Experience
©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
• Branded vs. unbranded UI elements• Native VS. Web feel• Localization• Device Orientation• Device Integration• Transitions• Application ‘Aspects’
– Evernote– Twitter– Facebook
Mobile UX
©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
• CMS• CDN• Ad server• Analytics• Video Formats• Metadata
Under-the-waterline Integration Points
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Feature List:Features• Intuitive user
experience• Support Social
Engagement• Engaging (and
appropriate ) promo material
• Monetization platform• eCommerce/ Buy Now
from iTunes• Localization Support
– Local Station Links– Local TV schedules
• Metrics and reporting
UX Patterns• Watch Video• Search, Browse / Find
– By Program– By Schedule
• Recommend (inbound)– (inbound)
(Activity)Popularity– (inbound) Featured
(PBS)• Engage (outbound)
– Share/ Social media• Customize
– Playlist– Favorite
©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
©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 • Browse• Recommend• Related stories• Rate• Comment• Discuss• Engage• Share• Update Activity/ Real
time• Subscribe/ Follow / Join• Ad Placement
• Huffington Post• BBC• CNN• Economist• WSJ• Fox News• Google News• USA Today
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Pattern Relationships• Story Form & Ad
Placement
• Anything & Ad Placement
• Engage & Join
• Activity & Transition
Tone, Voice, Form
©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 •Grey: results
Groupings:•Top stories•Popular•Featured•News/web
PaginateSortfilterSearch withinSearch archivesSponsored linksSubscribe RSS
©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved
Browse
• Category• Location• Top stories• Viewer segment
– College– affinity
• Popularity– By # comments– Most shared
• Source– Author– Columnist– Blogger
• Story form• Media type
– Video– Photo essay
©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/WidgetsNPR Twitter Facebook Onespot
Sunlight FoundationEvery…
©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:
top related