web 3.0 ux patterns - presented at sencha new york meetup september 2010

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

http://www.patsheridan.com/


• 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


Application Suite


Federated Search


Workflow Applications


Asset Creation/ Management


Visual Asset Creation


Form Asset Creation


Multi-faceted Data


Mobile UX


• Branded vs. unbranded UI elements• Native VS. Web feel• Localization• Device Orientation• Device Integration• Transitions• Application ‘Aspects’

– Evernote– Twitter– Facebook

Mobile UX


Digital Content Lifecycle


• CMS• CDN• Ad server• Analytics• Video Formats• Metadata

Under-the-waterline Integration Points


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


Conceptual Planning


Wireframes


Design Comps


Editorial Content + Social Engagement

Twitter

Facebook


Digital Content types


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


Pattern Relationships• Story Form & Ad

Placement

• Anything & Ad Placement

• Engage & Join

• Activity & Transition

Tone, Voice, Form


Search


Search/Find

Results•RED: ads•BLUE: web •Grey: results

Groupings:•Top stories•Popular•Featured•News/web

PaginateSortfilterSearch withinSearch archivesSponsored linksSubscribe RSS


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


Browse + Customize


Recommend


Rate / Share


Comment / Discuss


Share / Engage


Short Form Content


Aggregated Content


3rd Party Content/WidgetsNPR Twitter Facebook Onespot

Sunlight FoundationEvery…


Engage Content

• Poll• Quiz


Story Forms: story


Story Forms: Blog


Story Forms: photo


Story Forms: quote


Story Forms: statistic


Story Forms: story


Aggregated Content Blocks


Aggregated content: Photo player


Aggregated content: Lightbox Gallery


Aggregated content: Video Player


Aggregated content: Blogs


Aggregated content: Lists


Aggregated content:

web 3.0 ux patterns - presented at sencha new york meetup september 2010

Documents

story forms

aggregated content blocks

editorial content

short form content

digital content lifecycle

digital content types

asset creation management

rate share