WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#35943 closed defect (bug) (fixed)

Site Icon: refine the new UI introduced in 4.5

Reported by: celloexpressions Owned by: obenland
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.6
Component: Customize Keywords: has-patch has-screenshots
Focuses: ui Cc:

Description

[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.

Attachments (6)

35943.diff (2.7 KB) - added by celloexpressions 4 years ago.
Clean up the new site icon control preview to take up less space, reduce visual clutter, and be more consistent with customizer UI conventions.
35943.before.PNG (49.2 KB) - added by celloexpressions 4 years ago.
35943.after.PNG (43.2 KB) - added by celloexpressions 4 years ago.
With 35943.diff.
35943.after-mobile.PNG (43.4 KB) - added by celloexpressions 4 years ago.
35943.1.diff (2.8 KB) - added by obenland 4 years ago.
after-diff-1.png (42.5 KB) - added by obenland 4 years ago.

Download all attachments as: .zip

Change History (20)

@celloexpressions
4 years ago

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

#1 @celloexpressions
4 years ago

  • Keywords has-patch has-screenshots added; needs-patch removed

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.

This ticket was mentioned in Slack in #core by adamsilverstein. View the logs.


4 years ago

This ticket was mentioned in Slack in #core by celloexpressions. View the logs.


4 years ago

#4 @mikeschroder
4 years ago

  • Owner set to melchoyce
  • Status changed from new to assigned

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.

#5 follow-up: @Kelderic
4 years ago

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 (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.

Last edited 4 years ago by Kelderic (previous) (diff)

#6 in reply to: ↑ 5 @obenland
4 years ago

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).

#7 @celloexpressions
4 years ago

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.

@obenland
4 years ago

@obenland
4 years ago

#8 @melchoyce
4 years ago

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

#9 follow-up: @celloexpressions
4 years ago

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?

#10 in reply to: ↑ 9 @melchoyce
4 years ago

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?

#11 @melchoyce
4 years ago

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

#12 @obenland
4 years ago

  • Owner changed from melchoyce to obenland
  • Status changed from assigned to accepted

#13 @obenland
4 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


4 years ago

Note: See TracTickets for help on using tickets.