Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
CONTENT STRATEGY + 
NAVIGATION DESIGN 
Key Considerations for Web & Mobile 
OXFORD TECHNOLOGY 
VENTURES 
General Assembly ...
QUESTIONS 
OXFORD TECHNOLOGY 
VENTURES 
1. Have own Project to Research? 
2. Familiarity with CMSes? 
3. Level of Familiar...
GA: Content Sites l August 2014 
The Hunt! 
http://www.cefa.ca/wp-content/uploads/2014/04/1449526921.jpg
What You Don’t Want 
GA: Content Sites l August 2014 
http://www.1800attorney.com/
Don’t Make Me Think! 
GA: Content Sites l August 2014 
http://cailincreature.blogspot.com/2010_06_01_archive.html
Lead them where YOU want them to go 
GA: Content Sites l August 2014 
http://m.cdn.blog.hu/in/investo/image/Robot.jpg
Today 
Context 
- Exercise: Share Crappy, Great Sites 
! 
Components 
- CMS Basics 
- Layout 
- Content 
- Recirculation 
...
Be a Competent UX Generalist 
GA: Content Sites l August 2014 
http://lawyerkm.com/wp-content/uploads/2008/09/swiss_army_k...
CONTEXT 
OXFORD TECHNOLOGY 
VENTURES
▪ Data-driven UX / Product / Strategy agency 
▪ Founded 2008, NYC & SF 
▪ My background: Product, UX. MBA + MS Tech/UX 
▪ ...
Clients 
GA: Content Sites l August 2014
Product Development 
GA: Content Sites l August 2014
UX Awards 
Premier awards for exceptional digital experience, now in its 4th year 
GA: Content Sites l August 2014 
UXAWAR...
GA: Content Sites l August 2014 
What is UX? 
http://etc.usf.edu/clipart/70500/70542/70542_264_ra-090_o_lg.gif
User Centered Design 
AUDIENCE 
! 
CUSTOMER PROBLEM 
! 
RESEARCH 
! 
PROTOTYPE 
! 
VALIDATE, EVALUATE, TEST 
! 
ITERATE 
G...
Holistic Design Thinking 
Assumptions 
true? How to 
improve? 
GA: Content Sites l August 2014 
Who is your 
customer? 
Wh...
Lean Startup = Good UCD / UX 
GA: Content Sites l August 2014 
MEASURE 
LEARN 
IDEA/ BUILD
Content & Navigation: Easy to Iterate 
GA: Content Sites l August 2014
PICK A TEAM! 
FORM TEAMS OF 3 
INTRODUCE YOURSELF
CRAPPY SITES! 
SHARE SITES YOU HATE & WHY 
WHAT TRYING TO DO -> 
WHY DIFFICULT
GREAT SITES! 
SHARE SITES YOU LOVE & WHY 
WHAT TRYING TO DO -> 
WHY EASY/ ENJOYABLE
OXFORD TECHNOLOGY 
CONTENTV SENITTUERSE:S 
COMPONENTS
OXFORD TECHNOLOGY 
VENTURES 
CMS BASICS
Old In-Line HTML: Content, Display + Code 
GA: Content Sites l August 2014
Now: CMSes with Content, Display & 
Code Separation 
GA: Content Sites l August 2014
Now: CMSes with Content, Display & 
Code Separation 
GA: Content Sites l August 2014
How CMSes Work 
INTEGRATED DISPLAY OF WHAT YOU SEE… 
PRESENTATION UI: CSS, JS LIBRARIES 
PRESENTATION CODE: MODULES, AUTOM...
UX & CMSes 
PRESENTATION UI: CSS, JS LIBRARIES 
PRESENTATION CODE: MODULES, AUTOMATED CONTENT 
3RD PARTY CONTENT (IFRAMES,...
CMS Characteristics 
▪ Separate content from presentation code and site code 
▪ Define content display by types / template...
HUNDREDS of CMSes! 
▪ http://en.wikipedia.org/wiki/ 
List_of_content_management_systems 
▪ http://www.cmscritic.com/dir/en...
Wordpress 
GA: Content Sites l August 2014
Tumblr, Blogger, Facebook, Twitter… 
GA: Content Sites l August 2014
CMSes for Ecommerce 
▪ Same principles + optimized cart, checkout, payments, admin views 
of sales, content types for prod...
Terminology 
Heatmap 
Card Sort 
SEO 
GA: Content Sites l August 2014 
http://lawyerkm.com/wp-content/uploads/2008/09/swis...
LAYOUT
Content 
GA: Content Sites l August 2014 
Header 
Navigation 
Footer 
Modules 
Sidebar/ Right 
Rail 
Templates
Most Common Content Templates 
▪ Article 
▪ Homepage 
▪ Channel/ Category/ Topic 
▪ Slideshow 
▪ Image Grid 
▪ List 
▪ Tab...
Basic Layout Elements: Desktop 
Content 
GA: Content Sites l August 2014 
Header 
Navigation 
Footer 
Modules 
Sidebar/ Ri...
Responsive Design: Tablet 
Header 
Navigation 
Content 
Sidebar/ Right Rail 
Modules 
Footer 
GA: Content Sites l August 2...
Responsive/ Adaptive: Mobile 
Header Navig 
Content 
Sidebar/ Right Rail 
Modules 
Footer 
GA: Content Sites l August 2014...
Article (NY Times) 
GA: Content Sites l August 2014
Article (Buzzfeed) 
GA: Content Sites l August 2014
Product Detail 
Macy’s, Sabon 
GA: Content Sites l August 2014
Optimizing for Audience, Usage, Norms 
GA: Content Sites l August 2014
Case of Infinite Scroll Browse Pages 
▪ Pinterest started the trend (+ Facebook, 
LinkedIn, Buzzfeed, others later) 
▪ Bri...
Single-Message/ Action Landings 
▪ 3rd Party Landing Page Services Do the Work For You! 
▪ Launchrock, Unbounce 
▪ For Sta...
CONTENT
UX vs. Editorial (Content Strategy) 
▪ Content Programming: Editorial Job 
▪ UX: our job 
▪ In-template Fixed Text 
▪ Styl...
Role of Homepage 
http://4.bp.blogspot.com/-­‐tv8iixow504/Ue9d_7UWEQI/AAAAAAAAUC4/0S4KcSSKd08/s1600/The+New+York+Times+pho...
Flexibility vs. Consistency & Manual Work 
▪ All Manual = Most Flexible but most work 
▪ All Automated = Must Consistent b...
GA: Content Sites l August 2014 
UGC: Old vs. New 
reddit, buzzfeed, http://cdn.inmotionhosting.com/support/images/stories...
“Linkbait”: Reddit, Buzzfeed, PlayBuzz, 
Upworthy & The Clickable Headline 
GA: Content Sites l August 2014
Advertorial/ Native Advertising 
GA: Content Sites l August 2014 
http://techcrunch.com/2014/08/12/buzzhome/
“Multimedia” + Video, Visual Web 
!!!!!!!!!!!!!! 
https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1...
Social Memes & Images 
http://memegenerator.net/images/popular/week 
GA: Content Sites l August 2014
Visual Web Considerations 
▪ Subject Matter 
▪ UX: Context & Usage 
▪ Demographics (Text vs. Images, Video) 
▪ Age 
▪ Inco...
RECIRCULATION
Internal Site Metrics- Top Entry, Exit Points 
GA: Content Sites l August 2014
Traffic Patterns (Every Page a Landing) 
Top Sections (Comscore) 
! 
Top paths (Comscore) 
GA: Content Sites l August 2014
Recirculation Techniques 
▪ Manual Selection 
▪ Automated, based on Rules 
▪ A/B & MVT Driven 
▪ In-Line/ Middle 
▪ At Bot...
Recirculation Techniques 
http://imgur.com/gallery/hXQYK4B 
GA: Content Sites l August 2014
Automated Recirculation Suggestions 
▪ Most Popular/ Viewed/ Purchased 
▪ Most Commented 
▪ Most Shared 
▪ “Trending” 
▪ O...
3rd Party Tools: Outbrain, Taboola 
http://money.cnn.com/2013/08/15/technology/security/outbrain-­‐hack/ 
GA: Content Site...
Article Footers 
NYTImes, Buzzfeed 
GA: Content Sites l August 2014
Article Recirculation- Mobile 
GA: Content Sites l August 2014
Thinking Outside the Box 
OxfordTech.us | Web Metrics l July 2014
SHARE EXAMPLES! 
IDENTIFY & SHARE EXAMPLES OF 
RECIRCULATION METHODS USED 
ON COMMON SITES
SEARCH
Browse vs. Search 
▪ Explicit vs. Hidden: out of sight / out of mind 
▪ Browse: Unknown or Category-Based Direction 
▪ Dis...
Search Options 
▪ Predictive: Type-Ahead 
▪ Faceted (Structured, 
with Filters/ Sorts) 
▪ Suggested 
▪ Programmed 
▪ Grid ...
Faceted Search Dr. Weil’s Vitamin Advisor 
GA: Content Sites l August 2014
Search as Browse/Channel 
Buzzfeed 
GA: Content Sites l August 2014
Search: Type-Ahead 
GA: Content Sites l August 2014 
sabon.com, amazon.com
Suggested / Programmed Search 
Google 
GA: Content Sites l August 2014
NAVIGATION
I Know It’s Here Somewhere… 
http://346fae7859434bda978f-­‐1902f231618c5697bb2c852c565827b8.r12.cf5.rackcdn.com/wp-­‐conte...
Header: Branding, Message, Usability 
▪ Importance of consistency (consistent global header) 
▪ Stateful (shows where you ...
Align Navigation with User Goals 
▪ Define Audience 
▪ Define Goals, Needs 
▪ Look at Metrics- optimize (Searches) 
▪ Comp...
Navigation Best Practices 
▪ 7x7 guideline (not just for PowerPoint!) 
▪ Breadth/Depth Balance 
▪ Simple, Common, Standard...
Navigation Types 
▪ Editorial -Manual 
▪ Tag-Based 
▪ Content Hierarchy/ Sitemap Based 
▪ Taxonomy/ Keyword Based 
▪ Perso...
Navigation Defaults 
GA: Content Sites l August 2014
Navigation Placement, Formats 
▪ DESKTOP 
▪ Top- Horizontal + Horiz Subnav 
▪ Left Nav- Accordion 
▪ Top Nav & Left Subnav...
Mobile Flyouts 
GA: Content Sites l August 2014
Navigation Menus for Lots of Content: 
Mega-Dropdown (Desktop) 
old healthguru 
GA: Content Sites l August 2014
Navigation on Mobile: Implicit/ Explicit 
& Levels 
Header Navi 
Modules 
Footer 
GA: Content Sites l August 2014 
Header ...
Mega-Dropdowns vs. Mobile 
sabon, home depot 
GA: Content Sites l August 2014
Navigation for Branding, Narrative 
dr weil’s vitamin advisor 
GA: Content Sites l August 2014
Wording: SEO, Keyword Research 
▪ Google Keyword Planner 
▪ Competitors 
▪ Card Sorts 
GA: Content Sites l August 2014
Icons vs. Text 
GA: Content Sites l August 2014
Usability: Cutting Edge vs. Expected 
▪ Tradeoffs: Predictable/Boring vs. New/Challenging 
▪ Demographics of Audience 
▪ U...
Voice, Sensors, Movement, Shaking… 
GA: Content Sites l August 2014
GREAT CONTENT-CRAP 
SITE! 
SHARE EXAMPLES OF SITES WITH 
POOR NAVIGATION OR SEARCH 
(ECOMMERCE OR CONTENT) 
DISCUSS IMPROV...
WEB METRICS FOR 
CONTENT
What are Metrics? 
#%<> 
GA: Content Sites l August 2014
Research +Testing Methods for Content 
• HALLWAY USABILITY 
• OBSERVATION 
• INTERACTIVE TESTING (EYE TRACKING, ETC.) 
• H...
Metrics Data Sources 
▪ Web- public & competitor 
▪ Web- internal / private 
▪ Social 
▪ Mobile Apps 
▪ User Testing & Ana...
How PUBLIC Web Metrics Work 
! 
Statistical Samples 
▪ JavaScript 
▪ Cookies 
▪ Pixels 
▪ Server-side tracking 
▪ Web Traf...
Metrics Categories 
TRAFFIC 
! 
ENGAGEMENT 
! 
AUDIENCE 
! 
PLATFORM 
! 
(REVENUE) 
GA: Content Sites l August 2014
Key Traffic Web Metrics 
MARKETING FOCUS 
▪ Uniques 
▪ Visits 
▪ % from Search -Paid vs. Organic, 
Top Referring Terms 
▪ ...
Key Engagement Web Metrics 
UX FOCUS 
▪ Visits/ Unique 
▪ Page Views (PV) 
▪ PVs/Visit, PVs/ Unique 
▪ Time Spent 
▪ Bounc...
Key Audience Web Metrics 
▪ Demographics- Age, Income, 
Gender, Education, Location, 
Ethnicity, Marital Status, Kids 
GA:...
Key Platform Web Metrics 
DESIGN FOCUS 
▪ % Mobile 
▪ Display size & resolution 
- desktop & mobile 
▪ OS, Device, Web Spe...
Summary - Public Web Metrics 
TRAFFIC- MARKETING 
▪ Uniques 
▪ Visits 
▪ % from Search -Paid vs. Organic, 
Top Referring T...
Internal Metrics 
! 
▪ Usually more accurate 
▪ Requires at least some development 
▪ Little competitor visibility (unless...
Key Internal Site Metrics- Top Sections 
GA: Content Sites l August 2014
Internal Clickpaths 
Click path Analysis 
from Homepage 
GA: Content Sites l August 2014
Internal Metrics Paths vs. Navigation 
GA: Content Sites l August 2014
Lead them where YOU want them to go 
GA: Content Sites l August 2014 
http://m.cdn.blog.hu/in/investo/image/Robot.jpg
?
PROCECSASS VSETNTEUPRSES
1. 
CASVENTURES 
KPIS, GOALS, 
METRICS
BUSINESS KPI (RED) & UX (BLACK) Goals 
GA: Content Sites l August 2014 
< “UPSELL” 
TO LOGIN/ 
PAY 
< VIDEO 
DISCOVERY 
AC...
Quantify Your Goals 
REDUCE 
BOUNCE 
BY 20% 
GA: Content Sites l August 2014 
INCREASE 
AVE PV/S 
BY 20%+! 
! 
UX: CONTENT...
Most Common Content Goals 
Traffic, Engagement, Retention, Interaction 
! 
ENGAGEMENT 
▪ Content Discoverability 
▪ Intera...
Define Your KPIs / Measurements 
Metrics & Measurements will differ based on the type of content, site 
EXAMPLES 
ECOMMERC...
Translate into UX Features 
< CONTENT DISCOVERY 
< BROWSE OPTIONS 
< REFINED SEARCH 
< TAGS, CATEGORIES 
< AUTO-SUGGEST BY...
?
PICK A SITE! 
AS A TEAM, 
CHOOSE A (CRAPPY) 
CONTENT OR ECOMMERCE SITE 
AS YOUR MAIN FOCUS 
FOR THE REST OF THE WORKSHOP
YOUR TURN! 
DEFINE LIKELY GOALS + METRICS 
FOR YOUR SITE 
! 
! 
Bev May 
Beverly@OxfordTech.us @OxfordTech OxfordTech.us 
...
Your Site: Define Goals, Metrics, Features 
! 
▪ Define Business Goals ($) 
! 
▪ Define Primary User/ Visitor Needs & Goal...
2. CAANSVAENLYTUZREES 
COMPETITOR 
PERFORMANCE
Don’t Be Square. 
GA: Content Sites l August 2014 
29
Time Spent (UX) 
GA: Content Sites l August 2014
Bounce Rate 
GA: Content Sites l August 2014
Pageviews vs. Time Spent 
GA: Content Sites l August 2014
Traffic: Uniques or Visits Over Time 
Visits/Time 
GA: Content Sites l August 2014
Demographics & Content 
GA: Content Sites l August 2014
Value of Public Metrics: How many trees? 
GA: Content Sites l August 2014 
?
GA: Content Sites l August 2014 
Theory of Relativity 
chican-izmo.blogspot.com/2010/06/if-tree-falls-in-forest.html
YOUR TURN! 
GO TO SIMILARWEB.COM & RESEARCH 
YOUR SITE VS . 5 COMPETITORS 
FOR 
-UNIQUE VISITS 
- AVE. TIME SPENT/ VISIT 
...
Getting the Data: Excel 
http://www.similarweb.com/website/nameofsite.com 
▪ Make a new spreadsheet with companies as colu...
Graph Comparisons 
▪ Select all and sort by column B 
▪ Select data, then choose Insert > Column Chart while Data is 
sele...
CASVENTUR3E.S 
COMPETITOR & 
SITE ANALYSIS
GA: Content Sites l August 2014 
Borrow from the Best 
h t tp: //i m a g e s 4 . fanpop.com/image/p h o to s / 14700000/S ...
Competitor Heuristic Evaluation 
▪Deep-dive into high-performers- how & why 
▪Correlated to the high-performing sites from...
Competitor Heuristic Evaluation 
GA: Content Sites l August 2014
Try to find out the WHY behind the #s 
GA: Content Sites l August 2014
Internal Heuristic- Deep Dive on Key Pages 
GA: Content Sites l August 2014
YOUR TURN! 
EXAMINE YOUR SITE VS . ITS 5 COMPETITORS 
TO DETERMINE WHY PVS, TIME SPENT MAY BE 
SO DIFFERENT 
! 
ENSURE TO ...
4. CONCECPASTVIENNTGU R&ES 
PROTOTYPING
Prototype New Directions 
GA: Content Sites l August 2014
5. RECSAESVAERNTCUHRE,S 
TESTING & 
OPTIMIZATION
Audience Sentiment & Surveys 
Role of Net Promoter Score (NPS) 
http://www.netpromoter.com/why-­‐net-­‐promoter/know/ 
GA:...
On-Site Metrics Analysis 
Web vs. mobile activity by Site Section 
GA: Content Sites l August 2014
Layout Metrics Tools: Heatmaps 
GA: Content Sites l August 2014 
inviteads.com/wp-content/uploads/2013/07/Heatmap.jpg
Real-Time Optimization: Chartbeat 
GA: Content Sites l August 2014
MVT & A/B 
http://www.matraxis.co.uk/services/ab-multivariate-testing/ 
GA: Content Sites l August 2014
Observation 
GA: Content Sites l August 2014
Hallway Usability: Prototypes 
GA: Content Sites l August 2014 
ANDREW MCKINNEY! 
http://andrewmckinney.com/projects/weigh...
Card Sorts: Test Your Navigation 
TYPES 
▪ OPEN: participants self-organize cards (content) into self-defined 
categories ...
TESTING GROUP 
CASVENTURES 
EXERCISE: 
IN PERSON CARD 
SORTS
Group Exercise: In-Person Card Sorts 
“CLOSED” SORT 
▪ TAKE PAPER & RIP UP INTO PIECES 
▪ MAKE ABOUT 20 WORDS FOR SOME SUB...
SCUASMVEMNTAURRYES
Review 
Context 
- Exercise: Share Crappy, Great Sites 
! 
Components 
- CMS Basics 
- Layout 
- Content 
- Recirculation ...
What You Don’t Want 
GA: Content Sites l August 2014 
http://www.1800attorney.com/
Don’t Make Me Think! 
GA: Content Sites l August 2014 
http://cailincreature.blogspot.com/2010_06_01_archive.html
Lead them where YOU want them to go 
GA: Content Sites l August 2014 
http://m.cdn.blog.hu/in/investo/image/Robot.jpg
9 Key Takeaways 
1. Drive Engagement through Navigation, Recirculation, Social 
2. Leverage & Optimize Automation 
3. Focu...
User Satisfaction :-) 
GA: Content Sites l August 2014
?
CONTENT STRATEGY + 
NAVIGATION DESIGN 
UXAWARDS.ORG/EVENT-DETAILS 
“GA”: 20% OFF 
“ACTIVEGA”: 30% OFF 
THANKS! 
! 
! 
Bev ...
Próxima SlideShare
Cargando en…5
×

Content Strategy + Navigation Design: UX Overview + Considerations

4.505 visualizaciones

Publicado el

An overview of the key aspects and elements in creating effective ux, content strategy and navigation for content- intensive sites, from publishing to commerce, starting with the basics of CMSes and how most content sites are structured. Taught at a 1-day workshop at General Assembly, 8/17/14.

Publicado en: Diseño, Marketing, Internet
  • Your transcript is expiring! (accept here) ●●● http://t.cn/AirVsfPx
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Unlock Her Legs is your passage way to a life full of loving and sex... read more &gt;&gt;♥♥♥ http://ishbv.com/unlockher/pdf
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Content Strategy + Navigation Design: UX Overview + Considerations

  1. 1. CONTENT STRATEGY + NAVIGATION DESIGN Key Considerations for Web & Mobile OXFORD TECHNOLOGY VENTURES General Assembly August 17, 2014 ! ! Bev May Beverly@OxfordTech.us @OxfordTech OxfordTech.us @UXAwards UXAwards.org
  2. 2. QUESTIONS OXFORD TECHNOLOGY VENTURES 1. Have own Project to Research? 2. Familiarity with CMSes? 3. Level of Familiarity with Web Metrics? 4. Ecommerce vs . Publishing/ Media? 5. UXers? 6. # Years Experience in Tech / Digital?
  3. 3. GA: Content Sites l August 2014 The Hunt! http://www.cefa.ca/wp-content/uploads/2014/04/1449526921.jpg
  4. 4. What You Don’t Want GA: Content Sites l August 2014 http://www.1800attorney.com/
  5. 5. Don’t Make Me Think! GA: Content Sites l August 2014 http://cailincreature.blogspot.com/2010_06_01_archive.html
  6. 6. Lead them where YOU want them to go GA: Content Sites l August 2014 http://m.cdn.blog.hu/in/investo/image/Robot.jpg
  7. 7. Today Context - Exercise: Share Crappy, Great Sites ! Components - CMS Basics - Layout - Content - Recirculation - Exercise: Find Recirculation Examples - Search - Navigation - Exercise: Find Navigation Examples - Web Metrics for Content ! Process Steps 1. KPIs, Goals & Metrics - Exercise: Define 2. Analyze Competitor Performance - Exercise: Analyze Competitors 3. Competitor & Site Analysis - Exercise: Examine Competitors 4. Concepting & Prototyping 5. Research, Testing & Optimization - Exercise: Card Sorts ! Summary GA: Content Sites l August 2014
  8. 8. Be a Competent UX Generalist GA: Content Sites l August 2014 http://lawyerkm.com/wp-content/uploads/2008/09/swiss_army_knife1.jpg Content UX
  9. 9. CONTEXT OXFORD TECHNOLOGY VENTURES
  10. 10. ▪ Data-driven UX / Product / Strategy agency ▪ Founded 2008, NYC & SF ▪ My background: Product, UX. MBA + MS Tech/UX ▪ OxfordTech.us ▪ Effective ▪ Useful ▪ Engaging ▪ Lots of content, publishing, media GA: Content Sites l August 2014
  11. 11. Clients GA: Content Sites l August 2014
  12. 12. Product Development GA: Content Sites l August 2014
  13. 13. UX Awards Premier awards for exceptional digital experience, now in its 4th year GA: Content Sites l August 2014 UXAWARDS.ORG
  14. 14. GA: Content Sites l August 2014 What is UX? http://etc.usf.edu/clipart/70500/70542/70542_264_ra-090_o_lg.gif
  15. 15. User Centered Design AUDIENCE ! CUSTOMER PROBLEM ! RESEARCH ! PROTOTYPE ! VALIDATE, EVALUATE, TEST ! ITERATE GA: Content Sites l August 2014
  16. 16. Holistic Design Thinking Assumptions true? How to improve? GA: Content Sites l August 2014 Who is your customer? What’s their problem? What’s your solution? How help solve customer problem in best, fastest way?
  17. 17. Lean Startup = Good UCD / UX GA: Content Sites l August 2014 MEASURE LEARN IDEA/ BUILD
  18. 18. Content & Navigation: Easy to Iterate GA: Content Sites l August 2014
  19. 19. PICK A TEAM! FORM TEAMS OF 3 INTRODUCE YOURSELF
  20. 20. CRAPPY SITES! SHARE SITES YOU HATE & WHY WHAT TRYING TO DO -> WHY DIFFICULT
  21. 21. GREAT SITES! SHARE SITES YOU LOVE & WHY WHAT TRYING TO DO -> WHY EASY/ ENJOYABLE
  22. 22. OXFORD TECHNOLOGY CONTENTV SENITTUERSE:S COMPONENTS
  23. 23. OXFORD TECHNOLOGY VENTURES CMS BASICS
  24. 24. Old In-Line HTML: Content, Display + Code GA: Content Sites l August 2014
  25. 25. Now: CMSes with Content, Display & Code Separation GA: Content Sites l August 2014
  26. 26. Now: CMSes with Content, Display & Code Separation GA: Content Sites l August 2014
  27. 27. How CMSes Work INTEGRATED DISPLAY OF WHAT YOU SEE… PRESENTATION UI: CSS, JS LIBRARIES PRESENTATION CODE: MODULES, AUTOMATED CONTENT 3RD PARTY CONTENT (IFRAMES, EMBEDS) CONTENT (TEXT, IMAGES, VIDEOS) TEMPLATES CONTENT TYPES GA: Content Sites l August 2014 CORE SITE CODE DATABASE
  28. 28. UX & CMSes PRESENTATION UI: CSS, JS LIBRARIES PRESENTATION CODE: MODULES, AUTOMATED CONTENT 3RD PARTY CONTENT (IFRAMES, EMBEDS) CONTENT (TEXT, IMAGES, VIDEOS) TEMPLATES CONTENT TYPES GA: Content Sites l August 2014 DATABASE INTEGRATED DISPLAY OF WHAT YOU SEE… CORE SITE CODE
  29. 29. CMS Characteristics ▪ Separate content from presentation code and site code ▪ Define content display by types / templates ▪ WYSIWYG editors in most enables content creators to use without knowledge of coding ▪ Enables reuse of elements ▪ Enforces consistency of global elements and styles ▪ Easier to upgrade, modify and scale ▪ Stateful (save state/ make revisions/ schedule/ revert) ▪ Benefit from a global standards & a global development community GA: Content Sites l August 2014
  30. 30. HUNDREDS of CMSes! ▪ http://en.wikipedia.org/wiki/ List_of_content_management_systems ▪ http://www.cmscritic.com/dir/enterprise/ ▪ http://www.opensourcecms.com/general/ ratings.php ▪ http://www.cmsmatrix.org GA: Content Sites l August 2014
  31. 31. Wordpress GA: Content Sites l August 2014
  32. 32. Tumblr, Blogger, Facebook, Twitter… GA: Content Sites l August 2014
  33. 33. CMSes for Ecommerce ▪ Same principles + optimized cart, checkout, payments, admin views of sales, content types for products, page templates for selling, inventory management integrations ▪ Exs: Magento, OpenCart GA: Content Sites l August 2014 http://i2.wp.com/www.excellencemagentoblog.com/wp-­‐content/uploads/2011/10/checkoutremovepayment.png?resize=620%2C314
  34. 34. Terminology Heatmap Card Sort SEO GA: Content Sites l August 2014 http://lawyerkm.com/wp-content/uploads/2008/09/swiss_army_knife1.jpg Hero Content Architecture CONTENT Content Strategy Information Architecture Information Taxonomy Right Rail Modal Design Header/ Footer
  35. 35. LAYOUT
  36. 36. Content GA: Content Sites l August 2014 Header Navigation Footer Modules Sidebar/ Right Rail Templates
  37. 37. Most Common Content Templates ▪ Article ▪ Homepage ▪ Channel/ Category/ Topic ▪ Slideshow ▪ Image Grid ▪ List ▪ Tabbed Vertical List ▪ Quiz/ Survey/ Contest/ Poll ▪ Video ▪ Single Image / Video ▪ Search ▪ Bio/ Author ▪ Blank GA: Content Sites l August 2014
  38. 38. Basic Layout Elements: Desktop Content GA: Content Sites l August 2014 Header Navigation Footer Modules Sidebar/ Right Rail
  39. 39. Responsive Design: Tablet Header Navigation Content Sidebar/ Right Rail Modules Footer GA: Content Sites l August 2014
  40. 40. Responsive/ Adaptive: Mobile Header Navig Content Sidebar/ Right Rail Modules Footer GA: Content Sites l August 2014 Header Navig Content Modules Footer
  41. 41. Article (NY Times) GA: Content Sites l August 2014
  42. 42. Article (Buzzfeed) GA: Content Sites l August 2014
  43. 43. Product Detail Macy’s, Sabon GA: Content Sites l August 2014
  44. 44. Optimizing for Audience, Usage, Norms GA: Content Sites l August 2014
  45. 45. Case of Infinite Scroll Browse Pages ▪ Pinterest started the trend (+ Facebook, LinkedIn, Buzzfeed, others later) ▪ Brief moment of glory- now disappearing in ecommerce & many content sites ▪ Spurs engagement (Time spent, clicks) - AND anxiety (Nir Eyal’s research) ▪ Depending on implementation- can be bad for SEO buzzfeed, GA: Content http://Sites www.smashingmagazine.l August 2014 com/wp-­‐content/uploads/2013/01/infinite-­‐scroll-­‐vs-­‐pagination.png
  46. 46. Single-Message/ Action Landings ▪ 3rd Party Landing Page Services Do the Work For You! ▪ Launchrock, Unbounce ▪ For Static Messaging ▪ Pre-Optimized Templates: Great for Marketing, Commerce GA: Content Sites l August 2014
  47. 47. CONTENT
  48. 48. UX vs. Editorial (Content Strategy) ▪ Content Programming: Editorial Job ▪ UX: our job ▪ In-template Fixed Text ▪ Style guides & Samples ▪ Calls to Action & Buttons ▪ Error States/ Messages ▪ Business & Editorial Rules for Automated modules ▪ Information Hierarchies ▪ Navigation ▪ Taxonomies & Keywords ▪ Sitemap, Content Categories & Sub-Categories ▪ Middle ground: Brand Positioning; Brand Message; Landing Pages GA: Content Sites l August 2014
  49. 49. Role of Homepage http://4.bp.blogspot.com/-­‐tv8iixow504/Ue9d_7UWEQI/AAAAAAAAUC4/0S4KcSSKd08/s1600/The+New+York+Times+photo.jpg GA: Content Sites l August 2014
  50. 50. Flexibility vs. Consistency & Manual Work ▪ All Manual = Most Flexible but most work ▪ All Automated = Must Consistent but Least Flexible (for Editorial) ▪ Google conundrum with EU ruling ▪ Typical: A Mix/ Override Rules, based on template type GA: Content Sites l August 2014
  51. 51. GA: Content Sites l August 2014 UGC: Old vs. New reddit, buzzfeed, http://cdn.inmotionhosting.com/support/images/stories/edu/phpbb/overview/forum-­‐overview.png
  52. 52. “Linkbait”: Reddit, Buzzfeed, PlayBuzz, Upworthy & The Clickable Headline GA: Content Sites l August 2014
  53. 53. Advertorial/ Native Advertising GA: Content Sites l August 2014 http://techcrunch.com/2014/08/12/buzzhome/
  54. 54. “Multimedia” + Video, Visual Web !!!!!!!!!!!!!! https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300! !!! GA: Content Sites l August 2014
  55. 55. Social Memes & Images http://memegenerator.net/images/popular/week GA: Content Sites l August 2014
  56. 56. Visual Web Considerations ▪ Subject Matter ▪ UX: Context & Usage ▪ Demographics (Text vs. Images, Video) ▪ Age ▪ Income ▪ Education ▪ Geography ▪ Platform/ Device & Bandwidth GA: Content Sites l August 2014
  57. 57. RECIRCULATION
  58. 58. Internal Site Metrics- Top Entry, Exit Points GA: Content Sites l August 2014
  59. 59. Traffic Patterns (Every Page a Landing) Top Sections (Comscore) ! Top paths (Comscore) GA: Content Sites l August 2014
  60. 60. Recirculation Techniques ▪ Manual Selection ▪ Automated, based on Rules ▪ A/B & MVT Driven ▪ In-Line/ Middle ▪ At Bottom ▪ At Beginning ▪ At End ▪ At Side ▪ At Top ▪ Overlay ▪ Takeover ▪ “Next Up” http://www.nytimes.com/2014/08/17/us/ferguson-­‐missouri-­‐protests.html?hp&action=click&pgtype=Homepage&version=LedeSum&module=a-­‐lede-­‐package-­‐region&region=lede-­‐package&WT.nav=lede-­‐GA: Content Sites l August 2014
  61. 61. Recirculation Techniques http://imgur.com/gallery/hXQYK4B GA: Content Sites l August 2014
  62. 62. Automated Recirculation Suggestions ▪ Most Popular/ Viewed/ Purchased ▪ Most Commented ▪ Most Shared ▪ “Trending” ▪ Others’ Behavior (Viewed/Bought X also Viewed/Bought) ▪ Demographics (People Like You also Like…) ▪ Related Subject/ Section/ Topic ▪ Similar Product/ Style/ Color/ Price ▪ Related Keyword ▪ Tagged to be Featured ▪ Sponsored ▪ Time-Specific (Recent) ▪ By Source/ Location/ Author ▪ Unrelated Topic/ Product (You Might Also Like/ More From) GA: Content Sites l August 2014
  63. 63. 3rd Party Tools: Outbrain, Taboola http://money.cnn.com/2013/08/15/technology/security/outbrain-­‐hack/ GA: Content Sites l August 2014
  64. 64. Article Footers NYTImes, Buzzfeed GA: Content Sites l August 2014
  65. 65. Article Recirculation- Mobile GA: Content Sites l August 2014
  66. 66. Thinking Outside the Box OxfordTech.us | Web Metrics l July 2014
  67. 67. SHARE EXAMPLES! IDENTIFY & SHARE EXAMPLES OF RECIRCULATION METHODS USED ON COMMON SITES
  68. 68. SEARCH
  69. 69. Browse vs. Search ▪ Explicit vs. Hidden: out of sight / out of mind ▪ Browse: Unknown or Category-Based Direction ▪ Discovery ▪ Entertainment & Education ▪ Visuals ▪ Search: Specific Focus/ Item ▪ Task Based ▪ Speed & Utility ▪ Known Text & Keywords ▪ Demographics also Influence Which ▪ You Usually Need Both GA: Content Sites l August 2014
  70. 70. Search Options ▪ Predictive: Type-Ahead ▪ Faceted (Structured, with Filters/ Sorts) ▪ Suggested ▪ Programmed ▪ Grid vs. List ▪ Which Sections to Include… ▪ Relevance/ Date/ Location of Keyword… nytimes search GA: Content Sites l August 2014
  71. 71. Faceted Search Dr. Weil’s Vitamin Advisor GA: Content Sites l August 2014
  72. 72. Search as Browse/Channel Buzzfeed GA: Content Sites l August 2014
  73. 73. Search: Type-Ahead GA: Content Sites l August 2014 sabon.com, amazon.com
  74. 74. Suggested / Programmed Search Google GA: Content Sites l August 2014
  75. 75. NAVIGATION
  76. 76. I Know It’s Here Somewhere… http://346fae7859434bda978f-­‐1902f231618c5697bb2c852c565827b8.r12.cf5.rackcdn.com/wp-­‐content/uploads/2014/02/diving1.jpg GA: Content Sites l August 2014
  77. 77. Header: Branding, Message, Usability ▪ Importance of consistency (consistent global header) ▪ Stateful (shows where you are) ▪ Has logo, brand ▪ Tagline/ Descriptors - esp. if unknown & not obvious ▪ Upper Right: Search/ Login/ Social GA: Content Sites l August 2014 buzzfeed.com, nytimes.com
  78. 78. Align Navigation with User Goals ▪ Define Audience ▪ Define Goals, Needs ▪ Look at Metrics- optimize (Searches) ▪ Competitors- standardize wording ▪ Simplify ▪ Test & Refine GA: Content Sites l August 2014
  79. 79. Navigation Best Practices ▪ 7x7 guideline (not just for PowerPoint!) ▪ Breadth/Depth Balance ▪ Simple, Common, Standard Words (Research) ▪ Home/ Overview ▪ Persistent, Pervasive & Consistent ▪ Stateful ▪ Clear rules (alphabetical/popular…) ▪ Traditional placements (logo, login, search) GA: Content Sites l August 2014
  80. 80. Navigation Types ▪ Editorial -Manual ▪ Tag-Based ▪ Content Hierarchy/ Sitemap Based ▪ Taxonomy/ Keyword Based ▪ Personalized GA: Content Sites l August 2014
  81. 81. Navigation Defaults GA: Content Sites l August 2014
  82. 82. Navigation Placement, Formats ▪ DESKTOP ▪ Top- Horizontal + Horiz Subnav ▪ Left Nav- Accordion ▪ Top Nav & Left Subnav ▪ Dropdowns, Flyouts (desktop) ▪ Tabs & Sections ▪ Funnels/ Wizards/ Step by Step sequences ! ▪ MOBILE ▪ Swipe Left-Right ▪ Shake ▪ Upper right bars ▪ Top-Horizontal ▪ Buttons/ Rows ▪ Dropdown/Flyouts on Tap ▪ Expanded Left Region on Tap GA: Content Sites l August 2014
  83. 83. Mobile Flyouts GA: Content Sites l August 2014
  84. 84. Navigation Menus for Lots of Content: Mega-Dropdown (Desktop) old healthguru GA: Content Sites l August 2014
  85. 85. Navigation on Mobile: Implicit/ Explicit & Levels Header Navi Modules Footer GA: Content Sites l August 2014 Header Navi Navig A > Navig B > Navig C > Navig D > Navig E > Modules Footer Navi g A > Navig B > Navi g C > Header Navi Navig A > Navig B > Navig C > Navig D > Navig E > Navig F > Modules Footer
  86. 86. Mega-Dropdowns vs. Mobile sabon, home depot GA: Content Sites l August 2014
  87. 87. Navigation for Branding, Narrative dr weil’s vitamin advisor GA: Content Sites l August 2014
  88. 88. Wording: SEO, Keyword Research ▪ Google Keyword Planner ▪ Competitors ▪ Card Sorts GA: Content Sites l August 2014
  89. 89. Icons vs. Text GA: Content Sites l August 2014
  90. 90. Usability: Cutting Edge vs. Expected ▪ Tradeoffs: Predictable/Boring vs. New/Challenging ▪ Demographics of Audience ▪ User Goals & Utility, Sector & Context ▪ OS/ Platform & Company (Google /Apple /MS excluded) GA: Content Sites l August 2014 http://mac.blorge.com/wp-­‐content/uploads/2009/09/gannied_out.jpg
  91. 91. Voice, Sensors, Movement, Shaking… GA: Content Sites l August 2014
  92. 92. GREAT CONTENT-CRAP SITE! SHARE EXAMPLES OF SITES WITH POOR NAVIGATION OR SEARCH (ECOMMERCE OR CONTENT) DISCUSS IMPROVEMENT APPROACHES
  93. 93. WEB METRICS FOR CONTENT
  94. 94. What are Metrics? #%<> GA: Content Sites l August 2014
  95. 95. Research +Testing Methods for Content • HALLWAY USABILITY • OBSERVATION • INTERACTIVE TESTING (EYE TRACKING, ETC.) • HEAT MAPS • CARD SORTS • SURVEYS • HEURISTIC EVALUATIONS • MARKET RESEARCH • PUBLIC METRICS RESEARCH • METRICS ANALYSIS • MVT & A/B OxfordTech.us | Web Metrics l July 2014 http://www.dsr.wa.gov.au/assets/images/Diagrams/Darts-playing-area.gif!
  96. 96. Metrics Data Sources ▪ Web- public & competitor ▪ Web- internal / private ▪ Social ▪ Mobile Apps ▪ User Testing & Analysis ▪ MVT & A/B ▪ Surveys ▪ Ecommerce GA: Content Sites l August 2014
  97. 97. How PUBLIC Web Metrics Work ! Statistical Samples ▪ JavaScript ▪ Cookies ▪ Pixels ▪ Server-side tracking ▪ Web Traffic Public = Inaccurate ▪ Won’t be listed on public metrics sites if too small/ new ▪ Heed the warnings GA: Content Sites l August 2014 http://www.wsgsystems.com/uploads/images/cookies_large.jpg
  98. 98. Metrics Categories TRAFFIC ! ENGAGEMENT ! AUDIENCE ! PLATFORM ! (REVENUE) GA: Content Sites l August 2014
  99. 99. Key Traffic Web Metrics MARKETING FOCUS ▪ Uniques ▪ Visits ▪ % from Search -Paid vs. Organic, Top Referring Terms ▪ % from Social ▪ % direct-load ▪ Top Referring Domains GA: Content Sites l August 2014
  100. 100. Key Engagement Web Metrics UX FOCUS ▪ Visits/ Unique ▪ Page Views (PV) ▪ PVs/Visit, PVs/ Unique ▪ Time Spent ▪ Bounce Rate (1 page/ visit) Top Entry / Exit Pages ▪ Top Sub-Sites/ Sections GA: Content Sites l August 2014 http://blog.hugeaim.com/static/wp-content/uploads/2011/07/ballbounce.jpg
  101. 101. Key Audience Web Metrics ▪ Demographics- Age, Income, Gender, Education, Location, Ethnicity, Marital Status, Kids GA: Content Sites l August 2014 http://clipartist.info/openclipart.org/SVG/rejon/person_outline_4-800px.png
  102. 102. Key Platform Web Metrics DESIGN FOCUS ▪ % Mobile ▪ Display size & resolution - desktop & mobile ▪ OS, Device, Web Speed GA: Content Sites l August 2014 http://www.gizmoville.com/wp-content/uploads/2012/02/omgitsfullofpixels.png
  103. 103. Summary - Public Web Metrics TRAFFIC- MARKETING ▪ Uniques ▪ Visits ▪ % from Search -Paid vs. Organic, Top Referring Terms ▪ % from Social ▪ % direct-load ▪ Top Referring Domains ▪ Bounce Rate (1 page/ visit) ! AUDIENCE - EVERYONE ▪ Demographics- Age, Income, Gender, Education, Location, Ethnicity, Marital Status, Kids GA: Content Sites l August 2014 ENGAGEMENT- UX ▪ Visits/ Unique ▪ Page Views (PV) ▪ PVs/Visit, PVs/ Unique ▪ Time Spent ▪ Bounce Rate (1 page/ visit) ▪ Top Entry / Exit Pages ▪ Top Sub-Sites/ Sections ! PLATFORM- DESIGN ▪ % Mobile ▪ Display size & resolution - desktop & mobile ▪ OS, Device, Web Speed ! !
  104. 104. Internal Metrics ! ▪ Usually more accurate ▪ Requires at least some development ▪ Little competitor visibility (unless high-cost) ▪ Click path Analysis ▪ Heat map Analysis ▪ % Logged In/ Out ▪ Ecommerce: ARPU/RPC, R/T, R/V ▪ Data by Sections/ Categories GA: Content Sites l August 2014 ▪ Top & Bottom Performing Pages, Sections ▪ Top Entry/ Exit Pages, Sections- More Detailed ▪ Top On-Site Search Terms, 404 pages ▪ % Mobile by Page/ Section/ category ▪ Demographics- Politics, Interests, Credit, Job, Title http: //www.damenationblog.com/wp-content/uploads/2012/06/iStock_000019717637Smal l . jpg
  105. 105. Key Internal Site Metrics- Top Sections GA: Content Sites l August 2014
  106. 106. Internal Clickpaths Click path Analysis from Homepage GA: Content Sites l August 2014
  107. 107. Internal Metrics Paths vs. Navigation GA: Content Sites l August 2014
  108. 108. Lead them where YOU want them to go GA: Content Sites l August 2014 http://m.cdn.blog.hu/in/investo/image/Robot.jpg
  109. 109. ?
  110. 110. PROCECSASS VSETNTEUPRSES
  111. 111. 1. CASVENTURES KPIS, GOALS, METRICS
  112. 112. BUSINESS KPI (RED) & UX (BLACK) Goals GA: Content Sites l August 2014 < “UPSELL” TO LOGIN/ PAY < VIDEO DISCOVERY ACROSS SHOWS WATCH < FULL VIDEOS DISCOVER < SHOWS
  113. 113. Quantify Your Goals REDUCE BOUNCE BY 20% GA: Content Sites l August 2014 INCREASE AVE PV/S BY 20%+! ! UX: CONTENT DISCOVERY + ENGAGEMENT
  114. 114. Most Common Content Goals Traffic, Engagement, Retention, Interaction ! ENGAGEMENT ▪ Content Discoverability ▪ Interaction ▪ Recirculation ▪ Sharing ▪ Time Spent ▪ PVs/Visit ▪ Usability (Navigation) ! TRAFFIC ▪ Uniques & Visits! ▪ Sharing ▪ Retention (Visits/Unique) ▪ Lowered Bounce ! ! GA: Content Sites l August 2014
  115. 115. Define Your KPIs / Measurements Metrics & Measurements will differ based on the type of content, site EXAMPLES ECOMMERCE ARPU or RPV, R/T, R/V, CTR, CONVERSION RATE VIDEO TIME SPENT, # VIDEO VIEWED/VISIT, # REPEAT VISITS, UNIQUES TEXT CONTENT PV/V, V/UNIQUE, TIME SPENT AD-DRIVEN IMPRESSIONS, MONTHLY PVs, PV/V SOCIAL SHARES, LIKES, FAVES, FOLLOWS GA: Content Sites l August 2014
  116. 116. Translate into UX Features < CONTENT DISCOVERY < BROWSE OPTIONS < REFINED SEARCH < TAGS, CATEGORIES < AUTO-SUGGEST BY BEHAVIOR, METRICS, SIMILARITY < VISUAL- VIDEO, PHOTOS, SLIDESHOWS GA: Content Sites l August 2014 < SOCIAL ENGAGEMENT ONSITE + LOGINS < SOCIAL SHARING < CLEAR NAVIGATION < SEO, KEYWORDS < EMBEDDED ECOMMERCE
  117. 117. ?
  118. 118. PICK A SITE! AS A TEAM, CHOOSE A (CRAPPY) CONTENT OR ECOMMERCE SITE AS YOUR MAIN FOCUS FOR THE REST OF THE WORKSHOP
  119. 119. YOUR TURN! DEFINE LIKELY GOALS + METRICS FOR YOUR SITE ! ! Bev May Beverly@OxfordTech.us @OxfordTech OxfordTech.us @UXAwards UXAwards.org
  120. 120. Your Site: Define Goals, Metrics, Features ! ▪ Define Business Goals ($) ! ▪ Define Primary User/ Visitor Needs & Goals ! ▪ Define How would measure each ! ▪ Define Metrics for measurement ! ▪ Translate Business & User Goals into UX Goals/ Characteristics ! ▪ Define based on specific UX/ Product features ! ! GA: Content Sites l August 2014
  121. 121. 2. CAANSVAENLYTUZREES COMPETITOR PERFORMANCE
  122. 122. Don’t Be Square. GA: Content Sites l August 2014 29
  123. 123. Time Spent (UX) GA: Content Sites l August 2014
  124. 124. Bounce Rate GA: Content Sites l August 2014
  125. 125. Pageviews vs. Time Spent GA: Content Sites l August 2014
  126. 126. Traffic: Uniques or Visits Over Time Visits/Time GA: Content Sites l August 2014
  127. 127. Demographics & Content GA: Content Sites l August 2014
  128. 128. Value of Public Metrics: How many trees? GA: Content Sites l August 2014 ?
  129. 129. GA: Content Sites l August 2014 Theory of Relativity chican-izmo.blogspot.com/2010/06/if-tree-falls-in-forest.html
  130. 130. YOUR TURN! GO TO SIMILARWEB.COM & RESEARCH YOUR SITE VS . 5 COMPETITORS FOR -UNIQUE VISITS - AVE. TIME SPENT/ VISIT !
  131. 131. Getting the Data: Excel http://www.similarweb.com/website/nameofsite.com ▪ Make a new spreadsheet with companies as column A and columns B-C marked for unique visits, time spent/visit ▪ Enter data from Similarweb into each column ▪ Mark date range, source, URL for your data GA: Content Sites l August 2014
  132. 132. Graph Comparisons ▪ Select all and sort by column B ▪ Select data, then choose Insert > Column Chart while Data is selected. ▪ Do same for others to make more charts GA: Content Sites l August 2014
  133. 133. CASVENTUR3E.S COMPETITOR & SITE ANALYSIS
  134. 134. GA: Content Sites l August 2014 Borrow from the Best h t tp: //i m a g e s 4 . fanpop.com/image/p h o to s / 14700000/S e e -n o - ev i l -h e a r-n o - ev i l - sp e a k-n o - ev i l -monkey s-14750406 -1600-1200. jpg
  135. 135. Competitor Heuristic Evaluation ▪Deep-dive into high-performers- how & why ▪Correlated to the high-performing sites from metrics GA: Content Sites l August 2014
  136. 136. Competitor Heuristic Evaluation GA: Content Sites l August 2014
  137. 137. Try to find out the WHY behind the #s GA: Content Sites l August 2014
  138. 138. Internal Heuristic- Deep Dive on Key Pages GA: Content Sites l August 2014
  139. 139. YOUR TURN! EXAMINE YOUR SITE VS . ITS 5 COMPETITORS TO DETERMINE WHY PVS, TIME SPENT MAY BE SO DIFFERENT ! ENSURE TO EXAMINE MOBILE VS. DESKTOP DISCUSS & SHARE YOUR FINDINGS
  140. 140. 4. CONCECPASTVIENNTGU R&ES PROTOTYPING
  141. 141. Prototype New Directions GA: Content Sites l August 2014
  142. 142. 5. RECSAESVAERNTCUHRE,S TESTING & OPTIMIZATION
  143. 143. Audience Sentiment & Surveys Role of Net Promoter Score (NPS) http://www.netpromoter.com/why-­‐net-­‐promoter/know/ GA: Content Sites l August 2014
  144. 144. On-Site Metrics Analysis Web vs. mobile activity by Site Section GA: Content Sites l August 2014
  145. 145. Layout Metrics Tools: Heatmaps GA: Content Sites l August 2014 inviteads.com/wp-content/uploads/2013/07/Heatmap.jpg
  146. 146. Real-Time Optimization: Chartbeat GA: Content Sites l August 2014
  147. 147. MVT & A/B http://www.matraxis.co.uk/services/ab-multivariate-testing/ GA: Content Sites l August 2014
  148. 148. Observation GA: Content Sites l August 2014
  149. 149. Hallway Usability: Prototypes GA: Content Sites l August 2014 ANDREW MCKINNEY! http://andrewmckinney.com/projects/weight-watchers-iphone-app/
  150. 150. Card Sorts: Test Your Navigation TYPES ▪ OPEN: participants self-organize cards (content) into self-defined categories (generative) ▪ CLOSED: participants self-organize cards (content) into pre-defined categories (evaluative) ▪ REVERSE: participants aim to find a specific piece of content in pre-defined categories (evaluative) ! FORMATS ▪ MANUAL ▪ ONLINE: ▪ http://www.optimalworkshop.com/optimalsort.htm ▪ http://www.userzoom.com ▪ http://www.simplecardsort.com/ ! ! ! GA: Content Sites l August 2014
  151. 151. TESTING GROUP CASVENTURES EXERCISE: IN PERSON CARD SORTS
  152. 152. Group Exercise: In-Person Card Sorts “CLOSED” SORT ▪ TAKE PAPER & RIP UP INTO PIECES ▪ MAKE ABOUT 20 WORDS FOR SOME SUB-CATEGORIES, CATEGORIES, ITEMS ON YOUR CHOSEN SITE ▪ GIVE TO A PARTICIPANT FROM ANOTHER GROUP TO ORGANIZE BASED ON THEIR LOGIC (SWAP 1 MEMBER) ▪ COMPARE TO HOW YOU WOULD HAVE ORGANIZED ! “REVERSE” SORT ▪ STRUCTURE THE WORDS BASED ON THE REAL SITE HIERARCHY OF CATEGORIES, SUBCATEGORIES, ITEMS ▪ ENSURE ALL TOP-LEVEL HIERARCHIES ARE REPRESENTED; SUBCATEGORIES ARE “INSIDE”/ UNDERNEATH & ITEMS BELOW THAT ▪ TASK A PARTICIPANT FROM ANOTHER GROUP WITH FINDING A SPECIFIC ITEM WITHIN THE STRUCTURE (CHOOSING THE RIGHT CATEGORY) ! ! GA: Content Sites l August 2014 !
  153. 153. SCUASMVEMNTAURRYES
  154. 154. Review Context - Exercise: Share Crappy, Great Sites ! Components - CMS Basics - Layout - Content - Recirculation - Exercise: Find Recirculation Examples - Search - Navigation - Exercise: Find Navigation Examples - Web Metrics for Content ! Process Steps 1. KPIs, Goals & Metrics - Exercise: Define 2. Analyze Competitor Performance - Exercise: Analyze Competitors 3. Competitor & Site Analysis - Exercise: Examine Competitors 4. Concepting & Prototyping 5. Research, Testing & Optimization - Exercise: Card Sorts ! Summary GA: Content Sites l August 2014
  155. 155. What You Don’t Want GA: Content Sites l August 2014 http://www.1800attorney.com/
  156. 156. Don’t Make Me Think! GA: Content Sites l August 2014 http://cailincreature.blogspot.com/2010_06_01_archive.html
  157. 157. Lead them where YOU want them to go GA: Content Sites l August 2014 http://m.cdn.blog.hu/in/investo/image/Robot.jpg
  158. 158. 9 Key Takeaways 1. Drive Engagement through Navigation, Recirculation, Social 2. Leverage & Optimize Automation 3. Focus on Consistency & Usability for Navigation 4. Use Both Search & Browse Techniques for Large Sites 5. Optimize the Header ! 6. Use UCD Design Principles: Optimize for Audience Needs & Goals 7. Optimize for What YOU Want Visitors to Do 8. Benchmark + Compare to Competition 9. Test Your Approaches! GA: Content Sites l August 2014
  159. 159. User Satisfaction :-) GA: Content Sites l August 2014
  160. 160. ?
  161. 161. CONTENT STRATEGY + NAVIGATION DESIGN UXAWARDS.ORG/EVENT-DETAILS “GA”: 20% OFF “ACTIVEGA”: 30% OFF THANKS! ! ! Bev May Beverly@OxfordTech.us @OxfordTech OxfordTech.us @UXAwards UXAwards.org

×