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