Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Breaking News on the Web

Breaking News on the Web

This mentorship session was delivered to a cohort of news startups from the APAC region.

Souvik Das Gupta

May 03, 2024
Tweet

More Decks by Souvik Das Gupta

Other Decks in Design

Transcript

  1. Breaking News on the Web Tips and Suggestions for Modern

    News Sites Lighthouse Mentorship Session 3rd May 2024
  2. 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.
  3. 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?
  4. 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
  5. The website content is the product Your visitors are here

    for your content. Your website user experience revolves around the reading experience.
  6. The website content is the product It’s unfortunate that web

    browsers have had to compensate for poor reading experience by introducing “Reader Views”
  7. 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. 😶 😶 😶
  8. 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.
  9. 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. …
  10. 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
  11. Embrace User Diversity 1. User Intent ◦ High vs Low

    ◦ Macro vs Micro High Intent Low Intent Micro Content Macro Content
  12. 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
  13. Embrace User Diversity 1. User Intent ◦ High vs Low

    ◦ Macro vs Micro 2. User Behaviour
  14. 1. User Intent ◦ High vs Low ◦ Macro vs

    Micro 2. User Behaviour ◦ Skimming Embrace User Diversity
  15. 1. User Intent ◦ High vs Low ◦ Macro vs

    Micro 2. User Behaviour ◦ Skimming ◦ Impatience Embrace User Diversity
  16. 1. User Intent ◦ High vs Low ◦ Macro vs

    Micro 2. User Behaviour ◦ Skimming ◦ Impatience Embrace User Diversity
  17. Embrace User Diversity 1. User Intent ◦ High vs Low

    ◦ Macro vs Micro 2. User Behaviour ◦ Skimming ◦ Impatience ◦ Not a keen reader
  18. 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
  19. 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
  20. Ads are Good • Good revenue source • Easy to

    integrate • Offer value to users if they find the ad relatable/useful
  21. 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
  22. Ads are Ugly • If they dominate the core content

    • If they are highly intrusive
  23. Ads are Ugly • If they dominate the core content

    • If they are highly intrusive • If they take over the page
  24. 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”
  25. 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
  26. 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 😶 😶
  27. 1. Clearly demarcate ads from the core content 2. Fewer

    big ads are better than many small ones Recommendations for Ads
  28. 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
  29. 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)
  30. 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)
  31. 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 ❌
  32. 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…
  33. 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…
  34. 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…
  35. 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…
  36. Placement • At a prominent place on the header •

    Close to or right after value realisation (end of an article)
  37. • 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
  38. Appearance • Sufficiently stand out from the rest of the

    content • High-contrast button • Follow branding guidelines
  39. 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”
  40. 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)
  41. 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”
  42. 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”
  43. 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”
  44. Great designs • May gradually lose charm • Might go

    out of fashion • Is subjective • Has a limited visibility and impact
  45. 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?
  46. Design System • Helps scale while maintaining UX quality •

    Separation of concerns between design and content teams • Helps speed up new feature rollouts
  47. Design System • Helps in the website being learnable for

    the users • Helps in a strong brand (+website) recognition
  48. Balances several (and often contradictory) needs— • content • performance

    • CTAs guidance • voice and tone • and more https://design.theguardian.com/ Design System
  49. 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.
  50. 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.
  51. 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.)
  52. 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
  53. 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
  54. 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.
  55. 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.
  56. 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.
  57. 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.
  58. 1. Identifying the Content Types IA Fundamentals • Common Stories

    • Live updating article • Seminal Piece • Analyse a product • Our point of view • Conversation • …
  59. • 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
  60. 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 • …
  61. 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 • …
  62. 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 • …
  63. 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.
  64. 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