User Interface (UI) Design Patterns

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.

In general, what you really, really need to learn first, because everything else comes with practice is grid typography, hierarchy, readability and some basic esthetics. But you don't really need to be an artist and design is definitely not art. It's not art because you have a very limited, you know, kind of scope of what you can do and you can't be too creative because that's going to make it unusable.

So a lot of those Dribbble shots are basically artworks and they're just not able to become a real product because they are done in a way to just kind of have like a flashy visual. So we need to understand that. But what I think is the most important thing is the grid and the layout. I often tell the junior designers what I think the UI design really is, because this whole design thing is really, really like created to feel difficult to people. Like, you know, we have those super genius UX designers talking about lengthy processes

and as a junior, we get discouraged. We get like, Oh, I'm not going to learn that ever because I'm not a super genius like they are. But in reality, a lot of the design is basically moving rectangles around. So you take a rectangle and based on some research and some knowledge, you move it to a different position, change the color, change the size, and that's it. And it's all rectangles, even if you're moving ovals because the bounding boxes are rectangular as well.

So if you learn how and why and where to move those rectangles to, you're set to go. And after two years at university, I had a very hands on experience because I could actually walk to a desk and see what people struggled with. And these were the same problems over and over, mostly great problems, some color problems and typography problems. And do you think that this font is good and I'm going to break it to you know, it's not.

So rule one off one because there is basically just one rule of good UI design. You don't want your brain to be working too much because our brains love order. They, they really, really hate chaos and they love order because it's easier for them to process. So if something is well-organized visually, it's just faster to process. So that brain is just working a little bit less. And if something is harder to process and it takes longer visually

to process, then the brain is tired and it's kind of disliking the thing already.

User Interface Design Patterns are recurring components which designers use to solve common problems in interfaces. like, for example, when we think about those regular things that often are repeating themselves to kind of appear in, you know, in complex environments We need to show things that matter to people when they matter and nothing else. Right. it's just really sad what we see. Like, for example, if you look at Sears, right? Sears is just one of the many e-commerce sites, you know, nothing groundbreaking here. So you click on one of the filters and then the entire interface freezes

and then there is a refresh and you're being scrolled up. And I always ask myself, is this really the best we can do? Is really the best kind of interface for filtering that we can come up with, or can we do it a bit better? Because we can do it a bit better. So this is a great example where you have galaxies and then galaxies, you have all this filters which are in rows. Sometimes they take three rows, sometimes four or sometimes five rows. That's okay. Show people filters, show people buttons if they important show them.

Right. But what's important here, what I really like is we do not automatically refresh. Instead, we go ahead and say, "Hey, choose asmany filters as you like", right? And then whenever you click on show results, it's only then when you actually get an update coming up in the back. Which I think is perfectly fine. You don't need to auto update all the time. And that's especially critical when you're actually talking about the mobile view. The filter. Sure, why not? Slide in, slide out, although I probably prefer accordions instead.

And you just click on show products and it's only then when you return back to the other selection of filters and only when you click okay, show all products, then you actually get to load all the products, right? Designing good UI patterns is important because it leads to a better user experience, reduces usability issues, and ultimately contributes to the success of a product or application. It's a critical aspect of user centered design and product development.

If you're starting as a designer, you don't  need a lot of colors, just as with fonts. If you're thinking, 'Okay, I have 60 million colors in that little picker, so let's try to use all of them!' that's not really the case. What you really need is a *background color*, a *foreground color* and an *accent color*. And there are some rules that you  can then look up on your own later, like the *60-30-10 rule*, which is pretty useful. But, in general, what you need to really remember from this is that you need a *background color*,  so in my case it's going to be white.

Then you need a *text color*, which is going to be some sort of black or dark gray, and the *accent color for the important actions*. And one thing that you can actually tweak here is to have that darker color instead of being pure black, add a little bit of that accent color. So, in our case, the blue to it, so it's just going to look a little bit more connected to the blue and it's just going to look better together. So, that's just one way. And you need *three colors* really to pull off most designs.

And you can start adding colors once you  feel more comfortable with them. But when you're starting, really just the less colors the better because it's just much harder that way to screw it up. Two of the worst possible color combinations  are mixing red with either very saturated blue or very saturated green. And if you look at it more closely depending on the type of screen that you have, you'll see that on the place where they kind of mix together,

that little line becomes a little bit fuzzy. If you look at it a little bit longer, it starts to hurt your eyes in some cases on some screens because this contrast of those colors works really, really bad together. So, if you want to make a Christmas app, for example, there are better ways to do it, but *generally avoid those color combinations* and *always test your colors if they're clashing that way*. So, you can just place one on top of the other and see if that fuzzy line appears on them.

And that's one way to actually test it – you know – *by eye*, just looking at it. If it looks good, then it looks good.

Learn mobile UI design from a fresh perspective. Okay, we're done playing around. This is a design language. Secrets, patterns, frameworks. Big affordances, big tappable... And also the visual of: “Is it on?” Inspiring stories based on professional experience. Don't distract them because they might get hit by a bus. Invaluable advice and portfolio building exercises. And it's based on usability. It's based on strong UX principles. Make your users happy,

learn to craft intuitive mobile user interfaces. Hey, you can click on me, that kind of thing.