Content Strategy + Navigation Design: UX Overview + Considerations

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

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?

GA: Content Sites l August 2014
The Hunt!
http://www.cefa.ca/wp-content/uploads/2014/04/1449526921.jpg

What You Don’t Want
http://www.1800attorney.com/

Don’t Make Me Think!
http://cailincreature.blogspot.com/2010_06_01_archive.html

Lead them where YOU want them to go
http://m.cdn.blog.hu/in/investo/image/Robot.jpg

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

Be a Competent UX Generalist
http://lawyerkm.com/wp-content/uploads/2008/09/swiss_army_knife1.jpg
Content
UX

CONTEXT
OXFORD TECHNOLOGY
VENTURES

▪ 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

Clients

Product Development

UX Awards
Premier awards for exceptional digital experience, now in its 4th year
UXAWARDS.ORG

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

Holistic Design Thinking
Assumptions
true? How to
improve?
Who is your
customer?
What’s
their problem?
What’s
your
solution?
How help solve
customer problem
in best, fastest
way?

Lean Startup = Good UCD / UX
MEASURE
LEARN
IDEA/ BUILD

Content & Navigation: Easy to Iterate

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

Now: CMSes with Content, Display &
Code Separation

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
CORE SITE CODE
DATABASE

UX & CMSes
PRESENTATION UI: CSS, JS LIBRARIES
PRESENTATION CODE: MODULES, AUTOMATED CONTENT
3RD PARTY CONTENT (IFRAMES, EMBEDS)
CONTENT (TEXT, IMAGES, VIDEOS)
TEMPLATES
CONTENT TYPES
DATABASE
INTEGRATED DISPLAY OF WHAT YOU SEE…
CORE SITE CODE

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

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

Wordpress

Tumblr, Blogger, Facebook, Twitter…

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
http://i2.wp.com/www.excellencemagentoblog.com/wp-‐content/uploads/2011/10/checkoutremovepayment.png?resize=620%2C314

Terminology
Heatmap
Card Sort
SEO
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

Content
Header
Navigation
Footer
Modules
Sidebar/ Right
Rail
Templates

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

Basic Layout Elements: Desktop
Content
Header
Navigation
Footer
Modules
Sidebar/ Right
Rail

Responsive Design: Tablet
Header
Navigation
Content
Sidebar/ Right Rail
Modules
Footer

Responsive/ Adaptive: Mobile
Header Navig
Content
Sidebar/ Right Rail
Modules
Footer
Header
Navig
Content
Modules
Footer

Article (NY Times)

Article (Buzzfeed)

Product Detail
Macy’s, Sabon

Optimizing for Audience, Usage, Norms

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

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

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

Role of Homepage
http://4.bp.blogspot.com/-‐tv8iixow504/Ue9d_7UWEQI/AAAAAAAAUC4/0S4KcSSKd08/s1600/The+New+York+Times+photo.jpg

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

UGC: Old vs. New
reddit, buzzfeed, http://cdn.inmotionhosting.com/support/images/stories/edu/phpbb/overview/forum-‐overview.png

“Linkbait”: Reddit, Buzzfeed, PlayBuzz,
Upworthy & The Clickable Headline

Advertorial/ Native Advertising
http://techcrunch.com/2014/08/12/buzzhome/

“Multimedia” + Video, Visual Web
!!!!!!!!!!!!!!
https://lh3.ggpht.com/vFpQP39LB60dli3n-rJnVvTM07dsvIzxrCL5xMiy1V4GV4unC1ifXkUExQ4N-DBCKwI=w300!
!!!

Social Memes & Images
http://memegenerator.net/images/popular/week

Visual Web Considerations
▪ Subject Matter
▪ UX: Context & Usage
▪ Demographics (Text vs. Images, Video)
▪ Age
▪ Income
▪ Education
▪ Geography
▪ Platform/ Device & Bandwidth

Internal Site Metrics- Top Entry, Exit Points

Traffic Patterns (Every Page a Landing)
Top Sections (Comscore)
!
Top paths (Comscore)

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

