Hi. Welcome to this UX Daily Video. My name is Priscilla Esser, and I will show you how YouTube has used design patterns on their website. YouTube is the 2nd-most visited website, only behind Google in terms of average number of unique monthly visitors. One billion people visit YouTube every month. To help users navigate the site and quickly locate the desired videos, a number of different user interface design patterns have been used.
User interface design patterns are the visible and interactive elements within the display that allow users to carry out their activities with speed and accuracy. With such an enormous number of visitors, the YouTube design must satisfy *all* users whether they are experienced or newcomers to the site. Using unfamiliar interactive elements could confuse the user and cause abandonments. Therefore, the YouTube design makes use of many design patterns familiar to most users which represent tried-and-tested methods of interaction, navigation and data entry.
Let's start with the basics – the page structure. On the homepage, you can see the structure that YouTube uses throughout most of the pages. It consists of a horizontal top bar with the homepage logo and the search box. Also, there's a vertical bar on the left-hand side which provides the global navigation opportunities. At center stage, the most important selection of content is displayed. This attracts the most attention, whereas the other parts are only supportive to that. The center stage area has titled sections which consist of categories of videos placed in a horizontal manner.
The user only sees four for each category and has the opportunity to scroll further using the arrows on the side. This is an example of the slideshow design pattern. This layout with a horizontal top bar, the vertical sidebar and center stage combines into the visual framework that is used throughout the entire website. This is complemented with the use of color and typography, which makes some bits stand out more than others. For example, it's clear that currently the homepage is selected.
Also, YouTube wants to encourage users to subscribe. Both of these elements have been visualized with a red area and crisp white text similar to the YouTube logo. When navigating to the Creator Studio, we can see that the visual framework is still maintained – although the appearance of center stage has changed somewhat. Here, they allow users to *personalize* the center stage area by moving the blocks of content around. Although it's not quite similar to the movable pieces design pattern, it does take advantage of some of its effects.
When looking at the way YouTube organizes its content, we can conclude that they decided against a few design patterns that could have had some benefits for them. For example, they don't use the big seductive slideshows you might know from other websites to inspire users to watch a certain category of videos, and they don't use pagination to chop up search results into manageable chunks. What they do use are navigation tabs, and actually they use them as a backup for their global navigation and sidebar. The navigation tabs are located at the top of the center-stage area. They consist of three tabs.
And to indicate which tab is active, rather than opting for the traditional visual representation of the tab, YouTube has chosen to use bold letter typing and a red underline. When investigating design patterns that support fluid navigation, we can find, of course, the global navigation that we talked about earlier. The most important design pattern may be the search box, as it is likely that users will be searching for a specific topic. However, the search box is not placed and visualized as prominently as some other websites do.
Since the content on the YouTube website isn't ordered in multiple layers of categories, chances are that users will not need breadcrumbs to find their way back in the hierarchy of the contents. And, unsurprisingly, they *haven't* used the pattern in their design. A pattern that could be useful for that target group, though, is a *tag cloud*. Users often use the website to browse and get inspired by what other people consider to be interesting or entertaining videos. A tag cloud would allow the user to find the most popular subjects easily from a visual layout.
However, YouTube has chosen to use categories of videos in a slideshow to do this more efficiently. Zooming in on the search box, we find the design pattern of *autocomplete*. This design pattern makes searching faster, easier and possibly more inspiring. After entering a search term, the user can refine their search results by filtering on upload time, type of match, duration of the video and file features. They can also sort the results based on relevance, upload date, view count and rating, making it even faster and easier to find what the user is looking for.
For YouTube, the social aspects are very important. To support social interaction among users, they allow them to rate a video based on the easy thumbs-up/ thumbs-down method. This is a pattern that is becoming increasingly popular and is an alternative to the start/ refuse design pattern. Its main advantage is the ease with which the rating is given. Users no longer have to think carefully if something is worth two or three stars. They simply decide if they have enjoyed watching the video or not.
These ratings and the number of views also serve as *achievements* – a design pattern that encourages the user to contribute even more and strive to be better. YouTube further uses leaderboards to encourage users to participate and engage with the platform. In this overview, they give the best videos within a certain category – for example, music, sports or gaming. What they don't indicate is how they *select* the best videos. But you could imagine that the ones with the most thumbs up would be considered best. Finally, YouTube keeps you updated with all social interactions that are going on in your account
by providing you with *update alerts*. Here, they encourage you to subscribe to specific channels so they can keep you updated on any activities. You may expect another design pattern to pop up – the sign-in reminder – once you decide to subscribe to a channel, as you will need to sign in to see your channels and recommendations. A small preview of such a reminder is already given below the leaderboard. As it's an extremely popular but free service, you may expect to find an
abundance of dark patterns to coerce you – to increase their revenues. One dark pattern that I would like to highlight here is very specific to the services that YouTube offers. It shows you how they carefully select when and where to use a dark pattern to strike the right balance and not turn users off. The automatic opt-in pattern is described by the sentence: "By submitting your videos on YouTube you acknowledge that you agree to YouTube's Terms of Service and Community Guidelines." And here, you can also see how regular users can only upload videos of 15 minutes or less.
If you want to upload longer videos, you must leave your contact details. They explain how this helps them keep that platform secure. And they suggest that they won't do anything bad with your information – like selling it to a third party. But it is still a nifty little trick to get you to become less anonymous to them. Remember that YouTube is a Google company. So, in effect, you will be giving your contact details to Google.
In this video, we've taken a closer look at the YouTube platform and have identified some design patterns that they've used to improve the user experience. We've seen a visual framework with center stage pattern and titled sections. We've seen how the dashboard allows customization with elements that resemble movable pieces. We've pointed out the global navigation and navigation tabs as well as the search box. Social interaction is stimulated with thumbs up and down and comments below each video. The designers have taken care not to use too many dark patterns. We showed you how they use the automatic opt-in for the terms and agreements.
But you will probably be able to find some more. The take-away from analyzing all of the different design patterns that are used in a single website is that *everything is connected to everything*. You cannot consider any design pattern on its own, but you have to realize that it's related to other patterns. For example, the search box is merged with the autocomplete and a refined search pattern. This way, all of the good properties of each design pattern can strengthen each other
and will help you create the best user experience for your designs.