A nitpick about YouTube’s Save to Playlist dialog box in Mobile…
Does the “Done” button ever bother you ?
Now I know, who am I to judge and correct YouTube’s UI/UX choices ? I’m just a kid who’s been in the UI/UX field for 8 months and clearly, I should know better to go up against Google, the almighty.
This is in no way a complaint. This is just a small “differentiation” flaw that I noticed on YouTube’s Save To Playlist dialog box on Mobile. Observe the screenshot below:
Now, the first time that I saw this, I got a little confused when I tried to get rid of this dialog box and realized that the “Done” button is quite similar to the list of playlists presented above it, apart from the use of icons in both.
I slowly learnt, throughout these 8 months as a UI/UX engineering trainee, that visual separation and visual differentiation in any application is very crucial because this is how you’ll convince a human that two or more elements are different and are separate from one another.
Visual Separation
The separation of elements or using something visually to divide one or more independent sections
If you were to take the screenshot (of YouTube) as an example, Visual separation within the dialog box is very much present.
For example, you know that the header which says “Save video to…” is the header section and the middle portion of the dialog box represents the list of playlists you have created. Furthermore, the last row of the dialog with the “Done” button is also separated to show the user that this is also another independent section.
All this is done with a simple visual divider known as a border. The grey borders are the dividers of the three sections presented.
Visual Differentiation
The use of some visual detail, such as color, to show the difference between one or more independent sections or elements.
What about visual differentiation ? How can the naked eye distinguish the differences between the 3 sections in the dialog box ?
If you were to quickly inspect the dialog box when it first pops up, at first glance, your instincts would tell you that the first row is always the header. Furthermore, the “New Playlist” option is given more attention with it’s color and this will add a distinguishing feature for the header section as well.
Your main focus would also go to the middle row of the dialog box since this is where the list of playlists, where you need to save your video to, is presented. This is also differentiated with the checkbox icons that are presented before the title of the playlist.
But what about the last portion of the dialog box ?
In my view, I first thought that this was a playlist (Yes, I know I’m dumb and I should have read the word “Done”).
As a user, sometimes you can predict what will happen if you were to provide an action. For example, I knew that if I were to tap on the checkbox, it would show me, with a tick, that I have saved the video to the playlist that I selected.
The thought of knowing that a tick would show up tricked me into thinking that I already saved this video on a playlist because I saw a tick on the last row of the dialog box, even though, the checkbox and the tick icons are completely different from one another.
So how can we improve this ?
Lets apply visual details
In my opinion, its best to show the user that the playlist section is different from the button and for this, we can make use of colors.
With the current state, it looks as if the two are one and it can trick the user into thinking that the word with the tick is also a playlist.
Maybe this is all in my head and maybe I’m too stupid enough to differentiate the two (Man ! I said differentiate a lot in this post) but sometimes, the way things are presented to the user can be tricky.
So how can we improve this ? This is not a solid way to handle this but it’s a silly attempt by an amateur to help solve the issue at hand.
The Minimal Approach
The minimal approach is the use of colored text. Nothing more. The colors that I used are strictly material and they do provide some form of visual differentiation.
At first glance, the user would know the last row is, in fact, a button because we have used some form of color to bring more life to a button that was similar to the rest of the elements within the dialog box.
This approach also matches the theme and the direction of the application. YouTube is more minimal and it uses a minimal theme. More emphasis is given to a more lighter look rather than heavy elements, icons or colors. So this really fits the style of the application.
The More Drastic Approach
The drastic approach (Not my favorite) is the use of a background color.
The use of a background color on the button can really inform the user that the last row is, in fact, a button that is clickable.
When you first look at the dialog box, your attention would immediately go to the area that has more visual weight. This can be a disadvantage when using an approach like this because it provides some interference when you look at the dialog box and your eyes would be more fixated on the area with more color. (It’s not a good style that would go with our dear old minimal YouTube either)
But aside from the point above, it really provides a unique feature to the button that really distinguishes it from the rest.
So…the conclusion
I know the solutions that I provided are not the best way to handle this. Maybe there is a better way and I’m sure in a couple of months, or maybe even days, YouTube will probably change it’s UI again and with this, the dialog box will eventually change to.
But for the meantime, I just wanted to focus on this small flaw that I observed and to provide a solution that I thought was best.
I’m still an amateur in this game of UI/UX so it would mean a lot if you could criticize the approach that I took to solve this “nitpick issue”.
Feedback would be very much appreciated because it would help me to improve my UI design and my approach towards handling the UX aspects.
Clap if this story was insightful.
Drop a comment for with your feedback and suggestions.
Follow for more stories.
Thank you!