Recirculation Techniques
http://imgur.com/gallery/hXQYK4B

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)

3rd Party Tools: Outbrain, Taboola
http://money.cnn.com/2013/08/15/technology/security/outbrain-‐hack/

Article Footers
NYTImes, Buzzfeed

Article Recirculation- Mobile

Thinking Outside the Box
OxfordTech.us | Web Metrics l July 2014

SHARE EXAMPLES!
IDENTIFY & SHARE EXAMPLES OF
RECIRCULATION METHODS USED
ON COMMON SITES

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

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

Faceted Search Dr. Weil’s Vitamin Advisor

Search as Browse/Channel
Buzzfeed

Search: Type-Ahead
sabon.com, amazon.com

Suggested / Programmed Search
Google

I Know It’s Here Somewhere…
http://346fae7859434bda978f-‐1902f231618c5697bb2c852c565827b8.r12.cf5.rackcdn.com/wp-‐content/uploads/2014/02/diving1.jpg

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
buzzfeed.com, nytimes.com

Align Navigation with User Goals
▪ Define Audience
▪ Define Goals, Needs
▪ Look at Metrics- optimize (Searches)
▪ Competitors- standardize wording
▪ Simplify
▪ Test & Refine

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)

Navigation Types
▪ Editorial -Manual
▪ Tag-Based
▪ Content Hierarchy/ Sitemap Based
▪ Taxonomy/ Keyword Based
▪ Personalized

Navigation Defaults

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

Mobile Flyouts

Navigation Menus for Lots of Content:
Mega-Dropdown (Desktop)
old healthguru

Navigation on Mobile: Implicit/ Explicit
& Levels
Header Navi
Modules
Footer
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

Mega-Dropdowns vs. Mobile
sabon, home depot

Navigation for Branding, Narrative
dr weil’s vitamin advisor

Wording: SEO, Keyword Research
▪ Google Keyword Planner
▪ Competitors
▪ Card Sorts

Icons vs. Text

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)
http://mac.blorge.com/wp-‐content/uploads/2009/09/gannied_out.jpg

Voice, Sensors, Movement, Shaking…

GREAT CONTENT-CRAP
SITE!
SHARE EXAMPLES OF SITES WITH
POOR NAVIGATION OR SEARCH
(ECOMMERCE OR CONTENT)
DISCUSS IMPROVEMENT
APPROACHES

What are Metrics?
#%<>

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!

Metrics Data Sources
▪ Web- public & competitor
▪ Web- internal / private
▪ Social
▪ Mobile Apps
▪ User Testing & Analysis
▪ MVT & A/B
▪ Surveys
▪ Ecommerce

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
http://www.wsgsystems.com/uploads/images/cookies_large.jpg

Metrics Categories
TRAFFIC
!
ENGAGEMENT
!
AUDIENCE
!
PLATFORM
!
(REVENUE)

Key Traffic Web Metrics
MARKETING FOCUS
▪ Uniques
▪ Visits
▪ % from Search -Paid vs. Organic,
Top Referring Terms
▪ % from Social
▪ % direct-load
▪ Top Referring Domains

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
http://blog.hugeaim.com/static/wp-content/uploads/2011/07/ballbounce.jpg

Key Audience Web Metrics
▪ Demographics- Age, Income,
Gender, Education, Location,
Ethnicity, Marital Status, Kids
http://clipartist.info/openclipart.org/SVG/rejon/person_outline_4-800px.png

Key Platform Web Metrics
DESIGN FOCUS
▪ % Mobile
▪ Display size & resolution
- desktop & mobile
▪ OS, Device, Web Speed
http://www.gizmoville.com/wp-content/uploads/2012/02/omgitsfullofpixels.png

