Slide 1
Slide 1 text
Breaking News on the Web
Tips and Suggestions for Modern News Sites
Lighthouse Mentorship Session
3rd May 2024
Slide 2
Slide 2 text
Introduction
Miranj is a strategic web design and development studio.
We enable small businesses, institutions, brands and communication teams to
organise and publish meaningful stories on the web.
Slide 3
Slide 3 text
Underlying Assumptions
● You’re probably not a monopoly
● There are several sources and high competition around the world
● How to make people reach you?
● How to make people choose you?
● How to make people pay you?
Slide 4
Slide 4 text
Agenda
1. Design and UX
2. Technical SEO
3. Information Architecture
Slide 5
Slide 5 text
Agenda
1. Design and UX
2. Technical SEO
3. Information Architecture
Slide 6
Slide 6 text
Business Class
“Why do people fly Business
Class? In the end, an airplane
brings me to the same place
regardless of whether I fly
Economy or Business Class, and
the massive price-increase I pay
doesn’t compare the difference
in value.”
https://ia.net/topics/business-class-news
Slide 7
Slide 7 text
Content is King 👑
Slide 8
Slide 8 text
The website content
is the product
Your visitors are here for your
content. Your website user
experience revolves around the
reading experience.
Slide 9
Slide 9 text
The website content
is the product
It’s unfortunate that web
browsers have had to
compensate for poor reading
experience by introducing
“Reader Views”
Slide 10
Slide 10 text
The website content
is the product
It’s unfortunate, that we’ve to
live in a world of “Reader Views”
to offer a respectable reading
experience.
😶
😶 😶
Slide 11
Slide 11 text
The website content
is the product
It’s unfortunate, that we’ve to
live in a world of “Reader Views”
to offer a respectable reading
experience.
Slide 12
Slide 12 text
Recommendations
for Reading UX
1. Legible typography
2. Clear type hierarchy
3. Scale-able text
4. Zoom-able high-res photos
5. Wide high-res videos
6. …
Slide 13
Slide 13 text
Embrace the diversity in your users
Slide 14
Slide 14 text
1. User Intent
Embrace
User Diversity
Slide 15
Slide 15 text
Embrace
User Diversity
1. User Intent
○ High vs Low
High Intent
Low Intent
Slide 16
Slide 16 text
Embrace
User Diversity
1. User Intent
○ High vs Low
High Intent
Low Intent
● Looking for news on specific events/people
● Seeking factual information
● Fact checking
● Looking to understand/shape arguments
● Taking a break from work
● Entertainment
● Casual browsing
Slide 17
Slide 17 text
Embrace
User Diversity
1. User Intent
○ High vs Low
○ Macro vs Micro
High Intent
Low Intent
Micro
Content
Macro
Content
Slide 18
Slide 18 text
Embrace
User Diversity
1. User Intent
○ High vs Low
○ Macro vs Micro
High Intent
Low Intent
Micro
Content
Macro
Content
Reading Experience
Related Content
Shorts
Topic/Theme Page
Timeline of Events
Bookmarking (Read Later)
What’s new?
Entertainment
News Explorer
Infinite Scrolling
Tangential Subjects
Slide 19
Slide 19 text
Embrace
User Diversity
1. User Intent
○ High vs Low
○ Macro vs Micro
2. User Behaviour
Slide 20
Slide 20 text
1. User Intent
○ High vs Low
○ Macro vs Micro
2. User Behaviour
○ Skimming
Embrace
User Diversity
Slide 21
Slide 21 text
1. User Intent
○ High vs Low
○ Macro vs Micro
2. User Behaviour
○ Skimming
○ Impatience
Embrace
User Diversity
Slide 22
Slide 22 text
1. User Intent
○ High vs Low
○ Macro vs Micro
2. User Behaviour
○ Skimming
○ Impatience
Embrace
User Diversity
Slide 23
Slide 23 text
Embrace
User Diversity
1. User Intent
○ High vs Low
○ Macro vs Micro
2. User Behaviour
○ Skimming
○ Impatience
○ Not a keen reader
Slide 24
Slide 24 text
Embrace
User Diversity
1. User Intent
○ High vs Low
○ Macro vs Micro
2. User Behaviour
○ Skimming
○ Impatience
○ Not a keen reader
3. User Context
○ Device configuration
Slide 25
Slide 25 text
1. User Intent
○ High vs Low
○ Macro vs Micro
2. User Behaviour
○ Skimming
○ Impatience
○ Not a keen reader
3. User Context
○ Device configuration
○ At a desk/on the move
Embrace
User Diversity
Slide 26
Slide 26 text
Ads: The Good, the Bad and the Ugly
Slide 27
Slide 27 text
Ads are Good
● Good revenue source
● Easy to integrate
● Offer value to users if they find the ad relatable/useful
Slide 28
Slide 28 text
Ads are Bad
1. Slows down page loading and performance
2. Needs greater browser resources
3. Adds a large number of third party trackers in the code
4. Jumps and layout shifts
5. Negatively impacts the reading experience
Slide 29
Slide 29 text
1. If they dominate the
core content
Ads are Ugly
Slide 30
Slide 30 text
Ads are Ugly
● If they dominate the
core content
● If they are highly intrusive
Slide 31
Slide 31 text
Ads are Ugly
● If they dominate the
core content
● If they are highly intrusive
● If they take over the page
Slide 32
Slide 32 text
Ads are Ugly
● If they dominate the
core content
● If they are highly intrusive
● If they take over the page
● If they trick the user
A dark pattern (also known as a "deceptive design
pattern") is "a user interface that has been
carefully crafted to trick users into doing things”
Slide 33
Slide 33 text
Ads are Ugly
● If they dominate the
core content
● If they are highly intrusive
● If they take over the page
● If they trick the user
Slide 34
Slide 34 text
Ads are Ugly
1. If they dominate the
core content
2. If they are highly intrusive
3. If they take over the page
4. If they trick the user
😶
😶
Slide 35
Slide 35 text
1. Clearly demarcate ads from
the core content
Recommendations
for Ads
Slide 36
Slide 36 text
1. Clearly demarcate ads from
the core content
2. Fewer big ads are better
than many small ones
Recommendations
for Ads
Slide 37
Slide 37 text
1. Clearly demarcate ads from
the core content
2. Fewer big ads are better
than many small ones
3. Prefer placing ads beside
the primary content
Recommendations
for Ads
Slide 38
Slide 38 text
Recommendations
for Ads
1. Clearly demarcate ads from
the core content
2. Fewer big ads are better
than many small ones
3. Prefer placing ads beside
the primary content
4. Lazy load ads within
pre-sized slots
(to avoid layout shifts)
Slide 39
Slide 39 text
Recommendations
for Ads
1. Clearly demarcate ads from
the core content
2. Fewer big ads are better
than many small ones
3. Prefer placing ads beside
the primary content
4. Lazy load ads within
pre-sized slots
(to avoid layout shifts)
Slide 40
Slide 40 text
Recommendations
for Ads
1. Clearly demarcate ads from
the core content
2. Fewer big ads are better
than many small ones
3. Prefer placing ads beside
the primary content
4. Lazy load ads within
pre-sized slots
(to avoid layout shifts)
5. Avoid takeovers and other
dark patterns
❌
Slide 41
Slide 41 text
Personalise User Experience
Slide 42
Slide 42 text
The Traditional Way
Ability to create a user account
and select their own user
preferences.
Slide 43
Slide 43 text
The Traditional Way
Ability to create a user account
and select their own user
preferences.
Slide 44
Slide 44 text
The New Way
Personalisation is
increasingly invisible.
Slide 45
Slide 45 text
The New Way
Personalisation is
increasingly invisible.
Slide 46
Slide 46 text
Use Indirect Signals
For example—
1. Country of Visit
Slide 47
Slide 47 text
Use Indirect Signals
For example—
1. Country of Visit
2. User Action/Choices
Slide 48
Slide 48 text
Use Indirect Signals
For example—
1. Country of Visit
2. User Action/Choices
Slide 49
Slide 49 text
Use Indirect Signals
For example—
1. Country of Visit
2. User Action/Choices
Slide 50
Slide 50 text
Use Indirect Signals
For example—
1. Country of Visit
2. User Action/Choices
Slide 51
Slide 51 text
You’ve seen 3 articles, so we suggest you…
Use Indirect Signals
Such as—
1. Country of Visit
2. User Action/Choices
3. User Journey, etc…
Slide 52
Slide 52 text
Popular articles read by people from your city
Use Indirect Signals
Such as—
1. Country of Visit
2. User Action/Choices
3. User Journey, etc…
Slide 53
Slide 53 text
If someone is consuming videos/audio content,
show them more such content on the home page
Use Indirect Signals
Such as—
1. Country of Visit
2. User Action/Choices
3. User Journey, etc…
Slide 54
Slide 54 text
Use Indirect Signals
Such as—
1. Country of Visit
2. User Action/Choices
3. User Journey, etc…
You’ve read 5 articles today,
maybe consider contributing…
Slide 55
Slide 55 text
Subscription CTAs
Slide 56
Slide 56 text
Considerations
for CTAs
1. Placement
2. Appearance
3. Message
Slide 57
Slide 57 text
Considerations
for CTAs
1. Placement
2. Appearance
3. Message
Slide 58
Slide 58 text
● At a persistent position
(header or footer)
Placement
Slide 59
Slide 59 text
Placement
● At a persistent position
(header or footer)
Slide 60
Slide 60 text
Placement
● At a persistent position
(header or footer)
Slide 61
Slide 61 text
Placement
● At a prominent place on
the header
● Close to or right after value
realisation (end of
an article)
Slide 62
Slide 62 text
● At a prominent place on
the header
● Close to or right after value
realisation (end of
an article)
● Most importantly,
gentle appeals across the
user journey.
Placement
Slide 63
Slide 63 text
Considerations
for CTAs
1. Placement
2. Appearance
3. Message
Slide 64
Slide 64 text
Appearance
● Sufficiently stand out from
the rest of the content
● High-contrast button
● Follow branding guidelines
Slide 65
Slide 65 text
Considerations
for CTAs
1. Placement
2. Appearance
3. Message
Slide 66
Slide 66 text
● Engage and draw
Message
Slide 67
Slide 67 text
● Engage and draw
● Tell a story
Message
Slide 68
Slide 68 text
● Engage and draw
● Tell a story
● Make it current
Message
Slide 69
Slide 69 text
Message
● Engage and draw
● Tell a story
● Make it current
● Button micro-copy should
eliminate UX actions
“Click Here to Subscribe”
vs
“Subscribe to our newsletter”
Slide 70
Slide 70 text
Message
● Engage and draw
● Tell a story
● Make it current
● Button micro-copy should
eliminate UX actions
● Emphasise on
user’s motivations
“People don’t want to buy a quarter-inch drill.
They want a quarter-inch hole!”
–Theodore Levitt (Harvard Business School Professor)
Slide 71
Slide 71 text
Message
● Engage and draw
● Tell a story
● Make it current
● Button micro-copy should
eliminate UX actions
● Emphasise on
user’s motivations
“Subscribe to our newsletter”
vs
“Send me daily updates”
Slide 72
Slide 72 text
Message
● Engage and draw
● Tell a story
● Make it current
● Button micro-copy should
eliminate UX actions
● Emphasise on
user’s motivations
“Become a member”
vs
“Support Powerful Journalism”
Slide 73
Slide 73 text
Message
● Engage and draw
● Tell a story
● Make it current
● Button micro-copy should
eliminate UX actions
● Emphasise on
user’s motivations
“Signup”
vs
“Read 5 articles ad-free”
Slide 74
Slide 74 text
Nurture a solid design system,
over *great* designs
Slide 75
Slide 75 text
Great designs
● May gradually lose charm
● Might go out of fashion
● Is subjective
● Has a limited visibility
and impact
Slide 76
Slide 76 text
A design system is a set of standards to manage
design at scale by reducing redundancy while
creating a shared language and visual consistency
across different pages and channels.
What is a design system?
Slide 77
Slide 77 text
Design System
● Helps scale while
maintaining UX quality
● Separation of concerns
between design and
content teams
● Helps speed up new feature
rollouts
Slide 78
Slide 78 text
Design System
● Helps in the website being
learnable for the users
● Helps in a strong brand
(+website) recognition
Slide 79
Slide 79 text
Balances several (and often
contradictory) needs—
● content
● performance
● CTAs guidance
● voice and tone
● and more
https://design.theguardian.com/
Design System
Slide 80
Slide 80 text
Agenda
1. Design and UX
2. Technical SEO
3. Information Architecture
Slide 81
Slide 81 text
Organic Discovery on the Web
Design & UX interventions serve users, after they have
reached your website. They have limited impact on how the
content (or the website) is discovered on the web.
For that, we need to think of search crawlers as users/stakeholders, and help them succeed.
Slide 82
Slide 82 text
What is Technical SEO?
Technical SEO is about improving your website to make it
easier for search engines to find, understand, and
store your content.
It also involves user experience factors. Such as making your website faster and
easier to use on mobile devices.
Slide 83
Slide 83 text
Technical SEO
1. Semantics
2. Structured Data
3. Page Experience
Slide 84
Slide 84 text
Technical SEO
1. Semantics
2. Structured Data
3. Page Experience
Semantic HTML, also known as
semantic markup, refers to the use of HTML
tags that convey the meaning—or semantics—of
the content contained within them.
Adding semantic HTML tags to your pages provides additional information that
helps define the roles and relative importance of the different parts of your page.
(As opposed to non-semantic HTML tags that don’t directly convey meaning.)
Slide 85
Slide 85 text
1. Developer Responsibility
Setting the foundations
2. Author Responsibility
Applying the correct tools
within the content editor
(e.g. correct usage of
heading tag and bold tag)
Semantic Code
Slide 86
Slide 86 text
1. Developer Responsibility
Setting the foundations
2. Author Responsibility
Applying the correct tools
within the content editor
(e.g. correct usage of
heading tag and bold tag)
Semantic Code
Slide 87
Slide 87 text
Technical SEO
1. Semantics
2. Structured Data
3. Page Experience
Slide 88
Slide 88 text
Technical SEO
1. Semantics
2. Structured Data
3. Page Experience
Structured data is a standardized format
for providing information about a page
and classifying the page content.
for example, on a recipe page, what are the ingredients,
the cooking time and temperature, the calories, and so on.
Slide 89
Slide 89 text
Structured Data
1. Vocabulary
Slide 90
Slide 90 text
Structured Data
1. Vocabulary
2. Format
Slide 91
Slide 91 text
Structured Data
1. Vocabulary
2. Format
3. Support
Slide 92
Slide 92 text
Technical SEO
1. Semantics
2. Structured Data
3. Page Experience
Slide 93
Slide 93 text
Page Experience
Google’s Core Web Vitals are a
collection of metrics that
indicate how user-friendly a
website is based on its load time,
visual stability, and interactivity.
Slide 94
Slide 94 text
Page Experience
Google’s Core Web Vitals are a
collection of metrics that
indicate how user-friendly a
website is based on its load time,
visual stability, and interactivity.
Slide 95
Slide 95 text
1. PageSpeed Insights
Site Audit Tools
Slide 96
Slide 96 text
Site Audit Tools
1. PageSpeed Insights
Slide 97
Slide 97 text
Site Audit Tools
1. PageSpeed Insights
2. Rich Results Test
Slide 98
Slide 98 text
Site Audit Tools
1. PageSpeed Insights
2. Rich Results Test
3. Search Console
Slide 99
Slide 99 text
Agenda
1. Design and UX
2. Technical SEO
3. Information Architecture
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
What is Information Architecture?
Information architecture is the practice of structuring,
organizing, and labeling content in your website to make it
understandable, findable and discoverable.
It includes searching, browsing, categorizing and presenting relevant and contextual information to help
people understand their surroundings and find what they’re looking for online and in the real world.
Slide 103
Slide 103 text
1. Identifying the Content Types
IA Fundamentals
● Common Stories
● Live updating article
● Seminal Piece
● Analyse a product
● Our point of view
● Conversation
● …
Slide 104
Slide 104 text
● Common Stories → Article
● Live updating article → Live Blog
● Seminal Piece → Feature
● Analyse a product → Review
● Our point of view → Opinion
● Conversation → Interview
● …
1. Identifying the Content Types
2. Labeling the Content Types
IA Fundamentals
Slide 105
Slide 105 text
IA Fundamentals
1. Identifying the Content Types
2. Labeling the Content Types
3. Defining the Content Models
Article
● Title
● Cover Image
● Author
● Date
● Place
● Body
● …
Slide 106
Slide 106 text
IA Fundamentals
1. Identifying the Content Types
2. Labeling the Content Types
3. Defining the Content Models
4. Determining the Taxonomies
Tagging & Categorisation
● Theme and Subject Area
● Region/Place of Reporting
● Type of News Event
● …
Slide 107
Slide 107 text
IA Fundamentals
1. Identifying the Content Types
2. Labeling the Content Types
3. Defining the Content Models
4. Determining the Taxonomies
5. Establishing Relationships
Relationships
● Related Personalities
● Related Opinion Piece
● Related Articles
● …
Slide 108
Slide 108 text
Why is IA important?
Thoughtful and meticulous IA has a direct impact on
● discoverability of the website on the internet
● ease of navigation and wayfinding
● ability to establish and reveal related content (content discovery)
● ability to personalise experience
● ability to monetise
● ability to syndicate content, etc…
And it also enables future possibilities in this regard.
Slide 109
Slide 109 text
Open for Questions
Thank you!
Slide 110
Slide 110 text
References
● https://www.semrush.com/blog/technical-seo/
● https://www.semrush.com/blog/semantic-html5-guide/
● https://www.semrush.com/blog/core-web-vitals/
● https://schema.org/docs/full.html
● https://json-ld.org/
● https://developers.google.com/search/docs/appearance/structured-data/search-gallery
● https://www.nngroup.com/articles/information-architecture-sitemaps/
● https://www.interaction-design.org/literature/topics/information-architecture
● https://www.nngroup.com/articles/design-systems-101/
● https://en.wikipedia.org/wiki/File:Dwarka_-_Residential_Area_-_Aerial_View_-_New_Delhi_2016-08-04_5783.JPG