I created a simple user flow to represent my experience on the YouTube website.

UX Patterns and Flows in Action

A reflection on YouTube design patterns and user flows from the perspective of a frequent user.

Nicole Tanoue
Quick Design
Published in
4 min readJun 2, 2019

--

YouTube is one of the websites and mobile apps I use almost every day. This isn’t anything new for me since I have been using the site since I was in middle school, searching for the hottest new music videos or comedy sketches. Today, I use YouTube for everything from entertainment to education and even used it frequently in my previous job to host my webinar recordings. The platform has immense money-making power for “influencers” who make fortunes by sharing makeup tips, how-to-guides, celebrity gossip, recipes, and more. Brands use YouTube to engage with their audiences, musicians post their music videos and amass hundreds of millions of views. Advertisers reach consumers through banner ads and video ads that play before the featured video. The possibilities are truly endless.

As an everyday user, I will attempt to describe the design patterns and user flow from my experience. There is so much more the platform can do, so this post aims to explore the experience of a casual user.

Design Patterns

There is something to be said about the usability of YouTube. I can’t remember a time where the site was not intuitive from the time that I first started browsing for music videos. Even with advertisements, it’s never difficult to find the content I need.

The search bar on YouTube home page

Search

The search function is HUGE for YouTube. That is why the search bar appears at the very top of every single page. Even if you are currently watching a video, you can easily access the search bar from the same place — the top of the screen.

Automatic suggestions on the YouTube website search bar

When using the search function on a desktop view, suggestions automatically populate when a user clicks starts typing into the search bar. In this example to the right, you can see that when I type in “Tiny,” suggestions for what I might be searching for appear.

The search function is different on the YouTube mobile app. When you click into the search bar, the user’s most recent views appear rather than suggestions. This may have to do with the fact that on the mobile app, the typical user would want to watch the same video more than once.

The navigation bar at the left allows for browsing without affecting the feed

Navigation

The navigation bar on YouTube exists on the left-hand side of the page. The user can scroll through the menu on the left without scrolling through the rest of the video content on the main part of the page. This allows me to browse through other topics, playlists, or channels I’m subscribed to without losing my place on the main feed. The navigation bar is also separated into different categories: the main menu, subscriptions, more from YouTube, etc. When you click on the hamburger menu on the top left corner (to the left of the YouTube logo), the menu on the left-hand side of the page collapses, and the feed takes up the entire page. The flexibility to remove the menu is great for people who would rather browse the feed than look at their subscriptions.

On the mobile app, the navigation bar is at the bottom of the screen. The use of icons along with icon labels makes the navigation both usable and accessible for the everyday user.

While the navigation design patterns are different on desktop vs. mobile, both are very intuitive to use. I typically use the desktop version since I like to watch videos in a larger format, so I am more comfortable with the sidebar navigation overall. However, if I were to use the app without ever having visited the website, I predict that I would still be able to easily use it.

My Typical User Flows

For the purpose of analyzing my typical user flow, I will be explaining my experience of using the YouTube website on desktop.

When I visit the YouTube website, I either have a specific video in mind and use the search bar to find it, or I want to browse the suggested videos in the feed.

User flows for the goal of watching a specific video and for the goal of browsing for videos to watch

--

--