Summary - Public Web Metrics
TRAFFIC- MARKETING
▪ Uniques
▪ Visits
▪ % from Search -Paid vs. Organic,
Top Referring Terms
▪ % from Social
▪ % direct-load
▪ Top Referring Domains
!
AUDIENCE - EVERYONE
▪ Demographics- Age, Income,
Gender, Education, Location,
Ethnicity, Marital Status, Kids
ENGAGEMENT- UX
▪ Visits/ Unique
▪ Page Views (PV)
▪ PVs/Visit, PVs/ Unique
▪ Time Spent
▪ Top Entry / Exit Pages
▪ Top Sub-Sites/ Sections
!
PLATFORM- DESIGN
▪ % Mobile
▪ Display size & resolution - desktop
& mobile
▪ OS, Device, Web Speed
!
!

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
▪ 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

Key Internal Site Metrics- Top Sections

Internal Clickpaths
Click path Analysis
from Homepage

Internal Metrics Paths vs. Navigation

1.
CASVENTURES
KPIS, GOALS,
METRICS

BUSINESS KPI (RED) & UX (BLACK) Goals
< “UPSELL”
TO LOGIN/
PAY
< VIDEO
DISCOVERY
ACROSS
SHOWS
WATCH <
FULL
VIDEOS
DISCOVER <
SHOWS

Quantify Your Goals
REDUCE
BOUNCE
BY 20%
INCREASE
AVE PV/S
BY 20%+!
!
UX: CONTENT
DISCOVERY +
ENGAGEMENT

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
!
!

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

Translate into UX Features
< CONTENT DISCOVERY
< BROWSE OPTIONS
< REFINED SEARCH
< TAGS, CATEGORIES
< AUTO-SUGGEST BY
BEHAVIOR, METRICS,
SIMILARITY
< VISUAL- VIDEO,
PHOTOS, SLIDESHOWS
< SOCIAL ENGAGEMENT
ONSITE + LOGINS
< SOCIAL SHARING
< CLEAR NAVIGATION
< SEO, KEYWORDS
< EMBEDDED
ECOMMERCE

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

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
!
!

2. CAANSVAENLYTUZREES
COMPETITOR
PERFORMANCE

Don’t Be Square.
29

Time Spent (UX)

Bounce Rate

Pageviews vs. Time Spent

Traffic: Uniques or Visits Over Time
Visits/Time

Demographics & Content

Value of Public Metrics: How many trees?
?

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

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

CASVENTUR3E.S
COMPETITOR &
SITE ANALYSIS

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

Competitor Heuristic Evaluation
▪Deep-dive into high-performers- how & why
▪Correlated to the high-performing sites from metrics

Competitor Heuristic Evaluation

Try to find out the WHY behind the #s

Internal Heuristic- Deep Dive on Key Pages

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

4. CONCECPASTVIENNTGU R&ES
PROTOTYPING

Prototype New Directions

5. RECSAESVAERNTCUHRE,S
TESTING &
OPTIMIZATION

Audience Sentiment & Surveys
Role of Net Promoter Score (NPS)
http://www.netpromoter.com/why-‐net-‐promoter/know/

On-Site Metrics Analysis
Web vs. mobile activity by Site Section

Layout Metrics Tools: Heatmaps
inviteads.com/wp-content/uploads/2013/07/Heatmap.jpg

Real-Time Optimization: Chartbeat

MVT & A/B
http://www.matraxis.co.uk/services/ab-multivariate-testing/

Observation

Hallway Usability: Prototypes
ANDREW MCKINNEY!
http://andrewmckinney.com/projects/weight-watchers-iphone-app/

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/
!
!
!

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-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)
!
!
!

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

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!

User Satisfaction :-)

CONTENT STRATEGY +
NAVIGATION DESIGN
UXAWARDS.ORG/EVENT-DETAILS
“GA”: 20% OFF
“ACTIVEGA”: 30% OFF
THANKS!
!
!
Bev May

Content Strategy + Navigation Design: UX Overview + Considerations

More Related Content

Similar to Content Strategy + Navigation Design: UX Overview + Considerations (20)

More from Oxford Tech + UX (13)

Recently uploaded (20)

Content Strategy + Navigation Design: UX Overview + Considerations