Improve the readability of the external icon

[afercia]

Description

Splitting this out from the conversation on https://github.com/WordPress/gutenberg/issues/62644

As a general principle, making thins smaller isn't ideal for low vision users. There's a multitude of vision impairments where users struggle to distinguish a glyph or a character when their size is small. As mentioned in https://github.com/WordPress/gutenberg/issues/62644#issuecomment-2188122807 I've been observing a trend in the editor design where low vision users needs aren't very well considered and I'd love to see more focus on making things readable in the first place.

WordPress is a project that aims to be as accessible as possible. Reducing characters or glyphs size and / or making their shape thinner isn't the best way to make a design that is usable by everyone.

Disclaimer: I am a low vision user so I may be biased, but that also means I'm reporting some first-hand user experience that is pretty common for many other users with vision impairments.

The following comparison illustrates the evolution of the external icon across various releases of the editor. It's mainly focused on the usage of the external icon in combination with adjacent text, as it's the case for external links. I'd kindly ask to please focus on the readability of the icon first rather than its design balance and style.

1 This is how the icon looked like in WordPress 5.3. Although perhaps it wasn't the most balanced and elegant icon, it was very readable especially because of the thickness of its shape. The size was big enough.

2 This is how the icon in WordPress 5.8. Less readable but still good. In a way the thinner shape was compensated by a slightly bigger size.

3 This is how the icon in WordPress 5.9. With this version, there was a significant drop in the level of the icon readability. The size was significantly reduced and consequently the icon shape were even more thin. As a low vision user, from a certain distance, I struggle to understand whether this is an icon or it is some character that is part of the text

4 In https://github.com/WordPress/gutenberg/pull/50728 the icon was refactored to make it more balanced, which is good. However, it was also made slightly smaller. This is still the icon in use in the latest WordPress release 6.5:

The decreased size is clearly visible in a screenshot attached to the original PR, I'm going to attach it here as well for clarity:

It is worth noting that by reducing the size of the icon, the 'thickness' of its shape decreases as well. As such, the overall readability of the icon decreases. This version is the least readable of all. As a low vision user, I really struggle to distinguish this icon from the adjacent text.

It is interesting to note that some concerns were expressed in the original PR description as well, regarding the 'in-text usage' of the icon where the icon becomes really too small. A separate icon designed specifically for 'in-text usage' was considered but it was ultimately not implemented.

5 Lastly, in https://github.com/WordPress/gutenberg/pull/60255 the icon has been replaced with the unicode 'North East Arrow' character. Screenshot:

Based on my personal experience, this is slightly better than 3) and 4). At least, the arrow is a little bigger. However, the lack of a shape around it doesn't help. It's still less readable than 1) and 2) so I'm afraid I can't consider this change as an improvement.

Conclusion

Rather than a discussion about the technical implementation of this icon, this issue aims to illustrate a trend I've been observing for a while in this project. Design should prioritize accessibility, which in this case is the readability of hte icon. Instead, I see the evolution of this icon across the years has gone in the opposite direction. Other considerations have been prioritized over accessibility and readability.

I'd love to see this trend change in this project design. Design should aim to be accessible since the beginning and take into considerations the needs of all users. Although this is only the little history of an icon, it illustrates a trend that should be entirely reversed.

Back to the spdcific issue of this icon, I'd love ot see this icon design be changed to prioritize readability. At teh very lease, I'd encourage the idea of exploring an alternative icon for 'in-text usage' as mentioned in https://github.com/WordPress/gutenberg/pull/50728

Step-by-step reproduction instructions

N/A Examples of the external icon usage adjacent to text can be typically found in the Post excerpt UI or in the help text for the Image block alt text across the various versions of the editor.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[richtabor]

5 Lastly, in #60255 the icon has been replaced with the unicode 'North East Arrow' character.

This shape is the clearest balance between clarity and intention.

[afercia]

This shape is the clearest balance between clarity and intention.

Do you have any data, user testing, research or other resources to backup such a statement?

I'm not sure this kind of very assertive statements help in any way collaboration between contributors and, more importantly, with making WordPress a better software.

[richtabor]

I'm just stating that of the icons you've shared above, the current upRight arrow is visually the clearest, and largest, diagonal arrow icon of the lot-especially at small sizes.

It prioritizes readability, as you say is important to you. Are we not in agreement on this?

[afercia]

I'm just stating that of the icons you've shared above, the current upRight arrow is visually the clearest, and largest, diagonal arrow icon of the lot-especially at small sizes.

I'm a low vision user. I do know from my personal, daily, experience, what is more readable or less readable. The current icon is less readable. It's tinner, the overall perceivability of its shape is reduced compared to the original icon. Besides considerations on the cleanest, more elegant shape, this icon:

is way more readable than the new one: