Opened 4 weeks ago
Last modified 3 days ago
#65083 accepted enhancement
Toolbar: Simplify profile item by removing "Howdy, <UserName>" text and using a circular avatar
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Toolbar | Keywords: | has-patch needs-design-feedback |
| Focuses: | ui, accessibility, css, administration | Cc: |
Description
Problem / Current Behavior
The profile item in the Admin Bar currently displays "Howdy, {Display Name}" alongside a small (18×18 px) square avatar. This has three problems:
- Space waste. The entire "Howdy, {Display Name}" string — both the greeting and the username — consumes significant horizontal space in the Toolbar without providing actionable information. The user already knows who they are. On narrower viewports or when plugins add their own Toolbar items, this width contributes to overflow and wrapping issues (see #28983, #53933).
- Inconsistent icon shape. Every other icon in the Toolbar is round or icon-shaped. The square avatar is visually inconsistent with the rest of the Toolbar.
- Inconsistent icon size. The 18×18 px avatar is smaller than the 20×20 px icons used throughout the Toolbar, making it an outlier.
Proposed Enhancement
Three changes to the my-account Toolbar node:
- Remove the entire "Howdy, {Display Name}" text — both the greeting and the username — from the top-level Toolbar item. The profile menu should display only the avatar icon, with no accompanying text. The user's display name is already shown inside the dropdown (
user-infonode) and remains in the ARIA label, so no information is lost. - Change the avatar shape from square to circle, aligning it visually with the rounded icons used elsewhere in the Toolbar.
- Increase the avatar size from 18 px to 20 px to match the standard Toolbar icon dimensions.
Rationale
- Horizontal space is the Toolbar's scarcest resource. Plugins (Yoast SEO, W3 Total Cache, WooCommerce, etc.) routinely add items to the Toolbar. The "Howdy, {Display Name}" text can be 150–250 px wide depending on the display name length. Reclaiming that space directly mitigates the wrapping/overlap bugs described in #28983 and #53933.
- Modern convention. Most web applications (GitHub, GitLab, Slack, Google Workspace) represent the logged-in user as an avatar-only circular icon in the top bar. Users are well-trained to recognize this pattern.
- Visual consistency. A 20 px circular avatar aligns with the 20×20 px icons used throughout the Toolbar, eliminating the current size and shape mismatch.
- Better handled at the Core level. While all three changes can be achieved individually through hooks and filters (
admin_bar_menu,get_avatar,wp_enqueue_style), this is a baseline UX improvement that benefits all users. Requiring every site to independently replicate the same set of overrides to fix a visual inconsistency and reclaim wasted space suggests the default itself should change.
Backward Compatibility
This change is purely visual:
- The
my-accountnode ID, parent, href, and dropdown structure remain unchanged. - The ARIA label (
menu_title) continues to include the display name, so accessibility is preserved. - Plugins that modify the "Howdy, {Display Name}" text via
admin_bar_menuorgettextwill find an empty string for the text portion — no errors, no breakage. - Themes or plugins that rely on
.with-avatarCSS selectors will still work; only theimgdimensions andborder-radiuschange. - The avatar continues to link to the user's profile page.
Accessibility
- The
menu_titlemeta (used asaria-label) must retain the user's display name so screen readers announce "Account menu for {Display Name}" or equivalent. - Removing the visible text does not reduce accessibility because the avatar serves as the visual affordance and the ARIA label provides the semantic label.
- A circular 20 px avatar at the standard Toolbar icon size meets WCAG 2.1 target size guidelines.
- No keyboard navigation changes are involved.
Related Tickets
Attachments (5)
Change History (14)
#1
@
4 weeks ago
- Keywords has-patch needs-design-feedback added; needs-patch needs-design removed
- Owner set to audrasjb
- Status changed from new to accepted
Hello @lucasmdo,
I agree with this proposal.
I wrote a tiny Feature Plugin so we can iterate on the design before proposing a Core changeset.
The ZIP is available below.
Notes:
- I didn't use a rounded avatar picture as it appeared it was better to maximize the image dimension. I suggest to use a square image instead. Let's iterate on this.
#2
@
4 weeks ago
Note that the avatar might not be displayed at all, depending on the configuration under Settings → Discussion.
- There is a setting to turn off avatars entirely.
- Even if avatars are enabled, users without a custom avatar will get a default avatar, which (depending on settings) might just be a generic logo or even completely blank.
#4
follow-up:
↓ 6
@
4 weeks ago
"There is a setting to turn off avatars entirely."
Thanks for the clarification, @siliconforks . I didn't know that. Where can I find this setting?
"users without a custom avatar will get a default avatar"
In terms of having a generic avatar, this is completely fine. It's the same use case when a site doesn't have a site icon, right?
@
4 weeks ago
These are the avatar-related settings. The current default avatar is "Mystery Person", which just displays the same avatar for all users without their own avatar.
#6
in reply to:
↑ 4
;
follow-up:
↓ 8
@
4 weeks ago
Replying to lucasmdo:
"There is a setting to turn off avatars entirely."
Thanks for the clarification, @siliconforks . I didn't know that. Where can I find this setting?
All the avatar-related settings are under Settings → Discussion. The "Show Avatars" checkbox can be used to turn avatars off entirely; the "Default Avatar" setting can be used to customize what sort of avatar is shown for users without their own avatar. See the above screenshot.
"users without a custom avatar will get a default avatar"
In terms of having a generic avatar, this is completely fine. It's the same use case when a site doesn't have a site icon, right?
If the "Howdy, <UserName>" text is removed, there may be no indication of who the current logged-in user is.
#7
@
4 weeks ago
Howdy @lucasmdo and welcome to trac!
Howdy has a long tradition of being in WordPress. It's a part of the flavor of WordPress. It helps set the tone and humanizes the experience of using WordPress.This WordCamp talk from a committer emeritus lays out why it's valuable and thus should absolutly stay. It's also something that a number of localizations get to have some fun with to really make WordPress feel at home. Howzit, G'day, and Ahoy all help users feel at home inside WordPress.
No strong opinion on the avatar changes.
#8
in reply to:
↑ 6
@
4 weeks ago
Replying to siliconforks:
Replying to lucasmdo:
"There is a setting to turn off avatars entirely."
Thanks for the clarification, @siliconforks . I didn't know that. Where can I find this setting?
All the avatar-related settings are under Settings → Discussion. The "Show Avatars" checkbox can be used to turn avatars off entirely; the "Default Avatar" setting can be used to customize what sort of avatar is shown for users without their own avatar. See the above screenshot.
"users without a custom avatar will get a default avatar"
In terms of having a generic avatar, this is completely fine. It's the same use case when a site doesn't have a site icon, right?
If the "Howdy, <UserName>" text is removed, there may be no indication of who the current logged-in user is.
We can think of placing the "Howdy, <UserName>" in another important area of the product, like in the Dashboard page. The current scenario creates a disparity between Mobile and Desktop. On Mobile, we don't have the width for this copy. Adding the "Howdy, <UserName>" on the Dashboard page can work on both mobile and desktop for example, helping to "... set the tone and humanize the experience of using WordPress." cc: @jorbin
In terms of priorities, I think the width limitation and plugin installations are very important.
WDYT?
#9
@
3 days ago
Howdy has a long tradition of being in WordPress. It's a part of the flavor of WordPress. It helps set the tone and humanizes the experience of using WordPress.This WordCamp talk from a committer emeritus lays out why it's valuable and thus should absolutly stay. It's also something that a number of localizations get to have some fun with to really make WordPress feel at home. Howzit, G'day, and Ahoy all help users feel at home inside WordPress.
This is a solid comment, and I'd like to respond to it. Because I think it's pretty critical that this aspect be addressed head-on. If we lose the flavor, or "character" of WordPress, we lose something special, we don't want that.
Where I agree with the direction of this issue, however, is that it shouldn't stay in the toolbar where it is today. It should move into places where that character has a chance to shine and actually be meaningful.
The thing is, the adminbar is a permanent fixture; it's like the app-bar at the top of MacOS: logo in the top left, menu items next to it, widgets on the right. It is prime real-estate, the most important part of your screen, because it is always there. Howdy is not a good fit there, just like the username itself isn't, because it takes up a lot of horisontal space that is more meaningfully leveraged by plugins, or future WordPress core features such as notifications or improved help. It also doesn't belong there because through always being there, instead of being a moment of character, we are actively diluting that character.
Where "Howdy [username]" would be meaningful, however, could be in the menu that opened as soon as you click or hover the avatar. Simply moving it inside the menu, for me, bridges the gap. It's there when you are likely to engage with it, but it isn't permanently reserving key real-estate.
I would go on to add, it feels like an obvious phrase to open WordPress itself with: instead of the dashboard having a plain "Dashboard" title, say "Howdy Lucas" there.
Those are crucial moments where the user is in a mindset to absorb and appreciate the character.
What do you think?
Before-and-after