62
STRUCTURED CONTENT Bonny Colville-Hyde UX IRELAND 2016

Structured Content UX Ireland

Embed Size (px)

Citation preview

STRUCTURED CONTENT

Bonny Colville-Hyde UX IRELAND 2016

Hello

I’ve 10 years of experience working in UX (usability, information architecture, research and content strategy) for diverse clients including global ecommerce sites, financial systems, medical software & charities. I’m now a Product Manager at Immediate Media, where I look after BikeRadar.com, Cyclingnews.com, HistoryExtra.com, Countryfile.com and a host of other passion-driven brand sites.

USER EXPERIENCE & DIGITAL CONTENT

USER EXPERIENCE

Usability

Information Architecture

Interaction Design

Content Strategy

Visual Design

Service Design

The problem with UX & content

•  We forget that content matters most •  Without good quality, appropriate,

findable content, digital services are not fit for purpose

•  No matter how much stylish design patterns you layer on bad content, it stays bad content

“It’s pointless to design a user experience without a deep understanding of the content that will fuel that experience”

- KRISTINA HALVORSON

Digital Content

•  Digital media (images, videos, audio etc)

•  Words! Written text is the MOST IMPORTANT part of the internet

Managing Content

Audit

Strategy

Creation Maintenance

Measurement

Beyond a ‘page’

CONTENT

STRUCTURED CONTENT:

•  Organisation •  Labeling •  Relationships •  Data

WHAT IS STRUCTURED CONTENT?

CONTENT

WHAT IS IT?

HOW IS IT DESCRIBED?

WHAT RELATIONSHIPS DOES IT HAVE?

HOW WILL IT BE FOUND?

WHERE DOES IT COME FROM?

Structured Content:

•  High level: the site wide structure, how all the content is structured

•  Grouped: How a group of content types are structured

•  Specific: How a piece of content is structured

Findability

Search Engines:

•  Keywords •  Content Quality •  Data

Site Navigation:

•  Menus •  Filters •  On site search

Other Content:

•  Relationships •  Link Strategy •  Content Types

Social Media:

•  Titles •  Visual Assets •  Sharability

High level structure

Site navigation: primary, secondary, supplementary

Grouped content structures

Taxonomies: controlled vocabularies & labels Content types: relationships

ACTIVITY #1

We are going to create a list of CHEESES. Tell me a name of a cheese…

CHEDDAR

BRIE

MOZZARELLA

CAMEMBERT

RED LEICESTER

PARMESAN

STILTON

ROQUEFORT

WENSLEYDALE

FETA

GORGONZOLA

EMMENTAL

HALLOUMI

GOUDA

ARDRAHAN

BURREN GOLD

DUBLINER

CHEESE

CHEESE

CHEDDAR BRIE MOZZARELLA

CAMEMBERT RED LEICESTER

PARMESAN STILTON ROQUEFORT

WENSLEYDALE

FETA

GORGONZOLA

EMMENTAL

HALLOUMI

GOUDA

ARDRAHAN

BURREN GOLD

DUBLINER

BRITISH ITALIAN FRENCH

DUTCH

GREEK

IRISH

CYPRIOT

CHEESE

CHEDDAR

BRIE

MOZZARELLA CAMEMBERT

RED LEICESTER

PARMESAN

STILTON

ROQUEFORT

WENSLEYDALE

FETA

GORGONZOLA

EMMENTAL HALLOUMI

GOUDA

ARDRAHAN

BURREN GOLD

DUBLINER

HARD CHEESE SOFT CHEESE SEMI SOFT CHEESE

CHEESE

CHEDDAR BRIE

MOZZARELLA

CAMEMBERT RED LEICESTER

PARMESAN

STILTON

ROQUEFORT

WENSLEYDALE

FETA

GORGONZOLA

EMMENTAL

HALLOUMI

GOUDA ARDRAHAN

BURREN GOLD

DUBLINER

CHEESES I LIKE CHEESES I DON’T LIKE CHEESES I’VE NOT TRIED

CHEESES I’VE NOT YET RATED

TAXONOMIES

Taxonomy

Term list: A standardised, controlled list of terms or tags that are used consistently Hierarchy: A structured taxonomy of terms that have a structural relationship with each other (e.g: Parent --- Child) Thesaurus: Maps relationships between items to help systems understand how they relate

CYAN

Controlled Vocabularies

Controlling vocabularies used in taxonomy term lists helps us avoid poor experiences, such as:

Sprawling terminology

Reduced findability

Miss-match with user’s language

BRIGHT BLUE

0 Results

Wellingtons

Gum boots

AZURE

CHEESE

LOCATION

CONTINENT

COUNTRY

TYPE

HARD

SEMI SOFT

SOFT

BLUE

MILK TYPE

COW

SHEEP

GOAT

BUFFALO

PASTURISED

UNPASTURISED

ACTIVITY #2

We have a lot of different content about cheeses. What sort of content types might these be? How might these content types relate to each other?

REVIEW

NEWS PRESS RELEASE

PRODUCT RECIPE

CASE STUDY

TRAVEL GUIDE DIET

CONTENT TYPES

Content Models

1. Create a set of ‘things’ associated with the

domain (get a domain expert to work with you)

2. Join the ‘things’ together based on their relationships e.g:

RECIPE <- - - -> INGREDIENT

Making a simple content model

REVIEW

NEWS STORY

PRESS RELEASE

PRODUCT RECIPE

CASE STUDY

TRAVEL GUIDE

DIET

CONTENT TYPES

THIS IS A SIMPLE CONTENT MODEL

Sample Site Map 1

PRODUCTS RECIPES

A – Z

CONTINENT

COUNTRY

