User Pathing and the Wonders of The Transporter
Please don’t show me your footers…
I’ve always been fascinated by editorial design, specially since I made it into UX and even more so, after starting at a best-of-class design agency, Code and Theory, where editorial design is like that child you love the most. It was at work that I was introduced to the metaphor used to measure content consumption, the Bite vs Snack vs Meal comparison and how side-door entry was driving content snacking — People coming into the page following a link direct to a piece of content, reading something that would take them 3–5 minutes before leaving the site and going back to scrolling through their feeds.
In the past couple of years, we’ve seen how this phenomenon has become the standard thanks to social media’s influence on how people consume content. Your friends and family are sharing more and more posts that are direct-to-content rather than a homepage like we used to 5-10 years ago.
Side-door entry and content snacking can become a problem for your site’s metrics if they’re not handled properly. Users might land on a page looking for something they know is here but don’t find the means to locate it, get bored quickly by flat, unrelated content (don’t get me started on devil-spawned Taboola) or just leave your site as they reach the footer. A properly designed navigation and engaging content types are the a cure for the first two, but today I’ll leave to one side the more common pathing strategies and focus on preaching my favorite expression of end-of-page user recirculation, article infinite-scroll, “playing catch with the footer” or, as we refer to it at Code And Theory (and now its client’s teams), the Transporter.
Defining what a transporter is is pretty simple, and once I tell you about it, you’ll realize you’ve already seen it in use on articles around the web, or feel like it’s the most common-sensical thing you’ve heard about in ages. I’d explain it as: The mechanism by which a user is frictionlessly taken from the end of one page to the start of another by means of a continuous scrolling action.
Transporters Hall Of Fame
I know you’ve seen them around but in case you haven’t, here’s a list of examples of sites that use the transporter and what they do:
1 Mashable
- Transports users once from article to related video. If Ad Block is on, transports to the next most relevant article.
- Originally used taxonomical relationships to take you from article to the related section and article to related article.
- With Quartz.com, one of the first instances of the Transporter
- Resulted in a 200% pageview increase, although official numbers were never published.
- Much famed and critiqued Bloomberg.com 2015 redesign transported users once from article to article
- Surfaced content based on taxonomy assuming what readers wanted to read next.
- In continuous iteration and already changed multiple times. Renamed “The Boomerang”, one of it’s most famous iterations brought users up to the content’s section.
3. Vogue
- Adds a twist to the article-to-article transporter by showing a “Related” content package between the two articles.
- Gives users a more hand’s on approach, allowing them to choose to opt out of the infinite scroll.
4. Forbes
- Transports article to article. Used to have a related content section between them.
- Uses a “Reading list” sidebar to indicate when will come next and allow users to click to that related content directly.
- Does continuous article to article but the articles that follow are all truncated (use the “Read More” button to show less).
- Article truncation allows users to skim through more headlines before choosing what to read next.
- Love the simplicity of this one. From any video, a user scrolls down back to the home page.
- From the outside, it seems like there’s no algorithm to worry about, just give the users a view of your breadth of content and let them choose where to next.
7. The Outline
- Ever-changing, this site takes you from an article into a mix of full-screen ads and truncated.
- In the past, they’ve transported users to a related content card system array which led to a list of truncated articles; again, allowing users to click out of the current path or continue discovering content via scroll.
- The Outline, as we all should, tests out and tries new recirculation variations in the search for that sweet spot.
8. NBC News Verticals (Mach, Better, Think)
- Currently transports users from an article back into the front page it taxonomically belongs to:
————— Article ➡ Subsection Front ️️ ➡ ️ Section Front - Very proud of this project since I worked on it for whole year. Full site redesign coming soon, we’re studying more complex but meaningful ways to transport users.
- Navigation on this page changes based on the page you’re on after transporting. Super nice!
There’s countless implementations of this paradigm and once you’ve seen it, you cannot unsee it…
I do, we do, you do…
As a first-timer in the news space, designing the experience of an editorial product shows you how different each industry can be and how we need to adapt everything we know and have learned into designing for publishers. I’ve been thinking about these concepts lately and have two subjects I come back to when approaching a transporter:
1. Transporter Behavior
Designing a transporter should not be as simple as loading the next article in the series. I know that’s where it started at but at that point in time it was only a proof of concept. Now that we know it works, we should analyze which variables factor into how the logic will unwind, but I mainly would suggest asking yourself three questions:
- Where’s the user coming from?
- What is the user looking at?
- Where’s the user going to land?
These three pieces of information will jumpstart the thought process behind your logic, the rest follows naturally. Asking yourself about these triggers will let you identify what the user sees next and you’ll base it on what they’re looking at now and what the saw before that. They will help you think about what happens when the user arrives at a page from the home page vs. what they’ll see next if they come straight from a link posted on Twitter. More importantly, they will help you tell the right story, serving content that will be of the user’s interest based on what we know about them, creating a more compelling experience and, of course, making them come back for more of that remarkable content you’re delivering. 😏
2. Applying lessons from the past
Using your past experiences to inspire the products you design is probably the most valuable thing you’re bringing to the table as a UX designer. Your first attempt at designing a transporter should look pretty differently from your second, third… User data will help understand where you’re meeting business goals and where you’re not.
A perfect example of this is, again, Bloomberg Media. Even though the business publisher reached their pageview goal with flying colors, they noticed a dramatic decrease in homepage hits. To solve this, they have changed their transporter logic and now serve the vertical home page after each article. Their product team says that since the new version was released as a test on their technology vertical, they have seen a 28% increase in the number of pages viewed per visit.
“Yeah but I don’t design editorial sites,” you say?
Are you sure you don’t? Here are some examples of editorial sites you might have done and -like I did before- didn’t consider editorial:
- Kids content pages
- Video-based sites
- Blogs
- Music playlist sites
- Personal online portfolios
- Photography sites
There’s more than that, you know? But ok, I understand it’s not every day you have the chance to be involved in an editorial design endeavor. However, you can still apply this to many other kinds of projects where the user benefits from either being served more information or being taken to where that information is…
The example that most violently comes to mind is e-commerce; where a user’s exploration and research micro-journey usually ends at the bottom of a product detail page. When serving related products isn’t enough, transporting them back to a higher level could be beneficial.
Imagine I’m looking for a new portal gun and land on a page with all the portal gun stock catalog. I browse and decide to click on a Rick Sanchez model, so I’m taken to the Rick Sanchez Portal Gun detail page. However, I scroll past the product details, a sign that I’m not finding the portal gun that fits my needs or that I am still to be convinced, so the page transports me back to the portal gun catalog as I continue to scroll. Seamless interdimensional transportation.
Other examples of sites you can use a transporter on can be listings pages, (design, photography or any kind of) portfolios, wikis… More than you think!
So please, help your project’s engagement and allow users to discover more of your amazing content. Be Kind, Recirculate.
✨
Note: This article will not transport you anywhere against the will of the author.
Rafa Torres is a New York Alien that designs experiences at Code And Theory and Teaches UX at NYU and General Assembly. He feels super weird about himself in the third person… Visit Rafa.work for more.
😬
