Site Icon: refine the new UI introduced in 4.5

[celloexpressions]

[36698] introduced a new UI for the site icon control (which should've probably had its own ticket in the first place). This got somewhat lost in the shuffle there, and could use a closer look in terms of UI.

A few specific things I notice at a glance:

• There is too much vertical space between the favicon and app icon previews - this implies that there's a different control here. We need to look at the hierarchy of vertical spacing between controls vs. within controls in this section.
• There is an opportunity to potentially take up significantly less vertical space by moving the app icon next to the favicon preview. There's plenty of room for the icons, the only thing that's a bit tight are the labels for each, but I'm not convinced that they're necessary in this context. This is a preview-at-a-glance, the full preview is provided within the media modal (and also in the browser's UI).
• The hierarchy of the preview label text seems a bit off. Because the font size isn't very distinct, it may be better to remove the bold, to reduce visual confusion with control labels.
• It may be something else, but the live updating of the browser favicon seems to have stopped working. Let's look at whether that was caused here.

[celloexpressions]

Clean up the new site icon control preview to take up less space, reduce visual clutter, and be more consistent with customizer UI conventions.

[celloexpressions]

With 35943.diff​.

[celloexpressions]

35943.diff​ seems to resolve most of the issues. I found that moving the app preview next to the browser preview makes the most sense in this context, and the labels for each preview can be removed as the purpose is somewhat implicit. The explicit labels make more sense with the more detailed, vertical arrangement found in the media modal. The patch also cleans up the new control template a bit. See above screenshots for before/after.

[kirasong]

Assigning to @melchoyce to get UI/UX review and approval.

@melchoyce, free to reassign when it's looking ready if you'd prefer that someone else handle the commit.

[Kelderic]

The only worry I have about this from a US perspective is that a lot of users are going to get confused by the two images (image as favicon and image as app icon) beside each other with no labels. It never fails that when I run tests, people have no idea what an "App Icon" is, just from that phrase.

It might help if we standardized the images. The first one is a zoomed out screenshot, showing the icon in it's used place (with the browser tabs about it, very clear). The second just shows the icon. What if the second showed a screenshot of a smartphone screen, with the icon being front and center, and then just slivers of the other ones. It would help with clarity of what an App Icon is, I think.

[obenland]

Replying to Kelderic:

The only worry I have about this from a UI perspective is that a lot of users are going to get confused by the two images […] beside each other with no labels.

I had the same thought. I wonder if we should just keep the labels around (minus their prepositions).

[celloexpressions]

Considering that a lot of users don't have a strong understanding of what a browser is, I don't think that using that word as text alongside the image adds a lot of clarity. When looking at a summary view of the site icon, the most important thing is to see what image is currently selected, with some context if possible. Before an image is first selected, this UI isn't shown at all, so I don't think we can rely on it heavily to distinguish between site icon and custom logo or convey meaning in a detailed way.

[melchoyce]

How would a longer translation look? Worried about text wrapping awkwardly.

[celloexpressions]

Translations definitely wouldn't fit as nicely. I also think the bold text is too similar to the control title style; leaving it unbolded, but not italicized and the description font size might give a more appropriate hierarchy.

We also explicitly say "browser icon and icon" in the description above the images. Do we need to explicitly label which is which here or can the preview's purpose be adequately understood from the control description?

[melchoyce]

Replying to celloexpressions:

We also explicitly say "browser icon and icon" in the description above the images. Do we need to explicitly label which is which here or can the preview's purpose be adequately understood from the control description?

This is a good point. Let's go without the additional labels.

Is 35943.diff​ still up-to-date?

[melchoyce]

Tested 35943.diff​ alongside #35942. Everything applied and it looks good to go. @obenland can I assign this to you for commit?

[obenland]

In 36907:

Customize: Reduce vertical space of site icon control.

Makes the control easier to find, reduces visual clutter, and is more
consistent with Customizer UI conventions.

Props celloexpressions.
Fixes #35943.