TYPE

MILK

EASY

INTERMEDIATE

EXPERIENCED

HOME

Sample Site Map 2

Page stacks suck

PRODUCTS

CHEESES

? ?

?

Faceted Navigation

FIXED: e.g: •  Geographic •  Alphabetical

These are closely linked to you domain and established conventions

AMBIGUOUS: e.g: •  Task-based •  Audience type

These are closely linked to your specific audience’s mental model

Faceted Navigation:

AUDIENCE SUBJECT PRODUCT FORMAT

e.g: ‘Beginner’

e.g: ‘How to guide’

e.g: ‘Brand’ ‘Price’ ‘Features’

e.g: ‘Video’

In Summary

You need to plan: How to group content together How to label those groups How to navigate those groups

Un-Structured Content

Page driven:

TITLE

BODY COPY BODY COPY BODY COPY BODY COPY BODY COPY BODY COPY BODY COPY BODY COPY BODY COPY BODY COPY. BODY COPY BODY COPY.

Structured Content

Data driven:

TITLE

META DATA

RELATIONSHIPS

TYPE

INTRO SUMMARY

BODY COPY BODY COPY BODY COPY BODY COPY BODY COPY BODY COPY.

AUTHOR

Specific content structure

Data: Information about content Specific template requirements: purpose and requirements

WORKING WITH REAL CONTENT

ACTIVITY #3 Identifying Content Structures

1. Look for components that could have relationships

with other content e.g: STAR RATINGS

2. Create a list of all the components that you could

standardise across all reviews

ALL REVIEWS HAVE THESE ‘THINGS’: • STAR RATINGS: with a value between 0 stars and 5 stars • • • •

ACTIVITY #3 Making Content Findable

1. Choose a ‘thing’ from your list and explore

how it could make the review more findable

2. Sketch out how users could use an interface to

find content with this ‘thing’

Filter reviews by STAR RATINGS:

HELPING MACHINES UNDERSTAND CONTENT

Metadata & Microdata

Metadata and Microdata help search engines, APIs, feeds and content management systems make sense of content and improve its findability They use controlled vocabularies to ensure they are consistent.

METADATA

Metadata

Metadata

BEDROOM SHED

Metadata

•  Data about data •  Essential for findability: it makes

content understandable to search engines and content management systems

•  Describes relationships between content through taxonomies and content types

MICRODATA

Microdata

•  Stores data about content in context: specific pieces of information are given a structure so machines can take more meaning from them

•  Different standardised schemas exist e.g: RDF, Schema.org, Dublin Core etc

Schema.org

Enables you to tag specific things within HTML to give more context. “Itemscope”: Broadly identifies the theme of the thing “Itemprop”: Provides the detail about the thing

A simple author bio: Aoife Glass Women’s Editor, BikeRadar I’m a mountain biker at heart, also drawn to the open road. I likes big long adventures in the mountains. Usually to be found in the Mendip Hills or the Somerset Levels in the UK. I’m passionate about women's cycling at all levels.

<section itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Aoife Glass</span>, <span itemprop="jobTitle">Womens Editor</span> <span itemprop="affiliation">BikeRadar</span>. I’m a mountain biker at heart, also drawn to the open road. I likes big long adventures in the mountains. Usually to be found in the Mendip Hills or the Somerset Levels in the UK. I’m passionate about women's cycling at all levels.

</section>

Add microdata:

What Google understands:

https://search.google.com/structured-data/testing-tool/u/0/ https://developers.google.com/search/docs/guides/mark-up-content

To Close:

Structured content makes content more findable which is essential to any user experience. It blends multiple disciplines including IA, content strategy, usability and SEO is something UX PR actioners should absolutely care about ;-)

Useful Tools Trim: Content audit tool coming soon Gettrim.co | @Trimvincible Gather Content: Fabulous content workflow tool Gathercontent.com | @GatherContent Hemmingway App: Lovely tool to test your content readability Hemmingwayapp.com Google: Structured Data test tool https://search.google.com/structured-data/testing-tool/u/0/

Glossary Content Modelling: The process of mapping the relationships between pieces of content or information. A content model can include high level relationships within a domain and more detailed relationships between pieces of content. Structuring Content: The process of taking content and breaking it into parts to make it more findable and reusable for humans and machines.

Data Modelling: The process of modeling a database inline with the type of queries it will need to handle. This is done by a developer.

Service Oriented Architecture: A development architecture that separates data, processes/tasks and interfaces to make it more flexible. A service or API (Application Programing Interface) acts as a middleman that processes requests from the editorial interface and user interface with the information stored in databases.

Content Management System: A system that enables a group of people to manage content in a fairly straightforward way. Each CMS has its own way of dealing with content types and favours a specific one, e.g: ‘Posts’ in WordPress. Some CMS platforms are much more flexible than others, for instance Sitecore will enable you to build anything but it comes with the challenge that it has to be built, whereas WordPress is restrictive but is ready to go, out-of-the-box.

Glossary

Metadata: Data about data. Metadata describes information about the content, such as structural information like author, publishing date, ID, or taxonomy items in a format either defined by the CMS, or a universal schema, or a mix of both. Metadata is used to find content based on specific queries, so tools like search rely heavily on it.

Glossary

Taxonomy: In the context of creating and managing digital content a taxonomy is a controlled vocabulary that is used consistently to describe pieces of content. A taxonomy can have a hierarchical element to it, to describe the relationship between different taxonomy items.

Planning Pages

Page Tables can be used to specify content requirements at the page level. These were originally created by Brain Traffic.

TITLE:

MAIN CONTENT PRIORITY:

SECONDARY CONTENT PRIORITY:

PAGE OBJECTIVE: