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

Twitter

Facebook

©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: