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.
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. 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. GA: Content Sites l August 2014
The Hunt!
http://www.cefa.ca/wp-content/uploads/2014/04/1449526921.jpg
4. What You Don’t Want
GA: Content Sites l August 2014
http://www.1800attorney.com/
5. Don’t Make Me Think!
GA: Content Sites l August 2014
http://cailincreature.blogspot.com/2010_06_01_archive.html
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
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
13. UX Awards
Premier awards for exceptional digital experience, now in its 4th year
GA: Content Sites l August 2014
UXAWARDS.ORG
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. User Centered Design
AUDIENCE
!
CUSTOMER PROBLEM
!
RESEARCH
!
PROTOTYPE
!
VALIDATE, EVALUATE, TEST
!
ITERATE
GA: Content Sites l August 2014
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. Lean Startup = Good UCD / UX
GA: Content Sites l August 2014
MEASURE
LEARN
IDEA/ BUILD
24. Old In-Line HTML: Content, Display + Code
GA: Content Sites l August 2014
25. Now: CMSes with Content, Display &
Code Separation
GA: Content Sites l August 2014
26. Now: CMSes with Content, Display &
Code Separation
GA: Content Sites l August 2014
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. 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. 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. 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
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. 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
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. 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
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. 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. 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. 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
54. “Multimedia” + Video, Visual Web
!!!!!!!!!!!!!!
https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300!
!!!
GA: Content Sites l August 2014
55. Social Memes & Images
http://memegenerator.net/images/popular/week
GA: Content Sites l August 2014
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
59. Traffic Patterns (Every Page a Landing)
Top Sections (Comscore)
!
Top paths (Comscore)
GA: Content Sites l August 2014
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®ion=lede-‐package&WT.nav=lede-‐GA: Content Sites l August 2014
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. 3rd Party Tools: Outbrain, Taboola
http://money.cnn.com/2013/08/15/technology/security/outbrain-‐hack/
GA: Content Sites l August 2014
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. 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. Faceted Search Dr. Weil’s Vitamin Advisor
GA: Content Sites l August 2014
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. 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. 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. 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. Navigation Types
▪ Editorial -Manual
▪ Tag-Based
▪ Content Hierarchy/ Sitemap Based
▪ Taxonomy/ Keyword Based
▪ Personalized
GA: Content Sites l August 2014
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
84. Navigation Menus for Lots of Content:
Mega-Dropdown (Desktop)
old healthguru
GA: Content Sites l August 2014
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
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. 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. 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. Metrics Categories
TRAFFIC
!
ENGAGEMENT
!
AUDIENCE
!
PLATFORM
!
(REVENUE)
GA: Content Sites l August 2014
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. 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. 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. 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. 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. 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. Key Internal Site Metrics- Top Sections
GA: Content Sites l August 2014
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. Quantify Your Goals
REDUCE
BOUNCE
BY 20%
GA: Content Sites l August 2014
INCREASE
AVE PV/S
BY 20%+!
!
UX: CONTENT
DISCOVERY +
ENGAGEMENT
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. 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. 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
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. YOUR TURN!
DEFINE LIKELY GOALS + METRICS
FOR YOUR SITE
!
!
Bev May
Beverly@OxfordTech.us @OxfordTech OxfordTech.us
@UXAwards UXAwards.org
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
128. Value of Public Metrics: How many trees?
GA: Content Sites l August 2014
?
129. GA: Content Sites l August 2014
Theory of Relativity
chican-izmo.blogspot.com/2010/06/if-tree-falls-in-forest.html
130. YOUR TURN!
GO TO SIMILARWEB.COM & RESEARCH
YOUR SITE VS . 5 COMPETITORS
FOR
-UNIQUE VISITS
- AVE. TIME SPENT/ VISIT
!
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. 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
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. Competitor Heuristic Evaluation
▪Deep-dive into high-performers- how & why
▪Correlated to the high-performing sites from metrics
GA: Content Sites l August 2014
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
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. On-Site Metrics Analysis
Web vs. mobile activity by Site Section
GA: Content Sites l August 2014
145. Layout Metrics Tools: Heatmaps
GA: Content Sites l August 2014
inviteads.com/wp-content/uploads/2013/07/Heatmap.jpg
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
!
155. What You Don’t Want
GA: Content Sites l August 2014
http://www.1800attorney.com/
156. Don’t Make Me Think!
GA: Content Sites l August 2014
http://cailincreature.blogspot.com/2010_06_01_archive.html
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. 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