I apologize in advance, it will be very hard to unsee this.
The other day I saw this example with YouTube's homepage in Twitter and still can't get over it. Truly, the less you know - the better you sleep.
YouTube search barSo there's a text field that says "Search", next to it a button with a magnifying glass so everyone understands that you can search for something with the entered text.
This isn't enough, right? You decide to add a magnifying glass icon also on the left in the active state of the text field. That is, the field expands to the left by the size of this icon with padding. Why? For what reason? Why am I seeing this on one of the most popular pages on the internet?
Let's add more:
- Why do the backgrounds of buttons with magnifying glass, microphone and others differ? Gray / Very dark / Transparent. On light theme there's only gray and transparent.
- Why does the color of the magnifying glass and microphone icons themselves differ? Microphone is white, magnifying glass isn't quite.
- Why doesn't the magnifying glass button's background change on hover like the others? This is surely the most popular button in the entire top bar. On light theme it exists.
- Why is the cross that clears the text field, in the active state of the field one pixel to the left than in the inactive state?
- Why do all these buttons on hover show tooltips at different heights even though the buttons themselves are at the same height?
I can continue endlessly. So many questions and so few answers.