[UX] Increase links visibility

[andersonjeccel]

Q	A
Bug fix? (use the a.b branch)	[ ]
New feature/enhancement? (use the a.x branch)	[ ]
Deprecations?	[ ]
BC breaks? (use the c.x branch)	[ ]
Automated tests included?	[ ]
Related user documentation PR URL	mautic/mautic-documentation#...
Related developer documentation PR URL	mautic/developer-documentation#...
Issue(s) addressed	Fixes #...

Description:

Based on feedback:

More intuitive (links in small, grey typeface that you don’t know are links is one example)

Users are finding it difficult to identify and interact with links due to their small size and color, which is affecting their navigation experience. They need a more intuitive and user-friendly interface where links are easily identifiable and clickable.

This PR improves the visibility and intuitiveness of links on tables by making them bold for resources like:

• name of a contact or company, which leads users to its profile
• name of a segment, which lands on the segment's details
• also other items like this to make everything consistent

Other table links remain in normal font weight.
This change is combined with the darken effect that happens when you're hovering over these links.

Usually, platforms tend to use a saturated color to indicate these links, which is not sufficient for Mautic's specific scenario since its blue brand color is muted.

Steps to test this PR:

1. Open this PR on Gitpod or pull down for testing locally (see docs on testing PRs here)
2. Open Contacts > Create a new > Go back to the list and see the name in bold

[LordRembo]

I have an alternative suggestion: underline the links instead of making them bold.
The most easily reconizable characteristic of an link, is an underline.
Making it bold introduce more ambiguity, because it will just look the same as the table headings.

[LordRembo]

From an Accessibility standpoint, links should not be visual styles similar to other elements in the content/text (like bold or highlight) but visually distinct. Eg. they can be bold or highlighted if you absolutely want them to be, but then they should be designed to look like they are clickable (eg. look like a button or have an icon or add an underline in addition to the bold/highlighted style)

[Mike-Dropsolid]

I have an alternative suggestion: underline the links instead of making them bold. The most easily reconizable characteristic of an link, is an underline. Making it bold introduce more ambiguity, because it will just look the same as the table headings.

I know that's the theory but it does feel... weird/uncommon to underline it in this particular use case. I checked a few tools (WordPress, Accountable, Combell, ...) and they all put it in bold with a clear hover. Theory vs habit?

[andersonjeccel]

@LordRembo @Mike-Dropsolid

The ideal scenario here would be to keep a normal font weight but apply a saturated color. For the Mautic brand, it could be the yellow or green (everyone would probably find it weird since these colors are rarely used on UI). Is it there a possibility for us to consider? Could I make all links yellow or green?

An underline is commonly used for accessibility improvement as a feature which you can enable/disable but it’s not exactly often used on the “normal theme”/for all users… We would also have the same issue since columns header are also a link

The point about theory vs habit is important: things become recognizable through repetition. If we keep everything consistent, probably it would be all good to proceed this way

[LordRembo]

If we can get another review that agrees with just making it bold, I'm fine with it. In the end, consistency and habit are the best indicators if something will work or not. No need to change the colors or styles to something that is not used anywhere.

[code5rick]

I like the proposed idea. My only suggestion would be to consider using a slightly lighter font weight for the link probably. Additionally, I would recommend making the links in the 'thead' regular font weight instead of bold, to distinguish them from the links in the list. Other than that, it looks good! 👌

[andersonjeccel]

@code5rick We would fall into the issue mentioned on the feedback, now for thead links, if they become not-bold

@RCheesley Any UX idea here?

[RCheesley]

I'm afraid I'm from the old school ... underlines signify to me that something's a link! 🙈

I like how Joomla does it with their accessibility plugin which ships with core and can be turned on, it gives the user the power to change links to be underlined and a bunch more stuff based on their own needs. You can see it in action on my site here. Could be something to consider in the future, maybe.

From their article, it states:

WCAG does not require the links to be underlined (they must be highlighted). But underlined links can improve accessibility for visually impaired people or for people who have difficulty concentrating.

I think making them bold does help if we don't want to underline. I don't think yellow/green would help as those colours don't go well on a white background, but maybe a hover of those colours (probs the Mautic yellow) might assist with signifying a clickable link, if we really want to avoid underlining.

[andersonjeccel]

@code5rick
Our font weight options are:

300 (light)
400 (normal, currently used)
600 (semibold)
700 (bold, on the screenshot)

I can set 600 to be a bit thicker, but should it be applied to all links on the interface or only to the ones on the second column of all tables?

[andersonjeccel]

@RCheesley It would be good if we had a feature like this (lots of enable/disable for each accessibility item)

If hard to implement, a high contrast theme with standard accessibility changes would also work fine (kind of a LESS file where accessibility features overwrite the normal theme rules)

Regarding the link on tables, this one is hard. Could you select 1 way to proceed, then we start a slack discussion to decide if we implement it or not?

The options:

1. Bold (increase visibility, subtle, not accessible)
2. Underline (increase visibility, commonly recognized but not subtle at all, accessible)

(an additional comment: is this comparison fair? Is it right to compare accessible vs non-accessible? If not, would bold be the only option? Should we give up on this change for now?)

[RCheesley]

So, these are the options I think we're considering here:

Personally, I don't think that making it bold gives enough of direction to the user that it's a click-able link. I think that regular underline (without bold) would be the best option for making it clear it's a link, but it doesn't look so 'tidy'.

So I would indeed put this out for discussion in the community and get wider viewpoints.