Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.42k stars 1.99k forks source link

Help Center Lacks Clear Option to Open Contents in a Separate Tab #96396

Open okmttdhr opened 22 hours ago

okmttdhr commented 22 hours ago

Currently, users can open the contents of the Help Center in a separate tab by clicking the title, but this action is not obvious and lacks visual cues. A more explicit option to open the support content in a new tab would improve accessibility, especially for users who prefer viewing help resources in a larger, separate window.

Image

A suggested solution may be adding an icon or hover text next to the title indicating that it will open in a new tab when clicked.

Context: p58i-iGA-p2

github-actions[bot] commented 22 hours ago

OpenAI suggested the following labels for this issue:

escapemanuele commented 21 hours ago

@lucasmendes-design I don't clearly remember that, but we used to have the external icon right to the title. Have we decided to remove it or was it by accident?

lucasmendes-design commented 18 hours ago

I don't clearly remember that, but we used to have the external icon right to the title. Have we decided to remove it or was it by accident?

I believe it was an accident. I haven't touched on these screens, and agree that we need a better affordance here. It's not clear to users that the title is clickable.

escapemanuele commented 15 hours ago

The ExternalLink component accepts a iconComponent

Image

But I don't know if I'm fully convinced by this

lucasmendes-design commented 12 hours ago

Yep, it's not great. Plus, clicking on the heading is not a common UX pattern that we used to use.

Can we do something like this? Image

escapemanuele commented 12 hours ago

That's not super immediate, since the part that starts from "A site icon, also..." is part of the content of the article already and comes from Support. But if needed we can do it, targeting the table of contents and inserting the link before that

lucasmendes-design commented 12 hours ago

Got it. Let's do something simpler then. Do you think the solution below is simpler?

Image

lucasmendes-design commented 12 hours ago

If it's not, let's just change the title color from gray to blue on hover. Also on hover, we can show the external icon.